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.

Author: jdufresne

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -312,20 +312,13 @@
                 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,
         hide_toolbar: djdt.hide_toolbar,
         init: djdt.init,
         close: djdt.hide_one_level,
         cookie: djdt.cookie,
-        applyStyle: djdt.applyStyle
     };
     document.addEventListener('DOMContentLoaded', djdt.init);
 })();

debug_toolbar/static/debug_toolbar/js/toolbar.profiling.js

@@ -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>

debug_toolbar/static/debug_toolbar/js/toolbar.sql.js

@@ -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>

debug_toolbar/templates/debug_toolbar/panels/profiling.html

@@ -33,5 +33,3 @@ <h3>{% trans "SQL explained" %}</h3>
 		</table>
 	</div>
 </div>
-
-<script src="{% static 'debug_toolbar/js/toolbar.sql.js' %}" defer></script>

debug_toolbar/templates/debug_toolbar/panels/sql.html

@@ -40,5 +40,3 @@ <h3>{% trans "SQL profiled" %}</h3>
 		{% endif %}
 	</div>
 </div>
-
-<script src="{% static 'debug_toolbar/js/toolbar.sql.js' %}" defer></script>

debug_toolbar/templates/debug_toolbar/panels/sql_explain.html

@@ -37,5 +37,3 @@ <h3>{% trans "SQL selected" %}</h3>
 		{% endif %}
 	</div>
 </div>
-
-<script src="{% static 'debug_toolbar/js/toolbar.sql.js' %}" defer></script>