diff --git a/.eslintrc.json b/.eslintrc.json
index bc8e41752..8a2452b7a 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -5,7 +5,8 @@
},
"extends": "eslint:recommended",
"parserOptions": {
- "ecmaVersion": 6
+ "ecmaVersion": 6,
+ "sourceType": "module"
},
"rules": {
"curly": ["error", "all"],
diff --git a/debug_toolbar/panels/history/panel.py b/debug_toolbar/panels/history/panel.py
index 082a14f70..64c985b84 100644
--- a/debug_toolbar/panels/history/panel.py
+++ b/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
diff --git a/debug_toolbar/static/debug_toolbar/js/history.js b/debug_toolbar/static/debug_toolbar/js/history.js
new file mode 100644
index 000000000..7764ed0a1
--- /dev/null
+++ b/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;
+ }
+ });
+ }
+ });
+});
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 5e1084848..0ea321be6 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -1,38 +1,4 @@
-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) {
@@ -40,38 +6,6 @@ const onKeyDown = function (event) {
}
};
-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 =
- '»' +
- response.status +
- ": " +
- response.statusText +
- "
";
- $$.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();
diff --git a/debug_toolbar/static/debug_toolbar/js/utils.js b/debug_toolbar/static/debug_toolbar/js/utils.js
new file mode 100644
index 000000000..b6078d250
--- /dev/null
+++ b/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 =
+ '»' +
+ response.status +
+ ": " +
+ response.statusText +
+ "
";
+ $$.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 };