Enable a few of the disabled biome rules

.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:

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"
  }
  }
  },

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();
 });

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 =
- "<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.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>${elapsed} (+${duration})</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.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>${elapsed}</td>
+`;
  row.querySelector("rect").setAttribute("width", 2);
  }
  row.querySelector("rect").setAttribute("x", getLeft(stat));