feat: Better animations for app background, b=(no-bug), c=common, workspaces

src/browser/themes/linux/browser-css.patch

@@ -1,20 +1,18 @@
 diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
-index 5c9891e5ed4b865ed4ecc98d794a239b0f96a8f9..e13bf7277edeb49ebbb12cf9359ac6193bb47ebd 100644
+index 5c9891e5ed4b865ed4ecc98d794a239b0f96a8f9..53e69289620dd7e89dad167fb3a59b162545dd89 100644
 --- a/browser/themes/linux/browser.css
 +++ b/browser/themes/linux/browser.css
-@@ -42,21 +42,25 @@
+@@ -42,7 +42,8 @@
      -moz-default-appearance: -moz-window-decorations;
      appearance: auto;
  
 -    #navigator-toolbox,
--    dialog::backdrop {
 +    #zen-main-app-wrapper,
-+    dialog::backdrop,
-+    #browser::after,
-+    #browser::before {
++    #zen-browser-background,
+     dialog::backdrop {
        border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
        border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
-     }
+@@ -50,13 +51,14 @@
  
      /* stylelint-disable-next-line media-query-no-invalid */
      @media -moz-pref("widget.gtk.rounded-bottom-corners.enabled") {
@@ -27,8 +25,7 @@ index 5c9891e5ed4b865ed4ecc98d794a239b0f96a8f9..e13bf7277edeb49ebbb12cf9359ac619
        body,
 -      dialog::backdrop {
 +      dialog::backdrop,
-+      #browser::after,
-+      #browser::before {
++      #zen-browser-background {
          /* Use an uniform clip to allow WebRender to optimize it better */
          border-radius: env(-moz-gtk-csd-titlebar-radius);
        }

src/zen/common/ZenStartup.mjs

@@ -2,11 +2,21 @@
   var ZenStartup = {
     init() {
       this.openWatermark();
+      this._initBrowserBackground();
       this._changeSidebarLocation();
       this._zenInitBrowserLayout();
       this._initSearchBar();
     },
 
+    _initBrowserBackground() {
+      const background = document.createXULElement('box');
+      background.id = 'zen-browser-background';
+      const grain = document.createXULElement('box');
+      grain.id = 'zen-browser-grain';
+      background.appendChild(grain);
+      document.getElementById('browser').prepend(background);
+    },
+
     _zenInitBrowserLayout() {
       if (this.__hasInitBrowserLayout) return;
       this.__hasInitBrowserLayout = true;

src/zen/common/styles/zen-animations.css

@@ -62,15 +62,6 @@
   }
 }
 
-@keyframes zen-main-app-wrapper-animation {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
 @keyframes zen-jello-out-animation {
   0% {
     transform: scale3d(1, 1, 1);

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

@@ -32,14 +32,25 @@
 }
 
 #browser {
+  background: transparent !important;
   width: 100%;
-  background: var(--zen-main-browser-background) !important;
+}
+
+#zen-browser-background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  pointer-events: none;
 
   will-change: background-color;
 
-  &::after {
+  &::after,
+  &::before {
     content: '';
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     right: 0;
@@ -48,36 +59,38 @@
     pointer-events: none;
   }
 
-  &:not([post-animating='true'])::after {
-    transition: background-color var(--inactive-window-transition);
+  @media -moz-pref('zen.theme.gradient') {
+    &::after {
+      background: var(--zen-main-browser-background-old);
+      transition: 0s;
+      opacity: calc(1 - var(--zen-background-opacity));
+    }
+
+    &::before {
+      background: var(--zen-main-browser-background);
+      transition: 0s;
+      opacity: var(--zen-background-opacity);
+    }
   }
 
-  @media -moz-pref('zen.theme.gradient') {
-    &[animating='true']::after {
-      background: var(--zen-main-browser-background-old);
-      backdrop-filter: blur(5px);
-      animation: zen-main-app-wrapper-animation 0.4s ease forwards;
-      transition: 0s;
-    }
+  &:not([post-animating='true'])::before {
+    transition: background-color var(--inactive-window-transition);
   }
 
   @media (not (-moz-windows-mica)) and -moz-pref('zen.view.grey-out-inactive-windows') {
     transition: color var(--inactive-window-transition);
     :root:not([zen-welcome-stage]) &:-moz-window-inactive {
       color: var(--toolbox-textcolor-inactive);
-      &::after {
+      &::before {
         background-color: var(--toolbox-bgcolor-inactive);
       }
     }
   }
 
-  &::before {
+  #zen-browser-grain {
     content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    width: 100%;
+    height: 100%;
     background-image: url(chrome://browser/content/zen-images/grain-bg.png);
     pointer-events: none;
     z-index: 0;

src/zen/common/styles/zen-theme.css

@@ -19,6 +19,8 @@
   --zen-border-radius: 7px;
   --zen-primary-color: #ffb787;
 
+  --zen-background-opacity: 1;
+
   /* Branding */
   --zen-branding-dark: #1d1d1d;
   --zen-branding-coral: #f76f53;

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -1121,26 +1121,20 @@
           }
         }
 
-        const appWrapper = browser.document.getElementById('browser');
+        const appBackground = browser.document.getElementById('zen-browser-background');
         if (!skipUpdate && !this._animatingBackground) {
           this._animatingBackground = true;
-          appWrapper.removeAttribute('animating');
           browser.document.documentElement.style.setProperty(
             '--zen-main-browser-background-old',
             browser.document.documentElement.style.getPropertyValue('--zen-main-browser-background')
           );
           browser.window.requestAnimationFrame(() => {
-            appWrapper.setAttribute('animating', 'true');
             setTimeout(() => {
               this._animatingBackground = false;
-              appWrapper.removeAttribute('animating');
-              appWrapper.setAttribute('post-animating', 'true');
-              browser.document.documentElement.style.removeProperty(
-                '--zen-main-browser-background-old'
-              );
+              appBackground.setAttribute('post-animating', 'true');
               setTimeout(() => {
                 // Reactivate the transition after the animation
-                appWrapper.removeAttribute('post-animating');
+                appBackground.removeAttribute('post-animating');
               }, 100);
             }, 300);
           });

src/zen/workspaces/ZenWorkspaces.mjs

@@ -2273,6 +2273,23 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (shouldAnimate) {
       gZenUIManager._preventToolbarRebuild = true;
       gZenUIManager.updateTabsToolbar();
+
+      animations.push(
+        gZenUIManager.motion.animate(
+          document.documentElement,
+          {
+            '--zen-background-opacity': [
+              document.documentElement.style.getPropertyValue('--zen-background-opacity'),
+              '1',
+            ],
+          },
+          {
+            type: 'spring',
+            bounce: 0,
+            duration: kGlobalAnimationDuration,
+          }
+        )
+      );
     }
     await Promise.all(animations);
     if (shouldAnimate) {