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
brave · Jun 21, 2017 · 5aff067 · 5aff067
1 parent 1007e8c
commit 5aff067
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 3 deletions.
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
@@ -269,6 +269,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)

diff --git a/app/renderer/components/main/main.js b/app/renderer/components/main/main.js
@@ -239,10 +239,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 > 50 && Math.abs(deltaY) < 80) {
+        if (deltaX > threshold && isSwipeOnRightEdge) {
           ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_FORWARD)
-        } else if (deltaX < -70 && isSwipeOnLeftEdge) {
+        } else if (deltaX < -threshold && isSwipeOnLeftEdge) {
           ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_BACK)
         }
       }

diff --git a/app/renderer/components/preferences/advancedTab.js b/app/renderer/components/preferences/advancedTab.js
@@ -21,8 +21,32 @@ const {scaleSize} = require('../../../common/constants/toolbarUserInterfaceScale
 
 // Utils
 const {changeSetting} = require('../../lib/settingsUtil')
+const platformUtil = require('../../../common/lib/platformUtil')
 
 class AdvancedTab extends ImmutableComponent {
+  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='400' step='100' 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='100' />
+            <option value='200' />
+            <option value='300' />
+            <option value='400' />
+          </datalist>
+          <span data-l10n-id='slow' className={css(styles.swipeNavigation__slowLabel)} />
+        </SettingsList>
+      </div>
+    }
+
+    return null
+  }
   render () {
     return <section>
       <main className={css(styles.advancedTabMain)}>
@@ -50,6 +74,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} />
@@ -68,6 +94,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,

diff --git a/js/constants/appConfig.js b/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': 200,
     'shutdown.clear-history': false,
     'shutdown.clear-downloads': false,
     'shutdown.clear-cache': false,

diff --git a/js/constants/settings.js b/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',