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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
|
"use strict";
// This test checks whether applied WebExtension themes that attempt to change
// the toolbar and toolbar_field properties also theme the findbar.
function assertHasNoBorders(element) {
let cs = window.getComputedStyle(element);
Assert.equal(cs.borderTopWidth, "0px", "should have no top border");
Assert.equal(cs.borderRightWidth, "0px", "should have no right border");
Assert.equal(cs.borderBottomWidth, "0px", "should have no bottom border");
Assert.equal(cs.borderLeftWidth, "0px", "should have no left border");
}
add_task(async function test_support_toolbar_properties_on_findbar() {
const TOOLBAR_COLOR = "#ff00ff";
const TOOLBAR_TEXT_COLOR = "#9400ff";
const ACCENT_COLOR_INACTIVE = "#ffff00";
// The TabContextMenu initializes its strings only on a focus or mouseover event.
// Calls focus event on the TabContextMenu early in the test.
gBrowser.selectedTab.focus();
let extension = ExtensionTestUtils.loadExtension({
manifest: {
theme: {
colors: {
frame: ACCENT_COLOR,
frame_inactive: ACCENT_COLOR_INACTIVE,
tab_background_text: TEXT_COLOR,
toolbar: TOOLBAR_COLOR,
bookmark_text: TOOLBAR_TEXT_COLOR,
},
},
},
});
await extension.startup();
await gBrowser.getFindBar();
let findbar_button = gFindBar.getElement("highlight");
info("Checking findbar background is set as toolbar color");
Assert.equal(
window.getComputedStyle(gFindBar).backgroundColor,
hexToCSS(ACCENT_COLOR),
"Findbar background color should be the same as toolbar background color."
);
info("Checking findbar and checkbox text color use toolbar text color");
const rgbColor = hexToCSS(TOOLBAR_TEXT_COLOR);
Assert.equal(
window.getComputedStyle(gFindBar).color,
rgbColor,
"Findbar text color should be the same as toolbar text color."
);
Assert.equal(
window.getComputedStyle(findbar_button).color,
rgbColor,
"Findbar checkbox text color should be toolbar text color."
);
// Open a new window to check frame_inactive
let window2 = await BrowserTestUtils.openNewBrowserWindow();
Assert.equal(
window.getComputedStyle(gFindBar).backgroundColor,
hexToCSS(ACCENT_COLOR_INACTIVE),
"Findbar background changed in inactive window."
);
await BrowserTestUtils.closeWindow(window2);
await extension.unload();
});
add_task(async function test_support_toolbar_field_properties_on_findbar() {
let findbar_prev_button = gFindBar.getElement("find-previous");
let findbar_next_button = gFindBar.getElement("find-next");
assertHasNoBorders(findbar_prev_button);
assertHasNoBorders(findbar_next_button);
const TOOLBAR_FIELD_COLOR = "#ff00ff";
const TOOLBAR_FIELD_TEXT_COLOR = "#9400ff";
const TOOLBAR_FIELD_BORDER_COLOR = "#ffffff";
// The TabContextMenu initializes its strings only on a focus or mouseover event.
// Calls focus event on the TabContextMenu early in the test.
gBrowser.selectedTab.focus();
let extension = ExtensionTestUtils.loadExtension({
manifest: {
theme: {
colors: {
frame: ACCENT_COLOR,
tab_background_text: TEXT_COLOR,
toolbar_field: TOOLBAR_FIELD_COLOR,
toolbar_field_text: TOOLBAR_FIELD_TEXT_COLOR,
toolbar_field_border: TOOLBAR_FIELD_BORDER_COLOR,
},
},
},
});
await extension.startup();
await gBrowser.getFindBar();
let findbar_textbox = gFindBar.getElement("findbar-textbox");
info(
"Checking findbar textbox background is set as toolbar field background color"
);
Assert.equal(
window.getComputedStyle(findbar_textbox).backgroundColor,
hexToCSS(TOOLBAR_FIELD_COLOR),
"Findbar textbox background color should be the same as toolbar field color."
);
info("Checking findbar textbox color is set as toolbar field text color");
Assert.equal(
window.getComputedStyle(findbar_textbox).color,
hexToCSS(TOOLBAR_FIELD_TEXT_COLOR),
"Findbar textbox text color should be the same as toolbar field text color."
);
testBorderColor(findbar_textbox, TOOLBAR_FIELD_BORDER_COLOR);
assertHasNoBorders(findbar_prev_button);
assertHasNoBorders(findbar_next_button);
await extension.unload();
});
// Test that theme properties are applied with a theme_frame
add_task(async function test_toolbar_properties_on_findbar_with_theme_frame() {
const TOOLBAR_COLOR = "#ff00ff";
const TOOLBAR_TEXT_COLOR = "#9400ff";
// The TabContextMenu initializes its strings only on a focus or mouseover event.
// Calls focus event on the TabContextMenu early in the test.
gBrowser.selectedTab.focus();
let extension = ExtensionTestUtils.loadExtension({
manifest: {
theme: {
images: {
theme_frame: "image1.png",
},
colors: {
frame: ACCENT_COLOR,
tab_background_text: TEXT_COLOR,
toolbar: TOOLBAR_COLOR,
bookmark_text: TOOLBAR_TEXT_COLOR,
},
},
},
files: {
"image1.png": BACKGROUND,
},
});
await extension.startup();
await gBrowser.getFindBar();
let findbar_button = gFindBar.getElement("highlight");
info("Checking findbar background is set as toolbar color");
Assert.equal(
window.getComputedStyle(gFindBar).backgroundColor,
hexToCSS(ACCENT_COLOR),
"Findbar background color should be set by theme."
);
info("Checking findbar and button text color is set as toolbar text color");
Assert.equal(
window.getComputedStyle(gFindBar).color,
hexToCSS(TOOLBAR_TEXT_COLOR),
"Findbar text color should be set by theme."
);
Assert.equal(
window.getComputedStyle(findbar_button).color,
hexToCSS(TOOLBAR_TEXT_COLOR),
"Findbar button text color should be set by theme."
);
await extension.unload();
});
add_task(
async function test_toolbar_field_properties_on_findbar_with_theme_frame() {
const TOOLBAR_FIELD_COLOR = "#ff00ff";
const TOOLBAR_FIELD_TEXT_COLOR = "#9400ff";
const TOOLBAR_FIELD_BORDER_COLOR = "#ffffff";
// The TabContextMenu initializes its strings only on a focus or mouseover event.
// Calls focus event on the TabContextMenu early in the test.
gBrowser.selectedTab.focus();
let extension = ExtensionTestUtils.loadExtension({
manifest: {
theme: {
images: {
theme_frame: "image1.png",
},
colors: {
frame: ACCENT_COLOR,
tab_background_text: TEXT_COLOR,
toolbar_field: TOOLBAR_FIELD_COLOR,
toolbar_field_text: TOOLBAR_FIELD_TEXT_COLOR,
toolbar_field_border: TOOLBAR_FIELD_BORDER_COLOR,
},
},
},
files: {
"image1.png": BACKGROUND,
},
});
await extension.startup();
await gBrowser.getFindBar();
let findbar_textbox = gFindBar.getElement("findbar-textbox");
Assert.equal(
window.getComputedStyle(findbar_textbox).backgroundColor,
hexToCSS(TOOLBAR_FIELD_COLOR),
"Findbar textbox background color should be set by theme."
);
Assert.equal(
window.getComputedStyle(findbar_textbox).color,
hexToCSS(TOOLBAR_FIELD_TEXT_COLOR),
"Findbar textbox text color should be set by theme."
);
await extension.unload();
}
);
|
