Bug 1431189 - Add google chrome toolbar button color properties: r=jaws

Added support for color.button_background, color.button_background_hover, color.button_background_active

MozReview-Commit-ID: F0EcTLMWE6h

--HG--
extra : rebase_source : 663356d0a518ac9d64319d15a9268f923add6a6b

browser/themes/shared/toolbarbuttons.inc.css

@@ -11,8 +11,8 @@
   /* These hover and active colors should work on both light and dark
      backgrounds. We'll later set colors that cater for light and dark
      backgrounds specifically when we can detect them. */
-  --toolbarbutton-hover-background: hsla(0,0%,70%,.4);
-  --toolbarbutton-active-background: hsla(0,0%,70%,.6);
+  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0,0%,70%,.4));
+  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0,0%,70%,.6));
 
   --backbutton-background: hsla(0,100%,100%,.8);
   --backbutton-hover-background: var(--backbutton-background);
@@ -37,14 +37,14 @@
    [brighttext] to cater for OS themes where :-moz-lwtheme-* doesn't apply. */
 :root:-moz-lwtheme-darktext,
 toolbar:not([brighttext]) {
-  --toolbarbutton-hover-background: hsla(240,5%,5%,.1);
-  --toolbarbutton-active-background: hsla(240,5%,5%,.15);
+  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(240,5%,5%,.1));
+  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(240,5%,5%,.15));
 }
 
 :root:-moz-lwtheme-brighttext,
 toolbar[brighttext] {
-  --toolbarbutton-hover-background: hsla(0,0%,100%,.2);
-  --toolbarbutton-active-background: hsla(0,0%,100%,.3);
+  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0,0%,100%,.2));
+  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0,0%,100%,.3));
 
   --backbutton-background: var(--toolbarbutton-hover-background);
   --backbutton-hover-background: var(--toolbarbutton-active-background);
@@ -168,6 +168,18 @@ toolbar[brighttext] .toolbaritem-combined-buttons > separator {
   opacity: .3;
 }
 
+#PersonalToolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active),
+.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]),
+.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]),
+.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])) > .toolbarbutton-text,
+toolbarbutton.bookmark-item:not(.subviewbutton):not([disabled="true"]):not([open]),
+toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active) > .toolbarbutton-icon,
+toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active) > .toolbarbutton-text,
+toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active) > .toolbarbutton-badge-stack {
+  background-color: var(--lwt-toolbarbutton-background, transparent);
+  color: inherit;
+}
+
 #PersonalToolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover,
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover,

toolkit/components/extensions/ext-theme.js

@@ -157,6 +157,9 @@ class Theme {
         case "toolbar_top_separator":
         case "toolbar_bottom_separator":
         case "toolbar_vertical_separator":
+        case "button_background":
+        case "button_background_hover":
+        case "button_background_active":
           this.lwtStyles[color] = cssColor;
           break;
       }

toolkit/components/extensions/schemas/theme.json

@@ -140,6 +140,18 @@
               "icons_attention": {
                 "$ref": "ThemeColor",
                 "optional": true
+              },
+              "button_background": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
+              "button_background_hover": {
+               "$ref": "ThemeColor",
+               "optional": true
+              },
+              "button_background_active": {
+                "$ref": "ThemeColor",
+                "optional": true
               }
             },
             "additionalProperties": { "$ref": "UnrecognizedProperty" }

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

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

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

@@ -0,0 +1,64 @@
+"use strict";
+Components.utils.importGlobalProperties(["InspectorUtils"]);
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the button background color properties are applied correctly.
+
+add_task(async function test_button_background_properties() {
+  const BUTTON_BACKGROUND = "#DEDEDE";
+  const BUTTON_BACKGROUND_ACTIVE = "#FFFFFF";
+  const BUTTON_BACKGROUND_HOVER = "#59CBE8";
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+          "button_background": BUTTON_BACKGROUND,
+          "button_background_active": BUTTON_BACKGROUND_ACTIVE,
+          "button_background_hover": BUTTON_BACKGROUND_HOVER,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+
+  });
+
+  await extension.startup();
+
+  let toolbarButton = document.querySelector("#home-button");
+  let toolbarButtonIcon = document.getAnonymousElementByAttribute(toolbarButton, "class", "toolbarbutton-icon");
+  let toolbarButtonIconCS = window.getComputedStyle(toolbarButtonIcon);
+
+  Assert.equal(
+    toolbarButtonIconCS.getPropertyValue("background-color"),
+    `rgb(${hexToRGB(BUTTON_BACKGROUND).join(", ")})`,
+    "Toolbar button background is set."
+  );
+
+  InspectorUtils.addPseudoClassLock(toolbarButton, ":hover");
+
+  Assert.equal(
+    toolbarButtonIconCS.getPropertyValue("background-color"),
+    `rgb(${hexToRGB(BUTTON_BACKGROUND_HOVER).join(", ")})`,
+    "Toolbar button hover background is set."
+  );
+
+  InspectorUtils.addPseudoClassLock(toolbarButton, ":active");
+
+  Assert.equal(
+    toolbarButtonIconCS.getPropertyValue("background-color"),
+    `rgb(${hexToRGB(BUTTON_BACKGROUND_ACTIVE).join(", ")})`,
+    "Toolbar button active background is set!"
+  );
+
+  InspectorUtils.clearPseudoClassLocks(toolbarButton);
+
+  await extension.unload();
+});

toolkit/modules/LightweightThemeConsumer.jsm

@@ -29,6 +29,9 @@ const kCSSVarsMap = new Map([
   ["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
   ["--lwt-toolbarbutton-icon-fill", "icon_color"],
   ["--lwt-toolbarbutton-icon-fill-attention", "icon_attention_color"],
+  ["--lwt-toolbarbutton-background", "button_background"],
+  ["--lwt-toolbarbutton-hover-background", "button_background_hover"],
+  ["--lwt-toolbarbutton-active-background", "button_background_active"],
 ]);
 
 this.LightweightThemeConsumer =