Refactor sidebar scrolling initialization and enhance tab visibility checks

src/browser/base/content/ZenStartup.mjs

@@ -31,13 +31,7 @@
           document.getElementById('zen-appcontent-navbar-container').appendChild(deckTemplate);
         }
 
-        // Disable smooth scroll
-        if (!Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false)) {
-          gBrowser.tabContainer.addEventListener('wheel', (event) => {
-            event.preventDefault(); // Prevent the smooth scroll behavior
-            gBrowser.tabContainer.scrollTop += event.deltaY * 20; // Apply immediate scroll
-          });
-        }
+        this._initSidebarScrolling();
 
         gZenCompactModeManager.init();
         ZenWorkspaces.init();
@@ -88,6 +82,35 @@
       }
     },
 
+    _initSidebarScrolling() {
+      // Disable smooth scroll
+      if (!Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false)) {
+        gBrowser.tabContainer.addEventListener('wheel', (event) => {
+          event.preventDefault(); // Prevent the smooth scroll behavior
+          gBrowser.tabContainer.scrollTop += event.deltaY * 20; // Apply immediate scroll
+        });
+      }
+      // Detect overflow and underflow
+      const observer = new ResizeObserver((_) => {
+        const tabContainer = gBrowser.tabContainer;
+        const isVertical = tabContainer.getAttribute('orient') === 'vertical';
+        let contentSize =
+          tabContainer.getBoundingClientRect()[isVertical ? 'height' : 'width'];
+        // NOTE: This should be contentSize > scrollClientSize, but due
+        // to how Gecko internally rounds in those cases, we allow for some
+        // minor differences (the internal Gecko layout size is 1/60th of a
+        // pixel, so 0.02 should cover it).
+        let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02;
+
+        tabContainer.arrowScrollbox.toggleAttribute("overflowing", overflowing);
+        tabContainer.arrowScrollbox.dispatchEvent(
+          new CustomEvent(overflowing ? "overflow" : "underflow")
+        );
+      });
+      observer.observe(document.getElementById('navigator-toolbox'));
+      
+    },
+
     _initSearchBar() {
       // Only focus the url bar
       gURLBar.focus();

src/browser/components/tabbrowser/content/tabs-js.patch

@@ -1,7 +1,16 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15183b717d 100644
+index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..f1c65fc4b31141e65d059d25b03f98029d1774bc 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
+@@ -94,7 +94,7 @@
+         return this.hasAttribute("positionpinnedtabs");
+       };
+       this.arrowScrollbox._canScrollToElement = tab => {
+-        return (!tab.pinned || !arePositioningPinnedTabs()) && tab.visible;
++        return (!tab.hasAttribute("zen-essential") || !arePositioningPinnedTabs()) && tab.visible;
+       };
+ 
+       // Override for performance reasons. This is the size of a single element
 @@ -649,7 +649,7 @@
        if (this.#isContainerVerticalPinnedExpanded(tab)) {
          // In expanded vertical mode, the max number of pinned tabs per row is dynamic
@@ -181,6 +190,15 @@ index f7c39fe804182e2bdf53045ba3b6a5ba17079fc3..c98043855e7528fc9458ffd736101f15
        }
      }
  
+@@ -2708,7 +2711,7 @@
+     }
+ 
+     _notifyBackgroundTab(aTab) {
+-      if (aTab.pinned || !aTab.visible || !this.overflowing) {
++      if (aTab.hasAttribute("zen-essential") || !aTab.visible || !this.overflowing) {
+         return;
+       }
+ 
 @@ -2726,12 +2729,14 @@
                selectedTab = {
                  left: selectedTab.left,

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

@@ -0,0 +1,13 @@
+diff --git a/toolkit/content/widgets/arrowscrollbox.js b/toolkit/content/widgets/arrowscrollbox.js
+index 328c770d275ebbaada8a44438eaf738b1a62d985..1724b7bdba5ed3a82643e07cc3571040ddcf4911 100644
+--- a/toolkit/content/widgets/arrowscrollbox.js
++++ b/toolkit/content/widgets/arrowscrollbox.js
+@@ -639,7 +639,7 @@
+ 
+     on_wheel(event) {
+       // Don't consume the event if we can't scroll.
+-      if (!this.overflowing) {
++      if (!this.overflowing || false) { // we handle this on ZenStartup
+         return;
+       }
+