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