Make profiler results sortable

flask_debugtoolbar/static/css/toolbar.css

@@ -81,7 +81,7 @@
 	background-repeat:no-repeat;
 	background-position:left center;
 	background-color:#333;
-	padding-left:10px;	
+	padding-left:10px;
 }
 
 #flDebug #flDebugToolbar li.active a:hover {
@@ -420,3 +420,34 @@
 #flDebug .highlight .s2 { color:#333 } /* Literal.String.Double */
 #flDebug .highlight .cp { color:#333 } /* Comment.Preproc */
 
+/* tablesorted */
+#flDebug table.tablesorter {
+    width: 100%;
+}
+#flDebug table.tablesorter thead tr th, table.tablesorter tfoot tr th {
+    padding-right: 20px;
+}
+#flDebug table.tablesorter thead tr .header {
+    background-image: url(../img/bg.gif);
+    background-repeat: no-repeat;
+    background-position: center right;
+    cursor: pointer;
+}
+#flDebug table.tablesorter tbody td {
+    color: #3D3D3D;
+    padding: 4px;
+    background-color: #FFF;
+    vertical-align: top;
+}
+#flDebug table.tablesorter tbody tr.odd td {
+    background-color:#F0F0F6;
+}
+#flDebug table.tablesorter thead tr .headerSortUp {
+    background-image: url(../img/asc.gif);
+}
+#flDebug table.tablesorter thead tr .headerSortDown {
+    background-image: url(../img/desc.gif);
+}
+#flDebug table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
+    background-color: #8dbdd8;
+}

flask_debugtoolbar/static/js/toolbar.js

@@ -108,6 +108,9 @@
 			} else {
 				fldt.show_toolbar(false);
 			}
+            if ($("#debug_toolbar_profiler_table")) {
+                $("#debug_toolbar_profiler_table").tablesorter();
+            }
 		},
 		toggle_content: function(elem) {
 			if (elem.is(':visible')) {

flask_debugtoolbar/templates/base.html

@@ -1,6 +1,7 @@
 <div id="flDebug" style="display:none;">
     <script type="text/javascript">var DEBUG_TOOLBAR_STATIC_PATH = '{{ static_path }}'</script>
     <script type="text/javascript" src="{{ static_path }}js/jquery.js"></script>
+    <script type="text/javascript" src="{{ static_path }}js/jquery.tablesorter.js"></script>
     <script type="text/javascript" src="{{ static_path }}js/toolbar.js"></script>
 
     <div style="display: none;" id="flDebugToolbar">

flask_debugtoolbar/templates/panels/profiler.html

@@ -1,4 +1,4 @@
-<table>
+<table id="debug_toolbar_profiler_table" class="tablesorter">
 	<thead>
 		<tr>
 			<th>Calls</th>