Bug 1330349 - Part 1 - move the new theme WebExtension API to the toolkit collection of APIs. r=aswan
MozReview-Commit-ID: LERYdJHNvxW
This commit is contained in:
Mike de Boer
18
toolkit/components/extensions/test/browser/.eslintrc.js
Normal file
18
toolkit/components/extensions/test/browser/.eslintrc.js
Normal file
@@ -0,0 +1,18 @@
|
||||
"use strict";
|
||||
|
||||
module.exports = { // eslint-disable-line no-undef
|
||||
"extends": "../../../../../testing/mochitest/mochitest.eslintrc.js",
|
||||
|
||||
"env": {
|
||||
"webextensions": true,
|
||||
},
|
||||
|
||||
"globals": {
|
||||
"ExtensionTestUtils": false,
|
||||
"XPCOMUtils": true,
|
||||
},
|
||||
|
||||
"rules": {
|
||||
"no-shadow": 0,
|
||||
},
|
||||
};
|
||||
3
toolkit/components/extensions/test/browser/browser.ini
Normal file
3
toolkit/components/extensions/test/browser/browser.ini
Normal file
@@ -0,0 +1,3 @@
|
||||
[browser_ext_themes_chromeparity.js]
|
||||
[browser_ext_themes_dynamic_updates.js]
|
||||
[browser_ext_themes_lwtsupport.js]
|
||||
@@ -0,0 +1,55 @@
|
||||
"use strict";
|
||||
|
||||
const ENCODED_IMAGE_DATA = "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";
|
||||
|
||||
function imageBufferFromDataURI(encodedImageData) {
|
||||
let decodedImageData = atob(encodedImageData);
|
||||
return Uint8Array.from(decodedImageData, byte => byte.charCodeAt(0)).buffer;
|
||||
}
|
||||
|
||||
add_task(function* setup() {
|
||||
yield SpecialPowers.pushPrefEnv({
|
||||
set: [["extensions.webextensions.themes.enabled", true]],
|
||||
});
|
||||
});
|
||||
|
||||
add_task(function* test_support_theme_frame() {
|
||||
const FRAME_COLOR = [71, 105, 91];
|
||||
const TAB_TEXT_COLOR = [207, 221, 192, .9];
|
||||
let extension = ExtensionTestUtils.loadExtension({
|
||||
manifest: {
|
||||
"theme": {
|
||||
"images": {
|
||||
"theme_frame": "face.png",
|
||||
},
|
||||
"colors": {
|
||||
"frame": FRAME_COLOR,
|
||||
"tab_text": TAB_TEXT_COLOR,
|
||||
},
|
||||
},
|
||||
},
|
||||
files: {
|
||||
"face.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
|
||||
},
|
||||
});
|
||||
|
||||
yield extension.startup();
|
||||
|
||||
let docEl = window.document.documentElement;
|
||||
|
||||
Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
|
||||
Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
|
||||
"LWT text color attribute should be set");
|
||||
|
||||
let style = window.getComputedStyle(docEl);
|
||||
Assert.ok(style.backgroundImage.includes("face.png"),
|
||||
`The backgroundImage should use face.png. Actual value is: ${style.backgroundImage}`);
|
||||
Assert.equal(style.backgroundColor, "rgb(" + FRAME_COLOR.join(", ") + ")",
|
||||
"Expected correct background color");
|
||||
Assert.equal(style.color, "rgba(" + TAB_TEXT_COLOR.join(", ") + ")",
|
||||
"Expected correct text color");
|
||||
|
||||
yield extension.unload();
|
||||
|
||||
Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
|
||||
});
|
||||
@@ -0,0 +1,87 @@
|
||||
"use strict";
|
||||
|
||||
// PNG image data for a simple red dot.
|
||||
const BACKGROUND_1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
|
||||
const ACCENT_COLOR_1 = "#a14040";
|
||||
const TEXT_COLOR_1 = "#fac96e";
|
||||
|
||||
// PNG image data for the Mozilla dino head.
|
||||
const BACKGROUND_2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg==";
|
||||
const ACCENT_COLOR_2 = "#03fe03";
|
||||
const TEXT_COLOR_2 = "#0ef325";
|
||||
|
||||
function hexToRGB(hex) {
|
||||
hex = parseInt((hex.indexOf("#") > -1 ? hex.substring(1) : hex), 16);
|
||||
return [hex >> 16, (hex & 0x00FF00) >> 8, (hex & 0x0000FF)];
|
||||
}
|
||||
|
||||
function validateTheme(backgroundImage, accentColor, textColor) {
|
||||
let docEl = window.document.documentElement;
|
||||
let style = window.getComputedStyle(docEl);
|
||||
|
||||
Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
|
||||
Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
|
||||
"LWT text color attribute should be set");
|
||||
|
||||
Assert.equal(style.backgroundImage, 'url("' + backgroundImage.replace(/"/g, '\\"') + '")',
|
||||
"Expected correct background image");
|
||||
Assert.equal(style.backgroundColor, "rgb(" + hexToRGB(accentColor).join(", ") + ")",
|
||||
"Expected correct accent color");
|
||||
Assert.equal(style.color, "rgb(" + hexToRGB(textColor).join(", ") + ")",
|
||||
"Expected correct text color");
|
||||
}
|
||||
|
||||
add_task(function* setup() {
|
||||
yield SpecialPowers.pushPrefEnv({
|
||||
set: [["extensions.webextensions.themes.enabled", true]],
|
||||
});
|
||||
});
|
||||
|
||||
add_task(function* test_dynamic_theme_updates() {
|
||||
let extension = ExtensionTestUtils.loadExtension({
|
||||
manifest: {
|
||||
"theme": {
|
||||
"images": {
|
||||
"headerURL": BACKGROUND_1,
|
||||
},
|
||||
"colors": {
|
||||
"accentcolor": ACCENT_COLOR_1,
|
||||
"textcolor": TEXT_COLOR_1,
|
||||
},
|
||||
},
|
||||
},
|
||||
background() {
|
||||
browser.test.onMessage.addListener((msg, details) => {
|
||||
if (msg != "update-theme") {
|
||||
browser.test.fail("expected 'update-theme' message");
|
||||
}
|
||||
|
||||
browser.theme.update(details);
|
||||
browser.test.sendMessage("theme-updated");
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
yield extension.startup();
|
||||
|
||||
validateTheme(BACKGROUND_1, ACCENT_COLOR_1, TEXT_COLOR_1);
|
||||
|
||||
extension.sendMessage("update-theme", {
|
||||
"images": {
|
||||
"headerURL": BACKGROUND_2,
|
||||
},
|
||||
"colors": {
|
||||
"accentcolor": ACCENT_COLOR_2,
|
||||
"textcolor": TEXT_COLOR_2,
|
||||
},
|
||||
});
|
||||
|
||||
yield extension.awaitMessage("theme-updated");
|
||||
|
||||
validateTheme(BACKGROUND_2, ACCENT_COLOR_2, TEXT_COLOR_2);
|
||||
|
||||
yield extension.unload();
|
||||
|
||||
let docEl = window.document.documentElement;
|
||||
Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
|
||||
});
|
||||
@@ -0,0 +1,91 @@
|
||||
"use strict";
|
||||
|
||||
const BACKGROUND = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
|
||||
const ACCENT_COLOR = "#a14040";
|
||||
const TEXT_COLOR = "#fac96e";
|
||||
|
||||
function hexToRGB(hex) {
|
||||
hex = parseInt((hex.indexOf("#") > -1 ? hex.substring(1) : hex), 16);
|
||||
return [hex >> 16, (hex & 0x00FF00) >> 8, (hex & 0x0000FF)];
|
||||
}
|
||||
|
||||
add_task(function* setup() {
|
||||
yield SpecialPowers.pushPrefEnv({
|
||||
set: [["extensions.webextensions.themes.enabled", true]],
|
||||
});
|
||||
});
|
||||
|
||||
add_task(function* test_support_LWT_properties() {
|
||||
let extension = ExtensionTestUtils.loadExtension({
|
||||
manifest: {
|
||||
"theme": {
|
||||
"images": {
|
||||
"headerURL": BACKGROUND,
|
||||
},
|
||||
"colors": {
|
||||
"accentcolor": ACCENT_COLOR,
|
||||
"textcolor": TEXT_COLOR,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
yield extension.startup();
|
||||
|
||||
let docEl = window.document.documentElement;
|
||||
let style = window.getComputedStyle(docEl);
|
||||
|
||||
Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
|
||||
Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
|
||||
"LWT text color attribute should be set");
|
||||
|
||||
Assert.equal(style.backgroundImage, 'url("' + BACKGROUND.replace(/"/g, '\\"') + '")',
|
||||
"Expected background image");
|
||||
Assert.equal(style.backgroundColor, "rgb(" + hexToRGB(ACCENT_COLOR).join(", ") + ")",
|
||||
"Expected correct background color");
|
||||
Assert.equal(style.color, "rgb(" + hexToRGB(TEXT_COLOR).join(", ") + ")",
|
||||
"Expected correct text color");
|
||||
|
||||
yield extension.unload();
|
||||
|
||||
Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
|
||||
});
|
||||
|
||||
add_task(function* test_LWT_requires_all_properties_defined_image_only() {
|
||||
let extension = ExtensionTestUtils.loadExtension({
|
||||
manifest: {
|
||||
"theme": {
|
||||
"images": {
|
||||
"headerURL": BACKGROUND,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
yield extension.startup();
|
||||
|
||||
let docEl = window.document.documentElement;
|
||||
Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
|
||||
yield extension.unload();
|
||||
Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
|
||||
});
|
||||
|
||||
add_task(function* test_LWT_requires_all_properties_defined_colors_only() {
|
||||
let extension = ExtensionTestUtils.loadExtension({
|
||||
manifest: {
|
||||
"theme": {
|
||||
"colors": {
|
||||
"accentcolor": ACCENT_COLOR,
|
||||
"textcolor": TEXT_COLOR,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
yield extension.startup();
|
||||
|
||||
let docEl = window.document.documentElement;
|
||||
Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
|
||||
yield extension.unload();
|
||||
Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
|
||||
});
|
||||
Reference in New Issue
Block a user