.

static/debug_toolbar/js/toolbar.js

@@ -20,7 +20,8 @@ const djdt = {
                 if (!this.className) {
                     return;
                 }
-                const current = document.getElementById(this.className);
+                const panelId = this.className;
+                const current = document.getElementById(panelId);
                 if ($$.visible(current)) {
                     djdt.hide_panels();
                 } else {
@@ -39,13 +40,24 @@ const djdt = {
                             window.location
                         );
                         url.searchParams.append("store_id", store_id);
-                        url.searchParams.append("panel_id", this.className);
+                        url.searchParams.append("panel_id", panelId);
                         ajax(url).then(function (data) {
                             inner.previousElementSibling.remove(); // Remove AJAX loader
                             inner.innerHTML = data.content;
                             $$.executeScripts(data.scripts);
                             $$.applyStyles(inner);
+                            djDebug.dispatchEvent(
+                                new CustomEvent("djdt.panel.render", {
+                                    detail: { panelId: panelId },
+                                })
+                            );
                         });
+                    } else {
+                        djDebug.dispatchEvent(
+                            new CustomEvent("djdt.panel.render", {
+                                detail: { panelId: panelId },
+                            })
+                        );
                     }
                 }
             }
@@ -178,6 +190,7 @@ const djdt = {
                 requestAnimationFrame(function () {
                     djdt.handleDragged = false;
                 });
+                djdt.ensure_handle_visibility();
             }
         });
         const show =
@@ -198,6 +211,15 @@ const djdt = {
             e.classList.remove("djdt-active");
         });
     },
+    ensure_handle_visibility() {
+        const handle = document.getElementById("djDebugToolbarHandle");
+        // set handle position
+        const handleTop = Math.min(
+            localStorage.getItem("djdt.top") || 0,
+            window.innerHeight - handle.offsetWidth
+        );
+        handle.style.top = handleTop + "px";
+    },
     hide_toolbar() {
         djdt.hide_panels();
 
@@ -205,16 +227,8 @@ const djdt = {
 
         const handle = document.getElementById("djDebugToolbarHandle");
         $$.show(handle);
-        // set handle position
-        let handleTop = localStorage.getItem("djdt.top");
-        if (handleTop) {
-            handleTop = Math.min(
-                handleTop,
-                window.innerHeight - handle.offsetHeight
-            );
-            handle.style.top = handleTop + "px";
-        }
-
+        djdt.ensure_handle_visibility();
+        window.addEventListener("resize", djdt.ensure_handle_visibility);
         document.removeEventListener("keydown", onKeyDown);
 
         localStorage.setItem("djdt.show", "false");
@@ -237,6 +251,7 @@ const djdt = {
         $$.hide(document.getElementById("djDebugToolbarHandle"));
         $$.show(document.getElementById("djDebugToolbar"));
         localStorage.setItem("djdt.show", "true");
+        window.removeEventListener("resize", djdt.ensure_handle_visibility);
     },
     cookie: {
         get(key) {