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 = [];

[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 = {
         "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 27 matching lines @@
     /**
      * @return {!Element}
      */
     _formatMessage: function()
     {
         var formattedMessage = createElement("span");
         WebInspector.appendStyle(formattedMessage, "components/objectValue.css");
         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);
         if (anchorElement) {
             // Append a space to prevent the anchor text from being glued to the console message when the user selects and copies the console messages.
             anchorElement.appendChild(createTextNode(" "));
             formattedMessage.insertBefore(anchorElement, formattedMessage.firstChild);
         }
 
         var dumpStackTrace = !!consoleMessage.stackTrace && (consoleMessage.source === WebInspector.ConsoleMessage.MessageSource.Network || consoleMessage.level === WebInspector.ConsoleMessage.MessageLevel.Error || consoleMessage.level === WebInspector.ConsoleMessage.MessageLevel.RevokedError || consoleMessage.type === WebInspector.ConsoleMessage.MessageType.Trace || consoleMessage.level === WebInspector.ConsoleMessage.MessageLevel.Warning);
         var target = this._target();
         if (dumpStackTrace && target) {
             var stackTracePreview = WebInspector.DOMPresentationUtils.buildStackTracePreviewContents(target, this._linkifier, consoleMessage.stackTrace);
             var autoExpand = consoleMessage.type === WebInspector.ConsoleMessage.MessageType.Trace;
             formattedMessage = this._wrapStackTraceFormatting(formattedMessage, stackTracePreview, autoExpand);
         }
 
         return formattedMessage;
     },
 
     /**
      * @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;
         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 206 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}
+     * @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;
         var rows = [];
         for (var i = 0; i < preview.properties.length; ++i) {
             var rowProperty = preview.properties[i];
             var rowPreview = rowProperty.valuePreview;
             if (!rowPreview)
                 continue;
 
@@ skipping 19 matching lines @@
         }
 
         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)"));
 
-        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);
     },
 
     /**
      * @param {!WebInspector.RemoteObject} output
      * @param {!Element} elem
      */
     _formatParameterAsString: function(output, elem)
     {
         var span = createElement("span");
         span.className = "object-value-string source-code";
@@ skipping 614 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
 }