Bug 1439734 - Allow WebExtension themes to set the tab line color. r=jaws
MozReview-Commit-ID: LbHGyaWfXze
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -5,16 +5,17 @@
var EXPORTED_SYMBOLS = ["ThemeVariableMap"];
const ThemeVariableMap = [
["--lwt-accent-color-inactive", "accentcolorInactive"],
["--lwt-background-alignment", "backgroundsAlignment"],
["--lwt-background-tiling", "backgroundsTiling"],
["--tab-loading-fill", "tab_loading", "tabbrowser-tabs"],
["--lwt-tab-text", "tab_text"],
+ ["--tab-line-color", "tab_line", "tabbrowser-tabs"],
["--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"],
["--urlbar-separator-color", "toolbar_field_separator"],
["--tabs-border-color", "toolbar_top_separator", "navigator-toolbox"],
["--lwt-toolbar-vertical-separator", "toolbar_vertical_separator"],
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -145,16 +145,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_line":
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":
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -96,16 +96,20 @@
"tab_loading": {
"$ref": "ThemeColor",
"optional": true
},
"tab_text": {
"$ref": "ThemeColor",
"optional": true
},
+ "tab_line": {
+ "$ref": "ThemeColor",
+ "optional": true
+ },
"toolbar": {
"$ref": "ThemeColor",
"optional": true
},
"toolbar_text": {
"$ref": "ThemeColor",
"optional": true
},
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -9,16 +9,17 @@ support-files =
[browser_ext_themes_dynamic_onUpdated.js]
[browser_ext_themes_dynamic_updates.js]
[browser_ext_themes_getCurrent_differentExt.js]
[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.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_tab_line.js
@@ -0,0 +1,30 @@
+"use strict";
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the color of the tab line are applied properly.
+
+add_task(async function test_support_tab_line() {
+ const TAB_LINE_COLOR = "#9400ff";
+ let extension = ExtensionTestUtils.loadExtension({
+ manifest: {
+ "theme": {
+ "colors": {
+ "accentcolor": ACCENT_COLOR,
+ "textcolor": TEXT_COLOR,
+ "tab_line": TAB_LINE_COLOR,
+ },
+ },
+ },
+ });
+
+ await extension.startup();
+
+ info("Checking selected tab line color");
+ let selectedTab = document.querySelector(".tabbrowser-tab[selected]");
+ let line = document.getAnonymousElementByAttribute(selectedTab, "class", "tab-line");
+ Assert.equal(window.getComputedStyle(line).backgroundColor,
+ `rgb(${hexToRGB(TAB_LINE_COLOR).join(", ")})`,
+ "Tab line should have theme color");
+
+ await extension.unload();
+});
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_tab_text.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_tab_text.js
@@ -1,12 +1,12 @@
"use strict";
// This test checks whether applied WebExtension themes that attempt to change
-// the background color of toolbars are applied properly.
+// the text color of the selected tab are applied properly.
add_task(async function setup() {
await SpecialPowers.pushPrefEnv({
set: [["extensions.webextensions.themes.enabled", true]],
});
});
add_task(async function test_support_tab_text_property_css_color() {