mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-08 19:59:59 +02:00
refactor: Apply essentials icons to the entire tab to avoid removing the background when cloning, b=no-bug, c=tabs, welcome, workspaces
This commit is contained in:
parent
872f7bdcbe
commit
ba4eef0db9
5 changed files with 13 additions and 30 deletions
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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');
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue