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
|
/* 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 frame selection switching at toolbox level when using the inspector
const FrameURL =
"data:text/html;charset=UTF-8," +
encodeURI('<div id="in-iframe">frame</div>');
const URL =
"data:text/html;charset=UTF-8," +
encodeURI('<iframe src="' + FrameURL + '"></iframe><div id="top">top</div>');
add_task(async function () {
const { inspector, toolbox } = await openInspectorForURL(URL);
// Verify we are on the top level document
await assertMarkupViewAsTree(
`
body
iframe!ignore-children
div id="top"`,
"body",
inspector
);
assertMarkupViewIsLoaded(inspector);
// Verify that the frame map button is empty at the moment.
const btn = toolbox.doc.getElementById("command-button-frames");
ok(!btn.firstChild, "The frame list button doesn't have any children");
// Open frame menu and wait till it's available on the screen.
const panel = toolbox.doc.getElementById("command-button-frames-panel");
btn.click();
ok(panel, "popup panel has created.");
await waitUntil(() => panel.classList.contains("tooltip-visible"));
// Verify that the menu is populated.
const menuList = toolbox.doc.getElementById("toolbox-frame-menu");
const frames = Array.from(menuList.querySelectorAll(".command"));
is(frames.length, 2, "We have both frames in the menu");
frames.sort(function (a, b) {
return a.children[0].innerHTML.localeCompare(b.children[0].innerHTML);
});
is(
frames[0].querySelector(".label").textContent,
FrameURL,
"Got top level document in the list"
);
is(
frames[1].querySelector(".label").textContent,
URL,
"Got iframe document in the list"
);
// Listen to will-navigate to check if the view is empty
const { resourceCommand } = toolbox.commands;
const { onResource: willNavigate } =
await resourceCommand.waitForNextResource(
resourceCommand.TYPES.DOCUMENT_EVENT,
{
ignoreExistingResources: true,
predicate(resource) {
return resource.name == "will-navigate";
},
}
);
willNavigate.then(() => {
info("Navigation to the iframe has started, the inspector should be empty");
assertMarkupViewIsEmpty(inspector);
});
// Only select the iframe after we are able to select an element from the top
// level document.
let newRoot = inspector.once("new-root");
await selectNode("#top", inspector);
info("Select the iframe");
frames[0].click();
if (!isEveryFrameTargetEnabled()) {
await willNavigate;
}
await newRoot;
info("The iframe is selected, check that the markup view was updated");
await assertMarkupViewAsTree(
`
body
div id="in-iframe"`,
"body",
inspector
);
assertMarkupViewIsLoaded(inspector);
info(
"Remove the iframe and check that the inspector gets updated to show the top level frame markup"
);
newRoot = inspector.once("new-root");
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
content.document.querySelector("iframe").remove();
});
await newRoot;
await assertMarkupViewAsTree(
`
body
div id="top"`,
"body",
inspector
);
assertMarkupViewIsLoaded(inspector);
});
function assertMarkupViewIsLoaded(inspector) {
const markupViewBox = inspector.panelDoc.getElementById("markup-box");
is(markupViewBox.childNodes.length, 1, "The markup-view is loaded");
}
function assertMarkupViewIsEmpty(inspector) {
const markupFrame = inspector._markupFrame;
is(
markupFrame.contentDocument.getElementById("root").childNodes.length,
0,
"The markup-view is unloaded"
);
}
|
