chore: Refactored vertical tabs css and improved essentials layout, b=(no-bug), c=tabs, workspaces

.prettierignore

@@ -22,7 +22,7 @@ docs/issue-metrics/*.md
 
 # Some CSS files are preprocessed and prettier doesn't handle them well
 # We also dont want to format the CSS files that are generated by the build
-src/zen/tabs/zen-tabs/vertical-tabs.css
+src/zen/tabs/zen-tabs.css
 src/zen/compact-mode/zen-compact-mode.css
 src/zen/common/ZenEmojies.mjs
 

src/browser/base/content/zen-assets.jar.inc.mn

@@ -51,8 +51,8 @@
         content/browser/zen-components/ZenTabUnloader.mjs                       (../../zen/tabs/ZenTabUnloader.mjs)
         content/browser/zen-components/ZenPinnedTabsStorage.mjs                 (../../zen/tabs/ZenPinnedTabsStorage.mjs)
         content/browser/zen-components/ZenPinnedTabManager.mjs                  (../../zen/tabs/ZenPinnedTabManager.mjs)
-        content/browser/zen-styles/zen-tabs.css                                 (../../zen/tabs/zen-tabs.css)
+*       content/browser/zen-styles/zen-tabs.css                                 (../../zen/tabs/zen-tabs.css)
-*       content/browser/zen-styles/zen-tabs/vertical-tabs.css                   (../../zen/tabs/zen-tabs/vertical-tabs.css)
+        content/browser/zen-styles/zen-tabs/vertical-tabs.css                   (../../zen/tabs/zen-tabs/vertical-tabs.css)
 
         content/browser/zen-components/ZenGlanceManager.mjs                     (../../zen/glance/ZenGlanceManager.mjs)
         content/browser/zen-styles/zen-glance.css                               (../../zen/glance/zen-glance.css)

src/zen/tabs/zen-tabs.css

@@ -16,3 +16,100 @@
     display: none !important;
   }
 }
+
+/* ==========================================================================
+   Single Toolbar Mode - Top Bar Handling (Includes External CSS)
+   ========================================================================== */
+:root[zen-single-toolbar='true']:not([customizing]) {
+  #zen-appcontent-navbar-container {
+    display: flex;
+    -moz-window-dragging: drag; /* Allow dragging the window via this bar */
+    min-height: var(--zen-element-separation);
+    height: var(--zen-element-separation);
+
+    /* Ensure Personal Toolbar takes available width */
+    & #PersonalToolbar {
+      width: -moz-available;
+    }
+
+    /* Include styles for the top bar under certain conditions:
+      * - Bookmarks toolbar is visible OR
+      * - The container is explicitly marked to hide controls (e.g., on Linux with reversed controls)
+      */
+    &:has(#PersonalToolbar[collapsed='false']) {
+%include zen-tabs/vertical-tabs-topbar.inc.css
+    }
+    &[should-hide='true'] {
+%include zen-tabs/vertical-tabs-topbar.inc.css
+    }
+
+    /* Hide the top bar completely in fullscreen mode */
+    :root[inDOMFullscreen='true'] & {
+      max-height: 0 !important;
+      min-height: unset !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
+    }
+  }
+}
+
+
+/* ==========================================================================
+  Very Special Occasions - Complex Layout Fixes
+  ========================================================================== */
+
+/* Exclude these complex fixes if in compact mode */
+:root:not([zen-compact-mode='true']) {
+
+  /* --- Fix: Right Sidebar + Collapsed + Standard Window Buttons --- */
+  &[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
+    /* Push toolbox down below the top toolbar */
+    & #navigator-toolbox {
+      margin-top: var(--zen-toolbar-height) !important;
+    }
+    /* Pull window buttons container leftwards over the collapsed sidebar */
+    & .titlebar-buttonbox-container {
+      margin-right: calc(-1 * var(--zen-toolbox-max-width)) !important;
+    }
+    /* Allow overflow for the button box */
+    & #zen-appcontent-wrapper {
+      overflow-x: visible;
+    }
+    /* Reset padding for top buttons */
+    & #zen-sidebar-top-buttons-customization-target {
+      padding-top: 0;
+    }
+    /* Add padding to the left of the nav container */
+    & #zen-appcontent-navbar-container {
+      padding-left: var(--zen-element-separation);
+    }
+    /* Include common fixes for this top-button scenario */
+%include zen-tabs/vertical-tabs-topbuttons-fix.css
+  }
+
+  /* --- Fix: Left Sidebar + Collapsed + Reversed Window Buttons --- */
+  &:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
+    /* Push toolbox down below the top toolbar */
+    & #navigator-toolbox {
+      margin-top: var(--zen-toolbar-height) !important;
+    }
+    /* Pull window buttons container rightwards over the collapsed sidebar */
+    & .titlebar-buttonbox-container {
+      margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2) !important;
+    }
+    /* Allow overflow for the button box */
+    & #zen-appcontent-wrapper {
+      overflow-x: visible;
+    }
+    /* Reset padding for top buttons */
+    & #zen-sidebar-top-buttons-customization-target {
+      padding-top: 0;
+    }
+    /* Add padding to the right of the nav container */
+    & #zen-appcontent-navbar-container {
+      padding-right: var(--zen-element-separation);
+    }
+    /* Include common fixes for this top-button scenario */
+%include zen-tabs/vertical-tabs-topbuttons-fix.css
+  }
+}

src/zen/workspaces/ZenWorkspaces.mjs

@@ -2386,6 +2386,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         );
         const workspaceObject = this.getWorkspaceFromId(workspaceId);
         const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
+        const essentialNumChildren = essentialContainer.children.length;
+        let essentialHackType = 0;
+        if (essentialNumChildren % 3 === 0) {
+          essentialHackType = 3;
+        } else if (essentialNumChildren % 4 === 0 || essentialNumChildren % 4 === 3) {
+          essentialHackType = 4;
+        }
+        if (essentialHackType > 0) {
+          essentialContainer.setAttribute('data-hack-type', essentialHackType);
+        } else {
+          essentialContainer.removeAttribute('data-hack-type');
+        }
         this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer, essentialContainer, workspaceIndicator, forAnimation);
         this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
       }