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 37ad46720da2e01636d05e7f6101db8426a629b3..50b9ed179716a0971edabc8e853e4cfacada3840 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 = [];
+    /** @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();
     },
 
     /**
@@ -141,6 +141,72 @@ WebInspector.ConsoleViewMessage.prototype = {
      * @param {!WebInspector.ConsoleMessage} consoleMessage
      * @return {!Element}
      */
+    _formatMessageAsTable: function(consoleMessage)

[lushnikov, 2016/09/30 21:30:47]

_buildTableMessage:

[luoe, 2016/09/30 23:33:02]

Done.

+    {
+        var formattedResult = createElement("span");
+        var table = consoleMessage.parameters && consoleMessage.parameters.length ? consoleMessage.parameters[0] : null;
+        if (table)
+            table = this._parameterToRemoteObject(table, this._target());
+        if (!table || !table.preview)
+            return this._buildMessageAnchor(formattedResult, consoleMessage);
+
+        var columnNames = [];
+        var preview = table.preview;
+        var rows = [];
+        for (var i = 0; i < preview.properties.length; ++i) {
+            var rowProperty = preview.properties[i];
+            var rowPreview = rowProperty.valuePreview;
+            if (!rowPreview)
+                continue;
+
+            var rowValue = {};
+            const maxColumnsToRender = 20;
+            for (var j = 0; j < rowPreview.properties.length; ++j) {
+                var cellProperty = rowPreview.properties[j];
+                var columnRendered = columnNames.indexOf(cellProperty.name) !== -1;
+                if (!columnRendered) {
+                    if (columnNames.length === maxColumnsToRender)
+                        continue;
+                    columnRendered = true;
+                    columnNames.push(cellProperty.name);
+                }
+
+                if (columnRendered) {
+                    var cellElement = this._renderPropertyPreviewOrAccessor(table, [rowProperty, cellProperty]);
+                    cellElement.classList.add("console-message-nowrap-below");
+                    rowValue[cellProperty.name] = cellElement;
+                }
+            }
+            rows.push([rowProperty.name, rowValue]);
+        }
+
+        var flatValues = [];
+        for (var i = 0; i < rows.length; ++i) {
+            var rowName = rows[i][0];
+            var rowValue = rows[i][1];
+            flatValues.push(rowName);
+            for (var j = 0; j < columnNames.length; ++j)
+                flatValues.push(rowValue[columnNames[j]]);
+        }
+        columnNames.unshift(WebInspector.UIString("(index)"));
+
+        if (flatValues.length) {
+            this._dataGrid = WebInspector.SortableDataGrid.create(columnNames, flatValues);
+
+            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 this._buildMessageAnchor(formattedResult, consoleMessage);
+        }
+        return this._buildMessageAnchor(formattedResult, consoleMessage);
+    },
+
+    /**
+     * @param {!WebInspector.ConsoleMessage} consoleMessage
+     * @return {!Element}
+     */
     _buildMessage: function(consoleMessage)
     {
         var messageElement;
@@ -385,11 +451,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.
@@ -573,69 +634,6 @@ WebInspector.ConsoleViewMessage.prototype = {
     },
 
     /**
-     * @param {!Array.<!WebInspector.RemoteObject>} parameters
-     * @return {!Element}
-     */
-    _formatParameterAsTable: function(parameters)
-    {
-        var element = createElementWithClass("div", "console-message-formatted-table");
-        var table = parameters[0];
-        if (!table || !table.preview)
-            return element;
-
-        var columnNames = [];
-        var preview = table.preview;
-        var rows = [];
-        for (var i = 0; i < preview.properties.length; ++i) {
-            var rowProperty = preview.properties[i];
-            var rowPreview = rowProperty.valuePreview;
-            if (!rowPreview)
-                continue;
-
-            var rowValue = {};
-            const maxColumnsToRender = 20;
-            for (var j = 0; j < rowPreview.properties.length; ++j) {
-                var cellProperty = rowPreview.properties[j];
-                var columnRendered = columnNames.indexOf(cellProperty.name) !== -1;
-                if (!columnRendered) {
-                    if (columnNames.length === maxColumnsToRender)
-                        continue;
-                    columnRendered = true;
-                    columnNames.push(cellProperty.name);
-                }
-
-                if (columnRendered) {
-                    var cellElement = this._renderPropertyPreviewOrAccessor(table, [rowProperty, cellProperty]);
-                    cellElement.classList.add("console-message-nowrap-below");
-                    rowValue[cellProperty.name] = cellElement;
-                }
-            }
-            rows.push([rowProperty.name, rowValue]);
-        }
-
-        var flatValues = [];
-        for (var i = 0; i < rows.length; ++i) {
-            var rowName = rows[i][0];
-            var rowValue = rows[i][1];
-            flatValues.push(rowName);
-            for (var j = 0; j < columnNames.length; ++j)
-                flatValues.push(rowValue[columnNames[j]]);
-        }
-
-        var dataGridContainer = element.createChild("span");
-        element.appendChild(this._formatParameter(table, true, false));
-        if (!flatValues.length)
-            return element;
-
-        columnNames.unshift(WebInspector.UIString("(index)"));
-        var dataGrid = WebInspector.SortableDataGrid.create(columnNames, flatValues);
-        dataGrid.renderInline();
-        dataGridContainer.appendChild(dataGrid.element);
-        this._dataGrids.push(dataGrid);
-        return element;
-    },
-
-    /**
      * @param {!WebInspector.RemoteObject} output
      * @param {!Element} elem
      */
@@ -974,7 +972,11 @@ WebInspector.ConsoleViewMessage.prototype = {
         if (this._message.type === WebInspector.ConsoleMessage.MessageType.StartGroup || this._message.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed)
             contentElement.classList.add("console-group-title");
 
-        var formattedMessage = this._buildMessage(this._message);
+        var formattedMessage;
+        if (this._message.type === WebInspector.ConsoleMessage.MessageType.Table)
+            formattedMessage = this._formatMessageAsTable(this._message);
+        else
+            formattedMessage = this._buildMessage(this._message);
         contentElement.appendChild(formattedMessage);
 
         this.updateTimestamp(WebInspector.moduleSetting("consoleTimestampsEnabled").get());