adding sticky panels functionality via javascript

CHANGES.txt

@@ -1,3 +1,20 @@
+Unreleased
+-----------------
+
+- Added "sticky" panel functionality to allow a selected panel to persist 
+  across pageviews using cookies.  If a cookied panel does not have content
+  available for display, the first non-disabled panel will be displayed. If a
+  cookied panel is not enabled on the toolbar, the first non-disabled panel will
+  be displayed AND will become the new default panel.
+
+  See: https://github.com/Pylons/pyramid_debugtoolbar/pull/272
+
+- Added `CustomLoggerFactory` to javascript, used in the development of PR 272.
+  This javascript factory allows panel developers and maintainers to use verbose
+  console logging during development, partitioned by feature, and silence it for
+  deployment while still leaving the logging lines activated.
+
+
 3.0.5 (2016-11-1)
 -----------------
 

pyramid_debugtoolbar/static/toolbar/toolbar.js

@@ -113,3 +113,131 @@ $(function () {
     connectEventSource();
   }
 });
+
+
+/*
+This provides for a global custom logging factory, somewhat similar to python's logging module.
+
+A logger is instantiated with two arguments: label (string)  and debugging (boolean).
+
+Log lines are prepended with a label and timestamp:
+
+	[label timestamp] message
+
+Example-
+
+	The following custom logger:
+		var logger = custom_logger_factory("debugtoolbar_stickypanel", 1);
+
+	Will create this line:
+		[debugtoolbar_stickypanel 1:13:54 PM] No cookied panel detected
+
+	If the debugging is turned off
+		var logger = custom_logger_factory("debugtoolbar_stickypanel", 0);
+
+	There will be no output for this logger.
+
+This factory allows authors to use verbose, partitioned, console logging during
+development and troubleshooting, but suppress it on deployment.
+
+*/
+function CustomLoggerFactory(label, debugging_level) {
+	if (!debugging_level){
+		return(function() {return {log: function(){} }; }());
+	}
+	return (function () {
+		var timestamp = function () {};
+		timestamp.toString = function () {
+			return "[" + label + ' ' + (new Date()).toLocaleTimeString() + "]";
+		};
+		return {log: console.log.bind(console, '%s', timestamp)};
+	})();
+}
+
+
+/*
+	Sticky Panel Functionality
+
+	The functionality can be turned on/off via the global settings tab.
+	A cookies is used to control this feature:
+	* pdtb_sticky_panel_selected - the last selected panel
+*/
+$(function() {
+	// custom logger
+	var logger = CustomLoggerFactory("debugtoolbar_stickypanel", 0);
+
+	// store active panel into this cookie
+	var COOKIE_NAME_STICKYPANEL_SELECTED = 'pdtb_sticky_panel_selected';
+	var cookied_panel = $.cookie(COOKIE_NAME_STICKYPANEL_SELECTED);
+
+	// helper functions
+	function show_panel(panel_tab_element, selected_panel_text){
+		// show's the panel
+		$(panel_tab_element).tab('show');
+		// handle bootstrap incompatibility by invoking the content directly
+		$("#"+selected_panel_text+'-content').show();
+	}
+	function get_displayable_panel(){
+		// tries to find a displayable panel
+		// returns a js object that contains the panel's tab element and text name
+		logger.log('looking for an alternate panel...');
+		var displayable = {"panel_tab_element": null,
+						   "selected_panel_text": null
+						   };
+		var panel_tab_element = $('.pDebugPanels ul li').not('.disabled').first();
+		if (panel_tab_element === undefined){
+			return displayable;
+		}
+		var selected_panel_text = panel_tab_element.attr('id');
+		displayable["panel_tab_element"] = panel_tab_element
+		displayable["selected_panel_text"] = selected_panel_text
+		return displayable
+	}
+	function handle_alt_panel(do_cookie){
+		// consolidates finding and showing an alternate panel
+		// if do_cookie is ``true``, will set the new cookie as the default panel
+		logger.log('handling alternate panel...');
+		// set default value to false
+		do_cookie = typeof do_cookie !== 'undefined' ? do_cookie : false;
+		var displayable = get_displayable_panel();
+		if (displayable.panel_tab_element && displayable.selected_panel_text) {
+			show_panel(displayable.panel_tab_element, displayable.selected_panel_text);
+			if (do_cookie){
+				$.cookie(COOKIE_NAME_STICKYPANEL_SELECTED, selected_panel_text);
+			}
+		}
+	}
+
+	// only run the feature when activated, otherwise let bootstrap sort it out.
+	if (cookied_panel){
+		// activate the panel if it exists and is populated
+		logger.log("Activating Debug Toolbar Panel : ", cookied_panel);
+		// toolbar doesn't seem to use the normal bootstrap integration, so invoke two methods
+		// the issue is that 2 identical #ids are generated : one on the `li`, one of the `li.a`
+		var cookied_panel_tab = $("#"+cookied_panel);
+		if (!cookied_panel_tab.length){
+			logger.log('The toolbar panel is not on this screen');
+			logger.log('I will set a new cookie value if possible...');
+			handle_alt_panel(1);
+		} else {
+			if (cookied_panel_tab.hasClass('disabled')){
+				logger.log('The toolbar panel is disabled on this view.');
+				handle_alt_panel(0);
+			} else {
+				show_panel(cookied_panel_tab, cookied_panel);
+			}
+		}
+	} else {
+		logger.log('No cookied panel detected');
+		handle_alt_panel(0);
+	}
+
+	// subscribe panels for recording the active panel in a cookie
+	$(".pDebugPanels ul li a").click(function() {
+		var selected_panel_text = $(this).attr('id');
+		if (selected_panel_text){
+			$.cookie(COOKIE_NAME_STICKYPANEL_SELECTED, selected_panel_text);
+		}
+	});
+
+});

pyramid_debugtoolbar/templates/settings_tab.dbtmako

@@ -8,20 +8,20 @@
 <p>Some pyramid debug toolbar panels can be activated (this enables additional features).</p>
 <p>NOTE: These settings are tracked in a cookie on a per-request basis. If you want to enable options for other requests such as via curl or a non-browser client then you should turn them on by default in your settings via the "debugtoolbar.active_panels" setting, or by setting the "pdtb_active" cookie on the client.</p>
 
+<h4>Panel Settings</h4>
 % for panel in panels:
 	% if panel.user_activate:
-		<h4>
-		${panel.nav_title}
-		</h4>
+		<h5>${panel.nav_title}</h5>
 		% if panel.name in default_active_panels:
-		<span>Enabled: </span>   <span class="switch default-active" title="Panel is active by default."></span>
+			<span>Enabled: </span> <span class="switch default-active" title="Panel is active by default."></span>
 		% else:
-		<span>Enabled: </span>	<span id="${panel.dom_id}-switch" data-pdtb-panel="${panel.name}" class="switch switchable ${'active' if panel.is_active else 'inactive'}"
-		title="Enable or disable the panel"> </span>
+			<span>Enabled: </span> <span id="${panel.dom_id}-switch" data-pdtb-panel="${panel.name}" class="switch switchable ${'active' if panel.is_active else 'inactive'}" title="Enable or disable the panel"></span>
 		% endif
+		<hr/>
 	% endif
 % endfor
 
+
 </div>
 </div>
 </div>