Refactor vertical tab styles and improve toolbar layout for better usability

src/browser/base/content/ZenUIManager.mjs

@@ -213,7 +213,7 @@ var gZenVerticalTabsManager = {
     const isSingleToolbar = (Services.prefs.getBoolPref('zen.view.use-single-toolbar') && (isVerticalTabs && isSidebarExpanded) )|| !isVerticalTabs;
     const titlebar = document.getElementById('titlebar');
 
- // gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'vertical');
+    gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'vertical');
     gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
 
     const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');

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

@@ -42,45 +42,29 @@
       }
     }
   }
+}
 
-  :root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container {
+:root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container {
   margin-right: auto;
   width: fit-content;
-  }
+}
 
-  :root[zen-single-toolbar='true']:not([customizing]) {
+#TabsToolbar > * {
-    #zen-appcontent-navbar-container {
+  justify-content: center;
-      display: flex;
+}
-      -moz-window-dragging: drag;
-      min-height: var(--zen-element-separation);
-      height: var(--zen-element-separation);
 
-      & #PersonalToolbar {
+#private-browsing-indicator-with-label {
-        width: -moz-available;
+  display: none !important;
-      }
+}
 
-      /* We enable this trick IF we follow any of theses conditions:
+#browser {
-        * - We are on a Mac
+  --zen-toolbox-padding: calc(var(--zen-element-separation) / 1.5);
-        * - We are on a Linux with reversed CSD
+  :root[zen-no-padding='true'] & {
-        * - If we are not in any of the above, we can still enable it if the user has bookmarks toolbar enabled
+    --zen-toolbox-padding: 4px;
-        */
-      &:has(#PersonalToolbar[collapsed='false']) {
-%include vertical-tabs-topbar.inc.css
   }
+}
 
-      &[should-hide='true'] {
+:root[zen-single-toolbar='true'] {
-%include vertical-tabs-topbar.inc.css
-      }
-
-      :root[zen-window-buttons-reversed='true'] & {
-        &:has(#PersonalToolbar[collapsed="true"]) {
-          display: none;
-        }
-      }
-    }
-  }
-
-  :root[zen-single-toolbar='true'] {
   #urlbar-container {
     width: -moz-available !important;
   }
@@ -120,22 +104,6 @@
   & #PanelUI-menu-button {
     padding: 0 !important;
   }
-  }
-}
-
-#TabsToolbar > * {
-  justify-content: center;
-}
-
-#private-browsing-indicator-with-label {
-  display: none !important;
-}
-
-#browser {
-  --zen-toolbox-padding: calc(var(--zen-element-separation) / 1.5);
-  :root[zen-no-padding='true'] & {
-    --zen-toolbox-padding: 4px;
-  }
 }
 
 #vertical-pinned-tabs-container-separator {
@@ -175,6 +143,38 @@
   display: none;
 }
 
+:root[zen-single-toolbar='true']:not([customizing]) {
+  #zen-appcontent-navbar-container {
+    display: flex;
+    -moz-window-dragging: drag;
+    min-height: var(--zen-element-separation);
+    height: var(--zen-element-separation);
+
+    & #PersonalToolbar {
+      width: -moz-available;
+    }
+
+    /* We enable this trick IF we follow any of theses conditions:
+      * - We are on a Mac
+      * - We are on a Linux with reversed CSD
+      * - If we are not in any of the above, we can still enable it if the user has bookmarks toolbar enabled
+      */
+    &:has(#PersonalToolbar[collapsed='false']) {
+%include vertical-tabs-topbar.inc.css
+    }
+
+    &[should-hide='true'] {
+%include vertical-tabs-topbar.inc.css
+    }
+
+    :root[zen-window-buttons-reversed='true'] & {
+      &:has(#PersonalToolbar[collapsed="true"]) {
+        display: none;
+      }
+    }
+  }
+}
+
 #TabsToolbar-customization-target {
   position: relative;
   max-width: 100%;