refactor: enhance CSS styles for zen components and improve layout handling

src/browser/base/content/ZenUIManager.mjs

@@ -206,6 +206,7 @@ var gZenVerticalTabsManager = {
       return;
     }
     this._isUpdating = true;
+    try {
       this._updateMaxWidth();
       const topButtons = document.getElementById('zen-sidebar-top-buttons');
       const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
@@ -229,8 +230,10 @@ var gZenVerticalTabsManager = {
 
       if (isSidebarExpanded) {
         this.navigatorToolbox.setAttribute('zen-sidebar-expanded', 'true');
+        document.documentElement.setAttribute('zen-sidebar-expanded', 'true');
       } else {
         this.navigatorToolbox.removeAttribute('zen-sidebar-expanded');
+        document.documentElement.removeAttribute('zen-sidebar-expanded');
       }
 
       const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
@@ -302,11 +305,19 @@ var gZenVerticalTabsManager = {
       if (isCompactMode) {
         titlebar.prepend(topButtons);
       } else {
+        if (isSidebarExpanded) {
           titlebar.before(topButtons);
+        } else {
+          titlebar.prepend(topButtons);
+        }
       }
 
       if (doNotChangeWindowButtons) {
+        if (isRightSide && !isSidebarExpanded) {
+          navBar.appendChild(windowButtons);
+        } else {
           document.getElementById("zen-sidebar-top-buttons-customization-target").appendChild(windowButtons);
+        }
       } else if (!isSingleToolbar && !isCompactMode) {
         if (this.isWindowsStyledButtons) {
           if (isRightSide) {
@@ -325,8 +336,13 @@ var gZenVerticalTabsManager = {
         navBar.appendChild(windowButtons);
       }
 
+      gZenCompactModeManager.updateCompactModeContext(isSingleToolbar);
+
       // Always move the splitter next to the sidebar
       this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
+    } catch (e) {
+      console.error(e);
+    }
     this._isUpdating = false;
   },
 

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -135,6 +135,10 @@
           background: var(--zen-dialog-background);
           padding-left: var(--zen-toolbox-padding) !important;
 
+          & > * {
+            position: relative !important;
+          }
+
           :root[zen-window-buttons-reversed='true'] & {
             padding-left: 0 !important;
             padding-right: var(--zen-toolbox-padding) !important;

src/browser/base/content/zen-styles/zen-sidebar-panels.css

@@ -100,7 +100,8 @@
   height: unset !important;
 }
 
-.zen-sidebar-web-panel-splitter {
+.zen-sidebar-web-panel-splitter,
+.zen-split-view-splitter[orient="vertical"] {
   position: absolute;
   top: 0;
   left: 0;
@@ -130,6 +131,10 @@
   }
 }
 
+.zen-split-view-splitter[orient="vertical"]::before {
+  transform: translate(-75%, -50%);
+}
+
 .zen-sidebar-web-panel-splitter[side='right'] {
   left: 100%;
 }

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

@@ -243,10 +243,6 @@
       #tabbrowser-tabs[zen-workspace-animation='next'] & {
         animation: zen-slide-in 0.2s ease-in-out;
       }
-
-      &[pinned] {
-        animation-delay: .03s !important;
-      }
     }
 
     max-width: unset;
@@ -531,12 +527,13 @@
   }
 }
 
-/* Mark: toolbox as collapsed */
-#navigator-toolbox:not([zen-sidebar-expanded='true']) {
+:root:not([zen-sidebar-expanded='true']) {
   --tab-min-width: 36px !important;
-  /* Important: When changin this value, make sure expand on hover doesn't break! */
   --zen-toolbox-padding: calc(var(--zen-element-separation) / 2 + 1px);
   --zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2);
+}
+
+#navigator-toolbox:not([zen-sidebar-expanded='true']) {
   max-width: var(--zen-toolbox-max-width) !important;
   min-width: var(--zen-toolbox-max-width) !important;
   & #zen-current-workspace-indicator-name,
@@ -890,7 +887,6 @@
 
   &[selected] .tab-background {
     box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.1));
-    outline: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.4)) !important;
   }
 
   &:not([selected]) .tab-background {
@@ -916,3 +912,22 @@
   }
 }
 
+
+/* Very special occasions */
+
+/* Mark: Right side windows controls with collapsed sidebar */
+@media not (-moz-bool-pref: 'zen.view.compact') {
+  :root[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
+    & #navigator-toolbox {
+      padding-top: var(--zen-toolbar-height);
+    }
+
+    & .titlebar-buttonbox-container {
+      margin-right: calc(-1 * var(--zen-toolbox-max-width)) !important;
+    }
+
+    & #zen-appcontent-wrapper {
+      overflow-x: visible;
+    }
+  }
+}

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

@@ -126,7 +126,7 @@
   --zen-themed-toolbar-bg: light-dark(var(--zen-branding-bg), var(--zen-colors-tertiary));
   --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), var(--zen-colors-tertiary));
 
-  @supports (-moz-osx-font-smoothing: auto) {
+  @media (-moz-windows-mica) or (-moz-platform: macos) {
     --zen-themed-toolbar-bg-transparency: 0.05;
     --zen-themed-toolbar-bg-transparent: light-dark(rgba(255, 255, 255, var(--zen-themed-toolbar-bg-transparency)), rgba(0, 0, 0, var(--zen-themed-toolbar-bg-transparency)));
   }

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

@@ -16,15 +16,10 @@
 
 #urlbar[breakout-extend='true'] {
   z-index: 1000;
-  max-width: 45%;
-  min-width: 45%;
+  min-width: 600px;
+  top: 0 !important;
   --urlbar-container-height: 55px !important;
   --urlbar-margin-inline: 10px !important;
-  position: absolute;
-
-  top: calc(var(--zen-toolbar-height) * 4);
-  left: 50%;
-  transform: translateX(-50%);
 
   & #urlbar-background {
     background: var(--zen-branding-bg) !important;
@@ -36,6 +31,19 @@
     margin-right: var(--urlbar-margin-inline);
   }
 
+  :root[zen-right-side='true'] & {
+    right: 0;
+  }
+
+  @media not (-moz-bool-pref: 'zen.view.compact') {
+    max-width: 45%;
+    min-width: 45%;
+    position: absolute;
+
+    top: calc(var(--zen-toolbar-height) * 4) !important;
+    left: 50%;
+    transform: translateX(-50%);
+
     #urlbar-container:has(&) {
       border-radius: var(--toolbarbutton-border-radius);
       background: var(--toolbarbutton-hover-background);
@@ -54,6 +62,7 @@
         pointer-events: none;
       }
     }
+  }
 }
 
 #searchbar:focus-within {

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

@@ -63,6 +63,13 @@ var gZenCompactModeManager = {
     this.updateContextMenu();
   },
 
+  updateCompactModeContext(isSingleToolbar) {
+    const IDs = ['zen-context-menu-compact-mode-hide-sidebar', 'zen-context-menu-compact-mode-hide-toolbar', 'zen-context-menu-compact-mode-hide-both'];
+    for (let id of IDs) {
+      document.getElementById(id).disabled = isSingleToolbar;
+    }
+  },
+
   hideSidebar() {
     Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
     Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false);

src/browser/components/urlbar/UrlbarInput-sys-mjs.patch

@@ -0,0 +1,27 @@
+diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
+index c504c9afc43785b5f003bb1f9f1dfbddef38d78b..845043f5a887d4f46b0064792fb0834724e94a07 100644
+--- a/browser/components/urlbar/UrlbarInput.sys.mjs
++++ b/browser/components/urlbar/UrlbarInput.sys.mjs
+@@ -3901,6 +3901,9 @@ export class UrlbarInput {
+   }
+ 
+   _on_click(event) {
++    event.zenOriginalTarget = this.textbox;
++    this._on_mousedown(event);
++
+     if (
+       event.target == this.inputField ||
+       event.target == this._inputContainer ||
+@@ -4012,8 +4015,11 @@ export class UrlbarInput {
+   }
+ 
+   _on_mousedown(event) {
+-    switch (event.currentTarget) {
++    switch (event.zenOriginalTarget || event.currentTarget) {
+       case this.textbox: {
++        if (event.type != "click") {
++          return true;
++        }
+         this._mousedownOnUrlbarDescendant = true;
+ 
+         if (