Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
"use strict";
// This test checks whether applied WebExtension themes that attempt to change
// the background color and the color of the navbar text fields are applied properly.
const { CustomizableUITestUtils } = ChromeUtils.importESModule(
);
let gCUITestUtils = new CustomizableUITestUtils(window);
add_setup(async function () {
await gCUITestUtils.addSearchBar();
registerCleanupFunction(() => {
gCUITestUtils.removeSearchBar();
});
});
add_task(async function test_support_toolbar_field_properties() {
const TOOLBAR_FIELD_BACKGROUND = "#ff00ff";
const TOOLBAR_FIELD_COLOR = "#00ff00";
const TOOLBAR_FIELD_BORDER = "#aaaaff";
let extension = ExtensionTestUtils.loadExtension({
manifest: {
theme: {
images: {
theme_frame: "image1.png",
},
colors: {
frame: ACCENT_COLOR,
tab_background_text: TEXT_COLOR,
toolbar_field: TOOLBAR_FIELD_BACKGROUND,
toolbar_field_text: TOOLBAR_FIELD_COLOR,
toolbar_field_border: TOOLBAR_FIELD_BORDER,
},
},
},
files: {
"image1.png": BACKGROUND,
},
});
await extension.startup();
let root = document.documentElement;
// Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
root.removeAttribute("remotecontrol");
registerCleanupFunction(() => {
root.setAttribute("remotecontrol", "true");
});
let fields = [
document.querySelector("#urlbar-background"),
BrowserSearch.searchBar,
].filter(field => {
let bounds = field.getBoundingClientRect();
return bounds.width > 0 && bounds.height > 0;
});
Assert.equal(fields.length, 2, "Should be testing two elements");
info(
`Checking toolbar background colors and colors for ${fields.length} toolbar fields.`
);
for (let field of fields) {
info(`Testing ${field.id || field.className}`);
Assert.equal(
window.getComputedStyle(field).backgroundColor,
hexToCSS(TOOLBAR_FIELD_BACKGROUND),
"Field background should be set."
);
Assert.equal(
window.getComputedStyle(field).color,
hexToCSS(TOOLBAR_FIELD_COLOR),
"Field color should be set."
);
testBorderColor(field, TOOLBAR_FIELD_BORDER);
}
await extension.unload();
});
add_task(async function test_support_toolbar_field_brighttext() {
let root = document.documentElement;
// Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
root.removeAttribute("remotecontrol");
registerCleanupFunction(() => {
root.setAttribute("remotecontrol", "true");
});
let urlbar = gURLBar.textbox;
let extension = ExtensionTestUtils.loadExtension({
manifest: {
theme: {
colors: {
frame: ACCENT_COLOR,
tab_background_text: TEXT_COLOR,
toolbar_field: "#fff",
toolbar_field_text: "#000",
},
},
},
});
await extension.startup();
Assert.equal(
window.getComputedStyle(urlbar).color,
hexToCSS("#000000"),
"Color has been set"
);
Assert.equal(
root.getAttribute("lwt-toolbar-field"),
"light",
"Should be light"
);
await extension.unload();
extension = ExtensionTestUtils.loadExtension({
manifest: {
theme: {
colors: {
frame: ACCENT_COLOR,
tab_background_text: TEXT_COLOR,
toolbar_field: "#000",
toolbar_field_text: "#fff",
},
},
},
});
await extension.startup();
Assert.equal(
window.getComputedStyle(urlbar).color,
hexToCSS("#ffffff"),
"Color has been set"
);
Assert.equal(
root.getAttribute("lwt-toolbar-field"),
"dark",
"Should be dark"
);
await extension.unload();
});
// Verifies that we apply the lwt-toolbar-field="dark" attribute when
// toolbar fields are dark text on a dark background.
add_task(async function test_support_toolbar_field_brighttext_dark_on_dark() {
let root = document.documentElement;
// Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
root.removeAttribute("remotecontrol");
registerCleanupFunction(() => {
root.setAttribute("remotecontrol", "true");
});
let urlbar = gURLBar.textbox;
let extension = ExtensionTestUtils.loadExtension({
manifest: {
theme: {
colors: {
frame: ACCENT_COLOR,
tab_background_text: TEXT_COLOR,
toolbar_field: "#000",
toolbar_field_text: "#111111",
},
},
},
});
await extension.startup();
Assert.equal(
window.getComputedStyle(urlbar).color,
hexToCSS("#111111"),
"Color has been set"
);
Assert.equal(
root.getAttribute("lwt-toolbar-field"),
"dark",
"toolbar-field color-scheme should be dark"
);
await extension.unload();
});
add_task(async function test_no_explicit_toolbar_field_on_dark_toolbar() {
let root = document.documentElement;
let extension = ExtensionTestUtils.loadExtension({
manifest: {
theme: {
colors: {
frame: "#000",
tab_background_text: "#fff",
// Explicitly unset toolbar fields, but they default to light.
},
},
},
});
await extension.startup();
Assert.equal(
root.getAttribute("lwt-toolbar-field"),
"light",
"toolbar-field color-scheme should be set and light"
);
await extension.unload();
});