mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-26 03:35:33 +00:00
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
This commit is contained in:
parent
396962011a
commit
6a1a237f33
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -64,6 +64,10 @@
|
||||
"textcolor": {
|
||||
"type": "string",
|
||||
"optional": true
|
||||
},
|
||||
"toolbar": {
|
||||
"type": "string",
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"additionalProperties": { "$ref": "UnrecognizedProperty" }
|
||||
|
@ -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]
|
||||
|
@ -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();
|
||||
});
|
@ -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);
|
||||
_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();
|
||||
|
Loading…
Reference in New Issue
Block a user