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
|
"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();
});
|
