1843 new ajax request resets whole view if historypanel is enabled

debug_toolbar/settings.py

@@ -42,6 +42,7 @@
     "SQL_WARNING_THRESHOLD": 500,  # milliseconds
     "OBSERVE_REQUEST_CALLBACK": "debug_toolbar.toolbar.observe_request",
     "TOOLBAR_LANGUAGE": None,
+    "UDPATE_ON_AJAX": False,
 }
 
 

debug_toolbar/static/debug_toolbar/js/history.js

@@ -104,3 +104,4 @@ $$.on(djDebug, "click", ".refreshHistory", function (event) {
     event.preventDefault();
     refreshHistory();
 });
+$$.onPanelRender(djDebug, "HistoryPanel", refreshHistory);

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -19,6 +19,7 @@ const djdt = {
     handleDragged: false,
     init() {
         const djDebug = getDebugElement();
+        window.djdt.update_on_ajax = djDebug.getAttribute("update-on-ajax") === "True";
         $$.on(djDebug, "click", "#djDebugPanelList li a", function (event) {
             event.preventDefault();
             if (!this.className) {
@@ -55,6 +56,7 @@ const djdt = {
                                 detail: { panelId: panelId },
                             })
                         );
+
                     });
                 } else {
                     djDebug.dispatchEvent(
@@ -274,7 +276,9 @@ const djdt = {
             storeId = encodeURIComponent(storeId);
             const dest = `${sidebarUrl}?store_id=${storeId}`;
             slowjax(dest).then(function (data) {
-                replaceToolbarState(storeId, data);
+                if (window.djdt.update_on_ajax){
+                    replaceToolbarState(storeId, data);
+                }
             });
         }
 
@@ -356,6 +360,7 @@ window.djdt = {
     init: djdt.init,
     close: djdt.hideOneLevel,
     cookie: djdt.cookie,
+    update_on_ajax: false,
 };
 
 if (document.readyState !== "loading") {

debug_toolbar/templates/debug_toolbar/base.html

@@ -16,7 +16,7 @@
      data-sidebar-url="{{ history_url }}"
      {% endif %}
      data-default-show="{% if toolbar.config.SHOW_COLLAPSED %}false{% else %}true{% endif %}"
-     {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}>
+     {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}  update-on-ajax="{{ toolbar.config.UDPATE_ON_AJAX|safe }}">
   <div class="djdt-hidden" id="djDebugToolbar">
     <ul id="djDebugPanelList">
       <li><a id="djHideToolBarButton" href="#" title="{% trans 'Hide toolbar' %}">{% trans "Hide" %} »</a></li>

docs/changes.rst

@@ -17,6 +17,7 @@ Pending
   ``django.contrib.admindocs.utils.get_view_name``.
 * Switched from black to the `ruff formatter
   <https://astral.sh/blog/the-ruff-formatter>`__.
+* Add a setting for refresh or not the toolbar if an ajax request occurs.
 
 4.2.0 (2023-08-10)
 ------------------

docs/configuration.rst

@@ -163,6 +163,15 @@ Toolbar options
   but want to render your application in French, you would set this to
   ``"en-us"`` and :setting:`LANGUAGE_CODE` to ``"fr"``.
 
+.. _UDPATE_ON_AJAX:
+
+* ``UDPATE_ON_AJAX``
+
+  Default: ``False``
+
+  This setting specifies if  the whole toolbar need to be refresh if an ajax
+  request is done.
+
 Panel options
 ~~~~~~~~~~~~~
 

docs/spelling_wordlist.txt

@@ -6,6 +6,7 @@ Pympler
 Roboto
 Transifex
 Werkzeug
+ajax
 async
 backend
 backends

tests/templates/ajax/ajax.html

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+{% block content %}
+  <div id="click_for_ajax">click for ajax</div>
+
+  <script>
+
+  let click_for_ajax = document.getElementById("click_for_ajax")
+  function send_ajax() {
+    let xhr = new XMLHttpRequest();
+    let url = '/json_view/';
+    xhr.open("GET", url, true);
+    xhr.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+            console.log(this.responseText);
+        }
+    }
+    xhr.send();
+  }
+  document.addEventListener("click", (event) => {send_ajax()});
+  </script>
+{% endblock %}

tests/test_integration.py

@@ -749,3 +749,20 @@ def test_toolbar_language_will_render_to_locale_when_set_both(self):
         )
         self.assertIn("Query", table.text)
         self.assertIn("Action", table.text)
+
+    def test_ajax_dont_refresh(self):
+        self.get("/ajax/")
+        make_ajax = self.selenium.find_element(By.ID, "click_for_ajax")
+        make_ajax.click()
+        history_panel = self.selenium.find_element(By.ID, "djdt-HistoryPanel")
+        self.assertIn("/ajax/", history_panel.text)
+        self.assertNotIn("/json_view/", history_panel.text)
+
+    @override_settings(DEBUG_TOOLBAR_CONFIG={"UDPATE_ON_AJAX": True})
+    def test_ajax_refresh(self):
+        self.get("/ajax/")
+        make_ajax = self.selenium.find_element(By.ID, "click_for_ajax")
+        make_ajax.click()
+        history_panel = self.selenium.find_element(By.ID, "djdt-HistoryPanel")
+        self.assertNotIn("/ajax/", history_panel.text)
+        self.assertIn("/json_view/", history_panel.text)

tests/urls.py

@@ -21,6 +21,7 @@
     path("cached_low_level_view/", views.cached_low_level_view),
     path("json_view/", views.json_view),
     path("redirect/", views.redirect_view),
+    path("ajax/", views.ajax_view),
     path("login_without_redirect/", LoginView.as_view(redirect_field_name=None)),
     path("admin/", admin.site.urls),
     path("__debug__/", include("debug_toolbar.urls")),

tests/views.py

@@ -58,3 +58,7 @@ def listcomp_view(request):
 
 def redirect_view(request):
     return HttpResponseRedirect("/regular/redirect/")
+
+
+def ajax_view(request):
+    return render(request, "ajax/ajax.html")