DevTools: ConsoleViewMessage isolate _formatMessageAsTable() and single dataGrid

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

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * 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
@@ skipping 25 matching lines @@
  * @param {number} nestingLevel
  */
 WebInspector.ConsoleViewMessage = function(consoleMessage, linkifier, nestingLevel)
 {
     this._message = consoleMessage;
     this._linkifier = linkifier;
     this._repeatCount = 1;
     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 = {
         "array": this._formatParameterAsArray,
         "typedarray": this._formatParameterAsArray,
         "error": this._formatParameterAsError,
         "function": this._formatParameterAsFunction,
         "generator": this._formatParameterAsObject,
         "iterator": this._formatParameterAsObject,
         "map": this._formatParameterAsObject,
@@ skipping 24 matching lines @@
     element: function()
     {
         return this.toMessageElement();
     },
 
     /**
      * @override
      */
     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;
     },
 
     onResize: function()
     {
         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();
     },
 
     /**
      * @override
      */
     willHide: function()
     {
         this._isVisible = false;
         this._cachedHeight = this.contentElement().offsetHeight;
     },
@@ skipping 21 matching lines @@
      */
     consoleMessage: function()
     {
         return this._message;
     },
 
     /**
      * @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;
         if (consoleMessage.source === WebInspector.ConsoleMessage.MessageSource.ConsoleAPI) {
             switch (consoleMessage.type) {
             case WebInspector.ConsoleMessage.MessageType.Trace:
                 messageElement = this._format(consoleMessage.parameters || ["console.trace"]);
                 break;
             case WebInspector.ConsoleMessage.MessageType.Clear:
                 messageElement = createElementWithClass("span", "console-info");
@@ skipping 224 matching lines @@
         var shouldFormatMessage = WebInspector.RemoteObject.type((/** @type {!Array.<!WebInspector.RemoteObject>} **/ (parameters))[0]) === "string" && (this._message.type !== WebInspector.ConsoleMessage.MessageType.Result || this._message.level === WebInspector.ConsoleMessage.MessageLevel.Error || this._message.level === WebInspector.ConsoleMessage.MessageLevel.RevokedError);
 
         // Multiple parameters with the first being a format string. Save unused substitutions.
         if (shouldFormatMessage) {
             var result = this._formatWithSubstitutionString(/** @type {string} **/ (parameters[0].description), parameters.slice(1), formattedResult);
             parameters = result.unusedSubstitutions;
             if (parameters.length)
                 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.
             if (shouldFormatMessage && parameters[i].type === "string")
                 formattedResult.appendChild(WebInspector.linkifyStringAsFragment(parameters[i].description));
             else
                 formattedResult.appendChild(this._formatParameter(parameters[i], false, true));
             if (i < parameters.length - 1)
                 formattedResult.createTextChild(" ");
         }
@@ skipping 163 matching lines @@
     _formatParameterAsArray: function(array, elem)
     {
         var maxFlatArrayLength = 100;
         if (this.useArrayPreviewInFormatter(array) || array.arrayLength() > maxFlatArrayLength)
             this._formatParameterAsArrayOrObject(array, elem, this.useArrayPreviewInFormatter(array) || array.arrayLength() <= maxFlatArrayLength);
         else
             array.getAllProperties(false, this._printArrayResult.bind(this, array, elem));
     },
 
     /**
-     * @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
      */
     _formatParameterAsString: function(output, elem)
     {
         var span = createElement("span");
         span.className = "object-value-string source-code";
         span.appendChild(WebInspector.linkifyStringAsFragment(output.description || ""));
 
         // Make black quotes.
@@ skipping 318 matching lines @@
     contentElement: function()
     {
         if (this._contentElement)
             return this._contentElement;
 
         var contentElement = createElementWithClass("div", "console-message");
         this._contentElement = contentElement;
         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());
         return this._contentElement;
     },
 
     /**
      * @return {!Element}
      */
     toMessageElement: function()
@@ skipping 271 matching lines @@
     {
         if (!this._element) {
             WebInspector.ConsoleViewMessage.prototype.toMessageElement.call(this);
             this._element.classList.toggle("collapsed", this._collapsed);
         }
         return this._element;
     },
 
     __proto__: WebInspector.ConsoleViewMessage.prototype
 }