Enhance background animation and styling for Zen theme, improving visual transitions and inactive window appearance

src/browser/base/content/zen-styles/zen-browser-ui.css

@@ -25,6 +25,51 @@
   width: 100%;
   background: var(--zen-main-browser-background);
 
+  will-change: background-color;
+
+  &::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+    pointer-events: none;
+    transition: backdrop-filter var(--inactive-window-transition);
+  }
+
+  @media (-moz-bool-pref: 'zen.theme.gradient') {
+    &[animating='true']::after {
+      background: var(--zen-main-browser-background-old);
+      backdrop-filter: blur(5px);
+      animation: zen-main-app-wrapper-animation .6s ease forwards;
+      transition: 0s;
+    }
+  }
+
+  @media (-moz-windows-accent-color-in-titlebar) {
+    background-color: var(--toolbox-non-lwt-bgcolor);
+    transition: background-color var(--inactive-window-transition);
+    &:-moz-window-inactive {
+      background-color: var(--toolbox-non-lwt-bgcolor-inactive);
+      color: var(--toolbox-non-lwt-textcolor-inactive);
+    }
+    &::after {
+      display: none;
+    }
+  }
+
+  @media not (-moz-windows-accent-color-in-titlebar) {
+    transition: color var(--inactive-window-transition);
+    color: var(--toolbox-non-lwt-textcolor-inactive);
+    &:-moz-window-inactive {
+      &::after {
+        backdrop-filter: grayscale(0.8);
+      }
+    }
+  }
+
   &::before {
     content: '';
     position: fixed;
@@ -64,21 +109,6 @@
   & > * {
     z-index: 1;
   }
-
-  @media (-moz-bool-pref: 'zen.theme.gradient') {
-    &[animating='true']::before {
-      content: '';
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: var(--zen-main-browser-background-old);
-      backdrop-filter: blur(5px);
-      animation: zen-main-app-wrapper-animation .5s ease-in-out forwards;
-      border-radius: env(-moz-gtk-csd-titlebar-radius);
-    }
-  }
 }
 
 #zen-appcontent-wrapper {

src/browser/base/zen-components/ZenGradientGenerator.mjs

@@ -612,17 +612,20 @@
         }
 
 
-        const appWrapper = browser.document.getElementById('zen-main-app-wrapper');
-        if (!skipUpdate) {
+        const appWrapper = browser.document.getElementById('browser');
+        if (!skipUpdate && !this._animatingBackground) {
+          this._animatingBackground = true;
           appWrapper.removeAttribute('animating');
-          appWrapper.setAttribute('animating', 'true');
-          browser.document.body.style.setProperty('--zen-main-browser-background-old',
-            browser.document.body.style.getPropertyValue('--zen-main-browser-background')
+          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');
-            }, 500);
+              browser.document.documentElement.style.removeProperty('--zen-main-browser-background-old');
+            }, 700);
           });
         }
 

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

@@ -1,17 +1,19 @@
 diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
-index 963a33af85521914ba0dad973ef94e6a8c2afdd0..f31bd5261631cb9e00ee6b723d6f9a85f0ae3119 100644
+index a9276a678f16a67e2a003474203c37cb5c9300ad..7d30aaf66659ffa53937f45b0db98f9aebb483c7 100644
 --- a/browser/themes/linux/browser.css
 +++ b/browser/themes/linux/browser.css
-@@ -72,7 +72,7 @@
+@@ -42,15 +42,16 @@
      -moz-default-appearance: -moz-window-decorations;
      appearance: auto;
  
 -    #navigator-toolbox,
+-    dialog::backdrop {
 +    #zen-main-app-wrapper,
-     dialog::backdrop {
++    dialog::backdrop,
++    #browser::after {
        border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
        border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
-@@ -80,7 +80,7 @@
+     }
  
      /* stylelint-disable-next-line media-query-no-invalid */
      @media (-moz-bool-pref: "widget.gtk.rounded-bottom-corners.enabled") {

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

@@ -1,16 +1,8 @@
 diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
-index 08bc078c2572fb218b435e580ef71be2586989c3..e440b6dc3f331785c841e1702887f67a67e00e96 100644
+index 08bc078c2572fb218b435e580ef71be2586989c3..3d173cfcfe80e978683df760c132307f97d73ae6 100644
 --- a/browser/themes/shared/browser-shared.css
 +++ b/browser/themes/shared/browser-shared.css
-@@ -144,7 +144,6 @@ body {
-   transition: background-color var(--inactive-window-transition);
- 
-   &:-moz-window-inactive {
--    background-color: var(--toolbox-non-lwt-bgcolor-inactive);
-     color: var(--toolbox-non-lwt-textcolor-inactive);
-   }
- 
-@@ -163,6 +162,31 @@ body {
+@@ -163,6 +163,31 @@ body {
      border-bottom-color: var(--chrome-content-separator-color);
    }
  

src/widget/windows/nsLookAndFeel-cpp.patch

@@ -1,13 +0,0 @@
-diff --git a/widget/windows/nsLookAndFeel.cpp b/widget/windows/nsLookAndFeel.cpp
-index 58c5fc3b55da47109e16cc3d6f44b0950b2965e7..85e3f1a21344678ad0e07f4663fa76653bd7ad3d 100644
---- a/widget/windows/nsLookAndFeel.cpp
-+++ b/widget/windows/nsLookAndFeel.cpp
-@@ -838,7 +838,7 @@ auto nsLookAndFeel::ComputeTitlebarColors() -> TitlebarColors {
-   result.mAccentInactive = dwmKey.GetValueAsDword(u"AccentColorInactive"_ns);
-   result.mAccentInactiveText = GetAccentColorText(result.mAccentInactive);
- 
--  if (WinUtils::MicaEnabled()) {
-+  if (WinUtils::MicaEnabled() || true) {  // Zen: Disable accent color in titlebar because it's ugly
-     // Use transparent titlebar backgrounds when using mica.
-     result.mActiveDark.mBg = result.mActiveLight.mBg =
-         result.mInactiveDark.mBg = result.mInactiveLight.mBg = NS_TRANSPARENT;