66e73b59a459a7e969141a3d7b3a4e33d60058c0
[WebKit-https.git] / Source / WebCore / inspector / front-end / ProfileView.js
1 /*
2  * Copyright (C) 2008 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. ``AS IS'' AND ANY
14  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
15  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
17  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
18  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
19  * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
20  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
21  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
22  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 // FIXME: Rename the file.
27
28 WebInspector.CPUProfileView = function(profile)
29 {
30     WebInspector.View.call(this);
31
32     this.element.addStyleClass("profile-view");
33     
34     this.showSelfTimeAsPercent = WebInspector.settings.createSetting("cpuProfilerShowSelfTimeAsPercent", true);
35     this.showTotalTimeAsPercent = WebInspector.settings.createSetting("cpuProfilerShowTotalTimeAsPercent", true);
36     this.showAverageTimeAsPercent = WebInspector.settings.createSetting("cpuProfilerShowAverageTimeAsPercent", true);
37     this._viewType = WebInspector.settings.createSetting("cpuProfilerView", WebInspector.CPUProfileView._TypeHeavy);
38
39     var columns = { "self": { title: WebInspector.UIString("Self"), width: "72px", sort: "descending", sortable: true },
40                     "total": { title: WebInspector.UIString("Total"), width: "72px", sortable: true },
41                     "average": { title: WebInspector.UIString("Average"), width: "72px", sortable: true },
42                     "calls": { title: WebInspector.UIString("Calls"), width: "54px", sortable: true },
43                     "function": { title: WebInspector.UIString("Function"), disclosure: true, sortable: true } };
44
45     if (Preferences.samplingCPUProfiler) {
46         delete columns.average;
47         delete columns.calls;
48     }
49
50     this.dataGrid = new WebInspector.DataGrid(columns);
51     this.dataGrid.addEventListener("sorting changed", this._sortData, this);
52     this.dataGrid.element.addEventListener("mousedown", this._mouseDownInDataGrid.bind(this), true);
53     this.dataGrid.show(this.element);
54
55     this.viewSelectElement = document.createElement("select");
56     this.viewSelectElement.className = "status-bar-item";
57     this.viewSelectElement.addEventListener("change", this._changeView.bind(this), false);
58
59     var heavyViewOption = document.createElement("option");
60     heavyViewOption.label = WebInspector.UIString("Heavy (Bottom Up)");
61     var treeViewOption = document.createElement("option");
62     treeViewOption.label = WebInspector.UIString("Tree (Top Down)");
63     this.viewSelectElement.appendChild(heavyViewOption);
64     this.viewSelectElement.appendChild(treeViewOption);
65     this.viewSelectElement.selectedIndex = this._viewType.get() === WebInspector.CPUProfileView._TypeHeavy ? 0 : 1;
66
67     this.percentButton = new WebInspector.StatusBarButton("", "percent-time-status-bar-item");
68     this.percentButton.addEventListener("click", this._percentClicked.bind(this), false);
69
70     this.focusButton = new WebInspector.StatusBarButton(WebInspector.UIString("Focus selected function."), "focus-profile-node-status-bar-item");
71     this.focusButton.disabled = true;
72     this.focusButton.addEventListener("click", this._focusClicked.bind(this), false);
73
74     this.excludeButton = new WebInspector.StatusBarButton(WebInspector.UIString("Exclude selected function."), "exclude-profile-node-status-bar-item");
75     this.excludeButton.disabled = true;
76     this.excludeButton.addEventListener("click", this._excludeClicked.bind(this), false);
77
78     this.resetButton = new WebInspector.StatusBarButton(WebInspector.UIString("Restore all functions."), "reset-profile-status-bar-item");
79     this.resetButton.visible = false;
80     this.resetButton.addEventListener("click", this._resetClicked.bind(this), false);
81
82     this.profile = profile;
83
84     function profileCallback(error, profile)
85     {
86         if (error)
87             return;
88         this.profile.head = profile.head;
89         this._assignParentsInProfile();
90         this._changeView();
91         this._updatePercentButton();
92     }
93
94     this._linkifier = WebInspector.debuggerPresentationModel.createLinkifier(new WebInspector.DebuggerPresentationModel.DefaultLinkifierFormatter(30));
95
96     ProfilerAgent.getProfile(this.profile.typeId, this.profile.uid, profileCallback.bind(this));
97 }
98
99 WebInspector.CPUProfileView._TypeTree = "Tree";
100 WebInspector.CPUProfileView._TypeHeavy = "Heavy";
101
102 WebInspector.CPUProfileView.prototype = {
103     get statusBarItems()
104     {
105         return [this.viewSelectElement, this.percentButton.element, this.focusButton.element, this.excludeButton.element, this.resetButton.element];
106     },
107
108     get profile()
109     {
110         return this._profile;
111     },
112
113     set profile(profile)
114     {
115         this._profile = profile;
116     },
117
118     get bottomUpProfileDataGridTree()
119     {
120         if (!this._bottomUpProfileDataGridTree) {
121             if (this.profile.bottomUpHead)
122                 this._bottomUpProfileDataGridTree = new WebInspector.TopDownProfileDataGridTree(this, this.profile.bottomUpHead);
123             else
124                 this._bottomUpProfileDataGridTree = new WebInspector.BottomUpProfileDataGridTree(this, this.profile.head);
125         }
126         return this._bottomUpProfileDataGridTree;
127     },
128
129     get topDownProfileDataGridTree()
130     {
131         if (!this._topDownProfileDataGridTree)
132             this._topDownProfileDataGridTree = new WebInspector.TopDownProfileDataGridTree(this, this.profile.head);
133         return this._topDownProfileDataGridTree;
134     },
135
136     get currentTree()
137     {
138         return this._currentTree;
139     },
140
141     set currentTree(tree)
142     {
143         this._currentTree = tree;
144         this.refresh();
145     },
146
147     get topDownTree()
148     {
149         if (!this._topDownTree) {
150             this._topDownTree = WebInspector.TopDownTreeFactory.create(this.profile.head);
151             this._sortProfile(this._topDownTree);
152         }
153
154         return this._topDownTree;
155     },
156
157     get bottomUpTree()
158     {
159         if (!this._bottomUpTree) {
160             this._bottomUpTree = WebInspector.BottomUpTreeFactory.create(this.profile.head);
161             this._sortProfile(this._bottomUpTree);
162         }
163
164         return this._bottomUpTree;
165     },
166
167     willHide: function()
168     {
169         this._currentSearchResultIndex = -1;
170     },
171
172     refresh: function()
173     {
174         var selectedProfileNode = this.dataGrid.selectedNode ? this.dataGrid.selectedNode.profileNode : null;
175
176         this.dataGrid.removeChildren();
177
178         var children = this.profileDataGridTree.children;
179         var count = children.length;
180
181         for (var index = 0; index < count; ++index)
182             this.dataGrid.appendChild(children[index]);
183
184         if (selectedProfileNode)
185             selectedProfileNode.selected = true;
186     },
187
188     refreshVisibleData: function()
189     {
190         var child = this.dataGrid.children[0];
191         while (child) {
192             child.refresh();
193             child = child.traverseNextNode(false, null, true);
194         }
195     },
196
197     refreshShowAsPercents: function()
198     {
199         this._updatePercentButton();
200         this.refreshVisibleData();
201     },
202
203     searchCanceled: function()
204     {
205         if (this._searchResults) {
206             for (var i = 0; i < this._searchResults.length; ++i) {
207                 var profileNode = this._searchResults[i].profileNode;
208
209                 delete profileNode._searchMatchedSelfColumn;
210                 delete profileNode._searchMatchedTotalColumn;
211                 delete profileNode._searchMatchedCallsColumn;
212                 delete profileNode._searchMatchedFunctionColumn;
213
214                 profileNode.refresh();
215             }
216         }
217
218         delete this._searchFinishedCallback;
219         this._currentSearchResultIndex = -1;
220         this._searchResults = [];
221     },
222
223     performSearch: function(query, finishedCallback)
224     {
225         // Call searchCanceled since it will reset everything we need before doing a new search.
226         this.searchCanceled();
227
228         query = query.trim();
229
230         if (!query.length)
231             return;
232
233         this._searchFinishedCallback = finishedCallback;
234
235         var greaterThan = (query.indexOf(">") === 0);
236         var lessThan = (query.indexOf("<") === 0);
237         var equalTo = (query.indexOf("=") === 0 || ((greaterThan || lessThan) && query.indexOf("=") === 1));
238         var percentUnits = (query.lastIndexOf("%") === (query.length - 1));
239         var millisecondsUnits = (query.length > 2 && query.lastIndexOf("ms") === (query.length - 2));
240         var secondsUnits = (!millisecondsUnits && query.lastIndexOf("s") === (query.length - 1));
241
242         var queryNumber = parseFloat(query);
243         if (greaterThan || lessThan || equalTo) {
244             if (equalTo && (greaterThan || lessThan))
245                 queryNumber = parseFloat(query.substring(2));
246             else
247                 queryNumber = parseFloat(query.substring(1));
248         }
249
250         var queryNumberMilliseconds = (secondsUnits ? (queryNumber * 1000) : queryNumber);
251
252         // Make equalTo implicitly true if it wasn't specified there is no other operator.
253         if (!isNaN(queryNumber) && !(greaterThan || lessThan))
254             equalTo = true;
255
256         function matchesQuery(/*ProfileDataGridNode*/ profileDataGridNode)
257         {
258             delete profileDataGridNode._searchMatchedSelfColumn;
259             delete profileDataGridNode._searchMatchedTotalColumn;
260             delete profileDataGridNode._searchMatchedAverageColumn;
261             delete profileDataGridNode._searchMatchedCallsColumn;
262             delete profileDataGridNode._searchMatchedFunctionColumn;
263
264             if (percentUnits) {
265                 if (lessThan) {
266                     if (profileDataGridNode.selfPercent < queryNumber)
267                         profileDataGridNode._searchMatchedSelfColumn = true;
268                     if (profileDataGridNode.totalPercent < queryNumber)
269                         profileDataGridNode._searchMatchedTotalColumn = true;
270                     if (profileDataGridNode.averagePercent < queryNumberMilliseconds)
271                         profileDataGridNode._searchMatchedAverageColumn = true;
272                 } else if (greaterThan) {
273                     if (profileDataGridNode.selfPercent > queryNumber)
274                         profileDataGridNode._searchMatchedSelfColumn = true;
275                     if (profileDataGridNode.totalPercent > queryNumber)
276                         profileDataGridNode._searchMatchedTotalColumn = true;
277                     if (profileDataGridNode.averagePercent < queryNumberMilliseconds)
278                         profileDataGridNode._searchMatchedAverageColumn = true;
279                 }
280
281                 if (equalTo) {
282                     if (profileDataGridNode.selfPercent == queryNumber)
283                         profileDataGridNode._searchMatchedSelfColumn = true;
284                     if (profileDataGridNode.totalPercent == queryNumber)
285                         profileDataGridNode._searchMatchedTotalColumn = true;
286                     if (profileDataGridNode.averagePercent < queryNumberMilliseconds)
287                         profileDataGridNode._searchMatchedAverageColumn = true;
288                 }
289             } else if (millisecondsUnits || secondsUnits) {
290                 if (lessThan) {
291                     if (profileDataGridNode.selfTime < queryNumberMilliseconds)
292                         profileDataGridNode._searchMatchedSelfColumn = true;
293                     if (profileDataGridNode.totalTime < queryNumberMilliseconds)
294                         profileDataGridNode._searchMatchedTotalColumn = true;
295                     if (profileDataGridNode.averageTime < queryNumberMilliseconds)
296                         profileDataGridNode._searchMatchedAverageColumn = true;
297                 } else if (greaterThan) {
298                     if (profileDataGridNode.selfTime > queryNumberMilliseconds)
299                         profileDataGridNode._searchMatchedSelfColumn = true;
300                     if (profileDataGridNode.totalTime > queryNumberMilliseconds)
301                         profileDataGridNode._searchMatchedTotalColumn = true;
302                     if (profileDataGridNode.averageTime > queryNumberMilliseconds)
303                         profileDataGridNode._searchMatchedAverageColumn = true;
304                 }
305
306                 if (equalTo) {
307                     if (profileDataGridNode.selfTime == queryNumberMilliseconds)
308                         profileDataGridNode._searchMatchedSelfColumn = true;
309                     if (profileDataGridNode.totalTime == queryNumberMilliseconds)
310                         profileDataGridNode._searchMatchedTotalColumn = true;
311                     if (profileDataGridNode.averageTime == queryNumberMilliseconds)
312                         profileDataGridNode._searchMatchedAverageColumn = true;
313                 }
314             } else {
315                 if (equalTo && profileDataGridNode.numberOfCalls == queryNumber)
316                     profileDataGridNode._searchMatchedCallsColumn = true;
317                 if (greaterThan && profileDataGridNode.numberOfCalls > queryNumber)
318                     profileDataGridNode._searchMatchedCallsColumn = true;
319                 if (lessThan && profileDataGridNode.numberOfCalls < queryNumber)
320                     profileDataGridNode._searchMatchedCallsColumn = true;
321             }
322
323             if (profileDataGridNode.functionName.hasSubstring(query, true) || profileDataGridNode.url.hasSubstring(query, true))
324                 profileDataGridNode._searchMatchedFunctionColumn = true;
325
326             if (profileDataGridNode._searchMatchedSelfColumn ||
327                 profileDataGridNode._searchMatchedTotalColumn ||
328                 profileDataGridNode._searchMatchedAverageColumn ||
329                 profileDataGridNode._searchMatchedCallsColumn ||
330                 profileDataGridNode._searchMatchedFunctionColumn)
331             {
332                 profileDataGridNode.refresh();
333                 return true;
334             }
335
336             return false;
337         }
338
339         var current = this.profileDataGridTree.children[0];
340
341         while (current) {
342             if (matchesQuery(current)) {
343                 this._searchResults.push({ profileNode: current });
344             }
345
346             current = current.traverseNextNode(false, null, false);
347         }
348
349         finishedCallback(this, this._searchResults.length);
350     },
351
352     jumpToFirstSearchResult: function()
353     {
354         if (!this._searchResults || !this._searchResults.length)
355             return;
356         this._currentSearchResultIndex = 0;
357         this._jumpToSearchResult(this._currentSearchResultIndex);
358     },
359
360     jumpToLastSearchResult: function()
361     {
362         if (!this._searchResults || !this._searchResults.length)
363             return;
364         this._currentSearchResultIndex = (this._searchResults.length - 1);
365         this._jumpToSearchResult(this._currentSearchResultIndex);
366     },
367
368     jumpToNextSearchResult: function()
369     {
370         if (!this._searchResults || !this._searchResults.length)
371             return;
372         if (++this._currentSearchResultIndex >= this._searchResults.length)
373             this._currentSearchResultIndex = 0;
374         this._jumpToSearchResult(this._currentSearchResultIndex);
375     },
376
377     jumpToPreviousSearchResult: function()
378     {
379         if (!this._searchResults || !this._searchResults.length)
380             return;
381         if (--this._currentSearchResultIndex < 0)
382             this._currentSearchResultIndex = (this._searchResults.length - 1);
383         this._jumpToSearchResult(this._currentSearchResultIndex);
384     },
385
386     showingFirstSearchResult: function()
387     {
388         return (this._currentSearchResultIndex === 0);
389     },
390
391     showingLastSearchResult: function()
392     {
393         return (this._searchResults && this._currentSearchResultIndex === (this._searchResults.length - 1));
394     },
395
396     _jumpToSearchResult: function(index)
397     {
398         var searchResult = this._searchResults[index];
399         if (!searchResult)
400             return;
401
402         var profileNode = searchResult.profileNode;
403         profileNode.revealAndSelect();
404     },
405
406     _changeView: function()
407     {
408         if (!this.profile)
409             return;
410
411         if (this.viewSelectElement.selectedIndex == 1) {
412             this.profileDataGridTree = this.topDownProfileDataGridTree;
413             this._sortProfile();
414             this._viewType.set(WebInspector.CPUProfileView._TypeTree);
415         } else if (this.viewSelectElement.selectedIndex == 0) {
416             this.profileDataGridTree = this.bottomUpProfileDataGridTree;
417             this._sortProfile();
418             this._viewType.set(WebInspector.CPUProfileView._TypeHeavy);
419         }
420
421         if (!this.currentQuery || !this._searchFinishedCallback || !this._searchResults)
422             return;
423
424         // The current search needs to be performed again. First negate out previous match
425         // count by calling the search finished callback with a negative number of matches.
426         // Then perform the search again the with same query and callback.
427         this._searchFinishedCallback(this, -this._searchResults.length);
428         this.performSearch(this.currentQuery, this._searchFinishedCallback);
429     },
430
431     _percentClicked: function(event)
432     {
433         var currentState = this.showSelfTimeAsPercent.get() && this.showTotalTimeAsPercent.get() && this.showAverageTimeAsPercent.get();
434         this.showSelfTimeAsPercent.set(!currentState);
435         this.showTotalTimeAsPercent.set(!currentState);
436         this.showAverageTimeAsPercent.set(!currentState);
437         this.refreshShowAsPercents();
438     },
439
440     _updatePercentButton: function()
441     {
442         if (this.showSelfTimeAsPercent.get() && this.showTotalTimeAsPercent.get() && this.showAverageTimeAsPercent.get()) {
443             this.percentButton.title = WebInspector.UIString("Show absolute total and self times.");
444             this.percentButton.toggled = true;
445         } else {
446             this.percentButton.title = WebInspector.UIString("Show total and self times as percentages.");
447             this.percentButton.toggled = false;
448         }
449     },
450
451     _focusClicked: function(event)
452     {
453         if (!this.dataGrid.selectedNode)
454             return;
455
456         this.resetButton.visible = true;
457         this.profileDataGridTree.focus(this.dataGrid.selectedNode);
458         this.refresh();
459         this.refreshVisibleData();
460     },
461
462     _excludeClicked: function(event)
463     {
464         var selectedNode = this.dataGrid.selectedNode
465
466         if (!selectedNode)
467             return;
468
469         selectedNode.deselect();
470
471         this.resetButton.visible = true;
472         this.profileDataGridTree.exclude(selectedNode);
473         this.refresh();
474         this.refreshVisibleData();
475     },
476
477     _resetClicked: function(event)
478     {
479         this.resetButton.visible = false;
480         this.profileDataGridTree.restore();
481         this._linkifier.reset();
482         this.refresh();
483         this.refreshVisibleData();
484     },
485
486     _dataGridNodeSelected: function(node)
487     {
488         this.focusButton.disabled = false;
489         this.excludeButton.disabled = false;
490     },
491
492     _dataGridNodeDeselected: function(node)
493     {
494         this.focusButton.disabled = true;
495         this.excludeButton.disabled = true;
496     },
497
498     _sortData: function(event)
499     {
500         this._sortProfile(this.profile);
501     },
502
503     _sortProfile: function()
504     {
505         var sortAscending = this.dataGrid.sortOrder === "ascending";
506         var sortColumnIdentifier = this.dataGrid.sortColumnIdentifier;
507         var sortProperty = {
508                 "average": "averageTime",
509                 "self": "selfTime",
510                 "total": "totalTime",
511                 "calls": "numberOfCalls",
512                 "function": "functionName"
513             }[sortColumnIdentifier];
514
515         this.profileDataGridTree.sort(WebInspector.ProfileDataGridTree.propertyComparator(sortProperty, sortAscending));
516
517         this.refresh();
518     },
519
520     _mouseDownInDataGrid: function(event)
521     {
522         if (event.detail < 2)
523             return;
524
525         var cell = event.target.enclosingNodeOrSelfWithNodeName("td");
526         if (!cell || (!cell.hasStyleClass("total-column") && !cell.hasStyleClass("self-column") && !cell.hasStyleClass("average-column")))
527             return;
528
529         if (cell.hasStyleClass("total-column"))
530             this.showTotalTimeAsPercent.set(!this.showTotalTimeAsPercent.get());
531         else if (cell.hasStyleClass("self-column"))
532             this.showSelfTimeAsPercent.set(!this.showSelfTimeAsPercent.get());
533         else if (cell.hasStyleClass("average-column"))
534             this.showAverageTimeAsPercent.set(!this.showAverageTimeAsPercent.get());
535
536         this.refreshShowAsPercents();
537
538         event.preventDefault();
539         event.stopPropagation();
540     },
541
542     _assignParentsInProfile: function()
543     {
544         var head = this.profile.head;
545         head.parent = null;
546         head.head = null;
547         var nodesToTraverse = [ { parent: head, children: head.children } ];
548         while (nodesToTraverse.length > 0) {
549             var pair = nodesToTraverse.shift();
550             var parent = pair.parent;
551             var children = pair.children;
552             var length = children.length;
553             for (var i = 0; i < length; ++i) {
554                 children[i].head = head;
555                 children[i].parent = parent;
556                 if (children[i].children.length > 0)
557                     nodesToTraverse.push({ parent: children[i], children: children[i].children });
558             }
559         }
560     }
561 }
562
563 WebInspector.CPUProfileView.prototype.__proto__ = WebInspector.View.prototype;
564
565 WebInspector.CPUProfileType = function()
566 {
567     WebInspector.ProfileType.call(this, WebInspector.CPUProfileType.TypeId, WebInspector.UIString("CPU PROFILES"));
568     this._recording = false;
569 }
570
571 WebInspector.CPUProfileType.TypeId = "CPU";
572
573 WebInspector.CPUProfileType.prototype = {
574     get buttonTooltip()
575     {
576         return this._recording ? WebInspector.UIString("Stop profiling.") : WebInspector.UIString("Start profiling.");
577     },
578
579     get buttonStyle()
580     {
581         return this._recording ? "record-profile-status-bar-item status-bar-item toggled-on" : "record-profile-status-bar-item status-bar-item";
582     },
583
584     buttonClicked: function()
585     {
586         this._recording = !this._recording;
587
588         if (this._recording)
589             ProfilerAgent.start();
590         else
591             ProfilerAgent.stop();
592     },
593
594     get welcomeMessage()
595     {
596         return WebInspector.UIString("Control CPU profiling by pressing the %s button on the status bar.");
597     },
598
599     setRecordingProfile: function(isProfiling)
600     {
601         this._recording = isProfiling;
602     },
603
604     createSidebarTreeElementForProfile: function(profile)
605     {
606         return new WebInspector.ProfileSidebarTreeElement(profile, WebInspector.UIString("Profile %d"), "profile-sidebar-tree-item");
607     },
608
609     createView: function(profile)
610     {
611         return new WebInspector.CPUProfileView(profile);
612     }
613 }
614
615 WebInspector.CPUProfileType.prototype.__proto__ = WebInspector.ProfileType.prototype;