Refactored the UI to be a right hand side vertical toolbar. DebugPanel subclass grew a subtitle method to display informative text under the title.

8 files changed, 72 insertions, 57 deletions

diff --git a/debug_toolbar/media/debug_toolbar/toolbar.css b/debug_toolbar/media/debug_toolbar/toolbar.css
index 9ef6dc3..275a776 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.css
+++ b/debug_toolbar/media/debug_toolbar/toolbar.css
@@ -7,37 +7,39 @@
     text-align: left;
 }
 #djDebug a {
-    color: #f7c757;
+    color: #fff;
 }
 #djDebug a:hover {
-    color: #aaa;
+    color: #900;
 }
 
 #djDebugToolbar {
-    background: #326342;
-    height: 30px;
+    background: #111;
+    width: 150px;
     z-index: 100000000;
-    border-bottom: 2px solid #234f32;
     position:absolute;
     top:0;
-    left:0;
+    bottom:0;
     right:0;
+	opacity:0.9;
+}
+
+#djDebugToolbar small {
+    color:#999;
 }
 
 #djDebugToolbarHandle {
-    background: #326342;
-    height: 30px;
-    z-index: 100000000;
-    border-bottom: 2px solid #234f32;
     position:absolute;
+    background: #111;
     top:0;
-    left:0;
+    bottom:0;
     right:0;
-    width: 16px;
+    z-index: 100000000;
 }
 
 #djDebugToolbarHandle ul li {
-    padding: 3px 0px 0px 3px;
+    list-style-type:none;
+    padding: 3px;
 }
 
 #djDebugToolbarHandle ul li a {
@@ -52,33 +54,27 @@
 }
 
 #djDebugToolbar li {
-    border-left: 1px solid #487858;
+    border-bottom: 1px solid #222;
     color: #fff;
-    display: inline;
+    display: block;
     font-size: 11px;
     font-weight: bold;
     float: none;
-    height: 20px;
     margin: 0;
     padding: 0;
-    line-height: 30px;
-    padding: 8px 9px 9px;
+    padding: 8px;
     position: relative;
     width: auto;
 }
 
 #djDebugToolbar li:hover {
-    background: #487858;
+    background: #222;
 }
 
 #djDebugToolbar li:hover a {
     color: #fff;
 }
 
-#djDebugToolbar li:last-child {
-    border-right: 1px solid #487858;
-}
-
 #djDebugToolbar #djDebugButton {
     color: #92ef3f;
 }
@@ -92,33 +88,30 @@
 }
 
 #djDebug .panelContent {
-    background: #2a5738;
-    border-bottom: 2px solid #234f32;
-    border-top: 2px solid #487858;
+    background: #222;
     display: none;
     position: absolute;
     margin: 0;
     padding: 10px;
-    top: 32px;
+    top: 0;
     width: auto;
     left: 0px;
-    right: 0px;
-    bottom: 5px;
-    color: black;
+    right: 150px;
+    bottom: 0;
+    color: #fff;
     z-index: 1000000;
     overflow: auto;
 }
 
 #djDebug .panelContent p a, #djDebug .panelContent dl a {
-    color: #40684c;
+    color: #000;
 }
 #djDebug .panelContent p a:hover, #djDebug .panelContent dl a:hover {
-    color: #92EF3F;
+    color: #900;
 }
 
 #djDebug .panelContent h3 {
-    border-bottom: 1px solid #40684c;
-    color: #92ef3f;
+    color: #fff;
     padding: 0 0 5px;
 }
 
@@ -137,18 +130,20 @@
 }
 
 #djDebug .panelContent table a {
-    color: #40684C;
+    color: #000;
+}
+#djDebug .panelContent table a:hover {
+    color: #900;
 }
 
 #djDebug .panelContent table th {
-    background-color: #9dcc49;
+    background-color: #333;
     font-weight: bold;
-    color: #000;
+    color: #fff;
     font-size: 11px;
     padding: 3px 7px 3px;
     text-align: left;
     cursor: pointer;
-    border-right: 1px solid #b9d977;
 }
 #djDebug .panelContent table td {
     padding: 5px 10px;
@@ -177,19 +172,19 @@
 #djDebug .highlight  { color: #000; }
 #djDebug .highlight .err { color: #000; } /* Error */
 #djDebug .highlight .g { color: #000; } /* Generic */
-#djDebug .highlight .k { color: #40684C; font-weight: bold } /* Keyword */
+#djDebug .highlight .k { color: #000; font-weight: bold } /* Keyword */
 #djDebug .highlight .o { color: #000; } /* Operator */
 #djDebug .highlight .n { color: #000; } /* Name */
-#djDebug .highlight .mi { color: #40684C; font-weight: bold } /* Literal.Number.Integer */
+#djDebug .highlight .mi { color: #000; font-weight: bold } /* Literal.Number.Integer */
 #djDebug .highlight .l { color: #000; } /* Literal */
 #djDebug .highlight .x { color: #000; } /* Other */
 #djDebug .highlight .p { color: #000; } /* Punctuation */
-#djDebug .highlight .m { color: #40684C; font-weight: bold } /* Literal.Number */
-#djDebug .highlight .s { color: #0086d2 } /* Literal.String */
+#djDebug .highlight .m { color: #000; font-weight: bold } /* Literal.Number */
+#djDebug .highlight .s { color: #333 } /* Literal.String */
 #djDebug .highlight .w { color: #888888 } /* Text.Whitespace */
-#djDebug .highlight .il { color: #40684C; font-weight: bold } /* Literal.Number.Integer.Long */
-#djDebug .highlight .na { color: #7D9029 } /* Name.Attribute */
-#djDebug .highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
-#djDebug .highlight .nv { color: #19177C } /* Name.Variable */
-#djDebug .highlight .s2 { color: #BA2121 } /* Literal.String.Double */
-#djDebug .highlight .cp { color: #BC7A00 } /* Comment.Preproc */
+#djDebug .highlight .il { color: #000; font-weight: bold } /* Literal.Number.Integer.Long */
+#djDebug .highlight .na { color: #333 } /* Name.Attribute */
+#djDebug .highlight .nt { color: #000; font-weight: bold } /* Name.Tag */
+#djDebug .highlight .nv { color: #333 } /* Name.Variable */
+#djDebug .highlight .s2 { color: #333 } /* Literal.String.Double */
+#djDebug .highlight .cp { color: #333 } /* Comment.Preproc */
diff --git a/debug_toolbar/media/debug_toolbar/toolbar.min.css b/debug_toolbar/media/debug_toolbar/toolbar.min.css
index c172fbd..21262aa 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.min.css
+++ b/debug_toolbar/media/debug_toolbar/toolbar.min.css
@@ -1 +1 @@
-#djDebug *{color:#000;float:none;margin:0;padding:0;position:static;text-align:left;}#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;}#djDebugToolbarHandle{background:#326342;height:30px;z-index:100000000;border-bottom:2px solid #234f32;position:absolute;top:0;left:0;right:0;width:16px;}#djDebugToolbarHandle ul li{padding:3px 0 0 3px;}#djDebugToolbarHandle ul li a{font-size:16px;font-weight:bold;}#djDebugToolbar ul{margin:0;padding:0;list-style:none;}#djDebugToolbar li{border-left:1px solid #487858;color:#fff;display:inline;font-size:11px;font-weight:bold;float:none;height:20px;margin:0;padding:0;line-height:30px;padding:8px 9px 9px;position:relative;width:auto;}#djDebugToolbar li:hover{background:#487858;}#djDebugToolbar li:hover a{color:#fff;}#djDebugToolbar li:last-child{border-right:1px solid #487858;}#djDebugToolbar #djDebugButton{color:#92ef3f;}#djDebug pre{background-color:#fff;}#djDebug tr.djDebugOdd pre{background-color:#eee;}#djDebug .panelContent{background:#2a5738;border-bottom:2px solid #234f32;border-top:2px solid #487858;display:none;position:absolute;margin:0;padding:10px;top:32px;width:auto;left:0;right:0;bottom:5px;color:black;z-index:1000000;overflow:auto;}#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;}#djDebug .panelContent p{padding:0 5px;}#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 .panelContent table a{color:#40684C;}#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 table td{padding:5px 10px;font-size:11px;background:#fff;color:#000;vertical-align:top;}#djDebug .panelContent table tr.djDebugOdd td{background:#eee;}#djDebug .panelContent .close{float:right;font-weight:bold;}#djDebug .panelContent dt,#djDebug .panelContent dd{display:block;}#djDebug .panelContent dd{margin-left:10px;}#djDebug .highlight{color:#000;}#djDebug .highlight .err{color:#000;}#djDebug .highlight .g{color:#000;}#djDebug .highlight .k{color:#40684C;font-weight:bold;}#djDebug .highlight .o{color:#000;}#djDebug .highlight .n{color:#000;}#djDebug .highlight .mi{color:#40684C;font-weight:bold;}#djDebug .highlight .l{color:#000;}#djDebug .highlight .x{color:#000;}#djDebug .highlight .p{color:#000;}#djDebug .highlight .m{color:#40684C;font-weight:bold;}#djDebug .highlight .s{color:#0086d2;}#djDebug .highlight .w{color:#888;}#djDebug .highlight .il{color:#40684C;font-weight:bold;}#djDebug .highlight .na{color:#7D9029;}#djDebug .highlight .nt{color:#008000;font-weight:bold;}#djDebug .highlight .nv{color:#19177C;}#djDebug .highlight .s2{color:#BA2121;}#djDebug .highlight .cp{color:#BC7A00;}
\ No newline at end of file
+#djDebug *{color:#000;float:none;margin:0;padding:0;position:static;text-align:left;}#djDebug a{color:#fff;}#djDebug a:hover{color:#900;}#djDebugToolbar{background:#111;width:150px;z-index:100000000;position:absolute;top:0;bottom:0;right:0;opacity:.9;}#djDebugToolbar small{color:#999;}#djDebugToolbarHandle{position:absolute;background:#111;top:0;bottom:0;right:0;z-index:100000000;}#djDebugToolbarHandle ul li{list-style-type:none;padding:3px;}#djDebugToolbarHandle ul li a{font-size:16px;font-weight:bold;}#djDebugToolbar ul{margin:0;padding:0;list-style:none;}#djDebugToolbar li{border-bottom:1px solid #222;color:#fff;display:block;font-size:11px;font-weight:bold;float:none;margin:0;padding:0;padding:8px;position:relative;width:auto;}#djDebugToolbar li:hover{background:#222;}#djDebugToolbar li:hover a{color:#fff;}#djDebugToolbar #djDebugButton{color:#92ef3f;}#djDebug pre{background-color:#fff;}#djDebug tr.djDebugOdd pre{background-color:#eee;}#djDebug .panelContent{background:#222;display:none;position:absolute;margin:0;padding:10px;top:0;width:auto;left:0;right:150px;bottom:0;color:#fff;z-index:1000000;overflow:auto;}#djDebug .panelContent p a,#djDebug .panelContent dl a{color:#000;}#djDebug .panelContent p a:hover,#djDebug .panelContent dl a:hover{color:#900;}#djDebug .panelContent h3{color:#fff;padding:0 0 5px;}#djDebug .panelContent p{padding:0 5px;}#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 .panelContent table a{color:#000;}#djDebug .panelContent table a:hover{color:#900;}#djDebug .panelContent table th{background-color:#333;font-weight:bold;color:#fff;font-size:11px;padding:3px 7px 3px;text-align:left;cursor:pointer;}#djDebug .panelContent table td{padding:5px 10px;font-size:11px;background:#fff;color:#000;vertical-align:top;}#djDebug .panelContent table tr.djDebugOdd td{background:#eee;}#djDebug .panelContent .close{float:right;font-weight:bold;}#djDebug .panelContent dt,#djDebug .panelContent dd{display:block;}#djDebug .panelContent dd{margin-left:10px;}#djDebug .highlight{color:#000;}#djDebug .highlight .err{color:#000;}#djDebug .highlight .g{color:#000;}#djDebug .highlight .k{color:#000;font-weight:bold;}#djDebug .highlight .o{color:#000;}#djDebug .highlight .n{color:#000;}#djDebug .highlight .mi{color:#000;font-weight:bold;}#djDebug .highlight .l{color:#000;}#djDebug .highlight .x{color:#000;}#djDebug .highlight .p{color:#000;}#djDebug .highlight .m{color:#000;font-weight:bold;}#djDebug .highlight .s{color:#333;}#djDebug .highlight .w{color:#888;}#djDebug .highlight .il{color:#000;font-weight:bold;}#djDebug .highlight .na{color:#333;}#djDebug .highlight .nt{color:#000;font-weight:bold;}#djDebug .highlight .nv{color:#333;}#djDebug .highlight .s2{color:#333;}#djDebug .highlight .cp{color:#333;}
\ No newline at end of file
diff --git a/debug_toolbar/panels/__init__.py b/debug_toolbar/panels/__init__.py
index 54b3318..459e550 100644
--- a/debug_toolbar/panels/__init__.py
+++ b/debug_toolbar/panels/__init__.py
@@ -15,8 +15,13 @@ class DebugPanel(object):
         return 'djDebug%sPanel' % (self.name.replace(' ', ''))
 
     def title(self):
+        """Title showing in toolbar"""
         raise NotImplementedError
 
+    def subtitle(self):
+        """Subtitle showing until title in toolbar"""
+        return ''
+
     def url(self):
         raise NotImplementedError
 
diff --git a/debug_toolbar/panels/logger.py b/debug_toolbar/panels/logger.py
index cb88148..91688a8 100644
--- a/debug_toolbar/panels/logger.py
+++ b/debug_toolbar/panels/logger.py
@@ -52,7 +52,10 @@ class LoggingPanel(DebugPanel):
         return records
 
     def title(self):
-        return "Logging (%s message%s)" % (len(handler.get_records()), (len(handler.get_records()) == 1) and '' or 's')
+        return "Logging"
+
+    def subtitle(self):
+        return "%s message%s" % (len(handler.get_records()), (len(handler.get_records()) == 1) and '' or 's')
 
     def url(self):
         return ''
diff --git a/debug_toolbar/panels/sql.py b/debug_toolbar/panels/sql.py
index d3ac7f3..d1d1ead 100644
--- a/debug_toolbar/panels/sql.py
+++ b/debug_toolbar/panels/sql.py
@@ -74,9 +74,12 @@ class SQLDebugPanel(DebugPanel):
         self._sql_time = 0
 
     def title(self):
+        return 'SQL'
+
+    def subtitle(self):
         self._sql_time = sum(map(lambda q: float(q['time']), connection.queries))
         num_queries = len(connection.queries) - self._offset
-        return '%d SQL %s (%.2fms)' % (
+        return "%d %s in %.2fms" % (
             num_queries,
             (num_queries == 1) and 'query' or 'queries',
             self._sql_time
diff --git a/debug_toolbar/panels/timer.py b/debug_toolbar/panels/timer.py
index 352bf55..1491272 100644
--- a/debug_toolbar/panels/timer.py
+++ b/debug_toolbar/panels/timer.py
@@ -32,12 +32,15 @@ class TimerDebugPanel(DebugPanel):
             self._end_rusage = resource.getrusage(resource.RUSAGE_SELF)
 
     def title(self):
+        return 'Time'
+
+    def subtitle(self):
         if self.has_resource:
             utime = self._end_rusage.ru_utime - self._start_rusage.ru_utime
             stime = self._end_rusage.ru_stime - self._start_rusage.ru_stime
-            return 'Time: %0.2fms, %0.2fms CPU' % (self.total_time, (utime + stime) * 1000.0)
+            return 'CPU: %0.2fms (%0.2fms)' % ((utime + stime) * 1000.0, self.total_time)
         else:
-            return 'Time: %0.2fms' % (self.total_time)
+            return 'TOTAL: %0.2fms' % (self.total_time)
 
     def url(self):
         return ''
diff --git a/debug_toolbar/panels/version.py b/debug_toolbar/panels/version.py
index 7ea6543..da05bf1 100644
--- a/debug_toolbar/panels/version.py
+++ b/debug_toolbar/panels/version.py
@@ -6,9 +6,12 @@ class VersionDebugPanel(DebugPanel):
     Panel that displays the Django version.
     """
     name = 'Version'
-    
+
     def title(self):
-        return 'Version: %s' % (django.get_version())
+        return 'Django Version'
+
+    def subtitle(self):
+        return django.get_version()
 
     def url(self):
         return ''
diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html
index 52b7a5b..e3681b2 100644
--- a/debug_toolbar/templates/debug_toolbar/base.html
+++ b/debug_toolbar/templates/debug_toolbar/base.html
@@ -19,7 +19,7 @@
 	<div style="display: none;" id="djDebugToolbar">
 		<ul id="djDebugPanelList">
 			{% if panels %}
-			<li><a id="djHideToolBarButton" href="#" title="Hide Toolbar">&laquo; Hide</a></li>
+			<li><a id="djHideToolBarButton" href="#" title="Hide Toolbar">Hide &raquo;</a></li>
 			{% else %}
 			<li id="djDebugButton">DEBUG</li>
 			{% endif %}
@@ -30,13 +30,16 @@
 					{% else %}
 						{{ panel.title }}
 					{% endif %}
+					{% with panel.subtitle as subtitle %}
+						{% if subtitle %}<br><small>{{ subtitle }}</small>{% endif %}
+					{% endwith %}
 				</li>
 			{% endfor %}
 		</ul>
 	</div>
 	<div style="display: none;" id="djDebugToolbarHandle">
 		<ul id="djDebugPanelList">
-			<li><a title="Show Toolbar" id="djShowToolBarButton" href="#">&raquo;</a></li>
+			<li><a title="Show Toolbar" id="djShowToolBarButton" href="#">&laquo;</a></li>
 		</ul>
 	</div>
 	{% for panel in panels %}