Attach handlers to djDebug instead of document

.github/workflows/test.yml

@@ -51,11 +51,6 @@ jobs:
         restore-keys: |
           ${{ matrix.python-version }}-v1-
 
-    - name: Install enchant (only for docs)
-      run: |
-        sudo apt-get -qq update
-        sudo apt-get -y install enchant
-
     - name: Install dependencies
       run: |
         python -m pip install --upgrade pip
@@ -122,10 +117,10 @@ jobs:
         restore-keys: |
           ${{ matrix.python-version }}-v1-
 
-    - name: Install enchant (only for docs) and gdal-bin (for postgis)
+    - name: Install gdal-bin (for postgis)
       run: |
         sudo apt-get -qq update
-        sudo apt-get -y install enchant gdal-bin
+        sudo apt-get -y install gdal-bin
 
     - name: Install dependencies
       run: |

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -18,65 +18,60 @@ function getDebugElement() {
 const djdt = {
     handleDragged: false,
     init() {
-        $$.on(
-            document.body,
-            "click",
-            "#djDebugPanelList li a",
-            function (event) {
-                event.preventDefault();
-                if (!this.className) {
-                    return;
-                }
-                const panelId = this.className;
-                const current = document.getElementById(panelId);
-                if ($$.visible(current)) {
-                    djdt.hidePanels();
-                } else {
-                    djdt.hidePanels();
+        const djDebug = getDebugElement();
+        $$.on(djDebug, "click", "#djDebugPanelList li a", function (event) {
+            event.preventDefault();
+            if (!this.className) {
+                return;
+            }
+            const panelId = this.className;
+            const current = document.getElementById(panelId);
+            if ($$.visible(current)) {
+                djdt.hidePanels();
+            } else {
+                djdt.hidePanels();
 
-                    $$.show(current);
-                    this.parentElement.classList.add("djdt-active");
+                $$.show(current);
+                this.parentElement.classList.add("djdt-active");
 
-                    const djDebug = getDebugElement();
-                    const inner = current.querySelector(
-                            ".djDebugPanelContent .djdt-scroll"
-                        ),
-                        storeId = djDebug.dataset.storeId;
-                    if (storeId && inner.children.length === 0) {
-                        const url = new URL(
-                            djDebug.dataset.renderPanelUrl,
-                            window.location
-                        );
-                        url.searchParams.append("store_id", storeId);
-                        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 {
+                const inner = current.querySelector(
+                        ".djDebugPanelContent .djdt-scroll"
+                    ),
+                    storeId = djDebug.dataset.storeId;
+                if (storeId && inner.children.length === 0) {
+                    const url = new URL(
+                        djDebug.dataset.renderPanelUrl,
+                        window.location
+                    );
+                    url.searchParams.append("store_id", storeId);
+                    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 },
+                        })
+                    );
                 }
             }
-        );
-        $$.on(document.body, "click", "#djDebug .djDebugClose", function () {
+        });
+        $$.on(djDebug, "click", ".djDebugClose", function () {
             djdt.hideOneLevel();
         });
         $$.on(
-            document.body,
+            djDebug,
             "click",
-            "#djDebug .djDebugPanelButton input[type=checkbox]",
+            ".djDebugPanelButton input[type=checkbox]",
             function () {
                 djdt.cookie.set(
                     this.dataset.cookie,
@@ -90,7 +85,7 @@ const djdt = {
         );
 
         // Used by the SQL and template panels
-        $$.on(document.body, "click", "#djDebug .remoteCall", function (event) {
+        $$.on(djDebug, "click", ".remoteCall", function (event) {
             event.preventDefault();
 
             let url;
@@ -113,7 +108,7 @@ const djdt = {
         });
 
         // Used by the cache, profiling and SQL panels
-        $$.on(document.body, "click", "#djDebug .djToggleSwitch", function () {
+        $$.on(djDebug, "click", ".djToggleSwitch", function () {
             const id = this.dataset.toggleId;
             const toggleOpen = "+";
             const toggleClose = "-";
@@ -150,12 +145,12 @@ const djdt = {
                 });
         });
 
-        $$.on(document.body, "click", "#djHideToolBarButton", function (event) {
+        $$.on(djDebug, "click", "#djHideToolBarButton", function (event) {
             event.preventDefault();
             djdt.hideToolbar();
         });
 
-        $$.on(document.body, "click", "#djShowToolBarButton", function () {
+        $$.on(djDebug, "click", "#djShowToolBarButton", function () {
             if (!djdt.handleDragged) {
                 djdt.showToolbar();
             }
@@ -179,35 +174,29 @@ const djdt = {
                 djdt.handleDragged = true;
             }
         }
-        $$.on(
-            document.body,
-            "mousedown",
-            "#djShowToolBarButton",
-            function (event) {
-                event.preventDefault();
-                startPageY = event.pageY;
-                baseY = handle.offsetTop - startPageY;
-                document.addEventListener("mousemove", onHandleMove);
+        $$.on(djDebug, "mousedown", "#djShowToolBarButton", function (event) {
+            event.preventDefault();
+            startPageY = event.pageY;
+            baseY = handle.offsetTop - startPageY;
+            document.addEventListener("mousemove", onHandleMove);
 
-                document.addEventListener(
-                    "mouseup",
-                    function (event) {
-                        document.removeEventListener("mousemove", onHandleMove);
-                        if (djdt.handleDragged) {
-                            event.preventDefault();
-                            localStorage.setItem("djdt.top", handle.offsetTop);
-                            requestAnimationFrame(function () {
-                                djdt.handleDragged = false;
-                            });
-                            djdt.ensureHandleVisibility();
-                        }
-                    },
-                    { once: true }
-                );
-            }
-        );
+            document.addEventListener(
+                "mouseup",
+                function (event) {
+                    document.removeEventListener("mousemove", onHandleMove);
+                    if (djdt.handleDragged) {
+                        event.preventDefault();
+                        localStorage.setItem("djdt.top", handle.offsetTop);
+                        requestAnimationFrame(function () {
+                            djdt.handleDragged = false;
+                        });
+                        djdt.ensureHandleVisibility();
+                    }
+                },
+                { once: true }
+            );
+        });
 
-        const djDebug = getDebugElement();
         // Make sure the debug element is rendered at least once.
         // showToolbar will continue to show it in the future if the
         // entire DOM is reloaded.

docs/configuration.rst

@@ -98,6 +98,8 @@ Toolbar options
 
   The toolbar keeps up to this many results in memory.
 
+.. _ROOT_TAG_EXTRA_ATTRS:
+
 * ``ROOT_TAG_EXTRA_ATTRS``
 
   Default: ``''``

docs/spelling_wordlist.txt

@@ -8,6 +8,8 @@ fallbacks
 flamegraph
 flatpages
 frontend
+Hotwire
+htmx
 inlining
 isort
 Jazzband

docs/tips.rst

@@ -20,6 +20,44 @@ Browsers have become more aggressive with caching static assets, such as
 JavaScript and CSS files. Check your browser's development console, and if
 you see errors, try a hard browser refresh or clearing your cache.
 
+Working with htmx and Turbo
+----------------------------
+
+Libraries such as `htmx <https://htmx.org/>`_ and
+`Turbo <https://turbo.hotwired.dev/>`_ need additional configuration to retain
+the toolbar handle element through page renders. This can be done by
+configuring the :ref:`ROOT_TAG_EXTRA_ATTRS <ROOT_TAG_EXTRA_ATTRS>` to include
+the relevant JavaScript library's attribute.
+
+htmx
+~~~~
+
+The attribute `htmx <https://htmx.org/>`_ uses is
+`hx-preserve <https://htmx.org/attributes/hx-preserve/>`_.
+
+Update your settings to include:
+
+.. code-block:: python
+
+    DEBUG_TOOLBAR_CONFIG = {
+        "ROOT_TAG_EXTRA_ATTRS": "hx-preserve"
+    }
+
+Hotwire Turbo
+~~~~~~~~~~~~~
+
+The attribute `Turbo <https://turbo.hotwired.dev/>`_ uses is
+`data-turbo-permanent <https://turbo.hotwired.dev/reference/attributes>`_
+
+Update your settings to include:
+
+.. code-block:: python
+
+    DEBUG_TOOLBAR_CONFIG = {
+        "ROOT_TAG_EXTRA_ATTRS": "data-turbo-permanent"
+    }
+
+
 Performance considerations
 --------------------------
 

example/settings.py

@@ -61,6 +61,7 @@
 
 WSGI_APPLICATION = "example.wsgi.application"
 
+DEBUG_TOOLBAR_CONFIG = {"ROOT_TAG_EXTRA_ATTRS": "data-turbo-permanent hx-preserve"}
 
 # Cache and database
 

example/templates/htmx/boost.html

@@ -3,25 +3,28 @@
 <html>
   <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <title>Index of Tests</title>
-    <script src="//unpkg.com/htmx.org@1.8.2"></script>
+    <title>Index of Tests (htmx)</title>
+    <script src="//unpkg.com/htmx.org@1.8.4"></script>
   </head>
   <body hx-boost="true">
-    <h1>Index of Tests</h1>
+    <h1>Index of Tests (htmx) - Page {{page_num|default:"1"}}</h1>
+
+    <p>
+      For the debug panel to remain through page navigation, add the setting:
+      <pre>
+DEBUG_TOOLBAR_CONFIG = {
+  "ROOT_TAG_EXTRA_ATTRS": "hx-preserve"
+}
+      </pre>
+    </p>
+
     <ul>
-      <li><a href="/jquery/">jQuery 3.3.1</a></li>
-      <li><a href="/mootools/">MooTools 1.6.0</a></li>
-      <li><a href="/prototype/">Prototype 1.7.3.0</a></li>
+        <li><a href="/admin/">Django Admin</a></li>
+        <li><a href="{% url "htmx" %}">HTMX - Page 1</a></li>
+        <li><a href="{% url "htmx2" %}">HTMX- Page 2</a></li>
     </ul>
-    <p><a href="/admin/">Django Admin</a></p>
-    <script>
-      if (typeof window.htmx !== "undefined") {
-        htmx.on("htmx:afterSettle", function(detail) {
-          if (typeof window.djdt !== "undefined" && detail.target instanceof HTMLBodyElement) {
-            djdt.show_toolbar();
-          }
-        });
-      }
-    </script>
+
+    <a href="{% url "home" %}">Home</a>
+
   </body>
 </html>

example/templates/index.html

@@ -12,6 +12,8 @@ <h1>Index of Tests</h1>
         <li><a href="/jquery/">jQuery 3.3.1</a></li>
         <li><a href="/mootools/">MooTools 1.6.0</a></li>
         <li><a href="/prototype/">Prototype 1.7.3.0</a></li>
+        <li><a href="/turbo/">Hotwire Turbo</a></li>
+        <li><a href="/htmx/">htmx</a></li>
       </ul>
       <p><a href="/admin/">Django Admin</a></p>
     {% endcache %}