Refactor ZenCompactModeManager and ZenStartup.mjs

src/browser/base/content/ZenStartup.mjs

@@ -128,15 +128,14 @@
       splitter.setAttribute('resizeafter', 'none');
       toolbox.insertAdjacentElement('afterend', splitter);
 
-      this._moveWindowButtons();
       this._addSidebarButtons();
       this._hideToolbarButtons();
     },
 
     _moveWindowButtons() {
-      const windowControls = document.getElementById('titlebar-buttonbox-container');
-      const toolboxIcons = document.getElementById('zen-sidebar-top-buttons');
-      if (AppConstants.platform == "macosx") {
+      const windowControls = document.getElementsByClassName('titlebar-buttonbox-container')[0];
+      const toolboxIcons = document.getElementById('zen-sidebar-top-buttons-customization-target');
+      if (AppConstants.platform === "macosx") {
         toolboxIcons.prepend(windowControls);
       }
     },
@@ -221,6 +220,8 @@
         CustomizableUI.registerToolbarNode(
           document.getElementById('zen-sidebar-icons-wrapper')
         );
+
+        this._moveWindowButtons();
       }, 100);
     },
 

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

@@ -7,68 +7,116 @@
 }
 
 @media (-moz-bool-pref: 'zen.view.compact') {
-  /* Set the extra paddings */
-  #tabbrowser-tabpanels {
-    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-      padding-right: var(--zen-element-separation);
+  :root:not([customizing]) {
+    @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
+      #zen-sidebar-web-panel-wrapper {
+        margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
+      }
+
+      #zen-sidebar-top-buttons-customization-target {
+        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
+      }
+
+      /* Set the extra paddings */
+      #tabbrowser-tabpanels {
+        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+          padding-right: var(--zen-element-separation);
+        }
+
+        #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
+          padding-left: var(--zen-element-separation);
+        }
+      }
+
+      #zen-sidebar-splitter {
+        display: none !important;
+      }
+
+      #navigator-toolbox {
+        position: absolute;
+        height: 98%;
+        z-index: 9;
+        background: var(--zen-themed-toolbar-bg) !important;
+        box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
+        border-top-right-radius: var(--zen-border-radius);
+        border-bottom-right-radius: var(--zen-border-radius);
+        border: 1px solid var(--zen-colors-border);
+        border-left-width: 0;
+        padding: var(--zen-toolbox-padding) !important;
+        transition: all 0.1s ease-in-out;
+        right: calc(100% - var(--zen-element-separation));
+        top: 50%;
+        opacity: 0;
+
+        transform: translate3d(0, -50%, 0);
+
+        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+          border-left-width: 1px;
+          border-right-width: 0;
+
+          left: calc(100% - var(--zen-element-separation));
+          right: unset;
+
+          border-top-left-radius: var(--zen-border-radius);
+          border-bottom-left-radius: var(--zen-border-radius);
+
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+      
+      #navigator-toolbox:hover,
+      #navigator-toolbox[zen-has-hover],
+      #navigator-toolbox:focus-within,
+      #navigator-toolbox[zen-user-show],
+      #navigator-toolbox[flash-popup],
+      #navigator-toolbox[has-popup-menu],
+      #navigator-toolbox[movingtab],
+      #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
+      #navigator-toolbox:has(.tabbrowser-tab:active),
+      #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
+        opacity: 1;
+        
+        transform: translate3d(calc(100% - var(--zen-element-separation) - 1px), -50%, 0);
+        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+          transform: translate3d(calc(-100% + var(--zen-element-separation) + 1px), -50%, 0);
+        }
+      }
     }
 
-    #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
-      padding-left: var(--zen-element-separation);
-    }
-  }
+    @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
+      #tabbrowser-tabpanels {
+        padding-top: var(--zen-element-separation) !important;
+      }
 
-  #zen-sidebar-splitter {
-    display: none !important;
-  }
+      #zen-appcontent-navbar-container {
+        position: absolute;
+        top: 0;
+        transform: translateY(calc(-100% + var(--zen-element-separation)));
+        left: 0;
+        z-index: 10;
+        background: var(--zen-themed-toolbar-bg);
+        box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
+        border-bottom-left-radius: var(--zen-border-radius);
+        border-bottom-right-radius: var(--zen-border-radius);
+        border: 1px solid var(--zen-colors-border);
+        border-top-width: 0px;
+        transition: all 0.1s ease-in-out;
+        width: 100%;
+        opacity: 0;
+      }
 
-  #navigator-toolbox {
-    position: absolute;
-    height: 98%;
-    z-index: 9;
-    background: var(--zen-themed-toolbar-bg) !important;
-    box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
-    border-top-right-radius: var(--zen-border-radius);
-    border-bottom-right-radius: var(--zen-border-radius);
-    border: 1px solid var(--zen-colors-border);
-    border-left-width: 0;
-    padding: var(--zen-toolbox-padding) !important;
-    transition: all 0.1s ease-in-out;
-    right: calc(100% - var(--zen-element-separation));
-    top: 50%;
-    opacity: 0;
+      #zen-appcontent-navbar-container:hover,
+      #zen-appcontent-navbar-container[zen-has-hover],
+      #zen-appcontent-navbar-container:focus-within,
+      #zen-appcontent-navbar-container[zen-user-show],
+      #zen-appcontent-navbar-container[has-popup-menu],
+      #zen-appcontent-navbar-container:has(*[open='true']) {
+        opacity: 1;
+        border-top-width: 1px;
 
-    transform: translate3d(0, calc(-50% - 2px), 0);
-
-    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-      border-left-width: 1px;
-      border-right-width: 0;
-
-      left: calc(100% - var(--zen-element-separation));
-      right: unset;
-
-      border-top-left-radius: var(--zen-border-radius);
-      border-bottom-left-radius: var(--zen-border-radius);
-
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-  
-  #navigator-toolbox:hover,
-  #navigator-toolbox:focus-within,
-  #navigator-toolbox[zen-user-show],
-  #navigator-toolbox[flash-popup],
-  #navigator-toolbox[has-popup-menu],
-  #navigator-toolbox[movingtab],
-  #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
-  #navigator-toolbox:has(.tabbrowser-tab:active),
-  #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
-    opacity: 1;
-    
-    transform: translate3d(calc(100% - var(--zen-element-separation) - 1px), calc(-50% - 2px), 0);
-    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-      transform: translate3d(calc(-100% + var(--zen-element-separation) + 1px), calc(-50% - 2px), 0);
+        transform: translateY(-1px);
+      }
     }
   }
 }

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

@@ -23,6 +23,8 @@ toolbar {
     height: calc(var(--toolbarbutton-inner-padding) + 10px);
     width: calc(var(--toolbarbutton-inner-padding) + 10px);
     padding: 0;
+
+    margin: 0 var(--toolbarbutton-inner-padding) !important;
   }
 
   &:hover {

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

@@ -147,7 +147,7 @@
 
   /* Mark: toolbox as expanded */
   #navigator-toolbox:is(
-    #navigator-toolbox[zen-user-hover='true']:hover,
+    #navigator-toolbox[zen-user-hover='true'][zen-has-hover],
     #navigator-toolbox[zen-user-hover='true']:focus-within,
     #navigator-toolbox[zen-user-hover='true'][movingtab],
     #navigator-toolbox[zen-user-hover='true'][flash-popup],
@@ -269,7 +269,7 @@
 
   /* Mark: toolbox as collapsed */
   #navigator-toolbox:not(#navigator-toolbox:is(
-    #navigator-toolbox[zen-user-hover='true']:hover,
+    #navigator-toolbox[zen-user-hover='true'][zen-has-hover],
     #navigator-toolbox[zen-user-hover='true']:focus-within,
     #navigator-toolbox[zen-user-hover='true'][movingtab],
     #navigator-toolbox[zen-user-hover='true'][flash-popup],

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

@@ -259,9 +259,6 @@ button.popup-notification-dropmarker {
   align-items: center;
 }
 
-#browser:not(:has([zen-expanded="true"])) #nav-bar {
-  padding-left: calc(var(--zen-toolbox-padding) 4px);
-}
 
 /* Other small tweaks */
 #nav-bar-customization-target {

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

@@ -82,7 +82,7 @@
 @media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
   /** Keep these selectors in sync with the ones in vertical-tabs.css */
   #navigator-toolbox:is(
-      #navigator-toolbox[zen-user-hover='true']:hover,
+      #navigator-toolbox[zen-user-hover='true'][zen-has-hover],
       #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
       #navigator-toolbox[zen-user-hover='true']:focus-within,
       #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,