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 402288 111e574ef42a2b0fc4664d1606acb13112f4197c
parent 402287 1687250b0dd9df82d5710e317d4bf488270da993
child 402289 dd701ae8ff399109ffb3c714f7b93e7c4ff48ce3
push id33376
push usernerli@mozilla.com
push dateSat, 03 Feb 2018 09:51:22 +0000
treeherdermozilla-central@6aa43711919b [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"],