diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 0811bb10b..e9317b643 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -27,6 +27,7 @@ repos:
rev: v1.9.4
hooks:
- id: biome-check
+ verbose: true
- repo: https://github.com/astral-sh/ruff-pre-commit
rev: 'v0.9.7'
hooks:
diff --git a/biome.json b/biome.json
index 139210ab2..b905286b3 100644
--- a/biome.json
+++ b/biome.json
@@ -12,18 +12,7 @@
"rules": {
"recommended": true,
"complexity": {
- "useArrowFunction": "off",
"noForEach": "off"
- },
- "style": {
- "noArguments": "off",
- "noParameterAssign": "off",
- "noUselessElse": "off",
- "useSingleVarDeclarator": "off",
- "useTemplate": "off"
- },
- "suspicious": {
- "noAssignInExpressions": "off"
}
}
},
diff --git a/debug_toolbar/static/debug_toolbar/js/history.js b/debug_toolbar/static/debug_toolbar/js/history.js
index 314ddb3ef..a0d339f2b 100644
--- a/debug_toolbar/static/debug_toolbar/js/history.js
+++ b/debug_toolbar/static/debug_toolbar/js/history.js
@@ -15,7 +15,7 @@ function difference(setA, setB) {
*/
function pluckData(nodes, key) {
const data = [];
- nodes.forEach(function (obj) {
+ nodes.forEach((obj) => {
data.push(obj.dataset[key]);
});
return data;
@@ -29,18 +29,16 @@ function refreshHistory() {
);
ajaxForm(formTarget)
- .then(function (data) {
+ .then((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.querySelectorAll("tr[data-store-id]").forEach((node) => {
+ node.remove();
+ });
+ data.requests.forEach((request) => {
container.innerHTML = request.content + container.innerHTML;
});
})
- .then(function () {
+ .then(() => {
const allIds = new Set(
pluckData(
container.querySelectorAll("tr[data-store-id]"),
@@ -55,8 +53,8 @@ function refreshHistory() {
lastRequestId,
};
})
- .then(function (refreshInfo) {
- refreshInfo.newIds.forEach(function (newId) {
+ .then((refreshInfo) => {
+ refreshInfo.newIds.forEach((newId) => {
const row = container.querySelector(
`tr[data-store-id="${newId}"]`
);
@@ -74,7 +72,7 @@ function refreshHistory() {
function switchHistory(newStoreId) {
const formTarget = djDebug.querySelector(
- ".switchHistory[data-store-id='" + newStoreId + "']"
+ `.switchHistory[data-store-id='${newStoreId}']`
);
const tbody = formTarget.closest("tbody");
@@ -84,11 +82,11 @@ function switchHistory(newStoreId) {
}
formTarget.closest("tr").classList.add("djdt-highlighted");
- ajaxForm(formTarget).then(function (data) {
+ ajaxForm(formTarget).then((data) => {
if (Object.keys(data).length === 0) {
const container = document.getElementById("djdtHistoryRequests");
container.querySelector(
- 'button[data-store-id="' + newStoreId + '"]'
+ `button[data-store-id="${newStoreId}"]`
).innerHTML = "Switch [EXPIRED]";
}
replaceToolbarState(newStoreId, data);
@@ -100,7 +98,7 @@ $$.on(djDebug, "click", ".switchHistory", function (event) {
switchHistory(this.dataset.storeId);
});
-$$.on(djDebug, "click", ".refreshHistory", function (event) {
+$$.on(djDebug, "click", ".refreshHistory", (event) => {
event.preventDefault();
refreshHistory();
});
diff --git a/debug_toolbar/static/debug_toolbar/js/timer.js b/debug_toolbar/static/debug_toolbar/js/timer.js
index a88ab0d15..a01dbb2d1 100644
--- a/debug_toolbar/static/debug_toolbar/js/timer.js
+++ b/debug_toolbar/static/debug_toolbar/js/timer.js
@@ -1,17 +1,16 @@
import { $$ } from "./utils.js";
function insertBrowserTiming() {
- const timingOffset = performance.timing.navigationStart,
- timingEnd = performance.timing.loadEventEnd,
- totalTime = timingEnd - timingOffset;
+ 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
);
- } else {
- return 0;
}
+ return 0;
}
function getCSSWidth(stat, endStat) {
let width = 0;
@@ -28,36 +27,31 @@ function insertBrowserTiming() {
} else {
width = 0;
}
- return width < 1 ? "2px" : width + "%";
+ 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 =
- "| " +
- stat.replace("Start", "") +
- " | " +
- ' | ' +
- "" +
- (performance.timing[stat] - timingOffset) +
- " (+" +
- (performance.timing[endStat] - performance.timing[stat]) +
- ") | ";
+ row.innerHTML = `
+${stat.replace("Start", "")} |
+ |
+${elapsed} (+${duration}) |
+`;
row.querySelector("rect").setAttribute(
"width",
getCSSWidth(stat, endStat)
);
} else {
// Render a point in time
- row.innerHTML =
- "" +
- stat +
- " | " +
- ' | ' +
- "" +
- (performance.timing[stat] - timingOffset) +
- " | ";
+ row.innerHTML = `
+${stat} |
+ |
+${elapsed} |
+`;
row.querySelector("rect").setAttribute("width", 2);
}
row.querySelector("rect").setAttribute("x", getLeft(stat));
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 067b5a312..08f4fc75c 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -37,9 +37,9 @@ const djdt = {
this.parentElement.classList.add("djdt-active");
const inner = current.querySelector(
- ".djDebugPanelContent .djdt-scroll"
- ),
- storeId = djDebug.dataset.storeId;
+ ".djDebugPanelContent .djdt-scroll"
+ );
+ const storeId = djDebug.dataset.storeId;
if (storeId && inner.children.length === 0) {
const url = new URL(
djDebug.dataset.renderPanelUrl,
@@ -47,7 +47,7 @@ const djdt = {
);
url.searchParams.append("store_id", storeId);
url.searchParams.append("panel_id", panelId);
- ajax(url).then(function (data) {
+ ajax(url).then((data) => {
inner.previousElementSibling.remove(); // Remove AJAX loader
inner.innerHTML = data.content;
$$.executeScripts(data.scripts);
@@ -67,7 +67,7 @@ const djdt = {
}
}
});
- $$.on(djDebug, "click", ".djDebugClose", function () {
+ $$.on(djDebug, "click", ".djDebugClose", () => {
djdt.hideOneLevel();
});
$$.on(
@@ -102,7 +102,7 @@ const djdt = {
url = this.href;
}
- ajax(url, ajaxData).then(function (data) {
+ ajax(url, ajaxData).then((data) => {
const win = document.getElementById("djDebugWindow");
win.innerHTML = data.content;
$$.show(win);
@@ -116,48 +116,44 @@ const djdt = {
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;
+ const container = document.getElementById(`${name}_${id}`);
+ container.querySelectorAll(".djDebugCollapsed").forEach((e) => {
+ $$.toggle(e, openMe);
+ });
+ container.querySelectorAll(".djDebugUncollapsed").forEach((e) => {
+ $$.toggle(e, !openMe);
+ });
this.closest(".djDebugPanelContent")
- .querySelectorAll(".djToggleDetails_" + id)
- .forEach(function (e) {
+ .querySelectorAll(`.djToggleDetails_${id}`)
+ .forEach((e) => {
if (openMe) {
e.classList.add("djSelected");
e.classList.remove("djUnselected");
- self.textContent = toggleClose;
+ this.textContent = toggleClose;
} else {
e.classList.remove("djSelected");
e.classList.add("djUnselected");
- self.textContent = toggleOpen;
+ this.textContent = toggleOpen;
}
const switch_ = e.querySelector(".djToggleSwitch");
if (switch_) {
- switch_.textContent = self.textContent;
+ switch_.textContent = this.textContent;
}
});
});
- $$.on(djDebug, "click", "#djHideToolBarButton", function (event) {
+ $$.on(djDebug, "click", "#djHideToolBarButton", (event) => {
event.preventDefault();
djdt.hideToolbar();
});
- $$.on(djDebug, "click", "#djShowToolBarButton", function () {
+ $$.on(djDebug, "click", "#djShowToolBarButton", () => {
if (!djdt.handleDragged) {
djdt.showToolbar();
}
});
- let startPageY, baseY;
+ let startPageY;
+ let baseY;
const handle = document.getElementById("djDebugToolbarHandle");
function onHandleMove(event) {
// Chrome can send spurious mousemove events, so don't do anything unless the
@@ -172,11 +168,11 @@ const djdt = {
top = window.innerHeight - handle.offsetHeight;
}
- handle.style.top = top + "px";
+ handle.style.top = `${top}px`;
djdt.handleDragged = true;
}
}
- $$.on(djDebug, "mousedown", "#djShowToolBarButton", function (event) {
+ $$.on(djDebug, "mousedown", "#djShowToolBarButton", (event) => {
event.preventDefault();
startPageY = event.pageY;
baseY = handle.offsetTop - startPageY;
@@ -184,12 +180,12 @@ const djdt = {
document.addEventListener(
"mouseup",
- function (event) {
+ (event) => {
document.removeEventListener("mousemove", onHandleMove);
if (djdt.handleDragged) {
event.preventDefault();
localStorage.setItem("djdt.top", handle.offsetTop);
- requestAnimationFrame(function () {
+ requestAnimationFrame(() => {
djdt.handleDragged = false;
});
djdt.ensureHandleVisibility();
@@ -220,7 +216,7 @@ const djdt = {
djDebug.setAttribute("data-theme", userTheme);
}
// Adds the listener to the Theme Toggle Button
- $$.on(djDebug, "click", "#djToggleThemeButton", function () {
+ $$.on(djDebug, "click", "#djToggleThemeButton", () => {
switch (djDebug.getAttribute("data-theme")) {
case "auto":
djDebug.setAttribute("data-theme", "light");
@@ -240,10 +236,10 @@ const djdt = {
hidePanels() {
const djDebug = getDebugElement();
$$.hide(document.getElementById("djDebugWindow"));
- djDebug.querySelectorAll(".djdt-panelContent").forEach(function (e) {
+ djDebug.querySelectorAll(".djdt-panelContent").forEach((e) => {
$$.hide(e);
});
- document.querySelectorAll("#djDebugToolbar li").forEach(function (e) {
+ document.querySelectorAll("#djDebugToolbar li").forEach((e) => {
e.classList.remove("djdt-active");
});
},
@@ -254,7 +250,7 @@ const djdt = {
localStorage.getItem("djdt.top") || 265,
window.innerHeight - handle.offsetWidth
);
- handle.style.top = handleTop + "px";
+ handle.style.top = `${handleTop}px`;
},
hideToolbar() {
djdt.hidePanels();
@@ -296,18 +292,18 @@ const djdt = {
const slowjax = debounce(ajax, 200);
function handleAjaxResponse(storeId) {
- storeId = encodeURIComponent(storeId);
- const dest = `${sidebarUrl}?store_id=${storeId}`;
- slowjax(dest).then(function (data) {
+ const encodedStoreId = encodeURIComponent(storeId);
+ const dest = `${sidebarUrl}?store_id=${encodedStoreId}`;
+ slowjax(dest).then((data) => {
if (djdt.needUpdateOnFetch) {
- replaceToolbarState(storeId, data);
+ replaceToolbarState(encodedStoreId, data);
}
});
}
// Patch XHR / traditional AJAX requests
const origOpen = XMLHttpRequest.prototype.open;
- XMLHttpRequest.prototype.open = function () {
+ XMLHttpRequest.prototype.open = function (...args) {
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
@@ -318,13 +314,13 @@ const djdt = {
handleAjaxResponse(this.getResponseHeader("djdt-store-id"));
}
});
- origOpen.apply(this, arguments);
+ origOpen.apply(this, args);
};
const origFetch = window.fetch;
- window.fetch = function () {
- const promise = origFetch.apply(this, arguments);
- promise.then(function (response) {
+ window.fetch = function (...args) {
+ const promise = origFetch.apply(this, args);
+ promise.then((response) => {
if (response.headers.get("djdt-store-id") !== null) {
handleAjaxResponse(response.headers.get("djdt-store-id"));
}
@@ -341,35 +337,34 @@ const djdt = {
return null;
}
- const cookieArray = document.cookie.split("; "),
- cookies = {};
+ const cookieArray = document.cookie.split("; ");
+ const cookies = {};
- cookieArray.forEach(function (e) {
+ cookieArray.forEach((e) => {
const parts = e.split("=");
cookies[parts[0]] = parts[1];
});
return cookies[key];
},
- set(key, value, options) {
- options = options || {};
-
+ set(key, value, options = {}) {
if (typeof options.expires === "number") {
- const days = options.expires,
- t = (options.expires = new Date());
- t.setDate(t.getDate() + days);
+ const days = options.expires;
+ const expires = new Date();
+ expires.setDate(expires.setDate() + days);
+ options.expires = expires;
}
document.cookie = [
- encodeURIComponent(key) + "=" + String(value),
+ `${encodeURIComponent(key)}=${String(value)}`,
options.expires
- ? "; expires=" + options.expires.toUTCString()
+ ? `; expires=${options.expires.toUTCString()}`
: "",
- options.path ? "; path=" + options.path : "",
- options.domain ? "; domain=" + options.domain : "",
+ options.path ? `; path=${options.path}` : "",
+ options.domain ? `; domain=${options.domain}` : "",
options.secure ? "; secure" : "",
"samesite" in options
- ? "; samesite=" + options.samesite
+ ? `; samesite=${options.samesite}`
: "; samesite=lax",
].join("");
diff --git a/debug_toolbar/static/debug_toolbar/js/utils.js b/debug_toolbar/static/debug_toolbar/js/utils.js
index 3cefe58d3..0b46e6640 100644
--- a/debug_toolbar/static/debug_toolbar/js/utils.js
+++ b/debug_toolbar/static/debug_toolbar/js/utils.js
@@ -1,7 +1,7 @@
const $$ = {
on(root, eventName, selector, fn) {
root.removeEventListener(eventName, fn);
- root.addEventListener(eventName, function (event) {
+ root.addEventListener(eventName, (event) => {
const target = event.target.closest(selector);
if (root.contains(target)) {
fn.call(target, event);
@@ -17,7 +17,7 @@ const $$ = {
panelId: The Id of the panel.
fn: A function to execute when the event is triggered.
*/
- root.addEventListener("djdt.panel.render", function (event) {
+ root.addEventListener("djdt.panel.render", (event) => {
if (event.detail.panelId === panelId) {
fn.call(event);
}
@@ -40,7 +40,7 @@ const $$ = {
return !element.classList.contains("djdt-hidden");
},
executeScripts(scripts) {
- scripts.forEach(function (script) {
+ scripts.forEach((script) => {
const el = document.createElement("script");
el.type = "module";
el.src = script;
@@ -54,45 +54,41 @@ const $$ = {
* 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;
- }
- });
+ container.querySelectorAll("[data-djdt-styles]").forEach((element) => {
+ const styles = element.dataset.djdtStyles || "";
+ styles.split(";").forEach((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) {
+ return fetch(url, Object.assign({ credentials: "same-origin" }, init))
+ .then((response) => {
if (response.ok) {
- return response.json().catch(function (error) {
- return Promise.reject(
- new Error(
- "The response is a invalid Json object : " + error
+ return response
+ .json()
+ .catch((error) =>
+ Promise.reject(
+ new Error(
+ `The response is a invalid Json object : ${error}`
+ )
)
);
- });
}
return Promise.reject(
- new Error(response.status + ": " + response.statusText)
+ new Error(`${response.status}: ${response.statusText}`)
);
})
- .catch(function (error) {
+ .catch((error) => {
const win = document.getElementById("djDebugWindow");
- win.innerHTML =
- '' +
- error.message +
- "
";
+ win.innerHTML = `${error.message}
`;
$$.show(win);
throw error;
});
@@ -115,11 +111,11 @@ 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) {
+ Object.keys(data).forEach((panelId) => {
const panel = document.getElementById(panelId);
if (panel) {
panel.outerHTML = data[panelId].content;
- document.getElementById("djdt-" + panelId).outerHTML =
+ document.getElementById(`djdt-${panelId}`).outerHTML =
data[panelId].button;
}
});
@@ -129,7 +125,7 @@ function debounce(func, delay) {
let timer = null;
let resolves = [];
- return function (...args) {
+ return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
const result = func(...args);