DevTools: streamline pseudo layout object traversal for readability.

Change-Id: I0603dbbfabdad0882ad81b5f5dc897ccd10c3d2c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1757208Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Commit-Queue: Pavel Feldman <pfeldman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#688642}

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

@@ -471,8 +471,6 @@ int InspectorDOMSnapshotAgent::VisitNode(Node* node, int parent_index) {
       if (InspectorDOMAgent::GetPseudoElementType(element->GetPseudoId(),
                                                   &pseudo_type)) {
         SetRare(nodes->getPseudoType(nullptr), index, pseudo_type);
-        if (node->GetLayoutObject())
-          VisitPseudoLayoutChildren(node, index);
       }
     } else {
       VisitPseudoElements(element, index);
@@ -542,15 +540,6 @@ void InspectorDOMSnapshotAgent::VisitContainerChildren(Node* container,
   }
 }
 
-void InspectorDOMSnapshotAgent::VisitPseudoLayoutChildren(Node* pseudo_node,
-                                                           int index) {
-  for (LayoutObject* child = pseudo_node->GetLayoutObject()->SlowFirstChild();
-       child; child = child->NextSibling()) {
-    if (child->IsAnonymous())
-      BuildLayoutTreeNode(child, pseudo_node, index);
-  }
-}
-
 void InspectorDOMSnapshotAgent::VisitPseudoElements(Element* parent,
                                                     int parent_index) {
   for (PseudoId pseudo_id :
@@ -579,6 +568,18 @@ int InspectorDOMSnapshotAgent::BuildLayoutTreeNode(LayoutObject* layout_object,
                                                    int node_index) {
   if (!layout_object)
     return -1;
+
+  if (node->GetPseudoId()) {
+    // For pseudo elements, visit the children of the layout object.
+    // Combinding ::before { content: 'hello' } and ::first-letter would produce
+    // two boxes for the ::before node, one for 'hello' and one for 'ello'.
+    for (LayoutObject* child = layout_object->SlowFirstChild(); child;
+         child = child->NextSibling()) {
+      if (child->IsAnonymous())
+        BuildLayoutTreeNode(child, node, node_index);
+    }
+  }
+
   auto* layout_tree_snapshot = document_->getLayout();
   auto* text_box_snapshot = document_->getTextBoxes();
 

third_party/blink/renderer/core/inspector/inspector_dom_snapshot_agent.h

@@ -97,7 +97,6 @@ class CORE_EXPORT InspectorDOMSnapshotAgent final
   void VisitDocument(Document*);
   int VisitNode(Node*, int parent_index);
   void VisitContainerChildren(Node* container, int parent_index);
-  void VisitPseudoLayoutChildren(Node* pseudo_node, int index);
   void VisitPseudoElements(Element* parent, int parent_index);
   std::unique_ptr<protocol::Array<int>> BuildArrayForElementAttributes(Node*);
   int BuildLayoutTreeNode(LayoutObject*, Node*, int node_index);
@@ -125,8 +124,6 @@ class CORE_EXPORT InspectorDOMSnapshotAgent final
       documents_;
   std::unique_ptr<protocol::DOMSnapshot::DocumentSnapshot> document_;
 
-  // Maps a style string vector to an index in |computed_styles_|. Used to avoid
-  // duplicate entries in |computed_styles_|.
   bool include_snapshot_dom_rects_ = false;
   std::unique_ptr<CSSPropertyFilter> css_property_filter_;
   // Maps a PaintLayer to its paint order index.

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

@@ -260,8 +260,6 @@ int LegacyDOMSnapshotAgent::VisitNode(Node* node,
       if (InspectorDOMAgent::GetPseudoElementType(element->GetPseudoId(),
                                                   &pseudo_type)) {
         value->setPseudoType(pseudo_type);
-        if (node->GetLayoutObject())
-          VisitPseudoLayoutChildren(node, index);
       }
     } else {
       value->setPseudoElementIndexes(
@@ -324,15 +322,6 @@ LegacyDOMSnapshotAgent::VisitContainerChildren(
   return children;
 }
 
-void LegacyDOMSnapshotAgent::VisitPseudoLayoutChildren(Node* pseudo_node,
-                                                       int index) {
-  for (LayoutObject* child = pseudo_node->GetLayoutObject()->SlowFirstChild();
-       child; child = child->NextSibling()) {
-    if (child->IsAnonymous())
-      VisitLayoutTreeNode(child, pseudo_node, index);
-  }
-}
-
 std::unique_ptr<protocol::Array<int>>
 LegacyDOMSnapshotAgent::VisitPseudoElements(
     Element* parent,
@@ -379,6 +368,15 @@ int LegacyDOMSnapshotAgent::VisitLayoutTreeNode(LayoutObject* layout_object,
   if (!layout_object)
     return -1;
 
+  if (node->GetPseudoId()) {
+    // For pseudo elements, visit the children of the layout object.
+    for (LayoutObject* child = layout_object->SlowFirstChild(); child;
+         child = child->NextSibling()) {
+      if (child->IsAnonymous())
+        VisitLayoutTreeNode(child, node, node_index);
+    }
+  }
+
   auto layout_tree_node =
       protocol::DOMSnapshot::LayoutTreeNode::create()
           .setDomNodeIndex(node_index)

third_party/blink/renderer/core/inspector/legacy_dom_snapshot_agent.h

@@ -53,9 +53,6 @@ class CORE_EXPORT LegacyDOMSnapshotAgent {
       bool include_event_listeners,
       bool include_user_agent_shadow_tree);
 
-  // Collect LayoutTreeNodes owned by a pseudo element.
-  void VisitPseudoLayoutChildren(Node* pseudo_node, int index);
-
   std::unique_ptr<protocol::Array<int>> VisitPseudoElements(
       Element* parent,
       int index,

third_party/blink/web_tests/inspector-protocol/dom-snapshot/dom-snapshot-captureSnapshot-pseudo-element.js

+(async function(testRunner) {
+  var {page, session, dp} = await testRunner.startURL('../resources/dom-snapshot-pseudo-element.html', 'Tests DOMSnapshot.getSnapshot exports layout tree nodes associated with pseudo elements.');
+
+  function stabilize(key, value) {
+    var unstableKeys = ['documentURL', 'baseURL', 'frameId', 'backendNodeId'];
+    if (unstableKeys.indexOf(key) !== -1)
+      return '<' + typeof(value) + '>';
+    return value;
+  }
+
+  var response = await dp.DOMSnapshot.captureSnapshot({'computedStyles': ['font-weight', 'color'], 'includeEventListeners': true});
+  if (response.error) {
+    testRunner.log(response);
+  } else {
+    response.result.strings[0] = '';
+    response.result.strings[1] = '';
+    response.result.strings[2] = '';
+    testRunner.log(JSON.stringify(response.result, stabilize, 2));
+  }
+  testRunner.completeTest();
+})

third_party/blink/web_tests/inspector-protocol/dom-snapshot/dom-snapshot-getSnapshot-pseudo-element-expected.txt

@@ -126,7 +126,7 @@ Tests DOMSnapshot.getSnapshot exports layout tree nodes associated with pseudo e
       "nodeName": "<pseudo:first-letter>",
       "nodeValue": "",
       "backendNodeId": "<number>",
-      "layoutNodeIndex": 4,
+      "layoutNodeIndex": 5,
       "pseudoType": "first-letter"
     },
     {
@@ -166,7 +166,7 @@ Tests DOMSnapshot.getSnapshot exports layout tree nodes associated with pseudo e
       "nodeName": "<pseudo:first-letter>",
       "nodeValue": "",
       "backendNodeId": "<number>",
-      "layoutNodeIndex": 8,
+      "layoutNodeIndex": 9,
       "pseudoType": "first-letter"
     },
     {
@@ -217,7 +217,7 @@ Tests DOMSnapshot.getSnapshot exports layout tree nodes associated with pseudo e
       "nodeName": "<pseudo:first-letter>",
       "nodeValue": "",
       "backendNodeId": "<number>",
-      "layoutNodeIndex": 13,
+      "layoutNodeIndex": 14,
       "pseudoType": "first-letter"
     },
     {
@@ -225,7 +225,7 @@ Tests DOMSnapshot.getSnapshot exports layout tree nodes associated with pseudo e
       "nodeName": "<pseudo:before>",
       "nodeValue": "",
       "backendNodeId": "<number>",
-      "layoutNodeIndex": 15,
+      "layoutNodeIndex": 19,
       "pseudoType": "before"
     },
     {
@@ -284,16 +284,6 @@ Tests DOMSnapshot.getSnapshot exports layout tree nodes associated with pseudo e
       },
       "styleIndex": 0
     },
-    {
-      "domNodeIndex": 11,
-      "boundingBox": {
-        "x": 8,
-        "y": 18,
-        "width": 10,
-        "height": 10
-      },
-      "styleIndex": 1
-    },
     {
       "domNodeIndex": 11,
       "boundingBox": {
@@ -317,6 +307,16 @@ Tests DOMSnapshot.getSnapshot exports layout tree nodes associated with pseudo e
       ],
       "styleIndex": 1
     },
+    {
+      "domNodeIndex": 11,
+      "boundingBox": {
+        "x": 8,
+        "y": 18,
+        "width": 10,
+        "height": 10
+      },
+      "styleIndex": 1
+    },
     {
       "domNodeIndex": 12,
       "boundingBox": {
@@ -360,16 +360,6 @@ Tests DOMSnapshot.getSnapshot exports layout tree nodes associated with pseudo e
       },
       "styleIndex": 0
     },
-    {
-      "domNodeIndex": 15,
-      "boundingBox": {
-        "x": 8,
-        "y": 18,
-        "width": 10,
-        "height": 10
-      },
-      "styleIndex": 1
-    },
     {
       "domNodeIndex": 15,
       "boundingBox": {
@@ -393,6 +383,16 @@ Tests DOMSnapshot.getSnapshot exports layout tree nodes associated with pseudo e
       ],
       "styleIndex": 1
     },
+    {
+      "domNodeIndex": 15,
+      "boundingBox": {
+        "x": 8,
+        "y": 18,
+        "width": 10,
+        "height": 10
+      },
+      "styleIndex": 1
+    },
     {
       "domNodeIndex": 16,
       "boundingBox": {
@@ -456,16 +456,6 @@ Tests DOMSnapshot.getSnapshot exports layout tree nodes associated with pseudo e
       },
       "styleIndex": 0
     },
-    {
-      "domNodeIndex": 20,
-      "boundingBox": {
-        "x": 8,
-        "y": 110,
-        "width": 10,
-        "height": 10
-      },
-      "styleIndex": 2
-    },
     {
       "domNodeIndex": 20,
       "boundingBox": {
@@ -490,14 +480,14 @@ Tests DOMSnapshot.getSnapshot exports layout tree nodes associated with pseudo e
       "styleIndex": 2
     },
     {
-      "domNodeIndex": 21,
+      "domNodeIndex": 20,
       "boundingBox": {
         "x": 8,
         "y": 110,
-        "width": 200,
+        "width": 10,
         "height": 10
       },
-      "styleIndex": 0
+      "styleIndex": 2
     },
     {
       "domNodeIndex": 21,
@@ -578,6 +568,16 @@ Tests DOMSnapshot.getSnapshot exports layout tree nodes associated with pseudo e
       ],
       "styleIndex": 0
     },
+    {
+      "domNodeIndex": 21,
+      "boundingBox": {
+        "x": 8,
+        "y": 110,
+        "width": 200,
+        "height": 10
+      },
+      "styleIndex": 0
+    },
     {
       "domNodeIndex": 22,
       "boundingBox": {