Refactor sidebar scrolling logic and improve tab height calculations for better UI performance

src/browser/base/content/ZenStartup.mjs

@@ -84,31 +84,31 @@
 
     _initSidebarScrolling() {
       // Disable smooth scroll
-      if (!Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false)) {
+      const canSmoothScroll = Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false);
-        gBrowser.tabContainer.addEventListener('wheel', (event) => {
+      const workspaceIndicator = document.getElementById('zen-current-workspace-indicator');
-          event.preventDefault(); // Prevent the smooth scroll behavior
+      const tabsWrapper = document.getElementById('zen-browser-tabs-wrapper');
-          gBrowser.tabContainer.scrollTop += event.deltaY * 20; // Apply immediate scroll
+      gBrowser.tabContainer.addEventListener('wheel', (event) => {
-        });
+        if (canSmoothScroll) return;
-      }
+        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 =
+        let contentSize = tabsWrapper.getBoundingClientRect()[isVertical ? 'height' : 'width'];
-          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);
+        window.requestAnimationFrame(() => {
-        tabContainer.arrowScrollbox.dispatchEvent(
+          tabContainer.arrowScrollbox.toggleAttribute('overflowing', overflowing);
-          new CustomEvent(overflowing ? "overflow" : "underflow")
+          tabContainer.arrowScrollbox.dispatchEvent(new CustomEvent(overflowing ? 'overflow' : 'underflow'));
-        );
+        });
       });
-      observer.observe(document.getElementById('navigator-toolbox'));
+      observer.observe(tabsWrapper);
-      
     },
 
     _initSearchBar() {

src/browser/base/content/ZenUIManager.mjs

@@ -26,7 +26,7 @@ var gZenUIManager = {
 
   updateTabsToolbar() {
     // Set tabs max-height to the "toolbar-items" height
-    const tabs = document.getElementById('tabbrowser-tabs');
+    const tabs = document.getElementById('zen-browser-tabs-wrapper');
     // Remove tabs so we can accurately calculate the height
     // without them affecting the height of the toolbar
     for (const tab of gBrowser.tabs) {
@@ -42,10 +42,9 @@ var gZenUIManager = {
       if (tab.hasAttribute('zen-essential')) {
         continue;
       }
-      tab.style.maxHeight = height + 'px';
+      tab.style.removeProperty('max-height');
     }
     tabs.style.maxHeight = height + 'px';
-    //console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
   },
 
   openAndChangeToTab(url, options) {

src/browser/base/content/navigator-toolbox-inc-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index 00391af141d9015fe5839534e5e6b22a91ba65d9..ee31d5f5116bc8f19f56fb868eceefea558659d6 100644
+index 00391af141d9015fe5839534e5e6b22a91ba65d9..b68767d0fef6cea2756376bbcfe00603d5d1a655 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -29,7 +29,7 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..ee31d5f5116bc8f19f56fb868eceefea
        <toolbartabstop/>
        <hbox id="TabsToolbar-customization-target" flex="1">
          <toolbarbutton id="firefox-view-button"
-@@ -40,9 +40,14 @@
+@@ -40,9 +40,9 @@
                         data-l10n-id="toolbar-button-firefox-view-2"
                         role="button"
                         aria-pressed="false"
@@ -37,15 +37,23 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..ee31d5f5116bc8f19f56fb868eceefea
                         cui-areatype="toolbar"
                         removable="true"/>
 -
-+        <html:div id="zen-essentials-container" skipintoolbarset="true"></html:div>
-+        <hbox id="zen-current-workspace-indicator" skipintoolbarset="true">
-+          <hbox id="zen-current-workspace-indicator-icon"></hbox>
-+          <hbox id="zen-current-workspace-indicator-name"></hbox>
-+        </hbox>
          <tabs id="tabbrowser-tabs"
                is="tabbrowser-tabs"
                aria-multiselectable="true"
-@@ -57,7 +62,7 @@
+@@ -50,6 +50,12 @@
+               tooltip="tabbrowser-tab-tooltip"
+               orient="horizontal"
+               stopwatchid="FX_TAB_CLICK_MS">
++<html:div id="zen-essentials-container" skipintoolbarset="true"></html:div>
++<hbox id="zen-current-workspace-indicator" skipintoolbarset="true">
++  <hbox id="zen-current-workspace-indicator-icon"></hbox>
++  <hbox id="zen-current-workspace-indicator-name"></hbox>
++</hbox>
++<html:div id="zen-browser-tabs-wrapper">
+           <hbox class="tab-drop-indicator" hidden="true"/>
+ # If the name (tabbrowser-arrowscrollbox) or structure of this changes
+ # significantly, there is an optimization in
+@@ -57,7 +63,7 @@
  # the current structure that we may want to revisit.
            <html:div id="vertical-pinned-tabs-container" tabindex="-1"></html:div>
            <html:div id="vertical-pinned-tabs-container-separator"></html:div>
@@ -54,7 +62,15 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..ee31d5f5116bc8f19f56fb868eceefea
              <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
              <hbox id="tabbrowser-arrowscrollbox-periphery">
                <toolbartabstop/>
-@@ -100,11 +105,12 @@
+@@ -75,6 +81,7 @@
+                               tooltip="dynamic-shortcut-tooltip"
+                               data-l10n-id="tabs-toolbar-new-tab"/>
+           <html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>
++</html:div>
+         </tabs>
+ 
+         <toolbarbutton id="new-tab-button"
+@@ -100,11 +107,12 @@
  #include private-browsing-indicator.inc.xhtml
      <toolbarbutton id="content-analysis-indicator"
                     class="toolbarbutton-1 content-analysis-indicator-icon"/>
@@ -70,7 +86,7 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..ee31d5f5116bc8f19f56fb868eceefea
    <toolbar id="nav-bar"
             class="browser-toolbar chromeclass-location"
             data-l10n-id="navbar-accessible"
-@@ -487,10 +493,12 @@
+@@ -487,10 +495,12 @@
                       consumeanchor="PanelUI-button"
                       data-l10n-id="appmenu-menu-button-closed2"/>
      </toolbaritem>

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css

@@ -13,9 +13,7 @@ height: var(--zen-toolbar-height);
     }
   }
 
-  &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within):not(:has(
+  &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within):not(:has(*:is([panelopen='true'], [open='true']))) {
-    *:is([panelopen='true'], [open='true'])
-  )) {
     transition-delay: 0.2s;
     height: var(--zen-element-separation);
     overflow: hidden;

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -109,7 +109,7 @@
   }
 
   & #nav-bar {
-    margin-bottom: calc(var(--zen-toolbox-padding) - 2px);
+    margin-bottom: var(--zen-toolbox-padding);
 
     & toolbarspring {
       display: none;
@@ -353,6 +353,12 @@
   }
 }
 
+#zen-browser-tabs-wrapper {
+  min-height: fit-content;
+  overflow-y: scroll;
+  height: 100%;
+}
+
 #vertical-pinned-tabs-container {
   padding-inline-end: 0 !important;
   display: flex !important;
@@ -902,7 +908,6 @@
   padding-bottom: var(--zen-toolbox-padding);
   overflow: hidden;
   gap: 3px;
-  order: -2;
 }
 
 #zen-essentials-container {

src/browser/base/content/zen-styles/zen-workspaces.css

@@ -458,7 +458,6 @@
   font-weight: 600;
   align-items: center;
   position: relative;
-  order: -1; /* After essential tabs */
 
   & #zen-current-workspace-indicator-icon {
     font-size: 14px;

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

@@ -1,5 +1,5 @@
 diff --git a/toolkit/content/widgets/arrowscrollbox.js b/toolkit/content/widgets/arrowscrollbox.js
-index 328c770d275ebbaada8a44438eaf738b1a62d985..1724b7bdba5ed3a82643e07cc3571040ddcf4911 100644
+index 328c770d275ebbaada8a44438eaf738b1a62d985..01256a9b4510b27e180e8b11f1436621ad3e45b5 100644
 --- a/toolkit/content/widgets/arrowscrollbox.js
 +++ b/toolkit/content/widgets/arrowscrollbox.js
 @@ -639,7 +639,7 @@
@@ -7,7 +7,7 @@ index 328c770d275ebbaada8a44438eaf738b1a62d985..1724b7bdba5ed3a82643e07cc3571040
      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
++      if (!this.overflowing || true) { // we handle this on ZenStartup
          return;
        }