restore applyStyle()

This reverts commit 87364f7.

Author: xi

debug_toolbar/panels/profiling.py

@@ -3,6 +3,7 @@
 from colorsys import hsv_to_rgb
 from pstats import Stats
 
+from django.templatetags.static import static
 from django.utils.html import format_html
 from django.utils.translation import gettext_lazy as _
 

debug_toolbar/panels/sql/panel.py

@@ -4,6 +4,7 @@
 from pprint import saferepr
 
 from django.db import connections
+from django.templatetags.static import static
 from django.urls import path
 from django.utils.translation import gettext_lazy as _, ngettext_lazy as __
 

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -44,6 +44,8 @@ const djdt = {
                             inner.previousElementSibling.remove(); // Remove AJAX loader
                             inner.innerHTML = data.content;
                             $$.executeScripts(data.scripts);
+                            $$.applyStyle('padding-left');
+                            $$.applyStyle('background-color');
                         });
                     }
                 }
@@ -285,6 +287,7 @@ window.djdt = {
     init: djdt.init,
     close: djdt.hide_one_level,
     cookie: djdt.cookie,
+    applyStyle: djdt.applyStyle,
 };
 
 if (document.readyState !== "loading") {

debug_toolbar/static/debug_toolbar/js/utils.js

@@ -32,6 +32,12 @@ const $$ = {
             document.head.appendChild(el);
         });
     },
+    applyStyle(name) {
+        const selector = '#djDebug [data-' + name + ']';
+        document.querySelectorAll(selector).forEach(function(element) {
+            element.style[name] = element.getAttribute('data-' + name);
+       });
+    },
 };
 
 function ajax(url, init) {

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 %}

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 %}