From 42ac8e6094103221d33fe0c80309c14796ce7519 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Sat, 14 Mar 2026 10:21:32 +0100
Subject: [PATCH] feat: Make gradient attributes trigger less re-styles, b=bug
 #12765, c=common

---
 src/zen/common/styles/zen-browser-ui.css |  2 +-
 src/zen/spaces/ZenGradientGenerator.mjs  | 15 ++++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css
index 75b49fc04..ac2990e5a 100644
--- a/src/zen/common/styles/zen-browser-ui.css
+++ b/src/zen/common/styles/zen-browser-ui.css
@@ -88,7 +88,7 @@
     display: none;
   }
 
-  :root[zen-show-grainy-background="true"] & .zen-browser-grain {
+  &[zen-show-grainy-background="true"] .zen-browser-grain {
     display: flex;
     width: 100%;
     height: 100%;
diff --git a/src/zen/spaces/ZenGradientGenerator.mjs b/src/zen/spaces/ZenGradientGenerator.mjs
index d13c25433..d4ea041aa 100644
--- a/src/zen/spaces/ZenGradientGenerator.mjs
+++ b/src/zen/spaces/ZenGradientGenerator.mjs
@@ -1438,13 +1438,14 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
   }
 
   updateNoise(texture) {
-    document.documentElement.style.setProperty(
-      "--zen-grainy-background-opacity",
-      texture
-    );
-    document.documentElement.setAttribute(
-      "zen-show-grainy-background",
-      texture > 0 ? "true" : "false"
+    [lazy.browserBackgroundElement, lazy.toolbarBackgroundElement].forEach(
+      element => {
+        element.style.setProperty("--zen-grainy-background-opacity", texture);
+        element.setAttribute(
+          "zen-show-grainy-background",
+          texture > 0 ? "true" : "false"
+        );
+      }
     );
   }