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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
/* Tests both Copy URL and Copy Data URL context menu items */
const TEST_DATA_URI =
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=";
// Invalid URL still needs to be reachable otherwise getImageDataUrl will
// timeout. DevTools chrome:// URLs aren't content accessible, so use some
// random resource:// URL here.
const INVALID_IMAGE_URI = "resource://devtools/client/definitions.js";
const ERROR_MESSAGE = STYLE_INSPECTOR_L10N.getStr(
"styleinspector.copyImageDataUrlError"
);
add_task(async function () {
const TEST_URI = `<style type="text/css">
.valid-background {
background-image: url(${TEST_DATA_URI});
}
.invalid-background {
background-image: url(${INVALID_IMAGE_URI});
}
</style>
<div class="valid-background">Valid background image</div>
<div class="invalid-background">Invalid background image</div>`;
await addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_URI));
await startTest();
});
async function startTest() {
info("Opening rule view");
let { inspector, view } = await openRuleView();
info("Test valid background image URL in rule view");
await testCopyUrlToClipboard(
{ view, inspector },
"data-uri",
".valid-background",
TEST_DATA_URI
);
await testCopyUrlToClipboard(
{ view, inspector },
"url",
".valid-background",
TEST_DATA_URI
);
info("Test invalid background image URL in rue view");
await testCopyUrlToClipboard(
{ view, inspector },
"data-uri",
".invalid-background",
ERROR_MESSAGE
);
await testCopyUrlToClipboard(
{ view, inspector },
"url",
".invalid-background",
INVALID_IMAGE_URI
);
info("Opening computed view");
view = selectComputedView(inspector);
info("Test valid background image URL in computed view");
await testCopyUrlToClipboard(
{ view, inspector },
"data-uri",
".valid-background",
TEST_DATA_URI
);
await testCopyUrlToClipboard(
{ view, inspector },
"url",
".valid-background",
TEST_DATA_URI
);
info("Test invalid background image URL in computed view");
await testCopyUrlToClipboard(
{ view, inspector },
"data-uri",
".invalid-background",
ERROR_MESSAGE
);
await testCopyUrlToClipboard(
{ view, inspector },
"url",
".invalid-background",
INVALID_IMAGE_URI
);
}
async function testCopyUrlToClipboard(
{ view, inspector },
type,
selector,
expected
) {
info("Select node in inspector panel");
await selectNode(selector, inspector);
info(
"Retrieve background-image link for selected node in current " +
"styleinspector view"
);
const property = await getBackgroundImageProperty(view, selector);
const imageLink = property.valueSpan.querySelector(".theme-link");
ok(imageLink, "Background-image link element found");
info("Simulate right click on the background-image URL");
const allMenuItems = openStyleContextMenuAndGetAllItems(view, imageLink);
const menuitemCopyUrl = allMenuItems.find(
item =>
item.label ===
STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyUrl")
);
const menuitemCopyImageDataUrl = allMenuItems.find(
item =>
item.label ===
STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyImageDataUrl")
);
info("Context menu is displayed");
ok(menuitemCopyUrl.visible, '"Copy URL" menu entry is displayed');
ok(
menuitemCopyImageDataUrl.visible,
'"Copy Image Data-URL" menu entry is displayed'
);
if (type == "data-uri") {
info("Click Copy Data URI and wait for clipboard");
await waitForClipboardPromise(() => {
return menuitemCopyImageDataUrl.click();
}, expected);
} else {
info("Click Copy URL and wait for clipboard");
await waitForClipboardPromise(() => {
return menuitemCopyUrl.click();
}, expected);
}
info("Hide context menu");
}
async function getBackgroundImageProperty(view, selector) {
const isRuleView = view instanceof CssRuleView;
if (isRuleView) {
return getRuleViewProperty(view, selector, "background-image", {
wait: true,
});
}
return getComputedViewProperty(view, "background-image");
}
|
