DevTools: revealing existing nodes should expand children limit

To reveal and select a node, we would call 'onpopulate' on all of its ancestors without a TreeElement, which ensured that the node's own TreeElement would be constructed. When a parent has 500+ children, extra nodes are lazily built after clicking a "Show more" button. To allow revealing hidden nodes, this CL expands the limit if a parent is already populated. Bug: 890632 Change-Id: Ia7b916c21baf5b35dbce8a26eca1681c9bb0b243 Reviewed-on: https://chromium-review.googlesource.com/c/1320569 Commit-Queue: Erik Luo <luoe@chromium.org> Reviewed-by: Joel Einbinder <einbinder@chromium.org> Cr-Commit-Position: refs/heads/master@{#613231}

DevTools: revealing existing nodes should expand children limit
To reveal and select a node, we would call 'onpopulate' on all of its ancestors without a TreeElement, which ensured that the node's own TreeElement would be constructed. When a parent has 500+ children, extra nodes are lazily built after clicking a "Show more" button. To allow revealing hidden nodes, this CL expands the limit if a parent is already populated. Bug: 890632 Change-Id: Ia7b916c21baf5b35dbce8a26eca1681c9bb0b243 Reviewed-on: https://chromium-review.googlesource.com/c/1320569 Commit-Queue: Erik Luo <luoe@chromium.org> Reviewed-by: Joel Einbinder <einbinder@chromium.org> Cr-Commit-Position: refs/heads/master@{#613231}
eda6f1d4 · Erik Luo · Commit Bot · 92727df9 · eda6f1d4 · eda6f1d4
Commit eda6f1d4 authored Dec 03, 2018 by Erik Luo Committed by Commit Bot Dec 03, 2018
3 changed files
--- a/third_party/blink/renderer/devtools/front_end/elements/ElementsTreeOutline.js
+++ b/third_party/blink/renderer/devtools/front_end/elements/ElementsTreeOutline.js
@@ -441,9 +441,13 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline {

    // Walk down to populate each ancestor's children, to fill in the tree and the cache.
    for (let i = ancestors.length - 1; i >= 0; --i) {
+      const child = ancestors[i - 1] || node;
      const treeElement = ancestors[i][this._treeElementSymbol];
-      if (treeElement)
+      if (treeElement) {
        treeElement.onpopulate();  // fill the cache with the children of treeElement
+        if (child.index >= treeElement.expandedChildrenLimit())
+          this.setExpandedChildrenLimit(treeElement, child.index + 1);
+      }
    }

    return node[this._treeElementSymbol];

--- a/third_party/blink/web_tests/http/tests/devtools/elements/inspect-limited-children-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/inspect-limited-children-expected.txt
+Tests that elements hidden by "Show more" limit are revealed properly.
+
+=========== Loaded 5 children ===========
+- <html>
+    + <head>…</head>
+    - <body>
+        - <div>
+            - <div id="data">
+                + <div>…</div>
+                + <div>…</div>
+                + <div>…</div>
+                + <div>…</div>
+                + <div>…</div>
+                  Show All Nodes (5 More)
+              </div>
+          </div>
+      </body>
+  </html>
+=========== Revealing nested node behind "Show more" ===========
+- <html>
+    + <head>…</head>
+    - <body>
+        - <div>
+            - <div id="data">
+                + <div>…</div>
+                + <div>…</div>
+                + <div>…</div>
+                + <div>…</div>
+                + <div>…</div>
+                + <div>…</div>
+                + <div>…</div>
+                + <div>…</div>
+                + <div>…</div>
+                - <div>
+                      <span id="id10">10</span>
+                  </div>
+              </div>
+          </div>
+      </body>
+  </html>
+
--- a/third_party/blink/web_tests/http/tests/devtools/elements/inspect-limited-children.js
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/inspect-limited-children.js
+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(`Tests that elements hidden by "Show more" limit are revealed properly.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+    <div>
+      <div id="data">
+        <div><span id="id1">1</span></div>
+        <div><span id="id2">2</span></div>
+        <div><span id="id3">3</span></div>
+        <div><span id="id4">4</span></div>
+        <div><span id="id5">5</span></div>
+        <div><span id="id6">6</span></div>
+        <div><span id="id7">7</span></div>
+        <div><span id="id8">8</span></div>
+        <div><span id="id9">9</span></div>
+        <div><span id="id10">10</span></div>
+      </div>
+    </div>
+    `);
+
+  const containerNode = await ElementsTestRunner.nodeWithIdPromise('data');
+  var containerTreeElement = ElementsTestRunner.firstElementsTreeOutline().findTreeElement(containerNode);
+  containerTreeElement._expandedChildrenLimit = 5;
+  containerTreeElement.reveal();
+  containerTreeElement.expand();
+  TestRunner.deprecatedRunAfterPendingDispatches(step2);
+
+  async function step2() {
+    TestRunner.addResult('=========== Loaded 5 children ===========');
+    dumpElementsTree();
+
+    TestRunner.addResult('=========== Revealing nested node behind "Show more" ===========');
+    const hiddenNode = await ElementsTestRunner.nodeWithIdPromise('id10');
+    await ElementsTestRunner.selectNode(hiddenNode);
+    dumpElementsTree();
+    TestRunner.completeTest();
+  }
+
+  function dumpElementsTree() {
+    ElementsTestRunner.dumpElementsTree(null, 0);
+  }
+})();