Prevent two-finger swipe forard/back when scrolling on viewport

fix brave#2577

Author: darkdh

app/extensions/brave/content/scripts/inputHandler.js

@@ -156,3 +156,17 @@ document.addEventListener('keydown', (e /*: Event*/) => {
       break
   }
 })
+
+chrome.ipc.on('check-swipe-back', (e) => {
+  if (document.scrollingElement.scrollLeft === 0) {
+    chrome.ipc.sendToHost('can-swipe-back')
+  }
+})
+
+chrome.ipc.on('check-swipe-forward', (e) => {
+  const scrollEle = document.scrollingElement
+  if (scrollEle.scrollLeft === 0 ||
+    scrollEle.scrollLeft === (scrollEle.scrollWidth - scrollEle.clientWidth)) {
+    chrome.ipc.sendToHost('can-swipe-forward')
+  }
+})

js/actions/webviewActions.js

@@ -4,6 +4,8 @@
 
 'use strict'
 
+const messages = require('../constants/messages.js')
+
 const getWebview = () =>
   document.querySelector('.frameWrapper.isActive webview')
 
@@ -49,6 +51,21 @@ const webviewActions = {
     if (webview) {
       webview.showDefinitionForSelection()
     }
+  },
+
+  /**
+   * Check two-finger gesture swipe back/forward ability
+   * @param {bool} back - true for back, false for forward
+   */
+  checkSwipe: function (back) {
+    const webview = getWebview()
+    if (webview) {
+      if (back) {
+        webview.send(messages.CHECK_SWIPE_BACK)
+      } else {
+        webview.send(messages.CHECK_SWIPE_FORWARD)
+      }
+    }
   }
 }
 

js/components/frame.js

@@ -505,6 +505,12 @@ class Frame extends ImmutableComponent {
         case messages.GO_FORWARD:
           method = () => this.webview.goForward()
           break
+        case messages.CAN_SWIPE_BACK:
+          remote.getCurrentWindow().webContents.send(messages.CAN_SWIPE_BACK)
+          break
+        case messages.CAN_SWIPE_FORWARD:
+          remote.getCurrentWindow().webContents.send(messages.CAN_SWIPE_FORWARD)
+          break
         case messages.NEW_FRAME:
           method = (frameOpts, openInForeground) => {
             windowActions.newFrame(frameOpts, openInForeground)

js/components/main.js

@@ -110,34 +110,46 @@ class Main extends ImmutableComponent {
   registerSwipeListener () {
     // Navigates back/forward on macOS two-finger swipe
     var trackingFingers = false
+    var canSwipeBack = false
+    var canSwipeForward = false
     var deltaX = 0
     var deltaY = 0
     var startTime = 0
-    var xVelocity = 0
-    var yVelocity = 0
+    var time
 
     this.mainWindow.addEventListener('wheel', (e) => {
       if (trackingFingers) {
         deltaX = deltaX + e.deltaX
         deltaY = deltaY + e.deltaY
-        var time = (new Date()).getTime() - startTime
-        xVelocity = deltaX / time
-        yVelocity = deltaY / time
+        time = (new Date()).getTime() - startTime
+        if (deltaX > 0) {
+          webviewActions.checkSwipe(false)
+        } else if (deltaX < 0) {
+          webviewActions.checkSwipe(true)
+        }
       }
     })
+    ipc.on(messages.CAN_SWIPE_BACK, (e) => {
+      canSwipeBack = true
+    })
+    ipc.on(messages.CAN_SWIPE_FORWARD, (e) => {
+      canSwipeForward = true
+    })
     ipc.on('scroll-touch-begin', function () {
       trackingFingers = true
       startTime = (new Date()).getTime()
     })
     ipc.on('scroll-touch-end', function () {
-      if (trackingFingers && Math.abs(yVelocity) < 1) {
-        if (xVelocity > 1.5) {
+      if (time > 50 && trackingFingers && Math.abs(deltaY) < 50) {
+        if (deltaX > 100 && canSwipeForward) {
           ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_FORWARD)
-        } else if (xVelocity < -1.5) {
+        } else if (deltaX < -100 && canSwipeBack) {
           ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_BACK)
         }
       }
       trackingFingers = false
+      canSwipeBack = false
+      canSwipeForward = false
       deltaX = 0
       deltaY = 0
       startTime = 0

js/constants/messages.js

@@ -74,6 +74,10 @@ const messages = {
   SET_RESOURCE_ENABLED: _,
   GO_BACK: _,
   GO_FORWARD: _,
+  CAN_SWIPE_BACK: _,
+  CAN_SWIPE_FORWARD: _,
+  CHECK_SWIPE_BACK: _,
+  CHECK_SWIPE_FORWARD: _,
   // Password manager
   GET_PASSWORDS: _, /** @arg {string} formOrigin, @arg {string} action */
   GOT_PASSWORD: _, /** @arg {string} username, @arg {string} password, @arg {string} origin, @arg {string} action, @arg {boolean} isUnique */