Bug 1418603 - Allow setting the urlbar and the searchbar border color. r=jaws
MozReview-Commit-ID: HcALXHaYIV1
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -40,16 +40,21 @@
}
#urlbar:-moz-lwtheme,
#navigator-toolbox .searchbar-textbox:-moz-lwtheme {
background-color: var(--url-and-searchbar-background-color, hsla(0,0%,100%,.8));
color: var(--url-and-searchbar-color, black);
}
+#urlbar:not([focused="true"]):-moz-lwtheme,
+#navigator-toolbox .searchbar-textbox:not([focused="true"]):-moz-lwtheme {
+ border-color: var(--url-and-searchbar-border-color, hsla(240,5%,5%,.25));
+}
+
#urlbar:-moz-lwtheme:hover,
#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);
}
:root[uidensity=compact] #urlbar,
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -138,16 +138,17 @@ class Theme {
break;
case "toolbar_text":
case "bookmark_text":
this.lwtStyles.toolbar_text = cssColor;
break;
case "tab_text":
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;
}
}
}
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -104,16 +104,20 @@
"toolbar_field": {
"$ref": "ThemeColor",
"optional": true
},
"toolbar_field_text": {
"$ref": "ThemeColor",
"optional": true
},
+ "toolbar_field_border": {
+ "$ref": "ThemeColor",
+ "optional": true
+ },
"toolbar_top_separator": {
"$ref": "ThemeColor",
"optional": true
},
"toolbar_bottom_separator": {
"$ref": "ThemeColor",
"optional": true
},
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
@@ -5,30 +5,43 @@
add_task(async function setup() {
await SpecialPowers.pushPrefEnv({set: [
["extensions.webextensions.themes.enabled", true],
["browser.search.widget.inNavBar", true],
]});
});
+function testBorderColor(element, expected) {
+ Assert.equal(window.getComputedStyle(element).borderLeftColor,
+ "rgb(" + hexToRGB(expected).join(", ") + ")", "Field left border color should be set.");
+ Assert.equal(window.getComputedStyle(element).borderRightColor,
+ "rgb(" + hexToRGB(expected).join(", ") + ")", "Field right border color should be set.");
+ Assert.equal(window.getComputedStyle(element).borderTopColor,
+ "rgb(" + hexToRGB(expected).join(", ") + ")", "Field top border color should be set.");
+ Assert.equal(window.getComputedStyle(element).borderBottomColor,
+ "rgb(" + hexToRGB(expected).join(", ") + ")", "Field bottom border color should be set.");
+}
+
add_task(async function test_support_toolbar_field_properties() {
const TOOLBAR_FIELD_BACKGROUND = "#ff00ff";
const TOOLBAR_FIELD_COLOR = "#00ff00";
+ const TOOLBAR_FIELD_BORDER = "#aaaaff";
let extension = ExtensionTestUtils.loadExtension({
manifest: {
"theme": {
"images": {
"headerURL": "image1.png",
},
"colors": {
"accentcolor": ACCENT_COLOR,
"textcolor": TEXT_COLOR,
"toolbar_field": TOOLBAR_FIELD_BACKGROUND,
"toolbar_field_text": TOOLBAR_FIELD_COLOR,
+ "toolbar_field_border": TOOLBAR_FIELD_BORDER,
},
},
},
files: {
"image1.png": BACKGROUND,
},
});
@@ -51,15 +64,16 @@ add_task(async function test_support_too
info(`Checking toolbar background colors and colors for ${fields.length} toolbar fields.`);
for (let field of fields) {
info(`Testing ${field.id || field.className}`);
Assert.equal(window.getComputedStyle(field).backgroundColor,
"rgb(" + hexToRGB(TOOLBAR_FIELD_BACKGROUND).join(", ") + ")", "Field background should be set.");
Assert.equal(window.getComputedStyle(field).color,
"rgb(" + hexToRGB(TOOLBAR_FIELD_COLOR).join(", ") + ")", "Field color should be set.");
+ testBorderColor(field, TOOLBAR_FIELD_BORDER);
}
// Restore the `remotecontrol` attribute at the end of the test.
document.documentElement.setAttribute("remotecontrol", "true");
await extension.unload();
});
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -16,16 +16,17 @@ XPCOMUtils.defineLazyModuleGetter(this,
const kCSSVarsMap = new Map([
["--lwt-background-alignment", "backgroundsAlignment"],
["--lwt-background-tiling", "backgroundsTiling"],
["--theme-tab-text", "tab_text"],
["--toolbar-bgcolor", "toolbarColor"],
["--toolbar-color", "toolbar_text"],
["--url-and-searchbar-background-color", "toolbar_field"],
["--url-and-searchbar-color", "toolbar_field_text"],
+ ["--url-and-searchbar-border-color", "toolbar_field_border"],
["--tabs-border-color", "toolbar_top_separator"],
["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
["--urlbar-separator-color", "toolbar_vertical_separator"],
]);
this.LightweightThemeConsumer =
function LightweightThemeConsumer(aDocument) {
this._doc = aDocument;