numerous updates

static/debug_toolbar/css/toolbar.css

@@ -607,6 +607,18 @@
 #djDebug .djdt-highlighted {
     background-color: lightgrey;
 }
+@keyframes djdt-flash-new {
+    from {
+        background-color: green;
+    }
+    to {
+        background-color: inherit;
+    }
+}
+#djDebug .flash-new {
+    animation: djdt-flash-new 1s;
+}
+
 .djdt-hidden {
     display: none;
 }

static/debug_toolbar/js/history.js

@@ -1,51 +1,106 @@
-import { $$, ajaxForm } from "./utils.js";
+import { $$, ajaxForm, replaceToolbarState } from "./utils.js";
 
 const djDebug = document.getElementById("djDebug");
 
-$$.on(djDebug, "click", ".switchHistory", function (event) {
-    event.preventDefault();
-    const newStoreId = this.dataset.storeId;
-    const tbody = this.closest("tbody");
+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");
     }
-    this.closest("tr").classList.add("djdt-highlighted");
+    formTarget.closest("tr").classList.add("djdt-highlighted");
 
-    ajaxForm(this).then(function (data) {
-        djDebug.setAttribute("data-store-id", newStoreId);
-        // Check if response is empty, it could be due to an expired store_id.
+    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]";
-        } else {
-            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;
-                }
-            });
         }
+        replaceToolbarState(newStoreId, data);
     });
+}
+
+$$.on(djDebug, "click", ".switchHistory", function (event) {
+    event.preventDefault();
+    switchHistory(this.dataset.storeId);
 });
 
 $$.on(djDebug, "click", ".refreshHistory", function (event) {
     event.preventDefault();
-    const container = document.getElementById("djdtHistoryRequests");
-    ajaxForm(this).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;
-        });
-    });
+    refreshHistory();
 });

static/debug_toolbar/js/toolbar.js

@@ -1,4 +1,4 @@
-import { $$, ajax } from "./utils.js";
+import { $$, ajax, replaceToolbarState, debounce } from "./utils.js";
 
 function onKeyDown(event) {
     if (event.keyCode === 27) {
@@ -200,6 +200,9 @@ const djdt = {
         } else {
             djdt.hide_toolbar();
         }
+        if (djDebug.dataset.sidebarUrl !== undefined) {
+            djdt.update_on_ajax();
+        }
     },
     hide_panels() {
         const djDebug = document.getElementById("djDebug");
@@ -253,6 +256,26 @@ const djdt = {
         localStorage.setItem("djdt.show", "true");
         window.removeEventListener("resize", djdt.ensure_handle_visibility);
     },
+    update_on_ajax() {
+        const sidebar_url =
+            document.getElementById("djDebug").dataset.sidebarUrl;
+        const slowjax = debounce(ajax, 200);
+
+        const origOpen = XMLHttpRequest.prototype.open;
+        XMLHttpRequest.prototype.open = function () {
+            this.addEventListener("load", function () {
+                let store_id = this.getResponseHeader("djdt-store-id");
+                if (store_id !== null) {
+                    store_id = encodeURIComponent(store_id);
+                    const dest = `${sidebar_url}?store_id=${store_id}`;
+                    slowjax(dest).then(function (data) {
+                        replaceToolbarState(store_id, data);
+                    });
+                }
+            });
+            origOpen.apply(this, arguments);
+        };
+    },
     cookie: {
         get(key) {
             if (!document.cookie.includes(key)) {

static/debug_toolbar/js/utils.js

@@ -104,4 +104,34 @@ function ajaxForm(element) {
     return ajax(url, ajaxData);
 }
 
-export { $$, ajax, ajaxForm };
+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 store_id.
+    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 };