fix: Fixed custom tab icons not inheriting color fills on essentials, b=no-bug, c=common, tabs

src/browser/base/content/browser-profiles-js.patch

@@ -0,0 +1,12 @@
+diff --git a/browser/base/content/browser-profiles.js b/browser/base/content/browser-profiles.js
+index fb260896c14b90734182d2f232e33350287f0209..9984a2d18dfd33e3606adac0e8c5f80f7e35e682 100644
+--- a/browser/base/content/browser-profiles.js
++++ b/browser/base/content/browser-profiles.js
+@@ -70,6 +70,7 @@ var gProfiles = {
+   },
+ 
+   toggleProfileMenus(isEnabled) {
++    isEnabled &&= Services.prefs.getBoolPref("browser.profiles.enabled", false);
+     let profilesMenu = document.getElementById("profiles-menu");
+     profilesMenu.hidden = !isEnabled;
+   },

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

@@ -139,7 +139,7 @@
   --zen-button-padding: 0.6rem 1.2rem;
 
   --zen-toolbar-element-bg: light-dark(
-    color-mix(in oklch, var(--toolbox-textcolor) 8%, transparent),
+    color-mix(in oklch, var(--toolbox-textcolor) 10%, transparent),
     color-mix(in oklch, var(--toolbox-textcolor) 12.5%, transparent)
   );
 

src/zen/drag-and-drop/ZenDragAndDrop.js

@@ -648,7 +648,7 @@
         clientX < 0 || clientX > innerWidth || clientY < 0 || clientY > innerHeight;
       if (isOutOfWindow && !this.#isOutOfWindow) {
         this.#isOutOfWindow = true;
-        this.#maybeClearVerticalPinnedGridDragOver(draggedTab);
+        this.#maybeClearVerticalPinnedGridDragOver();
         this.clearSpaceSwitchTimer();
         this.clearDragOverVisuals();
         const dt = event.dataTransfer;
@@ -791,12 +791,11 @@
     }
 
     handle_dragend(event) {
-      let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
       this.ZenDragAndDropService.onDragEnd();
       super.handle_dragend(event);
       this.#removeDragOverBackground();
       gZenPinnedTabManager.removeTabContainersDragoverClass();
-      this.#maybeClearVerticalPinnedGridDragOver(draggedTab);
+      this.#maybeClearVerticalPinnedGridDragOver();
       this.originalDragImageArgs = [];
       window.removeEventListener('dragover', this.handle_windowDragEnter, { capture: true });
       this.#isOutOfWindow = false;
@@ -869,7 +868,7 @@
         }
       }
       dropElement = elementToMove(dropElement);
-      this.#maybeClearVerticalPinnedGridDragOver(draggedTab);
+      this.#maybeClearVerticalPinnedGridDragOver();
       if (this.#lastDropTarget !== dropElement) {
         shouldPlayHapticFeedback = this.#lastDropTarget !== null;
         this.#removeDragOverBackground();
@@ -970,9 +969,7 @@
         this._fakeEssentialTab = document.createXULElement('vbox');
         this._fakeEssentialTab.elementIndex = numEssentials;
         delete dragData.animDropElementIndex;
-        if (draggedTab.hasAttribute('zen-essential')) {
+        if (!draggedTab.hasAttribute('zen-essential')) {
-          draggedTab.style.visibility = 'hidden';
-        } else {
           event.target.closest('.zen-essentials-container').appendChild(this._fakeEssentialTab);
           gZenWorkspaces.updateTabsContainers();
           pinnedTabs.push(this._fakeEssentialTab);
@@ -1179,11 +1176,10 @@
       }
     }
 
-    #maybeClearVerticalPinnedGridDragOver(draggedTab) {
+    #maybeClearVerticalPinnedGridDragOver() {
       if (this._fakeEssentialTab) {
         this._fakeEssentialTab.remove();
         delete this._fakeEssentialTab;
-        draggedTab.style.visibility = '';
         for (let tab of this._tabbrowserTabs.visibleTabs.slice(0, gBrowser._numZenEssentials)) {
           tab.style.transform = '';
         }

src/zen/sessionstore/ZenWindowSync.sys.mjs

@@ -170,28 +170,23 @@ class nsZenWindowSync {
    *
    * @param {Window} aWindow - The browser window that has initialized session store.
    */
-  #onSessionStoreInitialized() {
+  async #onSessionStoreInitialized() {
     // For every tab we have in where there's no sync ID, we need to
     // assign one and sync it to other windows.
     // This should only happen really when updating from an older version
     // that didn't have this feature.
-    let previousWindowPromise = Promise.resolve();
+    await this.#runOnAllWindowsAsync(null, async (aWindow) => {
-    this.#runOnAllWindows(null, async (aWindow) => {
+      const { gZenWorkspaces } = aWindow;
-      await previousWindowPromise;
+      await gZenWorkspaces.promiseInitialized;
-      previousWindowPromise = new Promise((resolve) => {
+      for (let tab of gZenWorkspaces.allStoredTabs) {
-        const { gZenWorkspaces } = aWindow;
+        if (!tab.id) {
-        let allPromises = [];
+          tab.id = this.#newTabSyncId;
-        for (let tab of gZenWorkspaces.allStoredTabs) {
+          lazy.TabStateFlusher.flush(tab.linkedBrowser);
-          if (!tab.id) {
-            tab.id = this.#newTabSyncId;
-            lazy.TabStateFlusher.flush(tab.linkedBrowser);
-          }
-          if (tab.pinned && !tab._zenPinnedInitialState) {
-            allPromises.push(this.setPinnedTabState(tab));
-          }
         }
-        Promise.all(allPromises).then(resolve);
+        if (tab.pinned && !tab._zenPinnedInitialState) {
-      });
+          await this.setPinnedTabState(tab);
+        }
+      }
     });
   }
 
@@ -226,6 +221,21 @@ class nsZenWindowSync {
     return null;
   }
 
+  /**
+   * Runs a callback function on all browser windows except the specified one.
+   * This version supports asynchronous callbacks.
+   * @see #runOnAllWindows - Make sure functionality is the same.
+   * @param {Window} aWindow - The browser window to exclude.
+   * @param {Function} aCallback - The asynchronous callback function to run on each window.
+   */
+  async #runOnAllWindowsAsync(aWindow, aCallback) {
+    for (let window of this.#browserWindows) {
+      if (window !== aWindow && !window._zenClosingWindow) {
+        await aCallback(window);
+      }
+    }
+  }
+
   observe(aSubject, aTopic) {
     switch (aTopic) {
       case 'browser-window-before-show': {

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -1215,6 +1215,8 @@
         background-image: var(--zen-essential-tab-icon);
         z-index: -1;
         background-position: center;
+        fill: currentColor;
+        -moz-context-properties: fill, fill-opacity;
       }
 
       background: transparent;