Provide a swipe navigation sensitivity setting for users to config

fixes #9615

Auditors: @cezaraugusto, @bbondy, @bradleyrichter

Test Plan:
1. Adjust swipe navigation sesitivity setting in
about:preferences#advanced
2. And swipe to navigate by different settings

It shouldn't show up on linux and window

app/extensions/brave/locales/en-US/preferences.properties

@@ -270,6 +270,9 @@ useHardwareAcceleration=Use hardware acceleration when available *
 useSmoothScroll=Enable smooth scrolling *
 defaultZoomLevel=Default zoom level
 toolbarUserInterfaceScale=Toolbar and UI elements scale
+swipeNavigationSensitivity=Swipe Navigation Sensitivity
+fast=Fast
+slow=Slow
 en-US=English (U.S.)
 nl-NL=Dutch (Netherlands)
 pt-BR=Portuguese (Brazil)

app/renderer/components/main/main.js

@@ -229,10 +229,11 @@ class Main extends ImmutableComponent {
  }, { passive: true })
 
  ipc.on('scroll-touch-end', () => {
- if (trackingFingers && time > 30 && Math.abs(deltaY) < 80) {
- if (deltaX > 70 && isSwipeOnRightEdge) {
+ const threshold = getSetting(settings.SWIPE_NAV_SENSITIVITY)
+ if (trackingFingers && time > threshold && Math.abs(deltaY) < 80) {
+ if (deltaX > 80 && isSwipeOnRightEdge) {
  ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_FORWARD)
- } else if (deltaX < -70 && isSwipeOnLeftEdge) {
+ } else if (deltaX < -80 && isSwipeOnLeftEdge) {
  ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_BACK)
  }
  }

app/renderer/components/preferences/advancedTab.js

@@ -35,6 +35,30 @@ class AdvancedTab extends ImmutableComponent {
  onChangeSetting={this.props.onChangeSetting} />
  }
 
+ get swipeNavigationSensitivitySetting () {
+ if (platformUtil.isDarwin()) {
+ return <div>
+ <DefaultSectionTitle data-l10n-id='swipeNavigationSensitivity' />
+ <SettingsList listClassName={css(styles.swipeNavigation)}>
+ <span data-l10n-id='fast' className={css(styles.swipeNavigation__fastLabel)} />
+ <input type='range' min='0' max='200' step='50' list='swipetSensitivity'
+ value={getSetting(settings.SWIPE_NAV_SENSITIVITY, this.props.settings)}
+ onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.SWIPE_NAV_SENSITIVITY)} />
+ <datalist id='swipetSensitivity'>
+ <option value='0' />
+ <option value='50' />
+ <option value='100' />
+ <option value='150' />
+ <option value='200' />
+ </datalist>
+ <span data-l10n-id='slow' className={css(styles.swipeNavigation__slowLabel)} />
+ </SettingsList>
+ </div>
+ }
+
+ return null
+ }
+
  render () {
  return <section>
  <main className={css(styles.advancedTabMain)}>
@@ -62,6 +86,8 @@ class AdvancedTab extends ImmutableComponent {
  </SettingItem>
  </SettingsList>
 
+ {this.swipeNavigationSensitivitySetting}
+
  <DefaultSectionTitle data-l10n-id='urlBarOptions' />
  <SettingsList>
  <SettingCheckbox dataL10nId='disableTitleMode' prefKey={settings.DISABLE_TITLE_MODE} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
@@ -80,6 +106,19 @@ const styles = StyleSheet.create({
  paddingBottom: '40px'
  },
 
+ swipeNavigation: {
+ display: 'flex',
+ alignItems: 'center'
+ },
+
+ swipeNavigation__fastLabel: {
+ marginRight: '5px'
+ },
+
+ swipeNavigation__slowLabel: {
+ marginLeft: '5px'
+ },
+
  moreInfo: {
  display: 'flex',
  flex: 1,

js/constants/appConfig.js

@@ -195,6 +195,7 @@ module.exports = {
  'advanced.auto-suggest-sites': true,
  'advanced.hide-lower-sites': true,
  'advanced.toolbar-ui-scale': 'normal',
+ 'advanced.swipe-swipe-nav-sensitivity': 100,
  'shutdown.clear-history': false,
  'shutdown.clear-downloads': false,
  'shutdown.clear-cache': false,

js/constants/settings.js

@@ -78,6 +78,7 @@ const settings = {
  MINIMUM_VISITS: 'advanced.minimum-visits',
  AUTO_SUGGEST_SITES: 'advanced.auto-suggest-sites',
  TOOLBAR_UI_SCALE: 'advanced.toolbar-ui-scale',
+ SWIPE_NAV_SENSITIVITY: 'advanced.swipe-nav-sensitivity',
  // Sync settings
  SYNC_ENABLED: 'sync.enabled',
  SYNC_DEVICE_NAME: 'sync.device-name',