DevTools: speed up network scrolling and layout.

(still needs a lot of work)

Review URL: https://codereview.chromium.org/207553010

git-svn-id: svn://svn.chromium.org/blink/trunk@170024 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/DataGrid.js

@@ -714,9 +714,16 @@ WebInspector.DataGrid.prototype = {
     {
         var headerTableColumns = this._headerTableColumnGroup.children;
         var numColumns = headerTableColumns.length - 1; // Do not process corner column.
-        var left = 0;
+        var left = [];
         var previousResizer = null;
 
+        for (var i = 0; i < numColumns - 1; i++) {
+            // Get the width of the cell in the first (and only) row of the
+            // header table in order to determine the width of the column, since
+            // it is not possible to query a column for its width.
+            left[i] = (left[i-1] || 0) + this.headerTableBody.rows[0].cells[i].offsetWidth;
+        }
+
         // Make n - 1 resizers for n columns.
         for (var i = 0; i < numColumns - 1; i++) {
             var resizer = this.resizers[i];
@@ -732,27 +739,24 @@ WebInspector.DataGrid.prototype = {
                 this.resizers[i] = resizer;
             }
 
-            // Get the width of the cell in the first (and only) row of the
-            // header table in order to determine the width of the column, since
-            // it is not possible to query a column for its width.
-            left += this.headerTableBody.rows[0].cells[i].offsetWidth;
 
             if (!this._columnsArray[i].hidden) {
                 resizer.style.removeProperty("display");
-                if (resizer._position !== left) {
-                    resizer._position = left;
-                    resizer.style.left = left + "px";
+                if (resizer._position !== left[i]) {
+                    resizer._position = left[i];
+                    resizer.style.left = left[i] + "px";
                 }
                 resizer.leftNeighboringColumnIndex = i;
                 if (previousResizer)
                     previousResizer.rightNeighboringColumnIndex = i;
                 previousResizer = resizer;
             } else {
-                if (previousResizer && previousResizer._position !== left) {
-                    previousResizer._position = left;
-                    previousResizer.style.left = left + "px";
+                if (previousResizer && previousResizer._position !== left[i]) {
+                    previousResizer._position = left[i];
+                    previousResizer.style.left = left[i] + "px";
                 }
-                resizer.style.setProperty("display", "none");
+                if (resizer.style.getPropertyValue("display") !== "none")
+                    resizer.style.setProperty("display", "none");
                 resizer.leftNeighboringColumnIndex = 0;
                 resizer.rightNeighboringColumnIndex = 0;
             }

third_party/WebKit/Source/devtools/front_end/NetworkPanel.js

@@ -184,11 +184,6 @@ WebInspector.NetworkLogView.prototype = {
         return [this._dataGrid.scrollContainer];
     },
 
-    onResize: function()
-    {
-        this._updateOffscreenRows();
-    },
-
     _createTimelineGrid: function()
     {
         this._timelineGrid = new WebInspector.TimelineGrid();
@@ -325,7 +320,6 @@ WebInspector.NetworkLogView.prototype = {
         // 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();
     },
@@ -429,7 +423,7 @@ WebInspector.NetworkLogView.prototype = {
 
         this._dataGrid.sortNodes(sortingFunction, !this._dataGrid.isSortOrderAscending());
         this._timelineSortSelector.selectedIndex = 0;
-        this._updateOffscreenRows();
+        this._updateRows();
 
         this.searchCanceled();
 
@@ -457,7 +451,7 @@ WebInspector.NetworkLogView.prototype = {
         else
             this._timelineGrid.showEventDividers();
         this._dataGrid.markColumnAsSortedBy("timeline", WebInspector.DataGrid.Order.Ascending);
-        this._updateOffscreenRows();
+        this._updateRows();
     },
 
     _createStatusBarItems: function()
@@ -912,7 +906,6 @@ WebInspector.NetworkLogView.prototype = {
             this._timelineGrid.element.classList.remove("small");
         }
         this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.RowSizeChanged, { largeRows: enabled });
-        this._updateOffscreenRows();
     },
 
     _getPopoverAnchor: function(element)
@@ -1154,7 +1147,7 @@ WebInspector.NetworkLogView.prototype = {
             NetworkAgent.clearBrowserCookies();
     },
 
-    _updateOffscreenRows: function()
+    _updateRows: function()
     {
         var dataTableBody = this._dataGrid.dataTableBody;
         var rows = dataTableBody.children;
@@ -1162,11 +1155,6 @@ WebInspector.NetworkLogView.prototype = {
         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) {
@@ -1178,14 +1166,6 @@ WebInspector.NetworkLogView.prototype = {
                 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);
@@ -1403,7 +1383,7 @@ WebInspector.NetworkLogView.prototype = {
         for (var i = 0; i < nodes.length; ++i)
             this._applyFilter(nodes[i]);
         this._updateSummaryBar();
-        this._updateOffscreenRows();
+        this._updateRows();
     },
 
     jumpToPreviousSearchResult: function()
@@ -2383,8 +2363,6 @@ 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()
-        this._element.classList.add("offscreen");
         this._nameCell = this._createDivInTD("name");
         this._methodCell = this._createDivInTD("method");
         this._statusCell = this._createDivInTD("status");

third_party/WebKit/Source/devtools/front_end/UIUtils.js

@@ -790,13 +790,17 @@ WebInspector.endBatchUpdate = function()
     var handlers = WebInspector._postUpdateHandlers;
     delete WebInspector._postUpdateHandlers;
 
-    var keys = handlers.keys();
-    for (var i = 0; i < keys.length; ++i) {
-        var object = keys[i];
-        var methods = handlers.get(object).keys();
-        for (var j = 0; j < methods.length; ++j)
-            methods[j].call(object);
-    }
+    window.requestAnimationFrame(function() {
+        if (WebInspector._coalescingLevel)
+            return;
+        var keys = handlers.keys();
+        for (var i = 0; i < keys.length; ++i) {
+            var object = keys[i];
+            var methods = handlers.get(object).keys();
+            for (var j = 0; j < methods.length; ++j)
+                methods[j].call(object);
+        }
+    });
 }
 
 /**
@@ -806,10 +810,13 @@ WebInspector.endBatchUpdate = function()
 WebInspector.invokeOnceAfterBatchUpdate = function(object, method)
 {
     if (!WebInspector._coalescingLevel) {
-        method.call(object);
+        window.requestAnimationFrame(function() {
+            if (!WebInspector._coalescingLevel)
+                method.call(object);
+        });
         return;
     }
-    
+
     var methods = WebInspector._postUpdateHandlers.get(object);
     if (!methods) {
         methods = new Map();

third_party/WebKit/Source/devtools/front_end/inspector.css

@@ -827,6 +827,7 @@ body.platform-linux .source-code {
     word-wrap: break-word;
     -webkit-user-select: text;
     border-top: 1px solid rgb(230, 230, 230);
+    -webkit-transform: translateZ(0);
 }
 
 #console-prompt {

third_party/WebKit/Source/devtools/front_end/networkLogView.css

@@ -291,12 +291,11 @@
     z-index: 150;
     overflow: hidden;
     text-align: center;
-    opacity: 0;
-    -webkit-transition: opacity 250ms ease-in-out;
+    visibility: hidden;
 }
 
 .network-graph-side:hover .network-graph-label {
-    opacity: 1;
+    visibility: visible;
 }
 
 .network-graph-label:empty {