Debug toolbar markup is now XHTML compliant.

Author: robhudson

debug_toolbar/media/debug_toolbar/toolbar.css

@@ -129,7 +129,10 @@
 	opacity:1.0;
 }
 
-#djDebug pre {
+#djDebug code {
+	display:block;
+	font-family:Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", monospace;
+	white-space:pre;
 	background-color:#ffffff;
 	overflow:auto;
 }
@@ -222,9 +225,6 @@
 	padding-right:.5em;
 }
 
-#djDebug .panelContent code {
-	font-family:Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", monospace;
-}
 /*
 #djDebug .panelContent p a:hover, #djDebug .panelContent dd a:hover {
 	color:#111;

debug_toolbar/media/debug_toolbar/toolbar.min.css

@@ -1,21 +1,25 @@
 {% load i18n %}
 <script type="text/javascript" charset="utf-8">
+/* <![CDATA[ */
 	// When jQuery is sourced, it's going to overwrite whatever might be in the
 	// '$' variable, so store a reference of it in a temporary variable...
 	var _$ = window.$;
 	if (typeof jQuery == 'undefined') {
 		var jquery_url = '{{ BASE_URL }}/__debug__/m/jquery.js';
 		document.write(unescape('%3Cscript src="' + jquery_url + '" type="text/javascript"%3E%3C/script%3E'));
 	}
+/* ]]> */
 </script>
 <script type="text/javascript" src="{{ BASE_URL }}/__debug__/m/toolbar.min.js"></script>
 <script type="text/javascript" charset="utf-8">
+/* <![CDATA[ */
 	// Now that jQuery is done loading, put the '$' variable back to what it was...
 	var $ = _$;
+	$(document).ready(function() {
+		$('head').append('<link rel="stylesheet" href="{{ BASE_URL }}/__debug__/m/toolbar.min.css" type="text/css" />');
+	});
+/* ]]> */
 </script>
-<style type="text/css">
-	@import url({{ BASE_URL }}/__debug__/m/toolbar.min.css);
-</style>
 <div id="djDebug">
 	<div style="display:none;" id="djDebugToolbar">
 		<ul id="djDebugPanelList">
@@ -33,7 +37,7 @@
 					{% endif %}
 					{{ panel.nav_title }}
 					{% with panel.nav_subtitle as subtitle %}
-						{% if subtitle %}<br><small>{{ subtitle }}</small>{% endif %}
+						{% if subtitle %}<br /><small>{{ subtitle }}</small>{% endif %}
 					{% endwith %}
 					{% if panel.has_content %}
 						</a>

debug_toolbar/templates/debug_toolbar/base.html

@@ -15,11 +15,11 @@
 				<td>
 				{% if query.params %}
 					{% if query.is_select %}
-						<a class="remoteCall" href="/__debug__/sql_select/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&duration={{ query.duration|floatformat:"2"|urlencode }}&hash={{ query.hash }}">SELECT</a><br>
+						<a class="remoteCall" href="/__debug__/sql_select/?sql={{ query.raw_sql|urlencode }}&amp;params={{ query.params|urlencode }}&amp;duration={{ query.duration|floatformat:"2"|urlencode }}&amp;hash={{ query.hash }}">SELECT</a><br />
 					{% endif %}
-					<a class="remoteCall" href="/__debug__/sql_explain/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&duration={{ query.duration|floatformat:"2"|urlencode }}&hash={{ query.hash }}">EXPLAIN</a><br>
+					<a class="remoteCall" href="/__debug__/sql_explain/?sql={{ query.raw_sql|urlencode }}&amp;params={{ query.params|urlencode }}&amp;duration={{ query.duration|floatformat:"2"|urlencode }}&amp;hash={{ query.hash }}">EXPLAIN</a><br />
 					{% if is_mysql %}
-						<a class="remoteCall" href="/__debug__/sql_profile/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&duration={{ query.duration|floatformat:"2"|urlencode }}&hash={{ query.hash }}">PROFILE</a><br>
+						<a class="remoteCall" href="/__debug__/sql_profile/?sql={{ query.raw_sql|urlencode }}&amp;params={{ query.params|urlencode }}&amp;duration={{ query.duration|floatformat:"2"|urlencode }}&amp;hash={{ query.hash }}">PROFILE</a><br />
 					{% endif %}
 				{% endif %}
 				</td>
@@ -42,8 +42,8 @@
 								{% for file, line, method in query.stacktrace %}
 									<tr>
 										<td>{{ line }}</td>
-										<td><pre>{{ method|escape }}<pre></td>
-										<td><pre>{{ file|escape }}</pre></td>
+										<td><code>{{ method|escape }}</code></td>
+										<td><code>{{ file|escape }}</code></td>
 									</tr>
 								{% endfor %}
 							</table>
@@ -52,7 +52,7 @@
 								{% for line in query.template_info.context %}
 								<tr>
 									<td>{{ line.num }}</td>
-									<td><pre style="font-family: monospace;{% if line.highlight %}background-color: lightgrey{% endif %}">{{ line.content }}</pre></td>
+									<td><code style="font-family: monospace;{% if line.highlight %}background-color: lightgrey{% endif %}">{{ line.content }}</code></td>
 								</tr>
 								{% endfor %}
 							</table>

debug_toolbar/templates/debug_toolbar/panels/sql.html

@@ -6,7 +6,7 @@ <h3>{% trans 'Template Source' %}: <code>{{ template_name }}</code></h3>
 <div class="djDebugPanelContent">
 	<div class="scroll">
 		{% if not source.pygmentized %}
-			<pre>{{ source }}</pre>
+			<code>{{ source }}</code>
 		{% else %}
 			{{ source }}
 		{% endif %}

debug_toolbar/templates/debug_toolbar/panels/template_source.html

@@ -19,7 +19,7 @@ <h4>{% trans "Template" %}{{ templates|length|pluralize }}</h4>
 	{% if template.context %}
 	<dd>
 		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext"><span class="toggleArrow">&#x25B6;</span> {% trans 'Toggle Context' %}</a></div>
-		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ template.context }}</pre></div>
+		<div class="djTemplateHideContextDiv" style="display:none;"><code>{{ template.context }}</code></div>
 	</dd>
 	{% endif %}
 {% endfor %}
@@ -35,7 +35,7 @@ <h4>{% trans 'Context processor' %}{{ context_processors|length|pluralize }}</h4
 	<dt><strong>{{ key|escape }}</strong></dt>
 	<dd>
 		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext"><span class="toggleArrow">&#x25B6;</span> {% trans 'Toggle Context' %}</a></div>
-		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ value|escape }}</pre></div>
+		<div class="djTemplateHideContextDiv" style="display:none;"><code>{{ value|escape }}</code></div>
 	</dd>
 {% endfor %}
 </dl>