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
|
/* -*- Mode: indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* vim: set sts=2 sw=2 et tw=80: */
"use strict";
add_task(function* testPopupBackground() {
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",
"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; background-color: green;">
</body>
</html>`,
},
});
yield extension.startup();
function* testPanel(browser, standAlone) {
let panel = getPanelForNode(browser);
let arrowContent = document.getAnonymousElementByAttribute(panel, "class", "panel-arrowcontent");
let arrow = document.getAnonymousElementByAttribute(panel, "anonid", "arrow");
let borderColor = getComputedStyle(arrowContent).borderTopColor;
let checkArrow = (background = null) => {
let image = getComputedStyle(arrow).listStyleImage;
if (background == null || !standAlone) {
ok(image.startsWith('url("chrome://'), `We should have the built-in background image (got: ${image})`);
return;
}
if (AppConstants.platform == "mac") {
// Panels have a drop shadow rather than a border on OS-X, so we extend
// the background color through the border area instead.
borderColor = background;
}
image = decodeURIComponent(image);
let borderIndex = image.indexOf(`fill="${borderColor}"`);
let backgroundIndex = image.lastIndexOf(`fill="${background}"`);
ok(borderIndex >= 0, `Have border fill (index=${borderIndex})`);
ok(backgroundIndex >= 0, `Have background fill (index=${backgroundIndex})`);
is(getComputedStyle(arrowContent).backgroundColor, background, "Arrow content should have correct background");
isnot(borderIndex, backgroundIndex, "Border and background fills are separate elements");
};
function getBackground(browser) {
return ContentTask.spawn(browser, null, function* () {
return content.getComputedStyle(content.document.body)
.backgroundColor;
});
}
/* eslint-disable mozilla/no-cpows-in-tests */
let setBackground = color => {
content.document.body.style.backgroundColor = color;
};
/* eslint-enable mozilla/no-cpows-in-tests */
yield new Promise(resolve => setTimeout(resolve, 100));
info("Test that initial background color is applied");
checkArrow(yield getBackground(browser));
info("Test that dynamically-changed background color is applied");
yield alterContent(browser, setBackground, "black");
checkArrow(yield getBackground(browser));
info("Test that non-opaque background color results in default styling");
yield alterContent(browser, setBackground, "rgba(1, 2, 3, .9)");
checkArrow(null);
}
{
info("Test stand-alone browserAction popup");
clickBrowserAction(extension);
let browser = yield awaitExtensionPanel(extension);
yield testPanel(browser, true);
yield closeBrowserAction(extension);
}
{
info("Test menu panel browserAction popup");
let widget = getBrowserActionWidget(extension);
CustomizableUI.addWidgetToArea(widget.id, CustomizableUI.AREA_PANEL);
clickBrowserAction(extension);
let browser = yield awaitExtensionPanel(extension);
yield testPanel(browser, false);
yield closeBrowserAction(extension);
}
{
info("Test pageAction popup");
clickPageAction(extension);
let browser = yield awaitExtensionPanel(extension);
yield testPanel(browser, true);
yield closePageAction(extension);
}
yield extension.unload();
});
|
