Diff
Modified: trunk/LayoutTests/ChangeLog (243241 => 243242)
--- trunk/LayoutTests/ChangeLog 2019-03-20 21:27:47 UTC (rev 243241)
+++ trunk/LayoutTests/ChangeLog 2019-03-20 21:49:13 UTC (rev 243242)
@@ -1,3 +1,14 @@
+2019-03-20 Devin Rousso <[email protected]>
+
+ 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:
+
2019-03-20 Dean Jackson <[email protected]>
[iOS] Enable fast clicking everywhere
Modified: trunk/LayoutTests/inspector/unit-tests/array-utilities-expected.txt (243241 => 243242)
--- 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)
@@ -96,8 +96,14 @@
[1,2,3,4] => [[1,2],[2,3],[3,4]]
-- Running test case: Array.prototype.remove
+PASS: remove should return true when removing a value that exists.
PASS: remove should only remove the first matching value.
+PASS: remove should return true when removing a value that exists.
+PASS: remove should return false when removing a value that does not exist.
PASS: remove should only remove values that strictly match.
+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.
-- Running test case: Array.prototype.removeAll
PASS: removeAll should remove all matching values.
Modified: trunk/LayoutTests/inspector/unit-tests/array-utilities.html (243241 => 243242)
--- 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)
@@ -213,15 +213,18 @@
name: "Array.prototype.remove",
test() {
let arr1 = [1, 2, 3, 1];
- arr1.remove(1);
+ InspectorTest.expectThat(arr1.remove(1), "remove should return true when removing a value that exists.");
InspectorTest.expectShallowEqual(arr1, [2, 3, 1], "remove should only remove the first matching value.");
let arr2 = ["1", "2", 3, 1];
- arr2.remove("1");
- arr2.remove(2);
+ 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.");
InspectorTest.expectShallowEqual(arr2, ["2", 3, 1], "remove should only remove values that strictly match.");
- return true;
+ 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.");
}
});
Modified: trunk/Source/WebInspectorUI/ChangeLog (243241 => 243242)
--- 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)
@@ -1,3 +1,37 @@
+2019-03-20 Devin Rousso <[email protected]>
+
+ 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.
+
2019-03-20 Joseph Pecoraro <[email protected]>
Web Inspector: Timelines - Export fails for MediaTimelineRecords with originator DOM Node - Cannot serialize cyclic structure
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js (243241 => 243242)
--- 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)
@@ -585,9 +585,10 @@
for (let i = 0; i < this.length; ++i) {
if (this[i] === value) {
this.splice(i, 1);
- return;
+ return true;
}
}
+ return false;
}
});
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js (243241 => 243242)
--- 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)
@@ -261,6 +261,7 @@
}
let treeOutline = objectTree.treeOutline;
+ treeOutline.registerScrollVirtualizer(this.contentView.element, 16);
treeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._treeElementAdded.bind(this, detailsSectionIdentifier), this);
treeOutline.addEventListener(WI.TreeOutline.Event.ElementDisclosureDidChanged, this._treeElementDisclosureDidChange.bind(this, detailsSectionIdentifier), this);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeElement.js (243241 => 243242)
--- 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)
@@ -165,12 +165,8 @@
this._childrenListNode.hidden = this._hidden;
if (this.treeOutline) {
- if (this.treeOutline.virtualized) {
- let focusedTreeElement = null;
- if (!this._hidden && this.selected)
- focusedTreeElement = this;
- this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0, focusedTreeElement);
- }
+ if (this.treeOutline.virtualized)
+ this.treeOutline.updateVirtualizedElementsDebouncer.delayForFrame();
this.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementVisibilityDidChange, {element: this});
}
@@ -269,9 +265,6 @@
this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
}
- if (this.treeOutline && this.treeOutline.virtualized)
- this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0);
-
if (this.selected)
this.select();
if (this.expanded)
@@ -286,9 +279,6 @@
this._listItemNode.parentNode.removeChild(this._listItemNode);
if (this._childrenListNode && this._childrenListNode.parentNode)
this._childrenListNode.parentNode.removeChild(this._childrenListNode);
-
- if (this.treeOutline && this.treeOutline.virtualized)
- this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0);
}
static treeElementToggled(event)
@@ -354,8 +344,9 @@
if (this.oncollapse)
this.oncollapse(this);
- if (this.treeOutline && this.treeOutline.virtualized) {
- this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0, this);
+ if (this.treeOutline) {
+ if (this.treeOutline.virtualized)
+ this.treeOutline.updateVirtualizedElementsDebouncer.delayForFrame();
this.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementDisclosureDidChanged, {element: this});
}
@@ -421,8 +412,9 @@
if (this.onexpand)
this.onexpand(this);
- if (this.treeOutline && this.treeOutline.virtualized) {
- this.treeOutline.updateVirtualizedElementsDebouncer.delayForTime(0, this);
+ if (this.treeOutline) {
+ if (this.treeOutline.virtualized)
+ this.treeOutline.updateVirtualizedElementsDebouncer.delayForFrame();
this.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementDisclosureDidChanged, {element: this});
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js (243241 => 243242)
--- 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)
@@ -442,14 +442,14 @@
if (!this._knownTreeElements[element.identifier])
this._knownTreeElements[element.identifier] = [];
- // check if the element is already known
var elements = this._knownTreeElements[element.identifier];
- if (elements.indexOf(element) !== -1)
- return;
+ if (!elements.includes(element)) {
+ elements.push(element);
+ this._cachedNumberOfDescendents++;
+ }
- // add the element
- elements.push(element);
- this._cachedNumberOfDescendents++;
+ if (this.virtualized)
+ this._virtualizedDebouncer.delayForFrame();
}
_forgetTreeElement(element)
@@ -458,10 +458,14 @@
element.deselect(true);
this.selectedTreeElement = null;
}
+
if (this._knownTreeElements[element.identifier]) {
- this._knownTreeElements[element.identifier].remove(element, true);
- this._cachedNumberOfDescendents--;
+ if (this._knownTreeElements[element.identifier].remove(element))
+ this._cachedNumberOfDescendents--;
}
+
+ if (this.virtualized)
+ this._virtualizedDebouncer.delayForFrame();
}
_forgetChildrenRecursive(parentElement)
@@ -727,7 +731,9 @@
registerScrollVirtualizer(scrollContainer, treeItemHeight)
{
+ console.assert(scrollContainer);
console.assert(!isNaN(treeItemHeight));
+ console.assert(!this.virtualized);
let boundUpdateVirtualizedElements = (focusedTreeElement) => {
this._updateVirtualizedElements(focusedTreeElement);
@@ -745,6 +751,8 @@
this._virtualizedScrollContainer.addEventListener("scroll", (event) => {
throttler.fire();
});
+
+ this._updateVirtualizedElements();
}
get updateVirtualizedElementsDebouncer()
@@ -963,24 +971,12 @@
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,
- };
- }
-
_updateVirtualizedElements(focusedTreeElement)
{
console.assert(this.virtualized);
+ this._virtualizedDebouncer.cancel();
+
function walk(parent, callback, count = 0) {
let shouldReturn = false;
for (let child of parent.children) {
@@ -1002,8 +998,23 @@
return {count, shouldReturn};
}
- let {numberVisible, extraRows, firstItem, lastItem} = this._calculateVirtualizedValues();
+ function calculateOffsetFromContainer(node, target) {
+ let top = 0;
+ while (node !== target) {
+ top += node.offsetTop;
+ node = node.offsetParent;
+ if (!node)
+ return 0;
+ }
+ return top;
+ }
+ 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);
+
let shouldScroll = false;
if (focusedTreeElement && focusedTreeElement.revealed(false)) {
let index = walk(this, (treeElement) => treeElement === focusedTreeElement).count;
@@ -1030,7 +1041,7 @@
treeElementsToAttach.add(treeElement);
if (count >= firstItem + extraRows && count <= lastItem - extraRows)
visibleTreeElements.add(treeElement);
- } else if (treeElement.element.parentNode)
+ } else if (treeElement._listItemNode.parentNode)
treeElementsToDetach.add(treeElement);
return false;
@@ -1050,24 +1061,24 @@
this._virtualizedAttachedTreeElements = treeElementsToAttach;
for (let treeElement of treeElementsToDetach)
- treeElement.element.remove();
+ treeElement._listItemNode.remove();
for (let treeElement of treeElementsToAttach) {
- treeElement.parent._childrenListNode.appendChild(treeElement.element);
+ treeElement.parent._childrenListNode.appendChild(treeElement._listItemNode);
if (treeElement._childrenListNode)
treeElement.parent._childrenListNode.appendChild(treeElement._childrenListNode);
}
- this._virtualizedTopSpacer.style.height = (Math.max(firstItem, 0) * this._virtualizedTreeItemHeight) + "px";
+ this._virtualizedTopSpacer.style.height = (Number.constrain(firstItem, 0, totalItems) * this._virtualizedTreeItemHeight) + "px";
if (this.element.previousElementSibling !== this._virtualizedTopSpacer)
this.element.parentNode.insertBefore(this._virtualizedTopSpacer, this.element);
- this._virtualizedBottomSpacer.style.height = (Math.max(totalItems - lastItem, 0) * this._virtualizedTreeItemHeight) + "px";
+ this._virtualizedBottomSpacer.style.height = (Number.constrain(totalItems - lastItem, 0, totalItems) * this._virtualizedTreeItemHeight) + "px";
if (this.element.nextElementSibling !== this._virtualizedBottomSpacer)
this.element.parentNode.insertBefore(this._virtualizedBottomSpacer, this.element.nextElementSibling);
if (shouldScroll)
- this._virtualizedScrollContainer.scrollTop = (firstItem + extraRows) * this._virtualizedTreeItemHeight;
+ this._virtualizedScrollContainer.scrollTop = offsetFromContainer + ((firstItem + extraRows) * this._virtualizedTreeItemHeight);
}
_handleContextmenu(event)
