Bug 1387582 - Add toolbar_text color property to theming API. r=mikedeboer draft
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 30 Aug 2017 20:23:58 +0700
changeset 655905 119e62e457370c55b04c609fc5a0b158a6f76bfe
parent 655862 6958d7731394fe0ecc064d9b7cfb2b7d68064cc0
child 728940 e287ae846456c5f6505eec390c6c4d9ef2b51c6b
push id76988
push userbmo:ntim.bugs@gmail.com
push dateWed, 30 Aug 2017 13:27:37 +0000
reviewersmikedeboer
bugs1387582
milestone57.0a1
Bug 1387582 - Add toolbar_text color property to theming API. r=mikedeboer MozReview-Commit-ID: KjKVjFD4axN
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/tabs.inc.css
browser/themes/windows/browser.css
toolkit/components/extensions/ext-theme.js
toolkit/components/extensions/schemas/theme.json
toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js
toolkit/modules/LightweightThemeConsumer.jsm
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -53,16 +53,17 @@
   -moz-appearance: none;
   background-color: transparent;
   border-top: none;
 }
 
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
+  color: var(--toolbar-color, inherit);
   -moz-appearance: none;
   border-style: none;
 }
 
 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
   border-top: 1px solid var(--tabs-border) !important;
   background-clip: padding-box;
   /* Position the toolbar above the bottom of background tabs */
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -108,16 +108,17 @@
 
 #main-window[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
   border-top: 1px solid rgba(0,0,0,0.65);
 }
 
 #navigator-toolbox > toolbar:not(#TabsToolbar) {
   -moz-appearance: none;
   background: var(--toolbar-bgcolor);
+  color: var(--toolbar-color, inherit);
 }
 
 /* Draw the bottom border of the tabs toolbar when it's not using
    -moz-appearance: toolbar. */
 #main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
 #main-window:not([tabsintitlebar]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
 #TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-lwtheme {
   border-top: 1px solid var(--tabs-border);
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -380,16 +380,20 @@
   transition: opacity 150ms ease;
 }
 
 .tabbrowser-tab:not([visuallyselected=true]),
 .tabbrowser-tab:-moz-lwtheme {
   color: inherit;
 }
 
+.tabbrowser-tab[visuallyselected=true]:-moz-lwtheme {
+  color: var(--toolbar-color, inherit);
+}
+
 .tab-line {
   height: 2px;
 }
 
 /* Selected tab */
 
 .tab-background {
   border: 1px none transparent;
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -75,16 +75,17 @@
 #navigator-toolbox > toolbar {
   -moz-appearance: none;
 }
 
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   background-clip: padding-box;
+  color: var(--toolbar-color, inherit);
 }
 
 #toolbar-menubar,
 #TabsToolbar {
   color: var(--titlebar-text-color);
 }
 
 @media (-moz-windows-compositor: 0),
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -103,16 +103,19 @@ class Theme {
           break;
         case "textcolor":
         case "tab_text":
           this.lwtStyles.textcolor = cssColor;
           break;
         case "toolbar":
           this.lwtStyles.toolbarColor = cssColor;
           break;
+        case "toolbar_text":
+          this.lwtStyles.toolbar_text = cssColor;
+          break;
         case "toolbar_field":
           this.lwtStyles.toolbar_field = cssColor;
           break;
         case "toolbar_field_text":
           this.lwtStyles.toolbar_field_text = cssColor;
           break;
       }
     }
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -64,16 +64,20 @@
               "textcolor": {
                 "type": "string",
                 "optional": true
               },
               "toolbar": {
                 "type": "string",
                 "optional": true
               },
+              "toolbar_text": {
+                "type": "string",
+                "optional": true
+              },
               "toolbar_field": {
                 "type": "string",
                 "optional": true
               },
               "toolbar_field_text": {
                 "type": "string",
                 "optional": true
               }
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js
@@ -6,43 +6,52 @@
 add_task(async function setup() {
   await SpecialPowers.pushPrefEnv({
     set: [["extensions.webextensions.themes.enabled", true]],
   });
 });
 
 add_task(async function test_support_toolbar_property() {
   const TOOLBAR_COLOR = "#ff00ff";
+  const TOOLBAR_TEXT_COLOR = "#9400ff";
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "images": {
           "headerURL": "image1.png",
         },
         "colors": {
           "accentcolor": ACCENT_COLOR,
           "textcolor": TEXT_COLOR,
           "toolbar": TOOLBAR_COLOR,
+          "toolbar_text": TOOLBAR_TEXT_COLOR,
         },
       },
     },
     files: {
       "image1.png": BACKGROUND,
     },
   });
 
   await extension.startup();
 
   let toolbox = document.querySelector("#navigator-toolbox");
   let toolbars = [...toolbox.querySelectorAll("toolbar:not(#TabsToolbar)")].filter(toolbar => {
     let bounds = toolbar.getBoundingClientRect();
     return bounds.width > 0 && bounds.height > 0;
   });
 
-  info(`Checking toolbar background colors for ${toolbars.length} toolbars.`);
+  info(`Checking toolbar colors for ${toolbars.length} toolbars.`);
   for (let toolbar of toolbars) {
     info(`Testing ${toolbar.id}`);
     Assert.equal(window.getComputedStyle(toolbar).backgroundColor,
-      "rgb(" + hexToRGB(TOOLBAR_COLOR).join(", ") + ")", "Toolbar color should be set.");
+      "rgb(" + hexToRGB(TOOLBAR_COLOR).join(", ") + ")", "Toolbar background color should be set.");
+    Assert.equal(window.getComputedStyle(toolbar).color,
+      "rgb(" + hexToRGB(TOOLBAR_TEXT_COLOR).join(", ") + ")", "Toolbar text color should be set.");
   }
 
+  info("Checking selected tab colors");
+  let selectedTab = document.querySelector(".tabbrowser-tab[selected]");
+  Assert.equal(window.getComputedStyle(selectedTab).color,
+    "rgb(" + hexToRGB(TOOLBAR_TEXT_COLOR).join(", ") + ")", "Selected tab text color should be set.");
+
   await extension.unload();
 });
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -12,16 +12,17 @@ Cu.import("resource://gre/modules/AppCon
 
 XPCOMUtils.defineLazyModuleGetter(this, "LightweightThemeImageOptimizer",
   "resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
 
 const kCSSVarsMap = new Map([
   ["--lwt-background-alignment", "backgroundsAlignment"],
   ["--lwt-background-tiling", "backgroundsTiling"],
   ["--toolbar-bgcolor", "toolbarColor"],
+  ["--toolbar-color", "toolbar_text"],
   ["--url-and-searchbar-background-color", "toolbar_field"],
   ["--url-and-searchbar-color", "toolbar_field_text"]
 ]);
 
 this.LightweightThemeConsumer =
  function LightweightThemeConsumer(aDocument) {
   this._doc = aDocument;
   this._win = aDocument.defaultView;