DevTools: speed up network scrolling and layout.

Source/devtools/front_end/NetworkPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 166 matching lines @@
     /**
      * @return {!Array.<!Element>}
      */
     elementsToRestoreScrollPositionsFor: function()
     {
         if (!this._dataGrid) // Not initialized yet.
             return [];
         return [this._dataGrid.scrollContainer];
     },
 
-    onResize: function()
-    {
-        this._updateOffscreenRows();
-    },
-
     _createTimelineGrid: function()
     {
         this._timelineGrid = new WebInspector.TimelineGrid();
         this._timelineGrid.element.classList.add("network-timeline-grid");
         this._dataGrid.element.appendChild(this._timelineGrid.element);
     },
 
     _createTable: function()
     {
         var columns = [];
@@ skipping 116 matching lines @@
         this._dataGrid = new WebInspector.DataGrid(columns);
         this._dataGrid.setName("networkLog");
         this._dataGrid.resizeMethod = WebInspector.DataGrid.ResizeMethod.Last;
         this._dataGrid.element.classList.add("network-log-grid");
         this._dataGrid.element.addEventListener("contextmenu", this._contextMenu.bind(this), true);
         this._dataGrid.show(this.element);
 
         // Event listeners need to be added _after_ we attach to the document, so that owner document is properly update.
         this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChanged, this._sortItems, this);
         this._dataGrid.addEventListener(WebInspector.DataGrid.Events.ColumnsResized, this._updateDividersIfNeeded, this);
-        this._dataGrid.scrollContainer.addEventListener("scroll", this._updateOffscreenRows.bind(this));
 
         this._patchTimelineHeader();
     },
 
     _makeHeaderFragment: function(title, subtitle)
     {
         var fragment = document.createDocumentFragment();
         fragment.createTextChild(title);
         var subtitleDiv = fragment.createChild("div", "network-header-subtitle");
         subtitleDiv.createTextChild(subtitle);
@@ skipping 83 matching lines @@
         if (columnIdentifier === "timeline") {
             this._sortByTimeline();
             return;
         }
         var sortingFunction = this._sortingFunctions[columnIdentifier];
         if (!sortingFunction)
             return;
 
         this._dataGrid.sortNodes(sortingFunction, !this._dataGrid.isSortOrderAscending());
         this._timelineSortSelector.selectedIndex = 0;
-        this._updateOffscreenRows();
+        this._updateRows();
 
         this.searchCanceled();
 
         WebInspector.notifications.dispatchEventToListeners(WebInspector.UserMetrics.UserAction, {
             action: WebInspector.UserMetrics.UserActionNames.NetworkSort,
             column: columnIdentifier,
             sortOrder: this._dataGrid.sortOrder()
         });
     },
 
     _sortByTimeline: function()
     {
         this._removeAllNodeHighlights();
         var selectedIndex = this._timelineSortSelector.selectedIndex;
         if (!selectedIndex)
             selectedIndex = 1; // Sort by start time by default.
         var selectedOption = this._timelineSortSelector[selectedIndex];
         var value = selectedOption.value;
 
         var sortingFunction = this._sortingFunctions[value];
         this._dataGrid.sortNodes(sortingFunction);
         this.calculator = this._calculators[value];
         if (this.calculator.startAtZero)
             this._timelineGrid.hideEventDividers();
         else
             this._timelineGrid.showEventDividers();
         this._dataGrid.markColumnAsSortedBy("timeline", WebInspector.DataGrid.Order.Ascending);
-        this._updateOffscreenRows();
+        this._updateRows();
     },
 
     _createStatusBarItems: function()
     {
         this._progressBarContainer = document.createElement("div");
         this._progressBarContainer.className = "status-bar-item";
     },
 
     _updateSummaryBar: function()
     {
@@ skipping 434 matching lines @@
         if (!enabled) {
             this._largerRequestsButton.title = WebInspector.UIString("Use large resource rows.");
             this._dataGrid.element.classList.add("small");
             this._timelineGrid.element.classList.add("small");
         } else {
             this._largerRequestsButton.title = WebInspector.UIString("Use small resource rows.");
             this._dataGrid.element.classList.remove("small");
             this._timelineGrid.element.classList.remove("small");
         }
         this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.RowSizeChanged, { largeRows: enabled });
-        this._updateOffscreenRows();
     },
 
     _getPopoverAnchor: function(element)
     {
         if (!this._allowPopover)
             return;
         var anchor = element.enclosingNodeOrSelfWithClass("network-graph-bar") || element.enclosingNodeOrSelfWithClass("network-graph-label");
         if (anchor && anchor.parentElement.request && anchor.parentElement.request.timing)
             return anchor;
         anchor = element.enclosingNodeOrSelfWithClass("network-script-initiated");
@@ skipping 221 matching lines @@
         if (confirm(WebInspector.UIString("Are you sure you want to clear browser cache?")))
             NetworkAgent.clearBrowserCache();
     },
 
     _clearBrowserCookies: function()
     {
         if (confirm(WebInspector.UIString("Are you sure you want to clear browser cookies?")))
             NetworkAgent.clearBrowserCookies();
     },
 
-    _updateOffscreenRows: function()
+    _updateRows: function()

[eustas, 2014/03/26 04:46:48]

This method could be eliminated totally by adding gradient stripes back.

[pfeldman, 2014/03/26 05:00:57]

I don't think so - it is responsible for filtering rows as well.

     {
         var dataTableBody = this._dataGrid.dataTableBody;
         var rows = dataTableBody.children;
         var recordsCount = rows.length;
         if (recordsCount < 2)
             return;  // Filler row only.
 
-        var visibleTop = this._dataGrid.scrollContainer.scrollTop;
-        var visibleBottom = visibleTop + this._dataGrid.scrollContainer.offsetHeight;
-
-        var rowHeight = 0;
-
         // Filler is at recordsCount - 1.
         var unfilteredRowIndex = 0;
         for (var i = 0; i < recordsCount - 1; ++i) {
             var row = rows[i];
 
             var dataGridNode = this._dataGrid.dataGridNodeFromNode(row);
             if (dataGridNode.isFilteredOut()) {
                 row.classList.remove("offscreen");
                 continue;
             }
 
-            if (!rowHeight)
-                rowHeight = row.offsetHeight;
-
-            var rowIsVisible = unfilteredRowIndex * rowHeight < visibleBottom && (unfilteredRowIndex + 1) * rowHeight > visibleTop;
-            if (rowIsVisible !== row.rowIsVisible) {
-                row.classList.toggle("offscreen", !rowIsVisible);
-                row.rowIsVisible = rowIsVisible;
-            }
             var rowIsOdd = !!(unfilteredRowIndex & 1);
             if (rowIsOdd !== row.rowIsOdd) {
                 row.classList.toggle("odd", rowIsOdd);
                 row.rowIsOdd = rowIsOdd;
             }
             unfilteredRowIndex++;
         }
     },
 
     _matchRequest: function(request)
@@ skipping 197 matching lines @@
 
     _filterRequests: function()
     {
         this._removeAllHighlights();
         this._filteredOutRequests.clear();
 
         var nodes = this._dataGrid.rootNode().children;
         for (var i = 0; i < nodes.length; ++i)
             this._applyFilter(nodes[i]);
         this._updateSummaryBar();
-        this._updateOffscreenRows();
+        this._updateRows();
     },
 
     jumpToPreviousSearchResult: function()
     {
         if (!this._matchedRequests.length)
             return;
         this._highlightNthMatchedRequestForSearch((this._currentMatchedRequestIndex + this._matchedRequests.length - 1) % this._matchedRequests.length, true);
     },
 
     jumpToNextSearchResult: function()
@@ skipping 959 matching lines @@
     WebInspector.DataGridNode.call(this, {});
     this._parentView = parentView;
     this._request = request;
     this._linkifier = new WebInspector.Linkifier();
 }
 
 WebInspector.NetworkDataGridNode.prototype = {
     /** override */
     createCells: function()
     {
         // Out of sight, out of mind: create nodes offscreen to save on render tree update times when running updateOffscreenRows()

[alph, 2014/03/25 22:07:24]

Nuke it

[pfeldman, 2014/03/26 05:00:57]

Done.

-        this._element.classList.add("offscreen");
         this._nameCell = this._createDivInTD("name");
         this._methodCell = this._createDivInTD("method");
         this._statusCell = this._createDivInTD("status");
         this._schemeCell = this._createDivInTD("scheme");
         this._domainCell = this._createDivInTD("domain");
         this._remoteAddressCell = this._createDivInTD("remoteAddress");
         this._typeCell = this._createDivInTD("type");
         this._initiatorCell = this._createDivInTD("initiator");
         this._cookiesCell = this._createDivInTD("cookies");
         this._setCookiesCell = this._createDivInTD("setCookies");
@@ skipping 498 matching lines @@
 WebInspector.NetworkDataGridNode.RequestPropertyComparator = function(propertyName, revert, a, b)
 {
     var aValue = a._request[propertyName];
     var bValue = b._request[propertyName];
     if (aValue > bValue)
         return revert ? -1 : 1;
     if (bValue > aValue)
         return revert ? 1 : -1;
     return 0;
 }