2008-12-29 Konstantin Käfer <kkaefer@gmail.com>
authoroliver@apple.com <oliver@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 2 Jan 2009 01:08:20 +0000 (01:08 +0000)
committeroliver@apple.com <oliver@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 2 Jan 2009 01:08:20 +0000 (01:08 +0000)
        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.

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

WebCore/ChangeLog
WebCore/inspector/front-end/Console.js
WebCore/inspector/front-end/PropertiesSection.js
WebCore/inspector/front-end/inspector.css

index ec3e937..71781de 100644 (file)
@@ -1,3 +1,26 @@
+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>
 
         Reviewed by Dan Bernstein.
index aa42fd8..31e466c 100644 (file)
@@ -477,7 +477,7 @@ WebInspector.Console.prototype = {
             WebInspector.hoveredDOMNode = null;
     },
 
-    _format: function(output)
+    _format: function(output, inline)
     {
         var type = Object.type(output, InspectorController.inspectedWindow());
         if (type === "object") {
@@ -509,38 +509,38 @@ WebInspector.Console.prototype = {
 
         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);
         elem.appendChild(document.createTextNode(formatted));
     },
 
-    _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(", "));
         }
         elem.appendChild(document.createTextNode("]"));
     },
 
-    _formatnode: function(node, elem)
+    _formatnode: function(node, elem, inline)
     {
         var anchor = document.createElement("a");
         anchor.className = "inspectible-node";
@@ -548,15 +548,22 @@ WebInspector.Console.prototype = {
         anchor.representedNode = node;
         anchor.addEventListener("mouseover", this._mouseOverNode.bind(this), false);
         anchor.addEventListener("mouseout", this._mouseOutOfNode.bind(this), false);
-        elem.appendChild(anchor);
+
+        if (inline)
+            elem.appendChild(anchor);
+        else
+            elem.appendChild(new WebInspector.ObjectPropertiesSection(node, anchor, null, null, true).element);
     },
 
-    _formatobject: function(obj, elem)
+    _formatobject: function(obj, elem, inline)
     {
-        elem.appendChild(document.createTextNode(Object.describe(obj)));
+        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)
+    _formaterror: function(obj, elem, inline)
     {
         elem.appendChild(document.createTextNode(obj.name + ": " + obj.message + " "));
 
@@ -636,7 +643,7 @@ WebInspector.ConsoleMessage.prototype = {
 
         function formatForConsole(obj)
         {
-            return WebInspector.console._format(obj);
+            return WebInspector.console._format(obj, true);
         }
 
         if (Object.type(parameters[0], InspectorController.inspectedWindow()) === "string") {
@@ -668,6 +675,8 @@ WebInspector.ConsoleMessage.prototype = {
         for (var i = 0; i < parameters.length; ++i) {
             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]));
             if (i < parameters.length - 1)
index 3f1b937..a4b2fba 100644 (file)
@@ -69,7 +69,12 @@ WebInspector.PropertiesSection.prototype = {
         if (this._title === x)
             return;
         this._title = x;
-        this.titleElement.textContent = x;
+
+        if (x instanceof Node) {
+            this.titleElement.removeChildren();
+            this.titleElement.appendChild(x);
+        } else
+          this.titleElement.textContent = x;
     },
 
     get subtitle()
index 3683da3..7e3c224 100644 (file)
@@ -618,6 +618,10 @@ body.console-visible #console {
     margin-top: -1px;
 }
 
+.console-formatted-object .section, .console-formatted-node .section {
+    position: static;
+}
+
 .auto-complete-text {
     color: rgb(128, 128, 128);
     -webkit-user-select: none;