Eliminate some inline styles (#1249)

Inline styles are used for the following:

1. version table column width
2. bar graphs
3. sql query colors
4. profiling function indentation

(1) is can trivially be replaced with a class. (2) can be replaced with SVG. I did not find solutions for the other two cases.

Author: xi

debug_toolbar/panels/sql/panel.py

@@ -215,12 +215,8 @@ def duplicate_key(query):
                 query["rgb_color"] = self._databases[alias]["rgb_color"]
                 try:
                     query["width_ratio"] = (query["duration"] / self._sql_time) * 100
-                    query["width_ratio_relative"] = (
-                        100.0 * query["width_ratio"] / (100.0 - width_ratio_tally)
-                    )
                 except ZeroDivisionError:
                     query["width_ratio"] = 0
-                    query["width_ratio_relative"] = 0
                 query["start_offset"] = width_ratio_tally
                 query["end_offset"] = query["width_ratio"] + query["start_offset"]
                 width_ratio_tally += query["width_ratio"]

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -421,39 +421,21 @@
 #djDebug .djdt-timeline {
     width: 30%;
 }
-#djDebug .djDebugTimeline {
-    position: relative;
-    height: 100%;
-    min-height: 100%;
-}
-#djDebug div.djDebugLineChart {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    vertical-align: middle;
-}
-#djDebug div.djDebugLineChart strong {
-    text-indent: -10000em;
-    display: block;
-    font-weight: normal;
-    vertical-align: middle;
-    background-color: #ccc;
-}
 
-#djDebug div.djDebugLineChartWarning strong {
-    background-color: #900;
+#djDebug svg.djDebugLineChart {
+    width: 100%;
+    height: 1.5em;
 }
 
-#djDebug .djDebugInTransaction div.djDebugLineChart strong {
-    background-color: #d3ff82;
+#djDebug svg.djDebugLineChartWarning rect {
+    fill: #900;
 }
-#djDebug .djDebugStartTransaction div.djDebugLineChart strong {
-    border-left: 1px solid #94b24d;
+
+#djDebug svg.djDebugLineChartInTransaction rect {
+    fill: #d3ff82;
 }
-#djDebug .djDebugEndTransaction div.djDebugLineChart strong {
-    border-right: 1px solid #94b24d;
+#djDebug svg.djDebugLineChart line {
+    stroke: #94b24d;
 }
 
 #djDebug .djdt-panelContent ul.djdt-stats {

debug_toolbar/static/debug_toolbar/js/toolbar.timer.js

@@ -15,17 +15,17 @@ function addRow(stat, endStat) {
     if (endStat) {
         // Render a start through end bar
         row.innerHTML = '<td>' + stat.replace('Start', '') + '</td>' +
-            '<td class="djdt-timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong>&#160;</strong></div></div></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>' + (performance.timing[stat] - timingOffset) + ' (+' + (performance.timing[endStat] - performance.timing[stat]) + ')</td>';
-        row.querySelector('strong').style.width = getCSSWidth(stat, endStat);
+        row.querySelector('rect').setAttribute('width', getCSSWidth(stat, endStat));
     } else {
         // Render a point in time
         row.innerHTML = '<td>' + stat + '</td>' +
-            '<td class="djdt-timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong>&#160;</strong></div></div></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>' + (performance.timing[stat] - timingOffset) + '</td>';
-        row.querySelector('strong').style.width = '2px';
+        row.querySelector('rect').setAttribute('width', 2);
     }
-    row.querySelector('.djDebugLineChart').style.left = getLeft(stat) + '%';
+    row.querySelector('rect').setAttribute('x', getLeft(stat));
     document.querySelector('#djDebugBrowserTimingTableBody').appendChild(row);
 }
 

debug_toolbar/templates/debug_toolbar/panels/sql.html

@@ -34,7 +34,7 @@
     </thead>
     <tbody>
       {% for query in queries %}
-        <tr class="{% if query.is_slow %} djDebugRowWarning{% endif %}{% if query.starts_trans %} djDebugStartTransaction{% endif %}{% if query.ends_trans %} djDebugEndTransaction{% endif %}{% if query.in_trans %} djDebugInTransaction{% endif %}" id="sqlMain_{{ forloop.counter }}">
+        <tr class="{% if query.is_slow %} djDebugRowWarning{% endif %}" id="sqlMain_{{ forloop.counter }}">
           <td class="djdt-color"><span style="background-color:rgb({{ query.rgb_color|join:', '}})">&#160;</span></td>
           <td class="djdt-toggle">
             <a class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}" data-toggle-open="+" data-toggle-close="-" href="">+</a>
@@ -57,7 +57,15 @@
             {% endif %}
           </td>
           <td class="djdt-timeline">
-            <div class="djDebugTimeline"><div class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}" style="left:{{ query.start_offset|unlocalize }}%"><strong style="width:{{ query.width_ratio_relative|unlocalize }}%;background-color:{{ query.trace_color }}">{{ query.width_ratio }}%</strong></div></div>
+            <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 %}
+                <line x1="{{ query.start_offset|unlocalize }}" y1="0" x2="{{ query.start_offset|unlocalize }}" y2="5" />
+              {% endif %}
+              {% if query.ends_trans %}
+                <line x1="{{ query.end_offset|unlocalize }}" y1="0" x2="{{ query.end_offset|unlocalize }}" y2="5" />
+              {% endif %}
+            </svg>
           </td>
           <td class="djdt-time">
             {{ query.duration|floatformat:"2" }}

debug_toolbar/templates/debug_toolbar/panels/versions.html

@@ -1,8 +1,8 @@
 {% load i18n %}
 <table>
   <colgroup>
-    <col style="width:15%">
-    <col style="width:15%">
+    <col class="djdt-width-20">
+    <col class="djdt-width-20">
     <col>
   </colgroup>
   <thead>