From c1a9f6ec5646cc7bb18687cefd1e9e4c7ca2a3a8 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Thu, 15 Jun 2017 19:20:26 +0200 Subject: [PATCH] Bug 1347182 - Add support for setting the background color of all toolbars using a WebExtension theme. r=jaws Original patch by :mikedeboer. MozReview-Commit-ID: IbTBCjt6oJp --HG-- extra : rebase_source : 09752d1deded2f8189fd2abedcd0f65bd2625ed3 --- toolkit/components/extensions/ext-theme.js | 6 +++ .../components/extensions/schemas/theme.json | 4 ++ .../extensions/test/browser/browser.ini | 3 +- .../browser/browser_ext_themes_toolbars.js | 48 +++++++++++++++++++ toolkit/modules/LightweightThemeConsumer.jsm | 15 +++++- 5 files changed, 73 insertions(+), 3 deletions(-) create mode 100644 toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js diff --git a/toolkit/components/extensions/ext-theme.js b/toolkit/components/extensions/ext-theme.js index ae78a851eadb..f7f7a14af688 100644 --- a/toolkit/components/extensions/ext-theme.js +++ b/toolkit/components/extensions/ext-theme.js @@ -62,6 +62,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'"); } } @@ -92,6 +95,9 @@ class Theme { case "tab_text": this.lwtStyles.textcolor = cssColor; break; + case "toolbar": + this.lwtStyles.toolbarColor = cssColor; + break; } } } diff --git a/toolkit/components/extensions/schemas/theme.json b/toolkit/components/extensions/schemas/theme.json index 175e8ddfe8f2..21a31783d32e 100644 --- a/toolkit/components/extensions/schemas/theme.json +++ b/toolkit/components/extensions/schemas/theme.json @@ -64,6 +64,10 @@ "textcolor": { "type": "string", "optional": true + }, + "toolbar": { + "type": "string", + "optional": true } }, "additionalProperties": { "$ref": "UnrecognizedProperty" } diff --git a/toolkit/components/extensions/test/browser/browser.ini b/toolkit/components/extensions/test/browser/browser.ini index c07a78991195..30112dbe1b0f 100644 --- a/toolkit/components/extensions/test/browser/browser.ini +++ b/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] diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js new file mode 100644 index 000000000000..2b8d660fe67f --- /dev/null +++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js @@ -0,0 +1,48 @@ +"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(); + + 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.`); + 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."); + } + + await extension.unload(); +}); diff --git a/toolkit/modules/LightweightThemeConsumer.jsm b/toolkit/modules/LightweightThemeConsumer.jsm index 4b16569fdc4c..16abf22145e1 100644 --- a/toolkit/modules/LightweightThemeConsumer.jsm +++ b/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"], + ["--toolbar-bgcolor", "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); - _setProperty(root, active, "--lwt-background-tiling", aData.backgroundsTiling); + _setProperties(root, active, aData); 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();