Add JavaScript functionality for dynamic UI updates and filtering

- 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.

staticfiles/debug_toolbar/js/timer.js

@@ -0,0 +1,82 @@
+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);