Changeset 124876 in webkit

Timestamp:

Aug 7, 2012 4:28:24 AM (12 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: display function scope in UI
​https://bugs.webkit.org/show_bug.cgi?id=90631

Patch by Peter Rybin <​peter.rybin@gmail.com> on 2012-08-07
Reviewed by Yury Semikhatsky.

Two new tree element types added: function scope group node and scope node.
Scope node is only used to represent closure and catch scopes. Scopes that
have a real object beneath are represented as a property node.
A method that reads properties from RemoteObject and populate tree element
is factored out from RemoteObjectTreeElement for reuse.

• inspector/front-end/ObjectPropertiesSection.js:

(WebInspector.ObjectPropertyTreeElement.prototype.onpopulate):
(WebInspector.ObjectPropertyTreeElement.Populate.callback):
(WebInspector.ObjectPropertyTreeElement.Populate):
(WebInspector.FunctionScopeMainTreeElement):
(WebInspector.FunctionScopeMainTreeElement.prototype.onpopulate.didGetDetails):
(WebInspector.FunctionScopeMainTreeElement.prototype.onpopulate):
(WebInspector.FunctionScopeMainTreeElement.prototype.onattach):
(WebInspector.FunctionScopeMainTreeElement.prototype.update):
(WebInspector.ScopeTreeElement):
(WebInspector.ScopeTreeElement.prototype.onpopulate):
(WebInspector.ScopeTreeElement.prototype.onattach):
(WebInspector.ScopeTreeElement.prototype.update):

• inspector/front-end/RemoteObject.js:

(WebInspector.RemoteObjectProperty.fromScopeValue):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/ObjectPropertiesSection.js (modified) (4 diffs)
• inspector/front-end/RemoteObject.js (modified) (2 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-08-07  Peter Rybin  <peter.rybin@gmail.com>
+
+        Web Inspector: display function scope in UI
+        https://bugs.webkit.org/show_bug.cgi?id=90631
+
+        Reviewed by Yury Semikhatsky.
+
+        Two new tree element types added: function scope group node and scope node.
+        Scope node is only used to represent closure and catch scopes. Scopes that
+        have a real object beneath are represented as a property node.
+        A method that reads properties from RemoteObject and populate tree element
+        is factored out from RemoteObjectTreeElement for reuse.
+
+        * inspector/front-end/ObjectPropertiesSection.js:
+        (WebInspector.ObjectPropertyTreeElement.prototype.onpopulate):
+        (WebInspector.ObjectPropertyTreeElement.Populate.callback):
+        (WebInspector.ObjectPropertyTreeElement.Populate):
+        (WebInspector.FunctionScopeMainTreeElement):
+        (WebInspector.FunctionScopeMainTreeElement.prototype.onpopulate.didGetDetails):
+        (WebInspector.FunctionScopeMainTreeElement.prototype.onpopulate):
+        (WebInspector.FunctionScopeMainTreeElement.prototype.onattach):
+        (WebInspector.FunctionScopeMainTreeElement.prototype.update):
+        (WebInspector.ScopeTreeElement):
+        (WebInspector.ScopeTreeElement.prototype.onpopulate):
+        (WebInspector.ScopeTreeElement.prototype.onattach):
+        (WebInspector.ScopeTreeElement.prototype.update):
+        * inspector/front-end/RemoteObject.js:
+        (WebInspector.RemoteObjectProperty.fromScopeValue):
+
+
 2012-08-07  Vineet Chaudhary  <rgf748@motorola.com>
 

trunk/Source/WebCore/inspector/front-end/ObjectPropertiesSection.js

@@ -227 +227 @@
     onpopulate: function()
     {
-        if (this.children.length && !this.shouldRefreshChildren)
-            return;
-
-        if (this.property.value.arrayLength() > WebInspector.ObjectPropertiesSection._arrayLoadThreshold) {
-            this.removeChildren();
-            WebInspector.ArrayGroupingTreeElement._populateArray(this, this.property.value, 0, this.property.value.arrayLength() - 1);
-            return;
-        }
-
-        function callback(properties)
-        {
-            this.removeChildren();
-            if (!properties)
-                return;
-
-            properties.sort(WebInspector.ObjectPropertiesSection.CompareProperties);
-            for (var i = 0; i < properties.length; ++i) {
-                if (this.treeOutline.section.skipProto && properties[i].name === "__proto__")
-                    continue;
-                properties[i].parentObject = this.property.value;
-                this.appendChild(new this.treeOutline.section.treeElementConstructor(properties[i]));
-            }
-        }
-
-        this.property.value.getOwnProperties(callback.bind(this));
+        return WebInspector.ObjectPropertyTreeElement.populate(this, this.property.value);
     },
 
@@ -306 +282 @@
 
         this.valueElement.title = description || "";
-        
+
         this.listItemElement.removeChildren();
 
@@ -469 +445 @@
 }
 
+/**
+ * @param {TreeElement} treeElement
+ * @param {WebInspector.RemoteObject} value
+ */
+WebInspector.ObjectPropertyTreeElement.populate = function(treeElement, value) {
+    if (treeElement.children.length && !treeElement.shouldRefreshChildren)
+        return;
+
+    if (value.arrayLength() > WebInspector.ObjectPropertiesSection._arrayLoadThreshold) {
+        treeElement.removeChildren();
+        WebInspector.ArrayGroupingTreeElement._populateArray(treeElement, value, 0, value.arrayLength() - 1);
+        return;
+    }
+
+    function callback(properties)
+    {
+        treeElement.removeChildren();
+        if (!properties)
+            return;
+
+        properties.sort(WebInspector.ObjectPropertiesSection.CompareProperties);
+        for (var i = 0; i < properties.length; ++i) {
+            if (treeElement.treeOutline.section.skipProto && properties[i].name === "__proto__")
+                continue;
+            properties[i].parentObject = value;
+            treeElement.appendChild(new treeElement.treeOutline.section.treeElementConstructor(properties[i]));
+        }
+        if (value.type === "function")
+            treeElement.appendChild(new WebInspector.FunctionScopeMainTreeElement(value));
+    }
+
+    value.getOwnProperties(callback);
+}
+
 WebInspector.ObjectPropertyTreeElement.prototype.__proto__ = TreeElement.prototype;
+
+/**
+ * @constructor
+ * @extends {TreeElement}
+ * @param {WebInspector.RemoteObject} remoteObject
+ */
+WebInspector.FunctionScopeMainTreeElement = function(remoteObject)
+{
+    TreeElement.call(this, "<function scope>", null, false);
+    this.toggleOnClick = true;
+    this.selectable = false;
+    this._remoteObject = remoteObject;
+    this.hasChildren = true;
+}
+
+WebInspector.FunctionScopeMainTreeElement.prototype = {
+    onpopulate: function()
+    {
+        if (this.children.length && !this.shouldRefreshChildren)
+            return;
+
+        function didGetDetails(error, response)
+        {
+            if (error) {
+                console.error(error);
+                return;
+            }
+            this.removeChildren();
+
+            var scopeChain = response.scopeChain;
+            for (var i = 0; i < scopeChain.length; ++i) {
+                var scope = scopeChain[i];
+                var title = null;
+                var isTrueObject;
+
+                switch (scope.type) {
+                    case "local":
+                        // Not really expecting this scope type here.
+                        title = WebInspector.UIString("Local");
+                        isTrueObject = false;
+                        break;
+                    case "closure":
+                        title = WebInspector.UIString("Closure");
+                        isTrueObject = false;
+                        break;
+                    case "catch":
+                        title = WebInspector.UIString("Catch");
+                        isTrueObject = false;
+                        break;
+                    case "with":
+                        title = WebInspector.UIString("With Block");
+                        isTrueObject = true;
+                        break;
+                    case "global":
+                        title = WebInspector.UIString("Global");
+                        isTrueObject = true;
+                        break;
+                }
+
+                var remoteObject = WebInspector.RemoteObject.fromPayload(scope.object);
+                if (isTrueObject) {
+                    var property = WebInspector.RemoteObjectProperty.fromScopeValue(title, remoteObject);
+                    property.parentObject = null;
+                    this.appendChild(new this.treeOutline.section.treeElementConstructor(property));
+                } else {
+                    var scopeTreeElement = new WebInspector.ScopeTreeElement(title, null, remoteObject);
+                    this.appendChild(scopeTreeElement);
+                }
+            }
+
+        }
+        DebuggerAgent.getFunctionDetails(this._remoteObject.objectId, didGetDetails.bind(this));
+
+    }
+};
+
+WebInspector.FunctionScopeMainTreeElement.prototype.__proto__ = TreeElement.prototype;
+
+/**
+ * @constructor
+ * @extends {TreeElement}
+ * @param {WebInspector.RemoteObject} remoteObject
+ */
+WebInspector.ScopeTreeElement = function(title, subtitle, remoteObject)
+{
+    // TODO: use subtitle parameter.
+    TreeElement.call(this, title, null, false);
+    this.toggleOnClick = true;
+    this.selectable = false;
+    this._remoteObject = remoteObject;
+    this.hasChildren = true;
+}
+
+WebInspector.ScopeTreeElement.prototype = {
+    onpopulate: function()
+    {
+        return WebInspector.ObjectPropertyTreeElement.populate(this, this._remoteObject);
+    }
+};
+
+WebInspector.ScopeTreeElement.prototype.__proto__ = TreeElement.prototype;
 
 /**
@@ -680 +791 @@
         if (this._populated)
             return;
-        
+
         this._populated = true;
 

trunk/Source/WebCore/inspector/front-end/RemoteObject.js

@@ -337 +337 @@
  * @constructor
  * @param {string} name
- * @param {WebInspector.RemoteObject} value 
+ * @param {WebInspector.RemoteObject} value
  * @param {Object=} descriptor
  */
@@ -358 +358 @@
 {
     return new WebInspector.RemoteObjectProperty(name, WebInspector.RemoteObject.fromPrimitiveValue(value));
+}
+
+/**
+ * @param {string} name
+ * @param {WebInspector.RemoteObject} value
+ * @return {WebInspector.RemoteObjectProperty}
+ */
+WebInspector.RemoteObjectProperty.fromScopeValue = function(name, value)
+{
+    var result = new WebInspector.RemoteObjectProperty(name, value);
+    result.writable = false;
+    return result;
 }