mozilla-central/browser/components/extensions/test/browser/browser_ext_browserAction_theme_icons.js (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Errors

/* -*- Mode: indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* vim: set sts=2 sw=2 et tw=80: */
"use strict";
const LIGHT_THEME_COLORS = {
frame: "#FFF",
tab_background_text: "#000",
};
const DARK_THEME_COLORS = {
frame: "#000",
tab_background_text: "#FFF",
};
const TOOLBAR_MAPPING = {
navbar: "nav-bar",
tabstrip: "TabsToolbar",
};
async function testBrowserAction(extension, expectedIcon) {
let browserActionWidget = getBrowserActionWidget(extension);
await promiseAnimationFrame();
let browserActionButton = browserActionWidget.forWindow(window).node;
let image = getListStyleImage(browserActionButton.firstElementChild);
ok(
image.includes(expectedIcon),
`Expected browser action icon (${image}) to be ${expectedIcon}`
);
}
async function testStaticTheme(options) {
let {
themeData,
themeIcons,
withDefaultIcon,
expectedIcon,
defaultArea = "navbar",
} = options;
let manifest = {
browser_action: {
theme_icons: themeIcons,
default_area: defaultArea,
},
};
if (withDefaultIcon) {
manifest.browser_action.default_icon = "default.png";
}
let extension = ExtensionTestUtils.loadExtension({ manifest });
await extension.startup();
// Ensure we show the menupanel at least once. This makes sure that the
// elements we're going to query the style of are in the flat tree.
if (defaultArea == "menupanel") {
let shown = BrowserTestUtils.waitForPopupEvent(
window.gUnifiedExtensions.panel,
"shown"
);
window.gUnifiedExtensions.togglePanel();
await shown;
}
// Confirm that the browser action has the correct default icon before a theme is loaded.
let toolbarId = TOOLBAR_MAPPING[defaultArea];
let expectedDefaultIcon;
// Some platforms have dark toolbars by default, take it in account when picking the default icon.
if (
toolbarId &&
document.getElementById(toolbarId).hasAttribute("brighttext")
) {
expectedDefaultIcon = "light.png";
} else {
expectedDefaultIcon = withDefaultIcon ? "default.png" : "dark.png";
}
await testBrowserAction(extension, expectedDefaultIcon);
let theme = ExtensionTestUtils.loadExtension({
manifest: {
theme: {
colors: themeData,
},
},
});
await theme.startup();
// Confirm that the correct icon is used when the theme is loaded.
if (expectedIcon == "dark") {
// The dark icon should be used if the area is light.
await testBrowserAction(extension, "dark.png");
} else {
// The light icon should be used if the area is dark.
await testBrowserAction(extension, "light.png");
}
await theme.unload();
// Confirm that the browser action has the correct default icon when the theme is unloaded.
await testBrowserAction(extension, expectedDefaultIcon);
await extension.unload();
}
add_task(async function browseraction_theme_icons_light_theme() {
await testStaticTheme({
themeData: LIGHT_THEME_COLORS,
expectedIcon: "dark",
themeIcons: [
{
light: "light.png",
dark: "dark.png",
size: 19,
},
],
withDefaultIcon: true,
});
await testStaticTheme({
themeData: LIGHT_THEME_COLORS,
expectedIcon: "dark",
themeIcons: [
{
light: "light.png",
dark: "dark.png",
size: 16,
},
{
light: "light.png",
dark: "dark.png",
size: 32,
},
],
withDefaultIcon: false,
});
});
add_task(async function browseraction_theme_icons_dark_theme() {
await testStaticTheme({
themeData: DARK_THEME_COLORS,
expectedIcon: "light",
themeIcons: [
{
light: "light.png",
dark: "dark.png",
size: 19,
},
],
withDefaultIcon: true,
});
await testStaticTheme({
themeData: DARK_THEME_COLORS,
expectedIcon: "light",
themeIcons: [
{
light: "light.png",
dark: "dark.png",
size: 16,
},
{
light: "light.png",
dark: "dark.png",
size: 32,
},
],
withDefaultIcon: false,
});
});
add_task(async function browseraction_theme_icons_different_toolbars() {
let themeData = {
frame: "#000",
tab_background_text: "#fff",
toolbar: "#fff",
bookmark_text: "#000",
};
await testStaticTheme({
themeData,
expectedIcon: "dark",
themeIcons: [
{
light: "light.png",
dark: "dark.png",
size: 19,
},
],
withDefaultIcon: true,
});
await testStaticTheme({
themeData,
expectedIcon: "dark",
themeIcons: [
{
light: "light.png",
dark: "dark.png",
size: 16,
},
{
light: "light.png",
dark: "dark.png",
size: 32,
},
],
});
await testStaticTheme({
themeData,
expectedIcon: "light",
defaultArea: "tabstrip",
themeIcons: [
{
light: "light.png",
dark: "dark.png",
size: 19,
},
],
withDefaultIcon: true,
});
await testStaticTheme({
themeData,
expectedIcon: "light",
defaultArea: "tabstrip",
themeIcons: [
{
light: "light.png",
dark: "dark.png",
size: 16,
},
{
light: "light.png",
dark: "dark.png",
size: 32,
},
],
});
});
add_task(async function browseraction_theme_icons_overflow_panel() {
let themeData = {
popup: "#000",
popup_text: "#fff",
};
await testStaticTheme({
themeData,
expectedIcon: "dark",
themeIcons: [
{
light: "light.png",
dark: "dark.png",
size: 19,
},
],
withDefaultIcon: true,
});
await testStaticTheme({
themeData,
expectedIcon: "dark",
themeIcons: [
{
light: "light.png",
dark: "dark.png",
size: 16,
},
{
light: "light.png",
dark: "dark.png",
size: 32,
},
],
});
await testStaticTheme({
themeData,
expectedIcon: "light",
defaultArea: "menupanel",
themeIcons: [
{
light: "light.png",
dark: "dark.png",
size: 19,
},
],
withDefaultIcon: true,
});
await testStaticTheme({
themeData,
expectedIcon: "light",
defaultArea: "menupanel",
themeIcons: [
{
light: "light.png",
dark: "dark.png",
size: 16,
},
{
light: "light.png",
dark: "dark.png",
size: 32,
},
],
});
});
add_task(async function browseraction_theme_icons_dynamic_theme() {
let themeExtension = ExtensionTestUtils.loadExtension({
manifest: {
permissions: ["theme"],
},
background() {
browser.test.onMessage.addListener((msg, colors) => {
if (msg === "update-theme") {
browser.theme.update({
colors: colors,
});
browser.test.sendMessage("theme-updated");
}
});
},
});
await themeExtension.startup();
let extension = ExtensionTestUtils.loadExtension({
manifest: {
browser_action: {
default_icon: "default.png",
default_area: "navbar",
theme_icons: [
{
light: "light.png",
dark: "dark.png",
size: 16,
},
{
light: "light.png",
dark: "dark.png",
size: 32,
},
],
},
},
});
await extension.startup();
// Confirm that the browser action has the default icon before a theme is set.
await testBrowserAction(extension, "default.png");
// Update the theme to a light theme.
themeExtension.sendMessage("update-theme", LIGHT_THEME_COLORS);
await themeExtension.awaitMessage("theme-updated");
// Confirm that the dark icon is used for the light theme.
await testBrowserAction(extension, "dark.png");
// Update the theme to a dark theme.
themeExtension.sendMessage("update-theme", DARK_THEME_COLORS);
await themeExtension.awaitMessage("theme-updated");
// Confirm that the light icon is used for the dark theme.
await testBrowserAction(extension, "light.png");
// Unload the theme.
await themeExtension.unload();
// Confirm that the default icon is used when the theme is unloaded.
await testBrowserAction(extension, "default.png");
await extension.unload();
});