DevTools: show property type names in Elements panel and Console.

BUG=15988
Review URL: http://codereview.chromium.org/149341

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@20253 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 49 insertions, 28 deletions

diff --git a/webkit/glue/devtools/js/devtools.js b/webkit/glue/devtools/js/devtools.js
index 5fd1be2..bbd6314 100644
--- a/webkit/glue/devtools/js/devtools.js
+++ b/webkit/glue/devtools/js/devtools.js
@@ -562,20 +562,6 @@ WebInspector.ScriptView.prototype.didResolveScriptSource_ = function() {
 
 
 /**
- * Dummy object used during properties inspection.
- * @see WebInspector.didGetNodePropertiesAsync_
- */
-WebInspector.dummyObject_ = { 'foo' : 'bar' };
-
-
-/**
- * Dummy function used during properties inspection.
- * @see WebInspector.didGetNodePropertiesAsync_
- */
-WebInspector.dummyFunction_ = function() {};
-
-
-/**
  * Callback function used with the getNodeProperties.
  */
 WebInspector.didGetNodePropertiesAsync_ = function(treeOutline, constructor,
@@ -585,23 +571,20 @@ WebInspector.didGetNodePropertiesAsync_ = function(treeOutline, constructor,
   var obj = {};
   obj.devtools$$nodeId_ = nodeId;
   obj.devtools$$path_ = path;
-  for (var i = 0; i < props.length; i += 3) {
+  for (var i = 0; i < props.length; i += 4) {
     var type = props[i];
     var name = props[i + 1];
     var value = props[i + 2];
+    var className = props[i + 3];
     properties.push(name);
-    if (type == 'object') {
+    if (type == 'object' || type == 'function') {
       // fake object is going to be replaced on expand.
-      obj[name] = WebInspector.dummyObject_;
-    } else if (type == 'function') {
-      // fake function is going to be replaced on expand.
-      obj[name] = WebInspector.dummyFunction_;
+      obj[name] = new WebInspector.UnresolvedPropertyValue(type, className);
     } else {
       obj[name] = value;
     }
   }
   properties.sort();
-
   treeOutline.removeChildren();
 
   for (var i = 0; i < properties.length; ++i) {
@@ -612,6 +595,17 @@ WebInspector.didGetNodePropertiesAsync_ = function(treeOutline, constructor,
 
 
 /**
+ * @param {string} type Type of the the property value('object' or 'function').
+ * @param {string} className Class name of the property value.
+ * @constructor
+ */
+WebInspector.UnresolvedPropertyValue = function(type, className) {
+  this.type = type;
+  this.className = className;
+};
+
+
+/**
  * Replace WebKit method with our own implementation to use our call stack
  * representation. Original method uses Object.prototype.toString.call to
  * learn if scope object is a JSActivation which doesn't work in Chrome.
@@ -987,6 +981,10 @@ WebInspector.UIString = function(string) {
 (function OverrideObjectDescribe() {
   var oldDescribe = Object.describe;
   Object.describe = function(obj, abbreviated) {
+    if (obj instanceof WebInspector.UnresolvedPropertyValue) {
+      return obj.className;
+    }
+
     var result = oldDescribe.call(Object, obj, abbreviated);
     if (result == 'Object' && obj.className) {
       return obj.className;
diff --git a/webkit/glue/devtools/js/inject.js b/webkit/glue/devtools/js/inject.js
index f72e424..a9b9341 100644
--- a/webkit/glue/devtools/js/inject.js
+++ b/webkit/glue/devtools/js/inject.js
@@ -63,7 +63,8 @@ devtools.Injected.prototype.getObjectForId_ = function(id) {
  * @param {Array.<string>} path Path to the nested object.
  * @param {number} protoDepth Depth of the actual proto to inspect.
  * @return {Array.<Object>} Array where each property is represented
- *     by the tree entries [{string} type, {string} name, {Object} value].
+ *     by the four entries [{string} type, {string} name, {Object} value,
+ *     {string} objectClassNameOrFunctionSignature].
  */
 devtools.Injected.prototype.getProperties =
     function(nodeId, path, protoDepth) {
@@ -97,15 +98,29 @@ devtools.Injected.prototype.getProperties =
        !obj.hasOwnProperty(name)) {
       continue;
     }
-    var type = typeof obj[name];
+    var value = obj[name];
+    var type = typeof value;
     result.push(type);
     result.push(name);
     if (type == 'string') {
-      var str = obj[name];
+      var str = value;
       result.push(str.length > 99 ? str.substr(0, 99) + '...' : str);
-    } else if (type != 'object' && type != 'function') {
-      result.push(obj[name]);
+      result.push(undefined);
+    } else if (type == 'function') {
+      result.push(undefined);
+      var str = Function.prototype.toString.call(value);
+      // Cut function signature (everything before first ')').
+      var signatureLength = str.search(/\)/);
+      str = str.substr(0, signatureLength + 1);
+      // Collapse each group of consecutive whitespaces into one whitespaces
+      // and add body brackets.
+      str = str.replace(/\s+/g, ' ') + ' {}';
+      result.push(str);
+    } else if (type == 'object') {
+      result.push(undefined);
+      result.push(this.getClassName_(value));
     } else {
+      result.push(value);
       result.push(undefined);
     }
   }
@@ -126,14 +141,22 @@ devtools.Injected.prototype.getPrototypes = function(nodeId) {
 
   var result = [];
   for (var prototype = node; prototype; prototype = prototype.__proto__) {
-    var description = Object.prototype.toString.call(prototype);
-    result.push(description.replace(/^\[object (.*)\]$/i, '$1'));
+    result.push(this.getClassName_(prototype));
   }
   return result;
 };
 
 
 /**
+ * @param {Object|Function|null} value An object whose class name to return.
+ * @return {string} The value class name.
+ */
+devtools.Injected.prototype.getClassName_ = function(value) {
+  return (value == null) ? 'null' : value.constructor.name;
+};
+
+
+/**
  * Returns style information that is used in devtools.js.
  * @param {number} nodeId Id of node to get prorotypes for.
  * @param {boolean} authorOnly Determines whether only author styles need to