From 0b42ee83bb68d307231df359fb56b7ac3434fce7 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Fri, 29 Nov 2024 00:33:32 +0100
Subject: [PATCH] Refactor vertical tab styles and improve toolbar layout for
 better usability

---
 src/browser/base/content/ZenUIManager.mjs     |   2 +-
 .../zen-styles/zen-tabs/vertical-tabs.css     | 156 +++++++++---------
 2 files changed, 79 insertions(+), 79 deletions(-)

diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index c1fb50e36..32c8f406f 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/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');
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 7733175cb..6d364a1bf 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -42,85 +42,11 @@
       }
     }
   }
+}
 
-  :root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container {
-    margin-right: auto;
-    width: fit-content;
-  }
-
-  :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;
-        }
-      }
-    }
-  }
-
-  :root[zen-single-toolbar='true'] {
-    #urlbar-container {
-      width: -moz-available !important;
-    }
-
-    .sharing-icon,
-    #identity-icon,
-    .urlbar-icon,
-    #permissions-granted-icon,
-    #tracking-protection-icon,
-    #tracking-protection-icon-box,
-    #blocked-permissions-container > .blocked-permission-icon {
-      width: 12px;
-      height: 12px;
-    }
-
-    #identity-icon-box,
-    #identity-permission-box {
-      margin-top: auto;
-      margin-bottom: auto;
-      padding: 6px !important;
-    }
-
-    & #urlbar-container,
-    & #urlbar {
-      --urlbar-container-height: 40px !important;
-      --urlbar-height: 38px !important;
-    }
-
-    & #nav-bar {
-      margin-bottom: 8px;
-    }
-
-    & #zen-sidebar-top-buttons {
-      margin: 4px 0;
-    }
-
-    & #PanelUI-menu-button {
-      padding: 0 !important;
-    }
-  }
+:root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container {
+  margin-right: auto;
+  width: fit-content;
 }
 
 #TabsToolbar > * {
@@ -138,6 +64,48 @@
   }
 }
 
+:root[zen-single-toolbar='true'] {
+  #urlbar-container {
+    width: -moz-available !important;
+  }
+
+  .sharing-icon,
+  #identity-icon,
+  .urlbar-icon,
+  #permissions-granted-icon,
+  #tracking-protection-icon,
+  #tracking-protection-icon-box,
+  #blocked-permissions-container > .blocked-permission-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  #identity-icon-box,
+  #identity-permission-box {
+    margin-top: auto;
+    margin-bottom: auto;
+    padding: 6px !important;
+  }
+
+  & #urlbar-container,
+  & #urlbar {
+    --urlbar-container-height: 40px !important;
+    --urlbar-height: 38px !important;
+  }
+
+  & #nav-bar {
+    margin-bottom: 8px;
+  }
+
+  & #zen-sidebar-top-buttons {
+    margin: 4px 0;
+  }
+
+  & #PanelUI-menu-button {
+    padding: 0 !important;
+  }
+}
+
 #vertical-pinned-tabs-container-separator {
   background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
   margin: 8px auto;
@@ -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%;