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..bf5b3457d905b6a1fce4d3c9a43cb1869dfbc034 100644
--- a/Source/devtools/front_end/ui/DataGrid.js
+++ b/Source/devtools/front_end/ui/DataGrid.js
@@ -72,12 +72,12 @@ WebInspector.DataGrid = function(columnsArray, editCallback, deleteCallback, ref
     this.element.appendChild(this._headerTable);
     this.element.appendChild(this._scrollContainer);
 
-    var headerRow = document.createElement("tr");
-    var columnGroup = document.createElement("colgroup");
-    columnGroup.span = columnsArray.length;
+    this._headerRow = document.createElement("tr");
+    this._headerTableColumnGroup = document.createElement("colgroup");
+    this._dataTableColumnGroup = document.createElement("colgroup");
 
-    var fillerRow = document.createElement("tr");
-    fillerRow.className = "filler";
+    this._fillerRow = document.createElement("tr");
+    this._fillerRow.className = "filler";
 
     this._columnsArray = columnsArray;
     this.columns = {};
@@ -90,12 +90,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,22 +111,15 @@ 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);
+    this.headerTableBody.appendChild(this._headerRow);
 
-    this._dataTableColumnGroup = columnGroup.cloneNode(true);
     this._dataTable.appendChild(this._dataTableColumnGroup);
-    this.dataTableBody.appendChild(fillerRow);
+    this.dataTableBody.appendChild(this._fillerRow);
+
+    this._refreshHeader();
 
     this.selectedNode = null;
     this.expandNodesWhenArrowing = false;
@@ -140,8 +127,12 @@ WebInspector.DataGrid = function(columnsArray, editCallback, deleteCallback, ref
     this.indentWidth = 15;
     this.resizers = [];
     this._columnWidthsInitialized = false;
+    this._cornerWidth = WebInspector.DataGrid.CornerWidth;
 }
 
+// Keep in sync with .data-grid col.corner style rule.
+WebInspector.DataGrid.CornerWidth = 14;
+
 /** @typedef {!{id: ?string, editable: boolean, longText: ?boolean, sort: !WebInspector.DataGrid.Order, sortable: boolean, align: !WebInspector.DataGrid.Align}} */
 WebInspector.DataGrid.ColumnDescriptor;
 
@@ -241,6 +232,36 @@ 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");
+            var dataColumn = this._dataTableColumnGroup.createChild("col");
+            if (column.width) {
+                headerColumn.style.width = column.width;
+                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 +342,8 @@ WebInspector.DataGrid.prototype = {
     renderInline: function()
     {
         this.element.classList.add("inline");
+        this._cornerWidth = 0;
+        this.updateWidths();
     },
 
     _startEditingConfig: function(element)
@@ -554,7 +577,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 +612,7 @@ WebInspector.DataGrid.prototype = {
     {
         var headerTableColumns = this._headerTableColumnGroup.children;
 
-        var tableWidth = this._dataTable.offsetWidth;
+        var tableWidth = this.element.offsetWidth - this._cornerWidth;

[yurys, 2014/05/30 11:31:46]

Could you add a comment here?

[eustas, 2014/06/02 08:51:47]

Done.

         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 +623,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 +681,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))
+                continue;
+            sum += column.weight;
+            var offset = (sum * tableWidth / sumOfWeights) | 0;
+            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 +713,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 +752,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 +764,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)

[yurys, 2014/05/30 11:31:46]

There are too many calculations like this related to the hidden property. Let's
introduce _visibleColumns array to avoid them.

[eustas, 2014/06/02 08:51:47]

Done.

+            columnIndex++;
         // Make n - 1 resizers for n columns.
         for (var i = 0; i < numColumns - 1; i++) {
             var resizer = this.resizers[i];
@@ -732,37 +775,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;
+            if (previousResizer)
+                previousResizer.rightNeighboringColumnIndex = columnIndex;
+            previousResizer = resizer;
+            columnIndex++;
+            while (this._columnsArray[columnIndex].hidden)
+                columnIndex++;
         }
         if (previousResizer)
-            previousResizer.rightNeighboringColumnIndex = numColumns - 1;
+            previousResizer.rightNeighboringColumnIndex = columnIndex;
     },
 
     addCreationNode: function(hasChildren)
@@ -1062,26 +1097,30 @@ 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;
+            rightColumnIndex = this.resizers[rightCellIndex - 1].rightNeighboringColumnIndex;
         } else if (this.resizeMethod == WebInspector.DataGrid.ResizeMethod.First) {
             leftEdgeOfPreviousColumn += firstRowCells[leftCellIndex].offsetWidth - firstRowCells[0].offsetWidth;
             leftCellIndex = 0;
+            leftColumnIndex = this.resizers[0].leftNeighboringColumnIndex;
         }
 
         var rightEdgeOfNextColumn = leftEdgeOfPreviousColumn + firstRowCells[leftCellIndex].offsetWidth + firstRowCells[rightCellIndex].offsetWidth;
@@ -1096,16 +1135,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;
@@ -1209,8 +1248,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);
+            }
         }
     },