Remove compact view preference and update related logic for improved clarity

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

@@ -111,7 +111,6 @@ pref('zen.theme.color-prefs.use-workspace-colors', true);
 pref('zen.theme.color-prefs.amoled', false);
 pref('zen.theme.color-prefs.colorful', false);
 
-pref('zen.view.compact', false);
 pref('zen.view.compact.hide-tabbar', true);
 pref('zen.view.compact.hide-toolbar', false);
 pref('zen.view.compact.toolbar-flash-popup', true);

src/browser/base/content/ZenUIManager.mjs

@@ -233,14 +233,6 @@ var gZenVerticalTabsManager = {
   },
 
   initializePreferences(updateEvent) {
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      '_prefsCompactMode',
-      'zen.view.compact',
-      false
-      // no need to update the event, it's handled by the compact mode manager
-    );
-
     XPCOMUtils.defineLazyPreferenceGetter(this, '_prefsVerticalTabs', 'zen.tabs.vertical', true, updateEvent);
     XPCOMUtils.defineLazyPreferenceGetter(this, '_prefsRightSide', 'zen.tabs.vertical.right-side', false, updateEvent);
     XPCOMUtils.defineLazyPreferenceGetter(this, '_prefsUseSingleToolbar', 'zen.view.use-single-toolbar', false, updateEvent);
@@ -267,7 +259,7 @@ var gZenVerticalTabsManager = {
       }
 
       const topButtons = document.getElementById('zen-sidebar-top-buttons');
-      const isCompactMode = this._prefsCompactMode && !forCustomizableMode;
+      const isCompactMode = gZenCompactModeManager.preference && !forCustomizableMode;
       const isVerticalTabs = this._prefsVerticalTabs || forCustomizableMode;
       const isSidebarExpanded = this._prefsSidebarExpanded || !isVerticalTabs;
       const isRightSide = this._prefsRightSide && isVerticalTabs;

src/browser/base/content/browser-xhtml.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
-index 5dd337a2ffc9f9107d735f4dc96a50d57b12d213..58ecaf7136e13885ac38d74d40b5ef0f52cd7684 100644
+index ca8953f3604f4f70de76576964af5f3c733f17a0..a2731ef6d4392301217cd05f6583e4814f1118e2 100644
 --- a/browser/base/content/browser.xhtml
 +++ b/browser/base/content/browser.xhtml
-@@ -98,6 +98,8 @@
+@@ -101,6 +101,8 @@
  
    <title data-l10n-id="browser-main-window-title"></title>
  
@@ -11,7 +11,7 @@ index 5dd337a2ffc9f9107d735f4dc96a50d57b12d213..58ecaf7136e13885ac38d74d40b5ef0f
  # All JS files which are needed by browser.xhtml and other top level windows to
  # support MacOS specific features *must* go into the global-scripts.inc file so
  # that they can be shared with macWindow.inc.xhtml.
-@@ -141,6 +143,7 @@
+@@ -145,6 +147,7 @@
    window.addEventListener("DOMContentLoaded",
      gBrowserInit.onDOMContentLoaded.bind(gBrowserInit), { once: true });
  </script>
@@ -19,18 +19,18 @@ index 5dd337a2ffc9f9107d735f4dc96a50d57b12d213..58ecaf7136e13885ac38d74d40b5ef0f
  </head>
  <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  # All sets except for popupsets (commands, keys, and stringbundles)
-@@ -162,9 +165,12 @@
+@@ -166,9 +169,12 @@
      </vbox>
    </html:template>
  
 -#include navigator-toolbox.inc.xhtml
 -
 -#include browser-box.inc.xhtml
-+  <hbox id="zen-main-app-wrapper" flex="1">
++  <hbox id="zen-main-app-wrapper" flex="1" persist="zen-compact-mode">
 +    #include navigator-toolbox.inc.xhtml
 +    <html:span id="zen-sidebar-box-container">
 +    </html:span>
-+    #include browser-box.inc.xhtml    
++    #include browser-box.inc.xhtml
 +  </hbox>
  
    <html:template id="customizationPanel">

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

@@ -5,330 +5,328 @@
  */
 /* All overrides for compact mode go here */
 
-@media (-moz-bool-pref: 'zen.view.compact') {
+:root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) {
-  :root:not([customizing]):not([inDOMFullscreen='true']) {
+  #zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
-    #zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
+    max-height: 0 !important;
-      max-height: 0 !important;
+    min-height: 0 !important;
-      min-height: 0 !important;
+    opacity: 0;
-      opacity: 0;
+    overflow: hidden;
-      overflow: hidden;
+    pointer-events: none;
-      pointer-events: none;
+  }
+
+  @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') or (-moz-bool-pref: 'zen.view.use-single-toolbar') {
+    #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
+      margin-left: var(--zen-sidebar-web-panel-spacing) !important;
     }
 
-    @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') or (-moz-bool-pref: 'zen.view.use-single-toolbar') {
+    #zen-tabbox-wrapper {
-      #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
+      /* Remove extra 1px of margine we have to add to the tabbox */
-        margin-left: var(--zen-sidebar-web-panel-spacing) !important;
+      margin-left: 0 !important;
+    }
+
+    #zen-appcontent-wrapper {
+      margin-left: var(--zen-element-separation) !important;
+
+      & #tabbrowser-tabbox {
+        margin-left: 0 !important;
+      }
+    }
+
+    #zen-sidebar-top-buttons-customization-target {
+      padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
+    }
+
+    #zen-sidebar-splitter {
+      display: none !important;
+    }
+
+    #navigator-toolbox {
+      --zen-toolbox-max-width: 64px !important;
+      --zen-compact-float: var(--zen-element-separation);
+
+      &:not([animate='true']) {
+        position: absolute;
+        z-index: 10;
+        transition:
+          left 0.25s ease,
+          right 0.25s ease,
+          opacity 1.5s ease;
+        top: 0;
+        bottom: var(--zen-element-separation);
+        opacity: 0;
+        padding: 0 var(--zen-compact-float) !important;
+
+        :root[zen-single-toolbar='true'] & {
+          top: var(--zen-element-separation);
+        }
       }
 
-      #zen-tabbox-wrapper {
+      &:not([zen-right-side='true']) #nav-bar {
-        /* Remove extra 1px of margine we have to add to the tabbox */
         margin-left: 0 !important;
       }
 
-      #zen-appcontent-wrapper {
+      & #urlbar[open] {
-        margin-left: var(--zen-element-separation) !important;
+        top: 0 !important;
-
-        & #tabbrowser-tabbox {
-          margin-left: 0 !important;
-        }
-      }
-
-      #zen-sidebar-top-buttons-customization-target {
-        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
-      }
-
-      #zen-sidebar-splitter {
-        display: none !important;
-      }
-
-      #navigator-toolbox {
-        --zen-toolbox-max-width: 64px !important;
-        --zen-compact-float: var(--zen-element-separation);
-
-        &:not([animate='true']) {
-          position: absolute;
-          z-index: 10;
-          transition:
-            left 0.25s ease,
-            right 0.25s ease,
-            opacity 1.5s ease;
-          top: 0;
-          bottom: var(--zen-element-separation);
-          opacity: 0;
-          padding: 0 var(--zen-compact-float) !important;
-
-          :root[zen-single-toolbar='true'] & {
-            top: var(--zen-element-separation);
-          }
-        }
-
-        &:not([zen-right-side='true']) #nav-bar {
-          margin-left: 0 !important;
-        }
-
-        & #urlbar[open] {
-          top: 0 !important;
-        }
-      }
-
-      &:not([zen-right-side='true']) #navigator-toolbox {
-        left: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
-      }
-
-      /* When we have multiple toolbars and the top-toolbar is NOT being hidden,
-        * we need to adjust the top-padding of the toolbox to account for the
-        * extra toolbar height. */
-      @media not (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
-        &:not([zen-single-toolbar='true']) #navigator-toolbox:not([animate='true']) {
-          margin-top: var(--zen-toolbar-height) !important;
-        }
-      }
-
-      &[zen-right-side='true'] {
-        & #navigator-toolbox {
-          --zen-compact-float: calc(var(--zen-element-separation) + 1px);
-
-          &:not([animate='true']) {
-            right: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
-          }
-        }
-
-        & .browserSidebarContainer {
-          margin-left: 0 !important;
-          margin-right: var(--zen-element-separation) !important;
-        }
-      }
-
-      #navigator-toolbox:not([animate='true']) #titlebar {
-        box-shadow: var(--zen-big-shadow);
-        border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 2);
-        padding: var(--zen-toolbox-padding) !important;
-        position: relative;
-        background: var(--zen-dialog-background);
-        border: 1px solid var(--zen-colors-border-contrast);
-
-        :root[zen-single-toolbar='true'] {
-          padding-top: 0 !important;
-          margin-left: 0 !important;
-        }
-
-        @media (-moz-bool-pref: 'zen.view.compact.color-sidebar') {
-          background: var(--zen-main-browser-background-toolbar) !important;
-          background-attachment: fixed !important;
-          background-size: 2000px !important; /* Dont ask me why */
-          backdrop-filter: blur(5px) !important;
-        }
-      }
-
-      #navigator-toolbox:hover,
-      #navigator-toolbox[zen-has-hover],
-      #navigator-toolbox[zen-user-show],
-      #navigator-toolbox[flash-popup],
-      #navigator-toolbox[has-popup-menu],
-      #navigator-toolbox[movingtab],
-      #navigator-toolbox:has(.tabbrowser-tab:active),
-      #navigator-toolbox:has(
-          *:is([panelopen='true'], [open='true'], #nav-bar:focus-within):not(tab):not(.zen-compact-mode-ignore)
-        ) {
-        &:not([animate='true']) {
-          --zen-compact-mode-func: linear(
-            0 0%,
-            0.002748 1%,
-            0.010544 2%,
-            0.022757 3%,
-            0.038804 4%,
-            0.058151 5%,
-            0.080308 6%,
-            0.104828 7.000000000000001%,
-            0.131301 8%,
-            0.159358 9%,
-            0.188662 10%,
-            0.21891 11%,
-            0.249828 12%,
-            0.281172 13%,
-            0.312724 14.000000000000002%,
-            0.344288 15%,
-            0.375693 16%,
-            0.40679 17%,
-            0.437447 18%,
-            0.467549 19%,
-            0.497 20%,
-            0.525718 21%,
-            0.553633 22%,
-            0.580688 23%,
-            0.60684 24%,
-            0.632052 25%,
-            0.656298 26%,
-            0.679562 27%,
-            0.701831 28.000000000000004%,
-            0.723104 28.999999999999996%,
-            0.743381 30%,
-            0.76267 31%,
-            0.780983 32%,
-            0.798335 33%,
-            0.814744 34%,
-            0.830233 35%,
-            0.844826 36%,
-            0.858549 37%,
-            0.87143 38%,
-            0.883498 39%,
-            0.894782 40%,
-            0.905314 41%,
-            0.915125 42%,
-            0.924247 43%,
-            0.93271 44%,
-            0.940547 45%,
-            0.947787 46%,
-            0.954463 47%,
-            0.960603 48%,
-            0.966239 49%,
-            0.971397 50%,
-            0.976106 51%,
-            0.980394 52%,
-            0.984286 53%,
-            0.987808 54%,
-            0.990984 55.00000000000001%,
-            0.993837 56.00000000000001%,
-            0.99639 56.99999999999999%,
-            0.998664 57.99999999999999%,
-            1.000679 59%,
-            1.002456 60%,
-            1.004011 61%,
-            1.005363 62%,
-            1.006528 63%,
-            1.007522 64%,
-            1.008359 65%,
-            1.009054 66%,
-            1.009618 67%,
-            1.010065 68%,
-            1.010405 69%,
-            1.010649 70%,
-            1.010808 71%,
-            1.01089 72%,
-            1.010904 73%,
-            1.010857 74%,
-            1.010757 75%,
-            1.010611 76%,
-            1.010425 77%,
-            1.010205 78%,
-            1.009955 79%,
-            1.009681 80%,
-            1.009387 81%,
-            1.009077 82%,
-            1.008754 83%,
-            1.008422 84%,
-            1.008083 85%,
-            1.00774 86%,
-            1.007396 87%,
-            1.007052 88%,
-            1.00671 89%,
-            1.006372 90%,
-            1.00604 91%,
-            1.005713 92%,
-            1.005394 93%,
-            1.005083 94%,
-            1.004782 95%,
-            1.004489 96%,
-            1.004207 97%,
-            1.003935 98%,
-            1.003674 99%,
-            1.003423 100%
-          );
-          transition:
-            left 0.3125s var(--zen-compact-mode-func),
-            right 0.3125s var(--zen-compact-mode-func);
-          opacity: 1;
-
-          left: -1px;
-          :root[zen-right-side='true'] & {
-            right: -1px;
-            left: auto;
-          }
-        }
       }
     }
 
-    @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
+    &:not([zen-right-side='true']) #navigator-toolbox {
-      &:not([zen-single-toolbar='true']) {
+      left: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
-        & #navigator-toolbox {
+    }
-          top: 0;
+
+    /* When we have multiple toolbars and the top-toolbar is NOT being hidden,
+        * we need to adjust the top-padding of the toolbox to account for the
+        * extra toolbar height. */
+    @media not (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
+      &:not([zen-single-toolbar='true']) #navigator-toolbox:not([animate='true']) {
+        margin-top: var(--zen-toolbar-height) !important;
+      }
+    }
+
+    &[zen-right-side='true'] {
+      & #navigator-toolbox {
+        --zen-compact-float: calc(var(--zen-element-separation) + 1px);
+
+        &:not([animate='true']) {
+          right: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
+        }
+      }
+
+      & .browserSidebarContainer {
+        margin-left: 0 !important;
+        margin-right: var(--zen-element-separation) !important;
+      }
+    }
+
+    #navigator-toolbox:not([animate='true']) #titlebar {
+      box-shadow: var(--zen-big-shadow);
+      border-radius: calc(var(--zen-native-inner-radius) + 2px);
+      padding: var(--zen-toolbox-padding) !important;
+      position: relative;
+      background: var(--zen-dialog-background);
+      border: 1px solid var(--zen-colors-border-contrast);
+
+      :root[zen-single-toolbar='true'] {
+        padding-top: 0 !important;
+        margin-left: 0 !important;
+      }
+
+      @media (-moz-bool-pref: 'zen.view.compact.color-sidebar') {
+        background: var(--zen-main-browser-background-toolbar) !important;
+        background-attachment: fixed !important;
+        background-size: 2000px !important; /* Dont ask me why */
+        backdrop-filter: blur(5px) !important;
+      }
+    }
+
+    #navigator-toolbox:hover,
+    #navigator-toolbox[zen-has-hover],
+    #navigator-toolbox[zen-user-show],
+    #navigator-toolbox[flash-popup],
+    #navigator-toolbox[has-popup-menu],
+    #navigator-toolbox[movingtab],
+    #navigator-toolbox:has(.tabbrowser-tab:active),
+    #navigator-toolbox:has(
+        *:is([panelopen='true'], [open='true'], #nav-bar:focus-within):not(tab):not(.zen-compact-mode-ignore)
+      ) {
+      &:not([animate='true']) {
+        --zen-compact-mode-func: linear(
+          0 0%,
+          0.002748 1%,
+          0.010544 2%,
+          0.022757 3%,
+          0.038804 4%,
+          0.058151 5%,
+          0.080308 6%,
+          0.104828 7.000000000000001%,
+          0.131301 8%,
+          0.159358 9%,
+          0.188662 10%,
+          0.21891 11%,
+          0.249828 12%,
+          0.281172 13%,
+          0.312724 14.000000000000002%,
+          0.344288 15%,
+          0.375693 16%,
+          0.40679 17%,
+          0.437447 18%,
+          0.467549 19%,
+          0.497 20%,
+          0.525718 21%,
+          0.553633 22%,
+          0.580688 23%,
+          0.60684 24%,
+          0.632052 25%,
+          0.656298 26%,
+          0.679562 27%,
+          0.701831 28.000000000000004%,
+          0.723104 28.999999999999996%,
+          0.743381 30%,
+          0.76267 31%,
+          0.780983 32%,
+          0.798335 33%,
+          0.814744 34%,
+          0.830233 35%,
+          0.844826 36%,
+          0.858549 37%,
+          0.87143 38%,
+          0.883498 39%,
+          0.894782 40%,
+          0.905314 41%,
+          0.915125 42%,
+          0.924247 43%,
+          0.93271 44%,
+          0.940547 45%,
+          0.947787 46%,
+          0.954463 47%,
+          0.960603 48%,
+          0.966239 49%,
+          0.971397 50%,
+          0.976106 51%,
+          0.980394 52%,
+          0.984286 53%,
+          0.987808 54%,
+          0.990984 55.00000000000001%,
+          0.993837 56.00000000000001%,
+          0.99639 56.99999999999999%,
+          0.998664 57.99999999999999%,
+          1.000679 59%,
+          1.002456 60%,
+          1.004011 61%,
+          1.005363 62%,
+          1.006528 63%,
+          1.007522 64%,
+          1.008359 65%,
+          1.009054 66%,
+          1.009618 67%,
+          1.010065 68%,
+          1.010405 69%,
+          1.010649 70%,
+          1.010808 71%,
+          1.01089 72%,
+          1.010904 73%,
+          1.010857 74%,
+          1.010757 75%,
+          1.010611 76%,
+          1.010425 77%,
+          1.010205 78%,
+          1.009955 79%,
+          1.009681 80%,
+          1.009387 81%,
+          1.009077 82%,
+          1.008754 83%,
+          1.008422 84%,
+          1.008083 85%,
+          1.00774 86%,
+          1.007396 87%,
+          1.007052 88%,
+          1.00671 89%,
+          1.006372 90%,
+          1.00604 91%,
+          1.005713 92%,
+          1.005394 93%,
+          1.005083 94%,
+          1.004782 95%,
+          1.004489 96%,
+          1.004207 97%,
+          1.003935 98%,
+          1.003674 99%,
+          1.003423 100%
+        );
+        transition:
+          left 0.3125s var(--zen-compact-mode-func),
+          right 0.3125s var(--zen-compact-mode-func);
+        opacity: 1;
+
+        left: -1px;
+        :root[zen-right-side='true'] & {
+          right: -1px;
+          left: auto;
+        }
+      }
+    }
+  }
+
+  @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
+    &:not([zen-single-toolbar='true']) {
+      & #navigator-toolbox {
+        top: 0;
+      }
+
+      & #navigator-toolbox {
+        --zen-toolbox-top-align: var(--zen-element-separation);
+      }
+
+      & #sidebar-box,
+      & #titlebar,
+      & #zen-appcontent-wrapper,
+      & #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
+        margin-top: var(--zen-element-separation) !important;
+      }
+
+      & #zen-appcontent-wrapper {
+        z-index: 3 !important;
+      }
+
+      & #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
+        margin-top: calc(var(--zen-element-separation) * 2) !important;
+      }
+
+      & #zen-appcontent-navbar-container {
+        --zen-compact-toolbar-offset: 5px;
+        position: absolute;
+        top: calc((-1 * var(--zen-toolbar-height)) + var(--zen-element-separation) + 1px);
+        left: 0;
+        z-index: 20;
+        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
+        border-bottom-left-radius: var(--zen-border-radius);
+        border-bottom-right-radius: var(--zen-border-radius);
+        border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
+        border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
+        transition: all 0.15s ease;
+        width: 100%;
+        opacity: 0;
+        background: var(--zen-dialog-background);
+
+        max-height: var(--zen-toolbar-height);
+        overflow: hidden;
+
+        & > * {
+          position: relative !important;
         }
 
-        & #navigator-toolbox {
+        & #urlbar {
-          --zen-toolbox-top-align: var(--zen-element-separation);
+          transform: translateY(-50%);
+          transition: transform 0.1s ease-in-out;
         }
 
-        & #sidebar-box,
+        @media (-moz-bool-pref: 'zen.view.compact.color-toolbar') {
-        & #titlebar,
+          background-attachment: fixed;
-        & #zen-appcontent-wrapper,
+          backdrop-filter: blur(5px);
-        & #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
+          background: var(--zen-main-browser-background-toolbar);
-          margin-top: var(--zen-element-separation) !important;
+          background-size: 100% 2000px;
+          border-bottom: 1px solid var(--zen-colors-border);
         }
+      }
 
-        & #zen-appcontent-wrapper {
+      & #zen-appcontent-navbar-container:hover,
-          z-index: 3 !important;
+      & #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(*:is([panelopen='true'], [open='true']):not(.zen-compact-mode-ignore)) {
+        opacity: 1;
+        border-top-width: 1px;
 
-        & #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
+        top: -1px;
-          margin-top: calc(var(--zen-element-separation) * 2) !important;
+        overflow: initial;
-        }
+        max-height: unset;
 
-        & #zen-appcontent-navbar-container {
+        & #urlbar {
-          --zen-compact-toolbar-offset: 5px;
+          transform: translateY(0);
-          position: absolute;
-          top: calc((-1 * var(--zen-toolbar-height)) + var(--zen-element-separation) + 1px);
-          left: 0;
-          z-index: 20;
-          box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
-          border-bottom-left-radius: var(--zen-border-radius);
-          border-bottom-right-radius: var(--zen-border-radius);
-          border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
-          border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
-          transition: all 0.15s ease;
-          width: 100%;
-          opacity: 0;
-          background: var(--zen-dialog-background);
 
-          max-height: var(--zen-toolbar-height);
+          &[open]:not([zen-floating-urlbar='true']) {
-          overflow: hidden;
+            top: 0 !important;
-
-          & > * {
-            position: relative !important;
-          }
-
-          & #urlbar {
-            transform: translateY(-50%);
-            transition: transform 0.1s ease-in-out;
-          }
-
-          @media (-moz-bool-pref: 'zen.view.compact.color-toolbar') {
-            background-attachment: fixed;
-            backdrop-filter: blur(5px);
-            background: var(--zen-main-browser-background-toolbar);
-            background-size: 100% 2000px;
-            border-bottom: 1px solid var(--zen-colors-border);
-          }
-        }
-
-        & #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(*:is([panelopen='true'], [open='true']):not(.zen-compact-mode-ignore)) {
-          opacity: 1;
-          border-top-width: 1px;
-
-          top: -1px;
-          overflow: initial;
-          max-height: unset;
-
-          & #urlbar {
-            transform: translateY(0);
-
-            &[open]:not([zen-floating-urlbar='true']) {
-              top: 0 !important;
-            }
           }
         }
       }

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

@@ -65,12 +65,10 @@
 
 #tabbrowser-tabpanels:has(> [zen-split='true']),
 #zen-splitview-overlay {
-  @media (-moz-bool-pref: 'zen.view.compact') {
+  :root:not([zen-compact-mode='true']):not([customizing]) & {
-    :root:not([customizing]) & {
+    @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
-      @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
+      & {
-        & {
+        margin-top: calc(var(--zen-split-column-gap) * -1);
-          margin-top: calc(var(--zen-split-column-gap) * -1);
-        }
       }
     }
   }

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

@@ -981,8 +981,8 @@
 /* Very special occasions */
 
 /* Mark: Right side windows controls with collapsed sidebar */
-@media not (-moz-bool-pref: 'zen.view.compact') {
+:root:not([zen-compact-mode='true']) {
-  :root[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
+  &[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
     & #navigator-toolbox {
       margin-top: var(--zen-toolbar-height) !important;
     }
@@ -1006,7 +1006,7 @@
 %include vertical-tabs-topbuttons-fix.css
   }
 
-  :root:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
+  &:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
     & #navigator-toolbox {
       margin-top: var(--zen-toolbar-height) !important;
     }

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

@@ -20,10 +20,10 @@ var gZenCompactModeManager = {
   _removeHoverFrames: {},
 
   init() {
-    Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
-    Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', this._disableTabsOnHoverIfConflict.bind(this));
     Services.prefs.addObserver('zen.tabs.vertical.right-side', this._updateSidebarIsOnRight.bind(this));
 
+    ChromeUtils.defineLazyGetter(this, 'mainAppWrapper', () => document.getElementById('zen-main-app-wrapper'));
+
     this._canAnimateSidebar = Services.prefs.getBoolPref('zen.view.compact.animate-sidebar', true);
 
     gZenUIManager.addPopupTrackingAttribute(this.sidebar);
@@ -33,12 +33,22 @@ var gZenCompactModeManager = {
     this.addContextMenu();
   },
 
-  get prefefence() {
+  get preference() {
-    return Services.prefs.getBoolPref('zen.view.compact');
+    if (!document.documentElement.hasAttribute('zen-compact-mode')) {
+      document.documentElement.setAttribute('zen-compact-mode', this.mainAppWrapper.getAttribute('zen-compact-mode'));
+    }
+    return this.mainAppWrapper.getAttribute('zen-compact-mode') === 'true';
   },
 
   set preference(value) {
-    Services.prefs.setBoolPref('zen.view.compact', value);
+    if (this.preference === value) {
+      return value;
+    }
+    // We use this element in order to make it persis across restarts, by using the XULStore.
+    // main-window can't store attributes other than window sizes, so we use this instead
+    this.mainAppWrapper.setAttribute('zen-compact-mode', value);
+    document.documentElement.setAttribute('zen-compact-mode', value);
+    this._updateEvent();
     return value;
   },
 
@@ -58,7 +68,7 @@ var gZenCompactModeManager = {
   },
 
   flashSidebarIfNecessary(aInstant = false) {
-    if (!aInstant && this.prefefence && lazyCompactMode.COMPACT_MODE_FLASH_ENABLED && !gZenGlanceManager._animating) {
+    if (!aInstant && this.preference && lazyCompactMode.COMPACT_MODE_FLASH_ENABLED && !gZenGlanceManager._animating) {
       this.flashSidebar();
     }
   },
@@ -113,7 +123,6 @@ var gZenCompactModeManager = {
 
   _updateEvent() {
     this._evenListeners.forEach((callback) => callback());
-    this._disableTabsOnHoverIfConflict();
     this.updateContextMenu();
     this.animateCompactMode();
   },
@@ -127,7 +136,7 @@ var gZenCompactModeManager = {
   },
 
   animateCompactMode() {
-    const isCompactMode = this.prefefence;
+    const isCompactMode = this.preference;
     const canHideSidebar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
     // Do this so we can get the correct width ONCE compact mode styled have been applied
     if (this._canAnimateSidebar) {
@@ -208,9 +217,7 @@ var gZenCompactModeManager = {
   },
 
   updateContextMenu() {
-    document
+    document.getElementById('zen-context-menu-compact-mode-toggle').setAttribute('checked', this.preference);
-      .getElementById('zen-context-menu-compact-mode-toggle')
-      .setAttribute('checked', Services.prefs.getBoolPref('zen.view.compact'));
 
     const hideTabBar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
     const hideToolbar = Services.prefs.getBoolPref('zen.view.compact.hide-toolbar');
@@ -230,14 +237,8 @@ var gZenCompactModeManager = {
     }
   },
 
-  _disableTabsOnHoverIfConflict() {
-    if (Services.prefs.getBoolPref('zen.view.compact') && Services.prefs.getBoolPref('zen.view.compact.hide-tabbar')) {
-      Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
-    }
-  },
-
   toggle() {
-    return (this.preference = !this.prefefence);
+    return (this.preference = !this.preference);
   },
 
   _updateSidebarIsOnRight() {

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

@@ -977,11 +977,6 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
-  {
-    id: 'zen.view.compact',
-    type: 'bool',
-    default: false,
-  },
   {
     id: 'zen.view.compact.hide-toolbar',
     type: 'bool',

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

@@ -235,9 +235,6 @@
       <label><html:h2 data-l10n-id="zen-look-and-feel-compact-view-header"/></label>
       <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-compact-view-description" />
 
-      <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">