Show pseudo tree in multiple columns

modules/groupTab.js

@@ -403,6 +403,24 @@ GroupTab.prototype = inherit(TreeStyleTabBase, {
 
 	onResize : function GT_onResize()
 	{
+		var container = this.document.getElementById('tree');
+		var tree = container.firstChild;
+
+		var style = tree.style;
+		var height = tree.clientHeight * (tree.columnCount || 1);
+		if (height > container.boxObject.height) {
+			tree.columnCount = style.columnCount = style.MozColumnCount = 2;
+			var maxWidth = container.boxObject.width;
+			style.columnWidth = style.MozColumnWidth = Math.floor(maxWidth * 0.45)+'px';
+			style.columnGap = style.MozColumnGap = Math.floor(maxWidth * 0.05)+'px';
+		}
+		else {
+			tree.columnCount = 1;
+			style.columnCount = style.MozColumnCount =
+				style.columnWidth = style.MozColumnWidth =
+				style.columnGap = style.MozColumnGap = '';
+		}
+
 		var items = this.document.querySelectorAll('*|*.' + PseudoTreeBuilder.kTREEITEM);
 		Array.forEach(items, function(aItem) {
 			aItem.style.minHeight = (aItem.lastChild.boxObject.height + 1) + 'px';

modules/pseudoTreeBuilder.js

@@ -47,6 +47,7 @@ var PseudoTreeBuilder = {
 	XHTMLNS : 'http://www.w3.org/1999/xhtml',
 
 	kFAVICON      : 'treestyletab-pseudo-tree-favicon',
+	kROOT         : 'treestyletab-pseudo-tree-root',
 	kROOTITEM     : 'treestyletab-pseudo-tree-root-item',
 	kTREEITEM     : 'treestyletab-pseudo-tree-item',
 	kTREEROW      : 'treestyletab-pseudo-tree-row',
@@ -60,6 +61,7 @@ var PseudoTreeBuilder = {
 			return null;
 
 		var tree = this.createTabItem(aTab);
+		tree.className = this.kROOT;
 
 		var row = tree.querySelector("*|*."+this.kTREEROW);
 		if (!row)

skin/classic/treestyletab/group.css

@@ -60,7 +60,7 @@
 
 
 #tree {
-	margin-top: 1em;
+	margin: 1em 0 0 0.5em;
 	overflow: auto;
 	box-flex: 1;
 	-moz-box-flex: 1;
@@ -69,7 +69,7 @@
 *|*.treestyletab-pseudo-tree-root-item {
 	display: none !important;
 }
-
-*|*.treestyletab-pseudo-tree-item {
-	overflow: hidden;
+*|*.treestyletab-pseudo-tree-root-item +
+  *|*.treestyletab-pseudo-tree-children > *|* {
+	margin-left: 0 !important;
 }