experimental: allow to move the tab bar from TabsToolbar to another toolbar

content/treestyletab/treestyletab.css

@@ -102,7 +102,7 @@ tabbrowser[treestyletab-tabbar-autohide-mode="1"][treestyletab-tabbar-autohide="
 /* put resizer under tabs, and raise up tabs */
 .treestyletab-tabbar-toolbar[treestyletab-mode="vertical"][treestyletab-tabbar-autohide][treestyletab-tabbar-autohide-state="expanded"]
   > *,
-.tabs-toolbar-inner-box[treestyletab-tabbar-autohide][treestyletab-tabbar-autohide-state="expanded"]:not([treestyletab-tabbar-fixed="true"])
+.treestyletab-toolbar-inner-box[treestyletab-tabbar-autohide][treestyletab-tabbar-autohide-state="expanded"]:not([treestyletab-tabbar-fixed="true"])
   > * {
 	position: relative;
 	z-index: 2;
@@ -208,18 +208,18 @@ tabbrowser[treestyletab-tabbar-autohide-mode="1"][treestyletab-tabbar-autohide="
 	max-width: 64000px !important;
 }
 
-.treestyletab-tabbar-toolbar,
+#TabsToolbar,
-#navigator-toolbox[tabsontop="false"] > .treestyletab-tabbar-toolbar,
+#navigator-toolbox[tabsontop="false"] > #TabsToolbar,
-#navigator-toolbox[tabsontop="false"] > .treestyletab-tabbar-toolbar:-moz-lwtheme {
+#navigator-toolbox[tabsontop="false"] > #TabsToolbar:-moz-lwtheme {
-	-moz-binding: url(treestyletab.xml#tabs-toolbar);
+	-moz-binding: url(treestyletab.xml#toolbar);
 }
-#navigator-toolbox[tabsontop="true"] > .treestyletab-tabbar-toolbar,
+#navigator-toolbox[tabsontop="true"] > #TabsToolbar,
-#navigator-toolbox[tabsontop="true"] > .treestyletab-tabbar-toolbar:-moz-lwtheme,
+#navigator-toolbox[tabsontop="true"] > #TabsToolbar:-moz-lwtheme,
 #navigator-toolbox
-  > #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + .treestyletab-tabbar-toolbar[tabsontop="true"]:last-child,
+  > #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="true"]:last-child,
 #navigator-toolbox
-  > #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + .treestyletab-tabbar-toolbar[tabsontop="false"]:last-child {
+  > #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child {
-	-moz-binding: url(treestyletab.xml#tabs-toolbar-drag);
+	-moz-binding: url(treestyletab.xml#toolbar-drag);
 }
 .treestyletab-tabbar-toolbar:not([treestyletab-tabbar-position="top"]),
 .treestyletab-tabbar-toolbar[treestyletab-tabbar-position="top"]:not([treestyletab-tabbar-fixed="true"]) {

content/treestyletab/treestyletab.xml

@@ -12,27 +12,27 @@
 		</content>
 	</binding>
 
-	<binding id="tabs-toolbar"
+	<binding id="toolbar"
 		extends="chrome://global/content/bindings/toolbar.xml#toolbar">
 		<content><xul:hbox flex="1"
 		                   xbl:inherits="orient"
 		                   anonid="toolbar-innerbox"
-		                   class="tabs-toolbar-inner-box"><xbl:children/></xul:hbox></content>
+		                   class="treestyletab-toolbar-inner-box"><xbl:children/></xul:hbox></content>
 		<implementation>
-			<field name="tabsToolbarInnerBox" readonly="true">
+			<field name="treeStyleTabToolbarInnerBox" readonly="true">
 				document.getAnonymousElementByAttribute(this, 'anonid', 'toolbar-innerbox')
 			</field>
 		</implementation>
 	</binding>
 
-	<binding id="tabs-toolbar-drag"
+	<binding id="toolbar-drag"
 		extends="chrome://global/content/bindings/toolbar.xml#toolbar-drag">
 		<content><xul:hbox flex="1"
 		                   xbl:inherits="orient"
 		                   anonid="toolbar-innerbox"
-		                   class="tabs-toolbar-inner-box"><xbl:children/></xul:hbox></content>
+		                   class="treestyletab-toolbar-inner-box"><xbl:children/></xul:hbox></content>
 		<implementation>
-			<field name="tabsToolbarInnerBox" readonly="true">
+			<field name="treeStyleTabToolbarInnerBox" readonly="true">
 				document.getAnonymousElementByAttribute(this, 'anonid', 'toolbar-innerbox')
 			</field>
 		</implementation>

content/treestyletab/treestyletabbrowser.js

@@ -397,6 +397,9 @@ TreeStyleTabBrowser.prototype = {
 		this.tabTooltip.addEventListener('popupshowing', this, true);
 
 		window.addEventListener('resize', this, true);
+		window.addEventListener('beforecustomization', this, true);
+		window.addEventListener('aftercustomization', this, false);
+		window.addEventListener('customizationchange', this, false);
 		window.addEventListener(this.kEVENT_TYPE_PRINT_PREVIEW_ENTERED, this, false);
 		window.addEventListener(this.kEVENT_TYPE_PRINT_PREVIEW_EXITED,  this, false);
 
@@ -1073,6 +1076,11 @@ TreeStyleTabBrowser.prototype = {
 			aSelf.updateAllTabsButton(aTabBrowser);
 			delayedPostProcess = null;
 			aSelf.mTabBrowser.style.visibility = '';
+
+			var event = document.createEvent('Events');
+			event.initEvent(aSelf.kEVENT_TYPE_TABBAR_INITIALIZED, true, false);
+			aSelf.mTabBrowser.dispatchEvent(event);
+
 			aSelf.startRendering();
 		}, 0, this, b, splitter, toggler);
 
@@ -1178,6 +1186,7 @@ TreeStyleTabBrowser.prototype = {
 
 		window.setTimeout(function(aSelf) {
 			aSelf.updateFloatingTabbar(aSelf.kTABBAR_UPDATE_BY_APPEARANCE_CHANGE);
+			aSelf.fireTabbarStateChangedEvent();
 			aSelf.startRendering();
 		}, 0, this);
 
@@ -1567,6 +1576,9 @@ TreeStyleTabBrowser.prototype = {
 		strip.removeEventListener('click',           this, true);
 
 		window.removeEventListener('resize', this, true);
+		window.removeEventListener('beforecustomization', this, true);
+		window.removeEventListener('aftercustomization', this, false);
+		window.removeEventListener('customizationchange', this, false);
 		window.removeEventListener(this.kEVENT_TYPE_PRINT_PREVIEW_ENTERED, this, false);
 		window.removeEventListener(this.kEVENT_TYPE_PRINT_PREVIEW_EXITED,  this, false);
 
@@ -1704,9 +1716,9 @@ TreeStyleTabBrowser.prototype = {
 					tabs.forEach(function(aTab) {
 						this.initTabContents(aTab);
 					}, this);
-					this.fireTabbarPositionEvent(false, oldPosition, value);
 					window.setTimeout(function(aSelf) {
 						aSelf.checkTabsIndentOverflow();
+						aSelf.fireTabbarPositionEvent(false, oldPosition, value);
 					}, 0, this);
 				}
 				return;
@@ -1751,10 +1763,8 @@ TreeStyleTabBrowser.prototype = {
 			case 'extensions.treestyletab.maxTreeLevel.horizontal':
 			case 'extensions.treestyletab.allowSubtreeCollapseExpand.horizontal':
 			case 'extensions.treestyletab.tabbar.hideAlltabsButton.horizontal':
-				if (!this.isVertical && this.fireTabbarStateChangingEvent()) {
+				if (!this.isVertical && this.fireTabbarStateChangingEvent())
 					this.updateTabbarState();
-					this.fireTabbarStateChangedEvent();
-				}
 				return;
 
 			case 'extensions.treestyletab.tabbar.fixed.vertical':
@@ -1763,10 +1773,8 @@ TreeStyleTabBrowser.prototype = {
 			case 'extensions.treestyletab.maxTreeLevel.vertical':
 			case 'extensions.treestyletab.allowSubtreeCollapseExpand.vertical':
 			case 'extensions.treestyletab.tabbar.hideAlltabsButton.vertical':
-				if (this.isVertical && this.fireTabbarStateChangingEvent()) {
+				if (this.isVertical && this.fireTabbarStateChangingEvent())
 					this.updateTabbarState();
-					this.fireTabbarStateChangedEvent();
-				}
 				return;
 
 			case 'extensions.treestyletab.tabbar.width':
@@ -2050,6 +2058,16 @@ TreeStyleTabBrowser.prototype = {
 				return this.onResize(aEvent);
 
 
+			case 'beforecustomization':
+				return this.onToolbarCustomizeStart(aEvent);
+
+			case 'aftercustomization':
+				return this.onToolbarCustomizeEnd(aEvent);
+
+			case 'customizationchange':
+				return this.onToolbarCustomizeChanging(aEvent);
+
+
 			case this.kEVENT_TYPE_PRINT_PREVIEW_ENTERED:
 				return this.onTreeStyleTabPrintPreviewEntered(aEvent);
 			case this.kEVENT_TYPE_PRINT_PREVIEW_EXITED:
@@ -3256,6 +3274,78 @@ TreeStyleTabBrowser.prototype = {
 			this.updateFloatingTabbar(this.kTABBAR_UPDATE_BY_WINDOW_RESIZE);
 	},
  
+// toolbar customizing on Firefox 4 or later 
+	
+	onToolbarCustomizeStart : function TSTBrowser_onToolbarCustomizeStart(aEvent) 
+	{
+return;
+		if (this.currentTabbarPosition != 'top') {
+			this._lastTabbarPositionBeforeCustomizing = this.currentTabbarPosition;
+			let self = this;
+			this.waitForDOMEvent(
+				this.kEVENT_TYPE_TABBAR_POSITION_CHANGED,
+				window,
+				100,
+				function() { self.currentTabbarPosition = 'top'; }
+			);
+		}
+
+		if (!this.isFixed) {
+			this._lastTabbarFixedBeforeCustomizing = this.isFixed;
+			let self = this;
+			this.waitForDOMEvent(
+				this.kEVENT_TYPE_TABBAR_STATE_CHANGED,
+				window,
+				100,
+				function() { self.toggleFixed(); }
+			);
+		}
+
+		this.updateFloatingTabbar(this.kTABBAR_UPDATE_NOW);
+		this.removeTabStripAttribute('width');
+		this.removeTabStripAttribute('height');
+		this.removeTabStripAttribute('ordinal');
+
+		this.mTabBrowser.mTabContainer.parentNode.classList.remove(this.kTABBAR_TOOLBAR);
+	},
+ 
+	onToolbarCustomizeEnd : function TSTBrowser_onToolbarCustomizeEnd(aEvent) 
+	{
+return;
+		this.mTabBrowser.mTabContainer.parentNode.classList.add(this.kTABBAR_TOOLBAR);
+
+		if (!this._lastTabbarFixedBeforeCustomizing && this.isFixed) {
+			let self = this;
+			this.waitForDOMEvent(
+				this.kEVENT_TYPE_TABBAR_STATE_CHANGED,
+				window,
+				100,
+				function() {
+					self.toggleFixed();
+					delete self._lastTabbarFixedBeforeCustomizing;
+				}
+			);
+		}
+
+		if (this._lastTabbarPositionBeforeCustomizing) {
+			let self = this;
+			this.waitForDOMEvent(
+				this.kEVENT_TYPE_TABBAR_INITIALIZED,
+				window,
+				100,
+				function() {
+					self.initTabbar(self._lastTabbarPositionBeforeCustomizing, 'top');
+					delete self._lastTabbarPositionBeforeCustomizing;
+				}
+			);
+			this.updateFloatingTabbar(this.kTABBAR_UPDATE_NOW);
+		}
+	},
+ 
+	onToolbarCustomizeChanging : function TSTBrowser_onToolbarCustomizeChanging(aEvent) 
+	{
+	},
+  
 	onPopupShowing : function TSTBrowser_onPopupShowing(aEvent) 
 	{
 		if (aEvent.target.localName == 'tooltip')

modules/utils.js

@@ -45,6 +45,7 @@ Components.utils.import('resource://treestyletab-modules/lib/extensions.js');
 Components.utils.import('resource://treestyletab-modules/lib/animationManager.js');
 Components.utils.import('resource://treestyletab-modules/lib/autoScroll.js');
 Components.utils.import('resource://treestyletab-modules/lib/confirmWithTab.js');
+Components.utils.import('resource://treestyletab-modules/lib/jstimer.jsm');
 
 Components.utils.import('resource://treestyletab-modules/lib/namespace.jsm');
 var window = getNamespaceFor('piro.sakura.ne.jp');
@@ -131,6 +132,7 @@ var TreeStyleTabUtils = {
 	kEVENT_TYPE_SUBTREE_CLOSING              : 'nsDOMTreeStyleTabSubtreeClosing',
 	kEVENT_TYPE_SUBTREE_CLOSED               : 'nsDOMTreeStyleTabSubtreeClosed',
 	kEVENT_TYPE_TAB_COLLAPSED_STATE_CHANGED  : 'nsDOMTreeStyleTabCollapsedStateChange',
+	kEVENT_TYPE_TABBAR_INITIALIZED           : 'nsDOMTreeStyleTabTabbarInitialized',
 	kEVENT_TYPE_TABBAR_POSITION_CHANGING     : 'nsDOMTreeStyleTabTabbarPositionChanging',
 	kEVENT_TYPE_TABBAR_POSITION_CHANGED      : 'nsDOMTreeStyleTabTabbarPositionChanged',
 	kEVENT_TYPE_TABBAR_STATE_CHANGING        : 'nsDOMTreeStyleTabTabbarStateChanging',
@@ -558,6 +560,68 @@ var TreeStyleTabUtils = {
 	kUNDO_CLOSE_SET      : 2,
 	kUNDO_CLOSE_FULL_SET : 256,
  
+	waitForDOMEvent : function TSTUtils_waitForDOMEvent() 
+	{
+		var type, target, delay, task;
+		Array.slice(arguments).forEach(function(aArg) {
+			switch(typeof aArg)
+			{
+				case 'string':
+					type = aArg;
+					break;
+
+				case 'number':
+					delay = aArg;
+					break;
+
+				case 'function':
+					task = aArg;
+					break;
+
+				default:
+					target = aArg;
+					break;
+			}
+		});
+
+		if (!target || !type) {
+			if (task) task();
+			return;
+		}
+
+		var done = false;
+		var listener = function(aEvent) {
+				setTimeout(function() {
+					done = true;
+				}, delay || 0);
+				target.removeEventListener(type, listener, false);
+			};
+
+		if (task)
+			setTimeout(function() {
+				try {
+					task();
+				}
+				catch(e) {
+					dump(e+'\n');
+					target.removeEventListener(type, listener, false);
+					done = true;
+				}
+			}, 0);
+
+		target.addEventListener(type, listener, false);
+
+		var thread = Components
+						.classes['@mozilla.org/thread-manager;1']
+						.getService()
+						.mainThread;
+		while (!done)
+		{
+			//dump('WAIT '+type+' '+Date.now()+'\n');
+			thread.processNextEvent(true);
+		}
+	},
+ 
 // event 
 	
 	isNewTabAction : function TSTUtils_isNewTabAction(aEvent) 
@@ -876,7 +940,11 @@ var TreeStyleTabUtils = {
 		var strip = aTabBrowser.mStrip;
 		return (strip && strip instanceof Ci.nsIDOMElement) ?
 				strip :
-				aTabBrowser.tabContainer.parentNode;
+				this.evaluateXPath(
+					aTabBrowser.tabContainer,
+					'ancestor::xul:toolbar[1]',
+					Ci.nsIDOMXPathResult.FIRST_ORDERED_NODE_TYPE
+				).singleNodeValue || aTabBrowser.tabContainer.parentNode;
 	},
 	get tabStrip()
 	{
@@ -889,7 +957,7 @@ var TreeStyleTabUtils = {
 			return null;
 
 		var strip = this.getTabStrip(aTabBrowser);
-		return strip.tabsToolbarInnerBox || aTabBrowser.tabContainer;
+		return strip.treeStyleTabToolbarInnerBox || aTabBrowser.tabContainer;
 	},
 	get tabContainerBox()
 	{
@@ -932,8 +1000,8 @@ var TreeStyleTabUtils = {
 			}
 			if (this._tabStripPlaceHolder)
 				this._tabStripPlaceHolder.setAttribute(aAttr, aValue);
-			if (strip.tabsToolbarInnerBox)
+			if (strip.treeStyleTabToolbarInnerBox)
-				strip.tabsToolbarInnerBox.setAttribute(aAttr, aValue);
+				strip.treeStyleTabToolbarInnerBox.setAttribute(aAttr, aValue);
 		}
 		else {
 			strip.removeAttribute(aAttr);
@@ -944,8 +1012,8 @@ var TreeStyleTabUtils = {
 			}
 			if (this._tabStripPlaceHolder)
 				this._tabStripPlaceHolder.removeAttribute(aAttr);
-			if (strip.tabsToolbarInnerBox)
+			if (strip.treeStyleTabToolbarInnerBox)
-				strip.tabsToolbarInnerBox.removeAttribute(aAttr);
+				strip.treeStyleTabToolbarInnerBox.removeAttribute(aAttr);
 		}
 	},
  

skin/classic/treestyletab/base.css

@@ -53,7 +53,7 @@
 }
 .treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > *:first-child,
 .treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > *:first-child[hidden="true"] + *:not(toolbarpaletteitem),
-.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > .tabs-toolbar-inner-box {
+.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > .treestyletab-toolbar-inner-box {
 	-moz-border-top-colors: none !important;
 	border-top: 0 none !important;
 }