Skip to content

Commit 62c91de

Browse files
gavinwahlgavinwahl
committed
Added support for Content Security Policy
In order to use debug toolbar with a content security policy enabled, no inline scripts or styles can be used. This commit replaces all `style` attributes with CSS or javascript. It uses `data` attributes to handle the dynamic styles, like width and color.
1 parent de1651b commit 62c91de

File tree

11 files changed

+39
-25
lines changed

11 files changed

+39
-25
lines changed

‎debug_toolbar/static/debug_toolbar/css/toolbar.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -569,3 +569,12 @@
569569
display: none;
570570
}
571571
}
572+
#djDebug .hidden {
573+
display: none;
574+
}
575+
#djDebug .monospace {
576+
font-family: monospace;
577+
}
578+
#djDebug .lightgrey {
579+
background-color: lightgrey;
580+
}

‎debug_toolbar/static/debug_toolbar/css/toolbar.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎debug_toolbar/static/debug_toolbar/js/toolbar.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,15 @@ window.djdt = (function(window, document, jQuery) {
140140
$.each(djdt.events.ready, function(_, callback){
141141
callback(djdt);
142142
});
143+
144+
var data_css_properties = ['background-color', 'padding-left', 'left', 'width'];
145+
for ( var i = 0; i < data_css_properties.length; i++ ) {
146+
var name = data_css_properties[i];
147+
$('#djDebug *[data-' + name + ']').each(function(index, elem) {
148+
var $elem = $(elem);
149+
$(elem).css(name, $elem.data(name));
150+
});
151+
}
143152
},
144153
toggle_content: function(elem) {
145154
if (elem.is(':visible')) {

‎debug_toolbar/static/debug_toolbar/js/toolbar.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎debug_toolbar/templates/debug_toolbar/base.html‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
{% load i18n %}
2-
<style type="text/css">
3-
@media print { #djDebug {display:none;}}
4-
</style>
52
<link rel="stylesheet" href="{{ STATIC_URL }}debug_toolbar/css/toolbar.min.css" type="text/css">
63
<script type="text/javascript" src="{{ STATIC_URL }}debug_toolbar/js/toolbar.min.js"></script>
7-
<div id="djDebug" style="display:none;" dir="ltr">
8-
<div style="display:none;" id="djDebugToolbar">
4+
<div id="djDebug" class="hidden" dir="ltr">
5+
<div class="hidden" id="djDebugToolbar">
96
<ul id="djDebugPanelList">
107
{% if panels %}
118
<li><a id="djHideToolBarButton" href="#" title="{% trans "Hide Toolbar" %}">{% trans "Hide" %} &raquo;</a></li>
@@ -32,7 +29,7 @@
3229
{% endfor %}
3330
</ul>
3431
</div>
35-
<div style="display:none;" id="djDebugToolbarHandle">
32+
<div class="hidden" id="djDebugToolbarHandle">
3633
<a title="{% trans "Show Toolbar" %}" id="djShowToolBarButton" href="#">&laquo;</a>
3734
</div>
3835
{% for panel in panels %}

‎debug_toolbar/templates/debug_toolbar/panels/cache.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ <h3>{% trans "Calls" %}</h3>
5151
{% for call in calls %}
5252
<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}" id="cacheMain_{{ forloop.counter }}">
5353
<td class="toggle">
54-
<a class="djToggleSwitch" data-toggle-name="cacheMain" data-toggle-id="{{ forloop.counter }}" data-toggle-open="+" data-toggle-close="-" href="javascript:void(0)">+</a>
54+
<a class="djToggleSwitch" data-toggle-name="cacheMain" data-toggle-id="{{ forloop.counter }}" data-toggle-open="+" data-toggle-close="-" href="#"></a>
5555
</td>
5656
<td>{{ call.time|floatformat:"4" }}</td>
5757
<td>{{ call.name|escape }}</td>
@@ -66,4 +66,4 @@ <h3>{% trans "Calls" %}</h3>
6666
{% endfor %}
6767
</tbody>
6868
</table>
69-
{% endif %}
69+
{% endif %}

‎debug_toolbar/templates/debug_toolbar/panels/profiling.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,11 @@
1313
</thead>
1414
<tbody>
1515
{% for call in func_list %}
16-
<!-- style="background:{{ call.background }}" -->
1716
<tr class="djDebugProfileRow{% for parent_id in call.parent_ids %} djToggleDetails_{{ parent_id }}{% endfor %}" depth="{{ call.depth }}">
1817
<td>
19-
<div style="padding-left: {{ call.indent }}px;">
18+
<div data-padding-left="{{ call.indent }}px">
2019
{% if call.has_subfuncs %}
21-
<a class="djProfileToggleDetails djToggleSwitch" data-toggle-id="{{ call.id }}" data-toggle-open="+" data-toggle-close="-" href="javascript:void(0)">-</a>
20+
<a class="djProfileToggleDetails djToggleSwitch" data-toggle-id="{{ call.id }}" data-toggle-open="+" data-toggle-close="-" href="#">-</a>
2221
{% else %}
2322
<span class="djNoToggleSwitch"></span>
2423
{% endif %}
@@ -34,10 +33,10 @@
3433
{% if call.line_stats_text %}
3534
<tr class="djToggleDetails_{{ call.id }}{% for parent_id in call.parent_ids %} djToggleDetails_{{ parent_id }}{% endfor %}">
3635
<td colspan="6">
37-
<div style="padding-left: {{ call.indent }}px;"><pre>{{ call.line_stats_text }}</pre></div>
36+
<div data-padding-left="{{ call.indent }}px"><pre>{{ call.line_stats_text }}</pre></div>
3837
</td>
3938
</tr>
4039
{% endif %}
4140
{% endfor %}
4241
</tbody>
43-
</table>
42+
</table>

‎debug_toolbar/templates/debug_toolbar/panels/request_vars.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ <h4>{% trans 'COOKIES Variables' %}</h4>
3232
{% if cookies %}
3333
<table>
3434
<colgroup>
35-
<col style="width:20%"/>
35+
<col data-width="20%"/>
3636
<col/>
3737
</colgroup>
3838
<thead>
@@ -58,7 +58,7 @@ <h4>{% trans 'SESSION Variables' %}</h4>
5858
{% if session %}
5959
<table>
6060
<colgroup>
61-
<col style="width:20%"/>
61+
<col data-width="20%"/>
6262
<col/>
6363
</colgroup>
6464
<thead>

‎debug_toolbar/templates/debug_toolbar/panels/sql.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<ul class="stats">
55
{% for alias, info in databases %}
66
<li>
7-
<strong class="label"><span style="background-color: rgb({{ info.rgb_color|join:", " }})" class="color">&nbsp;</span> {{ alias }}</strong>
7+
<strong class="label"><span data-background-color="rgb({{ info.rgb_color|join:", " }})" class="color">&nbsp;</span> {{ alias }}</strong>
88
<span class="info">{{ info.time_spent|floatformat:"2" }} ms ({% blocktrans count info.num_queries as num %}{{ num }} query{% plural %}{{ num }} queries{% endblocktrans %})</span>
99
</li>
1010
{% endfor %}
@@ -25,17 +25,17 @@
2525
<tbody>
2626
{% for query in queries %}
2727
<tr class="djDebugHoverable {% 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 }}">
28-
<td class="color"><span style="background-color: rgb({{ query.rgb_color|join:", " }});">&nbsp;</span></td>
28+
<td class="color"><span data-background-color="rgb({{ info.rgb_color|join:", " }})">&nbsp;</span></td>
2929
<td class="toggle">
30-
<a class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}" data-toggle-open="+" data-toggle-close="-" href="javascript:void(0)">+</a>
30+
<a class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}" data-toggle-open="+" data-toggle-close="-" href="#">+</a>
3131
</td>
3232
<td class="query">
3333
<div class="djDebugSqlWrap">
3434
<div class="djDebugSql">{{ query.sql|safe }}</div>
3535
</div>
3636
</td>
3737
<td class="timeline">
38-
<div class="djDebugTimeline"><div class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}" style="left:{{ query.start_offset|dotted_number }}%;"><strong style="width:{{ query.width_ratio_relative|dotted_number }}%;">{{ query.width_ratio }}%</strong></div></div>
38+
<div class="djDebugTimeline"><div class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}" data-left="{{ query.start_offset|dotted_number }}%"><strong data-width="{{ query.width_ratio_relative|dotted_number }}%">{{ query.width_ratio }}%</strong></div></div>
3939
</td>
4040
<td class="time">
4141
{{ query.duration|floatformat:"2" }}
@@ -71,7 +71,7 @@
7171
{% for line in query.template_info.context %}
7272
<tr>
7373
<td>{{ line.num }}</td>
74-
<td><code style="font-family: monospace;{% if line.highlight %}background-color: lightgrey{% endif %}">{{ line.content }}</code></td>
74+
<td><code class="monospace{% if line.highlight %} lightgrey{% endif %}">{{ line.content }}</code></td>
7575
</tr>
7676
{% endfor %}
7777
</table>

‎debug_toolbar/templates/debug_toolbar/panels/templates.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ <h4>{% blocktrans count templates|length as template_count %}Template{% plural %
1919
{% if template.context %}
2020
<dd>
2121
<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext"><span class="toggleArrow">&#x25B6;</span> {% trans 'Toggle Context' %}</a></div>
22-
<div class="djTemplateHideContextDiv" style="display:none;"><code>{{ template.context }}</code></div>
22+
<div class="djTemplateHideContextDiv hidden"><code>{{ template.context }}</code></div>
2323
</dd>
2424
{% endif %}
2525
{% endfor %}
@@ -35,7 +35,7 @@ <h4>{% blocktrans count context_processors|length as context_processors_count %}
3535
<dt><strong>{{ key|escape }}</strong></dt>
3636
<dd>
3737
<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext"><span class="toggleArrow">&#x25B6;</span> {% trans 'Toggle Context' %}</a></div>
38-
<div class="djTemplateHideContextDiv" style="display:none;"><code>{{ value|escape }}</code></div>
38+
<div class="djTemplateHideContextDiv hidden"><code>{{ value|escape }}</code></div>
3939
</dd>
4040
{% endfor %}
4141
</dl>

0 commit comments

Comments
 (0)