From 44a28e2afe3f295ac065f993f49e55ca3c186ff8 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Sat, 10 Jan 2026 13:00:27 +0100
Subject: [PATCH] perf: Stop flushing document styles when switching spaces,
 b=bug #11851, c=glance, workspaces

---
 src/zen/glance/ZenGlanceManager.mjs  | 29 ++++++----------------------
 src/zen/workspaces/ZenWorkspaces.mjs |  6 +++---
 2 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/src/zen/glance/ZenGlanceManager.mjs b/src/zen/glance/ZenGlanceManager.mjs
index 1f38cb56a..2815a8636 100644
--- a/src/zen/glance/ZenGlanceManager.mjs
+++ b/src/zen/glance/ZenGlanceManager.mjs
@@ -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;
   }
 
diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs
index 32bdc8fe9..8410f9882 100644
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -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,