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
|
/* -*- Mode: indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* vim: set sts=2 sw=2 et tw=80: */
"use strict";
add_task(async function testPopupBorderRadius() {
let extension = ExtensionTestUtils.loadExtension({
background() {
browser.tabs.query({ active: true, currentWindow: true }, tabs => {
browser.pageAction.show(tabs[0].id);
});
},
manifest: {
browser_action: {
default_popup: "popup.html",
default_area: "navbar",
browser_style: false,
},
page_action: {
default_popup: "popup.html",
browser_style: false,
},
},
files: {
"popup.html": `<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body style="width: 100px; height: 100px;"></body>
</html>`,
},
});
await extension.startup();
let widget = getBrowserActionWidget(extension);
// If the panel doesn't allows embedding in subview then
// radius will be 0, otherwise 8. In practice we always
// disallow subview.
let expectedRadius = widget.disallowSubView ? "8px" : "0px";
async function testPanel(browser, standAlone = true) {
let panel = getPanelForNode(browser);
let arrowContent = panel.panelContent;
let panelStyle = getComputedStyle(arrowContent);
is(
panelStyle.overflow,
"hidden",
"overflow is not hidden, thus it doesn't clip"
);
let stack = browser.parentNode;
let viewNode = stack.parentNode === panel ? browser : stack.parentNode;
let viewStyle = getComputedStyle(viewNode);
let props = [
"borderTopLeftRadius",
"borderTopRightRadius",
"borderBottomRightRadius",
"borderBottomLeftRadius",
];
let bodyStyle = await SpecialPowers.spawn(
browser,
[props],
async function (props) {
let bodyStyle = content.getComputedStyle(content.document.body);
return new Map(props.map(prop => [prop, bodyStyle[prop]]));
}
);
for (let prop of props) {
if (standAlone) {
is(
viewStyle[prop],
panelStyle[prop],
`Panel and view ${prop} should be the same`
);
is(
bodyStyle.get(prop),
panelStyle[prop],
`Panel and body ${prop} should be the same`
);
} else {
is(viewStyle[prop], expectedRadius, `View node ${prop} should be 0px`);
is(
bodyStyle.get(prop),
expectedRadius,
`Body node ${prop} should be 0px`
);
}
}
}
{
info("Test stand-alone browserAction popup");
clickBrowserAction(extension);
let browser = await awaitExtensionPanel(extension);
await testPanel(browser);
await closeBrowserAction(extension);
}
{
info("Test overflowed browserAction popup");
const kForceOverflowWidthPx = 450;
let overflowPanel = document.getElementById("widget-overflow");
let originalWindowWidth = window.outerWidth;
let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
ok(
!navbar.hasAttribute("overflowing"),
"Should start with a non-overflowing toolbar."
);
window.resizeTo(kForceOverflowWidthPx, window.outerHeight);
await TestUtils.waitForCondition(() => navbar.hasAttribute("overflowing"));
ok(
navbar.hasAttribute("overflowing"),
"Should have an overflowing toolbar."
);
await window.gUnifiedExtensions.togglePanel();
clickBrowserAction(extension);
let browser = await awaitExtensionPanel(extension);
is(
overflowPanel.state,
"closed",
"The widget overflow panel should not be open."
);
await testPanel(browser, false);
await closeBrowserAction(extension);
window.resizeTo(originalWindowWidth, window.outerHeight);
await TestUtils.waitForCondition(() => !navbar.hasAttribute("overflowing"));
ok(
!navbar.hasAttribute("overflowing"),
"Should not have an overflowing toolbar."
);
}
{
info("Test menu panel browserAction popup");
CustomizableUI.addWidgetToArea(widget.id, getCustomizableUIPanelID());
clickBrowserAction(extension);
let browser = await awaitExtensionPanel(extension);
await testPanel(browser, false);
await closeBrowserAction(extension);
}
{
info("Test pageAction popup");
clickPageAction(extension);
let browser = await awaitExtensionPanel(extension);
await testPanel(browser);
await closePageAction(extension);
}
await extension.unload();
});
|
