Merge pull request #1445 from xi/fix-1248

Remove unsave inline scripts and styles

Author: matthiask

Makefile

@@ -8,13 +8,15 @@ style: package-lock.json
 	flake8
 	npx eslint --ignore-path .gitignore --fix .
 	npx prettier --ignore-path .gitignore --write $(PRETTIER_TARGETS)
+	! grep -r '\(style=\|onclick=\|<script>\|<style\)' debug_toolbar/templates/
 
 style_check: package-lock.json
 	isort -c .
 	black --target-version=py36 --check .
 	flake8
 	npx eslint --ignore-path .gitignore .
 	npx prettier --ignore-path .gitignore --check $(PRETTIER_TARGETS)
+	! grep -r '\(style=\|onclick=\|<script>\|<style\)' debug_toolbar/templates/
 
 example:
 	python example/manage.py migrate --noinput

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -601,6 +601,9 @@
 #djDebug .djdt-width-60 {
     width: 60%;
 }
+#djDebug .djdt-max-height-100 {
+    max-height: 100%;
+}
 #djDebug .djdt-highlighted {
     background-color: lightgrey;
 }

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -44,6 +44,7 @@ const djdt = {
                             inner.previousElementSibling.remove(); // Remove AJAX loader
                             inner.innerHTML = data.content;
                             $$.executeScripts(data.scripts);
+                            $$.applyStyles(inner);
                         });
                     }
                 }

debug_toolbar/static/debug_toolbar/js/utils.js

@@ -32,6 +32,26 @@ const $$ = {
             document.head.appendChild(el);
         });
     },
+    applyStyles(container) {
+        /*
+         * Given a container element, apply styles set via data-djdt-styles attribute.
+         * The format is data-djdt-styles="styleName1:value;styleName2:value2"
+         * The style names should use the CSSStyleDeclaration camel cased names.
+         */
+        container
+            .querySelectorAll("[data-djdt-styles]")
+            .forEach(function (element) {
+                const styles = element.dataset.djdtStyles || "";
+                styles.split(";").forEach(function (styleText) {
+                    const styleKeyPair = styleText.split(":");
+                    if (styleKeyPair.length === 2) {
+                        const name = styleKeyPair[0].trim();
+                        const value = styleKeyPair[1].trim();
+                        element.style[name] = value;
+                    }
+                });
+            });
+    },
 };
 
 function ajax(url, init) {

debug_toolbar/templates/debug_toolbar/panels/history.html

@@ -3,7 +3,7 @@
     {{ refresh_form }}
     <button class="refreshHistory">Refresh</button>
 </form>
-<table style="max-height:100%;">
+<table class="djdt-max-height-100">
     <thead>
         <tr>
             <th>{% trans "Time" %}</th>

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-djdt-styles="paddingLeft:{{ 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-djdt-styles="backgroundColor: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-djdt-styles="backgroundColor: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-djdt-styles="backgroundColor:{{ 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-djdt-styles="backgroundColor:{{ query.duplicate_color }}"></span>
                 {% blocktrans with dupes=query.duplicate_count %}Duplicated {{ dupes }} times.{% endblocktrans %}
               </strong>
             {% endif %}