feat: Only dispatch elements to the tab browser if we are on the active workspace, b=(no-bug), c=workspaces

src/zen/workspaces/ZenWorkspace.mjs

@@ -57,9 +57,9 @@
         false
       );
 
-      this.scrollbox.addEventListener('wheel', gBrowser.tabContainer, true);
+      this.scrollbox.addEventListener('wheel', this, true);
-      this.scrollbox.addEventListener('underflow', gBrowser.tabContainer);
+      this.scrollbox.addEventListener('underflow', this);
-      this.scrollbox.addEventListener('overflow', gBrowser.tabContainer);
+      this.scrollbox.addEventListener('overflow', this);
 
       this.scrollbox._getScrollableElements = () => {
         const children = [...this.pinnedTabsContainer.children, ...this.tabsContainer.children];
@@ -122,6 +122,8 @@
       this.tabsContainer.setAttribute('zen-workspace-id', this.id);
       this.pinnedTabsContainer.setAttribute('zen-workspace-id', this.id);
 
+      this.#updateOverflow();
+
       this.dispatchEvent(
         new CustomEvent('ZenWorkspaceAttached', {
           bubbles: true,
@@ -130,6 +132,42 @@
         })
       );
     }
+
+    get active() {
+      return this.hasAttribute('active');
+    }
+
+    set active(value) {
+      if (value) {
+        this.setAttribute('active', 'true');
+      } else {
+        this.removeAttribute('active');
+      }
+      this.#updateOverflow();
+    }
+
+    #updateOverflow() {
+      if (!this.scrollbox) return;
+      if (this.overflows) {
+        this.#dispatchEventFromScrollbox('overflow');
+      } else {
+        this.#dispatchEventFromScrollbox('underflow');
+      }
+    }
+
+    #dispatchEventFromScrollbox(type) {
+      this.scrollbox.dispatchEvent(new CustomEvent(type, {}));
+    }
+
+    get overflows() {
+      return this.scrollbox.overflowing;
+    }
+
+    handleEvent(event) {
+      if (this.active) {
+        gBrowser.tabContainer.handleEvent(event);
+      }
+    }
   }
 
   customElements.define('zen-workspace', ZenWorkspace);

src/zen/workspaces/ZenWorkspaces.mjs

@@ -446,7 +446,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     const container = document.getElementById('tabbrowser-arrowscrollbox');
     workspaceWrapper.id = workspace.uuid;
     if (this.activeWorkspace === workspace.uuid) {
-      workspaceWrapper.setAttribute('active', 'true');
+      workspaceWrapper.active = true;
     }
 
     await new Promise((resolve) => {
@@ -1911,11 +1911,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     // Refresh tab cache
     for (const otherWorkspace of workspaces.workspaces) {
       const container = this.workspaceElement(otherWorkspace.uuid);
-      if (otherWorkspace.uuid === workspace.uuid) {
+      container.active = otherWorkspace.uuid === workspace.uuid;
-        container.setAttribute('active', 'true');
-      } else {
-        container.removeAttribute('active');
-      }
     }
     gBrowser.verticalPinnedTabsContainer =
       this.pinnedTabsContainer || gBrowser.verticalPinnedTabsContainer;
@@ -2172,13 +2168,11 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
           )
         );
       }
+      element.active = offset === 0;
       if (offset === 0) {
-        element.setAttribute('active', 'true');
         if (tabToSelect != gBrowser.selectedTab && !onInit) {
           gBrowser.selectedTab = tabToSelect;
         }
-      } else {
-        element.removeAttribute('active');
       }
     }
     if (this.containerSpecificEssentials && previousWorkspace) {