Web Inspector: Inline multiple console log values if they are simple

https://bugs.webkit.org/show_bug.cgi?id=174746
<rdar://problem/33469376>

Patch by Joseph Pecoraro <pecoraro@apple.com> on 2017-07-25
Reviewed by Matt Baker.

* UserInterface/Models/IssueMessage.js:
* UserInterface/Protocol/RemoteObject.js:
(WebInspector.RemoteObject.type): Deleted.
Remove this as it isn't as useful as directly checking the type.

* UserInterface/Views/ConsoleMessageView.js:
(WebInspector.ConsoleMessageView.prototype._appendExtraParameters):
(WebInspector.ConsoleMessageView.prototype._appendFormattedArguments):
(WebInspector.ConsoleMessageView.prototype._hasSimpleDisplay):
(WebInspector.ConsoleMessageView.prototype._isStackTrace):
For leading primitive/simple values, display them inline on the console message.

* UserInterface/Views/FormattedValue.js:
(WebInspector.FormattedValue.hasSimpleDisplay):
Provide a helper to determine if a formatted value will be simple.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@219893 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 64a6aa1ab2add4ca3295f6de08c22eda82d6d21f..af754d1023b57a8c0e4cd2f8d4baca9125b1ffdc 100644 (file)
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,27 @@
+2017-07-25  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: Inline multiple console log values if they are simple
+        https://bugs.webkit.org/show_bug.cgi?id=174746
+        <rdar://problem/33469376>
+
+        Reviewed by Matt Baker.
+
+        * UserInterface/Models/IssueMessage.js:
+        * UserInterface/Protocol/RemoteObject.js:
+        (WebInspector.RemoteObject.type): Deleted.
+        Remove this as it isn't as useful as directly checking the type.
+
+        * UserInterface/Views/ConsoleMessageView.js:
+        (WebInspector.ConsoleMessageView.prototype._appendExtraParameters):
+        (WebInspector.ConsoleMessageView.prototype._appendFormattedArguments):
+        (WebInspector.ConsoleMessageView.prototype._hasSimpleDisplay):
+        (WebInspector.ConsoleMessageView.prototype._isStackTrace):
+        For leading primitive/simple values, display them inline on the console message.
+
+        * UserInterface/Views/FormattedValue.js:
+        (WebInspector.FormattedValue.hasSimpleDisplay):
+        Provide a helper to determine if a formatted value will be simple.
+
 2017-07-25  Nikita Vasilyev  <nvasilyev@apple.com>
 
         Web Inspector: Styles: Add a switch for Spreadsheet model style editor to experimental settings

diff --git a/Source/WebInspectorUI/UserInterface/Models/IssueMessage.js b/Source/WebInspectorUI/UserInterface/Models/IssueMessage.js
index 43acd732407d0593bbd95e0c47320cdfd5b2dc03..9900b1d1c1eb85b04da663693ef47a55f9451536 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Models/IssueMessage.js
+++ b/Source/WebInspectorUI/UserInterface/Models/IssueMessage.js
@@ -132,7 +132,7 @@ WebInspector.IssueMessage = class IssueMessage extends WebInspector.Object
         if (!parameters)
             return this._consoleMessage.messageText;
 
-        if (WebInspector.RemoteObject.type(parameters[0]) !== "string")
+        if (parameters[0].type !== "string")
             return this._consoleMessage.messageText;
 
         function valueFormatter(obj)

diff --git a/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js b/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js
index 6212247157a36d070c202cd5b79dfe6caa18df07..02e326b4cab91b7bd4420f0eeede1de262091132 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js
+++ b/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js
@@ -162,18 +162,6 @@ WebInspector.RemoteObject = class RemoteObject
         });
     }
 
-    static type(remoteObject)
-    {
-        if (remoteObject === null)
-            return "null";
-
-        var type = typeof remoteObject;
-        if (type !== "object" && type !== "function")
-            return type;
-
-        return remoteObject.type;
-    }
-
     // Public
 
     get target()

diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.js b/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.js
index 24a32f327834bd5795208f686aeda41873051001..4f1019e1880a2349ef55ef2dd2b396574ae4b702 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.js
@@ -376,7 +376,7 @@ WebInspector.ConsoleMessageView = class ConsoleMessageView extends WebInspector.
 
         this._makeExpandable();
 
-        // Auto-expand if there are multiple objects.
+        // Auto-expand if there are multiple objects or if there were simple parameters.
         if (this._extraParameters.length > 1)
             this.expand();
 
@@ -426,11 +426,11 @@ WebInspector.ConsoleMessageView = class ConsoleMessageView extends WebInspector.
         if (!parameters.length)
             return;
 
-        for (var i = 0; i < parameters.length; ++i)
+        for (let i = 0; i < parameters.length; ++i)
             parameters[i] = this._createRemoteObjectIfNeeded(parameters[i]);
 
-        var builderElement = element.appendChild(document.createElement("span"));
-        var shouldFormatWithStringSubstitution = WebInspector.RemoteObject.type(parameters[0]) === "string" && this._message.type !== WebInspector.ConsoleMessage.MessageType.Result;
+        let builderElement = element.appendChild(document.createElement("span"));
+        let shouldFormatWithStringSubstitution = parameters[0].type === "string" && this._message.type !== WebInspector.ConsoleMessage.MessageType.Result;
 
         // Single object (e.g. console result or logging a non-string object).
         if (parameters.length === 1 && !shouldFormatWithStringSubstitution) {
@@ -446,36 +446,69 @@ WebInspector.ConsoleMessageView = class ConsoleMessageView extends WebInspector.
 
         // Format string / message / default message.
         if (shouldFormatWithStringSubstitution) {
-            var result = this._formatWithSubstitutionString(parameters, builderElement);
+            let result = this._formatWithSubstitutionString(parameters, builderElement);
             parameters = result.unusedSubstitutions;
             this._extraParameters = parameters;
         } else {
-            var defaultMessage = WebInspector.UIString("No message");
+            let defaultMessage = WebInspector.UIString("No message");
             builderElement.append(defaultMessage);
         }
 
-        // Trailing parameters.
+        // Trailing inline parameters.
         if (parameters.length) {
-            let enclosedElement = document.createElement("span");
+            let simpleParametersCount = 0;
+            for (let parameter of parameters) {
+                if (!this._hasSimpleDisplay(parameter))
+                    break;
+                simpleParametersCount++;
+            }
+
+            // Show one or more simple parameters inline on the message line.
+            if (simpleParametersCount) {
+                let simpleParameters = parameters.splice(0, simpleParametersCount);
+                this._extraParameters = parameters;
+
+                for (let parameter of simpleParameters) {
+                    let enclosedElement = builderElement.appendChild(document.createElement("span"));
+                    enclosedElement.classList.add("console-message-preview-divider", "inline-lossless");
+                    enclosedElement.textContent = ` ${enDash} `;
+
+                    let previewContainer = builderElement.appendChild(document.createElement("span"));
+                    previewContainer.classList.add("inline-lossless");
+
+                    let preview = WebInspector.FormattedValue.createObjectPreviewOrFormattedValueForRemoteObject(parameter, WebInspector.ObjectPreviewView.Mode.Brief);
+                    let isPreviewView = preview instanceof WebInspector.ObjectPreviewView;
+
+                    if (isPreviewView)
+                        preview.setOriginatingObjectInfo(parameter, null);
+
+                    let previewElement = isPreviewView ? preview.element : preview;
+                    previewContainer.appendChild(previewElement);
+
+                    // Simple displayable parameters should pretty much always be lossless.
+                    // An exception might be a truncated string.
+                    console.assert((isPreviewView && preview.lossless) || (!isPreviewView && this._shouldConsiderObjectLossless(parameter)));
+                }
+            }
 
+            // If there is a single non-simple parameter after simple paramters, show it inline.
             if (parameters.length === 1 && !this._isStackTrace(parameters[0])) {
                 let parameter = parameters[0];
 
-                // Single object. Show a preview.
-                builderElement.append(enclosedElement);
+                let enclosedElement = builderElement.appendChild(document.createElement("span"));
                 enclosedElement.classList.add("console-message-preview-divider");
-                enclosedElement.textContent = " \u2013 ";
+                enclosedElement.textContent = ` ${enDash} `;
 
-                var previewContainer = builderElement.appendChild(document.createElement("span"));
+                let previewContainer = builderElement.appendChild(document.createElement("span"));
                 previewContainer.classList.add("console-message-preview");
 
-                var preview = WebInspector.FormattedValue.createObjectPreviewOrFormattedValueForRemoteObject(parameter, WebInspector.ObjectPreviewView.Mode.Brief);
-                var isPreviewView = preview instanceof WebInspector.ObjectPreviewView;
+                let preview = WebInspector.FormattedValue.createObjectPreviewOrFormattedValueForRemoteObject(parameter, WebInspector.ObjectPreviewView.Mode.Brief);
+                let isPreviewView = preview instanceof WebInspector.ObjectPreviewView;
 
                 if (isPreviewView)
                     preview.setOriginatingObjectInfo(parameter, null);
 
-                var previewElement = isPreviewView ? preview.element : preview;
+                let previewElement = isPreviewView ? preview.element : preview;
                 previewContainer.appendChild(previewElement);
 
                 // If this preview is effectively lossless, we can avoid making this console message expandable.
@@ -484,8 +517,9 @@ WebInspector.ConsoleMessageView = class ConsoleMessageView extends WebInspector.
                     enclosedElement.classList.add("inline-lossless");
                     previewContainer.classList.add("inline-lossless");
                 }
-            } else {
-                // Multiple objects. Show an indicator.
+            } else if (parameters.length) {
+                // Multiple remaining objects. Show an indicator and they will be appended as extra parameters.
+                let enclosedElement = document.createElement("span");
                 builderElement.append(" ", enclosedElement);
                 enclosedElement.classList.add("console-message-enclosed");
                 enclosedElement.textContent = "(" + parameters.length + ")";
@@ -493,14 +527,18 @@ WebInspector.ConsoleMessageView = class ConsoleMessageView extends WebInspector.
         }
     }
 
-    _isStackTrace(parameter)
+    _hasSimpleDisplay(parameter)
     {
         console.assert(parameter instanceof WebInspector.RemoteObject);
 
-        if (WebInspector.RemoteObject.type(parameter) !== "string")
-            return false;
+        return WebInspector.FormattedValue.hasSimpleDisplay(parameter) && !this._isStackTrace(parameter);
+    }
+
+    _isStackTrace(parameter)
+    {
+        console.assert(parameter instanceof WebInspector.RemoteObject);
 
-        return WebInspector.StackTrace.isLikelyStackTrace(parameter.description);
+        return parameter.type === "string" && WebInspector.StackTrace.isLikelyStackTrace(parameter.description);
     }
 
     _shouldConsiderObjectLossless(object)

diff --git a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js
index f42d4c5141fa39fd3e15e0f655a0f917c6a9fab0..ce5d27c6aef35d71138cd94ecfb8a491d2da2e9b 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js
+++ b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js
@@ -25,6 +25,28 @@
 
 WebInspector.FormattedValue = {};
 
+WebInspector.FormattedValue.hasSimpleDisplay = function(object)
+{
+    switch (object.type) {
+    case "boolean":
+    case "number":
+    case "string":
+    case "symbol":
+    case "undefined":
+        return true;
+
+    case "function":
+        return false;
+
+    case "object":
+        var subtype = object.subtype;
+        return subtype === "null" || subtype === "regexp" || subtype === "date";
+    }
+
+    console.assert(false, "All RemoteObject types should be handled above");
+    return false;
+};
+
 WebInspector.FormattedValue.classNameForTypes = function(type, subtype)
 {
     return "formatted-" + (subtype ? subtype : type);