From e221bcccc8f56907f17bce70c56debc971c310d5 Mon Sep 17 00:00:00 2001
From: "mr. m" <91018726+mr-cheffy@users.noreply.github.com>
Date: Sun, 22 Mar 2026 20:18:05 +0100
Subject: [PATCH] no-bug: Clarify comment for acrylic elements (gh-12884)

---
 src/zen/common/modules/ZenUIManager.mjs        |  2 +-
 .../common/styles/zen-browser-container.css    |  4 +++-
 src/zen/spaces/ZenGradientGenerator.mjs        | 18 +++++++++---------
 src/zen/spaces/zen-workspaces.css              |  2 +-
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/zen/common/modules/ZenUIManager.mjs b/src/zen/common/modules/ZenUIManager.mjs
index 9d7640fbb..f008ad3b5 100644
--- a/src/zen/common/modules/ZenUIManager.mjs
+++ b/src/zen/common/modules/ZenUIManager.mjs
@@ -1014,7 +1014,7 @@ window.gZenVerticalTabsManager = {
             marginBottom: isLastItem() ? ["0px", "0px"] : [transform, "0px"],
           },
           {
-            duration: 0.075,
+            duration: 0.1,
             easing: "easeOut",
           }
         )
diff --git a/src/zen/common/styles/zen-browser-container.css b/src/zen/common/styles/zen-browser-container.css
index 7c33d6831..a8de2b24c 100644
--- a/src/zen/common/styles/zen-browser-container.css
+++ b/src/zen/common/styles/zen-browser-container.css
@@ -33,7 +33,9 @@
     @media -moz-pref("zen.theme.acrylic-elements") {
       & browser[type="content"] {
         /* For the rendering engine to apply layering optimizations. This
-           * is a hacky solution, but it works for now. */
+         * is a hacky solution, but it works for now. Note that this makes
+         * zen REALLY slow, so lets not enable it by default until we have
+         * a better solution. */
         will-change: transform;
       }
     }
diff --git a/src/zen/spaces/ZenGradientGenerator.mjs b/src/zen/spaces/ZenGradientGenerator.mjs
index d4ea041aa..e6d926bc7 100644
--- a/src/zen/spaces/ZenGradientGenerator.mjs
+++ b/src/zen/spaces/ZenGradientGenerator.mjs
@@ -1278,7 +1278,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
     return `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${opacity})`;
   }
 
-  getSingleRGBColor(color, forToolbar = false) {
+  #getSingleRGBColor(color, forToolbar = false) {
     if (color.isCustom) {
       return color.c;
     }
@@ -1345,13 +1345,13 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
       };
       return forToolbar ? this.getToolbarModifiedBase() : getBrowserBg();
     } else if (themedColors.length === 1) {
-      return this.getSingleRGBColor(themedColors[0], forToolbar);
+      return this.#getSingleRGBColor(themedColors[0], forToolbar);
     }
     // If there are custom colors, we just return a linear gradient with all colors
     if (themedColors.find(color => color.isCustom)) {
       // Just return a linear gradient with all colors
       const gradientColors = themedColors.map(color =>
-        this.getSingleRGBColor(color, forToolbar)
+        this.#getSingleRGBColor(color, forToolbar)
       );
       // Divide all colors evenly in the gradient
       const colorStops = gradientColors
@@ -1365,17 +1365,17 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
     if (themedColors.length === 2) {
       if (!forToolbar) {
         return [
-          `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} 0%, transparent 100%)`,
-          `linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} 0%, transparent 100%)`,
+          `linear-gradient(${rotation}deg, ${this.#getSingleRGBColor(themedColors[1], forToolbar)} 0%, transparent 100%)`,
+          `linear-gradient(${rotation + 180}deg, ${this.#getSingleRGBColor(themedColors[0], forToolbar)} 0%, transparent 100%)`,
         ]
           .reverse()
           .join(", ");
       }
-      return `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} 0%, ${this.getSingleRGBColor(themedColors[0], forToolbar)} 100%)`;
+      return `linear-gradient(${rotation}deg, ${this.#getSingleRGBColor(themedColors[1], forToolbar)} 0%, ${this.#getSingleRGBColor(themedColors[0], forToolbar)} 100%)`;
     } else if (themedColors.length === 3) {
-      let color1 = this.getSingleRGBColor(themedColors[2], forToolbar);
-      let color2 = this.getSingleRGBColor(themedColors[0], forToolbar);
-      let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
+      let color1 = this.#getSingleRGBColor(themedColors[2], forToolbar);
+      let color2 = this.#getSingleRGBColor(themedColors[0], forToolbar);
+      let color3 = this.#getSingleRGBColor(themedColors[1], forToolbar);
       return [
         `linear-gradient(-5deg, ${color1} 10%, transparent 80%)`,
         `radial-gradient(circle at 95% 0%, ${color3} 0%, transparent 75%)`,
diff --git a/src/zen/spaces/zen-workspaces.css b/src/zen/spaces/zen-workspaces.css
index 66d4d7c5e..2f3fbaadf 100644
--- a/src/zen/spaces/zen-workspaces.css
+++ b/src/zen/spaces/zen-workspaces.css
@@ -411,7 +411,7 @@ zen-workspace {
   .zen-current-workspace-indicator-chevron {
     width: 16px;
     height: 16px;
-    transition: transform 0.1s, opacity 0.1s;
+    transition: transform 0.1s, opacity 0.15s;
     transform: rotate(90deg);
     padding: 1px;