Skip to content

Commit d8dec1e

Browse files
gavinwahlThomas Grainger
gavinwahl
authored and
Thomas Grainger
committed
Remove the use of inline styles for CSP compatibility
Conflicts: debug_toolbar/templates/debug_toolbar/panels/profiling.html
1 parent 1d11c7b commit d8dec1e

File tree

13 files changed

+58
-30
lines changed

13 files changed

+58
-30
lines changed

‎debug_toolbar/static/debug_toolbar/css/print.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#djDebug {
2+
display:none;
3+
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -646,3 +646,16 @@
646646
display: none;
647647
}
648648
}
649+
650+
#djDebug .width-20 {
651+
width: 20%;
652+
}
653+
#djDebug .width-60 {
654+
width: 60%;
655+
}
656+
#djDebug .width-60 {
657+
width: 60%;
658+
}
659+
#djDebug .highlighted {
660+
background-color: lightgrey;
661+
}

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -285,13 +285,21 @@
285285

286286
return value;
287287
}
288+
},
289+
applyStyle: function(name) {
290+
$('#djDebug [data-' + name + ']').each(function() {
291+
var css = {};
292+
css[name] = $(this).data(name);
293+
$(this).css(css);
294+
});
288295
}
289296
};
290297
$.extend(publicAPI, {
291298
show_toolbar: djdt.show_toolbar,
292299
hide_toolbar: djdt.hide_toolbar,
293300
close: djdt.close,
294-
cookie: djdt.cookie
301+
cookie: djdt.cookie,
302+
applyStyle: djdt.applyStyle
295303
});
296304
$(document).ready(djdt.init);
297305
})(djdt.jQuery, djdt);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,5 @@
1717
subcalls.hide();
1818
}
1919
});
20+
djdt.applyStyle('padding-left');
2021
})(djdt.jQuery);

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,7 @@
44
$(this).parent().find('.djDebugCollapsed').toggle();
55
$(this).parent().find('.djDebugUncollapsed').toggle();
66
});
7+
djdt.applyStyle('background-color');
8+
djdt.applyStyle('left');
9+
djdt.applyStyle('width');
710
})(djdt.jQuery);

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,17 @@
2424
if (endStat) {
2525
// Render a start through end bar
2626
$row.html('<td>' + stat.replace('Start', '') + '</td>' +
27-
'<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:' + getCSSWidth(stat, endStat) + ';">&nbsp;</strong></div></div></td>' +
27+
'<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong>&nbsp;</strong></div></div></td>' +
2828
'<td>' + (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ')</td>');
29+
$row.find('strong').css({width: getCSSWidth(stat, endStat)});
2930
} else {
3031
// Render a point in time
3132
$row.html('<td>' + stat + '</td>' +
32-
'<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:2px;">&nbsp;</strong></div></div></td>' +
33+
'<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong>&nbsp;</strong></div></div></td>' +
3334
'<td>' + (perf.timing[stat] - timingOffset) + '</td>');
35+
$row.find('strong').css({width: 2});
3436
}
37+
$row.find('djDebugLineChart').css({left: getLeft(stat) + '%'});
3538
$('#djDebugBrowserTimingTableBody').append($row);
3639
}
3740

‎debug_toolbar/templates/debug_toolbar/base.html

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
{% load i18n %}{% load static from staticfiles %}{% load url from future %}
2-
<style type="text/css">
3-
@media print { #djDebug {display:none;}}
4-
</style>
2+
<link rel="stylesheet" href="{% static 'debug_toolbar/css/print.css' %}" type="text/css" media="print" />
53
<link rel="stylesheet" href="{% static 'debug_toolbar/css/toolbar.css' %}" type="text/css" />
64
{% if toolbar.config.JQUERY_URL %}
75
<!-- Prevent our copy of jQuery from registering as an AMD module on sites that use RequireJS. -->
@@ -12,10 +10,10 @@
1210
<script src="{% static 'debug_toolbar/js/jquery_existing.js' %}"></script>
1311
{% endif %}
1412
<script src="{% static 'debug_toolbar/js/toolbar.js' %}"></script>
15-
<div id="djDebug" style="display:none;" dir="ltr"
13+
<div id="djDebug" hidden dir="ltr"
1614
data-store-id="{{ toolbar.store_id }}" data-render-panel-url="{% url 'djdt:render_panel' %}"
1715
{{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}>
18-
<div style="display:none;" id="djDebugToolbar">
16+
<div hidden id="djDebugToolbar">
1917
<ul id="djDebugPanelList">
2018
{% if toolbar.panels %}
2119
<li><a id="djHideToolBarButton" href="#" title="{% trans "Hide toolbar" %}">{% trans "Hide" %} &#187;</a></li>
@@ -45,7 +43,7 @@
4543
{% endfor %}
4644
</ul>
4745
</div>
48-
<div style="display:none;" id="djDebugToolbarHandle">
46+
<div hidden id="djDebugToolbarHandle">
4947
<span title="{% trans "Show toolbar" %}" id="djShowToolBarButton">&#171;</span>
5048
</div>
5149
{% for panel in toolbar.panels %}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ <h4>{% trans "Calls" %}</h4>
5151
{% for call in calls %}
5252
<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}" id="cacheMain_{{ forloop.counter }}">
5353
<td class="djdt-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>

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,11 @@
1212
</thead>
1313
<tbody>
1414
{% for call in func_list %}
15-
<!-- style="background:{{ call.background }}" -->
16-
<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %} djDebugProfileRow{% for parent_id in call.parent_ids %} djToggleDetails_{{ parent_id }}{% endfor %}" depth="{{ call.depth }}">
15+
<tr class="djDebugProfileRow{% for parent_id in call.parent_ids %} djToggleDetails_{{ parent_id }}{% endfor %}" depth="{{ call.depth }}">
1716
<td>
18-
<div style="padding-left: {{ call.indent }}px;">
17+
<div data-padding-left="{{ call.indent }}px">
1918
{% if call.has_subfuncs %}
20-
<a class="djProfileToggleDetails djToggleSwitch" data-toggle-id="{{ call.id }}" data-toggle-open="+" data-toggle-close="-" href="javascript:void(0)">-</a>
19+
<a class="djProfileToggleDetails djToggleSwitch" data-toggle-id="{{ call.id }}" data-toggle-open="+" data-toggle-close="-" href>-</a>
2120
{% else %}
2221
<span class="djNoToggleSwitch"></span>
2322
{% endif %}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h4>{% trans "View information" %}</h4>
2424
<h4>{% trans "Cookies" %}</h4>
2525
<table>
2626
<colgroup>
27-
<col style="width:20%"/>
27+
<col class="width-20"/>
2828
<col/>
2929
</colgroup>
3030
<thead>
@@ -50,7 +50,7 @@ <h4>{% trans "No cookies" %}</h4>
5050
<h4>{% trans "Session data" %}</h4>
5151
<table>
5252
<colgroup>
53-
<col style="width:20%"/>
53+
<col class="width-20"/>
5454
<col/>
5555
</colgroup>
5656
<thead>
@@ -76,7 +76,7 @@ <h4>{% trans "No session data" %}</h4>
7676
<h4>{% trans "GET data" %}</h4>
7777
<table>
7878
<colgroup>
79-
<col style="width:20%"/>
79+
<col class="width-20"/>
8080
<col/>
8181
</colgroup>
8282
<thead>
@@ -102,7 +102,7 @@ <h4>{% trans "No GET data" %}</h4>
102102
<h4>{% trans "POST data" %}</h4>
103103
<table>
104104
<colgroup>
105-
<col style="width:20%"/>
105+
<col class="width-20"/>
106106
<col/>
107107
</colgr
108108
<tr>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<ul class="djdt-stats">
44
{% for alias, info in databases %}
55
<li>
6-
<strong class="djdt-label"><span style="background-color: rgb({{ info.rgb_color|join:", " }})" class="djdt-color">&#160;</span> {{ alias }}</strong>
6+
<strong class="djdt-label"><span data-background-color="rgb({{ info.rgb_color|join:", " }})" class="djdt-color">&#160;</span> {{ alias }}</strong>
77
<span class="djdt-info">{{ info.time_spent|floatformat:"2" }} ms ({% blocktrans count info.num_queries as num %}{{ num }} query{% plural %}{{ num }} queries{% endblocktrans %})</span>
88
</li>
99
{% endfor %}
@@ -24,17 +24,17 @@
2424
<tbody>
2525
{% for query in queries %}
2626
<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 }}">
27-
<td class="djdt-color"><span style="background-color: rgb({{ query.rgb_color|join:", " }});">&#160;</span></td>
27+
<td class="djdt-color"><span data-background-color="rgb({{ query.rgb_color|join:", " }})">&#160;</span></td>
2828
<td class="djdt-toggle">
29-
<a class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}" data-toggle-open="+" data-toggle-close="-" href="javascript:void(0)">+</a>
29+
<a class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}" data-toggle-open="+" data-toggle-close="-" href>+</a>
3030
</td>
3131
<td class="query">
3232
<div class="djDebugSqlWrap">
3333
<div class="djDebugSql">{{ query.sql|safe }}</div>
3434
</div>
3535
</td>
3636
<td class="timeline">
37-
<div class="djDebugTimeline"><div class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}" style="left:{{ query.start_offset|unlocalize }}%;"><strong style="width:{{ query.width_ratio_relative|unlocalize }}%; background-color:{{ query.trace_color }};">{{ query.width_ratio }}%</strong></div></div>
37+
<div class="djDebugTimeline"><div class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}" data-left="{{ query.start_offset|unlocalize }}%"><strong data-width="{{ query.width_ratio_relative|unlocalize }}%" data-background-color"{{ query.trace_color }}">{{ query.width_ratio }}%</strong></div></div>
3838
</td>
3939
<td class="djdt-time">
4040
{{ query.duration|floatformat:"2" }}
@@ -76,7 +76,7 @@
7676
{% for line in query.template_info.context %}
7777
<tr>
7878
<td>{{ line.num }}</td>
79-
<td><code style="font-family: monospace;{% if line.highlight %}background-color: lightgrey{% endif %}">{{ line.content }}</code></td>
79+
<td><code {% if line.highlight %}class="highlighted"{% endif %}>{{ line.content }}</code></td>
8080
</tr>
8181
{% endfor %}
8282
</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>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<h4>{% trans "Resource usage" %}</h4>
33
<table>
44
<colgroup>
5-
<col style="width:20%"/>
5+
<col class="width-20"/>
66
<col/>
77
</colgroup>
88
<thead>
@@ -22,13 +22,13 @@ <h4>{% trans "Resource usage" %}</h4>
2222
</table>
2323

2424
<!-- This hidden div is populated and displayed by code in toolbar.timer.js -->
25-
<div id="djDebugBrowserTiming" style="display:none">
25+
<div id="djDebugBrowserTiming" hidden>
2626
<h4>{% trans "Browser timing" %}</h4>
2727
<table>
2828
<colgroup>
29-
<col style="width:20%"/>
30-
<col style="width:60%"/>
31-
<col style="width:20%"/>
29+
<col class="width-20"/>
30+
<col class="width-60"/>
31+
<col class="width-20"/>
3232
</colgroup>
3333
<thead>
3434
<tr>

0 commit comments

Comments
 (0)