Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
"use strict";
add_setup(async function () {
// Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
document.documentElement.removeAttribute("remotecontrol");
registerCleanupFunction(() => {
document.documentElement.setAttribute("remotecontrol", "true");
});
});
add_task(async function test_toolbar_field_focus() {
const TOOLBAR_FIELD_BACKGROUND = "#FF00FF";
const TOOLBAR_FIELD_COLOR = "#00FF00";
const TOOLBAR_FOCUS_BACKGROUND = "#FF0000";
const TOOLBAR_FOCUS_TEXT = "#9400FF";
const TOOLBAR_FOCUS_BORDER = "#FFFFFF";
let extension = ExtensionTestUtils.loadExtension({
manifest: {
theme: {
colors: {
frame: "#FF0000",
tab_background_color: "#ffffff",
toolbar_field: TOOLBAR_FIELD_BACKGROUND,
toolbar_field_text: TOOLBAR_FIELD_COLOR,
toolbar_field_focus: TOOLBAR_FOCUS_BACKGROUND,
toolbar_field_text_focus: TOOLBAR_FOCUS_TEXT,
toolbar_field_border_focus: TOOLBAR_FOCUS_BORDER,
},
},
},
});
await extension.startup();
info("Checking toolbar field's focus color");
let urlBar = document.querySelector("#urlbar-background");
gURLBar.textbox.setAttribute("focused", "true");
let style = window.getComputedStyle(urlBar);
Assert.equal(
style.backgroundColor,
`rgb(${hexToRGB(TOOLBAR_FOCUS_BACKGROUND).join(", ")})`,
"Background Color is changed"
);
Assert.equal(
style.color,
`rgb(${hexToRGB(TOOLBAR_FOCUS_TEXT).join(", ")})`,
"Text Color is changed"
);
Assert.equal(
style.outlineColor,
`rgb(${hexToRGB(TOOLBAR_FOCUS_BORDER).join(", ")})`,
"Focus ring color"
);
gURLBar.textbox.removeAttribute("focused");
Assert.equal(
style.backgroundColor,
`rgb(${hexToRGB(TOOLBAR_FIELD_BACKGROUND).join(", ")})`,
"Background Color is set back to initial"
);
Assert.equal(
style.color,
`rgb(${hexToRGB(TOOLBAR_FIELD_COLOR).join(", ")})`,
"Text Color is set back to initial"
);
await extension.unload();
});
add_task(async function test_toolbar_field_focus_low_alpha() {
let extension = ExtensionTestUtils.loadExtension({
manifest: {
theme: {
colors: {
frame: "#FF0000",
tab_background_color: "#ffffff",
toolbar_field: "#FF00FF",
toolbar_field_text: "#00FF00",
toolbar_field_focus: "rgba(0, 0, 255, 0.4)",
toolbar_field_text_focus: "red",
toolbar_field_border_focus: "#FFFFFF",
},
},
},
});
await extension.startup();
gURLBar.textbox.setAttribute("focused", "true");
let urlBar = document.querySelector("#urlbar-background");
Assert.equal(
window.getComputedStyle(urlBar).backgroundColor,
`rgba(0, 0, 255, 0.9)`,
"Background color has minimum opacity enforced"
);
Assert.equal(
window.getComputedStyle(urlBar).color,
`rgb(255, 255, 255)`,
"Text color has been overridden to match background"
);
gURLBar.textbox.removeAttribute("focused");
await extension.unload();
});