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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the breadcrumbs widget refreshes correctly when there are markup
// mutations, even if the currently selected node is a slotted node in the shadow DOM.
const TEST_URL = `data:text/html;charset=utf-8,
<test-component>
<div slot="slot1" id="el1">content</div>
</test-component>
<script>
'use strict';
customElements.define('test-component', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<slot class="slot-class" name="slot1"></slot>';
}
});
</script>`;
add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URL);
const { markup } = inspector;
const breadcrumbs = inspector.panelDoc.getElementById(
"inspector-breadcrumbs"
);
info("Find and expand the test-component shadow DOM host.");
const hostFront = await getNodeFront("test-component", inspector);
const hostContainer = markup.getContainer(hostFront);
await expandContainer(inspector, hostContainer);
info("Expand the shadow root");
const shadowRootContainer = hostContainer.getChildContainers()[0];
await expandContainer(inspector, shadowRootContainer);
const slotContainer = shadowRootContainer.getChildContainers()[0];
info("Select the slot node and wait for the breadcrumbs update");
const slotNodeFront = slotContainer.node;
let onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
inspector.selection.setNodeFront(slotNodeFront);
await onBreadcrumbsUpdated;
checkBreadcrumbsContent(breadcrumbs, [
"html",
"body",
"test-component",
"#shadow-root",
"slot.slot-class",
]);
info("Expand the slot");
await expandContainer(inspector, slotContainer);
const slotChildContainers = slotContainer.getChildContainers();
is(slotChildContainers.length, 1, "Expecting 1 slotted child");
info("Select the slotted node and wait for the breadcrumbs update");
const slottedNodeFront = slotChildContainers[0].node;
onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
inspector.selection.setNodeFront(slottedNodeFront);
await onBreadcrumbsUpdated;
checkBreadcrumbsContent(breadcrumbs, [
"html",
"body",
"test-component",
"div#el1",
]);
info(
"Update the classname of the real element and wait for the breadcrumbs update"
);
onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
content.document.getElementById("el1").setAttribute("class", "test");
});
await onBreadcrumbsUpdated;
checkBreadcrumbsContent(breadcrumbs, [
"html",
"body",
"test-component",
"div#el1.test",
]);
});
function checkBreadcrumbsContent(breadcrumbs, selectors) {
info("Check the output of the breadcrumbs widget");
const container = breadcrumbs.querySelector(".html-arrowscrollbox-inner");
is(
container.childNodes.length,
selectors.length,
"Correct number of buttons"
);
for (let i = 0; i < container.childNodes.length; i++) {
is(
container.childNodes[i].textContent,
selectors[i],
"Text content for button " + i + " is correct"
);
}
}
|
