Bug 1431189 - Add google chrome toolbar button color properties: r?jaws
- color.button_background
- color.button_background_hover
- color.button_background_active
MozReview-Commit-ID: JfpqLGMIFvT
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -6,50 +6,50 @@
--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,
as a more specific value should be set when the value will be used. */
--toolbarbutton-height: 0;
-}
+ }
:root[uidensity=compact] {
--toolbarbutton-outer-padding: 1px;
}
: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
@@ -144,16 +144,25 @@ class Theme {
case "toolbar_field":
case "toolbar_field_text":
case "toolbar_field_border":
case "toolbar_top_separator":
case "toolbar_bottom_separator":
case "toolbar_vertical_separator":
this.lwtStyles[color] = cssColor;
break;
+ case "button_background":
+ this.lwtStyles.button_background = cssColor;
+ break;
+ case "button_background_hover":
+ this.lwtStyles.button_background_hover = cssColor;
+ break;
+ case "button_background_active":
+ this.lwtStyles.button_background_active = cssColor;
+ break;
}
}
}
/**
* Helper method for loading images found in the extension's manifest.
*
* @param {Object} images Dictionary mapping image properties to values.
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -119,16 +119,28 @@
},
"toolbar_bottom_separator": {
"$ref": "ThemeColor",
"optional": true
},
"toolbar_vertical_separator": {
"$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
@@ -12,8 +12,9 @@ support-files =
[browser_ext_themes_lwtsupport.js]
[browser_ext_themes_multiple_backgrounds.js]
[browser_ext_themes_persistence.js]
[browser_ext_themes_separators.js]
[browser_ext_themes_static_onUpdated.js]
[browser_ext_themes_tab_text.js]
[browser_ext_themes_toolbar_fields.js]
[browser_ext_themes_toolbars.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,63 @@
+"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");
+
+ Assert.equal(
+ window.getComputedStyle(toolbarButtonIcon).getPropertyValue("background-color"),
+ 'rgb(${hexToRgb(BUTTON_BACKGROUND).join(", ")})',
+ "Toolbar button background is set."
+ );
+
+ InspectorUtils.addPseudoClassLock(toolbarButton, ":hover");
+
+ Assert.equal(
+ window.getComputedStyle(toolbarButtonIcon).getPropertyValue("background-color"),
+ 'rgb(${hexToRgb(BUTTON_BACKGROUND_HOVER).join(", ")})',
+ "Toolbar button hover background is set."
+ );
+
+ InspectorUtils.addPseudoClassLock(toolbarButton, ":active");
+
+ Assert.equal(
+ window.getComputedStyle(toolbarButtonIcon).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
@@ -20,16 +20,19 @@ const kCSSVarsMap = new Map([
["--toolbar-bgcolor", "toolbarColor"],
["--toolbar-color", "toolbar_text"],
["--url-and-searchbar-background-color", "toolbar_field"],
["--url-and-searchbar-color", "toolbar_field_text"],
["--lwt-toolbar-field-border-color", "toolbar_field_border"],
["--tabs-border-color", "toolbar_top_separator"],
["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
["--urlbar-separator-color", "toolbar_vertical_separator"],
+ ["--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;