Changeset 39537 in webkit

Timestamp:

Jan 1, 2009 5:08:20 PM (15 years ago)

Author:

oliver@apple.com

Message:

2008-12-29 Konstantin Käfer <​kkaefer@gmail.com>

Reviewed by Tim Hatcher.

Fix for ​https://bugs.webkit.org/show_bug.cgi?id=17229
<rdar://problem/5732829> Inspector should show properties of all JS objects in Console

Prints objects not as plain text but makes them expandable so that
they can be inspected.

• inspector/front-end/Console.js: (): added a parameter "inline" to the WebInspector.Console._format function which indicates

whether the object is printed in the context of another string (with console.log()) or
as sole element.

(.): objects and DOM nodes are now printed in an expandable form when they are printed alone

(i.e. not in the context of a console.log() string) so that they can be inspected.

• inspector/front-end/PropertiesSection.js: (WebInspector.PropertiesSection.prototype.set title): Allow DOM Nodes as title instead of strings

in that case, the Node is inserted into the title instead of the string value of the passed
object. This is used for displaying linkified titles, for example when inspecting DOM nodes,
the syntax highlighted HTML representation is shown instead of the plain source code.

• inspector/front-end/inspector.css: correct the offsetParent for the expandable object inspector.

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/Console.js (modified) (7 diffs)
• inspector/front-end/PropertiesSection.js (modified) (1 diff)
• inspector/front-end/inspector.css (modified) (1 diff)

trunk/WebCore/ChangeLog

@@ +1 @@
+2008-12-29  Konstantin Käfer  <kkaefer@gmail.com>
+
+        Reviewed by Tim Hatcher.
+
+        Fix for https://bugs.webkit.org/show_bug.cgi?id=17229
+        <rdar://problem/5732829> Inspector should show properties of all JS objects in Console
+
+        Prints objects not as plain text but makes them expandable so that
+        they can be inspected.
+
+        * inspector/front-end/Console.js:
+        (): added a parameter "inline" to the WebInspector.Console._format function which indicates
+            whether the object is printed in the context of another string (with console.log()) or
+            as sole element.
+        (.): objects and DOM nodes are now printed in an expandable form when they are printed alone
+            (i.e. not in the context of a console.log() string) so that they can be inspected.
+        * inspector/front-end/PropertiesSection.js:
+        (WebInspector.PropertiesSection.prototype.set title): Allow DOM Nodes as title instead of strings
+            in that case, the Node is inserted into the title instead of the string value of the passed
+            object. This is used for displaying linkified titles, for example when inspecting DOM nodes,
+            the syntax highlighted HTML representation is shown instead of the plain source code.
+        * inspector/front-end/inspector.css: correct the offsetParent for the expandable object inspector.
+
 2009-01-01  Darin Adler  <darin@apple.com>
 

trunk/WebCore/inspector/front-end/Console.js

@@ -478 +478 @@
     },
 
-    _format: function(output)
+    _format: function(output, inline)
     {
         var type = Object.type(output, InspectorController.inspectedWindow());
@@ -510 +510 @@
         var span = document.createElement("span");
         span.addStyleClass("console-formatted-" + type);
-        this[formatter](output, span);
+        this[formatter](output, span, inline);
         return span;
     },
 
-    _formatvalue: function(val, elem)
+    _formatvalue: function(val, elem, inline)
     {
         elem.appendChild(document.createTextNode(val));
     },
 
-    _formatstring: function(str, elem)
+    _formatstring: function(str, elem, inline)
     {
         elem.appendChild(document.createTextNode("\"" + str + "\""));
     },
 
-    _formatregexp: function(re, elem)
+    _formatregexp: function(re, elem, inline)
     {
         var formatted = String(re).replace(/([\\\/])/g, "\\$1").replace(/\\(\/[gim]*)$/, "$1").substring(1);
@@ -530 +530 @@
     },
 
-    _formatarray: function(arr, elem)
+    _formatarray: function(arr, elem, inline)
     {
         elem.appendChild(document.createTextNode("["));
         for (var i = 0; i < arr.length; ++i) {
-            elem.appendChild(this._format(arr[i]));
+            elem.appendChild(this._format(arr[i], true));
             if (i < arr.length - 1)
                 elem.appendChild(document.createTextNode(", "));
@@ -541 +541 @@
     },
 
-    _formatnode: function(node, elem)
+    _formatnode: function(node, elem, inline)
     {
         var anchor = document.createElement("a");
@@ -549 +549 @@
         anchor.addEventListener("mouseover", this._mouseOverNode.bind(this), false);
         anchor.addEventListener("mouseout", this._mouseOutOfNode.bind(this), false);
-        elem.appendChild(anchor);
-    },
-
-    _formatobject: function(obj, elem)
-    {
-        elem.appendChild(document.createTextNode(Object.describe(obj)));
-    },
-
-    _formaterror: function(obj, elem)
+
+        if (inline)
+            elem.appendChild(anchor);
+        else
+            elem.appendChild(new WebInspector.ObjectPropertiesSection(node, anchor, null, null, true).element);
+    },
+
+    _formatobject: function(obj, elem, inline)
+    {
+        if (inline)
+            elem.appendChild(document.createTextNode(Object.describe(obj)));
+        else
+            elem.appendChild(new WebInspector.ObjectPropertiesSection(obj, null, null, null, true).element);
+    },
+
+    _formaterror: function(obj, elem, inline)
     {
         elem.appendChild(document.createTextNode(obj.name + ": " + obj.message + " "));
@@ -637 +644 @@
         function formatForConsole(obj)
         {
-            return WebInspector.console._format(obj);
+            return WebInspector.console._format(obj, true);
         }
 
@@ -669 +676 @@
             if (typeof parameters[i] === "string")
                 formattedResult.appendChild(WebInspector.linkifyStringAsFragment(parameters[i]));
+            else if (parameters.length === 1)
+                formattedResult.appendChild(WebInspector.console._format(parameters[0]));
             else
                 formattedResult.appendChild(formatForConsole(parameters[i]));

trunk/WebCore/inspector/front-end/PropertiesSection.js

@@ -70 +70 @@
             return;
         this._title = x;
-        this.titleElement.textContent = x;
+
+        if (x instanceof Node) {
+            this.titleElement.removeChildren();
+            this.titleElement.appendChild(x);
+        } else
+          this.titleElement.textContent = x;
     },
 

trunk/WebCore/inspector/front-end/inspector.css

@@ -619 +619 @@
 }
 
+.console-formatted-object .section, .console-formatted-node .section {
+    position: static;
+}
+
 .auto-complete-text {
     color: rgb(128, 128, 128);