Web Inspector: create special Network waterfall for media events
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / DOMEventsBreakdownView.js
1 /*
2  * Copyright (C) 2018 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 WI.DOMEventsBreakdownView = class DOMEventsBreakdownView extends WI.View
27 {
28     constructor(domEvents, {includeGraph, startTimestamp} = {})
29     {
30         super();
31
32         this._domEvents = domEvents;
33         this._includeGraph = includeGraph || false;
34         this._startTimestamp = startTimestamp || 0;
35
36         this._tableBodyElement = null;
37
38         this.element.classList.add("dom-events-breakdown");
39     }
40
41     // Public
42
43     addEvent(domEvent)
44     {
45         this._domEvents.push(domEvent);
46
47         this.soon._populateTable();
48     }
49
50     // Protected
51
52     initialLayout()
53     {
54         super.initialLayout();
55
56         let tableElement = this.element.appendChild(document.createElement("table"));
57
58         let headElement = tableElement.appendChild(document.createElement("thead"));
59
60         let headRowElement = headElement.appendChild(document.createElement("tr"));
61
62         let eventHeadCell = headRowElement.appendChild(document.createElement("th"));
63         eventHeadCell.textContent = WI.UIString("Event");
64
65         if (this._includeGraph)
66             headRowElement.appendChild(document.createElement("th"));
67
68         let timeHeadCell = headRowElement.appendChild(document.createElement("th"));
69         timeHeadCell.classList.add("time");
70         timeHeadCell.textContent = WI.UIString("Time");
71
72         this._tableBodyElement = tableElement.appendChild(document.createElement("tbody"));
73
74         this._populateTable();
75     }
76
77     // Private
78
79     _populateTable()
80     {
81         this._tableBodyElement.removeChildren();
82
83         let startTimestamp = this._domEvents[0].timestamp;
84         let endTimestamp = this._domEvents.lastValue.timestamp;
85         let totalTime = endTimestamp - startTimestamp;
86         let styleAttribute = WI.resolvedLayoutDirection() === WI.LayoutDirection.LTR ? "left" : "right";
87
88         function percentOfTotalTime(time) {
89             return time / totalTime * 100;
90         }
91
92         for (let domEvent of this._domEvents) {
93             let rowElement = this._tableBodyElement.appendChild(document.createElement("tr"));
94
95             let nameCell = rowElement.appendChild(document.createElement("td"));
96             nameCell.classList.add("name");
97             nameCell.textContent = domEvent.eventName;
98
99             if (this._includeGraph) {
100                 let graphCell = rowElement.appendChild(document.createElement("td"));
101                 graphCell.classList.add("graph");
102
103                 let graphPoint = graphCell.appendChild(document.createElement("div"));
104                 graphPoint.classList.add("point");
105                 graphPoint.style.setProperty(styleAttribute, `calc(${percentOfTotalTime(domEvent.timestamp - startTimestamp)}% - (var(--point-size) / 2))`);
106             }
107
108             let timeCell = rowElement.appendChild(document.createElement("td"));
109             timeCell.classList.add("time");
110
111             const higherResolution = true;
112             timeCell.textContent = Number.secondsToString(domEvent.timestamp - this._startTimestamp, higherResolution);
113         }
114     }
115 };