Changeset 181704 in webkit

Timestamp:

Mar 18, 2015, 11:30:47 AM (11 years ago)

Author:

Joseph Pecoraro

Message:

Web Inspector: Scopes sidebar should use new ObjectTreeView and not ObjectPropertiesSection
​https://bugs.webkit.org/show_bug.cgi?id=142808

Reviewed by Timothy Hatcher.

• UserInterface/Models/PropertyPath.js:

(WebInspector.PropertyPath):
(WebInspector.PropertyPath.emptyPropertyPathForScope):
Allow a special property empty path for "Scopes". This way for a
"<scopeObject>.property" we can show just the tooltip "property".

• UserInterface/Views/ObjectTreeView.css:

(.object-tree.properties-only > :matches(.title, .object-preview)):
(.object-tree.properties-only .object-tree-outline):
(.object-tree.properties-only .object-tree-property .property-name):
Tweak styles for only properties view, which won't have a top-level
preview and doesn't fade out enumerable properties.

• UserInterface/Views/ObjectTreeView.js:

(WebInspector.ObjectTreeView.prototype.get treeOutline):
Access the TreeOutline.

(WebInspector.ObjectTreeView.prototype.showOnlyProperties):
Properties only view modifies the display slightly.

(WebInspector.ObjectTreeView.prototype.appendExtraPropertyDescriptor):
(WebInspector.ObjectTreeView.prototype._updateProperties):
Allow the client to add its own property descriptors to display
as a property in this ObjectTreeView.

• UserInterface/Views/ScopeChainDetailsSidebarPanel.js:

(WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh):
Switch to using an ObjectTreeView.

(WebInspector.ScopeChainDetailsSidebarPanel.prototype._propertyPathIdentifierForTreeElement):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeAddHandler):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeExpandHandler):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeCollapseHandler):
Keep track of what properties were expanded so we can auto-expand
them again when the sidebar refreshes.

• UserInterface/Main.html:
• UserInterface/Views/ScopeVariableTreeElement.js: Removed.
• WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
• WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:

Remove the now unused ScopeVariableTreeElement.js.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Main.html (modified) (1 diff)
• UserInterface/Models/PropertyPath.js (modified) (5 diffs)
• UserInterface/Views/ObjectTreeView.css (modified) (2 diffs)
• UserInterface/Views/ObjectTreeView.js (modified) (4 diffs)
• UserInterface/Views/ScopeChainDetailsSidebarPanel.js (modified) (7 diffs)
• UserInterface/Views/ScopeVariableTreeElement.js (deleted)
• WebInspectorUI.vcxproj/WebInspectorUI.vcxproj (modified) (1 diff)
• WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2015-03-18  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: Scopes sidebar should use new ObjectTreeView and not ObjectPropertiesSection
+        https://bugs.webkit.org/show_bug.cgi?id=142808
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Models/PropertyPath.js:
+        (WebInspector.PropertyPath):
+        (WebInspector.PropertyPath.emptyPropertyPathForScope):
+        Allow a special property empty path for "Scopes". This way for a
+        "<scopeObject>.property" we can show just the tooltip "property".
+
+        * UserInterface/Views/ObjectTreeView.css:
+        (.object-tree.properties-only > :matches(.title, .object-preview)):
+        (.object-tree.properties-only .object-tree-outline):
+        (.object-tree.properties-only .object-tree-property .property-name):
+        Tweak styles for only properties view, which won't have a top-level
+        preview and doesn't fade out enumerable properties.
+
+        * UserInterface/Views/ObjectTreeView.js:
+        (WebInspector.ObjectTreeView.prototype.get treeOutline):
+        Access the TreeOutline.
+
+        (WebInspector.ObjectTreeView.prototype.showOnlyProperties):
+        Properties only view modifies the display slightly.
+
+        (WebInspector.ObjectTreeView.prototype.appendExtraPropertyDescriptor):
+        (WebInspector.ObjectTreeView.prototype._updateProperties):
+        Allow the client to add its own property descriptors to display
+        as a property in this ObjectTreeView.
+
+        * UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh):
+        Switch to using an ObjectTreeView.
+
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype._propertyPathIdentifierForTreeElement):
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeAddHandler):
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeExpandHandler):
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeCollapseHandler):
+        Keep track of what properties were expanded so we can auto-expand
+        them again when the sidebar refreshes.
+
+        * UserInterface/Main.html:
+        * UserInterface/Views/ScopeVariableTreeElement.js: Removed.
+        * WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
+        * WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:
+        Remove the now unused ScopeVariableTreeElement.js.
+
 2015-03-17  Joseph Pecoraro  <pecoraro@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Main.html

@@ -456 +456 @@
     <script src="Views/ScopeBarItem.js"></script>
     <script src="Views/ScopeChainDetailsSidebarPanel.js"></script>
-    <script src="Views/ScopeVariableTreeElement.js"></script>
     <script src="Views/ScriptContentView.js"></script>
     <script src="Views/ScriptTimelineDataGrid.js"></script>

trunk/Source/WebInspectorUI/UserInterface/Models/PropertyPath.js

@@ -39 +39 @@
 
     this._object = object;
-    this._pathComponent = pathComponent || null;
+    this._pathComponent = typeof pathComponent === "string" ? pathComponent : null;
     this._parent = parent || null;
     this._isPrototype = isPrototype || false;
@@ -50 +50 @@
     MapValue: "@mapvalue",
     SetIndex: "@setindex",
+    EmptyPathComponentForScope: "",
 };
 
@@ -57 +58 @@
     Setter: "setter",
 };
+
+WebInspector.PropertyPath.emptyPropertyPathForScope = function(object)
+{
+    return new WebInspector.PropertyPath(object, WebInspector.PropertyPath.SpecialPathComponent.EmptyPathComponentForScope);
+}
 
 WebInspector.PropertyPath.prototype = {
@@ -149 +155 @@
     },
 
+    isScope()
+    {
+        return this._pathComponent === WebInspector.PropertyPath.SpecialPathComponent.EmptyPathComponentForScope;
+    },
+
     isPathComponentImpossible()
     {
@@ -168 +179 @@
     {
         var isPrototype = propertyName === "__proto__";
+
+        if (this.isScope())
+            return new WebInspector.PropertyPath(object, propertyName, this, isPrototype);
+
         var component = this._canPropertyNameBeDotAccess(propertyName) ? "." + propertyName : "[" + doubleQuotedString(propertyName) + "]";
         return new WebInspector.PropertyPath(object, component, this, isPrototype);

trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css

@@ -57 +57 @@
 }
 
+.object-tree.properties-only > :matches(.title, .object-preview) {
+    display: none;
+}
+
 .object-tree.expanded .object-preview {
     font-style: normal;
@@ -80 +84 @@
     min-height: 18px;
     outline: none;
+}
+
+.object-tree.properties-only .object-tree-outline {
+    padding-left: 0;
+}
+
+.object-tree.properties-only .object-tree-property .property-name {
+    opacity: 1;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js

@@ -152 +152 @@
     },
 
+    get treeOutline()
+    {
+        return this._outline;
+    },
+
     get expanded()
     {
@@ -185 +190 @@
 
         this._untrackWeakEntries();
+    },
+
+    showOnlyProperties()
+    {
+        this._inConsole = false;
+
+        this._element.classList.add("properties-only");
     },
 
@@ -193 +205 @@
         else
             this._titleElement.appendChild(suffixElement);
+    },
+
+    appendExtraPropertyDescriptor(propertyDescriptor)
+    {
+        if (!this._extraProperties)
+            this._extraProperties = [];
+
+        this._extraProperties.push(propertyDescriptor);
     },
 
@@ -244 +264 @@
     _updateProperties(properties, propertyPath)
     {
+        if (this._extraProperties)
+            properties = properties.concat(this._extraProperties);
+
         properties.sort(WebInspector.ObjectTreeView.ComparePropertyDescriptors);
 

trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js

@@ -34 +34 @@
 };
 
+WebInspector.ScopeChainDetailsSidebarPanel.autoExpandProperties = new Set;
+
 WebInspector.ScopeChainDetailsSidebarPanel.prototype = {
     constructor: WebInspector.ScopeChainDetailsSidebarPanel,
@@ -40 +42 @@
     // Public
 
-    inspect: function(objects)
+    inspect(objects)
     {
         // Convert to a single item array if needed.
@@ -76 +78 @@
     },
 
-    refresh: function()
+    refresh()
     {
         var callFrame = this.callFrame;
@@ -94 +96 @@
 
             var title = null;
-            var extraProperties = null;
+            var extraPropertyDescriptor = null;
             var collapsedByDefault = false;
             var dontHighlightNonEnumerableProperties = true;
@@ -109 +111 @@
 
                     if (callFrame.thisObject)
-                        extraProperties = [new WebInspector.RemoteObjectProperty("this", callFrame.thisObject)];
+                        extraPropertyDescriptor = new WebInspector.PropertyDescriptor({name: "this", value: callFrame.thisObject});
                     break;
 
@@ -145 +147 @@
             var detailsSectionIdentifier = scope.type + "-" + sectionCountByType[scope.type];
 
-            var section = new WebInspector.ObjectPropertiesSection(scope.object, null, null, null, true, extraProperties, WebInspector.ScopeVariableTreeElement);
-            section.dontHighlightNonEnumerablePropertiesAtTopLevel = dontHighlightNonEnumerableProperties;
-            section.__propertyIdentifierPrefix = detailsSectionIdentifier;
+            var scopePropertyPath = WebInspector.PropertyPath.emptyPropertyPathForScope(scope.object);
+            var objectTree = new WebInspector.ObjectTreeView(scope.object, WebInspector.ObjectTreeView.Mode.Properties, scopePropertyPath);
+
+            objectTree.showOnlyProperties();
+
+            if (extraPropertyDescriptor)
+                objectTree.appendExtraPropertyDescriptor(extraPropertyDescriptor);
+
+            var treeOutline = objectTree.treeOutline;
+            treeOutline.onadd = this._objectTreeAddHandler.bind(this, detailsSectionIdentifier);
+            treeOutline.onexpand = this._objectTreeExpandHandler.bind(this, detailsSectionIdentifier);
+            treeOutline.oncollapse = this._objectTreeCollapseHandler.bind(this, detailsSectionIdentifier);
 
             var detailsSection = new WebInspector.DetailsSection(detailsSectionIdentifier, title, null, null, collapsedByDefault);
-            detailsSection.groups[0].rows = [new WebInspector.DetailsSectionPropertiesRow(section)];
+            detailsSection.groups[0].rows = [new WebInspector.DetailsSectionPropertiesRow(objectTree)];
             detailsSections.push(detailsSection);
         }
@@ -171 +182 @@
         // if the debugger is paused in code that was executed from the console. The console will be waiting for
         // the result of the execution and without a timeout we would never update the scope variables.
-        var timeout = setTimeout(delayedWork.bind(this), 50);
-
-        // Since ObjectPropertiesSection populates asynchronously, we want to wait to replace the existing content
+        var delay = WebInspector.ScopeChainDetailsSidebarPanel.autoExpandProperties.size === 0 ? 50 : 250;
+        var timeout = setTimeout(delayedWork.bind(this), delay);
+
+        // Since ObjectTreeView populates asynchronously, we want to wait to replace the existing content
         // until after all the pending asynchronous requests are completed. This prevents severe flashing while stepping.
         InspectorBackend.runAfterPendingDispatches(delayedWork.bind(this));
+    },
+
+    _propertyPathIdentifierForTreeElement(identifier, objectPropertyTreeElement)
+    {
+        if (!objectPropertyTreeElement.property)
+            return null;
+
+        var propertyPath = objectPropertyTreeElement.thisPropertyPath();
+        if (propertyPath.isFullPathImpossible())
+            return null;
+
+        return identifier + "-" + propertyPath.fullPath;
+    },
+
+    _objectTreeAddHandler(identifier, treeElement)
+    {
+        var propertyPathIdentifier = this._propertyPathIdentifierForTreeElement(identifier, treeElement);
+        if (!propertyPathIdentifier)
+            return;
+
+        if (WebInspector.ScopeChainDetailsSidebarPanel.autoExpandProperties.has(propertyPathIdentifier))
+            treeElement.expand();
+    },
+
+    _objectTreeExpandHandler(identifier, treeElement)
+    {
+        var propertyPathIdentifier = this._propertyPathIdentifierForTreeElement(identifier, treeElement);
+        if (!propertyPathIdentifier)
+            return;
+
+        WebInspector.ScopeChainDetailsSidebarPanel.autoExpandProperties.add(propertyPathIdentifier);
+    },
+
+    _objectTreeCollapseHandler(identifier, treeElement)
+    {
+        var propertyPathIdentifier = this._propertyPathIdentifierForTreeElement(identifier, treeElement);
+        if (!propertyPathIdentifier)
+            return;
+
+        WebInspector.ScopeChainDetailsSidebarPanel.autoExpandProperties.delete(propertyPathIdentifier);
     }
 };

trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj

@@ -761 +761 @@
     <None Include="..\UserInterface\ScopeChainDetailsSidebarPanel.js" />
     <None Include="..\UserInterface\ScopeChainNode.js" />
-    <None Include="..\UserInterface\ScopeVariableTreeElement.js" />
     <None Include="..\UserInterface\Script.js" />
     <None Include="..\UserInterface\ScriptContentView.css" />

trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters

@@ -853 +853 @@
       <Filter>UserInterface</Filter>
     </None>
-    <None Include="..\UserInterface\ScopeVariableTreeElement.js">
-      <Filter>UserInterface</Filter>
-    </None>
     <None Include="..\UserInterface\Script.js">
       <Filter>UserInterface</Filter>