fix: Fixed swipe gestures when there's a scrollbar, b=(no-bug), c=workspaces

src/toolkit/content/widgets/arrowscrollbox-js.patch

@@ -1,21 +1,13 @@
 diff --git a/toolkit/content/widgets/arrowscrollbox.js b/toolkit/content/widgets/arrowscrollbox.js
-index f9191af09f1b7a1654aff62807e7dad573afc172..0b81a2bf5a0e1d745623f9b72fbe57254c1b16dd 100644
+index 0b81a2bf5a0e1d745623f9b72fbe57254c1b16dd..f49ad7cb08f5d2be4a03046c191361f8c8a004bc 100644
 --- a/toolkit/content/widgets/arrowscrollbox.js
 +++ b/toolkit/content/widgets/arrowscrollbox.js
-@@ -98,6 +98,7 @@
+@@ -640,7 +640,7 @@
- 
-       let slot = this.shadowRoot.querySelector("slot");
-       let overflowObserver = new ResizeObserver(_ => {
-+        if (this.id == 'tabbrowser-arrowscrollbox') return; // zen: do NOT underflow/overflow on tabbrowser-arrowscrollbox
-         let contentSize =
-           slot.getBoundingClientRect()[this.#verticalMode ? "height" : "width"];
-         // NOTE(emilio): This should be contentSize > scrollClientSize, but due
-@@ -639,7 +640,7 @@
  
      on_wheel(event) {
        // Don't consume the event if we can't scroll.
--      if (!this.overflowing) {
+-      if (!this.overflowing || this.id === 'tabbrowser-arrowscrollbox' || (event.deltaY == 0 && this.classList.contains('workspace-arrowscrollbox'))) {
-+      if (!this.overflowing || this.id === 'tabbrowser-arrowscrollbox' || (event.deltaY == 0 && this.classList.contains('workspace-arrowscrollbox'))) {
++      if (!this.overflowing || this.id === 'tabbrowser-arrowscrollbox' || ((event.deltaY == 0 || gZenWorkspaces._swipeState?.isGestureActive) && this.classList.contains('workspace-arrowscrollbox'))) {
          return;
        }
  

src/zen/workspaces/ZenWorkspace.mjs

@@ -95,13 +95,6 @@
         get: () => 36,
       });
 
-      if (
-        Services.prefs.getBoolPref('zen.workspaces.swipe-actions', false) &&
-        gZenWorkspaces.workspaceEnabled
-      ) {
-        gZenWorkspaces.attachGestureHandlers(this);
-      }
-
       // Add them manually since attribute inheritance doesn't work
       // for multiple layers of shadow DOM.
       this.tabsContainer.setAttribute('zen-workspace-id', this.id);

src/zen/workspaces/ZenWorkspaces.mjs

@@ -138,6 +138,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
       Services.prefs.getBoolPref('zen.workspaces.swipe-actions', false) &&
       this.workspaceEnabled
     ) {
+      this.initializeGestureHandlers();
       this.initializeWorkspaceNavigation();
     }
 
@@ -582,6 +583,20 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
   }
 
+  initializeGestureHandlers() {
+    const elements = [
+      gNavToolbox,
+      // event handlers do not work on elements inside shadow DOM so we need to attach them directly
+      document.getElementById('tabbrowser-arrowscrollbox').shadowRoot.querySelector('scrollbox'),
+    ];
+
+    // Attach gesture handlers to each element
+    for (const element of elements) {
+      if (!element) continue;
+      this.attachGestureHandlers(element);
+    }
+  }
+
   attachGestureHandlers(element) {
     element.addEventListener('MozSwipeGestureMayStart', this._handleSwipeMayStart.bind(this), true);
     element.addEventListener('MozSwipeGestureStart', this._handleSwipeStart.bind(this), true);
@@ -618,6 +633,8 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   _handleSwipeStart(event) {
     if (!this.workspaceEnabled) return;
 
+    this.activeScrollbox.setAttribute('swipe-gesture', 'true');
+
     event.preventDefault();
     event.stopPropagation();
     this._swipeState = {
@@ -663,7 +680,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
     const rawDirection = moveForward ? 1 : -1;
     const direction = this.naturalScroll ? -1 : 1;
-    this.changeWorkspaceShortcut(rawDirection * direction, true);
+    await this.changeWorkspaceShortcut(rawDirection * direction, true);
+
+    this.activeScrollbox.removeAttribute('swipe-gesture');
 
     // Reset swipe state
     this._swipeState = {

src/zen/workspaces/zen-workspaces.css

@@ -517,6 +517,10 @@ zen-workspace {
       overflow-y: auto;
     }
 
+    &[swipe-gesture]::part(scrollbox) {
+      scrollbar-width: none;
+    }
+
     &[overflowing] {
       --zen-scrollbar-overflow-background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
       &::before {