Bug 1347184 - Add support for colors.icons and colors.icons_attention properties. r=jaws

MozReview-Commit-ID: KX4TIdBvza6

--HG--
extra : rebase_source : 23b1da0a9649bfb91c45c576cb63564305a6990f

browser/themes/shared/toolbarbutton-icons.inc.css

@@ -1,5 +1,5 @@
 :root {
-  --toolbarbutton-icon-fill-attention: #0a84ff;
+  --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #0a84ff);
 }
 
 :root:-moz-lwtheme {
@@ -7,14 +7,14 @@
 }
 
 toolbar[brighttext] {
-  --toolbarbutton-icon-fill-attention: #45a1ff;
+  --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff);
 }
 
 .toolbarbutton-animatable-box,
 .toolbarbutton-1 {
   color: inherit;
   -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
+  fill: var(--lwt-toolbarbutton-icon-fill, currentColor);
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
@@ -509,7 +509,7 @@ toolbar[brighttext] {
 .bookmark-item {
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
+  fill: var(--lwt-toolbarbutton-icon-fill, currentColor);
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 

toolkit/components/extensions/ext-theme.js

@@ -150,6 +150,8 @@ class Theme {
         case "toolbar_top_separator":
         case "toolbar_bottom_separator":
         case "toolbar_vertical_separator":
+        case "icons":
+        case "icons_attention":
           this.lwtStyles[color] = cssColor;
           break;
       }

toolkit/components/extensions/schemas/theme.json

@@ -128,6 +128,14 @@
               "toolbar_vertical_separator": {
                 "$ref": "ThemeColor",
                 "optional": true
+              },
+              "icons": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
+              "icons_attention": {
+                "$ref": "ThemeColor",
+                "optional": true
               }
             },
             "additionalProperties": { "$ref": "UnrecognizedProperty" }

toolkit/components/extensions/test/browser/browser.ini

@@ -17,3 +17,4 @@ support-files =
 [browser_ext_themes_tab_text.js]
 [browser_ext_themes_toolbar_fields.js]
 [browser_ext_themes_toolbars.js]
+[browser_ext_themes_toolbarbutton_icons.js]

toolkit/components/extensions/test/browser/browser_ext_themes_toolbarbutton_icons.js

@@ -0,0 +1,56 @@
+"use strict";
+
+// This test checks applied WebExtension themes that attempt to change
+// icon color properties
+
+add_task(async function test_tint_properties() {
+  const ICONS_COLOR = "#001b47";
+  const ICONS_ATTENTION_COLOR = "#44ba77";
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+          "icons": ICONS_COLOR,
+          "icons_attention": ICONS_ATTENTION_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  let toolbarbutton = document.querySelector("#home-button");
+  Assert.equal(
+    window.getComputedStyle(toolbarbutton).getPropertyValue("fill"),
+    `rgb(${hexToRGB(ICONS_COLOR).join(", ")})`,
+    "Buttons fill color set!"
+  );
+
+  let starButton = document.querySelector("#star-button");
+  starButton.setAttribute("starred", "true");
+
+  let starComputedStyle = window.getComputedStyle(starButton);
+  Assert.equal(
+    starComputedStyle.getPropertyValue("--lwt-toolbarbutton-icon-fill-attention"),
+    ICONS_ATTENTION_COLOR,
+    "Variable is properly set"
+  );
+  Assert.equal(
+    starComputedStyle.getPropertyValue("fill"),
+    `rgb(${hexToRGB(ICONS_ATTENTION_COLOR).join(", ")})`,
+    "Starred icon fill is properly set"
+  );
+
+  starButton.removeAttribute("starred");
+
+  await extension.unload();
+});

toolkit/modules/LightweightThemeConsumer.jsm

@@ -26,6 +26,8 @@ const kCSSVarsMap = new Map([
   ["--tabs-border-color", "toolbar_top_separator"],
   ["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
   ["--urlbar-separator-color", "toolbar_vertical_separator"],
+  ["--lwt-toolbarbutton-icon-fill", "icons"],
+  ["--lwt-toolbarbutton-icon-fill-attention", "icons_attention"],
 ]);
 
 this.LightweightThemeConsumer =