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

perf: Stop flushing document styles when switching spaces, b=bug #11851, c=glance, workspaces

Browse Source
This commit is contained in:
mr. m
2026-01-10 13:00:27 +01:00
parent 818b2d1af5
commit 44a28e2afe
2 changed files with 9 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/zen/glance/ZenGlanceManager.mjs
View File

@@ -617,8 +617,10 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
const steps = this.#ARC_CONFIG.ARC_STEPS;
const arcDirection = shouldArcDownward ? 1 : -1;
function easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
function easeOutBack(x) {
const c1 = 0.4;
const c3 = c1 + 1;
return 1 + c3 * (x - 1) ** 3 + c1 * (x - 1) ** 2;
}
function easeOutCubic(t) {
@@ -628,7 +630,7 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
// First, create the main animation steps
for (let i = 0; i <= steps; i++) {
const progress = i / steps;
const eased = direction === 'opening' ? easeInOutQuad(progress) : easeOutCubic(progress);
const eased = direction === 'opening' ? easeOutBack(progress) : easeOutCubic(progress);
// Calculate size interpolation
const currentWidth = startPosition.width + (endPosition.width - startPosition.width) * eased;
@@ -643,32 +645,13 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
const y =
startPosition.y + distanceY * eased + arcDirection * arcHeight * (1 - (2 * eased - 1) ** 2);
sequence.transform.push(`translate(-50%, -50%) scale(1)`);
sequence.transform.push(`translate(-50%, -50%)`);
sequence.top.push(`${y}px`);
sequence.left.push(`${x}px`);
sequence.width.push(`${currentWidth}px`);
sequence.height.push(`${currentHeight}px`);
}
let scale = 1;
const bounceSteps = 60;
if (direction === 'opening') {
for (let i = 0; i < bounceSteps; i++) {
const progress = i / bounceSteps;
// Scale up slightly then back to normal
scale = 1 + 0.003 * Math.sin(progress * Math.PI);
// If we are at the last step, ensure scale is exactly 1
if (i === bounceSteps - 1) {
scale = 1;
}
sequence.transform.push(`translate(-50%, -50%) scale(${scale})`);
sequence.top.push(sequence.top[sequence.top.length - 1]);
sequence.left.push(sequence.left[sequence.left.length - 1]);
sequence.width.push(sequence.width[sequence.width.length - 1]);
sequence.height.push(sequence.height[sequence.height.length - 1]);
}
}
return sequence;
}

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

@@ -685,8 +685,8 @@ class nsZenWorkspaces {
const delta = event.delta * 300;
const stripWidth =
document.getElementById('navigator-toolbox').getBoundingClientRect().width +
document.getElementById('zen-sidebar-splitter').getBoundingClientRect().width * 2;
window.windowUtils.getBoundsWithoutFlushing(document.getElementById('navigator-toolbox')).width +
window.windowUtils.getBoundsWithoutFlushing(document.getElementById('zen-sidebar-splitter')).width * 2;
let translateX = this._swipeState.lastDelta + delta;
// Add a force multiplier as we are translating the strip depending on how close to the edge we are
let forceMultiplier = Math.min(1, 1 - Math.abs(translateX) / (stripWidth * 4.5)); // 4.5 instead of 4 to add a bit of a buffer
@@ -1681,7 +1681,7 @@ class nsZenWorkspaces {
!(this.#inChangingWorkspace && !forAnimation && !this._alwaysAnimatePaddingTop)
) {
delete this._alwaysAnimatePaddingTop;
const essentialsHeight = essentialContainer.getBoundingClientRect().height;
const essentialsHeight = window.windowUtils.getBoundsWithoutFlushing(essentialContainer).height;
if (!forAnimation && animateContainer && gZenUIManager.motion && gZenStartup.isReady) {
gZenUIManager.motion.animate(
workspaceElement,