Bug 1415872 - Implement colors.tab_text and colors.background_tab_text. r=jaws
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 15 Nov 2017 17:34:12 +0000
changeset 436569 419c69148ec9f2285af274c352af0315ab235af3
parent 436568 ac4c3c628abfabf00d6f839877eab8c2843051ca
child 436570 5ccd0ffe9bc773edd8745a2aefb7ca85c93e0c74
push id117
push userfmarier@mozilla.com
push dateTue, 28 Nov 2017 20:17:16 +0000
reviewersjaws
bugs1415872
milestone59.0a1
Bug 1415872 - Implement colors.tab_text and colors.background_tab_text. r=jaws MozReview-Commit-ID: Gp5CHqmOi6A
browser/components/extensions/test/browser/browser_ext_themes_icons.js
browser/themes/shared/tabs.inc.css
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_chromeparity.js
toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js
toolkit/components/extensions/test/browser/browser_ext_themes_tab_text.js
toolkit/components/extensions/test/browser/head.js
toolkit/modules/LightweightThemeConsumer.jsm
--- a/browser/components/extensions/test/browser/browser_ext_themes_icons.js
+++ b/browser/components/extensions/test/browser/browser_ext_themes_icons.js
@@ -67,25 +67,25 @@ function checkButtons(icons, iconInfo, a
       verifyButtonWithoutCustomStyling(button[1],
         `The ${button[1]} should not have its icon customized in the ${area}`);
     }
   }
 }
 
 async function runTestWithIcons(icons) {
   const FRAME_COLOR = [71, 105, 91];
-  const TAB_TEXT_COLOR = [207, 221, 192, .9];
+  const BACKGROUND_TAB_TEXT_COLOR = [207, 221, 192, .9];
   let manifest = {
     "theme": {
       "images": {
         "theme_frame": "fox.svg",
       },
       "colors": {
         "frame": FRAME_COLOR,
-        "tab_text": TAB_TEXT_COLOR,
+        "background_tab_text": BACKGROUND_TAB_TEXT_COLOR,
       },
       "icons": {},
     },
   };
   let files = {
     "fox.svg": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
   };
 
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -458,17 +458,17 @@ tabbrowser {
 }
 
 .tabbrowser-tab:not([visuallyselected=true]),
 .tabbrowser-tab:-moz-lwtheme {
   color: inherit;
 }
 
 .tabbrowser-tab[visuallyselected=true]:-moz-lwtheme {
-  color: var(--toolbar-color, inherit);
+  color: var(--theme-tab-text, var(--toolbar-color, inherit));
 }
 
 .tab-line {
   height: 2px;
 }
 
 /* Selected tab */
 
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -125,26 +125,27 @@ class Theme {
       }
 
       switch (color) {
         case "accentcolor":
         case "frame":
           this.lwtStyles.accentcolor = cssColor;
           break;
         case "textcolor":
-        case "tab_text":
+        case "background_tab_text":
           this.lwtStyles.textcolor = cssColor;
           break;
         case "toolbar":
           this.lwtStyles.toolbarColor = cssColor;
           break;
         case "toolbar_text":
         case "bookmark_text":
           this.lwtStyles.toolbar_text = cssColor;
           break;
+        case "tab_text":
         case "toolbar_field":
         case "toolbar_field_text":
         case "toolbar_top_separator":
         case "toolbar_bottom_separator":
         case "toolbar_vertical_separator":
           this.lwtStyles[color] = cssColor;
           break;
       }
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -49,24 +49,28 @@
               },
               "frame": {
                 "type": "array",
                 "items": {
                   "type": "number"
                 },
                 "optional": true
               },
-              "tab_text": {
+              "textcolor": {
+                "type": "string",
+                "optional": true
+              },
+              "background_tab_text": {
                 "type": "array",
                 "items": {
                   "type": "number"
                 },
                 "optional": true
               },
-              "textcolor": {
+              "tab_text": {
                 "type": "string",
                 "optional": true
               },
               "toolbar": {
                 "type": "string",
                 "optional": true
               },
               "toolbar_text": {
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -8,10 +8,11 @@ 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_text.js]
 [browser_ext_themes_toolbar_fields.js]
 [browser_ext_themes_toolbars.js]
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_chromeparity.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_chromeparity.js
@@ -12,17 +12,17 @@ add_task(async function test_support_the
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "images": {
           "theme_frame": "face.png",
         },
         "colors": {
           "frame": FRAME_COLOR,
-          "tab_text": TAB_TEXT_COLOR,
+          "background_tab_text": TAB_TEXT_COLOR,
         },
       },
     },
     files: {
       "face.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
     },
   });
 
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js
@@ -11,17 +11,17 @@ add_task(async function test_support_bac
     manifest: {
       "theme": {
         "images": {
           "headerURL": "face.png",
           "additional_backgrounds": ["face.png", "face.png", "face.png"],
         },
         "colors": {
           "accentcolor": `rgb(${FRAME_COLOR.join(",")})`,
-          "textcolor": `rgb(${TAB_TEXT_COLOR.join(",")})`,
+          "textcolor": `rgb(${BACKGROUND_TAB_TEXT_COLOR.join(",")})`,
         },
         "properties": {
           "additional_backgrounds_alignment": ["left top", "center top", "right bottom"],
         },
       },
     },
     files: {
       "face.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
@@ -62,17 +62,17 @@ add_task(async function test_support_bac
     manifest: {
       "theme": {
         "images": {
           "theme_frame": "face0.png",
           "additional_backgrounds": ["face1.png", "face2.png", "face3.png"],
         },
         "colors": {
           "frame": FRAME_COLOR,
-          "tab_text": TAB_TEXT_COLOR,
+          "background_tab_text": BACKGROUND_TAB_TEXT_COLOR,
         },
         "properties": {
           "additional_backgrounds_tiling": ["repeat-x", "repeat-y", "repeat"],
         },
       },
     },
     files: {
       "face0.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
@@ -110,17 +110,17 @@ add_task(async function test_additional_
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "images": {
           "theme_frame": "face.png",
         },
         "colors": {
           "frame": FRAME_COLOR,
-          "tab_text": TAB_TEXT_COLOR,
+          "background_tab_text": BACKGROUND_TAB_TEXT_COLOR,
         },
         "properties": {
           "additional_backgrounds_tiling": ["repeat-x", "repeat-y", "repeat"],
         },
       },
     },
     files: {
       "face.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_tab_text.js
@@ -0,0 +1,40 @@
+"use strict";
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the background color of toolbars are applied properly.
+
+add_task(async function setup() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["extensions.webextensions.themes.enabled", true]],
+  });
+});
+
+add_task(async function test_support_toolbar_property() {
+  const TAB_TEXT_COLOR = "#9400ff";
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+          "tab_text": TAB_TEXT_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  info("Checking selected tab colors");
+  let selectedTab = document.querySelector(".tabbrowser-tab[selected]");
+  Assert.equal(window.getComputedStyle(selectedTab).color,
+    "rgb(" + hexToRGB(TAB_TEXT_COLOR).join(", ") + ")", "Selected tab text color should be set.");
+
+  await extension.unload();
+});
--- a/toolkit/components/extensions/test/browser/head.js
+++ b/toolkit/components/extensions/test/browser/head.js
@@ -1,10 +1,10 @@
 /* exported ACCENT_COLOR, BACKGROUND, ENCODED_IMAGE_DATA, FRAME_COLOR, TAB_TEXT_COLOR,
-   TEXT_COLOR, imageBufferFromDataURI, hexToRGB */
+   TEXT_COLOR, BACKGROUND_TAB_TEXT_COLOR, imageBufferFromDataURI, hexToRGB */
 
 "use strict";
 
 const BACKGROUND = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0" +
   "DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
 const ENCODED_IMAGE_DATA = "iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0h" +
   "STQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAdhwAAHYcBj+XxZQAAB5dJREFUSMd" +
   "91vmTlEcZB/Bvd7/vO+/ce83O3gfLDUsC4VgIghBUEo2GM9GCFTaQBEISA1qIEVNQ4aggJDGIgAGTlFUKKcqKQpVHaQyny7FrCMiywp4ze+/Mzs67M/P" +
@@ -29,17 +29,17 @@ const ENCODED_IMAGE_DATA = "iVBORw0KGgoA
   "Q49uz/aXn+iilLKXq/MmlS0e/jFcuX4SmaQAAKSXlnIvVy1aQ6EBMFgRyCznDpfGFwdKqirF2tu5SdIeGrkiP+KS5yb7dHtIKsnI++kP9rS8RQvjmxxe" +
   "jePxD2HHwwP9FdCllurGhUbx14CAbiMc4Y2qVJqwLbo0qfpdLSilILB4Xg0mT6h7vnSWzZn9RoaynobWF3K6rk1NmzMWZ83/+37+V4a1cVg5JACYF45b" +
   "FGVVWOFS2V1HUCjOdBqW0Q9fYb7N9/tcSptnldjpott8rFEXBO+f+NKrWMHL9Wu1nSUAIAaUUa59aAyE43E4X3bD8W6K5K6x1h1snRaMDJDuQf7+vrzf" +
   "eG+mgfrcLHh3C79bx6wttGEqERiH/AjPohWMouv2ZAAAAAElFTkSuQmCC";
 const ACCENT_COLOR = "#a14040";
 const TEXT_COLOR = "#fac96e";
 // For testing aliases of the colors above:
 const FRAME_COLOR = [71, 105, 91];
-const TAB_TEXT_COLOR = [207, 221, 192, .9];
+const BACKGROUND_TAB_TEXT_COLOR = [207, 221, 192, .9];
 
 function hexToRGB(hex) {
   hex = parseInt((hex.indexOf("#") > -1 ? hex.substring(1) : hex), 16);
   return [hex >> 16, (hex & 0x00FF00) >> 8, (hex & 0x0000FF)];
 }
 
 function imageBufferFromDataURI(encodedImageData) {
   let decodedImageData = atob(encodedImageData);
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -11,16 +11,17 @@ Cu.import("resource://gre/modules/Servic
 Cu.import("resource://gre/modules/AppConstants.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "LightweightThemeImageOptimizer",
   "resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
 
 const kCSSVarsMap = new Map([
   ["--lwt-background-alignment", "backgroundsAlignment"],
   ["--lwt-background-tiling", "backgroundsTiling"],
+  ["--theme-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"],
   ["--tabs-border-color", "toolbar_top_separator"],
   ["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
   ["--urlbar-separator-color", "toolbar_vertical_separator"],
 ]);