Ensure the toolbar only outputs valid XML.

This allows using it in websites served with the application/xml+xhtml
mime type. Fix #221.

5 files changed, 16 insertions, 9 deletions

diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html
index a790bd1..7b42c84 100644
--- a/debug_toolbar/templates/debug_toolbar/base.html
+++ b/debug_toolbar/templates/debug_toolbar/base.html
@@ -2,13 +2,13 @@
 <style type="text/css">
 @media print { #djDebug {display:none;}}
 </style>
-<link rel="stylesheet" href="{{ STATIC_URL }}debug_toolbar/css/toolbar.min.css" type="text/css">
+<link rel="stylesheet" href="{{ STATIC_URL }}debug_toolbar/css/toolbar.min.css" type="text/css" />
 <script type="text/javascript" src="{{ STATIC_URL }}debug_toolbar/js/toolbar.min.js"></script>
 <div id="djDebug" style="display:none;" dir="ltr">
 	<div style="display:none;" id="djDebugToolbar">
 		<ul id="djDebugPanelList">
 			{% if panels %}
-			<li><a id="djHideToolBarButton" href="#" title="{% trans "Hide Toolbar" %}">{% trans "Hide" %} &raquo;</a></li>
+			<li><a id="djHideToolBarButton" href="#" title="{% trans "Hide Toolbar" %}">{% trans "Hide" %} &#187;</a></li>
 			{% else %}
 			<li id="djDebugButton">DEBUG</li>
 			{% endif %}
@@ -33,7 +33,7 @@
 		</ul>
 	</div>
 	<div style="display:none;" id="djDebugToolbarHandle">
-		<a title="{% trans "Show Toolbar" %}" id="djShowToolBarButton" href="#">&laquo;</a>
+		<a title="{% trans "Show Toolbar" %}" id="djShowToolBarButton" href="#">&#171;</a>
 	</div>
 	{% for panel in panels %}
 		{% if panel.has_content %}
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html
index 36201fc..064413c 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql.html
@@ -4,7 +4,7 @@
 	<ul class="stats">
 		{% for alias, info in databases %}
 			<li>
-				<strong class="label"><span style="background-color: rgb({{ info.rgb_color|join:", " }})" class="color">&nbsp;</span> {{ alias }}</strong>
+				<strong class="label"><span style="background-color: rgb({{ info.rgb_color|join:", " }})" class="color">&#160;</span> {{ alias }}</strong>
 				<span class="info">{{ info.time_spent|floatformat:"2" }} ms ({% blocktrans count info.num_queries as num %}{{ num }} query{% plural %}{{ num }} queries{% endblocktrans %})</span>
 			</li>
 		{% endfor %}
@@ -15,7 +15,7 @@
 	<table>
 		<thead>
 			<tr>
-				<th class="color">&nbsp;</th>
+				<th class="color">&#160;</th>
 				<th class="query" colspan="2">{% trans 'Query' %}</th>
 				<th class="timeline">{% trans 'Timeline' %}</th>
 				<th class="time">{% trans 'Time (ms)' %}</th>
@@ -25,7 +25,7 @@
 		<tbody>
 			{% for query in queries %}
 				<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 }}">
-					<td class="color"><span style="background-color: rgb({{ query.rgb_color|join:", " }});">&nbsp;</span></td>
+					<td class="color"><span style="background-color: rgb({{ query.rgb_color|join:", " }});">&#160;</span></td>
 					<td class="toggle">
 						<a class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}" data-toggle-open="+" data-toggle-close="-" href="javascript:void(0)">+</a>
 					</td>
diff --git a/debug_toolbar/utils/sql.py b/debug_toolbar/utils/sql.py
index 4e0d70d..2810699 100644
--- a/debug_toolbar/utils/sql.py
+++ b/debug_toolbar/utils/sql.py
@@ -29,5 +29,5 @@ def reformat_sql(sql):
 
 
 def swap_fields(sql):
-    return re.sub('SELECT</strong> (.*?) <strong>FROM', 'SELECT</strong> <a class="djDebugUncollapsed djDebugToggle" href="#">&bull;&bull;&bull;</a> ' +
+    return re.sub('SELECT</strong> (.*?) <strong>FROM', 'SELECT</strong> <a class="djDebugUncollapsed djDebugToggle" href="#">&#8226;&#8226;&#8226;</a> ' +
         '<a class="djDebugCollapsed djDebugToggle" href="#">\g<1></a> <strong>FROM', sql)
diff --git a/tests/tests.py b/tests/tests.py
index 1188ee0..9194325 100644
--- a/tests/tests.py
+++ b/tests/tests.py
@@ -4,6 +4,7 @@ from __future__ import unicode_literals
 
 import logging
 import threading
+from xml.etree import ElementTree as ET
 
 import django
 from django.conf import settings
@@ -191,6 +192,12 @@ class DebugToolbarIntegrationTestCase(TestCase):
         if not six.PY3:
             self.assertContains(response, 'là')
 
+    def test_xml_validation(self):
+        response = self.client.get('/regular/XML/')
+        with open('/tmp/blah.html', 'wb') as f:
+            f.write(response.content)
+        ET.fromstring(response.content)     # shouldn't raise ParseError
+
 
 class DebugToolbarNameFromObjectTest(BaseTestCase):
 
diff --git a/tests/views.py b/tests/views.py
index a903bee..8b51706 100644
--- a/tests/views.py
+++ b/tests/views.py
@@ -13,7 +13,7 @@ def execute_sql(request):
 
 
 def regular_view(request, title):
-    content = '<html><head><title>%s</title><body></body></html>' % title
+    content = '<html><head><title>%s</title></head><body></body></html>' % title
     return HttpResponse(content)
 
 
@@ -26,4 +26,4 @@ def set_session(request):
     request.session['où'] = 'où'
     if not six.PY3:
         request.session['là'.encode('utf-8')] = 'là'.encode('utf-8')
-    return HttpResponse('<html><head><title></title><body></body></html>')
+    return HttpResponse('<html><head></head><body></body></html>')