Prefer function declarations over assigning function expressions

The non-inline functions can be declared at parse-time rather than at
run-time, so allow the JavaScript engine to do so. This also always
assigns a name to the function in the console and tracebacks.

Author: jdufresne

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -1,14 +1,14 @@
 import { $$, ajax } from "./utils.js";
 
-const onKeyDown = function (event) {
+function onKeyDown(event) {
     if (event.keyCode === 27) {
         djdt.hide_one_level();
     }
-};
+}
 
 const djdt = {
     handleDragged: false,
-    init: function () {
+    init() {
         const djDebug = document.querySelector("#djDebug");
         $$.show(djDebug);
         $$.on(
@@ -146,7 +146,7 @@ const djdt = {
             });
         let startPageY, baseY;
         const handle = document.querySelector("#djDebugToolbarHandle");
-        const onHandleMove = function (event) {
+        function onHandleMove(event) {
             // Chrome can send spurious mousemove events, so don't do anything unless the
             // cursor really moved.  Otherwise, it will be impossible to expand the toolbar
             // due to djdt.handleDragged being set to true.
@@ -162,7 +162,7 @@ const djdt = {
                 handle.style.top = top + "px";
                 djdt.handleDragged = true;
             }
-        };
+        }
         djDebug
             .querySelector("#djShowToolBarButton")
             .addEventListener("mousedown", function (event) {
@@ -189,7 +189,7 @@ const djdt = {
             djdt.hide_toolbar();
         }
     },
-    hide_panels: function () {
+    hide_panels() {
         const djDebug = document.getElementById("djDebug");
         $$.hide(djDebug.querySelector("#djDebugWindow"));
         djDebug.querySelectorAll(".djdt-panelContent").forEach(function (e) {
@@ -199,7 +199,7 @@ const djdt = {
             e.classList.remove("djdt-active");
         });
     },
-    hide_toolbar: function () {
+    hide_toolbar() {
         djdt.hide_panels();
 
         const djDebug = document.getElementById("djDebug");
@@ -221,7 +221,7 @@ const djdt = {
 
         localStorage.setItem("djdt.show", "false");
     },
-    hide_one_level: function () {
+    hide_one_level() {
         const djDebug = document.getElementById("djDebug");
         if ($$.visible(djDebug.querySelector("#djDebugWindow"))) {
             $$.hide(djDebug.querySelector("#djDebugWindow"));
@@ -231,15 +231,15 @@ const djdt = {
             djdt.hide_toolbar(true);
         }
     },
-    show_toolbar: function () {
+    show_toolbar() {
         document.addEventListener("keydown", onKeyDown);
         const djDebug = document.getElementById("djDebug");
         $$.hide(djDebug.querySelector("#djDebugToolbarHandle"));
         $$.show(djDebug.querySelector("#djDebugToolbar"));
         localStorage.setItem("djdt.show", "true");
     },
     cookie: {
-        get: function (key) {
+        get(key) {
             if (!document.cookie.includes(key)) {
                 return null;
             }
@@ -254,7 +254,7 @@ const djdt = {
 
             return cookies[key];
         },
-        set: function (key, value, options) {
+        set(key, value, options) {
             options = options || {};
 
             if (typeof options.expires === "number") {

debug_toolbar/static/debug_toolbar/js/utils.js

@@ -1,29 +1,29 @@
 const $$ = {
-    on: function (root, eventName, selector, fn) {
+    on(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) {
+    show(element) {
         element.classList.remove("djdt-hidden");
     },
-    hide: function (element) {
+    hide(element) {
         element.classList.add("djdt-hidden");
     },
-    toggle: function (element, value) {
+    toggle(element, value) {
         if (value) {
             $$.show(element);
         } else {
             $$.hide(element);
         }
     },
-    visible: function (element) {
+    visible(element) {
         return !element.classList.contains("djdt-hidden");
     },
-    executeScripts: function (scripts) {
+    executeScripts(scripts) {
         scripts.forEach(function (script) {
             const el = document.createElement("script");
             el.type = "module";