Change .djToggleSwitch to a button

Author: jdufresne

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -561,14 +561,12 @@
     content: "\00a0";
 }
 #djDebug .djToggleSwitch {
-    text-decoration: none;
+    box-sizing: content-box;
+    padding: 0;
     border: 1px solid #999;
-    height: 12px;
+    border-radius: 0;
     width: 12px;
-    line-height: 12px;
-    text-align: center;
     color: #777;
-    display: inline-block;
     background: linear-gradient(to bottom, #fff, #dcdcdc);
 }
 #djDebug .djNoToggleSwitch {

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -92,8 +92,7 @@ const djdt = {
         });
 
         // Used by the cache, profiling and SQL panels
-        $$.on(djDebug, "click", "a.djToggleSwitch", function (event) {
-            event.preventDefault();
+        $$.on(djDebug, "click", ".djToggleSwitch", function (event) {
             const self = this;
             const id = this.dataset.toggleId;
             const toggleOpen = "+";

debug_toolbar/templates/debug_toolbar/panels/cache.html

@@ -51,7 +51,7 @@ <h4>{% trans "Calls" %}</h4>
       {% for call in calls %}
         <tr id="cacheMain_{{ forloop.counter }}">
           <td class="djdt-toggle">
-            <a class="djToggleSwitch" data-toggle-name="cacheMain" data-toggle-id="{{ forloop.counter }}" href>+</a>
+            <button class="djToggleSwitch" data-toggle-name="cacheMain" data-toggle-id="{{ forloop.counter }}">+</button>
           </td>
           <td>{{ call.time|floatformat:"4" }}</td>
           <td>{{ call.name|escape }}</td>

debug_toolbar/templates/debug_toolbar/panels/history_tr.html

@@ -10,7 +10,7 @@
         <p>{{ store_context.toolbar.stats.HistoryPanel.request_url|truncatechars:100|escape }}</p>
     </td>
     <td>
-        <a class="djToggleSwitch" data-toggle-name="historyMain" data-toggle-id="{{ id }}" href>+</a>
+        <button type="button" class="djToggleSwitch" data-toggle-name="historyMain" data-toggle-id="{{ id }}">+</button>
         <div class="djUnselected djToggleDetails_{{ id }}">
           <table>
             <colgroup>

debug_toolbar/templates/debug_toolbar/panels/profiling.html

@@ -16,7 +16,7 @@
         <td>
           <div style="padding-left:{{ call.indent }}px">
             {% if call.has_subfuncs %}
-              <a class="djProfileToggleDetails djToggleSwitch" data-toggle-name="profilingMain" data-toggle-id="{{ call.id }}" href>-</a>
+              <button type="button" class="djProfileToggleDetails djToggleSwitch" data-toggle-name="profilingMain" data-toggle-id="{{ call.id }}">-</button>
             {% else %}
               <span class="djNoToggleSwitch"></span>
             {% endif %}

debug_toolbar/templates/debug_toolbar/panels/sql.html

@@ -34,7 +34,7 @@
         <tr class="{% if query.is_slow %} djDebugRowWarning{% endif %}" id="sqlMain_{{ forloop.counter }}">
           <td><span class="djdt-color" style="background-color:rgb({{ query.rgb_color|join:', '}})"></span></td>
           <td class="djdt-toggle">
-            <a class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}" href="">+</a>
+            <button type="button" class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}">+</button>
           </td>
           <td class="djdt-query">
             <div class="djDebugSqlWrap">