Bug 1423757 - Allow theming toolbar fields focused state r?ntim,jaws
MozReview-Commit-ID: 9XrN64FTMA4
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -20,9 +20,12 @@ const ThemeVariableMap = [
["--tabs-border-color", "toolbar_top_separator", "navigator-toolbox"],
["--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-hover-background", "button_background_hover"],
["--lwt-toolbarbutton-active-background", "button_background_active"],
["--lwt-selected-tab-background-color", "tab_selected"],
+ ["--lwt-toolbar-field-focus", "toolbar_field_focus"],
+ ["--lwt-toolbar-field-focus-color", "toolbar_field_text_focus"],
+ ["--lwt-toolbar-field-focus-border-color", "toolbar_field_border_focus"],
];
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -54,20 +54,25 @@
}
#urlbar:not([focused="true"]):-moz-lwtheme:hover,
#navigator-toolbox .searchbar-textbox:not([focused="true"]):-moz-lwtheme:hover {
border-color: var(--lwt-toolbar-field-border-color, @fieldHoverBorderColor@);
}
#urlbar:-moz-lwtheme:hover,
+#navigator-toolbox .searchbar-textbox:-moz-lwtheme:hover {
+ background-color: var(--url-and-searchbar-background-color, white);
+}
+
#urlbar:-moz-lwtheme[focused="true"],
-#navigator-toolbox .searchbar-textbox:-moz-lwtheme:hover,
#navigator-toolbox .searchbar-textbox:-moz-lwtheme[focused="true"] {
- background-color: var(--url-and-searchbar-background-color, white);
+ background-color: var(--lwt-toolbar-field-focus, var(--url-and-searchbar-background-color, white));
+ color: var(--lwt-toolbar-field-focus-color, var(--url-and-searchbar-color, black));
+ border-color: var(--lwt-toolbar-field-focus-border-color, var(--lwt-toolbar-field-border-color, @fieldBorderColor@));
}
:root[uidensity=compact] #urlbar,
:root[uidensity=compact] .searchbar-textbox {
min-height: 26px;
margin-top: 3px;
margin-bottom: 3px;
}
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -159,16 +159,19 @@ class Theme {
case "toolbar_top_separator":
case "toolbar_bottom_separator":
case "toolbar_vertical_separator":
case "button_background_hover":
case "button_background_active":
case "popup":
case "popup_text":
case "popup_border":
+ case "toolbar_field_focus":
+ case "toolbar_field_text_focus":
+ case "toolbar_field_border_focus":
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
@@ -167,16 +167,28 @@
},
"popup_text": {
"$ref": "ThemeColor",
"optional": true
},
"popup_border": {
"$ref": "ThemeColor",
"optional": true
+ },
+ "toolbar_field_focus": {
+ "$ref": "ThemeColor",
+ "optional": true
+ },
+ "toolbar_field_text_focus": {
+ "$ref": "ThemeColor",
+ "optional": true
+ },
+ "toolbar_field_border_focus": {
+ "$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,14 +12,15 @@ 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_line.js]
[browser_ext_themes_tab_loading.js]
[browser_ext_themes_tab_text.js]
+[browser_ext_themes_toolbar_fields_focus.js]
[browser_ext_themes_toolbar_fields.js]
[browser_ext_themes_toolbars.js]
[browser_ext_themes_toolbarbutton_icons.js]
[browser_ext_themes_toolbarbutton_colors.js]
[browser_ext_themes_arrowpanels.js]
[browser_ext_themes_tab_selected.js]
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields_focus.js
@@ -0,0 +1,55 @@
+"use strict";
+
+add_task(async function test_toolbar_field_hover() {
+ const TOOLBAR_FIELD_BACKGROUND = "#FF00FF";
+ const TOOLBAR_FIELD_COLOR = "#00FF00";
+ const TOOLBAR_FOCUS_BACKGROUND = "#FF0000";
+ const TOOLBAR_FOCUS_TEXT = "#9400FF";
+ const TOOLBAR_FOCUS_BORDER = "#FFFFFF";
+
+ let extension = ExtensionTestUtils.loadExtension({
+ manifest: {
+ "theme": {
+ "colors": {
+ "accentcolor": "#FF0000",
+ "textcolor": "#ffffff",
+ "toolbar_field": TOOLBAR_FIELD_BACKGROUND,
+ "toolbar_field_text": TOOLBAR_FIELD_COLOR,
+ "toolbar_field_focus": TOOLBAR_FOCUS_BACKGROUND,
+ "toolbar_field_text_focus": TOOLBAR_FOCUS_TEXT,
+ "toolbar_field_border_focus": TOOLBAR_FOCUS_BORDER,
+ },
+ },
+ },
+ });
+
+ await extension.startup();
+
+ // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
+ document.documentElement.removeAttribute("remotecontrol");
+ registerCleanupFunction(() => {
+ document.documentElement.setAttribute("remotecontrol", "true");
+ });
+ info("Checking toolbar field's focus color");
+
+ let urlBar = document.getElementById("urlbar");
+ urlBar.setAttribute("focused", "true");
+ Assert.equal(window.getComputedStyle(urlBar).backgroundColor,
+ `rgb(${hexToRGB(TOOLBAR_FOCUS_BACKGROUND).join(", ")})`,
+ "Background Color is changed");
+
+ Assert.equal(window.getComputedStyle(urlBar).color,
+ `rgb(${hexToRGB(TOOLBAR_FOCUS_TEXT).join(", ")})`,
+ "Text Color is changed");
+ testBorderColor(urlBar, TOOLBAR_FOCUS_BORDER);
+
+ urlBar.removeAttribute("focused");
+
+ Assert.equal(window.getComputedStyle(urlBar).backgroundColor,
+ `rgb(${hexToRGB(TOOLBAR_FIELD_BACKGROUND).join(", ")})`,
+ "Background Color is set back to initial");
+ Assert.equal(window.getComputedStyle(urlBar).color,
+ `rgb(${hexToRGB(TOOLBAR_FIELD_COLOR).join(", ")})`,
+ "Text Color is set back to initial");
+ await extension.unload();
+});