fix slow and transactions

Author: xi

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -427,18 +427,15 @@
     height: 1.5em;
 }
 
-#djDebug div.djDebugLineChartWarning strong {
-    background-color:#900;
+#djDebug svg.djDebugLineChartWarning rect {
+    fill: #900;
 }
 
-#djDebug .djDebugInTransaction div.djDebugLineChart strong {
-    background-color: #d3ff82;
+#djDebug svg.djDebugLineChartInTransaction rect {
+    fill: #d3ff82;
 }
-#djDebug .djDebugStartTransaction div.djDebugLineChart strong {
-    border-left: 1px solid #94b24d;
-}
-#djDebug .djDebugEndTransaction div.djDebugLineChart strong {
-    border-right: 1px solid #94b24d;
+#djDebug svg.djDebugLineChart line {
+    stroke: #94b24d;
 }
 
 #djDebug .djdt-panelContent ul.djdt-stats {

debug_toolbar/templates/debug_toolbar/panels/sql.html

@@ -33,7 +33,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>
@@ -56,8 +56,14 @@
 						{% endif %}
 					</td>
 					<td class="djdt-timeline">
-						<svg class="djDebugLineChart" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 5" preserveAspectRatio="none" aria-label="{{ query.width_ratio }}%">
+						<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_relative|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">