Adding Update on ajax feature

This adds a feature to allow the toolbar to watch for ajax requests and
automatically update debug information to show ajax details

Author: gone

debug_toolbar/panels/history/panel.py

@@ -20,6 +20,18 @@ class HistoryPanel(Panel):
     nav_title = _("History")
     template = "debug_toolbar/panels/history.html"
 
+    def process_request(self, request):
+        response = super().process_request(request)
+        if not self.toolbar.should_render_panels():
+            self.toolbar.store()
+            store_id = self.toolbar.store_id
+            sig = SignedDataForm(
+                initial=HistoryStoreForm(initial={"store_id": store_id}).initial
+            ).initial.get("signed")
+            response["DJ-TOOLBAR-STORE-ID"] = store_id
+            response["DJ-TOOLBAR-STORE-ID-SIGNATURE"] = sig
+        return response
+
     @property
     def enabled(self):
         # Do not show the history panel if the panels are rendered on request

debug_toolbar/panels/history/views.py

@@ -20,8 +20,6 @@ def history_sidebar(request):
             # RESULTS_CACHE_SIZE
             return JsonResponse(context)
         for panel in toolbar.panels:
-            if not panel.is_historical:
-                continue
             panel_context = {"panel": panel}
             context[panel.panel_id] = {
                 "button": render_to_string(

debug_toolbar/settings.py

@@ -37,6 +37,7 @@
     "SHOW_TEMPLATE_CONTEXT": True,
     "SKIP_TEMPLATE_PREFIXES": ("django/forms/widgets/", "admin/widgets/"),
     "SQL_WARNING_THRESHOLD": 500,  # milliseconds
+    "UPDATE_ON_AJAX": False,
 }
 
 

debug_toolbar/static/debug_toolbar/js/history.js

@@ -1,37 +1,35 @@
-import { $$, ajaxForm } from "./utils.js";
+import { $$, ajaxForm, replaceToolbarState } from "./utils.js";
 
 const djDebug = document.getElementById("djDebug");
 
-$$.on(djDebug, "click", ".switchHistory", function (event) {
-    event.preventDefault();
-    const newStoreId = this.dataset.storeId;
-    const tbody = this.closest("tbody");
+function switchHistory(newStoreId) {
+    const formTarget = djDebug.querySelector(
+        ".switchHistory[data-store-id='" + newStoreId + "']"
+    );
+    const tbody = formTarget.closest("tbody");
 
     const highlighted = tbody.querySelector(".djdt-highlighted");
     if (highlighted) {
         highlighted.classList.remove("djdt-highlighted");
     }
-    this.closest("tr").classList.add("djdt-highlighted");
+    formTarget.closest("tr").classList.add("djdt-highlighted");
 
-    ajaxForm(this).then(function (data) {
-        djDebug.setAttribute("data-store-id", newStoreId);
-        // Check if response is empty, it could be due to an expired store_id.
+    ajaxForm(formTarget).then(function (data) {
         if (Object.keys(data).length === 0) {
             const container = document.getElementById("djdtHistoryRequests");
             container.querySelector(
                 'button[data-store-id="' + newStoreId + '"]'
             ).innerHTML = "Switch [EXPIRED]";
-        } else {
-            Object.keys(data).forEach(function (panelId) {
-                const panel = document.getElementById(panelId);
-                if (panel) {
-                    panel.outerHTML = data[panelId].content;
-                    document.getElementById("djdt-" + panelId).outerHTML =
-                        data[panelId].button;
-                }
-            });
         }
+        //we're already in history panel, so handle locally vs replacing active html
+        delete data.HistoryPanel;
+        replaceToolbarState(newStoreId, data);
     });
+}
+
+$$.on(djDebug, "click", ".switchHistory", function (event) {
+    event.preventDefault();
+    switchHistory(this.dataset.storeId);
 });
 
 $$.on(djDebug, "click", ".refreshHistory", function (event) {

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -1,4 +1,4 @@
-import { $$, ajax } from "./utils.js";
+import { $$, ajax, replaceToolbarState } from "./utils.js";
 
 function onKeyDown(event) {
     if (event.keyCode === 27) {
@@ -200,6 +200,9 @@ const djdt = {
         } else {
             djdt.hide_toolbar();
         }
+        if (djDebug.dataset.sidebarUrl !== undefined) {
+            djdt.update_on_ajax();
+        }
     },
     hide_panels() {
         const djDebug = document.getElementById("djDebug");
@@ -253,6 +256,35 @@ const djdt = {
         localStorage.setItem("djdt.show", "true");
         window.removeEventListener("resize", djdt.ensure_handle_visibility);
     },
+    update_on_ajax() {
+        const sidebar_url =
+            document.getElementById("djDebug").dataset.sidebarUrl;
+
+        const origOpen = XMLHttpRequest.prototype.open;
+        XMLHttpRequest.prototype.open = function () {
+            this.addEventListener("load", function () {
+                if (
+                    this.responseURL !== "" &&
+                    this.responseURL.indexOf("__debug__") === -1
+                ) {
+                    let signed = this.getResponseHeader(
+                        "dj-toolbar-store-id-signature"
+                    );
+                    const store_id = this.getResponseHeader(
+                        "dj-toolbar-store-id"
+                    );
+                    if (signed !== null) {
+                        signed = encodeURIComponent(signed);
+                        const dest = `${sidebar_url}?signed=${signed}`;
+                        ajax(dest).then(function (data) {
+                            replaceToolbarState(store_id, data);
+                        });
+                    }
+                }
+            });
+            origOpen.apply(this, arguments);
+        };
+    },
     cookie: {
         get(key) {
             if (!document.cookie.includes(key)) {

debug_toolbar/static/debug_toolbar/js/utils.js

@@ -104,4 +104,18 @@ function ajaxForm(element) {
     return ajax(url, ajaxData);
 }
 
-export { $$, ajax, ajaxForm };
+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 store_id.
+    Object.keys(data).forEach(function (panelId) {
+        const panel = document.getElementById(panelId);
+        if (panel) {
+            panel.outerHTML = data[panelId].content;
+            document.getElementById("djdt-" + panelId).outerHTML =
+                data[panelId].button;
+        }
+    });
+}
+
+export { $$, ajax, ajaxForm, replaceToolbarState };

debug_toolbar/templates/debug_toolbar/base.html

@@ -11,6 +11,9 @@
      data-store-id="{{ toolbar.store_id }}"
      data-render-panel-url="{% url 'djdt:render_panel' %}"
      {% endif %}
+     {% if toolbar.should_update_on_ajax %}
+     data-sidebar-url="{% url 'djdt:history_sidebar' %}"
+     {% endif %}
      data-default-show="{% if toolbar.config.SHOW_COLLAPSED %}false{% else %}true{% endif %}"
      {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}>
   <div class="djdt-hidden" id="djDebugToolbar">

debug_toolbar/toolbar.py

@@ -9,8 +9,8 @@
 from django.core.exceptions import ImproperlyConfigured
 from django.template import TemplateSyntaxError
 from django.template.loader import render_to_string
-from django.urls import path, resolve
-from django.urls.exceptions import Resolver404
+from django.urls import path, resolve, reverse
+from django.urls.exceptions import NoReverseMatch, Resolver404
 from django.utils.module_loading import import_string
 
 from debug_toolbar import settings as dt_settings
@@ -88,6 +88,17 @@ def should_render_panels(self):
             render_panels = self.request.META["wsgi.multiprocess"]
         return render_panels
 
+    def should_update_on_ajax(self):
+        """Determine whether the toolbar should consider ajax requests as updates or not"""
+        has_endpoint_registered = False
+        try:
+            reverse("djdt:history_sidebar")
+            has_endpoint_registered = True
+        except NoReverseMatch:
+            pass
+        should_watch = self.config["UPDATE_ON_AJAX"]
+        return should_watch and has_endpoint_registered
+
     # Handle storing toolbars in memory and fetching them later on
 
     _store = OrderedDict()
@@ -130,7 +141,7 @@ def get_urls(cls):
             # Load URLs in a temporary variable for thread safety.
             # Global URLs
             urlpatterns = [
-                path("render_panel/", views.render_panel, name="render_panel")
+                path("render_panel/", views.render_panel, name="render_panel"),
             ]
             # Per-panel URLs
             for panel_class in cls.get_panel_classes():