1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
/* 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
* file, you can obtain one at http://mozilla.org/MPL/2.0/. */
/**
* 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.
let menu = document.getElementById("spacesToolbarContextMenu");
let shownPromise = BrowserTestUtils.waitForEvent(menu, "popupshown");
EventUtils.synthesizeMouseAtCenter(
document.getElementById("spacesToolbar"),
{ type: "contextmenu" },
window
);
await shownPromise;
let panel = document.getElementById("spacesToolbarCustomizationPanel");
let panelShownPromise = BrowserTestUtils.waitForEvent(panel, "popupshown");
menu.activateItem(document.getElementById("spacesToolbarContextCustomize"));
await panelShownPromise;
}
function sub_test_apply_colors_to_inputs() {
for (let key in INPUTS) {
let 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) {
let 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);
});
|
