Bug 2036647 Alternative Approach Variant 2 - using a slightly lighter `{ "linear-gradient": "..." }` syntax

Bug-2036647-allow-cssgradient-theme-backgrounds--variant-02.patch

diff --git a/browser/themes/BuiltInThemeConfig.sys.mjs b/browser/themes/BuiltInThemeConfig.sys.mjs
index c4ff66417c43..efe786548af7 100644
--- a/browser/themes/BuiltInThemeConfig.sys.mjs
+++ b/browser/themes/BuiltInThemeConfig.sys.mjs
@@ -42,7 +42,7 @@ export const BuiltInThemeConfig = new Map([
   [
     "firefox-alpenglow@mozilla.org",
     {
-      version: "1.5.2",
+      version: "1.5.3",
       path: "resource://builtin-themes/alpenglow/",
     },
   ],
diff --git a/browser/themes/ThemeVariableMap.sys.mjs b/browser/themes/ThemeVariableMap.sys.mjs
index e34fe796f0b3..c988f433270a 100644
--- a/browser/themes/ThemeVariableMap.sys.mjs
+++ b/browser/themes/ThemeVariableMap.sys.mjs
@@ -23,6 +23,13 @@ export const ThemeVariableMap = [
       lwtProperty: "backgroundsTiling",
     },
   ],
+  [
+    "--lwt-background-size",
+    {
+      isColor: false,
+      lwtProperty: "backgroundsSize",
+    },
+  ],
   [
     "--tab-loading-fill",
     {
diff --git a/browser/themes/addons/alpenglow/background-gradient-dark.svg b/browser/themes/addons/alpenglow/background-gradient-dark.svg
index 6ab26b42d5e1..e69de29bb2d1 100644
--- a/browser/themes/addons/alpenglow/background-gradient-dark.svg
+++ b/browser/themes/addons/alpenglow/background-gradient-dark.svg
@@ -1,4 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="72" height="144" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="50%" id="a"><stop stop-color="#20123A" offset="0%"/><stop stop-color="#291D4F" offset="100%"/></linearGradient></defs><path fill="url(#a)" d="M0 0h72v144H0z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/browser/themes/addons/alpenglow/background-gradient.svg b/browser/themes/addons/alpenglow/background-gradient.svg
index a0b54a46ad84..e69de29bb2d1 100644
--- a/browser/themes/addons/alpenglow/background-gradient.svg
+++ b/browser/themes/addons/alpenglow/background-gradient.svg
@@ -1,4 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="72" height="144" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="-18.096%" x2="50%" y2="50%" id="a"><stop stop-color="#FF6BBA" offset="0%"/><stop stop-color="#FFC999" offset="100%"/></linearGradient></defs><path fill="url(#a)" d="M0 0h72v144H0z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/browser/themes/addons/alpenglow/manifest.json b/browser/themes/addons/alpenglow/manifest.json
index 648b73a01df3..495a2a47f8d8 100644
--- a/browser/themes/addons/alpenglow/manifest.json
+++ b/browser/themes/addons/alpenglow/manifest.json
@@ -10,7 +10,7 @@
   "name": "Firefox Alpenglow",
   "description": "Use a colorful appearance for buttons, menus, and windows.",
   "author": "Mozilla",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "icons": { "32": "icon.svg" },
 
   "theme": {
@@ -18,7 +18,7 @@
       "additional_backgrounds": [
         "background-noodles-right.svg",
         "background-noodles-left.svg",
-        "background-gradient.svg"
+        { "linear-gradient": "to bottom, #FF6BBA -18.096%, #FFC999 50%" }
       ]
     },
 
@@ -29,6 +29,7 @@
         "right top"
       ],
       "additional_backgrounds_tiling": ["no-repeat", "no-repeat", "repeat-x"],
+      "additional_backgrounds_size": ["auto", "auto", "auto 144px"],
       "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
     },
     "colors": {
@@ -74,7 +75,7 @@
       "additional_backgrounds": [
         "background-noodles-right-dark.svg",
         "background-noodles-left-dark.svg",
-        "background-gradient-dark.svg"
+        { "linear-gradient": "to bottom, #20123A 0%, #291D4F 50%" }
       ]
     },
 
@@ -85,6 +86,7 @@
         "right top"
       ],
       "additional_backgrounds_tiling": ["no-repeat", "no-repeat", "repeat-x"],
+      "additional_backgrounds_size": ["auto", "auto", "auto 144px"],
       "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
     },
     "colors": {
diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
index 8865cc4a0bb3..a371730e282b 100644
--- a/browser/themes/shared/browser-shared.css
+++ b/browser/themes/shared/browser-shared.css
@@ -116,9 +116,11 @@ body {
   --lwt-additional-images: none;
   --lwt-background-alignment: right top;
   --lwt-background-tiling: no-repeat;
+  --lwt-background-size: auto;
 
   --toolbox-background-image: var(--lwt-additional-images);
   --toolbox-background-repeat: var(--lwt-background-tiling);
+  --toolbox-background-size: var(--lwt-background-size);
   --toolbox-background-position: var(--lwt-background-alignment);
 
   &[lwtheme-image] {
@@ -126,6 +128,7 @@ body {
        the latter atop the former. */
     --toolbox-background-image: var(--lwt-header-image), var(--lwt-additional-images);
     --toolbox-background-repeat: no-repeat, var(--lwt-background-tiling);
+    --toolbox-background-size: auto, var(--lwt-background-size);
     --toolbox-background-position: right top, var(--lwt-background-alignment);
   }
 
@@ -277,6 +280,8 @@ body {
 :root[lwtheme-image-y-align] #navigator-toolbox {
   background-image: var(--toolbox-background-image);
   background-repeat: var(--toolbox-background-repeat);
+  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
+  background-size: var(--toolbox-background-size);
   background-position: var(--toolbox-background-position);
 }
 
diff --git a/toolkit/components/extensions/schemas/theme.json b/toolkit/components/extensions/schemas/theme.json
index 4cdd70aa1980..77b24668ff2a 100644
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -37,6 +37,41 @@
           }
         ]
       },
+      {
+        "id": "ThemeCSSGradient",
+        "choices": [
+          {
+            "type": "object",
+            "properties": { "linear-gradient": { "type": "string" } },
+            "additionalProperties": false
+          },
+          {
+            "type": "object",
+            "properties": { "radial-gradient": { "type": "string" } },
+            "additionalProperties": false
+          },
+          {
+            "type": "object",
+            "properties": { "conic-gradient": { "type": "string" } },
+            "additionalProperties": false
+          },
+          {
+            "type": "object",
+            "properties": { "repeating-linear-gradient": { "type": "string" } },
+            "additionalProperties": false
+          },
+          {
+            "type": "object",
+            "properties": { "repeating-radial-gradient": { "type": "string" } },
+            "additionalProperties": false
+          },
+          {
+            "type": "object",
+            "properties": { "repeating-conic-gradient": { "type": "string" } },
+            "additionalProperties": false
+          }
+        ]
+      },
       {
         "id": "ThemeExperiment",
         "type": "object",
@@ -78,7 +113,12 @@
             "properties": {
               "additional_backgrounds": {
                 "type": "array",
-                "items": { "$ref": "ImageDataOrExtensionURL" },
+                "items": {
+                  "choices": [
+                    { "$ref": "ImageDataOrExtensionURL" },
+                    { "$ref": "ThemeCSSGradient" }
+                  ]
+                },
                 "maxItems": 15,
                 "optional": true
               },
@@ -310,6 +350,14 @@
                 "maxItems": 15,
                 "optional": true
               },
+              "additional_backgrounds_size": {
+                "type": "array",
+                "items": {
+                  "type": "string"
+                },
+                "maxItems": 15,
+                "optional": true
+              },
               "color_scheme": {
                 "optional": true,
                 "type": "string",
diff --git a/toolkit/modules/LightweightThemeConsumer.sys.mjs b/toolkit/modules/LightweightThemeConsumer.sys.mjs
index 756cf47d4dd5..94956925d255 100644
--- a/toolkit/modules/LightweightThemeConsumer.sys.mjs
+++ b/toolkit/modules/LightweightThemeConsumer.sys.mjs
@@ -577,15 +577,31 @@ function _getContentProperties(doc, hasTheme, data) {
   return properties;
 }
 
-function _setImage(aWin, aRoot, aActive, aVariableName, aURLs) {
-  if (aURLs && !Array.isArray(aURLs)) {
-    aURLs = [aURLs];
+function _imageToCss(aWin, aImage) {
+  if (typeof aImage === "object") {
+    if (aImage.type !== "gradient_css") {
+      console.warn(
+        `LightweightThemeConsumer: unexpected image type "${aImage.type}"`
+      );
+      return null;
+    }
+    return aImage.value;
+  }
+  return `url(${aWin.CSS.escape(aImage)})`;
+}
+
+function _setImage(aWin, aRoot, aActive, aVariableName, aImages) {
+  if (aImages && !Array.isArray(aImages)) {
+    aImages = [aImages];
   }
   _setProperty(
     aRoot,
     aActive,
     aVariableName,
-    aURLs && aURLs.map(v => `url(${aWin.CSS.escape(v)})`).join(", ")
+    aImages
+      ?.map(v => _imageToCss(aWin, v))
+      .filter(v => typeof v === "string") // Ignore invalid entries.
+      .join(", ")
   );
 }
 
diff --git a/toolkit/mozapps/extensions/LightweightThemeManager.sys.mjs b/toolkit/mozapps/extensions/LightweightThemeManager.sys.mjs
index 53c0118ab476..e01804bc72f0 100644
--- a/toolkit/mozapps/extensions/LightweightThemeManager.sys.mjs
+++ b/toolkit/mozapps/extensions/LightweightThemeManager.sys.mjs
@@ -17,8 +17,17 @@ function loadImages(images, styles, experiment, baseURI, logger) {
 
     switch (image) {
       case "additional_backgrounds": {
-        let backgroundImages = val.map(img => baseURI.resolve(img));
-        styles.additionalBackgrounds = backgroundImages;
+        // TODO: consider to also tag URL entries as { type: "image_url", value } for consistency.
+        styles.additionalBackgrounds = val.map(img => {
+          if (typeof img === "object") {
+            const [key, params] = Object.entries(img)[0];
+            return {
+              type: "gradient_css",
+              value: `${key}(${params})`,
+            };
+          }
+          return baseURI.resolve(img);
+        });
         break;
       }
       case "theme_frame": {
@@ -168,6 +177,18 @@ function loadProperties(properties, styles, experiment, logger) {
         styles.backgroundsTiling = tiling.join(",");
         break;
       }
+      case "additional_backgrounds_size": {
+        if (!assertValidAdditionalBackgrounds(property, val.length)) {
+          break;
+        }
+
+        let sizes = [];
+        for (let i = 0, l = styles.additionalBackgrounds.length; i < l; ++i) {
+          sizes.push(val[i] || "auto");
+        }
+        styles.backgroundsSize = sizes.join(",");
+        break;
+      }
       case "color_scheme":
       case "content_color_scheme": {
         styles[property] = val;