Bug 1387582 - Add toolbar_text color property to theming API. r=dao,mikedeboer

MozReview-Commit-ID: KjKVjFD4axN

--HG--
extra : rebase_source : 8e47b2a3f75366208e45792d6ec34e0a36ac3ecd

browser/themes/linux/browser.css

@@ -58,6 +58,7 @@
 #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;
 }

browser/themes/osx/browser.css

@@ -126,6 +126,7 @@
 #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

browser/themes/shared/tabs.inc.css

@@ -396,6 +396,10 @@
   color: inherit;
 }
 
+.tabbrowser-tab[visuallyselected=true]:-moz-lwtheme {
+  color: var(--toolbar-color, inherit);
+}
+
 .tab-line {
   height: 2px;
 }

browser/themes/windows/browser.css

@@ -87,6 +87,7 @@
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   background-clip: padding-box;
+  color: var(--toolbar-color, inherit);
 }
 
 #toolbar-menubar,

toolkit/components/extensions/ext-theme.js

@@ -110,6 +110,9 @@ class Theme {
         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;

toolkit/components/extensions/schemas/theme.json

@@ -69,6 +69,10 @@
                 "type": "string",
                 "optional": true
               },
+              "toolbar_text": {
+                "type": "string",
+                "optional": true
+              },
               "toolbar_field": {
                 "type": "string",
                 "optional": true

toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js

@@ -11,6 +11,7 @@ add_task(async function setup() {
 
 add_task(async function test_support_toolbar_property() {
   const TOOLBAR_COLOR = "#ff00ff";
+  const TOOLBAR_TEXT_COLOR = "#9400ff";
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
@@ -21,6 +22,7 @@ add_task(async function test_support_toolbar_property() {
           "accentcolor": ACCENT_COLOR,
           "textcolor": TEXT_COLOR,
           "toolbar": TOOLBAR_COLOR,
+          "toolbar_text": TOOLBAR_TEXT_COLOR,
         },
       },
     },
@@ -37,12 +39,19 @@ add_task(async function test_support_toolbar_property() {
     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();
 });

toolkit/modules/LightweightThemeConsumer.jsm

@@ -17,6 +17,7 @@ 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"]
 ]);