Bug 1473902 - Wrong node count in 'show all nodes' button. r=jdescottes
MozReview-Commit-ID: BwBqRVGli3b
--- a/devtools/client/inspector/markup/test/browser.ini
+++ b/devtools/client/inspector/markup/test/browser.ini
@@ -173,16 +173,17 @@ subsuite = clipboard
[browser_markup_shadowdom_dynamic.js]
[browser_markup_shadowdom_hover.js]
[browser_markup_shadowdom_maxchildren.js]
[browser_markup_shadowdom_mutations_shadow.js]
[browser_markup_shadowdom_navigation.js]
[browser_markup_shadowdom_nested_pick_inspect.js]
[browser_markup_shadowdom_noslot.js]
[browser_markup_shadowdom_shadowroot_mode.js]
+[browser_markup_shadowdom_show_nodes_button.js]
[browser_markup_shadowdom_slotupdate.js]
[browser_markup_tag_delete_whitespace_node.js]
[browser_markup_tag_edit_01.js]
[browser_markup_tag_edit_02.js]
[browser_markup_tag_edit_03.js]
[browser_markup_tag_edit_04-backspace.js]
[browser_markup_tag_edit_04-delete.js]
[browser_markup_tag_edit_05.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_show_nodes_button.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the "Show all 'N' nodes" button displays the proper value
+
+const NODE_COUNT = 101;
+const TEST_URL = `data:text/html;charset=utf-8,
+ <test-component>
+ </test-component>
+
+ <script>
+ 'use strict';
+ for (let i = 0; i < ${NODE_COUNT}; i++) {
+ const div = document.createElement("div");
+ div.innerHTML = i;
+ document.querySelector('test-component').appendChild(div);
+ }
+ customElements.define('test-component', class extends HTMLElement {
+ constructor() {
+ super();
+ let shadowRoot = this.attachShadow({mode: 'open'});
+ shadowRoot.innerHTML = '<slot></slot>';
+ }
+ });
+ </script>`;
+
+add_task(async function() {
+ await enableWebComponents();
+
+ const { inspector } = await openInspectorForURL(TEST_URL);
+ const { markup } = inspector;
+
+ info("Find and expand the component shadow DOM host.");
+ const hostFront = await getNodeFront("test-component", inspector);
+ const hostContainer = markup.getContainer(hostFront);
+ await expandContainer(inspector, hostContainer);
+ const shadowRootContainer = hostContainer.getChildContainers()[0];
+ await expandContainer(inspector, shadowRootContainer);
+
+ info("Expand the slot");
+ const slotContainer = shadowRootContainer.getChildContainers()[0];
+ await expandContainer(inspector, slotContainer);
+
+ info("Find the 'Show all nodes' button");
+ const button = slotContainer.elt.querySelector("button");
+ console.log(button);
+ ok(button.innerText.includes(NODE_COUNT),
+ "'Show all nodes' button contains correct node count");
+});
+
--- a/devtools/server/actors/inspector/node.js
+++ b/devtools/server/actors/inspector/node.js
@@ -198,17 +198,18 @@ const NodeActor = protocol.ActorClassWit
const hasSVGDocument = rawNode.getSVGDocument && rawNode.getSVGDocument();
if (numChildren === 0 && (hasContentDocument || hasSVGDocument)) {
// This might be an iframe with virtual children.
numChildren = 1;
}
// Normal counting misses ::before/::after. Also, some anonymous children
// may ultimately be skipped, so we have to consult with the walker.
- if (numChildren === 0 || hasAnonChildren || isShadowHost(this.rawNode)) {
+ if (numChildren === 0 || hasAnonChildren || isShadowHost(this.rawNode) ||
+ isShadowAnonymous(this.rawNode)) {
numChildren = this.walker.countChildren(this);
}
return numChildren;
},
get computedStyle() {
if (!this._computedStyle) {