Enable smooth scrolling in tabs and adjust tab height calculations for better UI responsiveness

src/browser/app/profile/zen-browser.js

@@ -193,7 +193,7 @@ pref('zen.splitView.change-on-hover', false);
 pref('zen.splitView.rearrange-hover-size', 24);
 
 // Startup flags
-pref('zen.startup.smooth-scroll-in-tabs', false);
+pref('zen.startup.smooth-scroll-in-tabs', true);
 
 // Zen Workspaces
 pref('zen.workspaces.disabled_for_testing', false);

src/browser/base/content/ZenStartup.mjs

@@ -32,10 +32,12 @@
         }
 
         // Disable smooth scroll
-        gBrowser.tabContainer.arrowScrollbox.smoothScroll = Services.prefs.getBoolPref(
-          'zen.startup.smooth-scroll-in-tabs',
-          false
-        );
+        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
+          });
+        }
 
         gZenCompactModeManager.init();
         ZenWorkspaces.init();

src/browser/base/content/ZenUIManager.mjs

@@ -13,7 +13,7 @@ var gZenUIManager = {
     });
 
     new ResizeObserver(gZenCommonActions.throttle(this.updateTabsToolbar.bind(this), this.sidebarHeightThrottle)).observe(
-      document.getElementById('tabbrowser-tabs')
+      document.getElementById('TabsToolbar')
     );
 
     new ResizeObserver(
@@ -26,20 +26,25 @@ var gZenUIManager = {
 
   updateTabsToolbar() {
     // Set tabs max-height to the "toolbar-items" height
-    const toolbarItems = document.getElementById('tabbrowser-tabs');
-    const tabs = document.getElementById('tabbrowser-arrowscrollbox');
-    tabs.style.maxHeight = '0px'; // reset to 0
-    const toolbarRect = toolbarItems.getBoundingClientRect();
-    let height = toolbarRect.height;
-    // -5 for the controls padding
-    let totalHeight = toolbarRect.height - this.contentElementSeparation * 2 - 5;
-    // remove the height from other elements that aren't hidden
-    const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
-    for (let tab of otherElements) {
-      if (tabs === tab) continue;
-      totalHeight -= tab.getBoundingClientRect().height;
+    const tabs = document.getElementById('tabbrowser-tabs');
+    // Remove tabs so we can accurately calculate the height
+    // without them affecting the height of the toolbar
+    for (const tab of gBrowser.tabs) {
+      if (tab.hasAttribute('zen-essential')) {
+        continue;
       }
-    tabs.style.maxHeight = totalHeight + 'px';
+      tab.style.maxHeight = '0px';
+    }
+    tabs.style.removeProperty('max-height');
+    const toolbarRect = tabs.getBoundingClientRect();
+    let height = toolbarRect.height;
+    for (const tab of gBrowser.tabs) {
+      if (tab.hasAttribute('zen-essential')) {
+        continue;
+      }
+      tab.style.maxHeight = height + 'px';
+    }
+    tabs.style.maxHeight = height + 'px';
     //console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
   },
 

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..17d8ac96986e698b09033b870c24fc2f61c47a05 100644
+index 00391af141d9015fe5839534e5e6b22a91ba65d9..ee31d5f5116bc8f19f56fb868eceefea558659d6 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -29,23 +29,24 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..17d8ac96986e698b09033b870c24fc2f
        <toolbartabstop/>
        <hbox id="TabsToolbar-customization-target" flex="1">
          <toolbarbutton id="firefox-view-button"
-@@ -40,6 +40,7 @@
+@@ -40,9 +40,14 @@
                         data-l10n-id="toolbar-button-firefox-view-2"
                         role="button"
                         aria-pressed="false"
 +                       hidden="true"
                         cui-areatype="toolbar"
                         removable="true"/>
- 
-@@ -55,9 +56,14 @@
- # significantly, there is an optimization in
- # DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
- # the current structure that we may want to revisit.
-+          <html:div id="zen-essentials-container"></html:div>
-+          <hbox id="zen-current-workspace-indicator">
+-
++        <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 @@
+ # 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>
 -          <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" clicktoscroll="" scrolledtostart="" scrolledtoend="">
@@ -53,7 +54,7 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..17d8ac96986e698b09033b870c24fc2f
              <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
              <hbox id="tabbrowser-arrowscrollbox-periphery">
                <toolbartabstop/>
-@@ -100,11 +106,12 @@
+@@ -100,11 +105,12 @@
  #include private-browsing-indicator.inc.xhtml
      <toolbarbutton id="content-analysis-indicator"
                     class="toolbarbutton-1 content-analysis-indicator-icon"/>
@@ -69,7 +70,7 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..17d8ac96986e698b09033b870c24fc2f
    <toolbar id="nav-bar"
             class="browser-toolbar chromeclass-location"
             data-l10n-id="navbar-accessible"
-@@ -487,10 +494,12 @@
+@@ -487,10 +493,12 @@
                       consumeanchor="PanelUI-button"
                       data-l10n-id="appmenu-menu-button-closed2"/>
      </toolbaritem>

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

@@ -55,6 +55,10 @@
     }
   }
 
+  #tabbrowser-arrowscrollbox {
+    min-height: fit-content !important;
+  }
+
   #vertical-pinned-tabs-container, #tabbrowser-arrowscrollbox {
     .tabbrowser-tab[fadein='true'][zen-initial-fadein='true'] {
       animation: zen-new-tab-appear-vertical 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
@@ -105,7 +109,7 @@
   }
 
   & #nav-bar {
-    margin-bottom: 6px;
+    margin-bottom: calc(var(--zen-toolbox-padding) - 2px);
 
     & toolbarspring {
       display: none;
@@ -125,7 +129,7 @@
   background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
   margin: 8px auto;
   border: none;
-  height: 1px;
+  min-height: 1px;
   width: 98%;
 
   #vertical-pinned-tabs-container:not(:has(tab:not([hidden]))) + & {
@@ -134,8 +138,8 @@
 }
 
 #navigator-toolbox {
-  --border-radius-medium: 12px;
-  --tab-border-radius: 8px;
+  --border-radius-medium: 10px;
+  --tab-border-radius: 6px;
   --zen-toolbox-min-width: 1px;
 
   --tab-hover-background-color: color-mix(in srgb, var(--toolbarbutton-hover-background) 50%, transparent 50%);
@@ -228,6 +232,7 @@
   margin-inline-start: 0 !important;
   padding-inline-start: 0 !important;
   overflow-x: hidden;
+  overflow-y: scroll;
 
   --tab-inner-inline-margin: 0;
 
@@ -352,7 +357,8 @@
   padding-inline-end: 0 !important;
   display: flex !important;
   flex-direction: column;
-  max-height: calc(100vh - 12 * (var(--tab-min-height) + 2 * var(--tab-block-margin))) !important;
+  min-height: fit-content !important;
+  overflow: visible;
 
   & .tabbrowser-tab:not(:hover) .tab-background:not([selected]):not([multiselected]) {
     background: transparent !important;
@@ -460,7 +466,7 @@
       bottom: calc(-0.5 * var(--zen-toolbox-padding));
     }
 
-    & > *:not(tabs):not(#search-container):not(#zen-workspaces-button),
+    & > :is(toolbaritem, toolbarbutton):not(#search-container):not(#zen-workspaces-button),
     & #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
       width: 100% !important;
       border-radius: var(--border-radius-medium) !important;
@@ -895,6 +901,7 @@
   padding-bottom: var(--zen-toolbox-padding);
   overflow: hidden;
   gap: 3px;
+  order: -2;
 }
 
 #zen-essentials-container {
@@ -913,7 +920,10 @@
   --toolbarbutton-inner-padding: 0;
   max-width: unset;
   width: 100% !important;
-  border-radius: var(--border-radius-medium);
+
+  & .tab-background {
+    border-radius: var(--border-radius-medium) !important;
+  }
 
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
 

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

@@ -32,10 +32,9 @@
 
 #urlbar-background {
   background: var(--zen-toolbar-element-bg) !important;
+  border-radius: var(--border-radius-medium);
   outline: none !important;
-}
 
-#urlbar-background {
   border: none !important;
   margin: 1px;
 

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

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