Change .djDebugClose <a> tag to more semantic <button type="button">

Anchor tags are for hyperlinks. The close button does not link to (nor
contains) a new URL. The href was previously specified as an empty
string.

Replace these with actual buttons. The buttons continue to be styled the
same as before. The CSS was simplified a bit due to the change in the
element.

Author: jdufresne

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -366,7 +366,6 @@
 }
 
 #djDebug .djdt-panelContent .djDebugClose {
-    display: block;
     position: absolute;
     top: 4px;
     right: 15px;
@@ -381,7 +380,6 @@
     text-align: center;
     font-weight: 900;
     font-size: 20px;
-    text-decoration: none;
     box-sizing: content-box;
 }
 

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -49,8 +49,7 @@ const djdt = {
                 }
             }
         );
-        $$.on(djDebug, "click", "a.djDebugClose", function (event) {
-            event.preventDefault();
+        $$.on(djDebug, "click", ".djDebugClose", function (event) {
             djdt.hide_one_level();
         });
         $$.on(

debug_toolbar/static/debug_toolbar/js/utils.js

@@ -42,7 +42,7 @@ function ajax(url, init) {
         } else {
             const win = document.querySelector("#djDebugWindow");
             win.innerHTML =
-                '<div class="djDebugPanelTitle"><a class="djDebugClose" href="">»</a><h3>' +
+                '<div class="djDebugPanelTitle"><button type="button" class="djDebugClose">»</button><h3>' +
                 response.status +
                 ": " +
                 response.statusText +

debug_toolbar/templates/debug_toolbar/includes/panel_content.html

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

debug_toolbar/templates/debug_toolbar/panels/sql_explain.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <div class="djDebugPanelTitle">
-  <a class="djDebugClose" href="">»</a>
+  <button type="button" class="djDebugClose">»</button>
   <h3>{% trans "SQL explained" %}</h3>
 </div>
 <div class="djDebugPanelContent">

debug_toolbar/templates/debug_toolbar/panels/sql_profile.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <div class="djDebugPanelTitle">
-  <a class="djDebugClose" href="">»</a>
+  <button type="button" class="djDebugClose">»</button>
   <h3>{% trans "SQL profiled" %}</h3>
 </div>
 <div class="djDebugPanelContent">

debug_toolbar/templates/debug_toolbar/panels/sql_select.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <div class="djDebugPanelTitle">
-  <a class="djDebugClose" href="">»</a>
+  <button type="button" class="djDebugClose">»</button>
   <h3>{% trans "SQL selected" %}</h3>
 </div>
 <div class="djDebugPanelContent">

debug_toolbar/templates/debug_toolbar/panels/template_source.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <div class="djDebugPanelTitle">
-  <a class="djDebugClose" href="">»</a>
+  <button type="button" class="djDebugClose">»</button>
   <h3>{% trans "Template source:" %} <code>{{ template_name }}</code></h3>
 </div>
 <div class="djDebugPanelContent">

tests/panels/test_custom.py

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

tests/panels/test_settings.py

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