Bug 1426686 - Add support for theming the tab loading indicator. r=jaws
authorZhengyi Lian <lianzhen@msu.edu>
Tue, 23 Jan 2018 21:03:13 -0500
changeset 402300 111e574ef42a
parent 402299 1687250b0dd9
child 402301 dd701ae8ff39
push id59079
push userjwein@mozilla.com
push dateFri, 02 Feb 2018 22:45:50 +0000
treeherderautoland@111e574ef42a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1426686
milestone60.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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,13 +9,14 @@ 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]
 [browser_ext_themes_toolbarbutton_colors.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"],