fix: Fixed flashing on essential tabs when switching workspaces, b=no-bug, c=configs, common, folders, workspaces

configs/macos/mozconfig

@@ -7,10 +7,12 @@ unset MOZ_STDCXX_COMPAT
 ac_add_options --disable-dmd
 ac_add_options --enable-eme=widevine
 
-# override LTO settings
-# TODO: Dont use LTO for now, it's causing a lot of issues
-export MOZ_LTO=cross,thin
-ac_add_options --enable-lto=cross,thin
+if test "$ZEN_RELEASE"; then
+  # override LTO settings
+  # TODO: Dont use LTO for now, it's causing a lot of issues
+  export MOZ_LTO=cross,thin
+  ac_add_options --enable-lto=cross,thin
+fi
 
 if test "$ZEN_RELEASE"; then
   if test "$ZEN_GA_DISABLE_PGO"; then

src/zen/common/ZenCustomizableUI.sys.mjs

@@ -110,26 +110,8 @@ export var ZenCustomizableUI = new (class {
       if (button.hasAttribute('open')) {
         return;
       }
-      const image = button.querySelector('image');
       const popup = window.document.getElementById('zenCreateNewPopup');
-      button.setAttribute('open', 'true');
-      const handlePopupHidden = () => {
-        window.setTimeout(() => {
-          button.removeAttribute('open');
-        }, 500);
-        window.gZenUIManager.motion.animate(
-          image,
-          { transform: ['rotate(45deg)', 'rotate(0deg)'] },
-          { duration: 0.2 }
-        );
-      };
-      popup.addEventListener('popuphidden', handlePopupHidden, { once: true });
       popup.openPopup(button, 'after_start');
-      window.gZenUIManager.motion.animate(
-        image,
-        { transform: ['rotate(0deg)', 'rotate(45deg)'] },
-        { duration: 0.2 }
-      );
     });
   }
 

src/zen/common/ZenUIManager.mjs

@@ -72,6 +72,35 @@ var gZenUIManager = {
 
     gZenMediaController.init();
     gZenVerticalTabsManager.init();
+
+    this._initCreateNewPopup();
+  },
+
+  _initCreateNewPopup() {
+    const popup = document.getElementById('zenCreateNewPopup');
+    const button = document.getElementById('zen-create-new-button');
+
+    popup.addEventListener('popupshowing', () => {
+      const image = button.querySelector('image');
+      button.setAttribute('open', 'true');
+      gZenUIManager.motion.animate(
+        image,
+        { transform: ['rotate(0deg)', 'rotate(45deg)'] },
+        { duration: 0.2 }
+      );
+      popup.addEventListener(
+        'popuphidden',
+        () => {
+          button.removeAttribute('open');
+          gZenUIManager.motion.animate(
+            image,
+            { transform: ['rotate(45deg)', 'rotate(0deg)'] },
+            { duration: 0.2 }
+          );
+        },
+        { once: true }
+      );
+    });
   },
 
   handleMouseDown(event) {

src/zen/folders/zen-folders.css

@@ -367,7 +367,6 @@ zen-folder {
   flex-direction: row;
   padding: 6px;
   border-bottom: 1px solid color-mix(in srgb, currentColor, transparent 90%);
-  margin-bottom: 2px;
 }
 
 #zen-folder-tabs-popup #zen-folder-tabs-list-search {
@@ -441,16 +440,21 @@ zen-folder {
   align-items: center;
   direction: ltr;
   padding: 0 var(--tab-inline-padding);
-  border-radius: 4px;
-  margin: 2px 0;
+  border-radius: 6px;
+  margin: 4px 0;
 
   .folders-tabs-list-item[selected] & {
     background-color: color-mix(in srgb, currentColor, transparent 90%);
   }
 
   &:last-child {
-    border-bottom-left-radius: max(calc(var(--panel-border-radius) - 4px), 4px);
-    border-bottom-right-radius: max(calc(var(--panel-border-radius) - 4px), 4px);
+    border-bottom-left-radius: max(calc(var(--panel-border-radius) - 6px), 4px);
+    border-bottom-right-radius: max(calc(var(--panel-border-radius) - 6px), 4px);
+  }
+
+  &:first-child {
+    border-top-left-radius: max(calc(var(--panel-border-radius) - 6px), 4px);
+    border-top-right-radius: max(calc(var(--panel-border-radius) - 6px), 4px);
   }
 }
 

src/zen/workspaces/ZenWorkspaces.mjs

@@ -301,7 +301,12 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
     if (!this.workspaceEnabled) {
       return;
     }
-    this._pinnedTabsResizeObserver = new ResizeObserver(this.onPinnedTabsResize.bind(this));
+    const onResize = (...args) => {
+      requestAnimationFrame(() => {
+        this.onPinnedTabsResize(...args);
+      });
+    };
+    this._pinnedTabsResizeObserver = new ResizeObserver(onResize);
     await this._createDefaultWorkspaceIfNeeded();
   }
 
@@ -2402,73 +2407,67 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
   }
 
   async onPinnedTabsResize(entries, forAnimation = false, animateContainer = false) {
-    await new Promise((resolve) => {
-      requestAnimationFrame(async () => {
-        if (
-          !this._hasInitializedTabsStrip ||
-          (this._organizingWorkspaceStrip && !forAnimation) ||
-          document.documentElement.hasAttribute('zen-creating-workspace') ||
-          document.documentElement.hasAttribute('customizing')
-        ) {
-          resolve();
-          return;
+    if (
+      !this._hasInitializedTabsStrip ||
+      (this._organizingWorkspaceStrip && !forAnimation) ||
+      document.documentElement.hasAttribute('zen-creating-workspace') ||
+      document.documentElement.hasAttribute('customizing')
+    ) {
+      return;
+    }
+    // forAnimation may be of type "ResizeObserver" if it's not a boolean, just ignore it
+    if (typeof forAnimation !== 'boolean') {
+      forAnimation = false;
+    }
+    for (const entry of entries) {
+      let originalWorkspaceId = entry.target.getAttribute('zen-workspace-id');
+      if (!originalWorkspaceId) {
+        originalWorkspaceId = entry.target.closest('zen-workspace')?.id;
+      }
+      const workspacesIds = [];
+      if (entry.target.closest('#zen-essentials')) {
+        // Get all workspaces that have the same userContextId
+        const activeWorkspace = await this.getActiveWorkspace();
+        const userContextId = activeWorkspace.containerTabId;
+        const workspaces = this._workspaceCache.workspaces.filter(
+          (w) => w.containerTabId === userContextId && w.uuid !== originalWorkspaceId
+        );
+        workspacesIds.push(...workspaces.map((w) => w.uuid));
+      } else {
+        workspacesIds.push(originalWorkspaceId);
+      }
+      for (const workspaceId of workspacesIds) {
+        const workspaceElement = this.workspaceElement(workspaceId);
+        if (!workspaceElement) {
+          continue;
         }
-        // forAnimation may be of type "ResizeObserver" if it's not a boolean, just ignore it
-        if (typeof forAnimation !== 'boolean') {
-          forAnimation = false;
+        const arrowScrollbox = workspaceElement.tabsContainer;
+        const pinnedContainer = workspaceElement.pinnedTabsContainer;
+        const workspaceObject = this.getWorkspaceFromId(workspaceId);
+        const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
+        const essentialNumChildren = essentialContainer.children.length;
+        let essentialHackType = 0;
+        if (essentialNumChildren === 6 || essentialNumChildren === 9) {
+          essentialHackType = 1;
+        } else if (essentialNumChildren % 2 === 0 && essentialNumChildren < 8) {
+          essentialHackType = 2;
+        } else if (essentialNumChildren === 5) {
+          essentialHackType = 3;
         }
-        for (const entry of entries) {
-          let originalWorkspaceId = entry.target.getAttribute('zen-workspace-id');
-          if (!originalWorkspaceId) {
-            originalWorkspaceId = entry.target.closest('zen-workspace')?.id;
-          }
-          const workspacesIds = [];
-          if (entry.target.closest('#zen-essentials')) {
-            // Get all workspaces that have the same userContextId
-            const activeWorkspace = await this.getActiveWorkspace();
-            const userContextId = activeWorkspace.containerTabId;
-            const workspaces = this._workspaceCache.workspaces.filter(
-              (w) => w.containerTabId === userContextId && w.uuid !== originalWorkspaceId
-            );
-            workspacesIds.push(...workspaces.map((w) => w.uuid));
-          } else {
-            workspacesIds.push(originalWorkspaceId);
-          }
-          for (const workspaceId of workspacesIds) {
-            const workspaceElement = this.workspaceElement(workspaceId);
-            if (!workspaceElement) {
-              continue;
-            }
-            const arrowScrollbox = workspaceElement.tabsContainer;
-            const pinnedContainer = workspaceElement.pinnedTabsContainer;
-            const workspaceObject = this.getWorkspaceFromId(workspaceId);
-            const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
-            const essentialNumChildren = essentialContainer.children.length;
-            let essentialHackType = 0;
-            if (essentialNumChildren === 6 || essentialNumChildren === 9) {
-              essentialHackType = 1;
-            } else if (essentialNumChildren % 2 === 0 && essentialNumChildren < 8) {
-              essentialHackType = 2;
-            } else if (essentialNumChildren === 5) {
-              essentialHackType = 3;
-            }
-            if (essentialHackType > 0) {
-              essentialContainer.setAttribute('data-hack-type', essentialHackType);
-            } else {
-              essentialContainer.removeAttribute('data-hack-type');
-            }
-            this._updatePaddingTopOnTabs(
-              workspaceElement,
-              essentialContainer,
-              forAnimation,
-              animateContainer
-            );
-            this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
-          }
-          resolve();
+        if (essentialHackType > 0) {
+          essentialContainer.setAttribute('data-hack-type', essentialHackType);
+        } else {
+          essentialContainer.removeAttribute('data-hack-type');
         }
-      });
-    });
+        this._updatePaddingTopOnTabs(
+          workspaceElement,
+          essentialContainer,
+          forAnimation,
+          animateContainer
+        );
+        this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
+      }
+    }
   }
 
   async onTabBrowserInserted(event) {