DevTools: speed up network scrolling and layout.

Source/devtools/front_end/DataGrid.js

Index: Source/devtools/front_end/DataGrid.js
diff --git a/Source/devtools/front_end/DataGrid.js b/Source/devtools/front_end/DataGrid.js
index b00702b5aa53e3bfd5d40b67bb38705c218b0471..d5c385a23887a8454946879aab6b3a157ea39eec 100644
--- a/Source/devtools/front_end/DataGrid.js
+++ b/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++) {

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

Though this avoids recalc-style waterfall, it doesn't make a huge performance
boost when thousands requests are shown.

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

It prevents a dozen of full layouts from happening. Layout time is proportional
to number of rows. How is that not huge?

+            // 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;
             }