Skip to content

Commit 049aff0

Browse files
mongkokmongkok
committed
Added JS code formatter
1 parent e47eb93 commit 049aff0

5 files changed

Lines changed: 475 additions & 526 deletions

File tree

‎.prettierrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"printWidth": 120
3+
}

‎debug_toolbar/statics/js/timer.js‎

Lines changed: 64 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,73 @@
11
import { $$ } from "./utils.js";
22

33
function insertBrowserTiming() {
4-
const timing = performance.timing,
5-
timingOffset = timing.navigationStart,
6-
totalTime = timing.loadEventEnd - timingOffset;
4+
const timing = performance.timing,
5+
timingOffset = timing.navigationStart,
6+
totalTime = timing.loadEventEnd - timingOffset;
77

8-
function getLeft(stat) {
9-
return ((timing[stat] - timingOffset) / totalTime) * 100.0;
10-
}
11-
function getCSSWidth(stat, endStat) {
12-
let width = ((timing[endStat] - timing[stat]) / totalTime) * 100.0;
13-
// Calculate relative percent
14-
width = (100.0 * width) / (100.0 - getLeft(stat));
15-
return width < 1 ? "2px" : `${width||0}%`;
16-
}
17-
function addRow(tbody, stat, endStat) {
18-
const row = document.createElement("tr");
19-
if (endStat) {
20-
// Render a start through end bar
21-
row.innerHTML = `
22-
<td>${stat.replace("Start", "")}</td>
23-
<td>
24-
<svg class="fastDebugLineChart"
25-
xmlns="http://www.w3.org/2000/svg"
26-
viewbox="0 0 100 5"
27-
preserveAspectRatio="none">
28-
<rect y="0" height="5" fill="#ccc" />
29-
</svg>
30-
</td>
31-
<td>
32-
${timing[stat] - timingOffset}
33-
(${timing[endStat] - timing[stat]})
34-
</td>`;
35-
row.querySelector("rect")
36-
.setAttribute("width", getCSSWidth(stat, endStat));
37-
} else {
38-
// Render a point in time
39-
row.innerHTML = `
40-
<td>${stat}</td>
41-
<td>
42-
<svg class="fastDebugLineChart"
43-
xmlns="http://www.w3.org/2000/svg"
44-
viewbox="0 0 100 5"
45-
preserveAspectRatio="none">
46-
<rect y="0" height="5" fill="#ccc" />
47-
</svg>
48-
</td>
49-
<td>${timing[stat] - timingOffset}</td>`;
50-
row.querySelector("rect").setAttribute("width", 2);
51-
}
52-
row.querySelector("rect").setAttribute("x", getLeft(stat));
53-
tbody.appendChild(row);
8+
function getLeft(stat) {
9+
return ((timing[stat] - timingOffset) / totalTime) * 100.0;
10+
}
11+
function getCSSWidth(stat, endStat) {
12+
let width = ((timing[endStat] - timing[stat]) / totalTime) * 100.0;
13+
// Calculate relative percent
14+
width = (100.0 * width) / (100.0 - getLeft(stat));
15+
return width < 1 ? "2px" : `${width || 0}%`;
16+
}
17+
function addRow(tbody, stat, endStat) {
18+
const row = document.createElement("tr");
19+
if (endStat) {
20+
// Render a start through end bar
21+
row.innerHTML = `
22+
<td>${stat.replace("Start", "")}</td>
23+
<td>
24+
<svg class="fastDebugLineChart"
25+
xmlns="http://www.w3.org/2000/svg"
26+
viewbox="0 0 100 5"
27+
preserveAspectRatio="none">
28+
<rect y="0" height="5" fill="#ccc" />
29+
</svg>
30+
</td>
31+
<td>
32+
${timing[stat] - timingOffset}
33+
(${timing[endStat] - timing[stat]})
34+
</td>`;
35+
row.querySelector("rect").setAttribute("width", getCSSWidth(stat, endStat));
36+
} else {
37+
// Render a point in time
38+
row.innerHTML = `
39+
<td>${stat}</td>
40+
<td>
41+
<svg class="fastDebugLineChart"
42+
xmlns="http://www.w3.org/2000/svg"
43+
viewbox="0 0 100 5"
44+
preserveAspectRatio="none">
45+
<rect y="0" height="5" fill="#ccc" />
46+
</svg>
47+
</td>
48+
<td>${timing[stat] - timingOffset}</td>`;
49+
row.querySelector("rect").setAttribute("width", 2);
5450
}
51+
row.querySelector("rect").setAttribute("x", getLeft(stat));
52+
tbody.appendChild(row);
53+
}
5554

56-
const browserTiming = document.getElementById("fastDebugBrowserTiming");
57-
// Determine if the browser timing section has already been rendered.
58-
if (browserTiming.classList.contains("fastdt-hidden")) {
59-
const tbody = document.getElementById("fastDebugBrowserTimingTableBody");
60-
// This is a reasonably complete and ordered set of
61-
// timing periods (2 params) and events (1 param)
62-
addRow(tbody, "domainLookupStart", "domainLookupEnd");
63-
addRow(tbody, "connectStart", "connectEnd");
64-
addRow(tbody, "requestStart", "responseEnd"); // There is no requestEnd
65-
addRow(tbody, "responseStart", "responseEnd");
66-
addRow(tbody, "domLoading", "domComplete"); // Spans the events below
67-
addRow(tbody, "domInteractive");
68-
addRow(tbody, "domContentLoadedEventStart", "domContentLoadedEventEnd");
69-
addRow(tbody, "loadEventStart", "loadEventEnd");
70-
browserTiming.classList.remove("fastdt-hidden");
71-
}
55+
const browserTiming = document.getElementById("fastDebugBrowserTiming");
56+
// Determine if the browser timing section has already been rendered.
57+
if (browserTiming.classList.contains("fastdt-hidden")) {
58+
const tbody = document.getElementById("fastDebugBrowserTimingTableBody");
59+
// This is a reasonably complete and ordered set of
60+
// timing periods (2 params) and events (1 param)
61+
addRow(tbody, "domainLookupStart", "domainLookupEnd");
62+
addRow(tbody, "connectStart", "connectEnd");
63+
addRow(tbody, "requestStart", "responseEnd"); // There is no requestEnd
64+
addRow(tbody, "responseStart", "responseEnd");
65+
addRow(tbody, "domLoading", "domComplete"); // Spans the events below
66+
addRow(tbody, "domInteractive");
67+
addRow(tbody, "domContentLoadedEventStart", "domContentLoadedEventEnd");
68+
addRow(tbody, "loadEventStart", "loadEventEnd");
69+
browserTiming.classList.remove("fastdt-hidden");
70+
}
7271
}
7372

7473
const fastDebug = document.getElementById("fastDebug");

0 commit comments

Comments
 (0)