1 files changed, 34 insertions, 0 deletions
diff --git a/debug_toolbar/media/toolbar.js b/debug_toolbar/media/toolbar.js
index 5baed78..9cbda92 100644
--- a/debug_toolbar/media/toolbar.js
+++ b/debug_toolbar/media/toolbar.js
@@ -47,6 +47,8 @@ jQuery(function() {
 			} else {
 				$j('#djDebugToolbar').show();
 			}
+			$j(window).load($j.djDebug.format_panels);
+			$j(window).resize($j.djDebug.format_panels);
 		},
 		open: function() {
 			$j(document).bind('keydown.djDebug', function(e) {
@@ -83,6 +85,37 @@ jQuery(function() {
 				path: '/',
 				expires: -1
 			});
+		},
+		/* Make sure that panel layout doesn't overflow the screen
+		 * width. Any panel that would otherwise wrap to the next line
+		 * are pushed into a "more..." vertical display in the final
+		 * panel position. */
+		format_panels: function () {
+			// If we've already done some overflow-avoidance, undo the
+			// effect before recomputing (needed, for example, after a
+			// window resize).
+			$j("#djDebugMore > ul > li").appendTo("#djDebugPanelList");
+			$j("#djDebugMore").remove();
+
+			// Check for wrapping by examing the position of the last
+			// element.
+			var row_top = $j("#djDebugPanelList > li").position().top;
+			var final_pos = $j("#djDebugPanelList > li:last").position();
+
+			if (final_pos.top == row_top && final_pos.left != 0) {
+				return;
+			}
+
+			function overflow_check(idx) {
+				pos = $j(this).position();
+				return pos.top > row_top || (idx > 1 && pos.left == 0);
+			};
+
+			var more = $j("<li id='djDebugMore'>More...<ul></ul></li>");
+			more.prependTo("#djDebugPanelList");
+			overflows = $j("#djDebugPanelList > li").filter(overflow_check);
+			more.appendTo("#djDebugPanelList");
+			$j("#djDebugMore > ul").append(overflows);
 		}
 	});
 	$j(document).bind('close.djDebug', function() {
@@ -93,5 +126,6 @@ jQuery(function() {
 jQuery(function() {
 	jQuery.djDebug();
 });
+
 $ = _$;