Bug 1431189 - Add google chrome toolbar button color properties: r=jaws
authorVivek Dhingra <vivek3zero@gmail.com>
Fri, 02 Feb 2018 16:24:26 -0500
changeset 402342 749425381bbad8f39af8f7c8053bd23600d09b2a
parent 402341 425e6fe3bc6641c60e8684d74897764b46490b35
child 402343 9aced56a44055a4ec4bd32379cddd6e2cf563c5d
push id33379
push usercsabou@mozilla.com
push dateSat, 03 Feb 2018 21:51:28 +0000
treeherdermozilla-central@4813b08454ac [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1431189
milestone60.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
browser/themes/shared/toolbarbuttons.inc.css
toolkit/components/extensions/ext-theme.js
toolkit/components/extensions/schemas/theme.json
toolkit/components/extensions/test/browser/browser.ini
toolkit/components/extensions/test/browser/browser_ext_themes_toolbarbutton_colors.js
toolkit/modules/LightweightThemeConsumer.jsm
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -6,18 +6,18 @@
   --toolbarbutton-hover-transition-duration: 150ms;
 
   --toolbarbutton-outer-padding: 2px;
   --toolbarbutton-inner-padding: 6px;
 
   /* 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);
   --backbutton-active-background: var(--toolbarbutton-active-background);
   --backbutton-border-color: hsla(240,5%,5%,.3);
 
   /* This default value of --toolbarbutton-height is defined to prevent
      CSS errors for an invalid variable. The value should not get used,
@@ -32,24 +32,24 @@
 :root[uidensity=touch] {
   --toolbarbutton-inner-padding: 9px;
 }
 
 /* We use :-moz-lwtheme-* for toolbarbuttons that aren't inside a toolbar, and
    [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);
   --backbutton-active-background: hsla(0,0%,100%,.4);
 }
 
 /* ::::: primary toolbar buttons ::::: */
 
@@ -163,16 +163,28 @@ toolbar .toolbaritem-combined-buttons:no
   background-size: 1px 16px;
   opacity: .2;
 }
 
 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,
 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]),
 toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
 toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
 toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack {
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -153,16 +153,19 @@ class Theme {
         case "tab_text":
         case "toolbar_field":
         case "toolbar_field_text":
         case "toolbar_field_border":
         case "toolbar_field_separator":
         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;
       }
     }
   }
 
   /**
    * Helper method for loading images found in the extension's manifest.
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -139,16 +139,28 @@
               },
               "icons": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "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" }
           },
           "icons": {
             "type": "object",
             "optional": true,
             "properties": {
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -14,8 +14,9 @@ support-files =
 [browser_ext_themes_persistence.js]
 [browser_ext_themes_separators.js]
 [browser_ext_themes_static_onUpdated.js]
 [browser_ext_themes_tab_loading.js]
 [browser_ext_themes_tab_text.js]
 [browser_ext_themes_toolbar_fields.js]
 [browser_ext_themes_toolbars.js]
 [browser_ext_themes_toolbarbutton_icons.js]
+[browser_ext_themes_toolbarbutton_colors.js]
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbarbutton_colors.js
@@ -0,0 +1,65 @@
+"use strict";
+
+Cu.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();
+});
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -25,16 +25,19 @@ const kCSSVarsMap = new Map([
   ["--url-and-searchbar-color", "toolbar_field_text"],
   ["--lwt-toolbar-field-border-color", "toolbar_field_border"],
   ["--urlbar-separator-color", "toolbar_field_separator"],
   ["--tabs-border-color", "toolbar_top_separator"],
   ["--lwt-toolbar-vertical-separator", "toolbar_vertical_separator"],
   ["--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 =
  function LightweightThemeConsumer(aDocument) {
   this._doc = aDocument;
   this._win = aDocument.defaultView;
 
   let screen = this._win.screen;