DevTools: ConsoleViewMessage isolate _formatMessageAsTable() and single dataGrid

third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js

Index: third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
diff --git a/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js b/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
index 4c5a0137ea01dfb2c57fb69301b0e1feb92ff42a..3a371180192746cbf40985d9fc711c5858dfce01 100644
--- a/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
+++ b/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
@@ -43,8 +43,8 @@ WebInspector.ConsoleViewMessage = function(consoleMessage, linkifier, nestingLev
     this._closeGroupDecorationCount = 0;
     this._nestingLevel = nestingLevel;
 
-    /** @type {!Array.<!WebInspector.DataGrid>} */
-    this._dataGrids = [];

[lushnikov, 2016/09/28 20:52:35]

whoa, nice!

[luoe, 2016/09/29 21:31:13]

Done.

+    /** @type {?WebInspector.DataGrid} */
+    this._dataGrid = null;
 
     /** @type {!Object.<string, function(!WebInspector.RemoteObject, !Element, boolean=)>} */
     this._customFormatters = {
@@ -89,8 +89,8 @@ WebInspector.ConsoleViewMessage.prototype = {
      */
     wasShown: function()
     {
-        for (var i = 0; this._dataGrids && i < this._dataGrids.length; ++i)
-            this._dataGrids[i].updateWidths();
+        if (this._datagrid)
+            this._dataGrid.updateWidths();
         this._isVisible = true;
     },
 
@@ -98,8 +98,8 @@ WebInspector.ConsoleViewMessage.prototype = {
     {
         if (!this._isVisible)
             return;
-        for (var i = 0; this._dataGrids && i < this._dataGrids.length; ++i)
-            this._dataGrids[i].onResize();
+        if (this._datagrid)
+            this._dataGrid.onResize();
     },
 
     /**
@@ -147,7 +147,11 @@ WebInspector.ConsoleViewMessage.prototype = {
         formattedMessage.className = "console-message-text source-code";
 
         var consoleMessage = this._message;
-        var messageElement = this._buildMessage(consoleMessage);
+        var messageElement;
+        if (this._message.type === WebInspector.ConsoleMessage.MessageType.Table)
+            messageElement = this._formatMessageAsTable(consoleMessage);
+        else
+            messageElement = this._buildMessage(consoleMessage);
         formattedMessage.appendChild(messageElement);
 
         var anchorElement = this._buildAnchor(consoleMessage);
@@ -172,6 +176,30 @@ WebInspector.ConsoleViewMessage.prototype = {
      * @param {!WebInspector.ConsoleMessage} consoleMessage
      * @return {!Element}
      */
+    _formatMessageAsTable: function(consoleMessage)
+    {
+        var formattedResult = createElement("span");
+        if (!consoleMessage.parameters || !consoleMessage.parameters.length)
+            return formattedResult;
+
+        var table = this._parameterToRemoteObject(consoleMessage.parameters[0], this._target());
+        this._dataGrid = this._buildTableDataGrid(table);
+        if (!this._dataGrid)
+            return formattedResult;
+
+        var tableElement = formattedResult.createChild("div", "console-message-formatted-table");
+        var dataGridContainer = tableElement.createChild("span");
+        tableElement.appendChild(this._formatParameter(table, true, false));
+        this._dataGrid.renderInline();
+        dataGridContainer.appendChild(this._dataGrid.element);
+
+        return formattedResult;
+    },
+
+    /**
+     * @param {!WebInspector.ConsoleMessage} consoleMessage
+     * @return {!Element}
+     */
     _buildMessage: function(consoleMessage)
     {
         var messageElement;
@@ -398,11 +426,6 @@ WebInspector.ConsoleViewMessage.prototype = {
                 formattedResult.createTextChild(" ");
         }
 
-        if (this._message.type === WebInspector.ConsoleMessage.MessageType.Table) {
-            formattedResult.appendChild(this._formatParameterAsTable(parameters));
-            return formattedResult;
-        }
-
         // Single parameter, or unused substitutions from above.
         for (var i = 0; i < parameters.length; ++i) {
             // Inline strings when formatting.
@@ -586,15 +609,13 @@ WebInspector.ConsoleViewMessage.prototype = {
     },
 
     /**
-     * @param {!Array.<!WebInspector.RemoteObject>} parameters
-     * @return {!Element}
+     * @param {!WebInspector.RemoteObject} table
+     * @return {?WebInspector.SortableDataGrid}
      */
-    _formatParameterAsTable: function(parameters)
+    _buildTableDataGrid: function(table)

[lushnikov, 2016/09/28 20:52:35]

maybe join this with _formatMessageAsTable?

[luoe, 2016/09/29 21:31:55]

Done.

     {
-        var element = createElementWithClass("div", "console-message-formatted-table");
-        var table = parameters[0];
-        if (!table || !table.preview)
-            return element;
+        if (!table.preview)
+            return null;
 
         var columnNames = [];
         var preview = table.preview;
@@ -634,18 +655,12 @@ WebInspector.ConsoleViewMessage.prototype = {
             for (var j = 0; j < columnNames.length; ++j)
                 flatValues.push(rowValue[columnNames[j]]);
         }
+        columnNames.unshift(WebInspector.UIString("(index)"));
 
-        var dataGridContainer = element.createChild("span");
-        element.appendChild(this._formatParameter(table, true, false));
         if (!flatValues.length)
-            return element;
+            return null;
 
-        columnNames.unshift(WebInspector.UIString("(index)"));
-        var dataGrid = WebInspector.SortableDataGrid.create(columnNames, flatValues);
-        dataGrid.renderInline();
-        dataGridContainer.appendChild(dataGrid.element);
-        this._dataGrids.push(dataGrid);
-        return element;
+        return WebInspector.SortableDataGrid.create(columnNames, flatValues);
     },
 
     /**