Bug 1426686 - Add support for theming the tab loading indicator. r?jaws draft
authorZhengyi Lian <lianzhen@msu.edu>
Tue, 23 Jan 2018 21:03:13 -0500
changeset 750840 bbfd3e7b7e50afe7060ade3f2404ad22097ff2f3
parent 750839 fea9e610ec9d550f2aad41d0d83cf02f485460c4
child 753656 d86dca1d5f956c2b81d559520985dbb9d31c5bb6
push id97760
push userbmo:lianzhen@msu.edu
push dateFri, 02 Feb 2018 22:41:03 +0000
reviewersjaws
bugs1426686
milestone60.0a1
Bug 1426686 - Add support for theming the tab loading indicator. r?jaws MozReview-Commit-ID: 72F399voah5
toolkit/components/extensions/ext-theme.js
toolkit/components/extensions/schemas/theme.json
toolkit/components/extensions/test/browser/browser.ini
toolkit/components/extensions/test/browser/browser_ext_themes_tab_loading.js
toolkit/modules/LightweightThemeConsumer.jsm
--- 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"],