Refactor tab management and update CSS for improved layout and performance

src/browser/base/content/ZenUIManager.mjs

@@ -35,7 +35,7 @@ var gZenUIManager = {
 
   updateTabsToolbar() {
     // Set tabs max-height to the "toolbar-items" height
-    const tabs = document.getElementById('zen-browser-tabs-wrapper');
+    const tabs = this.tabsWrapper;
     // Remove tabs so we can accurately calculate the height
     // without them affecting the height of the toolbar
     for (const tab of gBrowser.tabs) {
@@ -414,7 +414,10 @@ var gZenVerticalTabsManager = {
       gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
       gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
       // on purpose, we set the orient to horizontal, because the arrowScrollbox is vertical
-      gBrowser.tabContainer.arrowScrollbox.scrollbox.setAttribute('orient', (isVerticalTabs && ZenWorkspaces.workspaceEnabled) ? 'horizontal' : 'vertical');
+      gBrowser.tabContainer.arrowScrollbox.scrollbox.setAttribute(
+        'orient',
+        isVerticalTabs && ZenWorkspaces.workspaceEnabled ? 'horizontal' : 'vertical'
+      );
 
       const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
       if (isRightSide) {

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 a0a382643a2f74b6d789f3641ef300eed202d5e9..340475da315e67b2dd4f93567547cde703a90ee8 100644
+index a0a382643a2f74b6d789f3641ef300eed202d5e9..fd60aceee18e22d40c7d86506408803e3f4ffd45 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -40,17 +40,18 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..340475da315e67b2dd4f93567547cde7
          <tabs id="tabbrowser-tabs"
                is="tabbrowser-tabs"
                aria-multiselectable="true"
-@@ -50,6 +50,9 @@
+@@ -50,6 +50,10 @@
                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-container"></hbox>
 +<html:div id="zen-browser-tabs-wrapper">
++<html:div id="zen-browser-tabs-container">
            <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 +60,7 @@
+@@ -57,7 +61,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>
@@ -59,15 +60,16 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..340475da315e67b2dd4f93567547cde7
              <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
              <hbox id="tabbrowser-arrowscrollbox-periphery">
                <toolbartabstop/>
-@@ -75,6 +78,7 @@
+@@ -75,6 +79,8 @@
                                tooltip="dynamic-shortcut-tooltip"
                                data-l10n-id="tabs-toolbar-new-tab"/>
            <html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>
++</html:div>
 +</html:div>
          </tabs>
  
          <toolbarbutton id="new-tab-button"
-@@ -100,11 +104,12 @@
+@@ -100,11 +106,12 @@
  #include private-browsing-indicator.inc.xhtml
      <toolbarbutton id="content-analysis-indicator"
                     class="toolbarbutton-1 content-analysis-indicator-icon"/>
@@ -83,7 +85,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..340475da315e67b2dd4f93567547cde7
    <toolbar id="nav-bar"
             class="browser-toolbar chromeclass-location"
             data-l10n-id="navbar-accessible"
-@@ -490,10 +495,12 @@
+@@ -490,10 +497,12 @@
                       consumeanchor="PanelUI-button"
                       data-l10n-id="appmenu-menu-button-closed2"/>
      </toolbaritem>

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

@@ -368,9 +368,12 @@
 #zen-browser-tabs-wrapper {
   min-height: fit-content;
   overflow-y: auto;
-  overflow-x: clip !important; /* might break custom css with new design, so let's force it */
   height: 100%;
   scrollbar-width: thin;
+}
+
+#zen-browser-tabs-container {
+  overflow-x: clip !important; /* might break custom css with new design, so let's force it */
   position: relative;
 }
 

src/browser/base/zen-components/ZenWorkspaces.mjs

@@ -1464,13 +1464,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       for (const container of document.querySelectorAll(selector)) {
         container.style.transform = `translateX(${newTransform + offsetPixels / 2}%)`;
         container.style.opacity = offsetPixels ? 1 : !newTransform;
-      }
+        if (!offsetPixels && !container.hasAttribute('active')) {
-      if (!justMove) {
+          container.style.position = 'fixed';
-        const pinnedContainerId = '#vertical-pinned-tabs-container ';
+        } else {
-        const arrowScrollboxId = '#tabbrowser-arrowscrollbox ';
+          container.style.removeProperty('position');
-        const pinnedContainer = document.querySelector(pinnedContainerId + selector);
+        }
-        const arrowScrollbox = document.querySelector(arrowScrollboxId + selector);
-        this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer);
       }
     }
   }
@@ -1513,6 +1511,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       const newTransform = `translateX(${offset}%)`;
       const isCurrent = offset === 0;
       if (shouldAnimate) {
+        element.style.removeProperty('position');
         if (isCurrent) {
           element.style.opacity = 1;
         }
@@ -1534,7 +1533,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       }
       if (offset === 0) {
         element.setAttribute('active', 'true');
-        if (tabToSelect) {
+        if (tabToSelect != gBrowser.selectedTab) {
           gBrowser.selectedTab = tabToSelect;
           tabToSelect._visuallySelected = false;
         }
@@ -1647,7 +1646,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
     gZenThemePicker.onWorkspaceChange(window);
 
+    document.getElementById('zen-browser-tabs-wrapper').style.scrollbarWidth = 'none';
     await this._animateTabs(window, !onInit && !this._animatingChange, tabToSelect);
+    await this._organizeWorkspaceStripLocations(window, true);
+    document.getElementById('zen-browser-tabs-wrapper').style.scrollbarWidth = '';
 
     // Notify listeners
     if (this._changeListeners?.length) {