mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-03-06 16:57:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor tab animation logic for improved performance and update CSS variables for consistent styling

Browse Source
This commit is contained in:
mr. M
2025-01-19 16:28:07 +01:00
parent f344c0d41d
commit 86b0a9dac2
4 changed files with 31 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -497,11 +497,6 @@
}
& .tab-background {
@media not (prefers-color-scheme: dark) {
&:is([selected], [multiselected]) {
box-shadow: 0 .5px 1px rgba(0, 0, 0, 0.1);
}
}
margin-inline: var(--tab-block-margin);
width: -moz-available;
}

6
src/browser/base/content/zen-styles/zen-theme.css
View File

@@ -35,7 +35,7 @@
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
--zen-colors-primary-foreground: var(--zen-branding-bg-reverse);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%);
--zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(181, 181, 181, .11) 90%);
--zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(181, 181, 181, 0.11) 90%);
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-colors-tertiary) 99%);
@@ -104,7 +104,7 @@
--zen-button-border-radius: 5px;
--zen-button-padding: 0.6rem 1.2rem;
--zen-toolbar-element-bg: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.11));
--zen-toolbar-element-bg: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.11));
/* Toolbar */
--zen-toolbar-height: 38px;
@@ -168,7 +168,7 @@
--toolbar-field-background-color: var(--zen-colors-input-bg) !important;
--arrowpanel-background: var(--zen-dialog-background) !important;
--tab-selected-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.1) !important;
--tab-selected-shadow: none !important;
--zen-big-shadow: 0 0 9.73px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
/* Nativity */

2
src/browser/base/content/zen-styles/zen-urlbar.css
View File

@@ -50,7 +50,7 @@
#identity-box.chromeUI:not([pageproxystate='invalid']) {
& #identity-icon-box {
background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) !important;
}
& #identity-icon-label {

60
src/browser/base/zen-components/ZenWorkspaces.mjs
View File

@@ -1330,43 +1330,37 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
}
_animateElement(element, direction, out = false, callback) {
if (out) {
element.animate([{ transform: 'translateX(0)' }, { transform: `translateX(${direction === 'left' ? '-' : ''}100%)` }], {
duration: 100,
easing: 'ease-in',
fill: 'both',
}).onfinish = callback;
return;
}
element.animate([{ transform: `translateX(${direction === 'left' ? '-' : ''}100%)` }, { transform: 'translateX(0)' }], {
duration: 100,
easing: 'ease-out',
fill: 'both',
}).onfinish = callback;
}
async _animateTabs(direction, out = false) {
const tabs = gBrowser.visibleTabs.filter((tab) => !tab.hasAttribute('zen-essential'));
return new Promise((resolve) => {
let count = 0;
const onAnimationEnd = () => {
count++;
// +1 for the workspace indicator tab and vertical tabs periferals
if (count >= tabs.length + 2) {
resolve();
const selector = `#tabbrowser-tabs *:is(.tabbrowser-tab:not([zen-essential], [hidden]), #tabbrowser-arrowscrollbox-periphery, #zen-current-workspace-indicator)`;
this.tabContainer.removeAttribute('dont-animate-tabs');
if (out) {
return gZenUIManager.motion.animate(
selector,
{
transform: `translateX(${direction === 'left' ? '-' : ''}100%)`,
opacity: 0,
},
{
type: 'spring',
duration: 0.3,
bounce: 0.2,
// delay: gZenUIManager.motion.stagger(0.01),
}
};
this.tabContainer.removeAttribute('dont-animate-tabs');
// Also animate the workspace indicator label
this._animateElement(document.getElementById('zen-current-workspace-indicator'), direction, out, () => onAnimationEnd());
this._animateElement(document.getElementById('tabbrowser-arrowscrollbox-periphery'), direction, out, () =>
onAnimationEnd()
);
for (const tab of tabs) {
this._animateElement(tab, direction, out, () => onAnimationEnd());
}
return gZenUIManager.motion.animate(
selector,
{
transform: [`translateX(${direction === 'left' ? '-' : ''}100%)`, 'translateX(0%)'],
opacity: 1,
},
{
duration: 0.3,
type: 'spring',
bounce: 0.2,
// delay: gZenUIManager.motion.stagger(0.01),
}
});
);
}
_processTabVisibility(workspaceUuid, containerId, workspaces) {