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

src/browser/base/content/ZenUIManager.mjs

@@ -206,127 +206,143 @@ var gZenVerticalTabsManager = {
       return;
     }
     this._isUpdating = true;
-    this._updateMaxWidth();
+    try {
-    const topButtons = document.getElementById('zen-sidebar-top-buttons');
+      this._updateMaxWidth();
-    const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
+      const topButtons = document.getElementById('zen-sidebar-top-buttons');
-    const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
+      const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
-    const isSidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded') || !isVerticalTabs;
+      const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
-    const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs;
+      const isSidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded') || !isVerticalTabs;
-    const isSingleToolbar = (Services.prefs.getBoolPref('zen.view.use-single-toolbar') && (isVerticalTabs && isSidebarExpanded) )|| !isVerticalTabs;
+      const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs;
-    const titlebar = document.getElementById('titlebar');
+      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');
+      gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
 
-    const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
+      const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
-    if (isRightSide) {
+      if (isRightSide) {
-      this.navigatorToolbox.setAttribute('zen-right-side', 'true');
+        this.navigatorToolbox.setAttribute('zen-right-side', 'true');
-      document.documentElement.setAttribute('zen-right-side', 'true');
+        document.documentElement.setAttribute('zen-right-side', 'true');
-    } else {
+      } else {
-      this.navigatorToolbox.removeAttribute('zen-right-side');
+        this.navigatorToolbox.removeAttribute('zen-right-side');
-      document.documentElement.removeAttribute('zen-right-side');
+        document.documentElement.removeAttribute('zen-right-side');
-    }
-
-    if (isSidebarExpanded) {
-      this.navigatorToolbox.setAttribute('zen-sidebar-expanded', 'true');
-    } else {
-      this.navigatorToolbox.removeAttribute('zen-sidebar-expanded');
-    }
-
-    const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
-    if ((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons) || isCompactMode) {
-      appContentNavbarContaienr.setAttribute('should-hide', 'true');
-    } else {
-      appContentNavbarContaienr.removeAttribute('should-hide');
-    }
-
-    // Check if the sidebar is in hover mode
-    if (
-      !this.navigatorToolbox.hasAttribute('zen-right-side') &&
-      !isCompactMode
-    ) {
-      this.navigatorToolbox.prepend(topButtons);
-    //  browser.prepend(this.navigatorToolbox);
-    } else {
-    //  customizationTarget.prepend(topButtons);
-    //  tabboxWrapper.prepend(this.navigatorToolbox);
-    }
-
-    //if (!isVerticalTabs) {
-    //  document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
-    //}
-
-    let windowButtons = this.actualWindowButtons;
-    let doNotChangeWindowButtons = !isCompactMode && isRightSide && this.isWindowsStyledButtons;
-    const navBar = document.getElementById('nav-bar');
-
-    if (isSingleToolbar) {
-      this._navbarParent = navBar.parentElement;
-      let elements = document.querySelectorAll('#nav-bar-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional):not(#urlbar-container)');
-      elements = Array.from(elements);
-      // Add separator if it doesn't exist
-      if (!buttonsTarget.contains(this._topButtonsSeparatorElement)) {
-        buttonsTarget.append(this._topButtonsSeparatorElement);
       }
-      for (const button of elements) {
+
-        buttonsTarget.append(button);
+      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');
       }
-      buttonsTarget.prepend(document.getElementById('unified-extensions-button'));
+
-      buttonsTarget.prepend(document.getElementById('PanelUI-button'));
+      const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
-      if (this.isWindowsStyledButtons && !doNotChangeWindowButtons) {
+      if ((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons) || isCompactMode) {
-        document.getElementById('zen-appcontent-navbar-container').append(windowButtons);
+        appContentNavbarContaienr.setAttribute('should-hide', 'true');
+      } else {
+        appContentNavbarContaienr.removeAttribute('should-hide');
       }
+
+      // Check if the sidebar is in hover mode
+      if (
+        !this.navigatorToolbox.hasAttribute('zen-right-side') &&
+        !isCompactMode
+      ) {
+        this.navigatorToolbox.prepend(topButtons);
+      //  browser.prepend(this.navigatorToolbox);
+      } else {
+      //  customizationTarget.prepend(topButtons);
+      //  tabboxWrapper.prepend(this.navigatorToolbox);
+      }
+
+      //if (!isVerticalTabs) {
+      //  document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
+      //}
+
+      let windowButtons = this.actualWindowButtons;
+      let doNotChangeWindowButtons = !isCompactMode && isRightSide && this.isWindowsStyledButtons;
+      const navBar = document.getElementById('nav-bar');
+
+      if (isSingleToolbar) {
+        this._navbarParent = navBar.parentElement;
+        let elements = document.querySelectorAll('#nav-bar-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional):not(#urlbar-container)');
+        elements = Array.from(elements);
+        // Add separator if it doesn't exist
+        if (!buttonsTarget.contains(this._topButtonsSeparatorElement)) {
+          buttonsTarget.append(this._topButtonsSeparatorElement);
+        }
+        for (const button of elements) {
+          buttonsTarget.append(button);
+        }
+        buttonsTarget.prepend(document.getElementById('unified-extensions-button'));
+        buttonsTarget.prepend(document.getElementById('PanelUI-button'));
+        if (this.isWindowsStyledButtons && !doNotChangeWindowButtons) {
+          document.getElementById('zen-appcontent-navbar-container').append(windowButtons);
+        }
+        if (isCompactMode) {
+          titlebar.prepend(navBar);
+          titlebar.prepend(topButtons);
+        } else {
+          titlebar.before(topButtons);
+          titlebar.before(navBar);
+        }
+        document.documentElement.setAttribute("zen-single-toolbar", true);
+        this._hasSetSingleToolbar = true;
+      } else if (this._hasSetSingleToolbar) {
+        this._hasSetSingleToolbar = false;
+        // Do the opposite
+        this._navbarParent.prepend(navBar);
+        const elements = document.querySelectorAll('#zen-sidebar-top-buttons-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional)');
+        for (const button of elements) {
+          document.getElementById('nav-bar-customization-target').append(button);
+        }
+        document.documentElement.removeAttribute("zen-single-toolbar");
+        navBar.appendChild(document.getElementById('PanelUI-button'));
+        this._toolbarOriginalParent.prepend(navBar);
+        CustomizableUI.zenInternalCU._rebuildRegisteredAreas();
+      }
+
       if (isCompactMode) {
-        titlebar.prepend(navBar);
         titlebar.prepend(topButtons);
       } else {
-        titlebar.before(topButtons);
+        if (isSidebarExpanded) {
-        titlebar.before(navBar);
+          titlebar.before(topButtons);
-      }
-      document.documentElement.setAttribute("zen-single-toolbar", true);
-      this._hasSetSingleToolbar = true;
-    } else if (this._hasSetSingleToolbar) {
-      this._hasSetSingleToolbar = false;
-      // Do the opposite
-      this._navbarParent.prepend(navBar);
-      const elements = document.querySelectorAll('#zen-sidebar-top-buttons-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional)');
-      for (const button of elements) {
-        document.getElementById('nav-bar-customization-target').append(button);
-      }
-      document.documentElement.removeAttribute("zen-single-toolbar");
-      navBar.appendChild(document.getElementById('PanelUI-button'));
-      this._toolbarOriginalParent.prepend(navBar);
-      CustomizableUI.zenInternalCU._rebuildRegisteredAreas();
-    }
-
-    if (isCompactMode) {
-      titlebar.prepend(topButtons);
-    } else {
-      titlebar.before(topButtons);
-    }
-
-    if (doNotChangeWindowButtons) {
-      document.getElementById("zen-sidebar-top-buttons-customization-target").appendChild(windowButtons);
-    } else if (!isSingleToolbar && !isCompactMode) {
-      if (this.isWindowsStyledButtons) {
-        if (isRightSide) {
-          document.getElementById('zen-appcontent-navbar-container').append(windowButtons);
         } else {
-          navBar.append(windowButtons);
+          titlebar.prepend(topButtons);
-        }
-      } else {
-        if (isRightSide) {
-          document.getElementById('zen-appcontent-navbar-container').appendChild(windowButtons);
-        } else {
-          topButtons.prepend(windowButtons);
         }
       }
-    } else if (!isSingleToolbar && isCompactMode) {
-      navBar.appendChild(windowButtons);
-    }
 
-    // Always move the splitter next to the sidebar
+      if (doNotChangeWindowButtons) {
-    this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
+        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) {
+            document.getElementById('zen-appcontent-navbar-container').append(windowButtons);
+          } else {
+            navBar.append(windowButtons);
+          }
+        } else {
+          if (isRightSide) {
+            document.getElementById('zen-appcontent-navbar-container').appendChild(windowButtons);
+          } else {
+            topButtons.prepend(windowButtons);
+          }
+        }
+      } else if (!isSingleToolbar && isCompactMode) {
+        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 */
+:root:not([zen-sidebar-expanded='true']) {
-#navigator-toolbox: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: 600px;
-  min-width: 45%;
+  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,22 +31,36 @@
     margin-right: var(--urlbar-margin-inline);
   }
 
-  #urlbar-container:has(&) {
+  :root[zen-right-side='true'] & {
-    border-radius: var(--toolbarbutton-border-radius);
+    right: 0;
-    background: var(--toolbarbutton-hover-background);
+  }
 
-    &::before {
+  @media not (-moz-bool-pref: 'zen.view.compact') {
-      content: '';
+    max-width: 45%;
-      position: fixed;
+    min-width: 45%;
-      top: 0;
+    position: absolute;
-      left: 0;
+
-      right: 0;
+    top: calc(var(--zen-toolbar-height) * 4) !important;
-      bottom: 0;
+    left: 50%;
-      background: rgba(0, 0, 0, 0.5);
+    transform: translateX(-50%);
-      z-index: -1;
+
-      width: 100%;
+    #urlbar-container:has(&) {
-      height: 100%;
+      border-radius: var(--toolbarbutton-border-radius);
-      pointer-events: none;
+      background: var(--toolbarbutton-hover-background);
+
+      &::before {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+      }
     }
   }
 }

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 (