mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-01-31 00:54:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor ZenCompactMode animation logic for improved performance and readability

Browse Source
This commit is contained in:
mr. M
2025-01-19 15:17:53 +01:00
parent f70c599afd
commit f344c0d41d
2 changed files with 39 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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%, rgb(39, 39, 39) 90%);
--zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(181, 181, 181, .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(255, 255, 255, 0.65), rgba(255, 255, 255, 0.11));
--zen-toolbar-element-bg: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.11));
/* Toolbar */
--zen-toolbar-height: 38px;
@@ -208,7 +208,7 @@
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(53, 53, 53) 80%);
--zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(255, 255, 255, .11) 90%);
--zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(255, 255, 255, 0.11) 90%);
--zen-dialog-background: var(--zen-dark-color-mix-base);
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(24, 24, 24) 96%);

107
src/browser/base/zen-components/ZenCompactMode.mjs
View File

@@ -129,10 +129,6 @@ var gZenCompactModeManager = {
animateCompactMode() {
const isCompactMode = this.prefefence;
const canHideSidebar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
if (this._isAnimating) {
return;
}
this._isAnimating = true;
// Do this so we can get the correct width ONCE compact mode styled have been applied
if (this._canAnimateSidebar) {
this.sidebar.setAttribute('animate', 'true');
@@ -141,80 +137,49 @@ var gZenCompactModeManager = {
let sidebarWidth = this.getAndApplySidebarWidth();
if (!this._canAnimateSidebar) {
this.sidebar.removeAttribute('animate');
this._isAnimating = false;
return;
}
if (canHideSidebar && isCompactMode) {
window.requestAnimationFrame(() => {
this.sidebar.style.position = 'unset';
this.sidebar.style.transition = 'margin .17s ease';
this.sidebar.style.left = '0';
if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
} else {
this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`;
}
this.sidebar.style.pointerEvents = 'none';
window.requestAnimationFrame(() => {
gZenUIManager.motion
.animate(
this.sidebar,
{ marginLeft: `-${sidebarWidth}px` },
{
ease: 'easeIn',
type: 'spring',
stiffness: 3000,
damping: 150,
mass: 1,
}
)
.then(() => {
console.log('done');
this.sidebar.removeAttribute('animate');
this.sidebar.style.transition = 'none';
this.sidebar.style.removeProperty('margin-left');
setTimeout(() => {
window.requestAnimationFrame(() => {
this.sidebar.style.removeProperty('pointer-events');
this.sidebar.style.removeProperty('position');
this.sidebar.style.removeProperty('margin-left');
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('transform');
this.sidebar.style.removeProperty('left');
document.getElementById('browser').style.removeProperty('overflow');
this.sidebar.removeAttribute('animate');
window.requestAnimationFrame(() => {
this.sidebar.style.removeProperty('transition');
this._isAnimating = false;
});
});
}, 170);
this.sidebar.style.removeProperty('transition');
});
});
});
} else if (canHideSidebar && !isCompactMode) {
document.getElementById('browser').style.overflow = 'hidden';
this.sidebar.style.position = 'relative';
this.sidebar.style.left = '0';
if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
} else {
this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`;
this.sidebar.style.transform = `translateX(${sidebarWidth}px)`;
}
window.requestAnimationFrame(() => {
this.sidebar.style.transition = 'margin .17s ease, transform .275s ease, opacity .1s ease';
// we are in compact mode and we are exiting it
if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = '0';
} else {
this.sidebar.style.marginRight = '0';
this.sidebar.style.transform = 'translateX(0)';
}
this.sidebar.style.pointerEvents = 'none';
setTimeout(() => {
window.requestAnimationFrame(() => {
this._isAnimating = false;
this.sidebar.style.removeProperty('position');
this.sidebar.style.removeProperty('pointer-events');
this.sidebar.style.removeProperty('opacity');
this.sidebar.style.removeProperty('margin-left');
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('transform');
this.sidebar.style.removeProperty('transition');
this.sidebar.style.removeProperty('left');
document.getElementById('browser').style.removeProperty('overflow');
this.sidebar.removeAttribute('animate');
});
}, 400);
});
this.sidebar.style.marginLeft = `-${sidebarWidth}px`;
gZenUIManager.motion
.animate(
this.sidebar,
{ marginLeft: '0px' },
{
ease: 'easeOut',
type: 'spring',
stiffness: 3000,
damping: 150,
mass: 1,
}
)
.then(() => {
this.sidebar.removeAttribute('animate');
document.getElementById('browser').style.removeProperty('overflow');
});
} else {
this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating
}