Devtools: DataGrid: do not render hidden columns.

Source/devtools/front_end/ui/DataGrid.js

Index: Source/devtools/front_end/ui/DataGrid.js
diff --git a/Source/devtools/front_end/ui/DataGrid.js b/Source/devtools/front_end/ui/DataGrid.js
index c8ae472c9a51062565aeb23e497f8e90551033a7..28676bd8c6ae337078f599f54599477a384cffee 100644
--- a/Source/devtools/front_end/ui/DataGrid.js
+++ b/Source/devtools/front_end/ui/DataGrid.js
@@ -74,7 +74,6 @@ WebInspector.DataGrid = function(columnsArray, editCallback, deleteCallback, ref
 
     var headerRow = document.createElement("tr");
     var columnGroup = document.createElement("colgroup");
-    columnGroup.span = columnsArray.length;
 
     var fillerRow = document.createElement("tr");
     fillerRow.className = "filler";
@@ -90,12 +89,6 @@ WebInspector.DataGrid = function(columnsArray, editCallback, deleteCallback, ref
         if (column.disclosure)
             this.disclosureColumnIdentifier = columnIdentifier;
 
-        var col = document.createElement("col");
-        if (column.width)
-            col.style.width = column.width;
-        column.element = col;
-        columnGroup.appendChild(col);
-
         var cell = document.createElement("th");
         cell.className = columnIdentifier + "-column";
         cell.columnIdentifier = columnIdentifier;
@@ -117,15 +110,8 @@ WebInspector.DataGrid = function(columnsArray, editCallback, deleteCallback, ref
             cell.addEventListener("click", this._clickInHeaderCell.bind(this), false);
             cell.classList.add("sortable");
         }
-
-        headerRow.appendChild(cell);
-        fillerRow.createChild("td", columnIdentifier + "-column");
     }
 
-    headerRow.createChild("th", "corner");
-    fillerRow.createChild("td", "corner");
-    columnGroup.createChild("col", "corner");
-
     this._headerTableColumnGroup = columnGroup;
     this._headerTable.appendChild(this._headerTableColumnGroup);
     this.headerTableBody.appendChild(headerRow);
@@ -134,14 +120,21 @@ WebInspector.DataGrid = function(columnsArray, editCallback, deleteCallback, ref
     this._dataTable.appendChild(this._dataTableColumnGroup);
     this.dataTableBody.appendChild(fillerRow);
 
+    this._headerRow = headerRow;
+    this._fillerRow = fillerRow;

[aandrey, 2014/05/28 14:53:50]

you can remove local vars headerRow, fillerRow and columnGroup

[eustas, 2014/05/29 13:09:46]

I did in in first version of patch, but then reverted, to minimize patch size.

Done.

+    this._refreshHeader();
+
     this.selectedNode = null;
     this.expandNodesWhenArrowing = false;
     this.setRootNode(new WebInspector.DataGridNode());
     this.indentWidth = 15;
     this.resizers = [];
     this._columnWidthsInitialized = false;
+    this._cornerWidth = WebInspector.DataGrid.CornerWidth;
 }
 
+WebInspector.DataGrid.CornerWidth = 14;

[alph, 2014/05/28 15:25:58]

Does it work for all platforms?

[eustas, 2014/05/29 13:09:46]

Yes. See .data-grid col.corner

+
 /** @typedef {!{id: ?string, editable: boolean, longText: ?boolean, sort: !WebInspector.DataGrid.Order, sortable: boolean, align: !WebInspector.DataGrid.Align}} */
 WebInspector.DataGrid.ColumnDescriptor;
 
@@ -241,6 +234,37 @@ WebInspector.DataGrid.createSortableDataGrid = function(columnNames, values)
 }
 
 WebInspector.DataGrid.prototype = {
+    _refreshHeader: function()
+    {
+        this._headerTableColumnGroup.removeChildren();
+        this._dataTableColumnGroup.removeChildren();
+        this._headerRow.removeChildren();
+        this._fillerRow.removeChildren();
+
+        for (var i = 0; i < this._columnsArray.length; ++i) {
+            var column = this._columnsArray[i];
+            if (column.hidden)
+                continue;
+
+            var headerColumn = this._headerTableColumnGroup.createChild("col");
+            if (column.width)
+                headerColumn.style.width = column.width;
+
+            var dataColumn = this._dataTableColumnGroup.createChild("col");
+            if (column.width)

[alph, 2014/05/28 15:25:58]

merge if's

[eustas, 2014/05/29 13:09:46]

Done.

+                dataColumn.style.width = column.width;
+
+            var columnIdentifier = column.identifier;
+            this._headerRow.appendChild(this._headerTableHeaders[columnIdentifier]);
+            this._fillerRow.createChild("td", columnIdentifier + "-column");
+        }
+
+        this._headerRow.createChild("th", "corner");
+        this._fillerRow.createChild("td", "corner");
+        this._headerTableColumnGroup.createChild("col", "corner");
+        this._dataTableColumnGroup.createChild("col", "corner");
+    },
+
     /**
      * @param {!WebInspector.DataGridNode} rootNode
      */
@@ -321,6 +345,8 @@ WebInspector.DataGrid.prototype = {
     renderInline: function()
     {
         this.element.classList.add("inline");
+        this._cornerWidth = 0;
+        this.updateWidths();
     },
 
     _startEditingConfig: function(element)
@@ -554,7 +580,7 @@ WebInspector.DataGrid.prototype = {
         widths = this._autoSizeWidths(widths, minPercent, maxPercent);
 
         for (var i = 0; i < this._columnsArray.length; ++i)
-            this._columnsArray[i].element.style.width = widths[i] + "%";
+            this._columnsArray[i].weight = widths[i];
         this._columnWidthsInitialized = false;
         this.updateWidths();
     },
@@ -589,7 +615,7 @@ WebInspector.DataGrid.prototype = {
     {
         var headerTableColumns = this._headerTableColumnGroup.children;
 
-        var tableWidth = this._dataTable.offsetWidth;
+        var tableWidth = this.element.offsetWidth - this._cornerWidth;
         var numColumns = headerTableColumns.length - 1; // Do not process corner column.
 
         // Do not attempt to use offsetes if we're not attached to the document tree yet.
@@ -600,14 +626,13 @@ WebInspector.DataGrid.prototype = {
             // for their widths.
             for (var i = 0; i < numColumns; i++) {
                 var columnWidth = this.headerTableBody.rows[0].cells[i].offsetWidth;
-                var percentWidth = (100 * columnWidth / tableWidth) + "%";
-                this._headerTableColumnGroup.children[i].style.width = percentWidth;
-                this._dataTableColumnGroup.children[i].style.width = percentWidth;
+                var column = this._columnsArray[i];
+                if (!column.weight)
+                    column.weight = 100 * columnWidth / tableWidth;
             }
             this._columnWidthsInitialized = true;
         }
-        this._positionResizers();
-        this.dispatchEventToListeners(WebInspector.DataGrid.Events.ColumnsResized);
+        this.applyColumnWeights();
     },
 
     /**
@@ -659,11 +684,22 @@ WebInspector.DataGrid.prototype = {
                 sumOfWeights += column.weight;
         }
 
+        var sum = 0;
+        var lastOffset = 0;
+        var tableWidth = this.element.offsetWidth - this._cornerWidth;
+
+        var columnIndex = 0;
         for (var i = 0; i < this._columnsArray.length; ++i) {
             var column = this._columnsArray[i];
-            var width = this.isColumnVisible(column) ? (100 * column.weight / sumOfWeights) + "%" : "0%";
-            this._headerTableColumnGroup.children[i].style.width = width;
-            this._dataTableColumnGroup.children[i].style.width = width;
+            if (this.isColumnVisible(column)) {

[alph, 2014/05/28 15:25:58]

change to continue.

[eustas, 2014/05/29 13:09:46]

Done.

+                sum += column.weight;
+                var offset = (sum * tableWidth / sumOfWeights) | 0;

[aandrey, 2014/05/28 14:53:50]

what is this trick?
if float numbers work, I'd not convert them to ints. AFAIR when I touched this
kind of code, I observed resize glitches in some corner cases.

[eustas, 2014/05/29 13:09:46]

When resizer is dragged, then we use offsetWidths of th elements, that are
always integer. So if we don't truncate numbers here, then first drag gesture
will shutter some columns.

+                var width = (offset - lastOffset) + "px";
+                this._headerTableColumnGroup.children[columnIndex].style.width = width;
+                this._dataTableColumnGroup.children[columnIndex].style.width = width;
+                lastOffset = offset;
+                ++columnIndex;
+            }
         }
 
         this._positionResizers();
@@ -680,16 +716,19 @@ WebInspector.DataGrid.prototype = {
     },
 
     /**
-     * @param {string} columnIdentifier
-     * @param {boolean} visible
+     * @param {!Object.<string, boolean>} columnsVisibility
      */
-    setColumnVisible: function(columnIdentifier, visible)
+    setColumnsVisiblity: function(columnsVisibility)
     {
-        if (visible === !this.columns[columnIdentifier].hidden)
-            return;
-
-        this.columns[columnIdentifier].hidden = !visible;
-        this.element.classList.toggle("hide-" + columnIdentifier + "-column", !visible);
+        for (var i = 0; i < this._columnsArray.length; ++i) {
+            var column = this._columnsArray[i];
+            column.hidden = !columnsVisibility[column.identifier];
+        }
+        this._refreshHeader();
+        this.applyColumnWeights();
+        var nodes = this._enumerateChildren(this.rootNode(), [], -1);
+        for (var i = 0; i < nodes.length; ++i)
+            nodes[i].refresh();
     },
 
     get scrollContainer()
@@ -716,6 +755,10 @@ WebInspector.DataGrid.prototype = {
         var numColumns = headerTableColumns.length - 1; // Do not process corner column.
         var left = [];
         var previousResizer = null;
+        var resizers = this.resizers;
+
+        while (resizers.length > numColumns - 1)
+            resizers.pop().remove();
 
         for (var i = 0; i < numColumns - 1; i++) {
             // Get the width of the cell in the first (and only) row of the
@@ -724,6 +767,9 @@ WebInspector.DataGrid.prototype = {
             left[i] = (left[i-1] || 0) + this.headerTableBody.rows[0].cells[i].offsetWidth;
         }
 
+        var columnIndex = 0;
+        while (this._columnsArray[columnIndex].hidden)

[aandrey, 2014/05/28 14:53:50]

can this._columnsArray[columnIndex] be undefined?

[eustas, 2014/05/29 13:09:46]

Only if all columns are hidden. I hope we will never get in such situation.

+            columnIndex++;
         // Make n - 1 resizers for n columns.
         for (var i = 0; i < numColumns - 1; i++) {
             var resizer = this.resizers[i];
@@ -732,37 +778,29 @@ WebInspector.DataGrid.prototype = {
                 // This is the first call to updateWidth, so the resizers need
                 // to be created.
                 resizer = document.createElement("div");
+                resizer.__index = i;
                 resizer.classList.add("data-grid-resizer");
                 // This resizer is associated with the column to its right.
                 WebInspector.installDragHandle(resizer, this._startResizerDragging.bind(this), this._resizerDragging.bind(this), this._endResizerDragging.bind(this), "col-resize");
                 this.element.appendChild(resizer);
-                this.resizers[i] = resizer;
+                resizers.push(resizer);
             }
 
-
-            if (!this._columnsArray[i].hidden) {
-                resizer.style.removeProperty("display");
-                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[i]) {
-                    previousResizer._position = left[i];
-                    previousResizer.style.left = left[i] + "px";
-                }
-                if (resizer.style.getPropertyValue("display") !== "none")
-                    resizer.style.setProperty("display", "none");
-                resizer.leftNeighboringColumnIndex = 0;
-                resizer.rightNeighboringColumnIndex = 0;
+            if (resizer._position !== left[i]) {
+                resizer._position = left[i];
+                resizer.style.left = left[i] + "px";
             }
+
+            resizer.leftNeighboringColumnIndex = columnIndex;

[alph, 2014/05/28 15:25:58]

just curious, why some properties we set to div have '_' prefix, some '__', and
some have no _'s?

[eustas, 2014/05/29 13:09:46]

With no _'s is "public" - they are accessed from NetworkPanel.

__ - this is used to add "local-private" property to entity defined elsewhere.

_ - this shouldn't be used in this case; it appeared long ago and I decided to
leave it as is for now.

+            if (previousResizer)
+                previousResizer.rightNeighboringColumnIndex = columnIndex;
+            previousResizer = resizer;
+            columnIndex++;
+            while (this._columnsArray[columnIndex].hidden)

[aandrey, 2014/05/28 14:53:50]

ditto

[eustas, 2014/05/29 13:09:46]

Number of resizers is guaranteed to be number of visible columns minus one.

So, we will never meed undefined here.

+                columnIndex++;
         }
         if (previousResizer)
-            previousResizer.rightNeighboringColumnIndex = numColumns - 1;
+            previousResizer.rightNeighboringColumnIndex = columnIndex;
     },
 
     addCreationNode: function(hasChildren)
@@ -1062,26 +1100,26 @@ WebInspector.DataGrid.prototype = {
         if (!resizer)
             return;
 
-        var tableWidth = this._dataTable.offsetWidth; // Cache it early, before we invalidate layout.
+        var tableWidth = this.element.offsetWidth; // Cache it early, before we invalidate layout.
 
         // Constrain the dragpoint to be within the containing div of the
         // datagrid.
         var dragPoint = event.clientX - this.element.totalOffsetLeft();
         // Constrain the dragpoint to be within the space made up by the
         // column directly to the left and the column directly to the right.
-        var leftCellIndex = resizer.leftNeighboringColumnIndex;
-        var rightCellIndex = resizer.rightNeighboringColumnIndex;
+        var leftColumnIndex = resizer.leftNeighboringColumnIndex;
+        var rightColumnIndex = resizer.rightNeighboringColumnIndex;
         var firstRowCells = this.headerTableBody.rows[0].cells;
         var leftEdgeOfPreviousColumn = 0;
+        var leftCellIndex = resizer.__index;
+        var rightCellIndex = leftCellIndex + 1;
         for (var i = 0; i < leftCellIndex; i++)
             leftEdgeOfPreviousColumn += firstRowCells[i].offsetWidth;
 
         // Differences for other resize methods
         if (this.resizeMethod == WebInspector.DataGrid.ResizeMethod.Last) {
             rightCellIndex = this.resizers.length;
-        } else if (this.resizeMethod == WebInspector.DataGrid.ResizeMethod.First) {
-            leftEdgeOfPreviousColumn += firstRowCells[leftCellIndex].offsetWidth - firstRowCells[0].offsetWidth;
-            leftCellIndex = 0;
+            rightColumnIndex = this.resizers[rightCellIndex - 1].rightNeighboringColumnIndex;
         }
 
         var rightEdgeOfNextColumn = leftEdgeOfPreviousColumn + firstRowCells[leftCellIndex].offsetWidth + firstRowCells[rightCellIndex].offsetWidth;
@@ -1096,16 +1134,16 @@ WebInspector.DataGrid.prototype = {
 
         resizer.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment) + "px";
 
-        var percentLeftColumn = (100 * (dragPoint - leftEdgeOfPreviousColumn) / tableWidth) + "%";
-        this._headerTableColumnGroup.children[leftCellIndex].style.width = percentLeftColumn;
-        this._dataTableColumnGroup.children[leftCellIndex].style.width = percentLeftColumn;
+        var pxLeftColumn = (dragPoint - leftEdgeOfPreviousColumn) + "px";
+        this._headerTableColumnGroup.children[leftCellIndex].style.width = pxLeftColumn;
+        this._dataTableColumnGroup.children[leftCellIndex].style.width = pxLeftColumn;
 
-        var percentRightColumn = (100 * (rightEdgeOfNextColumn - dragPoint) / tableWidth) + "%";
-        this._headerTableColumnGroup.children[rightCellIndex].style.width =  percentRightColumn;
-        this._dataTableColumnGroup.children[rightCellIndex].style.width = percentRightColumn;
+        var pxRightColumn = (rightEdgeOfNextColumn - dragPoint) + "px";
+        this._headerTableColumnGroup.children[rightCellIndex].style.width = pxRightColumn;
+        this._dataTableColumnGroup.children[rightCellIndex].style.width = pxRightColumn;
 
-        var leftColumn = this._columnsArray[leftCellIndex];
-        var rightColumn = this._columnsArray[rightCellIndex];
+        var leftColumn = this._columnsArray[leftColumnIndex];
+        var rightColumn = this._columnsArray[rightColumnIndex];
         if (leftColumn.weight || rightColumn.weight) {
             var sumOfWeights = leftColumn.weight + rightColumn.weight;
             var delta = rightEdgeOfNextColumn - leftEdgeOfPreviousColumn;
@@ -1142,7 +1180,6 @@ WebInspector.DataGrid.prototype = {
 
 WebInspector.DataGrid.ResizeMethod = {
     Nearest: "nearest",
-    First: "first",

[alph, 2014/05/28 15:25:58]

I'd keep this resize method and use it in the heap profiler.

[eustas, 2014/05/29 13:09:46]

Done.

     Last: "last"
 }
 
@@ -1209,8 +1246,10 @@ WebInspector.DataGridNode.prototype = {
     {
         var columnsArray = this.dataGrid._columnsArray;
         for (var i = 0; i < columnsArray.length; ++i) {
-            var cell = this.createCell(columnsArray[i].identifier);
-            this._element.appendChild(cell);
+            if (!columnsArray[i].hidden) {
+                var cell = this.createCell(columnsArray[i].identifier);
+                this._element.appendChild(cell);
+            }
         }
     },