ZenBrowserMirrors/zen-desktop
1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-08 19:59:59 +02:00
Code Releases Wiki Activity

refactor: Apply essentials icons to the entire tab to avoid removing the background when cloning, b=no-bug, c=tabs, welcome, workspaces

Browse source
This commit is contained in:
mr. m 2025-06-09 01:12:22 +02:00
parent 872f7bdcbe
commit ba4eef0db9
No known key found for this signature in database
GPG key ID: 419302196C23B258
5 changed files with 13 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/zen/tabs/ZenPinnedTabManager.mjs
View file

@ -88,9 +88,7 @@
} catch {} } catch {}
} else { } else {
if (tab.hasAttribute('zen-essential')) { if (tab.hasAttribute('zen-essential')) {
tab tab.style.setProperty('--zen-essential-tab-icon', `url(${iconUrl})`);
.querySelector('.tab-background')
.style.setProperty('--zen-tab-icon', `url(${iconUrl})`);
} }
} }
// TODO: work on this // TODO: work on this

2
src/zen/tabs/zen-tabs/vertical-tabs.css
View file

@ -1355,7 +1355,7 @@
position: absolute; position: absolute;
background-size: contain; background-size: contain;
background-clip: padding-box; 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 */ z-index: -1; /* Place behind content */
background-position: center; background-position: center;
} }

20
src/zen/welcome/ZenWelcome.mjs
View file

@ -537,47 +537,47 @@
<html:div></html:div> <html:div></html:div>
</hbox> </hbox>
<html:div id="zen-welcome-initial-essentials-browser-sidebar-essentials"> <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"> <stack class="tab-stack">
<html:div class="tab-background"></html:div> <html:div class="tab-background"></html:div>
</stack> </stack>
</html:div> </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"> <stack class="tab-stack">
<html:div class="tab-background"></html:div> <html:div class="tab-background"></html:div>
</stack> </stack>
</html:div> </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"> <stack class="tab-stack">
<html:div class="tab-background"></html:div> <html:div class="tab-background"></html:div>
</stack> </stack>
</html:div> </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"> <stack class="tab-stack">
<html:div class="tab-background"></html:div> <html:div class="tab-background"></html:div>
</stack> </stack>
</html:div> </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"> <stack class="tab-stack">
<html:div class="tab-background"></html:div> <html:div class="tab-background"></html:div>
</stack> </stack>
</html:div> </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"> <stack class="tab-stack">
<html:div class="tab-background"></html:div> <html:div class="tab-background"></html:div>
</stack> </stack>
</html:div> </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"> <stack class="tab-stack">
<html:div class="tab-background"></html:div> <html:div class="tab-background"></html:div>
</stack> </stack>
</html:div> </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"> <stack class="tab-stack">
<html:div class="tab-background"></html:div> <html:div class="tab-background"></html:div>
</stack> </stack>
</html:div> </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"> <stack class="tab-stack">
<html:div class="tab-background"></html:div> <html:div class="tab-background"></html:div>
</stack> </stack>
@ -624,7 +624,7 @@
inBackground: true, inBackground: true,
createLazyBrowser: 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 // Remove url() from the icon URL
essentialIconUrl = essentialIconUrl.replace(/url\(['"]?/, '').replace(/['"]?\)/, ''); essentialIconUrl = essentialIconUrl.replace(/url\(['"]?/, '').replace(/['"]?\)/, '');
essentialIconUrl = await getIconData(essentialIconUrl); essentialIconUrl = await getIconData(essentialIconUrl);

2
src/zen/welcome/zen-welcome.css
View file

@ -273,7 +273,7 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: var(--zen-tab-icon); background: var(--zen-essential-tab-icon);
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;

15
src/zen/workspaces/ZenWorkspaces.mjs
View file

@ -2148,21 +2148,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
originalContainer: essentialsContainer, originalContainer: essentialsContainer,
repeat: 0, 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'); document.documentElement.setAttribute('animating-background', 'true');