perf: Improved performance for ocmpact mode polyfill and resize observers, b=no-bug, c=common, compact-mode, workspaces

src/zen/common/ZenHasPolyfill.mjs

@@ -12,7 +12,7 @@
     /**
      * @param {{selector: string, exists: boolean}} descendantSelectors
      */
-    observeSelectorExistence(element, descendantSelectors, stateAttribute) {
+    observeSelectorExistence(element, descendantSelectors, stateAttribute, attributeFilter = []) {
       const updateState = () => {
         const exists = descendantSelectors.some(({ selector }) => {
           return element.querySelector(selector);
@@ -36,6 +36,7 @@
         id: observerId,
         observer,
         element,
+        attributeFilter,
       });
       return observerId;
     }
@@ -54,6 +55,7 @@
           childList: true,
           subtree: true,
           attributes: true,
+          attributeFilter: observer.attributeFilter.length ? observer.attributeFilter : undefined,
         });
       }
     }

src/zen/common/ZenUIManager.mjs

@@ -14,12 +14,6 @@ var gZenUIManager = {
   init() {
     document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
     document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      'sidebarHeightThrottle',
-      'zen.view.sidebar-height-throttle',
-      500
-    );
     XPCOMUtils.defineLazyPreferenceGetter(
       this,
       'contentElementSeparation',
@@ -52,14 +46,10 @@ var gZenUIManager = {
 
     gURLBar._zenTrimURL = this.urlbarTrim.bind(this);
 
-    new ResizeObserver(this.updateTabsToolbar.bind(this)).observe(
-      document.getElementById('TabsToolbar')
-    );
-
     new ResizeObserver(
       gZenCommonActions.throttle(
         gZenCompactModeManager.getAndApplySidebarWidth.bind(gZenCompactModeManager),
-        this.sidebarHeightThrottle
+        Services.prefs.getIntPref('zen.view.sidebar-height-throttle', 500)
       )
     ).observe(gNavToolbox);
 

src/zen/compact-mode/ZenCompactMode.mjs

@@ -150,7 +150,8 @@ var gZenCompactModeManager = {
             ":is([panelopen='true'], [open='true'], [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)",
         },
       ],
-      'zen-compact-mode-active'
+      'zen-compact-mode-active',
+      ['panelopen', 'open', 'breakout-extend', 'zen-floating-urlbar']
     );
   },
 
@@ -229,11 +230,6 @@ 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();
@@ -245,6 +241,11 @@ var gZenCompactModeManager = {
     if (isUrlbarFocused) {
       gURLBar.focus();
     }
+    if (this.preference) {
+      ZenHasPolyfill.connectObserver(this.sidebarObserverId);
+    } else {
+      ZenHasPolyfill.disconnectObserver(this.sidebarObserverId);
+    }
   },
 
   // NOTE: Dont actually use event, it's just so we make sure

src/zen/workspaces/ZenWorkspaces.mjs

@@ -2258,7 +2258,6 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
 
     // Update workspace UI
     await this._updateWorkspacesChangeContextMenu();
-    // gZenUIManager.updateTabsToolbar();
     await this._propagateWorkspaceData({ clearCache: false, onInit });
 
     gZenThemePicker.onWorkspaceChange(workspace);