DevTools: ConsoleViewMessage breakup _formatMessage()

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 120 matching lines @@
 
     /**
      * @return {!WebInspector.ConsoleMessage}
      */
     consoleMessage: function()
     {
         return this._message;
     },
 
     /**
+     * @param {!WebInspector.ConsoleMessage} consoleMessage
      * @return {!Element}
      */
-    _formatMessage: function()
+    _buildMessage: function(consoleMessage)
     {
-        var formattedMessage = createElement("span");
-        WebInspector.appendStyle(formattedMessage, "components/objectValue.css");
-        formattedMessage.className = "console-message-text source-code";
-
-        /**
-         * @param {string} title
-         * @return {!Element}
-         * @this {WebInspector.ConsoleMessage}
-         */
-        function linkifyRequest(title)
-        {
-            return WebInspector.Linkifier.linkifyUsingRevealer(/** @type {!WebInspector.NetworkRequest} */ (this.request), title, this.request.url);
-        }
-
-        var consoleMessage = this._message;
-        var anchorElement;
         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 = createTextNode(WebInspector.UIString("Console was cleared"));
-                formattedMessage.classList.add("console-info");
+                messageElement = createElementWithClass("span", "console-info");
+                messageElement.textContent = WebInspector.UIString("Console was cleared");

[lushnikov, 2016/10/01 02:30:41]

why this change?

[luoe, 2016/10/03 17:02:58]

Before ".console-info" was being applied to make formattedMessage italic style,
which included the anchor element.  I think we don't want the anchor style to
change in a console.clear() message, only the message content itself should.

                 break;
             case WebInspector.ConsoleMessage.MessageType.Assert:
                 var args = [WebInspector.UIString("Assertion failed:")];
                 if (consoleMessage.parameters)
                     args = args.concat(consoleMessage.parameters);
                 messageElement = this._format(args);
                 break;
             case WebInspector.ConsoleMessage.MessageType.Dir:
                 var obj = consoleMessage.parameters ? consoleMessage.parameters[0] : undefined;
                 var args = ["%O", obj];
@@ skipping 17 matching lines @@
                     messageElement.appendChild(WebInspector.Linkifier.linkifyUsingRevealer(consoleMessage.request, consoleMessage.request.url, consoleMessage.request.url));
                     if (consoleMessage.request.failed)
                         messageElement.createTextChildren(" ", consoleMessage.request.localizedFailDescription);
                     else
                         messageElement.createTextChildren(" ", String(consoleMessage.request.statusCode), " (", consoleMessage.request.statusText, ")");
                 } else {
                     var fragment = WebInspector.linkifyStringAsFragmentWithCustomLinkifier(consoleMessage.messageText, linkifyRequest.bind(consoleMessage));
                     messageElement.appendChild(fragment);
                 }
             } else {
-                var url = consoleMessage.url;
-                if (url) {
-                    var isExternal = !WebInspector.resourceForURL(url) && !WebInspector.networkMapping.uiSourceCodeForURLForAnyTarget(url);
-                    anchorElement = WebInspector.linkifyURLAsNode(url, url, "console-message-url", isExternal);
-                }
                 messageElement = this._format([consoleMessage.messageText]);
             }
         } else {
             var args = consoleMessage.parameters || [consoleMessage.messageText];
             messageElement = this._format(args);
         }
 
+        var formattedMessage = createElement("span");
+        WebInspector.appendStyle(formattedMessage, "components/objectValue.css");
+        formattedMessage.className = "console-message-text source-code";
+        var anchorElement = this._buildMessageAnchor(consoleMessage);
+        if (anchorElement)
+            formattedMessage.appendChild(anchorElement);
+        formattedMessage.appendChild(messageElement);
+
+        if (!!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))
+            formattedMessage = this._buildMessageStackTrace(formattedMessage, consoleMessage, this._linkifier);
+        return formattedMessage;
+
+        /**
+         * @param {string} title
+         * @return {!Element}
+         * @this {WebInspector.ConsoleMessage}
+         */
+        function linkifyRequest(title)
+        {
+            return WebInspector.Linkifier.linkifyUsingRevealer(/** @type {!WebInspector.NetworkRequest} */ (this.request), title, this.request.url);
+        }
+    },
+
+    /**
+     * @param {!WebInspector.ConsoleMessage} consoleMessage
+     * @return {?Element}
+     */
+    _buildMessageAnchor: function(consoleMessage)
+    {
+        var anchorElement = null;
         if (consoleMessage.source !== WebInspector.ConsoleMessage.MessageSource.Network || consoleMessage.request) {
             if (consoleMessage.scriptId) {
                 anchorElement = this._linkifyScriptId(consoleMessage.scriptId, consoleMessage.url || "", consoleMessage.line, consoleMessage.column);
             } else {
                 if (consoleMessage.stackTrace && consoleMessage.stackTrace.callFrames.length)
                     anchorElement = this._linkifyStackTraceTopFrame(consoleMessage.stackTrace);
                 else if (consoleMessage.url && consoleMessage.url !== "undefined")
                     anchorElement = this._linkifyLocation(consoleMessage.url, consoleMessage.line, consoleMessage.column);
             }
+        } else if (consoleMessage.url) {
+            var url = consoleMessage.url;
+            var isExternal = !WebInspector.resourceForURL(url) && !WebInspector.networkMapping.uiSourceCodeForURLForAnyTarget(url);
+            anchorElement = WebInspector.linkifyURLAsNode(url, url, "console-message-url", isExternal);
         }
 
-        formattedMessage.appendChild(messageElement);
-        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.
+        // Append a space to prevent the anchor text from being glued to the console message when the user selects and copies the console messages.
+        if (anchorElement)
             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 toggleElement = createElementWithClass("div", "console-message-stack-trace-toggle");
-            var triangleElement = toggleElement.createChild("div", "console-message-stack-trace-triangle");
-            var contentElement = toggleElement.createChild("div", "console-message-stack-trace-wrapper");
-
-            var clickableElement = contentElement.createChild("div");
-            clickableElement.appendChild(formattedMessage);
-            var stackTraceElement = contentElement.createChild("div");
-            stackTraceElement.appendChild(WebInspector.DOMPresentationUtils.buildStackTracePreviewContents(target, this._linkifier, this._message.stackTrace));
-            stackTraceElement.classList.add("hidden");
-
-            /**
-             * @param {boolean} expand
-             */
-            function expandStackTrace(expand)
-            {
-                stackTraceElement.classList.toggle("hidden", !expand);
-                toggleElement.classList.toggle("expanded", expand);
-            }
-
-            /**
-             * @param {?Event} event
-             */
-            function toggleStackTrace(event)
-            {
-                if (event.target.hasSelection())
-                    return;
-                expandStackTrace(stackTraceElement.classList.contains("hidden"));
-                event.consume();
-            }
-
-            clickableElement.addEventListener("click", toggleStackTrace, false);
-            triangleElement.addEventListener("click", toggleStackTrace, false);
-            if (consoleMessage.type === WebInspector.ConsoleMessage.MessageType.Trace)
-                expandStackTrace(true);
-
-            toggleElement._expandStackTraceForTest = expandStackTrace.bind(null, true);
-            formattedMessage = toggleElement;
-        }
-
-        return formattedMessage;
+        return anchorElement;
     },
 
     /**
+     * @param {!Element} contents
+     * @param {!WebInspector.ConsoleMessage} consoleMessage
+     * @param {!WebInspector.Linkifier} linkifier
+     * @return {!Element}
+     */
+    _buildMessageStackTrace: function(contents, consoleMessage, linkifier)

[lushnikov, 2016/10/01 02:30:41]

_buildMessageWithStackTrace: function(consoleMessage, linkifier)

[luoe, 2016/10/03 17:02:57]

Done.

+    {
+        var target = consoleMessage.target();

[lushnikov, 2016/10/01 02:30:41]

var messageElement = this._buildMessage(consoleMessage);

[luoe, 2016/10/03 17:02:58]

Done.

+        if (!target)
+            return contents;
+
+        var toggleElement = createElementWithClass("div", "console-message-stack-trace-toggle");
+        var triangleElement = toggleElement.createChild("div", "console-message-stack-trace-triangle");
+        var contentElement = toggleElement.createChild("div", "console-message-stack-trace-wrapper");
+
+        var clickableElement = contentElement.createChild("div");
+        clickableElement.appendChild(contents);
+        var stackTraceElement = contentElement.createChild("div");
+        var stackTracePreview = WebInspector.DOMPresentationUtils.buildStackTracePreviewContents(target, linkifier, consoleMessage.stackTrace);
+        stackTraceElement.appendChild(stackTracePreview);
+        stackTraceElement.classList.add("hidden");
+
+        /**
+         * @param {boolean} expand
+         */
+        function expandStackTrace(expand)
+        {
+            stackTraceElement.classList.toggle("hidden", !expand);
+            toggleElement.classList.toggle("expanded", expand);
+        }
+
+        /**
+         * @param {?Event} event
+         */
+        function toggleStackTrace(event)
+        {
+            if (event.target.hasSelection())
+                return;
+            expandStackTrace(stackTraceElement.classList.contains("hidden"));
+            event.consume();
+        }
+
+        clickableElement.addEventListener("click", toggleStackTrace, false);
+        triangleElement.addEventListener("click", toggleStackTrace, false);
+        if (consoleMessage.type === WebInspector.ConsoleMessage.MessageType.Trace)
+            expandStackTrace(true);
+
+        toggleElement._expandStackTraceForTest = expandStackTrace.bind(null, true);
+        return toggleElement;
+    },
+
+    /**
      * @param {string} url
      * @param {number} lineNumber
      * @param {number} columnNumber
      * @return {?Element}
      */
     _linkifyLocation: function(url, lineNumber, columnNumber)
     {
         var target = this._target();
         if (!target)
             return null;
@@ skipping 20 matching lines @@
      * @return {?Element}
      */
     _linkifyScriptId: function(scriptId, url, lineNumber, columnNumber)
     {
         var target = this._target();
         if (!target)
             return null;
         return this._linkifier.linkifyScriptLocation(target, scriptId, url, lineNumber, columnNumber, "console-message-url");
     },
 
+    /**
+     * @param {!WebInspector.RemoteObject|!Object|string} parameter
+     * @param {?WebInspector.Target} target
+     * @return {!WebInspector.RemoteObject}
+     */
+    _parameterToRemoteObject: function(parameter, target)
+    {
+        if (parameter instanceof WebInspector.RemoteObject)
+            return parameter;
+        if (!target)
+            return WebInspector.RemoteObject.fromLocalObject(parameter);
+        if (typeof parameter === "object")
+            return target.runtimeModel.createRemoteObject(parameter);
+        return target.runtimeModel.createRemoteObjectFromPrimitiveValue(parameter);
+    },
+
+    /**
+     * @param {!Array.<!WebInspector.RemoteObject|string>} parameters
+     * @return {!Element}
+     */
     _format: function(parameters)
     {
         // This node is used like a Builder. Values are continually appended onto it.
         var formattedResult = createElement("span");
         if (!parameters.length)
             return formattedResult;
 
-        var target = this._target();
-
         // Formatting code below assumes that parameters are all wrappers whereas frontend console
         // API allows passing arbitrary values as messages (strings, numbers, etc.). Wrap them here.
-        for (var i = 0; i < parameters.length; ++i) {
-            // FIXME: Only pass runtime wrappers here.
-            if (parameters[i] instanceof WebInspector.RemoteObject)
-                continue;
-
-            if (!target) {
-                parameters[i] = WebInspector.RemoteObject.fromLocalObject(parameters[i]);
-                continue;
-            }
-
-            if (typeof parameters[i] === "object")
-                parameters[i] = target.runtimeModel.createRemoteObject(parameters[i]);
-            else
-                parameters[i] = target.runtimeModel.createRemoteObjectFromPrimitiveValue(parameters[i]);
-        }
+        // FIXME: Only pass runtime wrappers here.
+        for (var i = 0; i < parameters.length; ++i)
+            parameters[i] = this._parameterToRemoteObject(parameters[i], this._target());
 
         // There can be string log and string eval result. We distinguish between them based on message type.
-        var shouldFormatMessage = WebInspector.RemoteObject.type(parameters[0]) === "string" && (this._message.type !== WebInspector.ConsoleMessage.MessageType.Result || this._message.level === WebInspector.ConsoleMessage.MessageLevel.Error || this._message.level === WebInspector.ConsoleMessage.MessageLevel.RevokedError);
+        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) {
-            // Multiple parameters with the first being a format string. Save unused substitutions.
-            var result = this._formatWithSubstitutionString(parameters[0].description, parameters.slice(1), formattedResult);
+            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;
         }
 
@@ skipping 381 matching lines @@
                 }
                 rootElement.appendChild(this._previewFormatter.renderPropertyPreview(type, subtype, description));
             }
         }
 
         return rootElement;
     },
 
     /**
      * @param {string} format
-     * @param {!Array.<string>} parameters
+     * @param {!Array.<!WebInspector.RemoteObject>} parameters
      * @param {!Element} formattedResult
      */
     _formatWithSubstitutionString: function(format, parameters, formattedResult)
     {
         var formatters = {};
 
         /**
          * @param {boolean} force
          * @param {!WebInspector.RemoteObject} obj
          * @return {!Element}
@@ skipping 165 matching lines @@
     /**
      * @return {!Element}
      */
     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");
 
-        contentElement.appendChild(this._formatMessage());
+        var formattedMessage = this._buildMessage(this._message);

[lushnikov, 2016/10/01 02:30:41]

if (THIS_IS_STACK_MESSAGE)
    formatterMessage = this._buildMessageWithStack(this._message)
else
    formattedMessage = this._buildMessage(this._message);

And in the next patch you'll have a table condition here

Will this work?

[luoe, 2016/10/03 17:02:57]

Done.

+        contentElement.appendChild(formattedMessage);
 
         this.updateTimestamp(WebInspector.moduleSetting("consoleTimestampsEnabled").get());
-
         return this._contentElement;
     },
 
     /**
      * @return {!Element}
      */
     toMessageElement: function()
     {
         if (this._element)
             return this._element;
@@ skipping 268 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
 }