Web Inspector: Clicking a frame in the Rendering Frames timeline should select the...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / NetworkTimelineOverviewGraph.js
1
2 /*
3  * Copyright (C) 2014 Apple Inc. All rights reserved.
4  *
5  * Redistribution and use in source and binary forms, with or without
6  * modification, are permitted provided that the following conditions
7  * are met:
8  * 1. Redistributions of source code must retain the above copyright
9  *    notice, this list of conditions and the following disclaimer.
10  * 2. Redistributions in binary form must reproduce the above copyright
11  *    notice, this list of conditions and the following disclaimer in the
12  *    documentation and/or other materials provided with the distribution.
13  *
14  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
15  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
16  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
17  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
18  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
19  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
20  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
21  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
22  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
23  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
24  * THE POSSIBILITY OF SUCH DAMAGE.
25  */
26
27 WebInspector.NetworkTimelineOverviewGraph = function(timeline, timelineOverview)
28 {
29     WebInspector.TimelineOverviewGraph.call(this, timeline, timelineOverview);
30
31     this.element.classList.add("network");
32
33     timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._networkTimelineRecordAdded, this);
34     timeline.addEventListener(WebInspector.Timeline.Event.TimesUpdated, this.needsLayout, this);
35
36     this.reset();
37 };
38
39 WebInspector.NetworkTimelineOverviewGraph.GraphRowStyleClassName = "graph-row";
40 WebInspector.NetworkTimelineOverviewGraph.BarStyleClassName = "bar";
41 WebInspector.NetworkTimelineOverviewGraph.InactiveBarStyleClassName = "inactive";
42 WebInspector.NetworkTimelineOverviewGraph.UnfinishedStyleClassName = "unfinished";
43 WebInspector.NetworkTimelineOverviewGraph.MaximumRowCount = 6;
44
45 WebInspector.NetworkTimelineOverviewGraph.prototype = {
46     constructor: WebInspector.NetworkTimelineOverviewGraph,
47     __proto__: WebInspector.TimelineOverviewGraph.prototype,
48
49     // Public
50
51     reset: function()
52     {
53         WebInspector.TimelineOverviewGraph.prototype.reset.call(this);
54
55         this._nextDumpRow = 0;
56         this._timelineRecordGridRows = [];
57
58         for (var i = 0; i < WebInspector.NetworkTimelineOverviewGraph.MaximumRowCount; ++i)
59             this._timelineRecordGridRows.push([]);
60
61         this.element.removeChildren();
62
63         for (var rowRecords of this._timelineRecordGridRows) {
64             rowRecords.__element = document.createElement("div");
65             rowRecords.__element.className = WebInspector.NetworkTimelineOverviewGraph.GraphRowStyleClassName;
66             this.element.appendChild(rowRecords.__element);
67
68             rowRecords.__recordBars = [];
69         }
70     },
71
72     updateLayout: function()
73     {
74         WebInspector.TimelineOverviewGraph.prototype.updateLayout.call(this);
75
76         var secondsPerPixel = this.timelineOverview.secondsPerPixel;
77
78         var recordBarIndex = 0;
79
80         function createBar(rowElement, rowRecordBars, records, renderMode)
81         {
82             var timelineRecordBar = rowRecordBars[recordBarIndex];
83             if (!timelineRecordBar)
84                 timelineRecordBar = rowRecordBars[recordBarIndex] = new WebInspector.TimelineRecordBar(records, renderMode);
85             else {
86                 timelineRecordBar.renderMode = renderMode;
87                 timelineRecordBar.records = records;
88             }
89             timelineRecordBar.refresh(this);
90             if (!timelineRecordBar.element.parentNode)
91                 rowElement.appendChild(timelineRecordBar.element);
92             ++recordBarIndex;
93         }
94
95         for (var rowRecords of this._timelineRecordGridRows) {
96             var rowElement = rowRecords.__element;
97             var rowRecordBars = rowRecords.__recordBars;
98
99             recordBarIndex = 0;
100
101             WebInspector.TimelineRecordBar.createCombinedBars(rowRecords, secondsPerPixel, this, createBar.bind(this, rowElement, rowRecordBars));
102
103             // Remove the remaining unused TimelineRecordBars.
104             for (; recordBarIndex < rowRecordBars.length; ++recordBarIndex) {
105                 rowRecordBars[recordBarIndex].records = null;
106                 rowRecordBars[recordBarIndex].element.remove();
107             }
108         }
109     },
110
111     // Private
112
113     _networkTimelineRecordAdded: function(event)
114     {
115         var resourceTimelineRecord = event.data.record;
116         console.assert(resourceTimelineRecord instanceof WebInspector.ResourceTimelineRecord);
117
118         function compareByStartTime(a, b)
119         {
120             return a.startTime - b.startTime;
121         }
122
123         // Try to find a row that has room and does not overlap a previous record.
124         var foundRowForRecord = false;
125         for (var i = 0; i < this._timelineRecordGridRows.length; ++i) {
126             var rowRecords = this._timelineRecordGridRows[i];
127             var lastRecord = rowRecords.lastValue;
128
129             if (!lastRecord || lastRecord.endTime + WebInspector.NetworkTimelineOverviewGraph.MinimumBarPaddingTime <= resourceTimelineRecord.startTime) {
130                 insertObjectIntoSortedArray(resourceTimelineRecord, rowRecords, compareByStartTime);
131                 this._nextDumpRow = i + 1;
132                 foundRowForRecord = true;
133                 break;
134             }
135         }
136
137         if (!foundRowForRecord) {
138             // Try to find a row that does not overlap a previous record's active time, but it can overlap the inactive time.
139             for (var i = 0; i < this._timelineRecordGridRows.length; ++i) {
140                 var rowRecords = this._timelineRecordGridRows[i];
141                 var lastRecord = rowRecords.lastValue;
142                 console.assert(lastRecord);
143
144                 if (lastRecord.activeStartTime + WebInspector.NetworkTimelineOverviewGraph.MinimumBarPaddingTime <= resourceTimelineRecord.startTime) {
145                     insertObjectIntoSortedArray(resourceTimelineRecord, rowRecords, compareByStartTime);
146                     this._nextDumpRow = i + 1;
147                     foundRowForRecord = true;
148                     break;
149                 }
150             }
151         }
152
153         // We didn't find a empty spot, so dump into the designated dump row.
154         if (!foundRowForRecord) {
155             if (this._nextDumpRow >= WebInspector.NetworkTimelineOverviewGraph.MaximumRowCount)
156                 this._nextDumpRow = 0;
157             insertObjectIntoSortedArray(resourceTimelineRecord, this._timelineRecordGridRows[this._nextDumpRow++], compareByStartTime);
158         }
159
160         this.needsLayout();
161     }
162 };