mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 07:11:08 -05:00
bead0654df
- Implemented font color configuration based on numeric values in various sections. - Added resizing functionality for input fields to accommodate text length. - Initialized filters on document ready for improved user interaction. - Created visualization for profile data using fetched dot format. - Enhanced SQL detail page with click event handling for row navigation. - Ensured consistent highlighting for code blocks across multiple pages.
83 lines
3.3 KiB
JavaScript
83 lines
3.3 KiB
JavaScript
import { $$ } from "./utils.js";
|
|
|
|
function insertBrowserTiming() {
|
|
const timingOffset = performance.timing.navigationStart;
|
|
const timingEnd = performance.timing.loadEventEnd;
|
|
const totalTime = timingEnd - timingOffset;
|
|
function getLeft(stat) {
|
|
if (totalTime !== 0) {
|
|
return (
|
|
((performance.timing[stat] - timingOffset) / totalTime) * 100.0
|
|
);
|
|
}
|
|
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");
|
|
const elapsed = performance.timing[stat] - timingOffset;
|
|
if (endStat) {
|
|
const duration =
|
|
performance.timing[endStat] - performance.timing[stat];
|
|
// 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>${elapsed} (+${duration})</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>${elapsed}</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);
|