Changeset 200949 in webkit

Timestamp:

May 16, 2016, 11:04:25 AM (9 years ago)

Author:

timothy@apple.com

Message:

Web Inspector: DataGrid _updateVisibleRows dominates profiles of timeline recordings when data grid (Overview or TimelineDataGrids) is showing
​https://bugs.webkit.org/show_bug.cgi?id=157664
rdar://problem/26262219

Reviewed by Joseph Pecoraro.

• UserInterface/Views/DataGrid.js:

(WebInspector.DataGrid): Added new members.
(WebInspector.DataGrid.prototype.layout): Reset _cachedScrollTop and _cachedScrollHeight on resize.
(WebInspector.DataGrid.prototype._noteScrollPositionChanged): Added.
(WebInspector.DataGrid.prototype._updateVisibleRows): Cache sizes and positions when possible.
(WebInspector.DataGridNode.prototype.set hidden): Added call to _noteRowsChanged.
(WebInspector.DataGridNode.prototype.collapse): Call _noteRowsChanged instead of needsLayout.
(WebInspector.DataGridNode.prototype.expand): Call _noteRowsChanged instead of needsLayout.
(WebInspector.DataGrid.prototype._updateFilter): Removed direct call to _updateVisibleRows, this is
better handled by DataGridNode's hidden setter.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/DataGrid.js (modified) (9 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2016-05-14  Timothy Hatcher  <timothy@apple.com>
+
+        Web Inspector: DataGrid _updateVisibleRows dominates profiles of timeline recordings when data grid (Overview or TimelineDataGrids) is showing
+        https://bugs.webkit.org/show_bug.cgi?id=157664
+        rdar://problem/26262219
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Views/DataGrid.js:
+        (WebInspector.DataGrid): Added new members.
+        (WebInspector.DataGrid.prototype.layout): Reset _cachedScrollTop and _cachedScrollHeight on resize.
+        (WebInspector.DataGrid.prototype._noteScrollPositionChanged): Added.
+        (WebInspector.DataGrid.prototype._updateVisibleRows): Cache sizes and positions when possible.
+        (WebInspector.DataGridNode.prototype.set hidden): Added call to _noteRowsChanged.
+        (WebInspector.DataGridNode.prototype.collapse): Call _noteRowsChanged instead of needsLayout.
+        (WebInspector.DataGridNode.prototype.expand): Call _noteRowsChanged instead of needsLayout.
+        (WebInspector.DataGrid.prototype._updateFilter): Removed direct call to _updateVisibleRows, this is
+        better handled by DataGridNode's hidden setter.
+
 2016-05-14  Timothy Hatcher  <timothy@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js

@@ -54 +54 @@
         this._columnWidthsInitialized = false;
 
+        this._cachedScrollTop = NaN;
+        this._cachedScrollableOffsetHeight = NaN;
+        this._previousRevealedRowCount = NaN;
+        this._topDataTableMarginHeight = NaN;
+        this._bottomDataTableMarginHeight = NaN;
+
         this._filterText = "";
         this._filterDelegate = null;
@@ -73 +79 @@
         this._scrollContainerElement.className = "data-container";
 
-        this._scrollListener = () => this.needsLayout();
+        this._scrollListener = () => this._noteScrollPositionChanged();
         this._updateScrollListeners();
 
@@ -798 +804 @@
         }
 
-        if (layoutReason == WebInspector.View.LayoutReason.Resize || firstUpdate) {
+        if (layoutReason === WebInspector.View.LayoutReason.Resize || firstUpdate) {
             this._positionResizerElements();
             this._positionHeaderViews();
+
+            this._cachedScrollTop = NaN;
+            this._cachedScrollableOffsetHeight = NaN;
         }
 
@@ -964 +973 @@
     }
 
+    _noteScrollPositionChanged()
+    {
+        this._cachedScrollTop = NaN;
+
+        this.needsLayout();
+    }
+
     _updateVisibleRows()
     {
@@ -988 +1004 @@
         let rowHeight = this.rowHeight;
         let updateOffsetThreshold = rowHeight * 5;
+        let overflowPadding = updateOffsetThreshold * 3;
+
+        if (isNaN(this._cachedScrollTop))
+            this._cachedScrollTop = this._scrollContainerElement.scrollTop;
+
+        if (isNaN(this._cachedScrollableOffsetHeight))
+            this._cachedScrollableOffsetHeight = this._scrollContainerElement.offsetHeight;
+
+        let scrollTop = this._cachedScrollTop;
+        let scrollableOffsetHeight = this._cachedScrollableOffsetHeight;
+
+        let visibleRowCount = Math.ceil((scrollableOffsetHeight + (overflowPadding * 2)) / rowHeight);
+
+        let currentTopMargin = this._topDataTableMarginHeight;
+        let currentBottomMargin = this._bottomDataTableMarginHeight;
+        let currentTableBottom = currentTopMargin + (visibleRowCount * rowHeight);
+
+        let belowTopThreshold = !currentTopMargin || scrollTop > currentTopMargin + updateOffsetThreshold;
+        let aboveBottomThreshold = !currentBottomMargin || scrollTop + scrollableOffsetHeight < currentTableBottom - updateOffsetThreshold;
+
+        if (belowTopThreshold && aboveBottomThreshold && !isNaN(this._previousRevealedRowCount))
+            return;
 
         let revealedRows = this._rows.filter((row) => row.revealed && !row.hidden);
 
-        let scrollTop = this._scrollContainerElement.scrollTop;
-        let scrollHeight = this._scrollContainerElement.offsetHeight;
-
-        let currentTopMargin = this._topDataTableMarginElement.offsetHeight;
-        let currentBottomMargin = this._bottomDataTableMarginElement.offsetHeight;
-        let currentTableBottom = currentTopMargin + this._dataTableElement.offsetHeight;
-
-        let belowTopThreshold = !currentTopMargin || scrollTop > currentTopMargin + updateOffsetThreshold;
-        let aboveBottomThreshold = !currentBottomMargin || scrollTop + scrollHeight < currentTableBottom - updateOffsetThreshold;
-
-        if (belowTopThreshold && aboveBottomThreshold && this._previousRevealedRowCount === revealedRows.length)
-            return;
-
         this._previousRevealedRowCount = revealedRows.length;
 
-        let overflowPadding = updateOffsetThreshold * 3;
-
         let topHiddenRowCount = Math.max(0, Math.floor((scrollTop - overflowPadding) / rowHeight));
-        let visibleRowCount = Math.ceil((scrollHeight + (overflowPadding * 2)) / rowHeight);
-        let bottomHiddenRowCount = Math.max(0, revealedRows.length - topHiddenRowCount - visibleRowCount);
+        let bottomHiddenRowCount = Math.max(0, this._previousRevealedRowCount - topHiddenRowCount - visibleRowCount);
 
         let marginTop = topHiddenRowCount * rowHeight;
         let marginBottom = bottomHiddenRowCount * rowHeight;
 
-        this._topDataTableMarginElement.style.height = marginTop + "px";
-        this._bottomDataTableMarginElement.style.height = marginBottom + "px";
+        if (this._topDataTableMarginHeight !== marginTop) {
+            this._topDataTableMarginHeight = marginTop;
+            this._topDataTableMarginElement.style.height = marginTop + "px";
+        }
+
+        if (this._bottomDataTableMarginElement !== marginBottom) {
+            this._bottomDataTableMarginHeight = marginBottom;
+            this._bottomDataTableMarginElement.style.height = marginBottom + "px";
+        }
 
         this._dataTableElement.classList.toggle("odd-first-zebra-stripe", !!(topHiddenRowCount % 2));
@@ -1724 +1753 @@
             return;
 
-        this._updateVisibleRows();
         this.dispatchEventToListeners(WebInspector.DataGrid.Event.FilterDidChange);
     }
@@ -1797 +1825 @@
         if (this._element)
             this._element.classList.toggle("hidden", this._hidden);
+
+        if (this.dataGrid)
+            this.dataGrid._noteRowsChanged();
     }
 
@@ -2171 +2202 @@
         if (this.dataGrid) {
             this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.CollapsedNode, {dataGridNode: this});
-            this.dataGrid.needsLayout();
+            this.dataGrid._noteRowsChanged();
         }
     }
@@ -2221 +2252 @@
         if (this.dataGrid) {
             this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.ExpandedNode, {dataGridNode: this});
-            this.dataGrid.needsLayout();
+            this.dataGrid._noteRowsChanged();
         }
     }