From 763a008fc89f9292c8fed999bca9a64936e8ffff Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <bengfort@mpib-berlin.mpg.de>
Date: Tue, 2 Feb 2021 15:06:33 +0100
Subject: [PATCH 1/2] check for unsave inline script or styles in Makefile

---
 Makefile                                                  | 2 ++
 debug_toolbar/static/debug_toolbar/css/toolbar.css        | 3 +++
 debug_toolbar/static/debug_toolbar/js/toolbar.js          | 2 ++
 debug_toolbar/static/debug_toolbar/js/utils.js            | 6 ++++++
 debug_toolbar/templates/debug_toolbar/panels/history.html | 2 +-
 .../templates/debug_toolbar/panels/profiling.html         | 2 +-
 debug_toolbar/templates/debug_toolbar/panels/sql.html     | 8 ++++----
 7 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/Makefile b/Makefile
index 0ddde5fe7..5b5ca4d76 100644
--- a/Makefile
+++ b/Makefile
@@ -8,6 +8,7 @@ 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 .
@@ -15,6 +16,7 @@ style_check: package-lock.json
 	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
diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css
index bb5f3fb1f..6bbfd3d73 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/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;
 }
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 56e07cae0..c6bf49a98 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/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");
                         });
                     }
                 }
diff --git a/debug_toolbar/static/debug_toolbar/js/utils.js b/debug_toolbar/static/debug_toolbar/js/utils.js
index 98e7e4122..3337e45af 100644
--- a/debug_toolbar/static/debug_toolbar/js/utils.js
+++ b/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) {
diff --git a/debug_toolbar/templates/debug_toolbar/panels/history.html b/debug_toolbar/templates/debug_toolbar/panels/history.html
index c43869bc5..f5e967a17 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/history.html
+++ b/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>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/profiling.html b/debug_toolbar/templates/debug_toolbar/panels/profiling.html
index ac48f8a3a..54df6c688 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="{% 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 %}
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html
index 8f81b7e09..3fc159531 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql.html
+++ b/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,7 +40,7 @@
     <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>
@@ -48,13 +48,13 @@
             <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 %}

From 905e57223d845fd48cb1d69ab7911c84ade17421 Mon Sep 17 00:00:00 2001
From: Tim Schilling <schillingt@better-simple.com>
Date: Sun, 7 Feb 2021 13:57:10 -0600
Subject: [PATCH 2/2] Apply inline styles via data-djdt-styles attribute.

---
 .../static/debug_toolbar/js/toolbar.js        |  3 +--
 .../static/debug_toolbar/js/utils.js          | 24 +++++++++++++++----
 .../debug_toolbar/panels/profiling.html       |  2 +-
 .../templates/debug_toolbar/panels/sql.html   |  8 +++----
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index c6bf49a98..d739cbdb3 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -44,8 +44,7 @@ const djdt = {
                             inner.previousElementSibling.remove(); // Remove AJAX loader
                             inner.innerHTML = data.content;
                             $$.executeScripts(data.scripts);
-                            $$.applyStyle("padding-left");
-                            $$.applyStyle("background-color");
+                            $$.applyStyles(inner);
                         });
                     }
                 }
diff --git a/debug_toolbar/static/debug_toolbar/js/utils.js b/debug_toolbar/static/debug_toolbar/js/utils.js
index 3337e45af..4683b319f 100644
--- a/debug_toolbar/static/debug_toolbar/js/utils.js
+++ b/debug_toolbar/static/debug_toolbar/js/utils.js
@@ -32,11 +32,25 @@ 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);
-        });
+    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;
+                    }
+                });
+            });
     },
 };
 
diff --git a/debug_toolbar/templates/debug_toolbar/panels/profiling.html b/debug_toolbar/templates/debug_toolbar/panels/profiling.html
index 54df6c688..837698889 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="{% for parent_id in call.parent_ids %} djToggleDetails_{{ parent_id }}{% endfor %}" id="profilingMain_{{ call.id }}">
         <td>
-          <div data-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 %}
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html
index 3fc159531..6080e9f19 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql.html
@@ -2,7 +2,7 @@
 <ul>
   {% for alias, info in databases %}
     <li>
-      <strong><span class="djdt-color" data-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,7 +40,7 @@
     <tbody>
       {% for query in queries %}
         <tr class="{% if query.is_slow %} djDebugRowWarning{% endif %}" id="sqlMain_{{ forloop.counter }}">
-          <td><span class="djdt-color" data-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>
@@ -48,13 +48,13 @@
             <div class="djDebugSql">{{ query.sql|safe }}</div>
             {% if query.similar_count %}
               <strong>
-                <span class="djdt-color" data-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" data-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 %}