Bug 1434476 - Allow changing the background color of the selected tab. r?jaws
***
MozReview-Commit-ID: 3GpBSWepNe3
***
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -520,23 +520,24 @@ tabbrowser {
/*
* LightweightThemeConsumer will set the current lightweight theme's header
* image to the lwt-header-image variable, used in each of the following rulesets.
*/
/* Lightweight theme on tabs */
#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
- background-attachment: scroll, fixed;
+ background-attachment: scroll, scroll, fixed;
background-color: transparent;
- background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
+ background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)),
+ linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
var(--lwt-header-image);
- background-position: 0 0, right top;
- background-repeat: repeat-x, no-repeat;
- background-size: auto 100%, auto auto;
+ background-position: 0 0, 0 0, right top;
+ background-repeat: repeat-x, repeat-x, no-repeat;
+ background-size: auto 100%, auto 100%, auto auto;
}
/* Tab hover */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
background-color: rgba(0,0,0,.1);
}
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -146,16 +146,17 @@ class Theme {
case "icons":
this.lwtStyles.icon_color = cssColor;
break;
case "icons_attention":
this.lwtStyles.icon_attention_color = cssColor;
break;
case "tab_loading":
case "tab_text":
+ case "tab_selected":
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":
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -64,16 +64,20 @@
}
},
"additionalProperties": { "$ref": "UnrecognizedProperty" }
},
"colors": {
"type": "object",
"optional": true,
"properties": {
+ "tab_selected": {
+ "$ref": "ThemeColor",
+ "optional": true
+ },
"accentcolor": {
"$ref": "ThemeColor",
"optional": true
},
"frame": {
"$ref": "ThemeColor",
"optional": true
},
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -15,8 +15,9 @@ support-files =
[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]
+[browser_ext_themes_tab_selected.js]
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_tab_selected.js
@@ -0,0 +1,48 @@
+"use strict";
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the background color of selected tab are applied correctly.
+
+add_task(async function test_tab_background_color_property() {
+ const TAB_BACKGROUND_COLOR = "#9400ff";
+ let extension = ExtensionTestUtils.loadExtension({
+ manifest: {
+ "theme": {
+ "images": {
+ "headerURL": "image1.png",
+ },
+ "colors": {
+ "accentcolor": ACCENT_COLOR,
+ "textcolor": TEXT_COLOR,
+ "tab_selected": TAB_BACKGROUND_COLOR,
+ },
+ },
+ },
+ files: {
+ "image1.png": BACKGROUND,
+ },
+ });
+
+ await extension.startup();
+
+ info("Checking selected tab color");
+
+ let openTab = document.querySelector(".tabbrowser-tab[visuallyselected=true]");
+ let openTabBackground = document.getAnonymousElementByAttribute(openTab, "class", "tab-background");
+
+ let selectedTab = await BrowserTestUtils.openNewForegroundTab(gBrowser, "about:blank");
+ let selectedTabBackground = document.getAnonymousElementByAttribute(selectedTab, "class", "tab-background");
+
+ let openTabGradient = window.getComputedStyle(openTabBackground).getPropertyValue("background-image");
+ let selectedTabGradient = window.getComputedStyle(selectedTabBackground).getPropertyValue("background-image");
+
+ let rgbRegex = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/g;
+ let selectedTabColors = selectedTabGradient.match(rgbRegex);
+
+ Assert.equal(selectedTabColors[0], "rgb(" + hexToRGB(TAB_BACKGROUND_COLOR).join(", ") + ")",
+ "Selected tab background color should be set.");
+ Assert.equal(openTabGradient, "none");
+
+ gBrowser.removeTab(selectedTab);
+ await extension.unload();
+});
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -28,16 +28,17 @@ const kCSSVarsMap = new Map([
["--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"],
+ ["--lwt-selected-tab-background-color", "tab_selected"]
]);
this.LightweightThemeConsumer =
function LightweightThemeConsumer(aDocument) {
this._doc = aDocument;
this._win = aDocument.defaultView;
let screen = this._win.screen;