Move history panel specific JavaScript to its own file

.eslintrc.json

@@ -5,7 +5,8 @@
     },
     "extends": "eslint:recommended",
     "parserOptions": {
-        "ecmaVersion": 6
+        "ecmaVersion": 6,
+        "sourceType": "module"
     },
     "rules": {
         "curly": ["error", "all"],

debug_toolbar/panels/history/panel.py

@@ -5,6 +5,7 @@
 from django.conf import settings
 from django.http.request import RawPostDataException
 from django.template.loader import render_to_string
+from django.templatetags.static import static
 from django.urls import path
 from django.utils import timezone
 from django.utils.translation import gettext_lazy as _
@@ -94,3 +95,9 @@ def content(self):
                 ),
             },
         )
+
+    @property
+    def scripts(self):
+        scripts = super().scripts
+        scripts.append(static("debug_toolbar/js/history.js"))
+        return scripts

debug_toolbar/static/debug_toolbar/js/history.js

@@ -0,0 +1,44 @@
+import { $$, ajaxForm } 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");
+
+    tbody
+        .querySelector(".djdt-highlighted")
+        .classList.remove("djdt-highlighted");
+    this.closest("tr").classList.add("djdt-highlighted");
+
+    ajaxForm(this).then(function (data) {
+        djDebug.setAttribute("data-store-id", newStoreId);
+        Object.keys(data).forEach(function (panelId) {
+            if (djDebug.querySelector("#" + panelId)) {
+                djDebug.querySelector("#" + panelId).outerHTML =
+                    data[panelId].content;
+                djDebug.querySelector("#djdt-" + panelId).outerHTML =
+                    data[panelId].button;
+            }
+        });
+    });
+});
+
+$$.on(djDebug, "click", ".refreshHistory", function (event) {
+    event.preventDefault();
+    const container = djDebug.querySelector("#djdtHistoryRequests");
+    ajaxForm(this).then(function (data) {
+        if (data.requests.constructor === Array) {
+            data.requests.forEach(function (request) {
+                if (
+                    !container.querySelector(
+                        '[data-store-id="' + request.id + '"]'
+                    )
+                ) {
+                    container.innerHTML = request.content + container.innerHTML;
+                }
+            });
+        }
+    });
+});

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -1,77 +1,11 @@
-const $$ = {
-    on: function (root, eventName, selector, fn) {
-        root.addEventListener(eventName, function (event) {
-            const target = event.target.closest(selector);
-            if (root.contains(target)) {
-                fn.call(target, event);
-            }
-        });
-    },
-    show: function (element) {
-        element.classList.remove("djdt-hidden");
-    },
-    hide: function (element) {
-        element.classList.add("djdt-hidden");
-    },
-    toggle: function (element, value) {
-        if (value) {
-            $$.show(element);
-        } else {
-            $$.hide(element);
-        }
-    },
-    visible: function (element) {
-        element.classList.contains("djdt-hidden");
-    },
-    executeScripts: function (scripts) {
-        scripts.forEach(function (script) {
-            const el = document.createElement("script");
-            el.type = "module";
-            el.src = script;
-            el.async = true;
-            document.head.appendChild(el);
-        });
-    },
-};
+import { $$, ajax } from "./utils.js";
 
 const onKeyDown = function (event) {
     if (event.keyCode === 27) {
         djdt.hide_one_level();
     }
 };
 
-const ajax = function (url, init) {
-    init = Object.assign({ credentials: "same-origin" }, init);
-    return fetch(url, init).then(function (response) {
-        if (response.ok) {
-            return response.json();
-        } else {
-            const win = document.querySelector("#djDebugWindow");
-            win.innerHTML =
-                '<div class="djDebugPanelTitle"><a class="djDebugClose" href="">»</a><h3>' +
-                response.status +
-                ": " +
-                response.statusText +
-                "</h3></div>";
-            $$.show(win);
-            return Promise.reject();
-        }
-    });
-};
-
-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);
-}
-
 const djdt = {
     handleDragged: false,
     init: function () {
@@ -157,50 +91,6 @@ const djdt = {
             });
         });
 
-        // Used by the history panel
-        $$.on(djDebug, "click", ".switchHistory", function (event) {
-            event.preventDefault();
-            const newStoreId = this.dataset.storeId;
-            const tbody = this.closest("tbody");
-
-            tbody
-                .querySelector(".djdt-highlighted")
-                .classList.remove("djdt-highlighted");
-            this.closest("tr").classList.add("djdt-highlighted");
-
-            ajaxForm(this).then(function (data) {
-                djDebug.setAttribute("data-store-id", newStoreId);
-                Object.keys(data).forEach(function (panelId) {
-                    if (djDebug.querySelector("#" + panelId)) {
-                        djDebug.querySelector("#" + panelId).outerHTML =
-                            data[panelId].content;
-                        djDebug.querySelector("#djdt-" + panelId).outerHTML =
-                            data[panelId].button;
-                    }
-                });
-            });
-        });
-
-        // Used by the history panel
-        $$.on(djDebug, "click", ".refreshHistory", function (event) {
-            event.preventDefault();
-            const container = djDebug.querySelector("#djdtHistoryRequests");
-            ajaxForm(this).then(function (data) {
-                if (data.requests.constructor === Array) {
-                    data.requests.forEach(function (request) {
-                        if (
-                            !container.querySelector(
-                                '[data-store-id="' + request.id + '"]'
-                            )
-                        ) {
-                            container.innerHTML =
-                                request.content + container.innerHTML;
-                        }
-                    });
-                }
-            });
-        });
-
         // Used by the cache, profiling and SQL panels
         $$.on(djDebug, "click", "a.djToggleSwitch", function (event) {
             event.preventDefault();

debug_toolbar/static/debug_toolbar/js/utils.js

@@ -0,0 +1,69 @@
+const $$ = {
+    on: function (root, eventName, selector, fn) {
+        root.addEventListener(eventName, function (event) {
+            const target = event.target.closest(selector);
+            if (root.contains(target)) {
+                fn.call(target, event);
+            }
+        });
+    },
+    show: function (element) {
+        element.classList.remove("djdt-hidden");
+    },
+    hide: function (element) {
+        element.classList.add("djdt-hidden");
+    },
+    toggle: function (element, value) {
+        if (value) {
+            $$.show(element);
+        } else {
+            $$.hide(element);
+        }
+    },
+    visible: function (element) {
+        element.classList.contains("djdt-hidden");
+    },
+    executeScripts: function (scripts) {
+        scripts.forEach(function (script) {
+            const el = document.createElement("script");
+            el.type = "module";
+            el.src = script;
+            el.async = true;
+            document.head.appendChild(el);
+        });
+    },
+};
+
+function ajax(url, init) {
+    init = Object.assign({ credentials: "same-origin" }, init);
+    return fetch(url, init).then(function (response) {
+        if (response.ok) {
+            return response.json();
+        } else {
+            const win = document.querySelector("#djDebugWindow");
+            win.innerHTML =
+                '<div class="djDebugPanelTitle"><a class="djDebugClose" href="">»</a><h3>' +
+                response.status +
+                ": " +
+                response.statusText +
+                "</h3></div>";
+            $$.show(win);
+            return Promise.reject();
+        }
+    });
+}
+
+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);
+}
+
+export { $$, ajax, ajaxForm };