<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[243242] trunk</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/243242">243242</a></dd>
<dt>Author</dt> <dd>drousso@apple.com</dd>
<dt>Date</dt> <dd>2019-03-20 14:49:13 -0700 (Wed, 20 Mar 2019)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: Debugger: virtualize the list of variables in the Scope sidebar
https://bugs.webkit.org/show_bug.cgi?id=192648
<rdar://problem/46800949>

Reviewed by Joseph Pecoraro.

Source/WebInspectorUI:

* UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
(WI.ScopeChainDetailsSidebarPanel.prototype._generateCallFramesSection):

* UserInterface/Views/TreeElement.js:
(WI.TreeElement.prototype.set hidden):
(WI.TreeElement.prototype._attach):
(WI.TreeElement.prototype._detach):
(WI.TreeElement.prototype.collapse):
(WI.TreeElement.prototype.expand):
Move `updateVirtualizedElements` calls to the owner `WI.TreeOutline` to ensure that they get
called. Make the remaining calls use rAF debouncing to better coalesce updates.

* UserInterface/Views/TreeOutline.js:
(WI.TreeOutline.prototype._rememberTreeElement):
(WI.TreeOutline.prototype._forgetTreeElement):
(WI.TreeOutline.prototype.registerScrollVirtualizer):
(WI.TreeOutline.prototype._updateVirtualizedElements.calculateOffsetFromContainer): Added.
(WI.TreeOutline.prototype._updateVirtualizedElements):
(WI.TreeOutline.prototype._calculateVirtualizedValues): Deleted.
Calculate the `WI.TreeOutline`'s top offset within the scroll container so that it will only
update when it's within the visual area.

* UserInterface/Views/Utilities.js:
(Array.prototype.remove):
Return whether the item was actually removed from the array.

LayoutTests:

* inspector/unit-tests/array-utilities.html:
* inspector/unit-tests/array-utilities-expected.txt:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsinspectorunittestsarrayutilitiesexpectedtxt">trunk/LayoutTests/inspector/unit-tests/array-utilities-expected.txt</a></li>
<li><a href="#trunkLayoutTestsinspectorunittestsarrayutilitieshtml">trunk/LayoutTests/inspector/unit-tests/array-utilities.html</a></li>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseUtilitiesjs">trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScopeChainDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinejs">trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (243241 => 243242)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog      2019-03-20 21:27:47 UTC (rev 243241)
+++ trunk/LayoutTests/ChangeLog 2019-03-20 21:49:13 UTC (rev 243242)
</span><span class="lines">@@ -1,3 +1,14 @@
</span><ins>+2019-03-20  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Debugger: virtualize the list of variables in the Scope sidebar
+        https://bugs.webkit.org/show_bug.cgi?id=192648
+        <rdar://problem/46800949>
+
+        Reviewed by Joseph Pecoraro.
+
+        * inspector/unit-tests/array-utilities.html:
+        * inspector/unit-tests/array-utilities-expected.txt:
+
</ins><span class="cx"> 2019-03-20  Dean Jackson  <dino@apple.com>
</span><span class="cx"> 
</span><span class="cx">         [iOS] Enable fast clicking everywhere
</span></span></pre></div>
<a id="trunkLayoutTestsinspectorunittestsarrayutilitiesexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/inspector/unit-tests/array-utilities-expected.txt (243241 => 243242)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/unit-tests/array-utilities-expected.txt      2019-03-20 21:27:47 UTC (rev 243241)
+++ trunk/LayoutTests/inspector/unit-tests/array-utilities-expected.txt 2019-03-20 21:49:13 UTC (rev 243242)
</span><span class="lines">@@ -96,8 +96,14 @@
</span><span class="cx"> [1,2,3,4] => [[1,2],[2,3],[3,4]]
</span><span class="cx"> 
</span><span class="cx"> -- Running test case: Array.prototype.remove
</span><ins>+PASS: remove should return true when removing a value that exists.
</ins><span class="cx"> PASS: remove should only remove the first matching value.
</span><ins>+PASS: remove should return true when removing a value that exists.
+PASS: remove should return false when removing a value that does not exist.
</ins><span class="cx"> PASS: remove should only remove values that strictly match.
</span><ins>+PASS: remove should return false when removing a value that does not exist.
+PASS: remove should return false when removing a value that does not exist.
+PASS: remove should not affect the array if the value does not exist.
</ins><span class="cx"> 
</span><span class="cx"> -- Running test case: Array.prototype.removeAll
</span><span class="cx"> PASS: removeAll should remove all matching values.
</span></span></pre></div>
<a id="trunkLayoutTestsinspectorunittestsarrayutilitieshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/inspector/unit-tests/array-utilities.html (243241 => 243242)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/unit-tests/array-utilities.html      2019-03-20 21:27:47 UTC (rev 243241)
+++ trunk/LayoutTests/inspector/unit-tests/array-utilities.html 2019-03-20 21:49:13 UTC (rev 243242)
</span><span class="lines">@@ -213,15 +213,18 @@
</span><span class="cx">         name: "Array.prototype.remove",
</span><span class="cx">         test() {
</span><span class="cx">             let arr1 = [1, 2, 3, 1];
</span><del>-            arr1.remove(1);
</del><ins>+            InspectorTest.expectThat(arr1.remove(1), "remove should return true when removing a value that exists.");
</ins><span class="cx">             InspectorTest.expectShallowEqual(arr1, [2, 3, 1], "remove should only remove the first matching value.");
</span><span class="cx"> 
</span><span class="cx">             let arr2 = ["1", "2", 3, 1];
</span><del>-            arr2.remove("1");
-            arr2.remove(2);
</del><ins>+            InspectorTest.expectThat(arr2.remove("1"), "remove should return true when removing a value that exists.");
+            InspectorTest.expectFalse(arr2.remove(2), "remove should return false when removing a value that does not exist.");
</ins><span class="cx">             InspectorTest.expectShallowEqual(arr2, ["2", 3, 1], "remove should only remove values that strictly match.");
</span><span class="cx"> 
</span><del>-            return true;
</del><ins>+            let arr3 = [1, 2, 3];
+            InspectorTest.expectFalse(arr3.remove("1"), "remove should return false when removing a value that does not exist.");
+            InspectorTest.expectFalse(arr3.remove(4), "remove should return false when removing a value that does not exist.");
+            InspectorTest.expectShallowEqual(arr3, [1, 2, 3], "remove should not affect the array if the value does not exist.");
</ins><span class="cx">         }
</span><span class="cx">     });
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (243241 => 243242)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog    2019-03-20 21:27:47 UTC (rev 243241)
+++ trunk/Source/WebInspectorUI/ChangeLog       2019-03-20 21:49:13 UTC (rev 243242)
</span><span class="lines">@@ -1,3 +1,37 @@
</span><ins>+2019-03-20  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Debugger: virtualize the list of variables in the Scope sidebar
+        https://bugs.webkit.org/show_bug.cgi?id=192648
+        <rdar://problem/46800949>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
+        (WI.ScopeChainDetailsSidebarPanel.prototype._generateCallFramesSection):
+
+        * UserInterface/Views/TreeElement.js:
+        (WI.TreeElement.prototype.set hidden):
+        (WI.TreeElement.prototype._attach):
+        (WI.TreeElement.prototype._detach):
+        (WI.TreeElement.prototype.collapse):
+        (WI.TreeElement.prototype.expand):
+        Move `updateVirtualizedElements` calls to the owner `WI.TreeOutline` to ensure that they get
+        called. Make the remaining calls use rAF debouncing to better coalesce updates.
+
+        * UserInterface/Views/TreeOutline.js:
+        (WI.TreeOutline.prototype._rememberTreeElement):
+        (WI.TreeOutline.prototype._forgetTreeElement):
+        (WI.TreeOutline.prototype.registerScrollVirtualizer):
+        (WI.TreeOutline.prototype._updateVirtualizedElements.calculateOffsetFromContainer): Added.
+        (WI.TreeOutline.prototype._updateVirtualizedElements):
+        (WI.TreeOutline.prototype._calculateVirtualizedValues): Deleted.
+        Calculate the `WI.TreeOutline`'s top offset within the scroll container so that it will only
+        update when it's within the visual area.
+
+        * UserInterface/Views/Utilities.js:
+        (Array.prototype.remove):
+        Return whether the item was actually removed from the array.
+
</ins><span class="cx"> 2019-03-20  Joseph Pecoraro  <pecoraro@apple.com>
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: Timelines - Export fails for MediaTimelineRecords with originator DOM Node - Cannot serialize cyclic structure
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseUtilitiesjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js (243241 => 243242)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js      2019-03-20 21:27:47 UTC (rev 243241)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js 2019-03-20 21:49:13 UTC (rev 243242)
</span><span class="lines">@@ -585,9 +585,10 @@
</span><span class="cx">         for (let i = 0; i < this.length; ++i) {
</span><span class="cx">             if (this[i] === value) {
</span><span class="cx">                 this.splice(i, 1);
</span><del>-                return;
</del><ins>+                return true;
</ins><span class="cx">             }
</span><span class="cx">         }
</span><ins>+        return false;
</ins><span class="cx">     }
</span><span class="cx"> });
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScopeChainDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js (243241 => 243242)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js 2019-03-20 21:27:47 UTC (rev 243241)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js    2019-03-20 21:49:13 UTC (rev 243242)
</span><span class="lines">@@ -261,6 +261,7 @@
</span><span class="cx">                 }
</span><span class="cx"> 
</span><span class="cx">                 let treeOutline = objectTree.treeOutline;
</span><ins>+                treeOutline.registerScrollVirtualizer(this.contentView.element, 16);
</ins><span class="cx">                 treeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._treeElementAdded.bind(this, detailsSectionIdentifier), this);
</span><span class="cx">                 treeOutline.addEventListener(WI.TreeOutline.Event.ElementDisclosureDidChanged, this._treeElementDisclosureDidChange.bind(this, detailsSectionIdentifier), this);
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js (243241 => 243242)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js   2019-03-20 21:27:47 UTC (rev 243241)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js      2019-03-20 21:49:13 UTC (rev 243242)
</span><span class="lines">@@ -165,12 +165,8 @@
</span><span class="cx">             this._childrenListNode.hidden = this._hidden;
</span><span class="cx"> 
</span><span class="cx">         if (this.treeOutline) {
</span><del>-            if (this.treeOutline.virtualized) {
-                let focusedTreeElement = null;
-                if (!this._hidden && this.selected)
-                    focusedTreeElement = this;
-                this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0, focusedTreeElement);
-            }
</del><ins>+            if (this.treeOutline.virtualized)
+                this.treeOutline.updateVirtualizedElementsDebouncer.delayForFrame();
</ins><span class="cx"> 
</span><span class="cx">             this.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementVisibilityDidChange, {element: this});
</span><span class="cx">         }
</span><span class="lines">@@ -269,9 +265,6 @@
</span><span class="cx">                 this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        if (this.treeOutline && this.treeOutline.virtualized)
-            this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0);
-
</del><span class="cx">         if (this.selected)
</span><span class="cx">             this.select();
</span><span class="cx">         if (this.expanded)
</span><span class="lines">@@ -286,9 +279,6 @@
</span><span class="cx">             this._listItemNode.parentNode.removeChild(this._listItemNode);
</span><span class="cx">         if (this._childrenListNode && this._childrenListNode.parentNode)
</span><span class="cx">             this._childrenListNode.parentNode.removeChild(this._childrenListNode);
</span><del>-
-        if (this.treeOutline && this.treeOutline.virtualized)
-            this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0);
</del><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     static treeElementToggled(event)
</span><span class="lines">@@ -354,8 +344,9 @@
</span><span class="cx">         if (this.oncollapse)
</span><span class="cx">             this.oncollapse(this);
</span><span class="cx"> 
</span><del>-        if (this.treeOutline && this.treeOutline.virtualized) {
-            this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0, this);
</del><ins>+        if (this.treeOutline) {
+            if (this.treeOutline.virtualized)
+                this.treeOutline.updateVirtualizedElementsDebouncer.delayForFrame();
</ins><span class="cx"> 
</span><span class="cx">             this.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementDisclosureDidChanged, {element: this});
</span><span class="cx">         }
</span><span class="lines">@@ -421,8 +412,9 @@
</span><span class="cx">         if (this.onexpand)
</span><span class="cx">             this.onexpand(this);
</span><span class="cx"> 
</span><del>-        if (this.treeOutline && this.treeOutline.virtualized) {
-            this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0, this);
</del><ins>+        if (this.treeOutline) {
+            if (this.treeOutline.virtualized)
+                this.treeOutline.updateVirtualizedElementsDebouncer.delayForFrame();
</ins><span class="cx"> 
</span><span class="cx">             this.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementDisclosureDidChanged, {element: this});
</span><span class="cx">         }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js (243241 => 243242)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js   2019-03-20 21:27:47 UTC (rev 243241)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js      2019-03-20 21:49:13 UTC (rev 243242)
</span><span class="lines">@@ -442,14 +442,14 @@
</span><span class="cx">         if (!this._knownTreeElements[element.identifier])
</span><span class="cx">             this._knownTreeElements[element.identifier] = [];
</span><span class="cx"> 
</span><del>-        // check if the element is already known
</del><span class="cx">         var elements = this._knownTreeElements[element.identifier];
</span><del>-        if (elements.indexOf(element) !== -1)
-            return;
</del><ins>+        if (!elements.includes(element)) {
+            elements.push(element);
+            this._cachedNumberOfDescendents++;
+        }
</ins><span class="cx"> 
</span><del>-        // add the element
-        elements.push(element);
-        this._cachedNumberOfDescendents++;
</del><ins>+        if (this.virtualized)
+            this._virtualizedDebouncer.delayForFrame();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _forgetTreeElement(element)
</span><span class="lines">@@ -458,10 +458,14 @@
</span><span class="cx">             element.deselect(true);
</span><span class="cx">             this.selectedTreeElement = null;
</span><span class="cx">         }
</span><ins>+
</ins><span class="cx">         if (this._knownTreeElements[element.identifier]) {
</span><del>-            this._knownTreeElements[element.identifier].remove(element, true);
-            this._cachedNumberOfDescendents--;
</del><ins>+            if (this._knownTreeElements[element.identifier].remove(element))
+                this._cachedNumberOfDescendents--;
</ins><span class="cx">         }
</span><ins>+
+        if (this.virtualized)
+            this._virtualizedDebouncer.delayForFrame();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _forgetChildrenRecursive(parentElement)
</span><span class="lines">@@ -727,7 +731,9 @@
</span><span class="cx"> 
</span><span class="cx">     registerScrollVirtualizer(scrollContainer, treeItemHeight)
</span><span class="cx">     {
</span><ins>+        console.assert(scrollContainer);
</ins><span class="cx">         console.assert(!isNaN(treeItemHeight));
</span><ins>+        console.assert(!this.virtualized);
</ins><span class="cx"> 
</span><span class="cx">         let boundUpdateVirtualizedElements = (focusedTreeElement) => {
</span><span class="cx">             this._updateVirtualizedElements(focusedTreeElement);
</span><span class="lines">@@ -745,6 +751,8 @@
</span><span class="cx">         this._virtualizedScrollContainer.addEventListener("scroll", (event) => {
</span><span class="cx">             throttler.fire();
</span><span class="cx">         });
</span><ins>+
+        this._updateVirtualizedElements();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     get updateVirtualizedElementsDebouncer()
</span><span class="lines">@@ -963,24 +971,12 @@
</span><span class="cx">         document.head.appendChild(WI.TreeOutline._styleElement);
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _calculateVirtualizedValues()
-    {
-        let numberVisible = Math.ceil(this._virtualizedScrollContainer.offsetHeight / this._virtualizedTreeItemHeight);
-        let extraRows = Math.max(numberVisible * 5, 50);
-        let firstItem = Math.floor(this._virtualizedScrollContainer.scrollTop / this._virtualizedTreeItemHeight) - extraRows;
-        let lastItem = firstItem + numberVisible + (extraRows * 2);
-        return {
-            numberVisible,
-            extraRows,
-            firstItem,
-            lastItem,
-        };
-    }
-
</del><span class="cx">     _updateVirtualizedElements(focusedTreeElement)
</span><span class="cx">     {
</span><span class="cx">         console.assert(this.virtualized);
</span><span class="cx"> 
</span><ins>+        this._virtualizedDebouncer.cancel();
+
</ins><span class="cx">         function walk(parent, callback, count = 0) {
</span><span class="cx">             let shouldReturn = false;
</span><span class="cx">             for (let child of parent.children) {
</span><span class="lines">@@ -1002,8 +998,23 @@
</span><span class="cx">             return {count, shouldReturn};
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        let {numberVisible, extraRows, firstItem, lastItem} = this._calculateVirtualizedValues();
</del><ins>+        function calculateOffsetFromContainer(node, target) {
+            let top = 0;
+            while (node !== target) {
+                top += node.offsetTop;
+                node = node.offsetParent;
+                if (!node)
+                    return 0;
+            }
+            return top;
+        }
</ins><span class="cx"> 
</span><ins>+        let offsetFromContainer = calculateOffsetFromContainer(this._virtualizedTopSpacer.parentNode ? this._virtualizedTopSpacer : this.element, this._virtualizedScrollContainer);
+        let numberVisible = Math.ceil(Math.max(0, this._virtualizedScrollContainer.offsetHeight - offsetFromContainer) / this._virtualizedTreeItemHeight);
+        let extraRows = Math.max(numberVisible * 5, 50);
+        let firstItem = Math.floor((this._virtualizedScrollContainer.scrollTop - offsetFromContainer) / this._virtualizedTreeItemHeight) - extraRows;
+        let lastItem = firstItem + numberVisible + (extraRows * 2);
+
</ins><span class="cx">         let shouldScroll = false;
</span><span class="cx">         if (focusedTreeElement && focusedTreeElement.revealed(false)) {
</span><span class="cx">             let index = walk(this, (treeElement) => treeElement === focusedTreeElement).count;
</span><span class="lines">@@ -1030,7 +1041,7 @@
</span><span class="cx">                 treeElementsToAttach.add(treeElement);
</span><span class="cx">                 if (count >= firstItem + extraRows && count <= lastItem - extraRows)
</span><span class="cx">                     visibleTreeElements.add(treeElement);
</span><del>-            } else if (treeElement.element.parentNode)
</del><ins>+            } else if (treeElement._listItemNode.parentNode)
</ins><span class="cx">                 treeElementsToDetach.add(treeElement);
</span><span class="cx"> 
</span><span class="cx">             return false;
</span><span class="lines">@@ -1050,24 +1061,24 @@
</span><span class="cx">         this._virtualizedAttachedTreeElements = treeElementsToAttach;
</span><span class="cx"> 
</span><span class="cx">         for (let treeElement of treeElementsToDetach)
</span><del>-            treeElement.element.remove();
</del><ins>+            treeElement._listItemNode.remove();
</ins><span class="cx"> 
</span><span class="cx">         for (let treeElement of treeElementsToAttach) {
</span><del>-            treeElement.parent._childrenListNode.appendChild(treeElement.element);
</del><ins>+            treeElement.parent._childrenListNode.appendChild(treeElement._listItemNode);
</ins><span class="cx">             if (treeElement._childrenListNode)
</span><span class="cx">                 treeElement.parent._childrenListNode.appendChild(treeElement._childrenListNode);
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        this._virtualizedTopSpacer.style.height = (Math.max(firstItem, 0) * this._virtualizedTreeItemHeight) + "px";
</del><ins>+        this._virtualizedTopSpacer.style.height = (Number.constrain(firstItem, 0, totalItems) * this._virtualizedTreeItemHeight) + "px";
</ins><span class="cx">         if (this.element.previousElementSibling !== this._virtualizedTopSpacer)
</span><span class="cx">             this.element.parentNode.insertBefore(this._virtualizedTopSpacer, this.element);
</span><span class="cx"> 
</span><del>-        this._virtualizedBottomSpacer.style.height = (Math.max(totalItems - lastItem, 0) * this._virtualizedTreeItemHeight) + "px";
</del><ins>+        this._virtualizedBottomSpacer.style.height = (Number.constrain(totalItems - lastItem, 0, totalItems) * this._virtualizedTreeItemHeight) + "px";
</ins><span class="cx">         if (this.element.nextElementSibling !== this._virtualizedBottomSpacer)
</span><span class="cx">             this.element.parentNode.insertBefore(this._virtualizedBottomSpacer, this.element.nextElementSibling);
</span><span class="cx"> 
</span><span class="cx">         if (shouldScroll)
</span><del>-            this._virtualizedScrollContainer.scrollTop = (firstItem + extraRows) * this._virtualizedTreeItemHeight;
</del><ins>+            this._virtualizedScrollContainer.scrollTop = offsetFromContainer + ((firstItem + extraRows) * this._virtualizedTreeItemHeight);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _handleContextmenu(event)
</span></span></pre>
</div>
</div>

</body>
</html>