Restore applyStyle()

This reverts commit 87364f7.

Author: xi

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -278,6 +278,12 @@ const djdt = {
             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,

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

@@ -0,0 +1,3 @@
+(function () {
+    djdt.applyStyle('padding-left');
+})();

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

@@ -0,0 +1,3 @@
+(function () {
+    djdt.applyStyle('background-color');
+})();

debug_toolbar/templates/debug_toolbar/panels/profiling.html

@@ -14,7 +14,7 @@
     {% for call in func_list %}
       <tr class="{% for parent_id in call.parent_ids %} djToggleDetails_{{ parent_id }}{% endfor %}" id="profilingMain_{{ call.id }}">
         <td>
-          <div style="padding-left:{{ call.indent }}px">
+          <div data-padding-left="{{ call.indent }}px">
             {% if call.has_subfuncs %}
               <button type="button" class="djProfileToggleDetails djToggleSwitch" data-toggle-name="profilingMain" data-toggle-id="{{ call.id }}">-</button>
             {% else %}
@@ -32,3 +32,5 @@
     {% endfor %}
   </tbody>
 </table>
+
+<script src="{% static 'debug_toolbar/js/toolbar.profiling.js' %}" async></script>

debug_toolbar/templates/debug_toolbar/panels/sql.html

@@ -2,7 +2,7 @@
 <ul>
   {% for alias, info in databases %}
     <li>
-      <strong><span class="djdt-color" style="background-color:rgb({{ info.rgb_color|join:', ' }})"></span> {{ alias }}</strong>
+      <strong><span class="djdt-color" data-background-color="rgb({{ info.rgb_color|join:', ' }})"></span> {{ alias }}</strong>
       {{ 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 %}
@@ -40,21 +40,21 @@
     <tbody>
       {% for query in queries %}
         <tr class="{% if query.is_slow %} djDebugRowWarning{% endif %}" id="sqlMain_{{ forloop.counter }}">
-          <td><span class="djdt-color" style="background-color:rgb({{ query.rgb_color|join:', '}})"></span></td>
+          <td><span class="djdt-color" data-background-color"rgb({{ query.rgb_color|join:', '}})"></span></td>
           <td class="djdt-toggle">
             <button type="button" class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}">+</button>
           </td>
           <td>
             <div class="djDebugSql">{{ query.sql|safe }}</div>
             {% if query.similar_count %}
               <strong>
-                <span class="djdt-color" style="background-color:{{ query.similar_color }}"></span>
+                <span class="djdt-color" data-background-color"{{ query.similar_color }}"></span>
                 {% blocktrans with count=query.similar_count %}{{ count }} similar queries.{% endblocktrans %}
               </strong>
             {% endif %}
             {% if query.duplicate_count %}
               <strong>
-                <span class="djdt-color" style="background-color:{{ query.duplicate_color }}"></span>
+                <span class="djdt-color" data-background-color"{{ query.duplicate_color }}"></span>
                 {% blocktrans with dupes=query.duplicate_count %}Duplicated {{ dupes }} times.{% endblocktrans %}
               </strong>
             {% endif %}
@@ -122,3 +122,5 @@
 {% else %}
   <p>{% trans "No SQL queries were recorded during this request." %}</p>
 {% endif %}
+
+<script src="{% static 'debug_toolbar/js/toolbar.sql.js' %}" async></script>