From 04be402d080877abbc18931cb853933261fb332f Mon Sep 17 00:00:00 2001
From: Rob Hudson
Date: Thu, 2 Oct 2008 22:42:34 -0700
Subject: Moving debug toolbar to the bottom of the HTML document and adjusting
 CSS to position toolbar at top.  Injecting toolbar at the bottom has a few
 advantages, such as removing the regular expression substitution making it
 about 5x faster (depending on document size), JS and CSS have a lesser chance
 of conflicting with others on the page.

---
 debug_toolbar/media/toolbar.css                    | 116 ++++++++++++---------
 debug_toolbar/middleware.py                        |  23 ++--
 debug_toolbar/templates/debug_toolbar/base.html    |   1 +
 .../templates/debug_toolbar/panels/headers.html    |   5 +-
 .../templates/debug_toolbar/panels/logger.html     |   2 +-
 .../debug_toolbar/panels/request_vars.html         |   6 +-
 .../debug_toolbar/panels/settings_vars.html        |   2 +-
 .../templates/debug_toolbar/panels/sql.html        |   2 +-
 .../debug_toolbar/panels/sql_explain.html          |   2 +-
 9 files changed, 93 insertions(+), 66 deletions(-)

(limited to 'debug_toolbar')

diff --git a/debug_toolbar/media/toolbar.css b/debug_toolbar/media/toolbar.css
index bad28c5..d2154d4 100644
--- a/debug_toolbar/media/toolbar.css
+++ b/debug_toolbar/media/toolbar.css
@@ -1,8 +1,27 @@
+#djDebug * {
+    color: #000;
+    text-shadow: 0 0 2px #333;
+    float: none;
+    margin: 0;
+    padding: 0;
+    position: static;
+}
+#djDebug a {
+    color: #f7c757;
+}
+#djDebug a:hover {
+    color: #aaa;
+}
+
 #djDebugToolbar {
     background: #326342;
     height: 30px;
     z-index: 100000000;
     border-bottom: 2px solid #234f32;
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
 }
 
 #djDebugToolbar ul {
@@ -43,22 +62,6 @@
     color: #92ef3f;
 }
 
-#djDebug * {
-    color: #fff;
-    text-shadow: 0 0 2px #333;
-    float: none;
-    margin: 0;
-    padding: 0;
-    position: static;
-}
-
-#djDebug a {
-    color: #f7c757;
-}
-
-#djDebug a:hover {
-    color: #fff;
-}
 
 #djDebug .panelContent {
     background: #2a5738;
@@ -68,7 +71,7 @@
     position: absolute;
     margin: 0;
     padding: 10px;
-    top: 35px;
+    top: 32px;
     width: auto;
     left: 0px;
     right: 0px;
@@ -78,7 +81,14 @@
     overflow: auto;
 }
 
-#djDebug h3 {
+#djDebug .panelContent p a, #djDebug .panelContent dl a {
+    color: #40684c;
+}
+#djDebug .panelContent p a:hover, #djDebug .panelContent dl a:hover {
+    color: #92EF3F;
+}
+
+#djDebug .panelContent h3 {
     border-bottom: 1px solid #40684c;
     color: #92ef3f;
     padding: 0 0 5px;
@@ -90,53 +100,63 @@
 
 #djDebug .panelContent p, #djDebug .panelContent table, #djDebug .panelContent ol, #djDebug .panelContent ul, #djDebug .panelContent dl {
     margin: 5px 0 15px;
+    background-color: #fff;
 }
 
 #djDebug .panelContent table {
     width: 100%;
+    clear: both;
 }
 
-#djDebug .close {
-    float: right;
-    font-weight: bold;
+#djDebug .panelContent table a {
+    color: #40684C;
 }
 
-#djDebug .panelContent dt, #djDebug .panelContent dd {
-    display: block;
+#djDebug .panelContent table th {
+    background-color: #9dcc49;
+    font-weight: bold;
+    color: #000;
+    font-size: 11px;
+    padding: 3px 7px 3px;
+    text-align: left;
+    cursor: pointer;
+    border-right: 1px solid #b9d977;
 }
-
-#djDebug .panelContent dd {
-    margin-left: 10px;
+#djDebug .panelContent table td {
+    padding: 5px 10px;
+    font-size: 11px;
+    background: #fff;
+    color: #000;
+    vertical-align: top;
+}
+#djDebug .panelContent table tr.odd td {
+  background: #eee;
 }
 
-#djDebug th {
+#djDebug .panelContent .close {
+    float: right;
     font-weight: bold;
-    text-align: left;
-    padding: 5px;
 }
 
-#djDebug td {
-    padding: 5px;
+#djDebug .panelContent dt, #djDebug .panelContent dd {
+    display: block;
 }
 
-#djDebug .row1 td {
-    background: #40684c;
+#djDebug .panelContent dd {
+    margin-left: 10px;
 }
 
-#djDebug .row2 td {
-    background: #356042;
-}
-#djDebug .syntax  { color: #ffffff }
-#djDebug .syntax .err { color: #ffffff } /* Error */
-#djDebug .syntax .g { color: #ffffff } /* Generic */
-#djDebug .syntax .k { color: #F7C757; font-weight: bold } /* Keyword */
-#djDebug .syntax .o { color: #ffffff } /* Operator */
-#djDebug .syntax .n { color: #ffffff } /* Name */
-#djDebug .syntax .mi { color: #92ef3f; font-weight: bold } /* Literal.Number.Integer */
-#djDebug .syntax .l { color: #ffffff } /* Literal */
-#djDebug .syntax .x { color: #ffffff } /* Other */
-#djDebug .syntax .p { color: #ffffff } /* Punctuation */
-#djDebug .syntax .m { color: #92ef3f; font-weight: bold } /* Literal.Number */
+#djDebug .syntax  { color: #000; }
+#djDebug .syntax .err { color: #000; } /* Error */
+#djDebug .syntax .g { color: #000; } /* Generic */
+#djDebug .syntax .k { color: #40684C; font-weight: bold } /* Keyword */
+#djDebug .syntax .o { color: #000; } /* Operator */
+#djDebug .syntax .n { color: #000; } /* Name */
+#djDebug .syntax .mi { color: #40684C; font-weight: bold } /* Literal.Number.Integer */
+#djDebug .syntax .l { color: #000; } /* Literal */
+#djDebug .syntax .x { color: #000; } /* Other */
+#djDebug .syntax .p { color: #000; } /* Punctuation */
+#djDebug .syntax .m { color: #40684C; font-weight: bold } /* Literal.Number */
 #djDebug .syntax .s { color: #0086d2 } /* Literal.String */
 #djDebug .syntax .w { color: #888888 } /* Text.Whitespace */
-#djDebug .syntax .il { color: #92ef3f; font-weight: bold } /* Literal.Number.Integer.Long */
+#djDebug .syntax .il { color: #40684C; font-weight: bold } /* Literal.Number.Integer.Long */
diff --git a/debug_toolbar/middleware.py b/debug_toolbar/middleware.py
index 140ceba..cfa8590 100644
--- a/debug_toolbar/middleware.py
+++ b/debug_toolbar/middleware.py
@@ -1,19 +1,27 @@
 """
 Debug Toolbar middleware
 """
-import re
 from django.conf import settings
 from django.http import HttpResponseRedirect
 from django.shortcuts import render_to_response
-from django.utils.encoding import smart_str
+from django.utils.encoding import smart_unicode
 from django.conf.urls.defaults import include, patterns
 import debug_toolbar.urls
 from debug_toolbar.toolbar.loader import DebugToolbar
 
 _HTML_TYPES = ('text/html', 'application/xhtml+xml')
-_END_HEAD_RE = re.compile(r'</head>', re.IGNORECASE)
-_START_BODY_RE = re.compile(r'<body([^<]*)>', re.IGNORECASE)
-_END_BODY_RE = re.compile(r'</body>', re.IGNORECASE)
+
+def replace_insensitive(string, target, replacement):
+    """
+    Similar to string.replace() but is case insensitive
+    Code borrowed from: http://forums.devshed.com/python-programming-11/case-insensitive-string-replace-490921.html
+    """
+    no_case = string.lower()
+    index = no_case.find(target.lower())
+    if index >= 0:
+        return string[:index] + replacement + string[index + len(target):]
+    else: # no results so return the original string
+        return string
 
 class DebugToolbarMiddleware(object):
     """
@@ -72,8 +80,5 @@ class DebugToolbarMiddleware(object):
         for panel in self.debug_toolbar.panels:
             panel.process_response(request, response)
         if response['Content-Type'].split(';')[0] in _HTML_TYPES:
-            # Saving this here in case we ever need to inject into <head>
-            #response.content = _END_HEAD_RE.sub(smart_str(self.debug_toolbar.render_styles() + "%s" % match.group()), response.content)
-            response.content = _START_BODY_RE.sub(smart_str('<body\\1>' + self.debug_toolbar.render_toolbar()), response.content)
-            response.content = _END_BODY_RE.sub(smart_str('<script src="' + request.META.get('SCRIPT_NAME', '') + '/__debug__/m/toolbar.js" type="text/javascript" charset="utf-8"></script></body>'), response.content)
+            response.content = replace_insensitive(smart_unicode(response.content), u'</body>', smart_unicode(self.debug_toolbar.render_toolbar() + u'</body>'))
         return response
diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html
index 88938d9..ba9fdf3 100644
--- a/debug_toolbar/templates/debug_toolbar/base.html
+++ b/debug_toolbar/templates/debug_toolbar/base.html
@@ -4,6 +4,7 @@
 		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.js"></script>
 <style type="text/css">
 	@import url({{ BASE_URL }}/__debug__/m/toolbar.css);
 </style>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/headers.html b/debug_toolbar/templates/debug_toolbar/panels/headers.html
index 61c6b83..3ac7fd3 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/headers.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/headers.html
@@ -1,3 +1,4 @@
+<h3>HTTP Headers</h3>
 <table>
 	<thead>
 		<tr>
@@ -7,10 +8,10 @@
 	</thead>
 	<tbody>
 		{% for key, value in headers.iteritems %}
-			<tr class="{% cycle 'row1' 'row2' %}">
+			<tr class="{% cycle 'odd' 'even' %}">
 				<td>{{ key|escape }}</td>
 				<td>{{ value|escape }}</td>
 			</tr>
 		{% endfor %}
 	</tbody>
-</table>
\ No newline at end of file
+</table>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/logger.html b/debug_toolbar/templates/debug_toolbar/panels/logger.html
index 515c7fb..c079065 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/logger.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/logger.html
@@ -11,7 +11,7 @@
 		</thead>
 		<tbody>
 			{% for record in records %}
-				<tr class="{% cycle 'row1' 'row2' %}">
+				<tr class="{% cycle 'odd' 'even' %}">
 					<td>{{ record.level }}</td>
 					<td>{{ record.time|date:"h:i:s m/d/Y" }}</td>
 					<td>{{ record.message }}</td>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/request_vars.html b/debug_toolbar/templates/debug_toolbar/panels/request_vars.html
index fdb0a74..fe317ae 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/request_vars.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/request_vars.html
@@ -13,7 +13,7 @@
 		</thead>
 		<tbody>
 			{% for key, value in cookies %}
-				<tr class="{% cycle 'row1' 'row2' %}">
+				<tr class="{% cycle 'odd' 'even' %}">
 					<td>{{ key|escape }}</td>
 					<td>{{ value|escape }}</td>
 				</tr>
@@ -38,7 +38,7 @@
 		</thead>
 		<tbody>
 			{% for key, value in session %}
-				<tr class="{% cycle 'row1' 'row2' %}">
+				<tr class="{% cycle 'odd' 'even' %}">
 					<td>{{ key|escape }}</td>
 					<td>{{ value|escape }}</td>
 				</tr>
@@ -59,7 +59,7 @@
 		</thead>
 		<tbody>
 			{% for key, value in get %}
-				<tr class="{% cycle 'row1' 'row2' %}">
+				<tr class="{% cycle 'odd' 'even' %}">
 					<td>{{ key|escape }}</td>
 					<td>{{ value|join:", "|escape }}</td>
 				</tr>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html b/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html
index f1e6684..1d332bf 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html
@@ -8,7 +8,7 @@
 	</thead>
 	<tbody>
 		{% for var in settings.items|dictsort:"0" %}
-			<tr>
+			<tr class="{% cycle 'odd' 'even' %}">
 				<td>{{ var.0 }}</td>
 				<td><code>{{ var.1|pprint }}</code></td>
 			</tr>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html
index e218f22..6a2d077 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql.html
@@ -9,7 +9,7 @@
 	</thead>
 	<tbody>
 		{% for query in queries %}
-			<tr class="{% cycle 'row1' 'row2' %}">
+			<tr class="{% cycle 'odd' 'even' %}">
 				<td>{{ query.time|floatformat:"4" }}</td>
 				<td>
 				{% if query.params %}
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html b/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
index d2fd567..dc306f0 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
@@ -16,7 +16,7 @@
 	</thead>
 	<tbody>
 		{% for row in result %}
-			<tr class="{% cycle 'row1' 'row2' %}">
+			<tr class="{% cycle 'odd' 'even' %}">
 				{% for column in row %}
 					<td>{{ column|escape }}</td>
 				{% endfor %}
-- 
cgit v1.2.3