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
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
// Test that hovering over the markup-view's containers doesn't always show the
// highlighter, depending on the type of node hovered over.
const TEST_PAGE = URL_ROOT + "doc_inspector_highlighter-comments.html";
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(
TEST_PAGE
);
const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
const markupView = inspector.markup;
await selectNode("p", inspector);
info("Hovering over #id1 and waiting for highlighter to appear.");
await hoverElement("#id1");
await assertHighlighterShownOn("#id1");
info("Hovering over comment node and ensuring highlighter doesn't appear.");
await hoverComment();
await assertHighlighterHidden();
info("Hovering over #id1 again and waiting for highlighter to appear.");
await hoverElement("#id1");
await assertHighlighterShownOn("#id1");
info("Hovering over #id2 and waiting for highlighter to appear.");
await hoverElement("#id2");
await assertHighlighterShownOn("#id2");
info("Hovering over <script> and ensuring highlighter doesn't appear.");
await hoverElement("script");
await assertHighlighterHidden();
info("Hovering over #id3 and waiting for highlighter to appear.");
await hoverElement("#id3");
await assertHighlighterShownOn("#id3");
info("Hovering over hidden #id4 and ensuring highlighter doesn't appear.");
await hoverElement("#id4");
await assertHighlighterHidden();
info("Hovering over a text node and waiting for highlighter to appear.");
await hoverTextNode("Visible text node");
await assertHighlighterShownOnTextNode("body", 14);
function hoverContainer(container) {
const onHighlighterShown = waitForHighlighterTypeShown(
inspector.highlighters.TYPES.BOXMODEL
);
container.tagLine.scrollIntoView();
EventUtils.synthesizeMouse(
container.tagLine,
2,
2,
{ type: "mousemove" },
markupView.doc.defaultView
);
return onHighlighterShown;
}
async function hoverElement(selector) {
info(`Hovering node ${selector} in the markup view`);
const container = await getContainerForSelector(selector, inspector);
return hoverContainer(container);
}
function hoverComment() {
info("Hovering the comment node in the markup view");
for (const [node, container] of markupView._containers) {
if (node.nodeType === Node.COMMENT_NODE) {
return hoverContainer(container);
}
}
return null;
}
function hoverTextNode(text) {
info(`Hovering the text node "${text}" in the markup view`);
const container = [...markupView._containers].filter(([nodeFront]) => {
return (
nodeFront.nodeType === Node.TEXT_NODE &&
nodeFront._form.nodeValue.trim() === text.trim()
);
})[0][1];
return hoverContainer(container);
}
async function assertHighlighterShownOn(selector) {
ok(
await highlighterTestFront.assertHighlightedNode(selector),
"Highlighter is shown on the right node: " + selector
);
}
async function assertHighlighterShownOnTextNode(
parentSelector,
childNodeIndex
) {
ok(
await highlighterTestFront.assertHighlightedTextNode(
parentSelector,
childNodeIndex
),
"Highlighter is shown on the right text node"
);
}
async function assertHighlighterHidden() {
const isVisible = await highlighterTestFront.isHighlighting();
ok(!isVisible, "Highlighter is hidden");
}
});
|
