Web Inspector: Expanding event objects in console shows undefined for most values...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / ObjectPropertiesSection.js
1 /*
2  * Copyright (C) 2013 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 WebInspector.ObjectPropertiesSection = function(object, title, subtitle, emptyPlaceholder, getAllProperties, extraProperties, treeElementConstructor)
27 {
28     this.emptyPlaceholder = (emptyPlaceholder || WebInspector.UIString("No Properties"));
29     this.object = object;
30     this.getAllProperties = getAllProperties;
31     this.extraProperties = extraProperties;
32     this.treeElementConstructor = treeElementConstructor || WebInspector.ObjectPropertyTreeElement;
33     this.editable = true;
34
35     WebInspector.PropertiesSection.call(this, title, subtitle);
36 };
37
38 WebInspector.ObjectPropertiesSection.prototype = {
39     onpopulate: function()
40     {
41         this.update();
42     },
43
44     update: function()
45     {
46         var self = this;
47         function callback(properties)
48         {
49             if (!properties)
50                 return;
51             self.updateProperties(properties);
52         }
53         if (this.getAllProperties)
54             this.object.getAllProperties(callback);
55         else
56             this.object.getOwnAndGetterProperties(callback);
57     },
58
59     updateProperties: function(properties, rootTreeElementConstructor, rootPropertyComparer)
60     {
61         if (!rootTreeElementConstructor)
62             rootTreeElementConstructor = this.treeElementConstructor;
63
64         if (!rootPropertyComparer)
65             rootPropertyComparer = WebInspector.ObjectPropertiesSection.CompareProperties;
66
67         if (this.extraProperties)
68             for (var i = 0; i < this.extraProperties.length; ++i)
69                 properties.push(this.extraProperties[i]);
70
71         properties.sort(rootPropertyComparer);
72
73         this.propertiesTreeOutline.removeChildren();
74
75         for (var i = 0; i < properties.length; ++i) {
76             properties[i].parentObject = this.object;
77             this.propertiesTreeOutline.appendChild(new rootTreeElementConstructor(properties[i]));
78         }
79
80         if (!this.propertiesTreeOutline.children.length) {
81             var title = document.createElement("div");
82             title.className = "info";
83             title.textContent = this.emptyPlaceholder;
84             var infoElement = new TreeElement(title, null, false);
85             this.propertiesTreeOutline.appendChild(infoElement);
86         }
87         this.propertiesForTest = properties;
88
89         this.dispatchEventToListeners(WebInspector.Section.Event.VisibleContentDidChange);
90     }
91 };
92
93 WebInspector.ObjectPropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype;
94
95 WebInspector.ObjectPropertiesSection.CompareProperties = function(propertyA, propertyB)
96 {
97     var a = propertyA.name;
98     var b = propertyB.name;
99     if (a === "__proto__")
100         return 1;
101     if (b === "__proto__")
102         return -1;
103
104     // if used elsewhere make sure to
105     //  - convert a and b to strings (not needed here, properties are all strings)
106     //  - check if a == b (not needed here, no two properties can be the same)
107
108     var diff = 0;
109     var chunk = /^\d+|^\D+/;
110     var chunka, chunkb, anum, bnum;
111     while (diff === 0) {
112         if (!a && b)
113             return -1;
114         if (!b && a)
115             return 1;
116         chunka = a.match(chunk)[0];
117         chunkb = b.match(chunk)[0];
118         anum = !isNaN(chunka);
119         bnum = !isNaN(chunkb);
120         if (anum && !bnum)
121             return -1;
122         if (bnum && !anum)
123             return 1;
124         if (anum && bnum) {
125             diff = chunka - chunkb;
126             if (diff === 0 && chunka.length !== chunkb.length) {
127                 if (!+chunka && !+chunkb) // chunks are strings of all 0s (special case)
128                     return chunka.length - chunkb.length;
129                 else
130                     return chunkb.length - chunka.length;
131             }
132         } else if (chunka !== chunkb)
133             return (chunka < chunkb) ? -1 : 1;
134         a = a.substring(chunka.length);
135         b = b.substring(chunkb.length);
136     }
137     return diff;
138 };
139
140 WebInspector.ObjectPropertyTreeElement = function(property)
141 {
142     this.property = property;
143
144     // Pass an empty title, the title gets made later in onattach.
145     TreeElement.call(this, "", null, false);
146     this.toggleOnClick = true;
147     this.selectable = false;
148 };
149
150 WebInspector.ObjectPropertyTreeElement.prototype = {
151     onpopulate: function()
152     {
153         if (this.children.length && !this.shouldRefreshChildren)
154             return;
155
156         var callback = function(properties) {
157             this.removeChildren();
158             if (!properties)
159                 return;
160
161             properties.sort(WebInspector.ObjectPropertiesSection.CompareProperties);
162             for (var i = 0; i < properties.length; ++i) {
163                 this.appendChild(new this.treeOutline.section.treeElementConstructor(properties[i]));
164             }
165         };
166
167         if (this.property.name === "__proto__")
168             this.property.value.getOwnProperties(callback.bind(this));
169         else
170             this.property.value.getOwnAndGetterProperties(callback.bind(this));
171     },
172
173     ondblclick: function(event)
174     {
175         if (this.property.writable)
176             this.startEditing();
177     },
178
179     onattach: function()
180     {
181         this.update();
182     },
183
184     update: function()
185     {
186         this.nameElement = document.createElement("span");
187         this.nameElement.className = "name";
188         this.nameElement.textContent = this.property.name;
189         if (!this.property.enumerable && (!this.parent.root || !this.treeOutline.section.dontHighlightNonEnumerablePropertiesAtTopLevel))
190             this.nameElement.classList.add("dimmed");
191
192         var separatorElement = document.createElement("span");
193         separatorElement.className = "separator";
194         separatorElement.textContent = ": ";
195
196         this.valueElement = document.createElement("span");
197         this.valueElement.className = "value";
198
199         var description = this.property.value.description;
200         // Render \n as a nice unicode cr symbol.
201         if (this.property.wasThrown)
202             this.valueElement.textContent = "[Exception: " + description + "]";
203         else if (this.property.value.type === "string" && typeof description === "string") {
204             this.valueElement.textContent = "\"" + description.replace(/\n/g, "\u21B5") + "\"";
205             this.valueElement._originalTextContent = "\"" + description + "\"";
206         } else if (this.property.value.type === "function" && typeof description === "string") {
207             this.valueElement.textContent = /.*/.exec(description)[0].replace(/ +$/g, "");
208             this.valueElement._originalTextContent = description;
209         } else
210             this.valueElement.textContent = description;
211
212         if (this.property.value.type === "function")
213             this.valueElement.addEventListener("contextmenu", this._functionContextMenuEventFired.bind(this), false);
214
215         if (this.property.wasThrown)
216             this.valueElement.classList.add("error");
217         if (this.property.value.subtype)
218             this.valueElement.classList.add("console-formatted-" + this.property.value.subtype);
219         else if (this.property.value.type)
220             this.valueElement.classList.add("console-formatted-" + this.property.value.type);
221         if (this.property.value.subtype === "node")
222             this.valueElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
223
224         this.listItemElement.removeChildren();
225
226         this.listItemElement.appendChild(this.nameElement);
227         this.listItemElement.appendChild(separatorElement);
228         this.listItemElement.appendChild(this.valueElement);
229         this.hasChildren = this.property.value.hasChildren && !this.property.wasThrown;
230     },
231
232     _contextMenuEventFired: function(event)
233     {
234         function selectNode(nodeId)
235         {
236             if (nodeId)
237                 WebInspector.domTreeManager.inspectElement(nodeId);
238         }
239
240         function revealElement()
241         {
242             this.property.value.pushNodeToFrontend(selectNode);
243         }
244
245         var contextMenu = new WebInspector.ContextMenu(event);
246         contextMenu.appendItem(WebInspector.UIString("Reveal in DOM Tree"), revealElement.bind(this));
247         contextMenu.show();
248     },
249
250     _functionContextMenuEventFired: function(event)
251     {
252         function didGetLocation(error, response)
253         {
254             if (error) {
255                 console.error(error);
256                 return;
257             }
258             WebInspector.panels.scripts.showFunctionDefinition(response);
259         }
260
261         function revealFunction()
262         {
263             DebuggerAgent.getFunctionLocation(this.property.value.objectId, didGetLocation.bind(this));
264         }
265
266         var contextMenu = new WebInspector.ContextMenu(event);
267         contextMenu.appendItem(WebInspector.UIString("Show function definition"), revealFunction.bind(this));
268         contextMenu.show();
269     },
270
271     updateSiblings: function()
272     {
273         if (this.parent.root)
274             this.treeOutline.section.update();
275         else
276             this.parent.shouldRefreshChildren = true;
277     },
278
279     startEditing: function()
280     {
281         if (WebInspector.isBeingEdited(this.valueElement) || !this.treeOutline.section.editable)
282             return;
283
284         var context = { expanded: this.expanded };
285
286         // Lie about our children to prevent expanding on double click and to collapse subproperties.
287         this.hasChildren = false;
288
289         this.listItemElement.classList.add("editing-sub-part");
290
291         // Edit original source.
292         if (typeof this.valueElement._originalTextContent === "string")
293             this.valueElement.textContent = this.valueElement._originalTextContent;
294
295         var config = new WebInspector.EditingConfig(this.editingCommitted.bind(this), this.editingCancelled.bind(this), context);
296         WebInspector.startEditing(this.valueElement, config);
297     },
298
299     editingEnded: function(context)
300     {
301         this.listItemElement.scrollLeft = 0;
302         this.listItemElement.classList.remove("editing-sub-part");
303         if (context.expanded)
304             this.expand();
305     },
306
307     editingCancelled: function(element, context)
308     {
309         this.update();
310         this.editingEnded(context);
311     },
312
313     editingCommitted: function(element, userInput, previousContent, context)
314     {
315         if (userInput === previousContent)
316             return this.editingCancelled(element, context); // nothing changed, so cancel
317
318         this.applyExpression(userInput, true);
319
320         this.editingEnded(context);
321     },
322
323     applyExpression: function(expression, updateInterface)
324     {
325         expression = expression.trim();
326         var expressionLength = expression.length;
327         function callback(error)
328         {
329             if (!updateInterface)
330                 return;
331
332             if (error)
333                 this.update();
334
335             if (!expressionLength) {
336                 // The property was deleted, so remove this tree element.
337                 this.parent.removeChild(this);
338             } else {
339                 // Call updateSiblings since their value might be based on the value that just changed.
340                 this.updateSiblings();
341             }
342         }
343         this.property.parentObject.setPropertyValue(this.property.name, expression.trim(), callback.bind(this));
344     }
345 };
346
347 WebInspector.ObjectPropertyTreeElement.prototype.__proto__ = TreeElement.prototype;