Use JavaScript to improve pull-to-refresh

Detect nested scroll from JS to avoid triggering unwanted refresh.
Close #797.

Author: Slion

app/build.gradle

@@ -483,7 +483,8 @@ mezzanine {
             "src/main/html/private.html",
             "src/main/js/InvertPage.js",
             "src/main/js/SetMetaViewport.js",
-            "src/main/js/ThemeColor.js"
+            "src/main/js/ThemeColor.js",
+            "src/main/js/NestedScrollDetect.js"
     )
 }
 

app/src/main/java/fulguris/di/AppModule.kt

@@ -9,6 +9,7 @@ import fulguris.html.ListPageReader
 import fulguris.html.bookmark.BookmarkPageReader
 import fulguris.html.homepage.HomePageReader
 import fulguris.js.InvertPage
+import fulguris.js.NestedScrollDetect
 import fulguris.js.TextReflow
 import fulguris.js.ThemeColor
 import fulguris.js.SetMetaViewport
@@ -195,6 +196,9 @@ class AppModule {
 
     @Provides
     fun providesSetMetaViewport(): SetMetaViewport = mezzanine<SetMetaViewport>()
+
+    @Provides
+    fun providesNestedScrollDetect(): NestedScrollDetect = mezzanine<NestedScrollDetect>()
 }
 
 @Qualifier

app/src/main/java/fulguris/di/EntryPoint.kt

@@ -12,6 +12,7 @@ import fulguris.download.DownloadHandler
 import fulguris.favicon.FaviconModel
 import fulguris.html.homepage.HomePageFactory
 import fulguris.js.InvertPage
+import fulguris.js.NestedScrollDetect
 import fulguris.js.SetMetaViewport
 import fulguris.js.TextReflow
 import fulguris.js.ThemeColor
@@ -58,6 +59,7 @@ interface HiltEntryPoint {
     val invertPageJs: InvertPage
     val setMetaViewport: SetMetaViewport
     val themeColorJs: ThemeColor
+    val nestedScrollDetectJs: NestedScrollDetect
     val homePageFactory: HomePageFactory
     val abpBlockerManager: AbpBlockerManager
     val noopBlocker: NoOpAdBlocker
@@ -75,5 +77,3 @@ interface HiltEntryPoint {
     var clipboardManager: ClipboardManager
 
 }
-
-

app/src/main/java/fulguris/js/NestedScrollDetect.kt

@@ -0,0 +1,13 @@
+package fulguris.js
+
+import com.anthonycr.mezzanine.FileStream
+
+/**
+ * Detects whether a touch event targets a nested CSS scrollable element.
+ * Notifies the native side via the _fulgurisScroll JavaScript interface
+ * so that pull-to-refresh can be suppressed when appropriate.
+ */
+@FileStream("src/main/js/NestedScrollDetect.js")
+interface NestedScrollDetect {
+    fun provideJs(): String
+}

app/src/main/java/fulguris/view/PullRefreshLayout.kt

@@ -72,6 +72,21 @@ class PullRefreshLayout(context: Context, attrs: AttributeSet?) : SwipeRefreshLa
         return iFieldTarget.get(this) as View?
     }
 
+    /**
+     * Prevents pull-to-refresh from triggering when the user is scrolling inside
+     * a nested CSS scrollable element (e.g. overflow:auto sidebar) within the web page.
+     * When JavaScript detects the touch is on such an element, [WebViewEx.isTouchOnNestedScrollable]
+     * is set to true, and we report the child as scrollable to block interception.
+     */
+    override fun canChildScrollUp(): Boolean {
+        callEnsureTarget()
+        val target = getTarget()
+        if (target is WebViewEx && target.isTouchOnNestedScrollable) {
+            return true
+        }
+        return super.canChildScrollUp()
+    }
+
     /**
      *
      */

app/src/main/java/fulguris/view/WebPageClient.kt

@@ -25,6 +25,7 @@ import kotlinx.coroutines.launch as coroutineLaunch
 import kotlinx.coroutines.withContext
 import fulguris.html.homepage.HomePageFactory
 import fulguris.js.InvertPage
+import fulguris.js.NestedScrollDetect
 import fulguris.js.SetMetaViewport
 import fulguris.js.TextReflow
 import fulguris.permissions.PermissionsManager
@@ -95,6 +96,7 @@ class WebPageClient(
     val textReflowJs: TextReflow = hiltEntryPoint.textReflowJs
     val invertPageJs: InvertPage = hiltEntryPoint.invertPageJs
     val setMetaViewport: SetMetaViewport = hiltEntryPoint.setMetaViewport
+    val nestedScrollDetectJs: NestedScrollDetect = hiltEntryPoint.nestedScrollDetectJs
     val homePageFactory: HomePageFactory = hiltEntryPoint.homePageFactory
     val abpBlockerManager: AbpBlockerManager = hiltEntryPoint.abpBlockerManager
     val noopBlocker: NoOpAdBlocker = hiltEntryPoint.noopBlocker
@@ -337,7 +339,7 @@ class WebPageClient(
         iResourceCount++
         Timber.d("$ihs : onLoadResource - ${if (isForMainFrame) "Main frame" else "Resource"} - $iResourceCount - $url")
     }
-    
+
     /**
      *
      */
@@ -347,7 +349,7 @@ class WebPageClient(
             webBrowser.onTabChangedUrl(webPageTab)
         }
     }
-    
+
 
     /**
      * Overrides [WebViewClient.onPageFinished].
@@ -379,6 +381,14 @@ class WebPageClient(
         // Flag that we have called onPageFinished
         onPageFinishedDone = true
 
+        // Inject nested scroll detection so that pull-to-refresh is suppressed when
+        // the user scrolls inside a CSS overflow:auto/scroll element (e.g. a sidebar).
+        // Only inject if pull-to-refresh is enabled and JavaScript is enabled.
+        // Though if the config changes we could be missing it...
+        if (view.context.configPrefs.pullToRefresh && view.settings.javaScriptEnabled) {
+            view.evaluateJavascript(nestedScrollDetectJs.provideJs(), null)
+        }
+
         // Execute and clear callback registered with loadUrl
         webPageTab.onLoadCompleteCallback?.invoke()
         webPageTab.onLoadCompleteCallback = null
@@ -1228,4 +1238,3 @@ class WebPageClient(
         super.onSafeBrowsingHit(view, request, threatType, callback)
     }
 }
-

app/src/main/java/fulguris/view/WebViewEx.kt

@@ -1,5 +1,6 @@
 package fulguris.view
 
+import android.annotation.SuppressLint
 import android.content.Context
 import android.print.PrintAttributes
 import android.print.PrintDocumentAdapter
@@ -9,6 +10,7 @@ import android.util.AttributeSet
 import android.view.KeyEvent
 import android.view.MotionEvent
 import android.view.View
+import android.webkit.JavascriptInterface
 import android.webkit.WebView
 import androidx.annotation.ColorInt
 import fulguris.extensions.ihs
@@ -23,15 +25,45 @@ import timber.log.Timber
  */
 class WebViewEx : WebView {
     constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
+        initNestedScrollDetection()
     }
 
     constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
-
+        initNestedScrollDetection()
     }
 
     //
     lateinit var proxy: WebPageTab
 
+    /**
+     * True when the current touch gesture started on a nested CSS scrollable element
+     * (e.g. a div with overflow:auto/scroll whose content overflows).
+     * Set from JavaScript via [NestedScrollBridge] on `touchstart`, reset on `touchend`/`touchcancel`.
+     * Read from [PullRefreshLayout.canChildScrollUp] on the UI thread.
+     */
+    @Volatile
+    var isTouchOnNestedScrollable: Boolean = false
+
+    @SuppressLint("JavascriptInterface")
+    private fun initNestedScrollDetection() {
+        addJavascriptInterface(NestedScrollBridge(), NESTED_SCROLL_JS_INTERFACE)
+    }
+
+    /**
+     * JavaScript interface that lets injected page scripts tell us whether the current
+     * touch gesture started on a nested scrollable CSS element.
+     */
+    inner class NestedScrollBridge {
+        @JavascriptInterface
+        fun setNestedScrollable(value: Boolean) {
+            isTouchOnNestedScrollable = value
+        }
+    }
+
+    companion object {
+        const val NESTED_SCROLL_JS_INTERFACE = "_fulgurisScroll"
+    }
+
     override fun dispatchKeyEvent(event: KeyEvent?): Boolean {
 
         /*

app/src/main/js/NestedScrollDetect.js

@@ -0,0 +1,58 @@
+/*
+ * The contents of this file are subject to the Common Public Attribution License Version 1.0.
+ * (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at:
+ * https://github.com/Slion/Fulguris/blob/main/LICENSE.CPAL-1.0.
+ * The License is based on the Mozilla Public License Version 1.1, but Sections 14 and 15 have been
+ * added to cover use of software over a computer network and provide for limited attribution for
+ * the Original Developer. In addition, Exhibit A has been modified to be consistent with Exhibit B.
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTY OF
+ * ANY KIND, either express or implied. See the License for the specific language governing rights
+ * and limitations under the License.
+ *
+ * The Original Code is Fulguris.
+ *
+ * The Original Developer is the Initial Developer.
+ * The Initial Developer of the Original Code is Stéphane Lenclud.
+ *
+ * All portions of the code written by Stéphane Lenclud are Copyright © 2020 Stéphane Lenclud.
+ * All Rights Reserved.
+ */
+
+(function() {
+    if (window._fulgurisScrollInstalled) return;
+    window._fulgurisScrollInstalled = true;
+
+    function isScrollableElement(el) {
+        if (!el || el === document.documentElement || el === document.body) return false;
+        var style = window.getComputedStyle(el);
+        var overflowY = style.overflowY;
+        if ((overflowY === 'auto' || overflowY === 'scroll') && el.scrollHeight > el.clientHeight) {
+            return true;
+        }
+        return false;
+    }
+
+    function hasScrollableAncestor(el) {
+        while (el) {
+            if (isScrollableElement(el)) return true;
+            el = el.parentElement;
+        }
+        return false;
+    }
+
+    document.addEventListener('touchstart', function(e) {
+        try {
+            window._fulgurisScroll.setNestedScrollable(hasScrollableAncestor(e.target));
+        } catch(ex) {}
+    }, true);
+
+    document.addEventListener('touchend', function() {
+        try { window._fulgurisScroll.setNestedScrollable(false); } catch(ex) {}
+    }, true);
+
+    document.addEventListener('touchcancel', function() {
+        try { window._fulgurisScroll.setNestedScrollable(false); } catch(ex) {}
+    }, true);
+})();