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

src/zen/common/styles/zen-browser-ui.css

@@ -45,35 +45,36 @@
   z-index: 0;
   pointer-events: none;
 
-  will-change: background-color;
+  isolation: isolate;
 
   &::after,
   &::before {
     content: '';
     position: absolute;
-    top: 0;
+    inset: 0;
-    left: 0;
-    right: 0;
-    bottom: 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);
   }
 

src/zen/workspaces/ZenGradientGenerator.mjs

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

src/zen/workspaces/ZenWorkspaces.mjs

@@ -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();