Issue django-commons#163: SQL expand does show query fields now. So does clicking on bullets.

Author: Tomasz Buchert

debug_toolbar/media/debug_toolbar/css/toolbar.css

@@ -369,19 +369,17 @@
 	position:relative;
 }
 
-#djDebug .djDebugCollapse {
-    display: inline-block;
-    background: #ddd;
-    background: url(data:image/gif;base64,R0lGODlhBgAKAJEDAJGRkdra2qysrP///yH5BAEAAAMALAAAAAAGAAoAAAIPnI+JIRImABBQ0sGc2qoAADs=) 0 3px repeat-x;
-    width: 18px;
-    text-indent: -10000em;
+#djDebug .djDebugCollapsed {
+    display: none;
+    text-decoration: none;
+    color: #333;
 }
-#djDebug .djSelected .djDebugCollapse {
-    background: inherit;
-    text-indent: 0;
-    width: auto;
-    display: inline;
+
+#djDebug .djDebugUncollapsed {
+    color: #333;
+    text-decoration: none;
 }
+
 #djDebug .djUnselected {
     display: none;
 }

debug_toolbar/media/debug_toolbar/css/toolbar.min.css

@@ -51,6 +51,11 @@ window.djdt = (function(window, document, jQuery) {
 				djdt.toggle_content($(this).parent().next());
 				return false;
 			});
+            $('#djDebug a.djDebugToggle').click(function(e) {
+                e.preventDefault();
+                $(this).parent().find('.djDebugCollapsed').toggle();
+                $(this).parent().find('.djDebugUncollapsed').toggle()
+            });
 			$('#djDebug a.djToggleSwitch').click(function(e) {
 				e.preventDefault();
 				var btn = $(this);
@@ -60,6 +65,8 @@ window.djdt = (function(window, document, jQuery) {
 					return;
 				}
 
+                btn.parents('.djDebugPanelContent').find('#sqlMain_' + id).find('.djDebugCollapsed').toggle(open_me);
+                btn.parents('.djDebugPanelContent').find('#sqlMain_' + id).find('.djDebugUncollapsed').toggle(!open_me);
 				$(this).parents('.djDebugPanelContent').find('.djToggleDetails_' + id).each(function(){
 					var $this = $(this);
 					if (open_me) {

debug_toolbar/media/debug_toolbar/js/toolbar.js

@@ -223,7 +223,8 @@ def process(self, stack, stream):
                 yield sqlparse.tokens.Text, '</strong>'
 
 def swap_fields(sql):
-    return re.sub('SELECT</strong> (.*) <strong>FROM', 'SELECT</strong> <span class="djDebugCollapse">\g<1></span> <strong>FROM', sql)
+    return re.sub('SELECT</strong> (.*) <strong>FROM', 'SELECT</strong> <a class="djDebugUncollapsed djDebugToggle" href="#">&bull;&bull;&bull;</a> ' +
+        '<a class="djDebugCollapsed djDebugToggle" href="#">\g<1></a> <strong>FROM', sql)
 
 def reformat_sql(sql):
     stack = sqlparse.engine.FilterStack()