Overhaul SQL panel to include better timeline, more compact queries, …

…and better view of stacktrace
dcramer · Mar 24, 2011 · 926643b · 926643b
1 parent e1f06b1
commit 926643b
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 33 deletions.
diff --git a/debug_toolbar/media/debug_toolbar/css/toolbar.css b/debug_toolbar/media/debug_toolbar/css/toolbar.css
@@ -140,6 +140,10 @@
 	background-color:#f5f5f5;
 }
 
+#djDebug .djDebugHover td {
+	background-color:#e5e5e5;
+}
+
 #djDebug .panelContent {
 	display:none;
 	position:fixed;
@@ -349,6 +353,16 @@
 	position:relative;
 }
 
+#djDebug .djDebugCollapse {
+    display: inline-block;
+    background: #ccc;
+    width: 20px;
+    text-indent: -10000em;
+}
+#djDebug .djDebugCollapsable {
+    background: #ddd;
+}
+
 #djDebug .djDebugSql {
 	z-index:100000002;
 }
@@ -394,3 +408,59 @@
 #djDebug .highlight .nv { color:#333 } /* Name.Variable */
 #djDebug .highlight .s2 { color:#333 } /* Literal.String.Double */
 #djDebug .highlight .cp { color:#333 } /* Comment.Preproc */
+
+#djDebug .djDebugTimeline {
+    position: relative;
+    height: 100%;
+    min-height: 100%;
+}
+#djDebug div.djDebugLineChart {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    vertical-align: middle;
+}
+#djDebug div.djDebugLineChart strong {
+    text-indent: -10000em;
+    display: block;
+    font-weight: normal;
+    vertical-align: middle;
+    background-color:#ccc;
+}
+
+#djDebug .djDebugHover div.djDebugLineChart strong {
+    background-color: #000;
+}
+#djDebug div.djDebugLineChartWarning strong {
+    background-color:#900;
+}
+
+#djDebug .djDebugRowWarning .time {
+    color: red;
+}
+
+#djDebug .djSQLHideStacktraceDiv pre {
+    color: #777;
+    border:1px solid #ccc;
+    border-collapse:collapse;
+    width:100%;
+    background-color:#fff;
+    display:block;
+    margin-top:0.8em;
+    overflow: auto;
+    padding:2px 3px;
+    font-family:Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", monospace;
+}
+#djDebug .djSQLHideStacktraceDiv pre span {
+    color: #000;
+    font-weight: bold;
+}
+#djDebug .djSQLHideStacktraceDiv pre span.path {
+    color: #777;
+    font-weight: normal;
+}
+#djDebug .djSQLHideStacktraceDiv pre span.code {
+    font-weight: normal;
+}
diff --git a/debug_toolbar/media/debug_toolbar/css/toolbar.min.css b/debug_toolbar/media/debug_toolbar/css/toolbar.min.css
diff --git a/debug_toolbar/media/debug_toolbar/js/toolbar.js b/debug_toolbar/media/debug_toolbar/js/toolbar.js
@@ -11,7 +11,7 @@
 				j(script).remove();
 			}
 		};
-		document.documentElement.childNodes[0].appendChild(script)
+		document.documentElement.childNodes[0].appendChild(script);
 	}
 })(window, document, "1.3", function($, jquery_loaded) {
 
@@ -54,7 +54,7 @@
 				return false;
 			});
 			$('#djDebugTemplatePanel a.djTemplateShowContext').click(function() {
-				djdt.toggle_arrow($(this).children('.toggleArrow'))
+				djdt.toggle_arrow($(this).children('.toggleArrow'));
 				djdt.toggle_content($(this).parent().next());
 				return false;
 			});
@@ -92,6 +92,11 @@
 			} else {
 				djdt.show_toolbar(false);
 			}
+			$('#djDebug .djDebugHoverable').hover(function(){
+				$(this).addClass('djDebugHover');
+			}, function(){
+			    $(this).removeClass('djDebugHover');
+			});
 		},
 		toggle_content: function(elem) {
 			if (elem.is(':visible')) {