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

Source/devtools/front_end/DataGrid.js

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *        notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *        notice, this list of conditions and the following disclaimer in the
@@ skipping 455 matching lines @@
         this._dataTableBody = this._dataTable.getElementsByTagName("tbody")[0];
         if (!this._dataTableBody) {
             this._dataTableBody = this.element.ownerDocument.createElement("tbody");
             this._dataTable.insertBefore(this._dataTableBody, this._dataTable.tFoot);
         }
 
         return this._dataTableBody;
     },
 
     /**
-     * @param {Array.<number>} widths
+     * @param {!Array.<number>} widths
      * @param {number} minPercent
      * @param {number=} maxPercent
+     * @return {!Array.<number>}
      */
     _autoSizeWidths: function(widths, minPercent, maxPercent)
     {
         if (minPercent)
             minPercent = Math.min(minPercent, Math.floor(100 / widths.length));
         var totalWidth = 0;
         for (var i = 0; i < widths.length; ++i)
             totalWidth += widths[i];
         var totalPercentWidth = 0;
         for (var i = 0; i < widths.length; ++i) {
@@ skipping 83 matching lines @@
     //
     // IMPORTANT: This function MUST be called once after the element of the
     // DataGrid is attached to its parent element and every subsequent time the
     // width of the parent element is changed in order to make it possible to
     // resize the columns.
     //
     // If this function is not called after the DataGrid is attached to its
     // parent element, then the DataGrid's columns will not be resizable.
     updateWidths: function()
     {
-        var headerTableColumns = this._headerTableColumnGroup.children;
-
+        // Do not attempt to use offsetes if we're not attached to the document tree yet.
         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.

-        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) {
+        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;
             }
             this._columnWidthsInitialized = true;
         }
         this._positionResizers();
         this.dispatchEventToListeners(WebInspector.DataGrid.Events.ColumnsResized);
     },
 
     /**
@@ skipping 37 matching lines @@
     },
 
     applyColumnWeights: function()
     {
         var sumOfWeights = 0.0;
         for (var i = 0; i < this._columnsArray.length; ++i) {
             var column = this._columnsArray[i];
             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;
         }
 
         this._positionResizers();
         this.dispatchEventToListeners(WebInspector.DataGrid.Events.ColumnsResized);
     },
 
     /**
      * @param {!WebInspector.DataGrid.ColumnDescriptor} column
@@ skipping 361 matching lines @@
     {
         this._resizeMethod = method;
     },
 
     /**
      * @return {boolean}
      */
     _startResizerDragging: function(event)
     {
         this._currentResizer = event.target;
-        return !!this._currentResizer.rightNeighboringColumnIndex
+        return !!this._currentResizer.rightNeighboringColumnIndex;
     },
 
     _resizerDragging: function(event)
     {
         var resizer = this._currentResizer;
         if (!resizer)
             return;
 
         var tableWidth = this._dataTable.offsetWidth; // Cache it early, before we invalidate layout.
 
@@ skipping 22 matching lines @@
         // Give each column some padding so that they don't disappear.
         var leftMinimum = leftEdgeOfPreviousColumn + this.ColumnResizePadding;
         var rightMaximum = rightEdgeOfNextColumn - this.ColumnResizePadding;
         if (leftMinimum > rightMaximum)
             return;
 
         dragPoint = Number.constrain(dragPoint, leftMinimum, rightMaximum);
 
         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;
 
         var leftColumn = this._columnsArray[leftCellIndex];
         var rightColumn = this._columnsArray[rightCellIndex];
         if (leftColumn.weight || rightColumn.weight) {
             var sumOfWeights = leftColumn.weight + rightColumn.weight;
             var delta = rightEdgeOfNextColumn - leftEdgeOfPreviousColumn;
             leftColumn.weight = (dragPoint - leftEdgeOfPreviousColumn) * sumOfWeights / delta;
             rightColumn.weight = (rightEdgeOfNextColumn - dragPoint) * sumOfWeights / delta;
@@ skipping 700 matching lines @@
 
 WebInspector.CreationDataGridNode.prototype = {
     makeNormal: function()
     {
         delete this.isCreationNode;
         delete this.makeNormal;
     },
 
     __proto__: WebInspector.DataGridNode.prototype
 }