Add the ability for panels to be activated or de-activated via a client-side cookie. (For the next to implement profiling panel)

flaskext/debugtoolbar/panels/__init__.py

@@ -7,6 +7,12 @@ class DebugPanel(object):
     # name = Base
     has_content = False # If content returns something, set to true in subclass
 
+    # If the client is able to activate/de-activate the panel
+    user_enable = False
+
+    # If the client enabled the panel
+    is_active = False
+
     # We'll maintain a local context instance so we can expose our template
     # context variables to panels which need them:
     context = {}

flaskext/debugtoolbar/static/css/toolbar.css

@@ -92,6 +92,27 @@
 	font-variant:small-caps;
 }
 
+#flDebug #flDebugToolbar li .switch {
+    font-size: 10px;
+    position: absolute;
+    display: block;
+    color: white;
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    top: 15px;
+    right: 2px;
+}
+
+#flDebug #flDebugToolbar li .switch.active {
+    background-image: url(../img/tick.png);
+}
+
+#flDebug #flDebugToolbar li .switch.inactive {
+    background-image: url(../img/tick-red.png);
+}
+
+
 #flDebug #flDebugToolbarHandle {
 	position:fixed;
 	background:#fff;

flaskext/debugtoolbar/static/js/toolbar.js

@@ -17,6 +17,7 @@
     $.cookie = function(name, value, options) { if (typeof value != 'undefined') { options = options || {}; if (value === null) { value = ''; options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); } var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = $.trim(cookies[i]); if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } };
     $('head').append('<link rel="stylesheet" href="'+DEBUG_TOOLBAR_STATIC_PATH+'css/toolbar.css?'+ Math.random() +'" type="text/css" />');
 	var COOKIE_NAME = 'fldt';
+    var COOKIE_NAME_ACTIVE = COOKIE_NAME +'_active';
 	var fldt = {
 		init: function() {
 			$('#flDebug').show();
@@ -37,6 +38,37 @@
 				}
 				return false;
 			});
+            $('#flDebugPanelList li .switch').click(function() {
+                var $panel = $(this).parent();
+                var $this = $(this);
+                var dom_id = $panel.get(0).className;
+
+                // Turn cookie content into an array of active panels
+                var active_str = $.cookie(COOKIE_NAME_ACTIVE);
+                var active = (active_str) ? active_str.split(';') : [];
+                active = $.grep(active, function(n,i) { return n != dom_id; });
+
+                if ($this.hasClass('active')) {
+                    $this.removeClass('active');
+                    $this.addClass('inactive');
+                }
+                else {
+                    active.push(dom_id);
+                    $this.removeClass('inactive');
+                    $this.addClass('active');
+                }
+
+                if (active.length > 0) {
+                    $.cookie(COOKIE_NAME_ACTIVE, active.join(';'), {
+                        path: '/', expires: 10
+                    });
+                }
+                else {
+                    $.cookie(COOKIE_NAME_ACTIVE, null, {
+                        path: '/', expires: -1
+                    });
+                }
+            });
 			$('#flDebug a.flDebugClose').click(function() {
 				$(document).trigger('close.flDebug');
 				$('#flDebugToolbar li').removeClass('active');

flaskext/debugtoolbar/templates/base.html

@@ -10,7 +10,7 @@
 			<li id="flDebugButton">DEBUG</li>
 			{% endif %}
 			{% for panel in panels %}
-				<li>
+				<li class="{{ panel.dom_id() }}">
 					{% if panel.has_content %}
 						<a href="{{ panel.url()|default("#") }}" title="{{ panel.title() }}" class="{{ panel.dom_id() }}">
 					{% else %}
@@ -25,6 +25,9 @@
 					{% else %}
 					    </div>
 					{% endif %}
+                    {% if panel.user_activate %}
+                    <span class="switch {{ 'active' if panel.is_active else 'inactive' }}" title="Enable or disable the panel"></span>
+                    {% endif %}
 				</li>
 			{% endfor %}
         </ol>

flaskext/debugtoolbar/toolbar.py

@@ -5,7 +5,7 @@ class DebugToolbar(object):
         self.jinja_env = jinja_env
         self.request = request
         self.panels = []
-        
+
         # default config settings
         self.config = {
             'DEBUG_TB_INTERCEPT_REDIRECTS': True,
@@ -34,6 +34,8 @@ class DebugToolbar(object):
         Populate debug panels
         """
 
+        activated = self.request.cookies.get('fldt_active', '').split(';')
+
         for panel_path in self.default_panels:
             dot = panel_path.rindex('.')
             panel_module, panel_classname = panel_path[:dot], panel_path[dot+1:]
@@ -44,6 +46,9 @@ class DebugToolbar(object):
             panel_instance = panel_class(
                 context=self.template_context,
                 jinja_env=self.jinja_env)
+
+            if panel_instance.dom_id() in activated:
+                panel_instance.is_active = True
             self.panels.append(panel_instance)
 
     def render_toolbar(self):