refactor: streamline preference handling and update event management in ZenUIManager

src/browser/base/content/ZenUIManager.mjs

@@ -123,17 +123,16 @@ var gZenVerticalTabsManager = {
     });
 
     var updateEvent = this._updateEvent.bind(this);
-    Services.prefs.addObserver('zen.tabs.vertical', updateEvent);
-    Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent);
-    Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent);
-    Services.prefs.addObserver('zen.view.use-single-toolbar', updateEvent);
-    Services.prefs.addObserver('zen.view.sidebar-expanded', updateEvent);
 
+    this.initializePreferences(updateEvent);
     this._toolbarOriginalParent = document.getElementById('nav-bar').parentElement;
 
     gZenCompactModeManager.addEventListener(updateEvent);
     this.initRightSideOrderContextMenu();
 
+    window.addEventListener('customizationstarting', this._preCustomize.bind(this));
+    window.addEventListener('aftercustomization', updateEvent);
+
     window.addEventListener('DOMContentLoaded', updateEvent, { once: true });
 
     const tabs = document.getElementById('tabbrowser-tabs');
@@ -201,7 +200,57 @@ var gZenVerticalTabsManager = {
     return this.__actualWindowButtons;
   },
 
-  _updateEvent() {
+  _preCustomize() {
+    this._updateEvent({ forceMultipleToolbar: true });
+  },
+
+  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
+    );
+    XPCOMUtils.defineLazyPreferenceGetter(
+      this,
+      "_prefsSidebarExpanded",
+      "zen.view.sidebar-expanded",
+      false,
+      updateEvent
+    );
+    XPCOMUtils.defineLazyPreferenceGetter(
+      this,
+      "_prefsSidebarExpandedMaxWidth",
+      "zen.view.sidebar-expanded.max-width",
+      300,
+      updateEvent
+    );
+  },
+
+  _updateEvent({ forceMultipleToolbar = false } = {}) {
     if (this._isUpdating) {
       return;
     }
@@ -209,14 +258,14 @@ var gZenVerticalTabsManager = {
     try {
       this._updateMaxWidth();
       const topButtons = document.getElementById('zen-sidebar-top-buttons');
-      const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
-      const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
-      const isSidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded') || !isVerticalTabs;
-      const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs;
-      const isSingleToolbar = (Services.prefs.getBoolPref('zen.view.use-single-toolbar') && (isVerticalTabs && isSidebarExpanded) )|| !isVerticalTabs;
+      const isCompactMode = this._prefsCompactMode;
+      const isVerticalTabs = this._prefsVerticalTabs || forceMultipleToolbar;
+      const isSidebarExpanded = this._prefsSidebarExpanded || !isVerticalTabs;
+      const isRightSide = this._prefsRightSide && isVerticalTabs;
+      const isSingleToolbar = ((this._prefsUseSingleToolbar && (isVerticalTabs && isSidebarExpanded) )|| !isVerticalTabs) && !forceMultipleToolbar;
       const titlebar = document.getElementById('titlebar');
 
-      gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'vertical');
+      gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
       gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
 
       const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
@@ -347,10 +396,9 @@ var gZenVerticalTabsManager = {
   },
 
   _updateMaxWidth() {
-    const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
     const maxWidth = Services.prefs.getIntPref('zen.view.sidebar-expanded.max-width');
     const toolbox = document.getElementById('navigator-toolbox');
-    if (!isCompactMode) {
+    if (!this._prefsCompactMode) {
       toolbox.style.maxWidth = `${maxWidth}px`;
     } else {
       toolbox.style.removeProperty('maxWidth');

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

@@ -24,7 +24,7 @@
         --zen-compact-float: calc(var(--zen-element-separation) - 1px);
         position: absolute;
         z-index: 10;
-        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+        transition: transform 0.15s ease-in-out, opacity 0.1s ease-in-out;
         right: calc(100% - var(--zen-element-separation));
         top: 0;
         bottom: var(--zen-element-separation);

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

@@ -127,6 +127,7 @@
   --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), var(--zen-colors-tertiary));
 
   @media (-moz-windows-mica) or (-moz-platform: macos) {
+    background: transparent;
     --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

@@ -90,7 +90,11 @@
 #urlbar-background {
   border: transparent !important;
   margin: 1px;
+
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
+  :root[zen-single-toolbar='true'] & {
+    box-shadow: none !important;
+  }
 }
 
 #urlbar[focused='true']:not([suppress-focus-border]) > #urlbar-background,