Bug 1387582 - Add toolbar_text color property to theming API. r=mikedeboer
MozReview-Commit-ID: KjKVjFD4axN
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -53,16 +53,17 @@
-moz-appearance: none;
background-color: transparent;
border-top: none;
}
#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
background-color: var(--toolbar-bgcolor);
background-image: var(--toolbar-bgimage);
+ color: var(--toolbar-color, inherit);
-moz-appearance: none;
border-style: none;
}
#TabsToolbar:not([collapsed="true"]) + #nav-bar {
border-top: 1px solid var(--tabs-border) !important;
background-clip: padding-box;
/* Position the toolbar above the bottom of background tabs */
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -108,16 +108,17 @@
#main-window[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
border-top: 1px solid rgba(0,0,0,0.65);
}
#navigator-toolbox > toolbar:not(#TabsToolbar) {
-moz-appearance: none;
background: var(--toolbar-bgcolor);
+ color: var(--toolbar-color, inherit);
}
/* Draw the bottom border of the tabs toolbar when it's not using
-moz-appearance: toolbar. */
#main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
#main-window:not([tabsintitlebar]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
#TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-lwtheme {
border-top: 1px solid var(--tabs-border);
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -380,16 +380,20 @@
transition: opacity 150ms ease;
}
.tabbrowser-tab:not([visuallyselected=true]),
.tabbrowser-tab:-moz-lwtheme {
color: inherit;
}
+.tabbrowser-tab[visuallyselected=true]:-moz-lwtheme {
+ color: var(--toolbar-color, inherit);
+}
+
.tab-line {
height: 2px;
}
/* Selected tab */
.tab-background {
border: 1px none transparent;
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -75,16 +75,17 @@
#navigator-toolbox > toolbar {
-moz-appearance: none;
}
#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
background-color: var(--toolbar-bgcolor);
background-image: var(--toolbar-bgimage);
background-clip: padding-box;
+ color: var(--toolbar-color, inherit);
}
#toolbar-menubar,
#TabsToolbar {
color: var(--titlebar-text-color);
}
@media (-moz-windows-compositor: 0),
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -103,16 +103,19 @@ class Theme {
break;
case "textcolor":
case "tab_text":
this.lwtStyles.textcolor = cssColor;
break;
case "toolbar":
this.lwtStyles.toolbarColor = cssColor;
break;
+ case "toolbar_text":
+ this.lwtStyles.toolbar_text = cssColor;
+ break;
case "toolbar_field":
this.lwtStyles.toolbar_field = cssColor;
break;
case "toolbar_field_text":
this.lwtStyles.toolbar_field_text = cssColor;
break;
}
}
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -64,16 +64,20 @@
"textcolor": {
"type": "string",
"optional": true
},
"toolbar": {
"type": "string",
"optional": true
},
+ "toolbar_text": {
+ "type": "string",
+ "optional": true
+ },
"toolbar_field": {
"type": "string",
"optional": true
},
"toolbar_field_text": {
"type": "string",
"optional": true
}
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js
@@ -6,43 +6,52 @@
add_task(async function setup() {
await SpecialPowers.pushPrefEnv({
set: [["extensions.webextensions.themes.enabled", true]],
});
});
add_task(async function test_support_toolbar_property() {
const TOOLBAR_COLOR = "#ff00ff";
+ const TOOLBAR_TEXT_COLOR = "#9400ff";
let extension = ExtensionTestUtils.loadExtension({
manifest: {
"theme": {
"images": {
"headerURL": "image1.png",
},
"colors": {
"accentcolor": ACCENT_COLOR,
"textcolor": TEXT_COLOR,
"toolbar": TOOLBAR_COLOR,
+ "toolbar_text": TOOLBAR_TEXT_COLOR,
},
},
},
files: {
"image1.png": BACKGROUND,
},
});
await extension.startup();
let toolbox = document.querySelector("#navigator-toolbox");
let toolbars = [...toolbox.querySelectorAll("toolbar:not(#TabsToolbar)")].filter(toolbar => {
let bounds = toolbar.getBoundingClientRect();
return bounds.width > 0 && bounds.height > 0;
});
- info(`Checking toolbar background colors for ${toolbars.length} toolbars.`);
+ info(`Checking toolbar colors for ${toolbars.length} toolbars.`);
for (let toolbar of toolbars) {
info(`Testing ${toolbar.id}`);
Assert.equal(window.getComputedStyle(toolbar).backgroundColor,
- "rgb(" + hexToRGB(TOOLBAR_COLOR).join(", ") + ")", "Toolbar color should be set.");
+ "rgb(" + hexToRGB(TOOLBAR_COLOR).join(", ") + ")", "Toolbar background color should be set.");
+ Assert.equal(window.getComputedStyle(toolbar).color,
+ "rgb(" + hexToRGB(TOOLBAR_TEXT_COLOR).join(", ") + ")", "Toolbar text color should be set.");
}
+ info("Checking selected tab colors");
+ let selectedTab = document.querySelector(".tabbrowser-tab[selected]");
+ Assert.equal(window.getComputedStyle(selectedTab).color,
+ "rgb(" + hexToRGB(TOOLBAR_TEXT_COLOR).join(", ") + ")", "Selected tab text color should be set.");
+
await extension.unload();
});
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -12,16 +12,17 @@ Cu.import("resource://gre/modules/AppCon
XPCOMUtils.defineLazyModuleGetter(this, "LightweightThemeImageOptimizer",
"resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
const kCSSVarsMap = new Map([
["--lwt-background-alignment", "backgroundsAlignment"],
["--lwt-background-tiling", "backgroundsTiling"],
["--toolbar-bgcolor", "toolbarColor"],
+ ["--toolbar-color", "toolbar_text"],
["--url-and-searchbar-background-color", "toolbar_field"],
["--url-and-searchbar-color", "toolbar_field_text"]
]);
this.LightweightThemeConsumer =
function LightweightThemeConsumer(aDocument) {
this._doc = aDocument;
this._win = aDocument.defaultView;