Bug 1439734 - Allow WebExtension themes to set the tab line color. r=jaws draft
authorTim Nguyen <ntim.bugs@gmail.com>
Sun, 04 Mar 2018 01:25:54 +0000
changeset 762955 3926e545530b87c0fdc4f95145485b15b79bfcb6
parent 762953 f2968c766ed43deb324d3ee3f5bc09d14fed655b
push id101292
push userbmo:ntim.bugs@gmail.com
push dateSun, 04 Mar 2018 01:26:25 +0000
reviewersjaws
bugs1439734
milestone60.0a1
Bug 1439734 - Allow WebExtension themes to set the tab line color. r=jaws MozReview-Commit-ID: LbHGyaWfXze
browser/modules/ThemeVariableMap.jsm
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_line.js
toolkit/components/extensions/test/browser/browser_ext_themes_tab_text.js
--- 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() {