mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-15 14:26:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Improved gradient switching transitions, b=(no-bug), c=common, workspaces

Browse Source
This commit is contained in:
Mr. M
2025-05-20 21:17:42 +02:00
parent 1e1f02c764
commit 7671266633
3 changed files with 52 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/zen/common/styles/zen-browser-ui.css
View File

@@ -45,35 +45,36 @@
z-index: 0;
pointer-events: none;
will-change: background-color;
isolation: isolate;
&::after,
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
inset: 0;
z-index: 0;
pointer-events: none;
}
@media -moz-pref('zen.theme.gradient') {
&::after {
background: var(--zen-main-browser-background-old);
background: var(--zen-main-browser-background);
opacity: var(--zen-background-opacity);
transition: 0s;
opacity: calc(1 - var(--zen-background-opacity));
}
&::before {
background: var(--zen-main-browser-background);
background: var(--zen-main-browser-background-old);
opacity: calc(1 - var(--zen-background-opacity));
transition: 0s;
opacity: var(--zen-background-opacity);
}
:root[animating-background='true'] &::after {
mix-blend-mode: normal;
}
}
&:not([post-animating='true'])::before {
:root:not([animating-background='true']) &::before {
transition: background-color var(--inactive-window-transition);
}

21
src/zen/workspaces/ZenGradientGenerator.mjs
View File

@@ -1122,22 +1122,19 @@
}
const appBackground = browser.document.getElementById('zen-browser-background');
if (!skipUpdate && !this._animatingBackground) {
this._animatingBackground = true;
if (!skipUpdate) {
browser.document.documentElement.style.setProperty(
'--zen-main-browser-background-old',
browser.document.documentElement.style.getPropertyValue('--zen-main-browser-background')
);
browser.window.requestAnimationFrame(() => {
setTimeout(() => {
this._animatingBackground = false;
appBackground.setAttribute('post-animating', 'true');
setTimeout(() => {
// Reactivate the transition after the animation
appBackground.removeAttribute('post-animating');
}, 100);
}, 300);
});
browser.document.documentElement.style.setProperty(
'--zen-background-opacity',
browser.gZenThemePicker.previousBackgroundOpacity
);
if (browser.gZenThemePicker.previousBackgroundResolve) {
browser.gZenThemePicker.previousBackgroundResolve();
}
delete browser.gZenThemePicker.previousBackgroundOpacity;
}
const button = browser.document.getElementById(

56
src/zen/workspaces/ZenWorkspaces.mjs
View File

@@ -2097,6 +2097,37 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
essentialsContainer.parentNode.appendChild(essentialsClone);
}
}
document.documentElement.setAttribute('animating-background', 'true');
if (shouldAnimate) {
let previousBackgroundOpacity = document.documentElement.style.getPropertyValue(
'--zen-background-opacity'
);
try {
// Prevent NaN from being set
if (previousBackgroundOpacity) {
previousBackgroundOpacity = parseFloat(previousBackgroundOpacity);
}
} catch (e) {
previousBackgroundOpacity = 1;
}
if (previousBackgroundOpacity == 1 || !previousBackgroundOpacity) {
previousBackgroundOpacity = 0;
}
gZenThemePicker.previousBackgroundOpacity = previousBackgroundOpacity;
animations.push(
gZenUIManager.motion.animate(
document.documentElement,
{
'--zen-background-opacity': [previousBackgroundOpacity, 1],
},
{
type: 'spring',
bounce: 0,
duration: kGlobalAnimationDuration,
}
)
);
}
for (const element of document.querySelectorAll('zen-workspace')) {
if (element.classList.contains('zen-essentials-container')) {
continue;
@@ -2273,32 +2304,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (shouldAnimate) {
gZenUIManager._preventToolbarRebuild = true;
gZenUIManager.updateTabsToolbar();
let previousBackgroundOpacity = document.documentElement.style.getPropertyValue(
'--zen-background-opacity'
);
try {
previousBackgroundOpacity = parseFloat(previousBackgroundOpacity);
} catch (e) {
previousBackgroundOpacity = 1;
}
if (previousBackgroundOpacity == 1) {
previousBackgroundOpacity = 0;
}
animations.push(
gZenUIManager.motion.animate(
document.documentElement,
{
'--zen-background-opacity': [previousBackgroundOpacity, 1],
},
{
type: 'spring',
bounce: 0,
duration: kGlobalAnimationDuration,
}
)
);
}
await Promise.all(animations);
document.documentElement.removeAttribute('animating-background');
if (shouldAnimate) {
for (const cloned of clonedEssentials) {
cloned.container.remove();