wip

static/debug_toolbar/js/history.js

@@ -0,0 +1,106 @@
+import { $$, ajaxForm, replaceToolbarState } from "./utils.js";
+
+const djDebug = document.getElementById("djDebug");
+
+function difference(setA, setB) {
+    const _difference = new Set(setA);
+    for (const elem of setB) {
+        _difference.delete(elem);
+    }
+    return _difference;
+}
+
+/**
+ * Create an array of dataset properties from a NodeList.
+ */
+function pluckData(nodes, key) {
+    const data = [];
+    nodes.forEach(function (obj) {
+        data.push(obj.dataset[key]);
+    });
+    return data;
+}
+
+function refreshHistory() {
+    const formTarget = djDebug.querySelector(".refreshHistory");
+    const container = document.getElementById("djdtHistoryRequests");
+    const oldIds = new Set(
+        pluckData(container.querySelectorAll("tr[data-store-id]"), "storeId")
+    );
+
+    ajaxForm(formTarget)
+        .then(function (data) {
+            // Remove existing rows first then re-populate with new data
+            container
+                .querySelectorAll("tr[data-store-id]")
+                .forEach(function (node) {
+                    node.remove();
+                });
+            data.requests.forEach(function (request) {
+                container.innerHTML = request.content + container.innerHTML;
+            });
+        })
+        .then(function () {
+            const allIds = new Set(
+                pluckData(
+                    container.querySelectorAll("tr[data-store-id]"),
+                    "storeId"
+                )
+            );
+            const newIds = difference(allIds, oldIds);
+            const lastRequestId = newIds.values().next().value;
+            return {
+                allIds,
+                newIds,
+                lastRequestId,
+            };
+        })
+        .then(function (refreshInfo) {
+            refreshInfo.newIds.forEach(function (newId) {
+                const row = container.querySelector(
+                    `tr[data-store-id="${newId}"]`
+                );
+                row.classList.add("flash-new");
+            });
+            setTimeout(() => {
+                container
+                    .querySelectorAll("tr[data-store-id]")
+                    .forEach((row) => {
+                        row.classList.remove("flash-new");
+                    });
+            }, 2000);
+        });
+}
+
+function switchHistory(newStoreId) {
+    const formTarget = djDebug.querySelector(
+        ".switchHistory[data-store-id='" + newStoreId + "']"
+    );
+    const tbody = formTarget.closest("tbody");
+
+    const highlighted = tbody.querySelector(".djdt-highlighted");
+    if (highlighted) {
+        highlighted.classList.remove("djdt-highlighted");
+    }
+    formTarget.closest("tr").classList.add("djdt-highlighted");
+
+    ajaxForm(formTarget).then(function (data) {
+        if (Object.keys(data).length === 0) {
+            const container = document.getElementById("djdtHistoryRequests");
+            container.querySelector(
+                'button[data-store-id="' + newStoreId + '"]'
+            ).innerHTML = "Switch [EXPIRED]";
+        }
+        replaceToolbarState(newStoreId, data);
+    });
+}
+
+$$.on(djDebug, "click", ".switchHistory", function (event) {
+    event.preventDefault();
+    switchHistory(this.dataset.storeId);
+});
+
+$$.on(djDebug, "click", ".refreshHistory", function (event) {
+    event.preventDefault();
+    refreshHistory();
+});

static/debug_toolbar/js/redirect.js

@@ -0,0 +1 @@
+document.getElementById("redirect_to").focus();

static/debug_toolbar/js/timer.js

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

static/debug_toolbar/js/toolbar.js

@@ -0,0 +1,365 @@
+import { $$, ajax, replaceToolbarState, debounce } from "./utils.js";
+
+function onKeyDown(event) {
+    if (event.keyCode === 27) {
+        djdt.hideOneLevel();
+    }
+}
+
+function getDebugElement() {
+    // Fetch the debug element from the DOM.
+    // This is used to avoid writing the element's id
+    // everywhere the element is being selected. A fixed reference
+    // to the element should be avoided because the entire DOM could
+    // be reloaded such as via HTMX boosting.
+    return document.getElementById("djDebug");
+}
+
+const djdt = {
+    handleDragged: false,
+    init() {
+        const djDebug = getDebugElement();
+        $$.on(djDebug, "click", "#djDebugPanelList li a", function (event) {
+            event.preventDefault();
+            if (!this.className) {
+                return;
+            }
+            const panelId = this.className;
+            const current = document.getElementById(panelId);
+            if ($$.visible(current)) {
+                djdt.hidePanels();
+            } else {
+                djdt.hidePanels();
+
+                $$.show(current);
+                this.parentElement.classList.add("djdt-active");
+
+                const inner = current.querySelector(
+                        ".djDebugPanelContent .djdt-scroll"
+                    ),
+                    storeId = djDebug.dataset.storeId;
+                if (storeId && inner.children.length === 0) {
+                    const url = new URL(
+                        djDebug.dataset.renderPanelUrl,
+                        window.location
+                    );
+                    url.searchParams.append("store_id", storeId);
+                    url.searchParams.append("panel_id", panelId);
+                    ajax(url).then(function (data) {
+                        inner.previousElementSibling.remove(); // Remove AJAX loader
+                        inner.innerHTML = data.content;
+                        $$.executeScripts(data.scripts);
+                        $$.applyStyles(inner);
+                        djDebug.dispatchEvent(
+                            new CustomEvent("djdt.panel.render", {
+                                detail: { panelId: panelId },
+                            })
+                        );
+                    });
+                } else {
+                    djDebug.dispatchEvent(
+                        new CustomEvent("djdt.panel.render", {
+                            detail: { panelId: panelId },
+                        })
+                    );
+                }
+            }
+        });
+        $$.on(djDebug, "click", ".djDebugClose", function () {
+            djdt.hideOneLevel();
+        });
+        $$.on(
+            djDebug,
+            "click",
+            ".djDebugPanelButton input[type=checkbox]",
+            function () {
+                djdt.cookie.set(
+                    this.dataset.cookie,
+                    this.checked ? "on" : "off",
+                    {
+                        path: "/",
+                        expires: 10,
+                    }
+                );
+            }
+        );
+
+        // Used by the SQL and template panels
+        $$.on(djDebug, "click", ".remoteCall", function (event) {
+            event.preventDefault();
+
+            let url;
+            const ajaxData = {};
+
+            if (this.tagName === "BUTTON") {
+                const form = this.closest("form");
+                url = this.formAction;
+                ajaxData.method = form.method.toUpperCase();
+                ajaxData.body = new FormData(form);
+            } else if (this.tagName === "A") {
+                url = this.href;
+            }
+
+            ajax(url, ajaxData).then(function (data) {
+                const win = document.getElementById("djDebugWindow");
+                win.innerHTML = data.content;
+                $$.show(win);
+            });
+        });
+
+        // Used by the cache, profiling and SQL panels
+        $$.on(djDebug, "click", ".djToggleSwitch", function () {
+            const id = this.dataset.toggleId;
+            const toggleOpen = "+";
+            const toggleClose = "-";
+            const openMe = this.textContent === toggleOpen;
+            const name = this.dataset.toggleName;
+            const container = document.getElementById(name + "_" + id);
+            container
+                .querySelectorAll(".djDebugCollapsed")
+                .forEach(function (e) {
+                    $$.toggle(e, openMe);
+                });
+            container
+                .querySelectorAll(".djDebugUncollapsed")
+                .forEach(function (e) {
+                    $$.toggle(e, !openMe);
+                });
+            const self = this;
+            this.closest(".djDebugPanelContent")
+                .querySelectorAll(".djToggleDetails_" + id)
+                .forEach(function (e) {
+                    if (openMe) {
+                        e.classList.add("djSelected");
+                        e.classList.remove("djUnselected");
+                        self.textContent = toggleClose;
+                    } else {
+                        e.classList.remove("djSelected");
+                        e.classList.add("djUnselected");
+                        self.textContent = toggleOpen;
+                    }
+                    const switch_ = e.querySelector(".djToggleSwitch");
+                    if (switch_) {
+                        switch_.textContent = self.textContent;
+                    }
+                });
+        });
+
+        $$.on(djDebug, "click", "#djHideToolBarButton", function (event) {
+            event.preventDefault();
+            djdt.hideToolbar();
+        });
+
+        $$.on(djDebug, "click", "#djShowToolBarButton", function () {
+            if (!djdt.handleDragged) {
+                djdt.showToolbar();
+            }
+        });
+        let startPageY, baseY;
+        const handle = document.getElementById("djDebugToolbarHandle");
+        function onHandleMove(event) {
+            // Chrome can send spurious mousemove events, so don't do anything unless the
+            // cursor really moved.  Otherwise, it will be impossible to expand the toolbar
+            // due to djdt.handleDragged being set to true.
+            if (djdt.handleDragged || event.pageY !== startPageY) {
+                let top = baseY + event.pageY;
+
+                if (top < 0) {
+                    top = 0;
+                } else if (top + handle.offsetHeight > window.innerHeight) {
+                    top = window.innerHeight - handle.offsetHeight;
+                }
+
+                handle.style.top = top + "px";
+                djdt.handleDragged = true;
+            }
+        }
+        $$.on(djDebug, "mousedown", "#djShowToolBarButton", function (event) {
+            event.preventDefault();
+            startPageY = event.pageY;
+            baseY = handle.offsetTop - startPageY;
+            document.addEventListener("mousemove", onHandleMove);
+
+            document.addEventListener(
+                "mouseup",
+                function (event) {
+                    document.removeEventListener("mousemove", onHandleMove);
+                    if (djdt.handleDragged) {
+                        event.preventDefault();
+                        localStorage.setItem("djdt.top", handle.offsetTop);
+                        requestAnimationFrame(function () {
+                            djdt.handleDragged = false;
+                        });
+                        djdt.ensureHandleVisibility();
+                    }
+                },
+                { once: true }
+            );
+        });
+
+        // Make sure the debug element is rendered at least once.
+        // showToolbar will continue to show it in the future if the
+        // entire DOM is reloaded.
+        $$.show(djDebug);
+        const show =
+            localStorage.getItem("djdt.show") || djDebug.dataset.defaultShow;
+        if (show === "true") {
+            djdt.showToolbar();
+        } else {
+            djdt.hideToolbar();
+        }
+        if (djDebug.dataset.sidebarUrl !== undefined) {
+            djdt.updateOnAjax();
+        }
+    },
+    hidePanels() {
+        const djDebug = getDebugElement();
+        $$.hide(document.getElementById("djDebugWindow"));
+        djDebug.querySelectorAll(".djdt-panelContent").forEach(function (e) {
+            $$.hide(e);
+        });
+        document.querySelectorAll("#djDebugToolbar li").forEach(function (e) {
+            e.classList.remove("djdt-active");
+        });
+    },
+    ensureHandleVisibility() {
+        const handle = document.getElementById("djDebugToolbarHandle");
+        // set handle position
+        const handleTop = Math.min(
+            localStorage.getItem("djdt.top") || 0,
+            window.innerHeight - handle.offsetWidth
+        );
+        handle.style.top = handleTop + "px";
+    },
+    hideToolbar() {
+        djdt.hidePanels();
+
+        $$.hide(document.getElementById("djDebugToolbar"));
+
+        const handle = document.getElementById("djDebugToolbarHandle");
+        $$.show(handle);
+        djdt.ensureHandleVisibility();
+        window.addEventListener("resize", djdt.ensureHandleVisibility);
+        document.removeEventListener("keydown", onKeyDown);
+
+        localStorage.setItem("djdt.show", "false");
+    },
+    hideOneLevel() {
+        const win = document.getElementById("djDebugWindow");
+        if ($$.visible(win)) {
+            $$.hide(win);
+        } else {
+            const toolbar = document.getElementById("djDebugToolbar");
+            if (toolbar.querySelector("li.djdt-active")) {
+                djdt.hidePanels();
+            } else {
+                djdt.hideToolbar();
+            }
+        }
+    },
+    showToolbar() {
+        document.addEventListener("keydown", onKeyDown);
+        $$.show(document.getElementById("djDebug"));
+        $$.hide(document.getElementById("djDebugToolbarHandle"));
+        $$.show(document.getElementById("djDebugToolbar"));
+        localStorage.setItem("djdt.show", "true");
+        window.removeEventListener("resize", djdt.ensureHandleVisibility);
+    },
+    updateOnAjax() {
+        const sidebarUrl =
+            document.getElementById("djDebug").dataset.sidebarUrl;
+        const slowjax = debounce(ajax, 200);
+
+        function handleAjaxResponse(storeId) {
+            storeId = encodeURIComponent(storeId);
+            const dest = `${sidebarUrl}?store_id=${storeId}`;
+            slowjax(dest).then(function (data) {
+                replaceToolbarState(storeId, data);
+            });
+        }
+
+        // Patch XHR / traditional AJAX requests
+        const origOpen = XMLHttpRequest.prototype.open;
+        XMLHttpRequest.prototype.open = function () {
+            this.addEventListener("load", function () {
+                // Chromium emits a "Refused to get unsafe header" uncatchable warning
+                // when the header can't be fetched. While it doesn't impede execution
+                // it's worrisome to developers.
+                if (
+                    this.getAllResponseHeaders().indexOf("djdt-store-id") >= 0
+                ) {
+                    handleAjaxResponse(this.getResponseHeader("djdt-store-id"));
+                }
+            });
+            origOpen.apply(this, arguments);
+        };
+
+        const origFetch = window.fetch;
+        window.fetch = function () {
+            const promise = origFetch.apply(this, arguments);
+            promise.then(function (response) {
+                if (response.headers.get("djdt-store-id") !== null) {
+                    handleAjaxResponse(response.headers.get("djdt-store-id"));
+                }
+                // Don't resolve the response via .json(). Instead
+                // continue to return it to allow the caller to consume as needed.
+                return response;
+            });
+            return promise;
+        };
+    },
+    cookie: {
+        get(key) {
+            if (!document.cookie.includes(key)) {
+                return null;
+            }
+
+            const cookieArray = document.cookie.split("; "),
+                cookies = {};
+
+            cookieArray.forEach(function (e) {
+                const parts = e.split("=");
+                cookies[parts[0]] = parts[1];
+            });
+
+            return cookies[key];
+        },
+        set(key, value, options) {
+            options = options || {};
+
+            if (typeof options.expires === "number") {
+                const days = options.expires,
+                    t = (options.expires = new Date());
+                t.setDate(t.getDate() + days);
+            }
+
+            document.cookie = [
+                encodeURIComponent(key) + "=" + String(value),
+                options.expires
+                    ? "; expires=" + options.expires.toUTCString()
+                    : "",
+                options.path ? "; path=" + options.path : "",
+                options.domain ? "; domain=" + options.domain : "",
+                options.secure ? "; secure" : "",
+                "sameSite" in options
+                    ? "; sameSite=" + options.samesite
+                    : "; sameSite=Lax",
+            ].join("");
+
+            return value;
+        },
+    },
+};
+window.djdt = {
+    show_toolbar: djdt.showToolbar,
+    hide_toolbar: djdt.hideToolbar,
+    init: djdt.init,
+    close: djdt.hideOneLevel,
+    cookie: djdt.cookie,
+};
+
+if (document.readyState !== "loading") {
+    djdt.init();
+} else {
+    document.addEventListener("DOMContentLoaded", djdt.init);
+}

static/debug_toolbar/js/utils.js

@@ -0,0 +1,138 @@
+const $$ = {
+    on(root, eventName, selector, fn) {
+        root.removeEventListener(eventName, fn);
+        root.addEventListener(eventName, function (event) {
+            const target = event.target.closest(selector);
+            if (root.contains(target)) {
+                fn.call(target, event);
+            }
+        });
+    },
+    onPanelRender(root, panelId, fn) {
+        /*
+        This is a helper function to attach a handler for a `djdt.panel.render`
+        event of a specific panel.
+
+        root: The container element that the listener should be attached to.
+        panelId: The Id of the panel.
+        fn: A function to execute when the event is triggered.
+         */
+        root.addEventListener("djdt.panel.render", function (event) {
+            if (event.detail.panelId === panelId) {
+                fn.call(event);
+            }
+        });
+    },
+    show(element) {
+        element.classList.remove("djdt-hidden");
+    },
+    hide(element) {
+        element.classList.add("djdt-hidden");
+    },
+    toggle(element, value) {
+        if (value) {
+            $$.show(element);
+        } else {
+            $$.hide(element);
+        }
+    },
+    visible(element) {
+        return !element.classList.contains("djdt-hidden");
+    },
+    executeScripts(scripts) {
+        scripts.forEach(function (script) {
+            const el = document.createElement("script");
+            el.type = "module";
+            el.src = script;
+            el.async = true;
+            document.head.appendChild(el);
+        });
+    },
+    applyStyles(container) {
+        /*
+         * Given a container element, apply styles set via data-djdt-styles attribute.
+         * The format is data-djdt-styles="styleName1:value;styleName2:value2"
+         * The style names should use the CSSStyleDeclaration camel cased names.
+         */
+        container
+            .querySelectorAll("[data-djdt-styles]")
+            .forEach(function (element) {
+                const styles = element.dataset.djdtStyles || "";
+                styles.split(";").forEach(function (styleText) {
+                    const styleKeyPair = styleText.split(":");
+                    if (styleKeyPair.length === 2) {
+                        const name = styleKeyPair[0].trim();
+                        const value = styleKeyPair[1].trim();
+                        element.style[name] = value;
+                    }
+                });
+            });
+    },
+};
+
+function ajax(url, init) {
+    init = Object.assign({ credentials: "same-origin" }, init);
+    return fetch(url, init)
+        .then(function (response) {
+            if (response.ok) {
+                return response.json();
+            }
+            return Promise.reject(
+                new Error(response.status + ": " + response.statusText)
+            );
+        })
+        .catch(function (error) {
+            const win = document.getElementById("djDebugWindow");
+            win.innerHTML =
+                '<div class="djDebugPanelTitle"><button type="button" class="djDebugClose">»</button><h3>' +
+                error.message +
+                "</h3></div>";
+            $$.show(win);
+            throw error;
+        });
+}
+
+function ajaxForm(element) {
+    const form = element.closest("form");
+    const url = new URL(form.action);
+    const formData = new FormData(form);
+    for (const [name, value] of formData.entries()) {
+        url.searchParams.append(name, value);
+    }
+    const ajaxData = {
+        method: form.method.toUpperCase(),
+    };
+    return ajax(url, ajaxData);
+}
+
+function replaceToolbarState(newStoreId, data) {
+    const djDebug = document.getElementById("djDebug");
+    djDebug.setAttribute("data-store-id", newStoreId);
+    // Check if response is empty, it could be due to an expired storeId.
+    Object.keys(data).forEach(function (panelId) {
+        const panel = document.getElementById(panelId);
+        if (panel) {
+            panel.outerHTML = data[panelId].content;
+            document.getElementById("djdt-" + panelId).outerHTML =
+                data[panelId].button;
+        }
+    });
+}
+
+function debounce(func, delay) {
+    let timer = null;
+    let resolves = [];
+
+    return function (...args) {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            const result = func(...args);
+            resolves.forEach((r) => r(result));
+            resolves = [];
+        }, delay);
+
+        return new Promise((r) => resolves.push(r));
+    };
+}
+
+export { $$, ajax, ajaxForm, replaceToolbarState, debounce };