From 1d0f85c16e55cea44af1c092780be393089ef960 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <tobias.bengfort@posteo.de>
Date: Thu, 19 Mar 2020 21:30:48 +0100
Subject: [PATCH 1/5] implement linecharts using svg

---
 .../static/debug_toolbar/css/toolbar.css      | 23 ++++---------------
 .../static/debug_toolbar/js/toolbar.timer.js  | 10 ++++----
 .../templates/debug_toolbar/panels/sql.html   |  4 +++-
 3 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css
index e0a0f21ae..822a3d3a2 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css
@@ -421,25 +421,10 @@
 #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 svg.djDebugLineChart {
+    width: 100%;
+    height: 1.5em;
 }
 
 #djDebug div.djDebugLineChartWarning strong {
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.timer.js b/debug_toolbar/static/debug_toolbar/js/toolbar.timer.js
index fe8ee7310..517994115 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.timer.js
+++ b/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);
 }
 
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html
index e0072d157..e4157cf47 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql.html
@@ -57,7 +57,9 @@
             {% 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" 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 }}" />
+            </svg>
           </td>
           <td class="djdt-time">
             {{ query.duration|floatformat:"2" }}

From 5746c78d0a18e07e17367bf6c0354c2bf630185a Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <tobias.bengfort@posteo.de>
Date: Thu, 19 Mar 2020 22:02:19 +0100
Subject: [PATCH 2/5] use class instead of inline style

---
 debug_toolbar/static/debug_toolbar/css/toolbar.css         | 3 +++
 debug_toolbar/templates/debug_toolbar/panels/versions.html | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css
index 822a3d3a2..7d3bf06b1 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css
@@ -534,6 +534,9 @@
     margin: 0 27px 27px 27px;
 }
 
+#djDebug .djdt-width-15 {
+    width: 15%;
+}
 #djDebug .djdt-width-20 {
     width: 20%;
 }
diff --git a/debug_toolbar/templates/debug_toolbar/panels/versions.html b/debug_toolbar/templates/debug_toolbar/panels/versions.html
index c6f7ae1f7..0577995a4 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/versions.html
+++ b/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-15">
+    <col class="djdt-width-15">
     <col>
   </colgroup>
   <thead>

From cb71d17b43c2f19c0821075a846824b3c472ba6f Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <tobias.bengfort@posteo.de>
Date: Mon, 30 Mar 2020 16:45:21 +0200
Subject: [PATCH 3/5] reuse djdt-width-20

---
 debug_toolbar/static/debug_toolbar/css/toolbar.css         | 3 ---
 debug_toolbar/templates/debug_toolbar/panels/versions.html | 4 ++--
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css
index 7d3bf06b1..822a3d3a2 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css
@@ -534,9 +534,6 @@
     margin: 0 27px 27px 27px;
 }
 
-#djDebug .djdt-width-15 {
-    width: 15%;
-}
 #djDebug .djdt-width-20 {
     width: 20%;
 }
diff --git a/debug_toolbar/templates/debug_toolbar/panels/versions.html b/debug_toolbar/templates/debug_toolbar/panels/versions.html
index 0577995a4..d0ade6cfb 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/versions.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/versions.html
@@ -1,8 +1,8 @@
 {% load i18n %}
 <table>
   <colgroup>
-    <col class="djdt-width-15">
-    <col class="djdt-width-15">
+    <col class="djdt-width-20">
+    <col class="djdt-width-20">
     <col>
   </colgroup>
   <thead>

From 4a5258f2a9f2b5a585a2467d672bd8f5c48c068d Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <tobias.bengfort@posteo.de>
Date: Mon, 30 Mar 2020 17:22:24 +0200
Subject: [PATCH 4/5] fix slow and transactions

---
 .../static/debug_toolbar/css/toolbar.css          | 15 ++++++---------
 .../templates/debug_toolbar/panels/sql.html       | 10 ++++++++--
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css
index 822a3d3a2..ef26b7e69 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/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 .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 {
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html
index e4157cf47..e143ca45f 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql.html
+++ b/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,8 +57,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">

From 2ea355399f20498df7d5ef8d0ff6bdd966c23c14 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <tobias.bengfort@posteo.de>
Date: Mon, 30 Mar 2020 17:23:15 +0200
Subject: [PATCH 5/5] rm width_ratio_relative

seems more plausible to me
---
 debug_toolbar/panels/sql/panel.py                     | 4 ----
 debug_toolbar/templates/debug_toolbar/panels/sql.html | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/debug_toolbar/panels/sql/panel.py b/debug_toolbar/panels/sql/panel.py
index aaea2e648..5e61b0aee 100644
--- a/debug_toolbar/panels/sql/panel.py
+++ b/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"]
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html
index e143ca45f..81e88e7b3 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql.html
@@ -58,7 +58,7 @@
           </td>
           <td class="djdt-timeline">
             <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 }}" />
+              <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 %}