Simplify CSS classes and rules on th/td elements

These CSS classes don't style th element, but td elements. So remove
from th elements for slightly smaller HTML.

The rule:

    #djDebug .djdt-panelContent thead th {
        white-space: nowrap;
    }

duplicates the rule on line 350 with the same selector. A it is
redundant, remove it.

djdt-query had no CSS and no JavaScript associated with it. As it has no
effect, remove it.

djdt-timeline only adds a width. There already exist a series of generic
classes to set widths "djdt-width-*', so use this pattern instead of a
new one-off CSS class.

Author: jdufresne

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -514,10 +514,6 @@
     color: #333;
 } /* Comment.Preproc */
 
-#djDebug .djdt-timeline {
-    width: 30%;
-}
-
 #djDebug svg.djDebugLineChart {
     width: 100%;
     height: 1.5em;
@@ -534,9 +530,6 @@
     stroke: #94b24d;
 }
 
-#djDebug .djdt-panelContent thead th {
-    white-space: nowrap;
-}
 #djDebug .djDebugRowWarning .djdt-time {
     color: red;
 }
@@ -602,6 +595,9 @@
 #djDebug .djdt-width-20 {
     width: 20%;
 }
+#djDebug .djdt-width-30 {
+    width: 30%;
+}
 #djDebug .djdt-width-60 {
     width: 60%;
 }

debug_toolbar/static/debug_toolbar/js/timer.js

@@ -20,7 +20,7 @@ function addRow(stat, endStat) {
             "<td>" +
             stat.replace("Start", "") +
             "</td>" +
-            '<td class="djdt-timeline"><svg class="djDebugLineChart" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 5" preserveAspectRatio="none"><rect y="0" height="5" fill="#ccc" /></svg></td>' +
+            '<td><svg class="djDebugLineChart" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 5" preserveAspectRatio="none"><rect y="0" height="5" fill="#ccc" /></svg></td>' +
             "<td>" +
             (performance.timing[stat] - timingOffset) +
             " (+" +
@@ -36,7 +36,7 @@ function addRow(stat, endStat) {
             "<td>" +
             stat +
             "</td>" +
-            '<td class="djdt-timeline"><svg class="djDebugLineChart" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 5" preserveAspectRatio="none"><rect y="0" height="5" fill="#ccc" /></svg></td>' +
+            '<td><svg class="djDebugLineChart" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 5" preserveAspectRatio="none"><rect y="0" height="5" fill="#ccc" /></svg></td>' +
             "<td>" +
             (performance.timing[stat] - timingOffset) +
             "</td>";

debug_toolbar/templates/debug_toolbar/panels/history.html

@@ -10,7 +10,7 @@
             <th>{% trans "Method" %}</th>
             <th>{% trans "Path" %}</th>
             <th>{% trans "Request Variables" %}</th>
-            <th class="djdt-actions">{% trans "Action" %}</th>
+            <th>{% trans "Action" %}</th>
         </tr>
     </thead>
     <tbody id="djdtHistoryRequests">

debug_toolbar/templates/debug_toolbar/panels/sql.html

@@ -20,13 +20,21 @@
 
 {% if queries %}
   <table>
+    <colgroup>
+      <col>
+      <col>
+      <col>
+      <col class="djdt-width-30">
+      <col>
+      <col>
+    </colgroup>
     <thead>
       <tr>
         <th></th>
-        <th class="djdt-query" colspan="2">{% trans "Query" %}</th>
-        <th class="djdt-timeline">{% trans "Timeline" %}</th>
-        <th class="djdt-time">{% trans "Time (ms)" %}</th>
-        <th class="djdt-actions">{% trans "Action" %}</th>
+        <th colspan="2">{% trans "Query" %}</th>
+        <th>{% trans "Timeline" %}</th>
+        <th>{% trans "Time (ms)" %}</th>
+        <th>{% trans "Action" %}</th>
       </tr>
     </thead>
     <tbody>
@@ -36,7 +44,7 @@
           <td class="djdt-toggle">
             <button type="button" class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}">+</button>
           </td>
-          <td class="djdt-query">
+          <td>
             <div class="djDebugSql">{{ query.sql|safe }}</div>
             {% if query.similar_count %}
               <strong>
@@ -51,7 +59,7 @@
               </strong>
             {% endif %}
           </td>
-          <td class="djdt-timeline">
+          <td>
             <svg class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}{% if query.in_trans %} djDebugLineChartInTransaction{% endif %}" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 5" preserveAspectRatio="none" aria-label="{{ query.width_ratio }}%">
               <rect x="{{ query.start_offset|unlocalize }}" y="0" height="5" width="{{ query.width_ratio|unlocalize }}" fill="{{ query.trace_color }}" />
               {% if query.starts_trans %}

debug_toolbar/templates/debug_toolbar/panels/timer.html

@@ -33,8 +33,8 @@ <h4>{% trans "Browser timing" %}</h4>
     <thead>
       <tr>
         <th>{% trans "Timing attribute" %}</th>
-        <th class="djdt-timeline">{% trans "Timeline" %}</th>
-        <th class="djdt-time">{% trans "Milliseconds since navigation start (+length)" %}</th>
+        <th>{% trans "Timeline" %}</th>
+        <th>{% trans "Milliseconds since navigation start (+length)" %}</th>
       </tr>
     </thead>
     <tbody id="djDebugBrowserTimingTableBody">