From ba4eef0db9e87df7e69b6894ca8ebaf352cd8e39 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Mon, 9 Jun 2025 01:12:22 +0200
Subject: [PATCH] refactor: Apply essentials icons to the entire tab to avoid
 removing the background when cloning, b=no-bug, c=tabs, welcome, workspaces

---
 src/zen/tabs/ZenPinnedTabManager.mjs    |  4 +---
 src/zen/tabs/zen-tabs/vertical-tabs.css |  2 +-
 src/zen/welcome/ZenWelcome.mjs          | 20 ++++++++++----------
 src/zen/welcome/zen-welcome.css         |  2 +-
 src/zen/workspaces/ZenWorkspaces.mjs    | 15 ---------------
 5 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/src/zen/tabs/ZenPinnedTabManager.mjs b/src/zen/tabs/ZenPinnedTabManager.mjs
index 8788a2917..df8ffaae0 100644
--- a/src/zen/tabs/ZenPinnedTabManager.mjs
+++ b/src/zen/tabs/ZenPinnedTabManager.mjs
@@ -88,9 +88,7 @@
         } catch {}
       } else {
         if (tab.hasAttribute('zen-essential')) {
-          tab
-            .querySelector('.tab-background')
-            .style.setProperty('--zen-tab-icon', `url(${iconUrl})`);
+          tab.style.setProperty('--zen-essential-tab-icon', `url(${iconUrl})`);
         }
       }
       // TODO: work on this
diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css
index ad6f95496..25f20bd19 100644
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -1355,7 +1355,7 @@
         position: absolute;
         background-size: contain;
         background-clip: padding-box;
-        background-image: var(--zen-tab-icon); /* Use tab icon variable */
+        background-image: var(--zen-essential-tab-icon); /* Use tab icon variable */
         z-index: -1; /* Place behind content */
         background-position: center;
       }
diff --git a/src/zen/welcome/ZenWelcome.mjs b/src/zen/welcome/ZenWelcome.mjs
index 1358f36b1..dbb3e993f 100644
--- a/src/zen/welcome/ZenWelcome.mjs
+++ b/src/zen/welcome/ZenWelcome.mjs
@@ -537,47 +537,47 @@
                   <html:div></html:div>
                 </hbox>
                 <html:div id="zen-welcome-initial-essentials-browser-sidebar-essentials">
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://obsidian.md" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/obsidian.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://obsidian.md" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/obsidian.ico');">
                     <stack class="tab-stack">
                       <html:div class="tab-background"></html:div>
                     </stack>
                   </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://discord.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/discord.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://discord.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/discord.ico');">
                     <stack class="tab-stack">
                       <html:div class="tab-background"></html:div>
                     </stack>
                   </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://trello.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/trello.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://trello.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/trello.ico');">
                     <stack class="tab-stack">
                       <html:div class="tab-background"></html:div>
                     </stack>
                   </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://slack.com/" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/slack.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://slack.com/" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/slack.ico');">
                     <stack class="tab-stack">
                       <html:div class="tab-background"></html:div>
                     </stack>
                   </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://github.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/github.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://github.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/github.ico');">
                     <stack class="tab-stack">
                       <html:div class="tab-background"></html:div>
                     </stack>
                   </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://twitter.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/x.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://twitter.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/x.ico');">
                     <stack class="tab-stack">
                       <html:div class="tab-background"></html:div>
                     </stack>
                   </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://notion.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/notion.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://notion.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/notion.ico');">
                     <stack class="tab-stack">
                       <html:div class="tab-background"></html:div>
                     </stack>
                   </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://calendar.google.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/calendar.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://calendar.google.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/calendar.ico');">
                     <stack class="tab-stack">
                       <html:div class="tab-background"></html:div>
                     </stack>
                   </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://figma.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/figma.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://figma.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/figma.ico');">
                     <stack class="tab-stack">
                       <html:div class="tab-background"></html:div>
                     </stack>
@@ -624,7 +624,7 @@
               inBackground: true,
               createLazyBrowser: true,
             });
-            let essentialIconUrl = tab.style.getPropertyValue('--zen-tab-icon');
+            let essentialIconUrl = tab.style.getPropertyValue('--zen-essential-tab-icon');
             // Remove url() from the icon URL
             essentialIconUrl = essentialIconUrl.replace(/url\(['"]?/, '').replace(/['"]?\)/, '');
             essentialIconUrl = await getIconData(essentialIconUrl);
diff --git a/src/zen/welcome/zen-welcome.css b/src/zen/welcome/zen-welcome.css
index b3dd0ee44..aa970fa6f 100644
--- a/src/zen/welcome/zen-welcome.css
+++ b/src/zen/welcome/zen-welcome.css
@@ -273,7 +273,7 @@
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
-              background: var(--zen-tab-icon);
+              background: var(--zen-essential-tab-icon);
               background-position: center;
               background-size: cover;
               background-repeat: no-repeat;
diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs
index 78666c8c8..0115bba63 100644
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -2148,21 +2148,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
           originalContainer: essentialsContainer,
           repeat: 0,
         });
-        for (let i = 0; i < essentialsClone.children.length; i++) {
-          const child = essentialsClone.children[i];
-          const originalChild = essentialsContainer.children[i];
-          if (!gBrowser.isTab(child) || !gBrowser.isTab(originalChild)) {
-            continue;
-          }
-          const childBg = child.querySelector('.tab-background');
-          const originalChildBg = originalChild.querySelector('.tab-background');
-          if (childBg && originalChildBg) {
-            childBg.style.setProperty(
-              '--zen-tab-icon',
-              originalChildBg.style.getPropertyValue('--zen-tab-icon')
-            );
-          }
-        }
       }
     }
     document.documentElement.setAttribute('animating-background', 'true');