Add a checkbox to toggle panels from the frontend.

Fix #35.

Author: aaugustin

debug_toolbar/middleware.py

@@ -92,6 +92,10 @@ def process_request(self, request):
 
             toolbar = DebugToolbar(request)
             for panel in toolbar.panels:
+                panel.disabled = panel.dom_id() in request.COOKIES
+                panel.enabled = not panel.disabled
+                if panel.disabled:
+                    continue
                 panel.process_request(request)
             self.__class__.debug_toolbars[threading.current_thread().ident] = toolbar
 
@@ -102,6 +106,8 @@ def process_view(self, request, view_func, view_args, view_kwargs):
             return
         result = None
         for panel in toolbar.panels:
+            if panel.disabled:
+                continue
             response = panel.process_view(request, view_func, view_args, view_kwargs)
             if response:
                 result = response
@@ -128,6 +134,8 @@ def process_response(self, request, response):
         if ('gzip' not in response.get('Content-Encoding', '') and
                 response.get('Content-Type', '').split(';')[0] in _HTML_TYPES):
             for panel in toolbar.panels:
+                if panel.disabled:
+                    continue
                 panel.process_response(request, response)
             response.content = replace_insensitive(
                 force_text(response.content, encoding=settings.DEFAULT_CHARSET),

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -120,6 +120,11 @@
 	width:auto;
 }
 
+#djDebug #djDebugToolbar input[type=checkbox] {
+	float: right;
+	margin: 10px;
+}
+
 #djDebug #djDebugToolbar li>a,
 #djDebug #djDebugToolbar li>div.contentless  {
 	font-weight:normal;
@@ -130,6 +135,10 @@
 	padding:10px 10px 5px 25px;
 	color:#fff;
 }
+#djDebug #djDebugToolbar li>div.disabled {
+	font-style: italic;
+	color: #999;
+}
 
 #djDebug #djDebugToolbar li a:hover {
 	color:#111;

debug_toolbar/static/debug_toolbar/css/toolbar.min.css

@@ -35,6 +35,12 @@ window.djdt = (function(window, document, jQuery) {
 				$('#djDebugToolbar li').removeClass('active');
 				return false;
 			});
+			$('#djDebug .djDebugPanelButton input[type=checkbox]').live('click', function() {
+				$.cookie($(this).attr('data-cookie'), 'off', {
+					path: '/',
+					expires: $(this).prop('checked') ? -1 : 10
+				});
+			});
 
 			$('#djDebug .remoteCall').live('click', function() {
 				var self = $(this);
@@ -257,13 +263,13 @@ window.djdt = (function(window, document, jQuery) {
 				var $row = $('<tr class="' + ((rowCount % 2) ? 'djDebugOdd' : 'djDebugEven') + '"></tr>');
 				if (endStat) {
 					// Render a start through end bar
-					$row.html('<td>' + stat.replace('Start', '') + '</td>' + 
-					          '<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:' + getCSSWidth(stat, endStat) + ';">&nbsp;</strong></div></div></td>' + 
+					$row.html('<td>' + stat.replace('Start', '') + '</td>' +
+					          '<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:' + getCSSWidth(stat, endStat) + ';">&nbsp;</strong></div></div></td>' +
 					          '<td>' + (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ')</td>');
 				} else {
 					// Render a point in time
-          $row.html('<td>' + stat + '</td>' + 
-                    '<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:2px;">&nbsp;</strong></div></div></td>' + 
+          $row.html('<td>' + stat + '</td>' +
+                    '<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:2px;">&nbsp;</strong></div></div></td>' +
                     '<td>' + (perf.timing[stat] - timingOffset) + '</td>');
 				}
 				$('#djDebugBrowserTimingTableBody').append($row);

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -14,16 +14,19 @@
 			{% endif %}
 			{% for panel in panels %}
 				<li class="djDebugPanelButton">
-					{% if panel.has_content %}
+					<input type="checkbox" data-cookie="{{ panel.dom_id }}"{% if panel.enabled %} checked="checked"{% endif %} title="{% trans "Toogle Panel" %}" />
+					{% if panel.has_content and panel.enabled %}
 						<a href="{{ panel.url|default:"#" }}" title="{{ panel.title }}" class="{{ panel.dom_id }}">
 					{% else %}
-					    <div class="contentless">
+					    <div class="contentless{% if panel.disabled %} disabled{% endif %}">
 					{% endif %}
 					{{ panel.nav_title }}
+					{% if panel.enabled %}
 					{% with panel.nav_subtitle as subtitle %}
 						{% if subtitle %}<br /><small>{{ subtitle }}</small>{% endif %}
 					{% endwith %}
-					{% if panel.has_content %}
+					{% endif %}
+					{% if panel.has_content and panel.enabled %}
 						</a>
 					{% else %}
 					    </div>
@@ -36,7 +39,7 @@
 		<a title="{% trans "Show Toolbar" %}" id="djShowToolBarButton" href="#">&#171;</a>
 	</div>
 	{% for panel in panels %}
-		{% if panel.has_content %}
+		{% if panel.has_content and panel.enabled %}
 			<div id="{{ panel.dom_id }}" class="panelContent">
 				<div class="djDebugPanelTitle">
 					<a href="" class="djDebugClose">{% trans "Close" %}</a>

debug_toolbar/static/debug_toolbar/js/toolbar.min.js

@@ -6,8 +6,8 @@ Performance considerations
 
 The Debug Toolbar adds some overhead to the rendering of each page. Depending
 on your project, this overhead may slow down page loads significantly. If that
-makes development impractical, you can tune some settings to disable the most
-expensive features and restore decent response times.
+makes development impractical, you can disable the most expensive features to
+restore decent response times.
 
 The SQL panel may be the culprit if your view performs many SQL queries. You
 should attempt to minimize the number of SQL queries, but this isn't always
@@ -24,6 +24,8 @@ large contexts and your templates have complex inheritance or inclusion
 schemes. In that case, you should set ``SHOW_TEMPLATE_CONTEXT`` to ``False``
 in the ``DEBUG_TOOLBAR_CONFIG`` setting.
 
-Finally, if you don't need the panels that are slowing down your application,
-you can customize the ``DEBUG_TOOLBAR_PANELS`` setting to include only the
-panels you actually use.
+If you don't need the panels that are slowing down your application, you can
+disable them temporarily by deselecting the checkbox at the top right of each
+panel. Depending on implementation details, there may be a residual overhead.
+To remove them entirely, you can customize the ``DEBUG_TOOLBAR_PANELS``
+setting to include only the panels you actually use.