Added toggle arrows, grey boxes for template links

2 files changed, 36 insertions, 3 deletions

diff --git a/debug_toolbar/media/debug_toolbar/toolbar.css b/debug_toolbar/media/debug_toolbar/toolbar.css
index bf4648a..64a1a3c 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.css
+++ b/debug_toolbar/media/debug_toolbar/toolbar.css
@@ -176,14 +176,14 @@
 	bottom:0;
 	left:0;
 	height:auto;
-	padding:10px 20px;
+	padding:0px 20px;
 }
 
 #djDebug .djDebugPanelContent .scroll {
 	height:100%;
 	overflow:auto;
 	display:block;
-	padding-right:10px;
+	padding:10px;
 }
 
 #djDebug h3 {
@@ -195,6 +195,8 @@
 #djDebug h4 {
 	font-size:20px;
 	font-weight:bold;
+	margin-bottom:0.8em;
+	margin-top:0.4em;
 }
 
 #djDebug .panelContent table {
@@ -314,6 +316,31 @@
 	margin-left:10px;
 }
 
+#djDebug a.toggleTemplate {
+	padding:4px;
+	background-color:#bbb;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+
+#djDebug a.toggleTemplate:hover {
+	padding:4px;
+	background-color:#444;
+	color:#ffe761;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+
+
+#djDebug a.djTemplateShowContext, #djDebug a.djTemplateShowContext span.toggleArrow {
+	color:#999;
+}
+
+#djDebug a.djTemplateShowContext:hover,  #djDebug a.djTemplateShowContext:hover span.toggleArrow {
+	color:#000;
+	cursor:pointer;
+}
+
 #djDebug .highlight  { color:#000; }
 #djDebug .highlight .err { color:#000; } /* Error */
 #djDebug .highlight .g { color:#000; } /* Generic */
diff --git a/debug_toolbar/media/debug_toolbar/toolbar.js b/debug_toolbar/media/debug_toolbar/toolbar.js
index f1e6a94..e47adfa 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.js
+++ b/debug_toolbar/media/debug_toolbar/toolbar.js
@@ -43,6 +43,7 @@ jQuery(function($j) {
 				return false;
 			});
 			$j('#djDebugTemplatePanel a.djTemplateShowContext').click(function() {
+				$j.djDebug.toggle_arrow($j(this).children('.toggleArrow'))
 				$j.djDebug.toggle_content($j(this).parent().next());
 				return false;
 			});
@@ -101,7 +102,12 @@ jQuery(function($j) {
 				path: '/',
 				expires: -1
 			});
-		}
+		},
+		toggle_arrow: function(elem) {
+            var uarr = String.fromCharCode(0x25b6);
+            var darr = String.fromCharCode(0x25bc);
+            elem.html(elem.html() == uarr ? darr : uarr);
+        }
 	});
 	$j(document).bind('close.djDebug', function() {
 		$j(document).unbind('keydown.djDebug');