Bug 174968 – Web Inspector: add TreeElement virtualization for the Recording tab

• Component: Web Inspector
• Status: RESOLVED FIXED

[Devin Rousso]

When a single frame has over ~3000 actions, it becomes very slow, bordering on unusable.  The main reason for this slowdown is the massive number of DOM elements, so adding/removing them depending on what's visible (plus some extra buffer) would drastically improve performance.

[Devin Rousso]

Created attachment 316936 [details]
Patch

[Build Bot]

Comment on attachment 316936 [details]
Patch

Attachment 316936 [details] did not pass mac-debug-ews (mac):
Output: http://webkit-queues.webkit.org/results/4240134

New failing tests:
fast/dom/Window/HTMLBodyElement-window-eventListener-attributes.html

[Build Bot]

Created attachment 316964 [details]
Archive of layout-test-results from ews115 for mac-elcapitan

The attached test failures were seen while running run-webkit-tests on the mac-debug-ews.
Bot: ews115  Port: mac-elcapitan  Platform: Mac OS X 10.11.6

[Devin Rousso]

Comment on attachment 316936 [details]
Patch

Unrelated test failure.

[Joseph Pecoraro]

Comment on attachment 316936 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=316936&action=review

r=me, we should apply this to the CallStackTreeOutline in the debugger tab, which will need narrowing down of the scroll container.

> Source/WebInspectorUI/ChangeLog:18
> +        the TreeOutline node still takes up the same amount of space after some of the TreeElement's

Grammar: "TreeElement's" => "TreeElements"

> Source/WebInspectorUI/UserInterface/Views/TreeElement.js:466
> +        if (this.treeOutline)
> +            this.treeOutline.updateVirtualizedElements(this);

Move this after the onreveal.

> Source/WebInspectorUI/UserInterface/Views/TreeOutline.js:648
> +        if (isNaN(treeItemHeight))

Just console.assert !NaN

> Source/WebInspectorUI/UserInterface/Views/TreeOutline.js:666
> +        function walk(parent, callback) {

When walk recurses, the shouldReturn callback might return `true`, and then we will continue to walk when we un-nest the recursion.

You can solve this with 2 return values:

    {shouldReturn, count}

Or avoid recursion and do some cool iterative stack based solution.

> Source/WebInspectorUI/UserInterface/Views/TreeOutline.js:688
> +        let extraRows = Math.max(numberToShow * 5, 50);

This variable name is vague since you end up doing (extraRows * 2) all over the place. This is the number of pad rows you are applying to each side.

> Source/WebInspectorUI/UserInterface/Views/TreeOutline.js:697
> +            let index = walk(this, ({treeElement, count}) => {
> +                if (treeElement === focusedTreeElement)
> +                    return true;
> +                return false;
> +            });

Style: Simplify this

    let index = walk(this, ({treeElement}) => treeElement === focusedTreeElement);

> Source/WebInspectorUI/UserInterface/Views/TreeOutline.js:703
> +            }
> +            else if (index > lastItem) {

Style: else on the same line

> Source/WebInspectorUI/UserInterface/Views/TreeOutline.js:720
> +        this._virtualizedTopSpacer.style.setProperty("height", (Math.max(firstItem, 0) * this._virtualizedTreeItemHeight) + "px");

Why not just: style.height = ...;

[Devin Rousso]

Created attachment 317082 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 317082 [details]
Patch

Clearing flags on attachment: 317082

Committed r220180: <http://trac.webkit.org/changeset/220180>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/33693047>