DevTools: show property type names in Elements panel and Console

webkit/glue/devtools/js/inject.js

 // Copyright (c) 2009 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Javascript that is being injected into the inspectable page
  * while debugging.
  */
 goog.provide('devtools.Injected');
 
@@ skipping 45 matching lines @@
   return this.cachedConsoleObjects_[id];
 };
 
 
 /**
  * Returns array of properties for a given node on a given path.
  * @param {number} nodeId Id of node to get prorotypes for.
  * @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) {
   var result = [];
   var obj = this.getObjectForId_(nodeId);
   if (!obj) {
     return [];
   }
 
   // Follow the path.
@@ skipping 13 matching lines @@
   if (!obj) {
     return [];
   }
 
   // Go over properties, prepare results.
   for (var name in obj) {
     if (protoDepth != -1 && 'hasOwnProperty' in obj &&
        !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);
     }
   }
   return result;
 };
 
 
 /**
  * Returns array of prototypes for a given node.
  * @param {number} nodeId Id of node to get prorotypes for.
  * @return {Array<string>} Array of proto names.
  */
 devtools.Injected.prototype.getPrototypes = function(nodeId) {
   var node = DevToolsAgentHost.getNodeForId(nodeId);
   if (!node) {
     return [];
   }
 
   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
  *     be added.
  * @return {string} Style collection descriptor.
  */
 devtools.Injected.prototype.getStyles = function(nodeId, authorOnly) {
   var node = DevToolsAgentHost.getNodeForId(nodeId);
   if (!node) {
     return {};
@@ skipping 396 matching lines @@
  * @return {string} console object id.
  */
 devtools.Injected.prototype.evaluate = function(expression) {
   try {
     // Evaluate the expression in the global context of the inspected window.
     return [ this.wrapConsoleObject(contentWindow.eval(expression)), false ];
   } catch (e) {
     return [ e.toString(), true ];
   }
 };