Build pseudo tree based on HTML

modules/groupTab.js

@@ -234,6 +234,8 @@ GroupTab.prototype = inherit(TreeStyleTabBase, {
 		var contents = PseudoTreeBuilder.build(this.getOwnerTab());
 		if (contents)
 			tree.appendChild(contents);
+
+		this.onResize();
 	},
 
 	checkUpdateTreeNow : function GT_checkUpdateTreeNow()
@@ -272,10 +274,8 @@ GroupTab.prototype = inherit(TreeStyleTabBase, {
 			case 'TabSelect':
 				return this.onTabSelect(aEvent);
 
-			case 'overflow':
-				return this.onOverflow(aEvent);
-			case 'underflow':
-				return this.onUnderflow(aEvent);
+			case 'resize':
+				return this.onResize();
 
 			case this.kEVENT_TYPE_ATTACHED:
 				return this.onTabAttached(aEvent);
@@ -298,8 +298,7 @@ GroupTab.prototype = inherit(TreeStyleTabBase, {
 		this.window.addEventListener('unload', this, false);
 		this.window.addEventListener('click', this, false);
 		this.window.addEventListener('dblclick', this, false);
-		this.window.addEventListener('overflow', this, false);
-		this.window.addEventListener('underflow', this, false);
+		this.window.addEventListener('resize', this, false);
 
 		tab.addEventListener('TabSelect', this, false);
 		tab.addEventListener('TabClose', this, false);
@@ -331,8 +330,7 @@ GroupTab.prototype = inherit(TreeStyleTabBase, {
 		this.window.removeEventListener('unload', this, false);
 		this.window.removeEventListener('click', this, false);
 		this.window.removeEventListener('dblclick', this, false);
-		this.window.removeEventListener('overflow', this, false);
-		this.window.removeEventListener('underflow', this, false);
+		this.window.removeEventListener('resize', this, false);
 
 		tab.removeEventListener('TabSelect', this, false);
 		tab.removeEventListener('TabClose', this, false);
@@ -403,20 +401,12 @@ GroupTab.prototype = inherit(TreeStyleTabBase, {
 		this.shouldUpdate = false;
 	},
 
-	onOverflow : function GT_onOverflow(aEvent)
+	onResize : function GT_onResize()
 	{
-		var target = aEvent.originalTarget;
-		if (target.className != PseudoTreeBuilder.kTREEITEM)
-			return;
-		target.style.minHeight = target.lastChild.boxObject.height + 'px';
-	},
-
-	onUnderflow : function GT_onUnderflow(aEvent)
-	{
-		var target = aEvent.originalTarget;
-		if (target.className != PseudoTreeBuilder.kTREEITEM)
-			return;
-		target.style.minHeight = '';
+		var items = this.document.querySelectorAll('*|*.' + PseudoTreeBuilder.kTREEITEM);
+		Array.forEach(items, function(aItem) {
+			aItem.style.minHeight = (aItem.lastChild.boxObject.height + 1) + 'px';
+		}, this);
 	},
 
 	onTabAttached : function GT_onTabAttached(aEvent)

modules/pseudoTreeBuilder.js

@@ -44,6 +44,7 @@ Components.utils.import('resource://gre/modules/XPCOMUtils.jsm');
 XPCOMUtils.defineLazyModuleGetter(this, 'TreeStyleTabBase', 'resource://treestyletab-modules/base.js');
 
 var PseudoTreeBuilder = {
+	XHTMLNS : 'http://www.w3.org/1999/xhtml',
 
 	kFAVICON      : 'treestyletab-pseudo-tree-favicon',
 	kROOTITEM     : 'treestyletab-pseudo-tree-root-item',
@@ -60,7 +61,7 @@ var PseudoTreeBuilder = {
 
 		var tree = this.createTabItem(aTab);
 
-		var row = tree.querySelector("."+this.kTREEROW);
+		var row = tree.querySelector("*|*."+this.kTREEROW);
 		if (!row)
 			return;
 
@@ -95,11 +96,10 @@ var PseudoTreeBuilder = {
 		var doc = aTab.ownerDocument;
 		var w = doc.defaultView;
 
-		var item = doc.createElement('hbox');
+		var item = doc.createElementNS(this.XHTMLNS, 'div');
 		item.setAttribute('class', this.kTREEITEM);
-		item.setAttribute('flex', 1);
 
-		var favicon = item.appendChild(doc.createElement('image'));
+		var favicon = item.appendChild(doc.createElementNS(this.XHTMLNS, 'img'));
 		favicon.setAttribute('src', aTab.getAttribute('image') || 'chrome://mozapps/skin/places/defaultFavicon.png');
 		favicon.setAttribute('class', this.kFAVICON);
 
@@ -113,14 +113,13 @@ var PseudoTreeBuilder = {
 		label.setAttribute('class', 'text-link');
 		label.setAttribute('tab-id', TreeStyleTabBase.getTabValue(aTab, TreeStyleTabBase.kID));
 
-		var row = doc.createElement('hbox');
+		var row = doc.createElementNS(this.XHTMLNS, 'div');
 		row.setAttribute('class', this.kTREEROW);
-		row.setAttribute('flex', 1);
 		row.appendChild(item);
 
 		var children = this.createTabChildren(aTab);
 		if (children) {
-			let container = doc.createElement('vbox');
+			let container = doc.createElementNS(this.XHTMLNS, 'div');
 			container.appendChild(row);
 			container.appendChild(children);
 			return container;
@@ -138,7 +137,7 @@ var PseudoTreeBuilder = {
 		if (!children.length)
 			return null;
 
-		var container = doc.createElement('vbox');
+		var container = doc.createElementNS(this.XHTMLNS, 'div');
 		container.setAttribute('class', this.kTREECHILDREN);
 		for (let i = 0, maxi = children.length; i < maxi; i++)
 		{

skin/classic/treestyletab/group.css

@@ -1,3 +1,6 @@
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace xhtml url("http://www.w3.org/1999/xhtml");
+
 :root {
 	appearance: window;
 	-moz-appearance: window;
@@ -63,10 +66,10 @@
 	-moz-box-flex: 1;
 }
 
-.treestyletab-pseudo-tree-root-item {
-	display: none;
+*|*.treestyletab-pseudo-tree-root-item {
+	display: none !important;
 }
 
-.treestyletab-pseudo-tree-item {
+*|*.treestyletab-pseudo-tree-item {
 	overflow: hidden;
 }

skin/classic/treestyletab/pseudo-tree.css

@@ -1,25 +1,33 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace xhtml url("http://www.w3.org/1999/xhtml");
 
-.treestyletab-pseudo-tree-favicon {
+*|*.treestyletab-pseudo-tree-favicon {
 	height: 16px;
 	max-width: 16px;
 	max-height: 16px;
 	width: 16px;
 }
 
-.treestyletab-pseudo-tree-row {
-	box-align: center;
-	-moz-box-align: center;
+*|*.treestyletab-pseudo-tree-item {
+	display: block;
+	margin-bottom: 0.15em;
+	white-space: pre;
 }
 
-.treestyletab-pseudo-tree-row label.text-link {
+*|*.treestyletab-pseudo-tree-row {
+	display: block;
+}
+
+*|*.treestyletab-pseudo-tree-row label.text-link {
 	box-crop: end;
 	-moz-box-crop: end;
+	margin: 0;
+	padding: 0 0 0 0.2em;
+	vertical-align: text-top;
+	white-space: pre-wrap;
 }
 
-.treestyletab-pseudo-tree-children {
+*|*.treestyletab-pseudo-tree-children > *|* {
 	margin-left: 1.5em;
-	box-align: stretch;
-	-moz-box-align: stretch;
 }