DevTools: show property type names in Elements panel and Console

webkit/glue/devtools/js/devtools.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 Tools is a main class that wires all components of the
  * DevTools frontend together. It is also responsible for overriding existing
  * WebInspector functionality while it is getting upstreamed into WebCore.
  */
 goog.provide('devtools.Tools');
@@ skipping 544 matching lines @@
 
   delete this._frameNeedsSetup;
 
   this.sourceFrame.addEventListener(
       "syntax highlighting complete", this._syntaxHighlightingComplete, this);
   this.sourceFrame.syntaxHighlightJavascript();
 };
 
 
 /**
- * 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,
     nodeId, path, json) {
   var props = JSON.parse(json);
   var properties = [];
   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) {
     var propertyName = properties[i];
     treeOutline.appendChild(new constructor(obj, propertyName));
   }
 };
 
 
 /**
+ * @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.
  */
 WebInspector.ScopeChainSidebarPane.prototype.update = function(callFrame) {
   this.bodyElement.removeChildren();
 
   this.sections = [];
   this.callFrame = callFrame;
 
@@ skipping 355 matching lines @@
       document.title = 'Developer Tools - ' + resource.url;
     }
   };
 })();
 
 
 // There is no clear way of rendering class name for scope variables yet.
 (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;
     }
     return result;
   };
 
   // This is needed to evaluate 'instanceof' against win.Node, etc.
   // Need a real window, not just InspectorController.inspectedWindow wrapper.
   var oldType = Object.type;
@@ skipping 44 matching lines @@
       }
     };
   } else {
     var wrapper = {};
     wrapper.id_ = object.___devtools_id;
     wrapper.protoDepth_ = -1;
     section = new WebInspector.SidebarObjectPropertiesSection(wrapper, null);
   }
   elem.appendChild(section.element);
 };