Modified: trunk/Source/WebInspectorUI/ChangeLog (235400 => 235401)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-08-27 21:11:47 UTC (rev 235400)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-08-27 21:27:58 UTC (rev 235401)
@@ -1,5 +1,22 @@
2018-08-27 Devin Rousso <[email protected]>
+ Web Inspector: when scrolling a virtualized TreeOutline, only update the DOM periodically
+ https://bugs.webkit.org/show_bug.cgi?id=188960
+
+ Reviewed by Brian Burg.
+
+ After each `updateVirtualizedElements` call, remember the `WI.TreeElement` that is located
+ halfway within the visible list. When handling each "scroll", only regenerate the
+ `WI.TreeOutline` DOM if the user has scrolled `extraRows` distance.
+
+ * UserInterface/Views/TreeOutline.js:
+ (WI.TreeOutline):
+ (WI.TreeOutline.prototype.registerScrollVirtualizer):
+ (WI.TreeOutline.prototype.updateVirtualizedElements):
+ (WI.TreeOutline.prototype._calculateVirtualizedValues): Added.
+
+2018-08-27 Devin Rousso <[email protected]>
+
Web Inspector: provide autocompletion for event breakpoints
https://bugs.webkit.org/show_bug.cgi?id=188717
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js (235400 => 235401)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js 2018-08-27 21:11:47 UTC (rev 235400)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js 2018-08-27 21:27:58 UTC (rev 235401)
@@ -55,6 +55,7 @@
this._customIndent = false;
this._selectable = selectable;
+ this._vritualizedCurrentMiddleItem = NaN;
this._virtualizedScrollContainer = null;
this._virtualizedTreeItemHeight = NaN;
this._virtualizedTopSpacer = null;
@@ -659,7 +660,10 @@
this._virtualizedBottomSpacer = document.createElement("div");
this._virtualizedScrollContainer.addEventListener("scroll", (event) => {
- this.updateVirtualizedElements();
+ let {numberVisible, extraRows, firstItem} = this._calculateVirtualizedValues();
+
+ if (Math.abs(firstItem + (numberVisible / 2) - this._vritualizedCurrentMiddleItem) >= extraRows)
+ this.updateVirtualizedElements();
});
}
@@ -693,10 +697,7 @@
return {count, shouldReturn};
}
- 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);
+ let {numberVisible, extraRows, firstItem, lastItem} = this._calculateVirtualizedValues();
let shouldScroll = false;
if (focusedTreeElement && focusedTreeElement.revealed(false)) {
@@ -709,7 +710,9 @@
lastItem = index + extraRows;
}
- shouldScroll = index < firstItem || index > lastItem;
+ // Only scroll if the `focusedTreeElement` is outside the visible items, not including
+ // the added buffer `extraRows`.
+ shouldScroll = (index < firstItem + extraRows) || (index > lastItem - extraRows);
}
let totalItems = walk(this, ({parent, treeElement, count}) => {
@@ -731,6 +734,8 @@
if (shouldScroll)
this._virtualizedScrollContainer.scrollTop = (firstItem + extraRows) * this._virtualizedTreeItemHeight;
+
+ this._vritualizedCurrentMiddleItem = firstItem + (numberVisible / 2);
}
// Protected
@@ -808,6 +813,20 @@
document.head.appendChild(WI.TreeOutline._styleElement);
}
+ _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,
+ };
+ }
+
_handleContextmenu(event)
{
let treeElement = this.treeElementFromEvent(event);
