feat: Added support for swiping when scrolling on workspaces, b=(no-bug), c=workspaces

src/zen/workspaces/ZenWorkspace.mjs

@@ -6,7 +6,7 @@
           <hbox class="zen-current-workspace-indicator-icon"></hbox>
           <hbox class="zen-current-workspace-indicator-name"></hbox>
         </vbox>
-        <arrowscrollbox orient="vertical" tabindex="-1">
+        <arrowscrollbox orient="vertical" tabindex="-1" class="workspace-arrowscrollbox">
           <vbox class="zen-workspace-tabs-section zen-workspace-pinned-tabs-section">
             <html:div class="vertical-pinned-tabs-container-separator"></html:div>
           </vbox>
@@ -77,6 +77,13 @@
         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,7 +138,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
       Services.prefs.getBoolPref('zen.workspaces.swipe-actions', false) &&
       this.workspaceEnabled
     ) {
-      this.initializeGestureHandlers();
       this.initializeWorkspaceNavigation();
     }
 
@@ -576,21 +575,6 @@ 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);

src/zen/workspaces/zen-workspaces.css

@@ -541,7 +541,7 @@ zen-workspace {
         top: 0;
         left: 0;
         width: 100%;
-        height: 2px;
+        height: 1px;
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.1s;
@@ -554,7 +554,7 @@ zen-workspace {
         bottom: 0;
         left: 0;
         width: 100%;
-        height: 2px;
+        height: 1px;
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.1s;