panel width, content boxing, safe scrolling

13 files changed, 355 insertions, 271 deletions

diff --git a/debug_toolbar/media/debug_toolbar/back.png b/debug_toolbar/media/debug_toolbar/back.png
new file mode 100644
index 0000000..fa6a36b
--- /dev/null
+++ b/debug_toolbar/media/debug_toolbar/back.png
diff --git a/debug_toolbar/media/debug_toolbar/back_hover.png b/debug_toolbar/media/debug_toolbar/back_hover.png
new file mode 100644
index 0000000..774f97c
--- /dev/null
+++ b/debug_toolbar/media/debug_toolbar/back_hover.png
diff --git a/debug_toolbar/media/debug_toolbar/toolbar.css b/debug_toolbar/media/debug_toolbar/toolbar.css
index de71ad2..faf3b7a 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.css
+++ b/debug_toolbar/media/debug_toolbar/toolbar.css
@@ -137,10 +137,11 @@
     display: none;
     position: absolute;
     margin: 0;
+    margin-left: 30px;
     padding: 10px 20px;
     top: 15px;
     width: auto;
-    max-width: 700px;
+    /*max-width: 800px;*/
     min-width: 500px;
     right: 200px;
     bottom: 15px;
@@ -154,18 +155,41 @@
 	background: transparent url(panel_bg.png) repeat left top;
 }
 
-#djDebug .panelContent .panelScroll {
-	position: relative;
+#djDebug .panelContent .panelScrollWrap {
 	overflow: auto;
 	height: 90%;
-	padding: 0px 10px 10px 0px;
+	width: 100%;
+}
+
+#djDebug .panelContent .panelScrollContent {
+	width: auto;
+	margin-right: 10px;
 }
 
-#djDebug .panelContent p a, #djDebug .panelContent dl a {
+#djDebug .panelContent .boxed {
+	background-color: #fff;
+	padding: 5px;
+	border: 1px solid #c6d6da;
+}
+
+
+
+#djDebug .panelContent p a, #djDebug .panelContent dt a {
     color: #000;
+    padding: 2px 4px;
 }
-#djDebug .panelContent p a:hover, #djDebug .panelContent dl a:hover {
-    color: #900;
+#djDebug .panelContent p a:hover, #djDebug .panelContent dt a:hover {
+	background-color: #ffc;
+}
+
+#djDebug .panelContent p a, #djDebug .panelContent dd a {
+    color: #000;
+    background-color: #eee;
+    padding: 2px 4px;
+}
+#djDebug .panelContent p a:hover, #djDebug .panelContent dd a:hover {
+    color: #111;
+	background-color: #ffc;
 }
 
 #djDebug .panelContent h3 {
@@ -181,6 +205,9 @@
 
 #djDebug .panelContent h4 {
 	font-weight: normal;
+	margin-top: 0.5em;
+	font-size: 20px;
+	line-height: 24px;
 }
 
 #djDebug .panelContent code {
@@ -204,17 +231,21 @@
 }
 
 #djDebug .panelContent table {
-    width: 100%;
+    /*width: 90%;*/
     clear: both;
     border: 0;
     padding: 0;
+    margin: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
 }
 
 #djDebug .panelContent table a {
     color: #000;
+    padding: 2px 4px;
 }
 #djDebug .panelContent table a:hover {
-    color: #900;
+    background-color: #ffc;
 }
 
 #djDebug .panelContent table th {
@@ -252,10 +283,24 @@
 	background-image: url(close_hover.png);
 }
 
+#djDebug .panelContent .close.back {
+	background-image: url(back.png);
+}
+
+#djDebug .panelContent .close.back:hover  {
+	background-image: url(back_hover.png);
+}
+
+
+
 #djDebug .panelContent dt, #djDebug .panelContent dd {
     display: block;
 }
 
+#djDebug .panelContent dt {
+    margin-top: 0.75em;
+}
+
 #djDebug .panelContent dd {
     margin-left: 10px;
 }
diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html
index 5f4b7e7..a44d31e 100644
--- a/debug_toolbar/templates/debug_toolbar/base.html
+++ b/debug_toolbar/templates/debug_toolbar/base.html
@@ -54,8 +54,10 @@
 			<div id="{{ panel.dom_id }}" class="panelContent">
 				<a href="" class="close">Close</a>
 			    <h3>{{ panel.title|safe }}</h3>
-			    <div class="panelScroll">
-					{{ panel.content|safe }}
+			    <div class="panelScrollWrap">
+			        <div class="panelScrollContent">
+			            {{ panel.content|safe }}
+			        </div>
 			    </div>
 			</div>
 		{% endif %}
diff --git a/debug_toolbar/templates/debug_toolbar/panels/headers.html b/debug_toolbar/templates/debug_toolbar/panels/headers.html
index b14a50c..a6b6b59 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/headers.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/headers.html
@@ -1,16 +1,18 @@
-<table>
-	<thead>
-		<tr>
-			<th>Key</th>
-			<th>Value</th>
-		</tr>
-	</thead>
-	<tbody>
-		{% for key, value in headers.iteritems %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				<td>{{ key|escape }}</td>
-				<td>{{ value|escape }}</td>
-			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+<div class="boxed">
+    <table>
+    	<thead>
+    		<tr>
+    			<th>Key</th>
+    			<th>Value</th>
+    		</tr>
+    	</thead>
+    	<tbody>
+    		{% for key, value in headers.iteritems %}
+    			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    				<td>{{ key|escape }}</td>
+    				<td>{{ value|escape }}</td>
+    			</tr>
+    		{% endfor %}
+    	</tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/logger.html b/debug_toolbar/templates/debug_toolbar/panels/logger.html
index e6ce945..2bfab05 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/logger.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/logger.html
@@ -1,25 +1,26 @@
-{% if records %}
-	<table>
-		<thead>
-			<tr>
-				<th>Level</th>
-				<th>Time</th>
-				<th>Message</th>
-				<th>Location</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for record in records %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					<td>{{ record.level }}</td>
-					<td>{{ record.time|date:"h:i:s m/d/Y" }}</td>
-					<td>{{ record.message }}</td>
-					<td>{{ record.file }}:{{ record.line }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>No messages logged.</p>
-{% endif %}
-
+<div class="boxed">
+    {% if records %}
+    	<table>
+    		<thead>
+    			<tr>
+    				<th>Level</th>
+    				<th>Time</th>
+    				<th>Message</th>
+    				<th>Location</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for record in records %}
+    				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    					<td>{{ record.level }}</td>
+    					<td>{{ record.time|date:"h:i:s m/d/Y" }}</td>
+    					<td>{{ record.message }}</td>
+    					<td>{{ record.file }}:{{ record.line }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>No messages logged.</p>
+    {% endif %}
+</div>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/request_vars.html b/debug_toolbar/templates/debug_toolbar/panels/request_vars.html
index a65d0a5..d8c81ba 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/request_vars.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/request_vars.html
@@ -1,92 +1,103 @@
 <h4>COOKIES Variables</h4>
-{% if cookies %}
-	<table>
-		<colgroup>
-			<col style="width:20%"/>
-			<col/>
-		</colgroup>
-		<thead>
-			<tr>
-				<th>Key</th>
-				<th>Value</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for key, value in cookies %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					<td>{{ key|escape }}</td>
-					<td>{{ value|escape }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>None</p>
-{% endif %}
+<div class="boxed">
+    {% if cookies %}
+    	<table>
+    		<colgroup>
+    			<col style="width:20%"/>
+    			<col/>
+    		</colgroup>
+    		<thead>
+    			<tr>
+    				<th>Key</th>
+    				<th>Value</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for key, value in cookies %}
+    				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    					<td>{{ key|escape }}</td>
+    					<td>{{ value|escape }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
+
 <h4>SESSION Variables</h4>
-{% if session %}
-	<table>
-		<colgroup>
-			<col style="width:20%"/>
-			<col/>
-		</colgroup>
-		<thead>
-			<tr>
-				<th>Key</th>
-				<th>Value</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for key, value in session %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					<td>{{ key|escape }}</td>
-					<td>{{ value|escape }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>None</p>
-{% endif %}
+<div class="boxed">
+    {% if session %}
+    	<table>
+    		<colgroup>
+    			<col style="width:20%"/>
+    			<col/>
+    		</colgroup>
+    		<thead>
+    			<tr>
+    				<th>Key</th>
+    				<th>Value</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for key, value in session %}
+    				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    					<td>{{ key|escape }}</td>
+    					<td>{{ value|escape }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
+
 <h4>GET Variables</h4>
-{% if get %}
-	<table>
-		<thead>
-			<tr>
-				<th>Key</th>
-				<th>Value</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for key, value in get %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					<td>{{ key|escape }}</td>
-					<td>{{ value|join:", "|escape }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>None</p>
-{% endif %}
+<div class="boxed">
+    {% if get %}
+    	<table>
+    		<thead>
+    			<tr>
+    				<th>Key</th>
+    				<th>Value</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for key, value in get %}
+    				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    					<td>{{ key|escape }}</td>
+    					<td>{{ value|join:", "|escape }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
+
 <h4>POST Variables</h4>
-{% if post %}
-	<table>
-		<thead>
-			<tr>
-				<th>Key</th>
-				<th>Value</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for key, value in post %}
-				<tr class="{% cycle 'row1' 'row2' %}">
-					<td>{{ key|escape }}</td>
-					<td>{{ value|join:", "|escape }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>None</p>
-{% endif %}
+<div class="boxed">
+    {% if post %}
+    	<table>
+    		<thead>
+    			<tr>
+    				<th>Key</th>
+    				<th>Value</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for key, value in post %}
+    				<tr class="{% cycle 'row1' 'row2' %}">
+    					<td>{{ key|escape }}</td>
+    					<td>{{ value|join:", "|escape }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html b/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html
index c53ee4d..8c65700 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html
@@ -1,16 +1,18 @@
-<table>
-	<thead>
-		<tr>
-			<th>Setting</th>
-			<th>Value</th>
-		</tr>
-	</thead>
-	<tbody>
-		{% for var in settings.items|dictsort:"0" %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				<td>{{ var.0 }}</td>
-				<td><code>{{ var.1|pprint }}</code></td>
-			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+<div class="boxed">
+    <table>
+    	<thead>
+    		<tr>
+    			<th>Setting</th>
+    			<th>Value</th>
+    		</tr>
+    	</thead>
+    	<tbody>
+    		{% for var in settings.items|dictsort:"0" %}
+    			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    				<td>{{ var.0 }}</td>
+    				<td><code>{{ var.1|pprint }}</code></td>
+    			</tr>
+    		{% endfor %}
+    	</tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/signals.html b/debug_toolbar/templates/debug_toolbar/panels/signals.html
index 7875700..c7a7733 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/signals.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/signals.html
@@ -1,18 +1,20 @@
-<table>
-    <thead>
-        <tr>
-            <th>Signal</th>
-            <th>Providing Args</th>
-            <th>Receivers</th>
-        </tr>
-    </thead>
-    <tbody>
-        {% for name, signal, receivers in signals %}
-            <tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-                <td>{{ name|escape }}</td>
-                <td>{{ signal.providing_args|join:", " }}</td>
-                <td>{{ receivers|join:", " }}</td>
+<div class="boxed">
+    <table>
+        <thead>
+            <tr>
+                <th>Signal</th>
+                <th>Providing Args</th>
+                <th>Receivers</th>
             </tr>
-        {% endfor %}
-    </tbody>
-</table>
+        </thead>
+        <tbody>
+            {% for name, signal, receivers in signals %}
+                <tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+                    <td>{{ name|escape }}</td>
+                    <td>{{ signal.providing_args|join:", " }}</td>
+                    <td>{{ receivers|join:", " }}</td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html
index 717d54d..bb805e6 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql.html
@@ -1,48 +1,51 @@
-<table>
-	<thead>
-		<tr>
-			<th>Time&nbsp;(ms)</th>
-			<th>Action</th>
-			<th>Stacktrace</th>
-			<th>Query</th>
-		</tr>
-	</thead>
-	<tbody>
-		{% for query in queries %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				<td>{{ query.time|floatformat:"2" }}</td>
-				<td>
-				{% if query.params %}
-					<a class="remoteCall" href="/__debug__/sql_select/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">SELECT</a>
-					<a class="remoteCall" href="/__debug__/sql_explain/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">EXPLAIN</a>
-					{% if is_mysql %}
-						<a class="remoteCall" href="/__debug__/sql_profile/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">PROFILE</a>
-					{% endif %}
-				{% endif %}
-				</td>
-				<td>
-					{% if query.stacktrace %}
-					<div class="djSQLShowStacktraceDiv"><a class="djSQLShowStacktrace" href="#">Toggle Stacktrace</a></div>
-					<div class="djSQLHideStacktraceDiv" style="display:none;">
-						<table>
-							<tr>
-								<th>Line</th>
-								<th>Method</th>
-								<th>File</th>
-							</tr>
-							{% for file, line, method in query.stacktrace %}
-								<tr>
-									<td>{{ line }}</td>
-									<td><pre>{{ method|escape }}<pre></td>
-									<td><pre>{{ file|escape }}</pre></td>
-								</tr>
-							{% endfor %}
-						</table>
-					</div>
-					{% endif %}
-				</td>
-				<td class="syntax">{{ query.sql|safe }}</td>
-			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+<div class="boxed">
+    <table>
+    	<thead>
+    		<tr>
+    			<th>Time&nbsp;(ms)</th>
+    			<th>Action</th>
+    			<th>Stacktrace</th>
+    			<th>Query</th>
+    		</tr>
+    	</thead>
+    	<tbody>
+    		{% for query in queries %}
+    			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    				<td>{{ query.time|floatformat:"2" }}</td>
+    				<td>
+    				{% if query.params %}
+    					<a class="remoteCall" href="/__debug__/sql_select/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">SELECT</a>
+    					<a class="remoteCall" href="/__debug__/sql_explain/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">EXPLAIN</a>
+    					{% if is_mysql %}
+    						<a class="remoteCall" href="/__debug__/sql_profile/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">PROFILE</a>
+    					{% endif %}
+    				{% endif %}
+    				</td>
+    				<td>
+    					{% if query.stacktrace %}
+    					<div class="djSQLShowStacktraceDiv"><a class="djSQLShowStacktrace" href="#">Toggle Stacktrace</a></div>
+    					<div class="djSQLHideStacktraceDiv" style="display:none;">
+    						<table>
+    							<tr>
+    								<th>Line</th>
+    								<th>Method</th>
+    								<th>File</th>
+    							</tr>
+    							{% for file, line, method in query.stacktrace %}
+    								<tr>
+    									<td>{{ line }}</td>
+    									<td><pre>{{ method|escape }}<pre></td>
+    									<td><pre>{{ file|escape }}</pre></td>
+    								</tr>
+    							{% endfor %}
+    						</table>
+    					</div>
+    					{% endif %}
+    				</td>
+    				<td class="syntax">{{ query.sql|safe }}</td>
+    			</tr>
+    		{% endfor %}
+    	</tbody>
+    </table>
+</div>
+
diff --git a/debug_toolbar/templates/debug_toolbar/panels/template_source.html b/debug_toolbar/templates/debug_toolbar/panels/template_source.html
index 572522b..2094a3f 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/template_source.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/template_source.html
@@ -1,3 +1,9 @@
-<a class="back" href="">&laquo;&nbsp;Back</a>
-<h3>Template Source: <samp>{{ template_name }}</samp></h3>
-{{ source }}
+<a class="close back" href="">Back</a>
+<h3>Template Source: <code>{{ template_name }}</code></h3>
+<div class="panelScrollWrap">
+    <div class="panelScrollContent">
+        <div class="boxed">
+            {{ source }}
+        </div>
+    </div>
+</div>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/templates.html b/debug_toolbar/templates/debug_toolbar/panels/templates.html
index 01240f7..622321f 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/templates.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/templates.html
@@ -1,4 +1,5 @@
 <h4>Template path{{ template_dirs|length|pluralize }}</h4>
+<div class="boxed">
 {% if template_dirs %}
 	<ol>
 	{% for template in template_dirs %}
@@ -8,32 +9,39 @@
 {% else %}
 	<p>None</p>
 {% endif %}
+</div>
+
 <h4>Template{{ templates|length|pluralize }}</h4>
-{% if templates %}
-<dl>
-{% for template in templates %}
-	<dt><strong><a class="remoteCall" href="/__debug__/template_source/?template={{ template.template.name }}">{{ template.template.name|addslashes }}</a></strong></dt>
-	<dd><samp>{{ template.template.origin_name|addslashes }}</samp></dd>
-	<dd>
-		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
-		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ template.context }}</pre></div>
-	</dd>
-{% endfor %}
-</dl>
-{% else %}
-	<p>None</p>
-{% endif %}
+<div class="boxed">
+    {% if templates %}
+    <dl>
+    {% for template in templates %}
+    	<dt><strong><a class="remoteCall" href="/__debug__/template_source/?template={{ template.template.name }}">{{ template.template.name|addslashes }}</a></strong></dt>
+    	<dd><samp>{{ template.template.origin_name|addslashes }}</samp></dd>
+    	<dd>
+    		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
+    		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ template.context }}</pre></div>
+    	</dd>
+    {% endfor %}
+    </dl>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
+
 <h4>Context processor{{ context_processors|length|pluralize }}</h4>
-{% if context_processors %}
-<dl>
-{% for key, value in context_processors.iteritems %}
-	<dt><strong>{{ key|escape }}</strong></dt>
-	<dd>
-		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
-		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ value|escape }}</pre></div>
-	</dd>
-{% endfor %}
-</dl>
-{% else %}
-	<p>None</p>
-{% endif %}
+<div class="boxed">
+    {% if context_processors %}
+    <dl>
+    {% for key, value in context_processors.iteritems %}
+    	<dt><strong>{{ key|escape }}</strong></dt>
+    	<dd>
+    		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
+    		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ value|escape }}</pre></div>
+    	</dd>
+    {% endfor %}
+    </dl>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/timer.html b/debug_toolbar/templates/debug_toolbar/panels/timer.html
index 39e9eb1..ba801b2 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/timer.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/timer.html
@@ -1,20 +1,22 @@
-<table>
-	<colgroup>
-		<col style="width:20%"/>
-		<col/>
-	</colgroup>
-	<thead>
-		<tr>
-			<th>Key</th>
-			<th>Value</th>
-		</tr>
-	</thead>
-	<tbody>
-		{% for key, value in rows %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				<td>{{ key|escape }}</td>
-				<td>{{ value|escape }}</td>
-			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+<div class="boxed">
+    <table>
+    	<colgroup>
+    		<col style="width:20%"/>
+    		<col/>
+    	</colgroup>
+    	<thead>
+    		<tr>
+    			<th>Key</th>
+    			<th>Value</th>
+    		</tr>
+    	</thead>
+    	<tbody>
+    		{% for key, value in rows %}
+    			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    				<td>{{ key|escape }}</td>
+    				<td>{{ value|escape }}</td>
+    			</tr>
+    		{% endfor %}
+    	</tbody>
+    </table>
+</div>