Bug 1426686 - Add support for theming the tab loading indicator. r?jaws
MozReview-Commit-ID: 72F399voah5
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -144,16 +144,17 @@ class Theme {
this.lwtStyles.toolbar_text = cssColor;
break;
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 "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
@@ -84,16 +84,20 @@
"textcolor": {
"$ref": "ThemeColor",
"optional": true
},
"background_tab_text": {
"$ref": "ThemeColor",
"optional": true
},
+ "tab_loading": {
+ "$ref": "ThemeColor",
+ "optional": true
+ },
"tab_text": {
"$ref": "ThemeColor",
"optional": true
},
"toolbar": {
"$ref": "ThemeColor",
"optional": true
},
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -9,12 +9,13 @@ 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_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]
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_tab_loading.js
@@ -0,0 +1,44 @@
+"use strict";
+
+add_task(async function test_support_tab_loading_filling() {
+ const TAB_LOADING_COLOR = "#FF0000";
+ const TAB_TEXT_COLOR = "#9400ff";
+
+ let extension = ExtensionTestUtils.loadExtension({
+ manifest: {
+ "theme": {
+ "images": {
+ "headerURL": "image1.png",
+ },
+ "colors": {
+ "accentcolor": "#000",
+ "toolbar": "#124455",
+ "textcolor": TAB_TEXT_COLOR,
+ "tab_loading": TAB_LOADING_COLOR,
+ },
+ },
+ },
+ files: {
+ "image1.png": BACKGROUND,
+ },
+ });
+
+
+ await extension.startup();
+
+ info("Checking selected tab loading indicator colors");
+
+ let selectedTab = document.querySelector(".tabbrowser-tab[visuallyselected=true]");
+
+ selectedTab.setAttribute("busy", "true");
+ selectedTab.setAttribute("progress", "true");
+
+ let throbber = document.getAnonymousElementByAttribute(selectedTab, "class", "tab-throbber");
+ Assert.equal(window.getComputedStyle(throbber, "::before").fill,
+ `rgb(${hexToRGB(TAB_LOADING_COLOR).join(", ")})`,
+ "Throbber is filled with theme color");
+
+ selectedTab.removeAttribute("busy");
+ selectedTab.removeAttribute("progress");
+ await extension.unload();
+});
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -12,16 +12,17 @@ ChromeUtils.import("resource://gre/modul
ChromeUtils.defineModuleGetter(this, "LightweightThemeImageOptimizer",
"resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
const kCSSVarsMap = new Map([
["--lwt-accent-color-inactive", "accentcolorInactive"],
["--lwt-background-alignment", "backgroundsAlignment"],
["--lwt-background-tiling", "backgroundsTiling"],
+ ["--tab-loading-fill", "tab_loading"],
["--lwt-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"],
["--lwt-toolbar-field-border-color", "toolbar_field_border"],
["--urlbar-separator-color", "toolbar_field_separator"],
["--tabs-border-color", "toolbar_top_separator"],