Provide a swipe navigation distance setting for users to config along

with swipe progress indicator fixes #9615 #2477 Auditors: @cezaraugusto, @bbondy, @bradleyrichter Test Plan: 1. Adjust swipe navigation distance setting in about:preferences#advanced 2. And swipe to navigate by different settings It shouldn't show up on linux and window
brave · Jun 29, 2017 · be52976 · be52976
1 parent 4147821
commit be52976
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 6 deletions.
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/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
+swipeNavigationDistance=Swipe Navigation Distance
+short=Short
+long=Long
 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
@@ -222,18 +222,37 @@ class Main extends ImmutableComponent {
       if (trackingFingers) {
         deltaX = deltaX + e.deltaX
         deltaY = deltaY + e.deltaY
+        const distanceThreshold = getSetting(settings.SWIPE_NAV_DISTANCE)
+        const percent = Math.abs(deltaX) / distanceThreshold
+        if (isSwipeOnRightEdge) {
+          if (percent > 1) {
+            appActions.swipedRight(1)
+          } else {
+            appActions.swipedRight(percent)
+          }
+        } else if (isSwipeOnLeftEdge) {
+          if (percent > 1) {
+            appActions.swipedLeft(1)
+          } else {
+            appActions.swipedLeft(percent)
+          }
+        }
         time = (new Date()).getTime() - startTime
       }
     }, { passive: true })
 
     ipc.on('scroll-touch-end', () => {
-      if (trackingFingers && time > 30 && Math.abs(deltaY) < 80) {
-        if (deltaX > 70 && isSwipeOnRightEdge) {
+      const distanceThreshold = getSetting(settings.SWIPE_NAV_DISTANCE)
+      const timeThreshold = 80
+      if (trackingFingers && time > timeThreshold && Math.abs(deltaY) < distanceThreshold) {
+        if (deltaX > distanceThreshold && isSwipeOnRightEdge) {
           ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_FORWARD)
-        } else if (deltaX < -70 && isSwipeOnLeftEdge) {
+        } else if (deltaX < -distanceThreshold && isSwipeOnLeftEdge) {
           ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_BACK)
         }
       }
+      appActions.swipedLeft(0)
+      appActions.swipedRight(0)
       trackingFingers = false
       deltaX = 0
       deltaY = 0

diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
@@ -152,6 +152,8 @@ class Navigator extends React.Component {
 
   mergeProps (state, ownProps) {
     const currentWindow = state.get('currentWindow')
+    const swipeLeftPercent = state.get('swipeLeftPercent')
+    const swipeRightPercent = state.get('swipeRightPercent')
     const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
     const activeFrameKey = activeFrame.get('key')
     const activeTabId = activeFrame.get('tabId') || tabState.TAB_ID_NONE
@@ -190,6 +192,18 @@ class Navigator extends React.Component {
     props.isWideURLbarEnabled = getSetting(settings.WIDE_URL_BAR)
     props.showNavigationBar = activeFrameKey !== undefined &&
       state.get('siteSettings') !== undefined
+    props.swipeLeftPercent = swipeLeftPercent ? (swipeLeftPercent + 1) * 1.2 : 1
+    props.swipeRightPercent = swipeRightPercent ? (swipeRightPercent + 1) * 1.2 : 1
+    // 0.85 is the default button opacity in less/navigationBar.less
+    // Remove this magic number once we migrate to Aphrodite
+    props.swipeLeftOpacity = 0.85 - (swipeLeftPercent > 0.65 ? 0.65 : swipeLeftPercent)
+    props.swipeRightOpacity = 0.85 - (swipeRightPercent > 0.65 ? 0.65 : swipeRightPercent)
+    if (swipeLeftPercent === 1) {
+      props.swipeLeftOpacity = 0.85
+    }
+    if (swipeRightPercent === 1) {
+      props.swipeRightOpacity = 0.85
+    }
 
     // used in other functions
     props.isNavigable = activeFrame && isNavigatableAboutPage(getBaseUrl(activeFrame.get('location')))
@@ -230,7 +244,11 @@ class Navigator extends React.Component {
                 navigationButtonContainer: true,
                 nav: true,
                 disabled: !this.props.canGoBack
-              })}>
+              })}
+              style={{
+                transform: this.props.canGoBack ? `scale(${this.props.swipeLeftPercent})` : `scale(1)`,
+                opacity: `${this.props.swipeLeftOpacity}`
+              }}>
               <LongPressButton
                 testId={!this.props.canGoBack ? 'backButtonDisabled' : 'backButton'}
                 l10nId='backButton'
@@ -249,7 +267,11 @@ class Navigator extends React.Component {
                 navigationButtonContainer: true,
                 nav: true,
                 disabled: !this.props.canGoForward
-              })}>
+              })}
+              style={{
+                transform: this.props.canGoForward ? `scale(${this.props.swipeRightPercent})` : `scale(1)`,
+                opacity: `${this.props.swipeRightOpacity}`
+              }}>
               <LongPressButton
                 testId={!this.props.canGoForward ? 'forwardButtonDisabled' : 'forwardButton'}
                 l10nId='forwardButton'

diff --git a/app/renderer/components/preferences/advancedTab.js b/app/renderer/components/preferences/advancedTab.js
@@ -35,6 +35,30 @@ class AdvancedTab extends ImmutableComponent {
         onChangeSetting={this.props.onChangeSetting} />
   }
 
+  get swipeNavigationDistanceSetting () {
+    if (platformUtil.isDarwin()) {
+      return <div>
+        <DefaultSectionTitle data-l10n-id='swipeNavigationDistance' />
+        <SettingsList listClassName={css(styles.swipeNavigation)}>
+          <span data-l10n-id='short' className={css(styles.swipeNavigation__shortLabel)} />
+          <input type='range' min='1' max='201' step='50' list='swipeDistance'
+            value={getSetting(settings.SWIPE_NAV_DISTANCE, this.props.settings)}
+            onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.SWIPE_NAV_DISTANCE)} />
+          <datalist id='swipeDistance'>
+            <option value='1' />
+            <option value='51' />
+            <option value='101' />
+            <option value='151' />
+            <option value='201' />
+          </datalist>
+          <span data-l10n-id='long' className={css(styles.swipeNavigation__longLabel)} />
+        </SettingsList>
+      </div>
+    }
+
+    return null
+  }
+
   render () {
     return <section>
       <main className={css(styles.advancedTabMain)}>
@@ -62,6 +86,8 @@ class AdvancedTab extends ImmutableComponent {
           </SettingItem>
         </SettingsList>
 
+        {this.swipeNavigationDistanceSetting}
+
         <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__shortLabel: {
+    marginRight: '5px'
+  },
+
+  swipeNavigation__longLabel: {
+    marginLeft: '5px'
+  },
+
   moreInfo: {
     display: 'flex',
     flex: 1,

diff --git a/js/actions/appActions.js b/js/actions/appActions.js
@@ -1455,6 +1455,20 @@ const appActions = {
     dispatch({
       actionType: appConstants.APP_ON_CANCEL_BROWSING_DATA
     })
+  },
+
+  swipedLeft: function (percent) {
+    dispatch({
+      actionType: appConstants.APP_SWIPE_LEFT,
+      percent
+    })
+  },
+
+  swipedRight: function (percent) {
+    dispatch({
+      actionType: appConstants.APP_SWIPE_RIGHT,
+      percent
+    })
   }
 }
 

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-distance': 101,
     'shutdown.clear-history': false,
     'shutdown.clear-downloads': false,
     'shutdown.clear-cache': false,

diff --git a/js/constants/appConstants.js b/js/constants/appConstants.js
@@ -135,7 +135,9 @@ const appConstants = {
   APP_URL_BAR_SELECTED_INDEX_CHANGED: _,
   APP_ON_TOGGLE_BROWSING_DATA: _,
   APP_ON_CANCEL_BROWSING_DATA: _,
-  APP_SET_SKIP_SYNC: _
+  APP_SET_SKIP_SYNC: _,
+  APP_SWIPE_LEFT: _,
+  APP_SWIPE_RIGHT: _
 }
 
 module.exports = mapValuesByKeys(appConstants)
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_DISTANCE: 'advanced.swipe-nav-distance',
   // Sync settings
   SYNC_ENABLED: 'sync.enabled',
   SYNC_DEVICE_NAME: 'sync.device-name',

diff --git a/js/stores/appStore.js b/js/stores/appStore.js
@@ -899,6 +899,12 @@ const handleAppAction = (action) => {
     case appConstants.APP_DEFAULT_SEARCH_ENGINE_LOADED:
       appState = appState.set('searchDetail', action.searchDetail)
       break
+    case appConstants.APP_SWIPE_LEFT:
+      appState = appState.set('swipeLeftPercent', action.percent)
+      break
+    case appConstants.APP_SWIPE_RIGHT:
+      appState = appState.set('swipeRightPercent', action.percent)
+      break
     default:
   }