Merge remote-tracking branch 'jdufresne/links-to-buttons'

* jdufresne/links-to-buttons:
  Change .djToggleSwitch to a button
  Change .djDebugClose <a> tag to more semantic <button type="button">
  Remove unnecessary .preventDefault()

Author: matthiask

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;
 }
 
@@ -559,14 +557,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

@@ -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(
@@ -93,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 = "+";
@@ -142,7 +140,6 @@ const djdt = {
         djDebug
             .querySelector("#djShowToolBarButton")
             .addEventListener("click", function (event) {
-                event.preventDefault();
                 if (!djdt.handleDragged) {
                     djdt.show_toolbar();
                 }

debug_toolbar/static/debug_toolbar/js/utils.js

@@ -48,7 +48,7 @@ function ajax(url, init) {
         .catch(function (error) {
             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>' +
                 error.message +
                 "</h3></div>";
             $$.show(win);

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/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">

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">