Keep panel close button accessible with external styles (#2128)

Swapped order of header and button HTML elements to prevent button becoming inaccessible with external CSS

Author: TomHall2020

debug_toolbar/static/debug_toolbar/js/utils.js

@@ -90,7 +90,7 @@ function ajax(url, init) {
         })
         .catch((error) => {
             const win = document.getElementById("djDebugWindow");
-            win.innerHTML = `<div class="djDebugPanelTitle"><button type="button" class="djDebugClose">»</button><h3>${error.message}</h3></div>`;
+            win.innerHTML = `<div class="djDebugPanelTitle"><h3>${error.message}</h3><button type="button" class="djDebugClose">»</button></div>`;
             $$.show(win);
             throw error;
         });

debug_toolbar/templates/debug_toolbar/includes/panel_content.html

@@ -3,8 +3,8 @@
 {% if panel.has_content and panel.enabled %}
   <div id="{{ panel.panel_id }}" class="djdt-panelContent djdt-hidden">
     <div class="djDebugPanelTitle">
-      <button type="button" class="djDebugClose">×</button>
       <h3>{{ panel.title }}</h3>
+      <button type="button" class="djDebugClose">×</button>
     </div>
     <div class="djDebugPanelContent">
       {% if toolbar.should_render_panels %}

debug_toolbar/templates/debug_toolbar/panels/sql_explain.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 <div class="djDebugPanelTitle">
-  <button type="button" class="djDebugClose">»</button>
   <h3>{% translate "SQL explained" %}</h3>
+  <button type="button" class="djDebugClose">»</button>
 </div>
 <div class="djDebugPanelContent">
   <div class="djdt-scroll">

debug_toolbar/templates/debug_toolbar/panels/sql_profile.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 <div class="djDebugPanelTitle">
-  <button type="button" class="djDebugClose">»</button>
   <h3>{% translate "SQL profiled" %}</h3>
+  <button type="button" class="djDebugClose">»</button>
 </div>
 <div class="djDebugPanelContent">
   <div class="djdt-scroll">

debug_toolbar/templates/debug_toolbar/panels/sql_select.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 <div class="djDebugPanelTitle">
-  <button type="button" class="djDebugClose">»</button>
   <h3>{% translate "SQL selected" %}</h3>
+  <button type="button" class="djDebugClose">»</button>
 </div>
 <div class="djDebugPanelContent">
   <div class="djdt-scroll">

debug_toolbar/templates/debug_toolbar/panels/template_source.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 <div class="djDebugPanelTitle">
-  <button type="button" class="djDebugClose">»</button>
   <h3>{% translate "Template source:" %} <code>{{ template_name }}</code></h3>
+  <button type="button" class="djDebugClose">»</button>
 </div>
 <div class="djDebugPanelContent">
   <div class="djdt-scroll">

docs/changes.rst

@@ -15,6 +15,8 @@ Pending
   template loaders.
 * Introduced `djade <https://github.com/adamchainz/djade>`__ to format Django
   templates.
+* Swapped display order of panel header and close button to prevent style
+  conflicts
 
 5.1.0 (2025-03-20)
 ------------------

tests/panels/test_custom.py

@@ -33,8 +33,8 @@ def test_escapes_panel_title(self):
             """
             <div id="CustomPanel" class="djdt-panelContent djdt-hidden">
             <div class="djDebugPanelTitle">
-            <button type="button" class="djDebugClose">×</button>
             <h3>Title with special chars &amp;&quot;&#39;&lt;&gt;</h3>
+            <button type="button" class="djDebugClose">×</button>
             </div>
             <div class="djDebugPanelContent">
             <div class="djdt-loader"></div>

tests/panels/test_settings.py

@@ -24,8 +24,8 @@ def test_panel_title(self):
             """
             <div id="SettingsPanel" class="djdt-panelContent djdt-hidden">
             <div class="djDebugPanelTitle">
-            <button type="button" class="djDebugClose">×</button>
             <h3>Settings from None</h3>
+            <button type="button" class="djDebugClose">×</button>
             </div>
             <div class="djDebugPanelContent">
             <div class="djdt-loader"></div>

tests/test_integration.py

@@ -812,7 +812,7 @@ def test_displays_server_error(self):
         debug_window = self.selenium.find_element(By.ID, "djDebugWindow")
         self.selenium.find_element(By.CLASS_NAME, "BuggyPanel").click()
         self.wait.until(EC.visibility_of(debug_window))
-        self.assertEqual(debug_window.text, "»\n500: Internal Server Error")
+        self.assertEqual(debug_window.text, "500: Internal Server Error\n»")
 
     def test_toolbar_language_will_render_to_default_language_when_not_set(self):
         self.get("/regular/basic/")