Web Inspector: Show layout/paint pixel area in the Rendering Frames tree outline
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / RenderingFrameTimelineView.js
1 /*
2  * Copyright (C) 2015 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.RenderingFrameTimelineView = class RenderingFrameTimelineView extends WebInspector.TimelineView
27 {
28     constructor(timeline, extraArguments)
29     {
30         super(timeline, extraArguments);
31
32         console.assert(WebInspector.TimelineRecord.Type.RenderingFrame);
33
34         this.navigationSidebarTreeOutline.element.classList.add("rendering-frame");
35
36         var scopeBarItems = [];
37         for (var key in WebInspector.RenderingFrameTimelineView.DurationFilter) {
38             var value = WebInspector.RenderingFrameTimelineView.DurationFilter[key];
39             scopeBarItems.push(new WebInspector.ScopeBarItem(value, WebInspector.RenderingFrameTimelineView.displayNameForDurationFilter(value)));
40         }
41
42         this._scopeBar = new WebInspector.ScopeBar("rendering-frame-scope-bar", scopeBarItems, scopeBarItems[0], true);
43         this._scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
44
45         let columns = {totalTime: {}, scriptTime: {}, layoutTime: {}, paintTime: {}, otherTime: {}, startTime: {}, location: {}};
46
47         columns.totalTime.title = WebInspector.UIString("Total Time");
48         columns.totalTime.width = "15%";
49         columns.totalTime.aligned = "right";
50
51         columns.scriptTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Script);
52         columns.scriptTime.width = "10%";
53         columns.scriptTime.aligned = "right";
54
55         columns.layoutTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Layout);
56         columns.layoutTime.width = "10%";
57         columns.layoutTime.aligned = "right";
58
59         columns.paintTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Paint);
60         columns.paintTime.width = "10%";
61         columns.paintTime.aligned = "right";
62
63         columns.otherTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Other);
64         columns.otherTime.width = "10%";
65         columns.otherTime.aligned = "right";
66
67         columns.startTime.title = WebInspector.UIString("Start Time");
68         columns.startTime.width = "15%";
69         columns.startTime.aligned = "right";
70
71         columns.location.title = WebInspector.UIString("Location");
72
73         for (var column in columns)
74             columns[column].sortable = true;
75
76         this._dataGrid = new WebInspector.TimelineDataGrid(this.navigationSidebarTreeOutline, columns, this);
77         this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
78         this._dataGrid.sortColumnIdentifier = "startTime";
79         this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
80
81         this.element.classList.add("rendering-frame");
82         this.element.appendChild(this._dataGrid.element);
83
84         timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._renderingFrameTimelineRecordAdded, this);
85
86         this._pendingRecords = [];
87     }
88
89     static displayNameForDurationFilter(filter)
90     {
91         switch (filter) {
92             case WebInspector.RenderingFrameTimelineView.DurationFilter.All:
93                 return WebInspector.UIString("All");
94             case WebInspector.RenderingFrameTimelineView.DurationFilter.OverOneMillisecond:
95                 return WebInspector.UIString("Over 1 ms");
96             case WebInspector.RenderingFrameTimelineView.DurationFilter.OverFifteenMilliseconds:
97                 return WebInspector.UIString("Over 15 ms");
98             default:
99                 console.error("Unknown filter type", filter);
100         }
101
102         return null;
103     }
104
105     // Public
106
107     get navigationSidebarTreeOutlineLabel()
108     {
109         return WebInspector.UIString("Records");
110     }
111
112     shown()
113     {
114         super.shown();
115
116         this._dataGrid.shown();
117     }
118
119     hidden()
120     {
121         this._dataGrid.hidden();
122
123         super.hidden();
124     }
125
126     closed()
127     {
128         console.assert(this.representedObject instanceof WebInspector.Timeline);
129         this.representedObject.removeEventListener(null, null, this);
130
131         this._dataGrid.closed();
132     }
133
134     updateLayout()
135     {
136         super.updateLayout();
137
138         this._dataGrid.updateLayout();
139
140         this._processPendingRecords();
141     }
142
143     get selectionPathComponents()
144     {
145         var dataGridNode = this._dataGrid.selectedNode;
146         if (!dataGridNode)
147             return null;
148
149         var pathComponents = [];
150
151         while (dataGridNode && !dataGridNode.root) {
152             var treeElement = this._dataGrid.treeElementForDataGridNode(dataGridNode);
153             console.assert(treeElement);
154             if (!treeElement)
155                 break;
156
157             if (treeElement.hidden)
158                 return null;
159
160             var pathComponent = new WebInspector.GeneralTreeElementPathComponent(treeElement);
161             pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.treeElementPathComponentSelected, this);
162             pathComponents.unshift(pathComponent);
163             dataGridNode = dataGridNode.parent;
164         }
165
166         return pathComponents;
167     }
168
169     matchTreeElementAgainstCustomFilters(treeElement)
170     {
171         console.assert(this._scopeBar.selectedItems.length === 1);
172         var selectedScopeBarItem = this._scopeBar.selectedItems[0];
173         if (!selectedScopeBarItem || selectedScopeBarItem.id === WebInspector.RenderingFrameTimelineView.DurationFilter.All)
174             return true;
175
176         while (treeElement && !(treeElement.record instanceof WebInspector.RenderingFrameTimelineRecord))
177             treeElement = treeElement.parent;
178
179         console.assert(treeElement, "Cannot apply duration filter: no RenderingFrameTimelineRecord found.");
180         if (!treeElement)
181             return false;
182
183         var minimumDuration = selectedScopeBarItem.id === WebInspector.RenderingFrameTimelineView.DurationFilter.OverOneMillisecond ? 0.001 : 0.015;
184         return treeElement.record.duration > minimumDuration;
185     }
186
187     reset()
188     {
189         super.reset();
190
191         this._dataGrid.reset();
192
193         this._pendingRecords = [];
194     }
195
196     // Protected
197
198     canShowContentViewForTreeElement(treeElement)
199     {
200         if (treeElement instanceof WebInspector.ProfileNodeTreeElement)
201             return !!treeElement.profileNode.sourceCodeLocation;
202         return super.canShowContentViewForTreeElement(treeElement);
203     }
204
205     showContentViewForTreeElement(treeElement)
206     {
207         if (treeElement instanceof WebInspector.ProfileNodeTreeElement) {
208             if (treeElement.profileNode.sourceCodeLocation)
209                 WebInspector.showOriginalOrFormattedSourceCodeLocation(treeElement.profileNode.sourceCodeLocation);
210             return;
211         }
212
213         super.showContentViewForTreeElement(treeElement);
214     }
215
216     treeElementDeselected(treeElement)
217     {
218         var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(treeElement);
219         if (!dataGridNode)
220             return;
221
222         dataGridNode.deselect();
223     }
224
225     treeElementSelected(treeElement, selectedByUser)
226     {
227         if (this._dataGrid.shouldIgnoreSelectionEvent())
228             return;
229
230         super.treeElementSelected(treeElement, selectedByUser);
231     }
232
233     treeElementPathComponentSelected(event)
234     {
235         var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
236         if (!dataGridNode)
237             return;
238         dataGridNode.revealAndSelect();
239     }
240
241     dataGridNodeForTreeElement(treeElement)
242     {
243         if (treeElement instanceof WebInspector.ProfileNodeTreeElement)
244             return new WebInspector.ProfileNodeDataGridNode(treeElement.profileNode, this.zeroTime, this.startTime, this.endTime);
245         return null;
246     }
247
248     // Private
249
250     _processPendingRecords()
251     {
252         if (!this._pendingRecords.length)
253             return;
254
255         for (var renderingFrameTimelineRecord of this._pendingRecords) {
256             console.assert(renderingFrameTimelineRecord instanceof WebInspector.RenderingFrameTimelineRecord);
257
258             var treeElement = new WebInspector.TimelineRecordTreeElement(renderingFrameTimelineRecord);
259             var dataGridNode = new WebInspector.RenderingFrameTimelineDataGridNode(renderingFrameTimelineRecord, this.zeroTime);
260             this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
261
262             var stack = [{children: renderingFrameTimelineRecord.children, parentTreeElement: treeElement, index: 0}];
263             while (stack.length) {
264                 var entry = stack.lastValue;
265                 if (entry.index >= entry.children.length) {
266                     stack.pop();
267                     continue;
268                 }
269
270                 var childRecord = entry.children[entry.index];
271                 var childTreeElement = null;
272                 if (childRecord.type === WebInspector.TimelineRecord.Type.Layout) {
273                     childTreeElement = new WebInspector.TimelineRecordTreeElement(childRecord, WebInspector.SourceCodeLocation.NameStyle.Short);
274                     if (childRecord.width && childRecord.height) {
275                         let subtitle = document.createElement("span");
276                         subtitle.textContent = WebInspector.UIString("%d \u2A09 %d").format(childRecord.width, childRecord.height);
277                         childTreeElement.subtitle = subtitle;
278                     }
279                     var layoutDataGridNode = new WebInspector.LayoutTimelineDataGridNode(childRecord, this.zeroTime);
280
281                     this._dataGrid.addRowInSortOrder(childTreeElement, layoutDataGridNode, entry.parentTreeElement);
282                 } else if (childRecord.type === WebInspector.TimelineRecord.Type.Script) {
283                     var rootNodes = [];
284                     if (childRecord.profile) {
285                         // FIXME: Support using the bottom-up tree once it is implemented.
286                         rootNodes = childRecord.profile.topDownRootNodes;
287                     }
288
289                     childTreeElement = new WebInspector.TimelineRecordTreeElement(childRecord, WebInspector.SourceCodeLocation.NameStyle.Short, rootNodes.length);
290                     var scriptDataGridNode = new WebInspector.ScriptTimelineDataGridNode(childRecord, this.zeroTime);
291
292                     this._dataGrid.addRowInSortOrder(childTreeElement, scriptDataGridNode, entry.parentTreeElement);
293
294                     for (var profileNode of rootNodes) {
295                         var profileNodeTreeElement = new WebInspector.ProfileNodeTreeElement(profileNode, this);
296                         var profileNodeDataGridNode = new WebInspector.ProfileNodeDataGridNode(profileNode, this.zeroTime, this.startTime, this.endTime);
297                         this._dataGrid.addRowInSortOrder(profileNodeTreeElement, profileNodeDataGridNode, childTreeElement);
298                     }
299                 }
300
301                 if (childTreeElement && childRecord.children.length)
302                     stack.push({children: childRecord.children, parentTreeElement: childTreeElement, index: 0});
303                 ++entry.index;
304             }
305         }
306
307         this._pendingRecords = [];
308     }
309
310     _renderingFrameTimelineRecordAdded(event)
311     {
312         var renderingFrameTimelineRecord = event.data.record;
313         console.assert(renderingFrameTimelineRecord instanceof WebInspector.RenderingFrameTimelineRecord);
314         console.assert(renderingFrameTimelineRecord.children.length, "Missing child records for rendering frame.");
315
316         this._pendingRecords.push(renderingFrameTimelineRecord);
317
318         this.needsLayout();
319     }
320
321     _dataGridNodeSelected(event)
322     {
323         this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
324     }
325
326     _scopeBarSelectionDidChange(event)
327     {
328         this.timelineSidebarPanel.updateFilter();
329     }
330 };
331
332 WebInspector.RenderingFrameTimelineView.DurationFilter = {
333     All: "rendering-frame-timeline-view-duration-filter-all",
334     OverOneMillisecond: "rendering-frame-timeline-view-duration-filter-over-1-ms",
335     OverFifteenMilliseconds: "rendering-frame-timeline-view-duration-filter-over-15-ms"
336 };
337