Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
/**
* Test the spaces toolbar customization features.
*/
const BACKGROUND = "#f00000";
const ICON = "#00ff0b";
const ACCENT = "#0300ff";
const ACCENT_ICON = "#fff600";
const INPUTS = {
spacesBackgroundColor: BACKGROUND,
spacesIconsColor: ICON,
spacesAccentTextColor: ACCENT,
spacesAccentBgColor: ACCENT_ICON,
};
registerCleanupFunction(async () => {
// Reset all colors.
window.gSpacesToolbar.resetColorCustomization();
window.gSpacesToolbar.closeCustomize();
});
async function sub_test_open_customize_panel() {
// Open the panel.
const menu = document.getElementById("spacesToolbarContextMenu");
const shownPromise = BrowserTestUtils.waitForEvent(menu, "popupshown");
EventUtils.synthesizeMouseAtCenter(
document.getElementById("spacesToolbar"),
{ type: "contextmenu" },
window
);
await shownPromise;
const panel = document.getElementById("spacesToolbarCustomizationPanel");
const panelShownPromise = BrowserTestUtils.waitForEvent(panel, "popupshown");
menu.activateItem(document.getElementById("spacesToolbarContextCustomize"));
await panelShownPromise;
}
function sub_test_apply_colors_to_inputs() {
for (const key in INPUTS) {
const input = document.getElementById(`${key}`);
input.value = INPUTS[key];
// We need to force dispatch the onchange event otherwise the listener won't
// fire since we're programmatically changing the color value.
input.dispatchEvent(new Event("change"));
}
}
/**
* Check the current state of the custom color properties applied to the
* document style.
*
* @param {boolean} empty - If the style properties should be empty or filled.
*/
function sub_test_check_for_style_properties(empty) {
const style = document.documentElement.style;
if (empty) {
Assert.equal(style.getPropertyValue("--spaces-bg-color"), "");
Assert.equal(style.getPropertyValue("--spaces-button-text-color"), "");
Assert.equal(
style.getPropertyValue("--spaces-button-active-text-color"),
""
);
Assert.equal(style.getPropertyValue("--spaces-button-active-bg-color"), "");
return;
}
Assert.equal(style.getPropertyValue("--spaces-bg-color"), BACKGROUND);
Assert.equal(style.getPropertyValue("--spaces-button-text-color"), ICON);
Assert.equal(
style.getPropertyValue("--spaces-button-active-text-color"),
ACCENT
);
Assert.equal(
style.getPropertyValue("--spaces-button-active-bg-color"),
ACCENT_ICON
);
}
add_task(async function testSpacesToolbarCustomizationPanel() {
// Make sure we're starting from a clean state.
window.gSpacesToolbar.resetColorCustomization();
await sub_test_open_customize_panel();
// Current colors should be clear.
sub_test_check_for_style_properties(true);
// Test color preview.
sub_test_apply_colors_to_inputs();
sub_test_check_for_style_properties();
// Reset should clear all applied colors.
window.gSpacesToolbar.resetColorCustomization();
window.gSpacesToolbar.closeCustomize();
sub_test_check_for_style_properties(true);
await sub_test_open_customize_panel();
// Set colors again.
sub_test_apply_colors_to_inputs();
// "Done" should close the panel and apply all colors.
window.gSpacesToolbar.closeCustomize();
sub_test_check_for_style_properties();
// Open the panel and click reset.
await sub_test_open_customize_panel();
window.gSpacesToolbar.resetColorCustomization();
sub_test_check_for_style_properties(true);
// "Done" should restore the custom colors.
window.gSpacesToolbar.closeCustomize();
sub_test_check_for_style_properties(true);
});