feat: Improved performance for compact mode by stoping the use of has selectors, b=no-bug, c=common, compact-mode, split-view

src/browser/base/content/zen-assets.jar.inc.mn

@@ -12,8 +12,9 @@
         content/browser/zen-components/ZenUIMigration.mjs                       (../../zen/common/ZenUIMigration.mjs)
         content/browser/zen-components/ZenCommonUtils.mjs                       (../../zen/common/ZenCommonUtils.mjs)
         content/browser/zen-components/ZenSessionStore.mjs                      (../../zen/common/ZenSessionStore.mjs)
-        content/browser/zen-components/ZenEmojisData.min.mjs                        (../../zen/common/emojis/ZenEmojisData.min.mjs)
+        content/browser/zen-components/ZenEmojisData.min.mjs                    (../../zen/common/emojis/ZenEmojisData.min.mjs)
         content/browser/zen-components/ZenEmojiPicker.mjs                       (../../zen/common/emojis/ZenEmojiPicker.mjs)
+        content/browser/zen-components/ZenHasPolyfill.mjs                       (../../zen/common/ZenHasPolyfill.mjs)
 
         content/browser/zen-styles/zen-theme.css                                (../../zen/common/styles/zen-theme.css)
         content/browser/zen-styles/zen-buttons.css                              (../../zen/common/styles/zen-buttons.css)
@@ -29,7 +30,6 @@
         content/browser/zen-styles/zen-branding.css                             (../../zen/common/styles/zen-branding.css)
 
         content/browser/zen-styles/zen-panels/bookmarks.css                     (../../zen/common/styles/zen-panels/bookmarks.css)
-        content/browser/zen-styles/zen-panels/extensions.css                    (../../zen/common/styles/zen-panels/extensions.css)
         content/browser/zen-styles/zen-panels/print.css                         (../../zen/common/styles/zen-panels/print.css)
         content/browser/zen-styles/zen-panels/dialog.css                        (../../zen/common/styles/zen-panels/dialog.css)
 

src/browser/base/content/zen-preloaded.inc.xhtml

@@ -5,7 +5,8 @@
 # This needs to be here, before all the other scripts, because it's used before
 # the window is fully loaded.
 # Make sure they are loaded before the global-scripts.inc file.
-<script type="text/javascript" src="chrome://browser/content/zen-sets.js"></script>                                  
+<script type="text/javascript" src="chrome://browser/content/zen-sets.js"></script>
+<script type="text/javascript" src="chrome://browser/content/zen-components/ZenHasPolyfill.mjs"></script>
 <script type="text/javascript" src="chrome://browser/content/zen-components/ZenCommonUtils.mjs"></script>
 <script type="text/javascript" src="chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs"></script>
 <script type="text/javascript" src="chrome://browser/content/zen-components/ZenWorkspaceIcons.mjs"></script>

src/zen/common/ZenHasPolyfill.mjs

@@ -0,0 +1,71 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+{
+  class nsHasPolyfill {
+    constructor() {
+      this.observers = [];
+      this.idStore = 0;
+    }
+
+    /**
+     * @param {{selector: string, exists: boolean}} descendantSelectors
+     */
+    observeSelectorExistence(element, descendantSelectors, stateAttribute) {
+      const updateState = () => {
+        const exists = descendantSelectors.some(({ selector }) => {
+          return element.querySelector(selector);
+        });
+        const { exists: shouldExist = true } = descendantSelectors;
+        if (exists === shouldExist) {
+          if (!element.hasAttribute(stateAttribute)) {
+            element.setAttribute(stateAttribute, 'true');
+          }
+        } else {
+          if (element.hasAttribute(stateAttribute)) {
+            element.removeAttribute(stateAttribute);
+          }
+        }
+      };
+
+      const observer = new MutationObserver(updateState);
+      updateState();
+      const observerId = this.idStore++;
+      this.observers.push({
+        id: observerId,
+        observer,
+        element,
+      });
+      return observerId;
+    }
+
+    disconnectObserver(observerId) {
+      const index = this.observers.findIndex((o) => o.id === observerId);
+      if (index !== -1) {
+        this.observers[index].observer.disconnect();
+      }
+    }
+
+    connectObserver(observerId) {
+      const observer = this.observers.find((o) => o.id === observerId);
+      if (observer) {
+        observer.observer.observe(observer.element, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+        });
+      }
+    }
+
+    destroy() {
+      this.observers.forEach((observer) => observer.observer.disconnect());
+      this.observers = [];
+    }
+  }
+
+  const hasPolyfillInstance = new nsHasPolyfill();
+  window.addEventListener('unload', () => hasPolyfillInstance.destroy(), { once: true });
+
+  window.ZenHasPolyfill = hasPolyfillInstance;
+}

src/zen/common/styles/zen-panels/extensions.css

@@ -1,73 +0,0 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-#unified-extensions-manage-extensions {
-  padding-left: 20px;
-}
-
-panelview .unified-extensions-item-action-button {
-  padding: 5px 20px;
-}
-
-#unified-extensions-description {
-  padding: 0 20px;
-  margin: 0;
-}
-
-.unified-extensions-item {
-  padding: 0;
-}
-
-#unified-extensions-view {
-  --uei-icon-size: 16px;
-
-  .unified-extensions-item {
-    margin-block: 0;
-    border-radius: var(--arrowpanel-menuitem-border-radius);
-
-    > .unified-extensions-item-action-button {
-      .unified-extensions-item-message-deck {
-        display: none;
-      }
-
-      &:hover {
-        background-color: initial;
-      }
-    }
-
-    > .unified-extensions-item-menu-button {
-      list-style-image: url('chrome://global/skin/icons/more.svg');
-      padding: 0;
-
-      > .toolbarbutton-icon {
-        padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
-        border: none;
-        opacity: 0;
-      }
-
-      &:hover {
-        > .toolbarbutton-icon {
-          background-color: initial;
-        }
-
-        &:active {
-          color: var(--button-primary-hover-bgcolor);
-        }
-      }
-    }
-
-    &:hover {
-      background-color: var(--panel-item-hover-bgcolor);
-
-      > .unified-extensions-item-menu-button > .toolbarbutton-icon {
-        opacity: 1;
-      }
-    }
-
-    &:has(> .unified-extensions-item-action-button:not([disabled]):hover:active) {
-      background-color: var(--panel-item-active-bgcolor);
-    }
-  }
-}

src/zen/common/styles/zen-popup.css

@@ -4,7 +4,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 @import url('chrome://browser/content/zen-styles/zen-panels/bookmarks.css');
-@import url('chrome://browser/content/zen-styles/zen-panels/extensions.css');
 @import url('chrome://browser/content/zen-styles/zen-panels/print.css');
 @import url('chrome://browser/content/zen-styles/zen-panels/dialog.css');
 

src/zen/compact-mode/ZenCompactMode.mjs

@@ -60,6 +60,8 @@ var gZenCompactModeManager = {
       document.getElementById('zen-appcontent-navbar-wrapper')
     );
 
+    this.addHasPolyfillObserver();
+
     // Clear hover states when window state changes (minimize, maximize, etc.)
     window.addEventListener('sizemodechange', () => this._clearAllHoverStates());
 
@@ -126,6 +128,19 @@ var gZenCompactModeManager = {
     return gNavToolbox;
   },
 
+  addHasPolyfillObserver() {
+    this.sidebarObserverId = ZenHasPolyfill.observeSelectorExistence(
+      this.sidebar,
+      [
+        {
+          selector:
+            ":is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)",
+        },
+      ],
+      'zen-compact-mode-active'
+    );
+  },
+
   flashSidebarIfNecessary(aInstant = false) {
     // This function is called after exiting DOM fullscreen mode,
     // so we do a bit of a hack to re-calculate the URL height
@@ -199,6 +214,11 @@ var gZenCompactModeManager = {
     // IF we are animating IN, call the callbacks first so we can calculate the width
     // once the window buttons are shown
     this.updateContextMenu();
+    if (this.preference) {
+      ZenHasPolyfill.connectObserver(this.sidebarObserverId);
+    } else {
+      ZenHasPolyfill.disconnectObserver(this.sidebarObserverId);
+    }
     if (!this.preference) {
       this._evenListeners.forEach((callback) => callback());
       await this.animateCompactMode();

src/zen/compact-mode/zen-compact-mode.css

@@ -182,11 +182,8 @@
       #navigator-toolbox[flash-popup],
       #navigator-toolbox[has-popup-menu],
       #navigator-toolbox[movingtab],
-      #navigator-toolbox:has(.tabbrowser-tab:active),
       &[zen-renaming-tab='true'] #navigator-toolbox,
-      #navigator-toolbox:has(
+      #navigator-toolbox[zen-compact-mode-active] {
-          *:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)
-        ) {
         &:not([animate='true']) {
           --zen-compact-mode-func: linear(
             0 0%,

src/zen/split-view/ZenViewSplitter.mjs

@@ -1151,6 +1151,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
     }
     this.removeSplitters();
     this.tabBrowserPanel.removeAttribute('zen-split-view');
+    document.getElementById('tabbrowser-tabbox').removeAttribute('zen-split-view');
     this.currentView = -1;
     this.toggleWrapperDisplay(false);
     this.maybeDisableOpeningTabOnSplitView();
@@ -1174,6 +1175,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
     });
 
     this.tabBrowserPanel.setAttribute('zen-split-view', 'true');
+    document.getElementById('tabbrowser-tabbox').setAttribute('zen-split-view', 'true');
 
     this.applyGridToTabs(splitData.tabs);
     this.applyGridLayout(splitData.layoutTree);

src/zen/split-view/zen-decks.css

@@ -64,7 +64,7 @@
   }
 }
 
-#tabbrowser-tabbox:has(#tabbrowser-tabpanels[zen-split-view='true']) {
+#tabbrowser-tabbox[zen-split-view='true'] {
   :root[zen-no-padding='true'] & {
     --zen-element-separation: 8px;
   }