Merge branch 'graingert-csp'

Closes PR #704.

This is the first part of making the toolbar support a content
security policy. With this change a user would need to set the
script-src directive to contain 'self' 'unsafe-eval' and ajax.googleapis.com,
set the img-src directive to contain 'self' and data:.

In the future the unsafe-eval value will no longer be needed.

Author: tim-schilling

debug_toolbar/static/debug_toolbar/css/print.css

@@ -0,0 +1,3 @@
+#djDebug {
+  display:none;
+}

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -646,3 +646,13 @@
         display: none;
     }
 }
+
+#djDebug .djdt-width-20 {
+    width: 20%;
+}
+#djDebug .djdt-width-60 {
+    width: 60%;
+}
+#djDebug .djdt-highlighted {
+    background-color: lightgrey;
+}

debug_toolbar/static/debug_toolbar/js/jquery_existing.js

@@ -0,0 +1 @@
+var djdt = {jQuery: jQuery};

debug_toolbar/static/debug_toolbar/js/jquery_post.js

@@ -0,0 +1 @@
+var djdt = {jQuery: jQuery.noConflict(true)}; window.define = _djdt_define_backup;

debug_toolbar/static/debug_toolbar/js/jquery_pre.js

@@ -0,0 +1 @@
+var _djdt_define_backup = window.define; window.define = undefined;

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -285,13 +285,21 @@
 
                 return value;
             }
+        },
+        applyStyle: function(name) {
+            $('#djDebug [data-' + name + ']').each(function() {
+                var css = {};
+                css[name] = $(this).data(name);
+                $(this).css(css);
+            });
         }
     };
     $.extend(publicAPI, {
         show_toolbar: djdt.show_toolbar,
         hide_toolbar: djdt.hide_toolbar,
         close: djdt.close,
-        cookie: djdt.cookie
+        cookie: djdt.cookie,
+        applyStyle: djdt.applyStyle
     });
     $(document).ready(djdt.init);
 })(djdt.jQuery, djdt);

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

@@ -17,4 +17,5 @@
             subcalls.hide();
         }
     });
+    djdt.applyStyle('padding-left');
 })(djdt.jQuery);

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

@@ -4,4 +4,7 @@
         $(this).parent().find('.djDebugCollapsed').toggle();
         $(this).parent().find('.djDebugUncollapsed').toggle();
     });
+    djdt.applyStyle('background-color');
+    djdt.applyStyle('left');
+    djdt.applyStyle('width');
 })(djdt.jQuery);

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

@@ -24,14 +24,17 @@
         if (endStat) {
             // Render a start through end bar
             $row.html('<td>' + stat.replace('Start', '') + '</td>' +
-                      '<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:' + getCSSWidth(stat, endStat) + ';">&nbsp;</strong></div></div></td>' +
+                      '<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong>&nbsp;</strong></div></div></td>' +
                       '<td>' + (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ')</td>');
+            $row.find('strong').css({width: getCSSWidth(stat, endStat)});
         } else {
             // Render a point in time
              $row.html('<td>' + stat + '</td>' +
-                       '<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:2px;">&nbsp;</strong></div></div></td>' +
+                       '<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong>&nbsp;</strong></div></div></td>' +
                        '<td>' + (perf.timing[stat] - timingOffset) + '</td>');
+             $row.find('strong').css({width: 2});
         }
+        $row.find('djDebugLineChart').css({left: getLeft(stat) + '%'});
         $('#djDebugBrowserTimingTableBody').append($row);
     }
 

debug_toolbar/templates/debug_toolbar/base.html

@@ -1,21 +1,19 @@
 {% load i18n %}{% load static from staticfiles %}{% load url from compat %}
-<style type="text/css">
-@media print { #djDebug {display:none;}}
-</style>
+<link rel="stylesheet" href="{% static 'debug_toolbar/css/print.css' %}" type="text/css" media="print" />
 <link rel="stylesheet" href="{% static 'debug_toolbar/css/toolbar.css' %}" type="text/css" />
 {% if toolbar.config.JQUERY_URL %}
 <!-- Prevent our copy of jQuery from registering as an AMD module on sites that use RequireJS. -->
-<script>var _djdt_define_backup = window.define; window.define = undefined;</script>
+<script src="{% static 'debug_toolbar/js/jquery_pre.js' %}"></script>
 <script src="{{ toolbar.config.JQUERY_URL }}"></script>
-<script>var djdt = {jQuery: jQuery.noConflict(true)}; window.define = _djdt_define_backup;</script>
+<script src="{% static 'debug_toolbar/js/jquery_post.js' %}"></script>
 {% else %}
-<script>var djdt = {jQuery: jQuery};</script>
+<script src="{% static 'debug_toolbar/js/jquery_existing.js' %}"></script>
 {% endif %}
 <script src="{% static 'debug_toolbar/js/toolbar.js' %}"></script>
-<div id="djDebug" style="display:none;" dir="ltr"
+<div id="djDebug" hidden="hidden" dir="ltr"
      data-store-id="{{ toolbar.store_id }}" data-render-panel-url="{% url 'djdt:render_panel' %}"
      {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}>
-	<div style="display:none;" id="djDebugToolbar">
+	<div hidden="hidden" id="djDebugToolbar">
 		<ul id="djDebugPanelList">
 			{% if toolbar.panels %}
 			<li><a id="djHideToolBarButton" href="#" title="{% trans "Hide toolbar" %}">{% trans "Hide" %} &#187;</a></li>
@@ -45,7 +43,7 @@
 			{% endfor %}
 		</ul>
 	</div>
-	<div style="display:none;" id="djDebugToolbarHandle">
+	<div hidden="hidden" id="djDebugToolbarHandle">
 		<span title="{% trans "Show toolbar" %}" id="djShowToolBarButton">&#171;</span>
 	</div>
 	{% for panel in toolbar.panels %}