DevTools: console.table attached inside a collapsed console group is not resizeable.

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 bd4036717501c6e08937ed64c7869cd3b857944b..2968d19b1919c7c3c93af446975d6cccd2c79097 100644
--- a/Source/devtools/front_end/DataGrid.js
+++ b/Source/devtools/front_end/DataGrid.js
@@ -473,9 +473,10 @@ WebInspector.DataGrid.prototype = {
     },
 
     /**
-     * @param {Array.<number>} widths
+     * @param {!Array.<number>} widths
      * @param {number} minPercent
      * @param {number=} maxPercent
+     * @return {!Array.<number>}
      */
     _autoSizeWidths: function(widths, minPercent, maxPercent)
     {
@@ -579,20 +580,20 @@ WebInspector.DataGrid.prototype = {
     // parent element, then the DataGrid's columns will not be resizable.
     updateWidths: function()
     {
-        var headerTableColumns = this._headerTableColumnGroup.children;
-
-        var tableWidth = this._dataTable.offsetWidth;
-        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.
-        if (!this._columnWidthsInitialized && this.element.offsetWidth) {
+        var tableWidth = this._dataTable.offsetWidth;

[pfeldman, 2013/10/23 13:05:38]

When grid only has header and no elements, this is 0, while
this.element.offsetWidth is not. Or am I wrong?

[aandrey, 2013/10/23 13:35:59]

Reverted.

+        if (!tableWidth)
+            return;
+        if (!this._columnWidthsInitialized) {
+            var headerTableColumns = this._headerTableColumnGroup.children;
+            var numColumns = headerTableColumns.length - 1; // Do not process corner column.
             // Give all the columns initial widths now so that during a resize,
             // when the two columns that get resized get a percent value for
             // their widths, all the other columns already have percent values
             // for their widths.
             for (var i = 0; i < numColumns; i++) {
                 var columnWidth = this.headerTableBody.rows[0].cells[i].offsetWidth;
-                var percentWidth = ((columnWidth / tableWidth) * 100) + "%";
+                var percentWidth = (100 * columnWidth / tableWidth) + "%";

[pfeldman, 2013/10/23 13:05:38]

Why?

[aandrey, 2013/10/23 13:35:59]

An (poor) attempt to get more precision in floating point math.
Did not help in my particular tests, but does not make things worse.

FYI. Sometimes I observed off-by-1px size glitches while resizing.

                 this._headerTableColumnGroup.children[i].style.width = percentWidth;
                 this._dataTableColumnGroup.children[i].style.width = percentWidth;
             }
@@ -650,11 +651,10 @@ WebInspector.DataGrid.prototype = {
             if (this.isColumnVisible(column))
                 sumOfWeights += column.weight;
         }
-        var factor = 100 / sumOfWeights;
 
         for (var i = 0; i < this._columnsArray.length; ++i) {
             var column = this._columnsArray[i];
-            var width = this.isColumnVisible(column) ? ((factor * column.weight) + "%"): "0%";
+            var width = this.isColumnVisible(column) ? (100 * column.weight / sumOfWeights) + "%" : "0%";
             this._headerTableColumnGroup.children[i].style.width = width;
             this._dataTableColumnGroup.children[i].style.width = width;
         }
@@ -1036,7 +1036,7 @@ WebInspector.DataGrid.prototype = {
     _startResizerDragging: function(event)
     {
         this._currentResizer = event.target;
-        return !!this._currentResizer.rightNeighboringColumnIndex
+        return !!this._currentResizer.rightNeighboringColumnIndex;
     },
 
     _resizerDragging: function(event)
@@ -1079,11 +1079,11 @@ WebInspector.DataGrid.prototype = {
 
         resizer.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment) + "px";
 
-        var percentLeftColumn = (((dragPoint - leftEdgeOfPreviousColumn) / tableWidth) * 100) + "%";
+        var percentLeftColumn = (100 * (dragPoint - leftEdgeOfPreviousColumn) / tableWidth) + "%";
         this._headerTableColumnGroup.children[leftCellIndex].style.width = percentLeftColumn;
         this._dataTableColumnGroup.children[leftCellIndex].style.width = percentLeftColumn;
 
-        var percentRightColumn = (((rightEdgeOfNextColumn - dragPoint) / tableWidth) * 100) + "%";
+        var percentRightColumn = (100 * (rightEdgeOfNextColumn - dragPoint) / tableWidth) + "%";
         this._headerTableColumnGroup.children[rightCellIndex].style.width =  percentRightColumn;
         this._dataTableColumnGroup.children[rightCellIndex].style.width = percentRightColumn;