-
-
Notifications
You must be signed in to change notification settings - Fork 1k
/
timer.js
88 lines (85 loc) · 3.6 KB
/
timer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import { $$ } from "./utils.js";
function insertBrowserTiming() {
const timingOffset = performance.timing.navigationStart,
timingEnd = performance.timing.loadEventEnd,
totalTime = timingEnd - timingOffset;
function getLeft(stat) {
if (totalTime !== 0) {
return (
((performance.timing[stat] - timingOffset) / totalTime) * 100.0
);
} else {
return 0;
}
}
function getCSSWidth(stat, endStat) {
let width = 0;
if (totalTime !== 0) {
width =
((performance.timing[endStat] - performance.timing[stat]) /
totalTime) *
100.0;
}
const denominator = 100.0 - getLeft(stat);
if (denominator !== 0) {
// Calculate relative percent (same as sql panel logic)
width = (100.0 * width) / denominator;
} else {
width = 0;
}
return width < 1 ? "2px" : width + "%";
}
function addRow(tbody, stat, endStat) {
const row = document.createElement("tr");
if (endStat) {
// Render a start through end bar
row.innerHTML =
"<td>" +
stat.replace("Start", "") +
"</td>" +
'<td><svg class="djDebugLineChart" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 5" preserveAspectRatio="none"><rect y="0" height="5" fill="#ccc" /></svg></td>' +
"<td>" +
(performance.timing[stat] - timingOffset) +
" (+" +
(performance.timing[endStat] - performance.timing[stat]) +
")</td>";
row.querySelector("rect").setAttribute(
"width",
getCSSWidth(stat, endStat)
);
} else {
// Render a point in time
row.innerHTML =
"<td>" +
stat +
"</td>" +
'<td><svg class="djDebugLineChart" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 5" preserveAspectRatio="none"><rect y="0" height="5" fill="#ccc" /></svg></td>' +
"<td>" +
(performance.timing[stat] - timingOffset) +
"</td>";
row.querySelector("rect").setAttribute("width", 2);
}
row.querySelector("rect").setAttribute("x", getLeft(stat));
tbody.appendChild(row);
}
const browserTiming = document.getElementById("djDebugBrowserTiming");
// Determine if the browser timing section has already been rendered.
if (browserTiming.classList.contains("djdt-hidden")) {
const tbody = document.getElementById("djDebugBrowserTimingTableBody");
// This is a reasonably complete and ordered set of timing periods (2 params) and events (1 param)
addRow(tbody, "domainLookupStart", "domainLookupEnd");
addRow(tbody, "connectStart", "connectEnd");
addRow(tbody, "requestStart", "responseEnd"); // There is no requestEnd
addRow(tbody, "responseStart", "responseEnd");
addRow(tbody, "domLoading", "domComplete"); // Spans the events below
addRow(tbody, "domInteractive");
addRow(tbody, "domContentLoadedEventStart", "domContentLoadedEventEnd");
addRow(tbody, "loadEventStart", "loadEventEnd");
browserTiming.classList.remove("djdt-hidden");
}
}
const djDebug = document.getElementById("djDebug");
// Insert the browser timing now since it's possible for this
// script to miss the initial panel load event.
insertBrowserTiming();
$$.onPanelRender(djDebug, "TimerPanel", insertBrowserTiming);