From 87364f7049d16073a7ba8f2ad95e23867b9e622c Mon Sep 17 00:00:00 2001
From: Jon Dufresne <jon.dufresne@gmail.com>
Date: Sat, 7 Dec 2019 14:08:00 -0800
Subject: [PATCH] Remove unnecessary JavaScript function applyStyle()

This function iterated over elements and converted data-* attributes to
style attributes of the same name. Instead of using JavaScript, simply
assign these values as style attributes to begin with. This removes the
JavaScript execution time and reduces the number of JavaScript files
included with the project as well as downloaded at runtime.
---
 debug_toolbar/static/debug_toolbar/js/toolbar.js     |  7 -------
 .../static/debug_toolbar/js/toolbar.profiling.js     |  3 ---
 debug_toolbar/static/debug_toolbar/js/toolbar.sql.js |  5 -----
 .../templates/debug_toolbar/panels/profiling.html    |  4 +---
 .../templates/debug_toolbar/panels/sql.html          | 12 +++++-------
 .../templates/debug_toolbar/panels/sql_explain.html  |  2 --
 .../templates/debug_toolbar/panels/sql_profile.html  |  2 --
 .../templates/debug_toolbar/panels/sql_select.html   |  2 --
 8 files changed, 6 insertions(+), 31 deletions(-)
 delete mode 100644 debug_toolbar/static/debug_toolbar/js/toolbar.profiling.js
 delete mode 100644 debug_toolbar/static/debug_toolbar/js/toolbar.sql.js

diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index fff7a2f41..487e9c68d 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -312,12 +312,6 @@
                 return value;
             }
         },
-        applyStyle: function(name) {
-            var selector = '#djDebug [data-' + name + ']';
-            document.querySelectorAll(selector).forEach(function(element) {
-                element.style[name] = element.getAttribute('data-' + name);
-            });
-        }
     };
     window.djdt = {
         show_toolbar: djdt.show_toolbar,
@@ -325,7 +319,6 @@
         init: djdt.init,
         close: djdt.hide_one_level,
         cookie: djdt.cookie,
-        applyStyle: djdt.applyStyle
     };
     document.addEventListener('DOMContentLoaded', djdt.init);
 })();
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.profiling.js b/debug_toolbar/static/debug_toolbar/js/toolbar.profiling.js
deleted file mode 100644
index 5823cfbcd..000000000
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.profiling.js
+++ /dev/null
@@ -1,3 +0,0 @@
-(function () {
-    djdt.applyStyle('padding-left');
-})();
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.sql.js b/debug_toolbar/static/debug_toolbar/js/toolbar.sql.js
deleted file mode 100644
index 65093c8ee..000000000
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.sql.js
+++ /dev/null
@@ -1,5 +0,0 @@
-(function () {
-    djdt.applyStyle('background-color');
-    djdt.applyStyle('left');
-    djdt.applyStyle('width');
-})();
diff --git a/debug_toolbar/templates/debug_toolbar/panels/profiling.html b/debug_toolbar/templates/debug_toolbar/panels/profiling.html
index 953f8477f..4073cff41 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/profiling.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/profiling.html
@@ -14,7 +14,7 @@
 		{% for call in func_list %}
 			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %} djDebugProfileRow{% for parent_id in call.parent_ids %} djToggleDetails_{{ parent_id }}{% endfor %}" depth="{{ call.depth }}" id="profilingMain_{{ call.id }}">
 				<td>
-					<div data-padding-left="{{ call.indent }}px">
+					<div style="padding-left:{{ call.indent }}px">
 						{% if call.has_subfuncs %}
 							<a class="djProfileToggleDetails djToggleSwitch" data-toggle-name="profilingMain" data-toggle-id="{{ call.id }}" data-toggle-open="+" data-toggle-close="-" href>-</a>
 						{% else %}
@@ -32,5 +32,3 @@
 		{% endfor %}
 	</tbody>
 </table>
-
-<script src="{% static 'debug_toolbar/js/toolbar.profiling.js' %}" defer></script>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html
index da7e161a2..9dbb6827e 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql.html
@@ -3,7 +3,7 @@
 	<ul class="djdt-stats">
 		{% for alias, info in databases %}
 			<li>
-				<strong class="djdt-label"><span data-background-color="rgb({{ info.rgb_color|join:", " }})" class="djdt-color">&#160;</span> {{ alias }}</strong>
+				<strong class="djdt-label"><span style="background-color:rgb({{ info.rgb_color|join:', ' }})" class="djdt-color">&#160;</span> {{ alias }}</strong>
 				<span class="djdt-info">{{ info.time_spent|floatformat:"2" }} ms ({% blocktrans count info.num_queries as num %}{{ num }} query{% plural %}{{ num }} queries{% endblocktrans %}
 				{% if info.similar_count %}
 					{% blocktrans with count=info.similar_count trimmed %}
@@ -34,7 +34,7 @@
 		<tbody>
 			{% for query in queries %}
 				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}{% 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 }}">
-					<td class="djdt-color"><span data-background-color="rgb({{ query.rgb_color|join:", " }})">&#160;</span></td>
+					<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>
 					</td>
@@ -44,19 +44,19 @@
 						</div>
 						{% if query.similar_count %}
 							<strong>
-								<span data-background-color="{{ query.similar_color }}">&#160;</span>
+								<span style="background-color:{{ query.similar_color }}">&#160;</span>
 								{% blocktrans with count=query.similar_count %}{{ count }} similar queries.{% endblocktrans %}
 							</strong>
 						{% endif %}
 						{% if query.duplicate_count %}
 							<strong>
-								<span data-background-color="{{ query.duplicate_color }}">&#160;</span>
+								<span style="background-color:{{ query.duplicate_color }}">&#160;</span>
 								{% blocktrans with dupes=query.duplicate_count %}Duplicated {{ dupes }} times.{% endblocktrans %}
 							</strong>
 						{% endif %}
 					</td>
 					<td class="djdt-timeline">
-						<div class="djDebugTimeline"><div class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}" data-left="{{ query.start_offset|unlocalize }}%"><strong data-width="{{ query.width_ratio_relative|unlocalize }}%" data-background-color="{{ query.trace_color }}">{{ query.width_ratio }}%</strong></div></div>
+						<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>
 					</td>
 					<td class="djdt-time">
 						{{ query.duration|floatformat:"2" }}
@@ -113,5 +113,3 @@
 {% else %}
 	<p>{% trans "No SQL queries were recorded during this request." %}</p>
 {% endif %}
-
-<script src="{% static 'debug_toolbar/js/toolbar.sql.js' %}" defer></script>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html b/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
index 0c6124c41..2f8d90c1f 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
@@ -33,5 +33,3 @@ <h3>{% trans "SQL explained" %}</h3>
 		</table>
 	</div>
 </div>
-
-<script src="{% static 'debug_toolbar/js/toolbar.sql.js' %}" defer></script>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html b/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html
index 8b1f711cf..109b18d2d 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html
@@ -40,5 +40,3 @@ <h3>{% trans "SQL profiled" %}</h3>
 		{% endif %}
 	</div>
 </div>
-
-<script src="{% static 'debug_toolbar/js/toolbar.sql.js' %}" defer></script>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql_select.html b/debug_toolbar/templates/debug_toolbar/panels/sql_select.html
index 6c3765163..b70a15223 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql_select.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql_select.html
@@ -37,5 +37,3 @@ <h3>{% trans "SQL selected" %}</h3>
 		{% endif %}
 	</div>
 </div>
-
-<script src="{% static 'debug_toolbar/js/toolbar.sql.js' %}" defer></script>