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,14 +19,14 @@ 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>

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

@@ -5,8 +5,7 @@
  */
 /* All overrides for compact mode go here */
 
-@media (-moz-bool-pref: 'zen.view.compact') {
-  :root:not([customizing]):not([inDOMFullscreen='true']) {
+:root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) {
   #zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
     max-height: 0 !important;
     min-height: 0 !important;
@@ -101,7 +100,7 @@
 
     #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);
+      border-radius: calc(var(--zen-native-inner-radius) + 2px);
       padding: var(--zen-toolbox-padding) !important;
       position: relative;
       background: var(--zen-dialog-background);
@@ -333,5 +332,4 @@
       }
     }
   }
-  }
 }

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

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

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[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
+:root:not([zen-compact-mode='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() {
-    return Services.prefs.getBoolPref('zen.view.compact');
+  get preference() {
+    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
-      .getElementById('zen-context-menu-compact-mode-toggle')
-      .setAttribute('checked', Services.prefs.getBoolPref('zen.view.compact'));
+    document.getElementById('zen-context-menu-compact-mode-toggle').setAttribute('checked', this.preference);
 
     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">