Bug 1347182 - Add support for setting the background color of all toolbars using a WebExtension theme. r=jaws,mattw

MozReview-Commit-ID: IbTBCjt6oJp

--HG--
extra : rebase_source : 89d8b8322d5e680bf6bef745ba8fcb8082168a1f

browser/base/content/browser.css

@@ -12,6 +12,7 @@
   --lwt-additional-images: none;
   --lwt-background-alignment: right top;
   --lwt-background-tiling: no-repeat;
+  --lwt-toolbar-color: inherit;
 }
 
 :root:-moz-lwtheme {
@@ -25,6 +26,11 @@
   background-repeat: var(--lwt-background-tiling) !important;
 }
 
+#navigator-toolbox > toolbar,
+findbar {
+  background: var(--lwt-toolbar-color) !important;
+}
+
 #main-window:not([chromehidden~="toolbar"]) {
 %ifdef XP_MACOSX
   min-width: 335px;

toolkit/components/extensions/ext-theme.js

@@ -64,6 +64,9 @@ class Theme {
       Services.obs.notifyObservers(null,
         "lightweight-theme-styling-update",
         JSON.stringify(this.lwtStyles));
+    } else {
+      this.logger.warn("Your theme doesn't include one of the following required " +
+        "properties: 'headerURL', 'accentcolor' or 'textcolor'");
     }
   }
 
@@ -94,6 +97,9 @@ class Theme {
         case "tab_text":
           this.lwtStyles.textcolor = cssColor;
           break;
+        case "toolbar":
+          this.lwtStyles.toolbarColor = cssColor;
+          break;
       }
     }
   }

toolkit/components/extensions/schemas/theme.json

@@ -64,6 +64,10 @@
               "textcolor": {
                 "type": "string",
                 "optional": true
+              },
+              "toolbar": {
+                "type": "string",
+                "optional": true
               }
             },
             "additionalProperties": { "$ref": "UnrecognizedProperty" }

toolkit/components/extensions/test/browser/browser.ini

@@ -2,9 +2,10 @@
 support-files =
   head.js
 
+[browser_ext_management_themes.js]
 [browser_ext_themes_chromeparity.js]
 [browser_ext_themes_dynamic_updates.js]
 [browser_ext_themes_lwtsupport.js]
 [browser_ext_themes_multiple_backgrounds.js]
 [browser_ext_themes_persistence.js]
-[browser_ext_management_themes.js]
+[browser_ext_themes_toolbars.js]

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

@@ -0,0 +1,50 @@
+"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 TOOLBAR_COLOR = "#ff00ff";
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+          "toolbar": TOOLBAR_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  gFindBar.onFindCommand();
+  let promise = gFindBar._startFindDeferred ? gFindBar._startFindDeferred.promise : Promise.resolve();
+  await promise;
+
+  let toolbars = [gFindBar, ...document.getElementsByTagName("toolbar")].filter(toolbar => {
+    let bounds = toolbar.getBoundingClientRect();
+    return bounds.width > 0 && bounds.height > 0;
+  });
+
+  info(`Checking toolbar background colors for ${toolbars.length} toolbars.`);
+  for (let toolbar of toolbars) {
+    Assert.equal(window.getComputedStyle(toolbar).backgroundColor,
+      "rgb(" + hexToRGB(TOOLBAR_COLOR).join(", ") + ")", "Toolbar color should be set.");
+  }
+
+  await extension.unload();
+});

toolkit/modules/LightweightThemeConsumer.jsm

@@ -13,6 +13,12 @@ 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"],
+  ["--lwt-toolbar-color", "toolbarColor"]
+]);
+
 this.LightweightThemeConsumer =
  function LightweightThemeConsumer(aDocument) {
   this._doc = aDocument;
@@ -135,8 +141,7 @@ LightweightThemeConsumer.prototype = {
     _setImage(root, active, "--lwt-header-image", aData.headerURL);
     _setImage(root, active, "--lwt-footer-image", aData.footerURL);
     _setImage(root, active, "--lwt-additional-images", aData.additionalBackgrounds);
-    _setProperty(root, active, "--lwt-background-alignment", aData.backgroundsAlignment);
+    _setProperties(root, active, aData);
-    _setProperty(root, active, "--lwt-background-tiling", aData.backgroundsTiling);
 
     if (active && aData.footerURL)
       root.setAttribute("lwthemefooter", "true");
@@ -184,6 +189,12 @@ function _setProperty(root, active, variableName, value) {
   }
 }
 
+function _setProperties(root, active, vars) {
+  for (let [cssVarName, varsKey] of kCSSVarsMap) {
+    _setProperty(root, active, cssVarName, vars[varsKey]);
+  }
+}
+
 function _parseRGB(aColorString) {
   var rgb = aColorString.match(/^rgba?\((\d+), (\d+), (\d+)/);
   rgb.shift();