[IncrementalShadowDOM] Support slot's expanded nodes in devtools

Support slot's expanded nodes, using slot's assigned nodes, for IncrementalShadowDOM.
Inspector can show slot's assigned nodes correctly even in IncrementalShadowDOM.

virtual/incremental-shadow-dom/http/tests/devtools/elements/shadow/shadow-distribution.js
test is still failing, however, this is not a regression of IncrementalShadowDOM.

See crbug.com/840238 for details. This CL adds an expected.txt for the test.

Bug: 776656,840238
Change-Id: I037caf9184e9be42525575bf2e027cf000bdbf7a
Reviewed-on: https://chromium-review.googlesource.com/1029567
Commit-Queue: Hayato Ito <hayato@chromium.org>
Reviewed-by: Takayoshi Kochi <kochi@chromium.org>
Reviewed-by: Rakina Zata Amni <rakina@chromium.org>
Cr-Commit-Position: refs/heads/master@{#556414}

third_party/WebKit/LayoutTests/TestExpectations

@@ -1720,7 +1720,6 @@ crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/ord
 # ====== IncrementalShadowDOM-only failures from here ======
 
 crbug.com/776656 virtual/incremental-shadow-dom/external/wpt/shadow-dom/untriaged/styles/test-003.html [ Failure ]
-crbug.com/776656 virtual/incremental-shadow-dom/http/tests/devtools/elements/shadow/shadow-distribution.js [ Failure ]
 
 # ====== IncrementalShadowDOM-only failures until here ======
 

third_party/WebKit/LayoutTests/virtual/incremental-shadow-dom/http/tests/devtools/elements/shadow/README.txt

 # This suite runs the tests in http/tests/devtools/elements/shadow with
 # --enable-blink-features=IncrementalShadowDOM.
 # See crbug.com/776656 for details.
+# See crbug.com/840238 for http/tests/devtools/elements/shadow-distribution.js

third_party/WebKit/LayoutTests/virtual/incremental-shadow-dom/http/tests/devtools/elements/shadow/shadow-distribution-expected.txt

+Tests that elements panel updates dom tree structure upon distribution in shadow dom.
+
+
+Running: createHost1
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot1">
+          </slot>
+        - <slot id="slot2" name="slot2">
+          </slot>
+        - <slot id="slot3">
+          </slot>
+  </div>
+
+Running: createChild1
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot1">
+          </slot>
+        - <slot id="slot2" name="slot2">
+              ↪ <span>
+          </slot>
+        - <slot id="slot3">
+          </slot>
+      <span id="child1" slot="slot2"></span>
+  </div>
+
+Running: createChild2
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot1">
+          </slot>
+        - <slot id="slot2" name="slot2">
+              ↪ <span>
+          </slot>
+        - <slot id="slot3">
+              ↪ <div>
+          </slot>
+      <span id="child1" slot="slot2"></span>
+      <div id="child2"></div>
+  </div>
+
+Running: createChild3
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot1">
+          </slot>
+        - <slot id="slot2" name="slot2">
+              ↪ <span>
+              ↪ <h1>
+          </slot>
+        - <slot id="slot3">
+              ↪ <div>
+          </slot>
+      <span id="child1" slot="slot2"></span>
+      <div id="child2"></div>
+      <h1 id="child3" slot="slot2"></h1>
+  </div>
+
+Running: createChild4
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot1">
+              ↪ <h2>
+          </slot>
+        - <slot id="slot2" name="slot2">
+              ↪ <span>
+              ↪ <h1>
+          </slot>
+        - <slot id="slot3">
+              ↪ <div>
+          </slot>
+      <span id="child1" slot="slot2"></span>
+      <div id="child2"></div>
+      <h1 id="child3" slot="slot2"></h1>
+      <h2 id="child4" slot="slot1"></h2>
+  </div>
+
+Running: createChild5
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot1">
+              ↪ <h2>
+          </slot>
+        - <slot id="slot2" name="slot2">
+              ↪ <span>
+              ↪ <h1>
+          </slot>
+        - <slot id="slot3">
+              ↪ <div>
+          </slot>
+      <span id="child1" slot="slot2"></span>
+      <div id="child2"></div>
+      <h1 id="child3" slot="slot2"></h1>
+      <h2 id="child4" slot="slot1"></h2>
+      <h3 id="child5" slot="slot3"></h3>
+  </div>
+
+Running: modifyChild1
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot1">
+              ↪ <h2>
+          </slot>
+        - <slot id="slot2" name="slot2">
+              ↪ <span>
+              ↪ <h1>
+          </slot>
+        - <slot id="slot3">
+              ↪ <div>
+          </slot>
+      <span id="child1" slot="slot1"></span>
+      <div id="child2"></div>
+      <h1 id="child3" slot="slot2"></h1>
+      <h2 id="child4" slot="slot1"></h2>
+      <h3 id="child5" slot="slot3"></h3>
+  </div>
+
+Running: modifyChild4
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot1">
+              ↪ <h2>
+          </slot>
+        - <slot id="slot2" name="slot2">
+              ↪ <span>
+              ↪ <h1>
+          </slot>
+        - <slot id="slot3">
+              ↪ <div>
+          </slot>
+      <span id="child1" slot="slot1"></span>
+      <div id="child2"></div>
+      <h1 id="child3" slot="slot2"></h1>
+      <h2 id="child4"></h2>
+      <h3 id="child5" slot="slot3"></h3>
+  </div>
+
+Running: modifySlot1
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot3">
+              ↪ <h2>
+          </slot>
+        - <slot id="slot2" name="slot2">
+              ↪ <span>
+              ↪ <h1>
+          </slot>
+        - <slot id="slot3">
+              ↪ <div>
+          </slot>
+      <span id="child1" slot="slot1"></span>
+      <div id="child2"></div>
+      <h1 id="child3" slot="slot2"></h1>
+      <h2 id="child4"></h2>
+      <h3 id="child5" slot="slot3"></h3>
+  </div>
+
+Running: modifySlot2
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot3">
+              ↪ <h2>
+          </slot>
+        - <slot id="slot2" name="slot1">
+              ↪ <span>
+              ↪ <h1>
+          </slot>
+        - <slot id="slot3">
+              ↪ <div>
+          </slot>
+      <span id="child1" slot="slot1"></span>
+      <div id="child2"></div>
+      <h1 id="child3" slot="slot2"></h1>
+      <h2 id="child4"></h2>
+      <h3 id="child5" slot="slot3"></h3>
+  </div>
+
+Running: removeChild3
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot3">
+              ↪ <h3>
+          </slot>
+        - <slot id="slot2" name="slot1">
+              ↪ <span>
+          </slot>
+        - <slot id="slot3">
+              ↪ <div>
+              ↪ <h2>
+          </slot>
+      <span id="child1" slot="slot1"></span>
+      <div id="child2"></div>
+      <h2 id="child4"></h2>
+      <h3 id="child5" slot="slot3"></h3>
+  </div>
+
+Running: removeChild1
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot3">
+              ↪ <h3>
+          </slot>
+        - <slot id="slot2" name="slot1">
+          </slot>
+        - <slot id="slot3">
+              ↪ <div>
+              ↪ <h2>
+          </slot>
+      <div id="child2"></div>
+      <h2 id="child4"></h2>
+      <h3 id="child5" slot="slot3"></h3>
+  </div>
+
+Running: removeSlot1
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot2" name="slot1">
+          </slot>
+        - <slot id="slot3">
+              ↪ <div>
+              ↪ <h2>
+          </slot>
+      <div id="child2"></div>
+      <h2 id="child4"></h2>
+      <h3 id="child5" slot="slot3"></h3>
+  </div>
+
+Running: createHost2
+- <div id="host2">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot3">
+          </slot>
+  </div>
+
+Running: moveChild5FromHost1ToHost2
+- <div id="host2">
+    - #shadow-root (open)
+        - <slot id="slot1" name="slot3">
+              ↪ <h3>
+          </slot>
+      <h3 id="child5" slot="slot3"></h3>
+  </div>
+
+Running: modifyChild4
+- <div id="host1">
+    - #shadow-root (open)
+        - <slot id="slot2" name="slot1">
+          </slot>
+        - <slot id="slot3">
+              ↪ <div>
+              ↪ <h2>
+          </slot>
+      <div id="child2"></div>
+      <h2 id="child4" slot="slot1"></h2>
+  </div>
+

third_party/blink/renderer/core/html/html_slot_element.cc

@@ -553,8 +553,6 @@ void HTMLSlotElement::LazyReattachNodesByDynamicProgramming(
 
 void HTMLSlotElement::LazyReattachDistributedNodesIfNeeded() {
   DCHECK(!RuntimeEnabledFeatures::IncrementalShadowDOMEnabled());
-  // TODO(hayato): Move this probe to a better place.
-  probe::didPerformSlotDistribution(this);
 
   LazyReattachNodesIfNeeded(old_distributed_nodes_, distributed_nodes_);
   old_distributed_nodes_.clear();
@@ -565,6 +563,7 @@ void HTMLSlotElement::LazyReattachNodesIfNeeded(
     const HeapVector<Member<Node>>& nodes2) {
   if (nodes1 == nodes2)
     return;
+  probe::didPerformSlotDistribution(this);
 
   if (nodes1.size() + 1 > kLCSTableSizeLimit ||
       nodes2.size() + 1 > kLCSTableSizeLimit) {

third_party/blink/renderer/core/html/html_slot_element.h

@@ -145,8 +145,8 @@ class CORE_EXPORT HTMLSlotElement final : public HTMLElement {
 
   const HeapVector<Member<Node>>& ChildrenInFlatTreeIfAssignmentIsSupported();
 
-  static void LazyReattachNodesIfNeeded(const HeapVector<Member<Node>>& nodes1,
-                                        const HeapVector<Member<Node>>& nodes2);
+  void LazyReattachNodesIfNeeded(const HeapVector<Member<Node>>& nodes1,
+                                 const HeapVector<Member<Node>>& nodes2);
   static void LazyReattachNodesNaive(const HeapVector<Member<Node>>& nodes1,
                                      const HeapVector<Member<Node>>& nodes2);
   static void LazyReattachNodesByDynamicProgramming(

third_party/blink/renderer/core/inspector/inspector_dom_agent.cc

@@ -1656,12 +1656,25 @@ InspectorDOMAgent::BuildArrayForDistributedNodes(
 
 std::unique_ptr<protocol::Array<protocol::DOM::BackendNode>>
 InspectorDOMAgent::BuildDistributedNodesForSlot(HTMLSlotElement* slot_element) {
+  // TODO(hayato): In Shadow DOM v1, the concept of distributed nodes should
+  // not be used anymore. DistributedNodes should be replaced with
+  // AssignedNodes() when IncrementalShadowDOM becomes stable and Shadow DOM v0
+  // is removed.
   std::unique_ptr<protocol::Array<protocol::DOM::BackendNode>>
       distributed_nodes = protocol::Array<protocol::DOM::BackendNode>::create();
   if (RuntimeEnabledFeatures::IncrementalShadowDOMEnabled()) {
-    // TODO(hayato): Support distributed_nodes for IncrementalShadowDOM.
-    // We might use HTMLSlotElement::flat_tree_children here, however, we don't
-    // want to expose it, as of now.
+    for (auto& node : slot_element->AssignedNodes()) {
+      if (IsWhitespace(node))
+        continue;
+
+      std::unique_ptr<protocol::DOM::BackendNode> backend_node =
+          protocol::DOM::BackendNode::create()
+              .setNodeType(node->getNodeType())
+              .setNodeName(node->nodeName())
+              .setBackendNodeId(DOMNodeIds::IdForNode(node))
+              .build();
+      distributed_nodes->addItem(std::move(backend_node));
+    }
     return distributed_nodes;
   }
   for (Node* node = slot_element->FirstDistributedNode(); node;