<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[213991] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/213991">213991</a></dd>
<dt>Author</dt> <dd>joepeck@webkit.org</dd>
<dt>Date</dt> <dd>2017-03-15 11:15:21 -0700 (Wed, 15 Mar 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: REGRESSION: Elements Tab > Node Details Sidebar > Properties Section is spammed with TypeErrors
https://bugs.webkit.org/show_bug.cgi?id=153911
<rdar://problem/24520098>
Reviewed by Devin Rousso.
* UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
(WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.nodeResolved.inspectedPage_node_collectPrototypes):
(WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.nodeResolved):
Update due to naming conventions for code that evalutes in the inspected page.
(WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.fillSection):
(WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties):
Create a more complete ObjectTreeView for the different sections.
* UserInterface/Views/ObjectTreePropertyTreeElement.js:
(WebInspector.ObjectTreePropertyTreeElement.prototype._updateChildren):
PureAPI behaves the same as ClassAPI and just shows own properties.
* UserInterface/Views/ObjectTreeView.js:
(WebInspector.ObjectTreeView.prototype.showOnlyProperties):
In only properties mode don't show the Prototype expander at the end.
(WebInspector.ObjectTreeView.prototype.setPrototypeNameOverride):
Allow a prototype name override at the top level. This will allow clients
to specify that the object at the top level is a Prototype object, so that
ObjectTreePropertyTreeElements can infer the right NativeFunctionParameter
information knowing that those properties are on a particular prototype.
(WebInspector.ObjectTreeView.prototype.update):
For the PureAPI use getOwnProperties instead of getDisplayableProperties.
This avoids the special handling we have for DOM native properties which
we bubble up to the top as value descriptors even though they are actually
accessor descriptors on prototypes.
(WebInspector.ObjectTreeView.prototype._updateProperties):
Pass the prototype name override onward for object properties.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMNodeDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreePropertyTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (213990 => 213991)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2017-03-15 18:03:31 UTC (rev 213990)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-03-15 18:15:21 UTC (rev 213991)
</span><span class="lines">@@ -1,3 +1,43 @@
</span><ins>+2017-03-15 Joseph Pecoraro <pecoraro@apple.com>
+
+ Web Inspector: REGRESSION: Elements Tab > Node Details Sidebar > Properties Section is spammed with TypeErrors
+ https://bugs.webkit.org/show_bug.cgi?id=153911
+ <rdar://problem/24520098>
+
+ Reviewed by Devin Rousso.
+
+ * UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
+ (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.nodeResolved.inspectedPage_node_collectPrototypes):
+ (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.nodeResolved):
+ Update due to naming conventions for code that evalutes in the inspected page.
+
+ (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.fillSection):
+ (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties):
+ Create a more complete ObjectTreeView for the different sections.
+
+ * UserInterface/Views/ObjectTreePropertyTreeElement.js:
+ (WebInspector.ObjectTreePropertyTreeElement.prototype._updateChildren):
+ PureAPI behaves the same as ClassAPI and just shows own properties.
+
+ * UserInterface/Views/ObjectTreeView.js:
+ (WebInspector.ObjectTreeView.prototype.showOnlyProperties):
+ In only properties mode don't show the Prototype expander at the end.
+
+ (WebInspector.ObjectTreeView.prototype.setPrototypeNameOverride):
+ Allow a prototype name override at the top level. This will allow clients
+ to specify that the object at the top level is a Prototype object, so that
+ ObjectTreePropertyTreeElements can infer the right NativeFunctionParameter
+ information knowing that those properties are on a particular prototype.
+
+ (WebInspector.ObjectTreeView.prototype.update):
+ For the PureAPI use getOwnProperties instead of getDisplayableProperties.
+ This avoids the special handling we have for DOM native properties which
+ we bubble up to the top as value descriptors even though they are actually
+ accessor descriptors on prototypes.
+
+ (WebInspector.ObjectTreeView.prototype._updateProperties):
+ Pass the prototype name override onward for object properties.
+
</ins><span class="cx"> 2017-03-14 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Exception when fetching computed styles can break future updates of section
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMNodeDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js (213990 => 213991)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js 2017-03-15 18:03:31 UTC (rev 213990)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js 2017-03-15 18:15:21 UTC (rev 213991)
</span><span class="lines">@@ -38,6 +38,8 @@
</span><span class="cx">
</span><span class="cx"> this.element.classList.add("dom-node");
</span><span class="cx">
</span><ins>+ this._nodeRemoteObject = null;
+
</ins><span class="cx"> this._identityNodeTypeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Type"));
</span><span class="cx"> this._identityNodeNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Name"));
</span><span class="cx"> this._identityNodeValueRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Value"));
</span><span class="lines">@@ -156,10 +158,12 @@
</span><span class="cx">
</span><span class="cx"> _refreshProperties()
</span><span class="cx"> {
</span><del>- var domNode = this.domNode;
- if (!domNode)
- return;
</del><ins>+ if (this._nodeRemoteObject) {
+ this._nodeRemoteObject.release();
+ this._nodeRemoteObject = null;
+ }
</ins><span class="cx">
</span><ins>+ let domNode = this.domNode;
</ins><span class="cx"> RuntimeAgent.releaseObjectGroup(WebInspector.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName);
</span><span class="cx"> WebInspector.RemoteObject.resolveNode(domNode, WebInspector.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName, nodeResolved.bind(this));
</span><span class="cx">
</span><span class="lines">@@ -172,7 +176,9 @@
</span><span class="cx"> if (this.domNode !== domNode)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- function collectPrototypes()
</del><ins>+ this._nodeRemoteObject = object;
+
+ function inspectedPage_node_collectPrototypes()
</ins><span class="cx"> {
</span><span class="cx"> // This builds an object with numeric properties. This is easier than dealing with arrays
</span><span class="cx"> // with the way RemoteObject works. Start at 1 since we use parseInt later and parseInt
</span><span class="lines">@@ -189,8 +195,9 @@
</span><span class="cx"> return result;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- object.callFunction(collectPrototypes, undefined, false, nodePrototypesReady.bind(this));
- object.release();
</del><ins>+ const args = undefined;
+ const generatePreview = false;
+ object.callFunction(inspectedPage_node_collectPrototypes, args, generatePreview, nodePrototypesReady.bind(this));
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function nodePrototypesReady(error, object, wasThrown)
</span><span class="lines">@@ -214,31 +221,37 @@
</span><span class="cx"> if (this.domNode !== domNode)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- var element = this._propertiesRow.element;
</del><ins>+ let element = this._propertiesRow.element;
</ins><span class="cx"> element.removeChildren();
</span><span class="cx">
</span><del>- // Get array of prototype user-friendly names.
- for (var i = 0; i < prototypes.length; ++i) {
</del><ins>+ let propertyPath = new WebInspector.PropertyPath(this._nodeRemoteObject, "node");
+
+ let initialSection = true;
+ for (let i = 0; i < prototypes.length; ++i) {
</ins><span class="cx"> // The only values we care about are numeric, as assigned in collectPrototypes.
</span><span class="cx"> if (!parseInt(prototypes[i].name, 10))
</span><span class="cx"> continue;
</span><span class="cx">
</span><del>- var prototype = prototypes[i].value;
- var title = prototype.description;
- if (title.match(/Prototype$/))
- title = title.replace(/Prototype$/, WebInspector.UIString(" (Prototype)"));
- else if (title === "Object")
</del><ins>+ let prototype = prototypes[i].value;
+ let prototypeName = prototype.description;
+ let title = prototypeName;
+ if (/Prototype$/.test(title)) {
+ prototypeName = prototypeName.replace(/Prototype$/, "");
+ title = prototypeName + WebInspector.UIString(" (Prototype)");
+ } else if (title === "Object")
</ins><span class="cx"> title = title + WebInspector.UIString(" (Prototype)");
</span><span class="cx">
</span><del>- // FIXME: <https://webkit.org/b/142833> Web Inspector: Node Details Sidebar Properties Section has "undefined" for all prototype properties
-
- var objectTree = new WebInspector.ObjectTreeView(prototype, WebInspector.ObjectTreeView.Mode.Properties);
</del><ins>+ let mode = initialSection ? WebInspector.ObjectTreeView.Mode.Properties : WebInspector.ObjectTreeView.Mode.PureAPI;
+ let objectTree = new WebInspector.ObjectTreeView(prototype, mode, propertyPath);
</ins><span class="cx"> objectTree.showOnlyProperties();
</span><ins>+ objectTree.setPrototypeNameOverride(prototypeName);
</ins><span class="cx">
</span><del>- var detailsSection = new WebInspector.DetailsSection(prototype.description.hash + "-prototype-properties", title, null, null, true);
</del><ins>+ let detailsSection = new WebInspector.DetailsSection(prototype.description.hash + "-prototype-properties", title, null, null, true);
</ins><span class="cx"> detailsSection.groups[0].rows = [new WebInspector.ObjectPropertiesDetailSectionRow(objectTree, detailsSection)];
</span><span class="cx">
</span><span class="cx"> element.appendChild(detailsSection.element);
</span><ins>+
+ initialSection = false;
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreePropertyTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js (213990 => 213991)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js 2017-03-15 18:03:31 UTC (rev 213990)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js 2017-03-15 18:15:21 UTC (rev 213991)
</span><span class="lines">@@ -306,7 +306,7 @@
</span><span class="cx"> var resolvedValue = this.resolvedValue();
</span><span class="cx"> if (resolvedValue.isCollectionType() && this._mode === WebInspector.ObjectTreeView.Mode.Properties)
</span><span class="cx"> resolvedValue.getCollectionEntries(0, 100, this._updateChildrenInternal.bind(this, this._updateEntries, this._mode));
</span><del>- else if (this._mode === WebInspector.ObjectTreeView.Mode.ClassAPI)
</del><ins>+ else if (this._mode === WebInspector.ObjectTreeView.Mode.ClassAPI || this._mode === WebInspector.ObjectTreeView.Mode.PureAPI)
</ins><span class="cx"> resolvedValue.getOwnPropertyDescriptors(this._updateChildrenInternal.bind(this, this._updateProperties, WebInspector.ObjectTreeView.Mode.ClassAPI));
</span><span class="cx"> else if (this.property.name === "__proto__")
</span><span class="cx"> resolvedValue.getOwnPropertyDescriptors(this._updateChildrenInternal.bind(this, this._updateProperties, WebInspector.ObjectTreeView.Mode.PrototypeAPI));
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js (213990 => 213991)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js 2017-03-15 18:03:31 UTC (rev 213990)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js 2017-03-15 18:15:21 UTC (rev 213991)
</span><span class="lines">@@ -39,6 +39,7 @@
</span><span class="cx"> this._propertyPath = propertyPath || new WebInspector.PropertyPath(this._object, "this");
</span><span class="cx"> this._expanded = false;
</span><span class="cx"> this._hasLosslessPreview = false;
</span><ins>+ this._includeProtoProperty = true;
</ins><span class="cx">
</span><span class="cx"> // If ObjectTree is used outside of the console, we do not know when to release
</span><span class="cx"> // WeakMap entries. Currently collapse would work. For the console, we can just
</span><span class="lines">@@ -216,6 +217,8 @@
</span><span class="cx"> this._inConsole = false;
</span><span class="cx">
</span><span class="cx"> this._element.classList.add("properties-only");
</span><ins>+
+ this._includeProtoProperty = false;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> appendTitleSuffix(suffixElement)
</span><span class="lines">@@ -234,6 +237,11 @@
</span><span class="cx"> this._extraProperties.push(propertyDescriptor);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ setPrototypeNameOverride(override)
+ {
+ this._prototypeNameOverride = override;
+ }
+
</ins><span class="cx"> // Protected
</span><span class="cx">
</span><span class="cx"> update()
</span><span class="lines">@@ -242,6 +250,8 @@
</span><span class="cx"> this._object.getCollectionEntries(0, 100, this._updateChildren.bind(this, this._updateEntries));
</span><span class="cx"> else if (this._object.isClass())
</span><span class="cx"> this._object.classPrototype.getDisplayablePropertyDescriptors(this._updateChildren.bind(this, this._updateProperties));
</span><ins>+ else if (this._mode === WebInspector.ObjectTreeView.Mode.PureAPI)
+ this._object.getOwnPropertyDescriptors(this._updateChildren.bind(this, this._updateProperties));
</ins><span class="cx"> else
</span><span class="cx"> this._object.getDisplayablePropertyDescriptors(this._updateChildren.bind(this, this._updateProperties));
</span><span class="cx"> }
</span><span class="lines">@@ -297,21 +307,23 @@
</span><span class="cx">
</span><span class="cx"> var hadProto = false;
</span><span class="cx"> for (var propertyDescriptor of properties) {
</span><del>- // COMPATIBILITY (iOS 8): Sometimes __proto__ is not a value, but a get/set property.
- // In those cases it is actually not useful to show.
- if (propertyDescriptor.name === "__proto__" && !propertyDescriptor.hasValue())
- continue;
</del><ins>+ if (propertyDescriptor.name === "__proto__") {
+ // COMPATIBILITY (iOS 8): Sometimes __proto__ is not a value, but a get/set property.
+ // In those cases it is actually not useful to show.
+ if (!propertyDescriptor.hasValue())
+ continue;
+ if (!this._includeProtoProperty)
+ continue;
+ hadProto = true;
+ }
</ins><span class="cx">
</span><span class="cx"> if (isArray && isPropertyMode) {
</span><span class="cx"> if (propertyDescriptor.isIndexProperty())
</span><span class="cx"> this._outline.appendChild(new WebInspector.ObjectTreeArrayIndexTreeElement(propertyDescriptor, propertyPath));
</span><span class="cx"> else if (propertyDescriptor.name === "__proto__")
</span><del>- this._outline.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, this._mode));
</del><ins>+ this._outline.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, this._mode, this._prototypeNameOverride));
</ins><span class="cx"> } else
</span><del>- this._outline.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, this._mode));
-
- if (propertyDescriptor.name === "__proto__")
- hadProto = true;
</del><ins>+ this._outline.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, this._mode, this._prototypeNameOverride));
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (!this._outline.children.length || (hadProto && this._outline.children.length === 1)) {
</span><span class="lines">@@ -376,6 +388,7 @@
</span><span class="cx"> Properties: Symbol("object-tree-properties"), // Properties
</span><span class="cx"> PrototypeAPI: Symbol("object-tree-prototype-api"), // API view on a live object instance, so getters can be invoked.
</span><span class="cx"> ClassAPI: Symbol("object-tree-class-api"), // API view without an object instance, can not invoke getters.
</span><ins>+ PureAPI: Symbol("object-tree-pure-api"), // API view without special displayable property handling, just own properties. Getters can be invoked if the property path has a non-prototype object.
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.ObjectTreeView.Event = {
</span></span></pre>
</div>
</div>
</body>
</html>