Refactor ZenCompactModeManager and ZenStartup.mjs

src/browser/app/profile/zen-browser.js

@@ -78,14 +78,15 @@ pref('zen.theme.content-element-separation', 8); // In pixels
 pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);
 pref('zen.view.compact', false);
-pref('zen.view.compact.hide-toolbar', false);
 
 pref('zen.theme.color-prefs.amoled', false);
 pref('zen.theme.color-prefs.colorful', false);
 
+pref('zen.view.compact.hide-tabbar', true);
+pref('zen.view.compact.hide-toolbar', false);
 pref('zen.view.compact.toolbar-flash-popup', true);
 pref('zen.view.compact.toolbar-flash-popup.duration', 800);
-pref('zen.view.compact.toolbar-hide-after-hover.duration', 2000);
+pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000);
 
 pref('zen.view.sidebar-height-throttle', 200); // in ms
 pref('zen.view.sidebar-expanded', false);

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 windowControls = document.getElementsByClassName('titlebar-buttonbox-container')[0];
-      const toolboxIcons = document.getElementById('zen-sidebar-top-buttons');
+      const toolboxIcons = document.getElementById('zen-sidebar-top-buttons-customization-target');
-      if (AppConstants.platform == "macosx") {
+      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,6 +7,16 @@
 }
 
 @media (-moz-bool-pref: 'zen.view.compact') {
+  :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']) & {
@@ -38,7 +48,7 @@
         top: 50%;
         opacity: 0;
 
-    transform: translate3d(0, calc(-50% - 2px), 0);
+        transform: translate3d(0, -50%, 0);
 
         #browser:has(#navigator-toolbox[zen-right-side='true']) & {
           border-left-width: 1px;
@@ -56,6 +66,7 @@
       }
       
       #navigator-toolbox:hover,
+      #navigator-toolbox[zen-has-hover],
       #navigator-toolbox:focus-within,
       #navigator-toolbox[zen-user-show],
       #navigator-toolbox[flash-popup],
@@ -66,9 +77,46 @@
       #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);
+        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), calc(-50% - 2px), 0);
+          transform: translate3d(calc(-100% + var(--zen-element-separation) + 1px), -50%, 0);
+        }
+      }
+    }
+
+    @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
+      #tabbrowser-tabpanels {
+        padding-top: var(--zen-element-separation) !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;
+      }
+
+      #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: 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,

src/browser/components/preferences/zen-settings.js

@@ -442,6 +442,7 @@ var gZenLooksAndFeel = {
       }
     }, 500);
     this.setDarkThemeListener();
+    this.setCompactModeStyle();
   },
 
   onPreferColorSchemeChange(event) {
@@ -455,9 +456,9 @@ var gZenLooksAndFeel = {
   },
 
   setDarkThemeListener() {
-    this.chooser = document.getElementById('zen-dark-theme-styles-form');
+    const chooser = document.getElementById('zen-dark-theme-styles-form');
-    this.radios = [...this.chooser.querySelectorAll('input')];
+    const radios = [...chooser.querySelectorAll('input')];
-    for (let radio of this.radios) {
+    for (let radio of radios) {
       if (radio.value === 'amoled' && Services.prefs.getBoolPref('zen.theme.color-prefs.amoled')) {
         radio.checked = true;
       } else if (radio.value === 'colorful' && Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')) {
@@ -489,6 +490,41 @@ var gZenLooksAndFeel = {
     }
   },
 
+  setCompactModeStyle() {
+    const chooser = document.getElementById('zen-compact-mode-styles-form');
+    const radios = [...chooser.querySelectorAll('input')];
+    for (let radio of radios) {
+      if (radio.value === 'left' && Services.prefs.getBoolPref('zen.view.compact.hide-tabbar')) {
+        radio.checked = true;
+      } else if (radio.value === 'top' && Services.prefs.getBoolPref('zen.view.compact.hide-toolbar')) {
+        radio.checked = true;
+      } else if (
+        radio.value === 'both' &&
+        !Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') &&
+        !Services.prefs.getBoolPref('zen.view.compact.hide-toolbar')
+      ) {
+        radio.checked = true;
+      }
+      radio.addEventListener('change', (e) => {
+        let value = e.target.value;
+        switch (value) {
+          case 'left':
+            Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
+            Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false);
+            break;
+          case 'top':
+            Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', false);
+            Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
+            break;
+          default:
+            Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
+            Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
+            break;
+        }
+      });
+    }
+  },
+
   _initializeTabbarExpandForm() {
     const form = document.getElementById('zen-expand-tabbar-strat');
     const radios = form.querySelectorAll('input[type=radio]');

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -36,10 +36,10 @@
         </g>
         <g id="Outline">
             <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:7.21px;"/>
+                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
             </g>
             <g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
-                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:8.78px;"/>
+                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
             </g>
         </g>
         <g id="Top-Bar" serif:id="Top Bar">
@@ -77,14 +77,14 @@
 <svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
     <g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
         <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-            <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:color-mix(in srgb, var(--zen-colors-secondary) 40%, transparent 40%)"/>
+            <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:color-mix(in srgb, var(--zen-colors-secondary) 17%, transparent 98%)"/>
         </g>
         <g id="Outline">
             <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:7.21px;"/>
+                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
             </g>
             <g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
-                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:8.78px;"/>
+                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
             </g>
         </g>
         <g id="Top-Bar" serif:id="Top Bar">
@@ -126,10 +126,10 @@
         </g>
         <g id="Outline">
             <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:7.21px;"/>
+                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4px;"/>
             </g>
             <g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
-                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:8.78px;"/>
+                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4.78px;"/>
             </g>
         </g>
         <g id="Top-Bar" serif:id="Top Bar">
@@ -190,10 +190,44 @@
       <checkbox id="zenLooksAndFeelShowCompactView"
             data-l10n-id="zen-look-and-feel-compact-view-enabled"
             preference="zen.view.compact"/>
+        <html:div id="ZenCompactModeStyle">
+            <form xmlns="http://www.w3.org/1999/xhtml" autocomplete="off" id="zen-compact-mode-styles-form">
+                  <label class="web-appearance-choice">
+                        <div class="web-appearance-choice-image-container">
+                            <div class="zen-compact-mode-styles-browser-wrapper" left="">
+                                <div></div>
+                            </div>
+                        </div>
+                        <div class="web-appearance-choice-footer">
+                        <input type="radio" name="web-appearance" value="left" data-l10n-id="preferences-web-appearance-choice-input-auto"
+                        /><span data-l10n-id="zen-compact-mode-styles-left" />
+                  </div>
+                  </label>
+                        <label class="web-appearance-choice">
+                        <div class="web-appearance-choice-image-container">
+                            <div class="zen-compact-mode-styles-browser-wrapper" top="">
+                                <div></div>
+                            </div>
+                        </div>
+                        <div class="web-appearance-choice-footer">
+                        <input type="radio" name="web-appearance" value="top" data-l10n-id="preferences-web-appearance-choice-input-light"
+                        /><span data-l10n-id="zen-compact-mode-styles-top" />
+                  </div>
+                  </label>
+                        <label class="web-appearance-choice">
+                        <div class="web-appearance-choice-image-container">
+                            <div class="zen-compact-mode-styles-browser-wrapper" both="">
+                                <div></div>
+                            </div>
+                        </div>
+                        <div class="web-appearance-choice-footer">
+                        <input type="radio" name="web-appearance" value="both" data-l10n-id="preferences-web-appearance-choice-input-dark"
+                        /><span data-l10n-id="zen-compact-mode-styles-both" />
+                  </div>
+                  </label>
+            </form>
+      </html:div>
       <vbox class="indent">
-            <checkbox id="zenLooksAndFeelShowCompactViewToolbar"
-                  data-l10n-id="zen-look-and-feel-compact-view-top-toolbar"
-                  preference="zen.view.compact.hide-toolbar"/>
             <checkbox id="zenLooksAndFeelEnableToolbarFlashPopup"
                       data-l10n-id="zen-look-and-feel-compact-toolbar-flash-popup"
                       preference="zen.view.compact.toolbar-flash-popup"/>

src/browser/themes/shared/preferences/zen-preferences.css

@@ -179,7 +179,8 @@ groupbox h2 {
   margin-bottom: 15px;
 }
 
-#zen-dark-theme-styles-form {
+#zen-dark-theme-styles-form,
+#zen-compact-mode-styles-form {
   display: flex;
   justify-content: space-between;
   gap: var(--space-large);
@@ -234,6 +235,43 @@ groupbox h2 {
   border-color: var(--zen-primary-color);
 }
 
+.zen-compact-mode-styles-browser-wrapper {
+  width: 55%;
+  height: 60px;
+  display: flex;
+  border-radius: 10px;
+  border: 1px solid var(--zen-colors-border);
+  background: var(--zen-colors-tertiary);
+  position: relative;
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+
+  padding: 7px;
+
+  &[left] div {
+    width: 100%;
+    background: var(--zen-primary-color);
+    border-radius: 5px;
+    height: 18px;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  &[top] div {
+    width: 18px;
+    background: var(--zen-primary-color);
+    border-radius: 5px;
+    height: 100%;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  &[both] div {
+    width: 100%;
+    height: 100%;
+    background: var(--zen-colors-secondary);
+    border-radius: 5px;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+  }
+}
+
 .zenLooksAndFeelColorOption {
   width: 60px;
   height: 60px;