Tab Mix Plus用のコードを分離

git-svn-id: http://www.cozmixng.org/repos/piro/treestyletab/trunk@5505 599a83e7-65a4-db11-8015-0010dcdd6dc2

content/treestyletab/hacks.js

@@ -101,8 +101,13 @@ TreeStyleTabService.overrideExtensionsPreInit = function() {
 		}
 	}
 
+	// Tab Mix Plus
+	if (this.getTreePref('compatibility.TMP')) {
+		document.documentElement.setAttribute('treestyletab-enable-compatibility-tmp', true);
+	}
 	// Tab Mix Plus, SessionStore API
-	if ('SessionData' in window &&
+	if (this.getTreePref('compatibility.TMP') &&
+		'SessionData' in window &&
 		'getTabProperties' in SessionData &&
 		'setTabProperties' in SessionData) {
 		var prefix = this.kTMP_SESSION_DATA_PREFIX;
@@ -192,14 +197,17 @@ TreeStyleTabService.overrideExtensionsPreInit = function() {
 TreeStyleTabService.overrideExtensionsOnInitBefore = function() {
 
 	// Tab Mix Plus
-	if ('TMP_LastTab' in window) {
+	if (this.getTreePref('compatibility.TMP') &&
+		'TMP_LastTab' in window) {
 		TMP_LastTab.TabBar = gBrowser.mTabContainer;
 	}
-	if ('flst' in window) {
+	if (this.getTreePref('compatibility.TMP') &&
+		'flst' in window) {
 		flst.tb = gBrowser;
 		flst.tabBox = flst.tb.mTabBox;
 	}
-	if ('isTabVisible' in gBrowser.mTabContainer &&
+	if (this.getTreePref('compatibility.TMP') &&
+		'isTabVisible' in gBrowser.mTabContainer &&
 		'ensureTabIsVisible' in gBrowser.mTabContainer) {
 		function replaceHorizontalProps(aString)
 		{
@@ -223,10 +231,9 @@ TreeStyleTabService.overrideExtensionsOnInitBefore = function() {
 				'$& && !gBrowser.treeStyleTab.isVertical'
 			))
 		);
-		if (!this.getTreePref('TMP.doNotUpdate.isTabVisible'))
+		eval('gBrowser.mTabContainer.isTabVisible = '+
-			eval('gBrowser.mTabContainer.isTabVisible = '+
+			replaceHorizontalProps(gBrowser.mTabContainer.isTabVisible.toSource())
-				replaceHorizontalProps(gBrowser.mTabContainer.isTabVisible.toSource())
+		);
-			);
 	}
 
 };
@@ -264,7 +271,8 @@ TreeStyleTabService.overrideExtensionsOnInitAfter = function() {
 
 
 	// Tab Mix Plus
-	if ('TMupdateSettings' in window) {
+	if (this.getTreePref('compatibility.TMP') &&
+		'TMupdateSettings' in window) {
 		eval('window.TMupdateSettings = '+
 			window.TMupdateSettings.toSource().replace(
 				/(\{aTab.removeAttribute\("tabxleft"\);\})(\})/,

content/treestyletab/res/autoScroll.js

@@ -50,7 +50,10 @@
 			var innerBoxObject = (box.localName == 'arrowscrollbox' ? box._scrollbox : box ).boxObject;
 
 			var orientBox = box || tabs;
-			var isMultirow = tabs.getAttribute('flowing') == 'multibar'; // Tab Mix Plus
+			var isMultirow = ( // Tab Mix Plus
+					this.getTreePref('compatibility.TMP') &&
+					tabs.getAttribute('flowing') == 'multibar'
+				);
 			var isVertical = (
 					isMultirow ||
 					((orientBox.getAttribute('orient') || window.getComputedStyle(orientBox, '').getPropertyValue('-moz-box-orient')) == 'vertical')
@@ -106,15 +109,18 @@
 
 		getScrollBox : function(aTabBrowser) 
 		{
-			return document.getAnonymousElementByAttribute(aTabBrowser.mTabContainer, 'class', 'tabs-frame') || // Tab Mix Plus
+			return ( // Tab Mix Plus
-					aTabBrowser.mTabContainer.mTabstrip;
+					this.getTreePref('compatibility.TMP') &&
+					document.getAnonymousElementByAttribute(aTabBrowser.mTabContainer, 'class', 'tabs-frame')
+				) ||
+				aTabBrowser.mTabContainer.mTabstrip;
 		},
 
 		getScrollBoxObject : function(aTabBrowser) 
 		{
 			var box = this.getScrollBox(aTabBrowser);
 			return (box.scrollBoxObject || box.boxObject)
-					.QueryInterface(Ci.nsIScrollBoxObject); // Tab Mix Plus
+					.QueryInterface(Ci.nsIScrollBoxObject); // Tab Mix Plus (ensure scrollbox-ed)
 		},
 
 		getUpButton : function(aTabBrowser)
@@ -122,14 +128,20 @@
 			var box = this.getScrollBox(aTabBrowser);
 			return box._scrollButtonUp ||
 				document.getAnonymousElementByAttribute(box, 'class', 'scrollbutton-up') ||
-				document.getAnonymousElementByAttribute(box.previousSibling, 'class', 'scrollbutton-up'); // Tab Mix Plus
+				( // Tab Mix Plus
+					this.getTreePref('compatibility.TMP') &&
+					document.getAnonymousElementByAttribute(box.previousSibling, 'class', 'scrollbutton-up')
+				);
 		},
 		getDownButton : function(aTabBrowser)
 		{
 			var box = this.getScrollBox(aTabBrowser);
 			return box._scrollButtonDown ||
 				document.getAnonymousElementByAttribute(box, 'class', 'scrollbutton-down') ||
-				document.getAnonymousElementByAttribute(box.nextSibling, 'class', 'scrollbutton-up'); // Tab Mix Plus
+				( // Tab Mix Plus
+					this.getTreePref('compatibility.TMP') &&
+					document.getAnonymousElementByAttribute(box.nextSibling, 'class', 'scrollbutton-up')
+				);
 		},
 
 		autoScrollArea : 20,

content/treestyletab/treestyletab-tmp.css

@@ -0,0 +1,40 @@
+/* hacks for Tab Mix Plus */
+
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-mode="vertical"] #vide-bar,
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-mode="vertical"] #tabs-scroll-up-down-box,
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-mode="vertical"] #alltabs-place-holder,
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-mode="vertical"] .tabs-scroll {
+	visibility: collapse !important;
+}
+
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-mode="vertical"] tabs[flowing] > * .tabs-frame {
+	overflow-x: hidden !important;
+	overflow-y: auto !important;
+}
+
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-mode="vertical"] tabs[flowing] > * .tabs-frame {
+	-moz-box-flex: 1 !important;
+}
+
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-tabbar-position="left"][treestyletab-scrollbar-inverted="true"] .tabs-frame {
+	direction: rtl !important;
+	/* if there is scrollbar, closeboxes of tabs cannot be clicked because
+	   they are "under the rightside scrollbar" even if it is moved to
+	   leftside by the above rule. This seems a bug. Following rules move
+	   the "hidden rightside scrollbar" out of the box, then we can click
+	   closeboxes again. */
+	margin-right: -1em !important;
+	padding-right: 1em !important;
+}
+
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-tabbar-position="left"][treestyletab-scrollbar-inverted="true"] .tabbrowser-tabs[firefox2][flowing][closebutton][hideAllTabsButton][tabBarSpace] .tabbrowser-tab {
+	direction: ltr !important;
+}

content/treestyletab/treestyletab.css

@@ -1,3 +1,5 @@
+@import url("treestyletab-tmp.css"); // hacks for Tab Mix Plus
+
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
@@ -33,11 +35,7 @@ tabbrowser[treestyletab-mode="vertical"] .tabbrowser-arrowscrollbox > .scrollbut
 tabbrowser[treestyletab-hide-alltabs-button="true"] .tabs-alltabs-stack,
 tabbrowser[treestyletab-hide-alltabs-button="true"] .tabbrowser-arrowscrollbox ~ stack, /* "all tabs" button in Firefox 3 and 3.5 */
 tabbrowser[treestyletab-mode="vertical"] .tabs-closebutton-box,
-tabbrowser[treestyletab-mode="vertical"] .tab-drop-indicator-bar,
+tabbrowser[treestyletab-mode="vertical"] .tab-drop-indicator-bar {
-tabbrowser[treestyletab-mode="vertical"] #vide-bar, /* Tab Mix Plus */
-tabbrowser[treestyletab-mode="vertical"] #tabs-scroll-up-down-box, /* Tab Mix Plus */
-tabbrowser[treestyletab-mode="vertical"] #alltabs-place-holder, /* Tab Mix Plus */
-tabbrowser[treestyletab-mode="vertical"] .tabs-scroll /* Tab Mix Plus */ {
 	visibility: collapse !important;
 }
 
@@ -46,19 +44,16 @@ tabbrowser[treestyletab-mode="vertical"] .tabs-scroll /* Tab Mix Plus */ {
 	margin: 0;
 }
 
-tabbrowser[treestyletab-mode="vertical"] .tabbrowser-arrowscrollbox > scrollbox,
+tabbrowser[treestyletab-mode="vertical"] .tabbrowser-arrowscrollbox > scrollbox {
-tabbrowser[treestyletab-mode="vertical"] tabs[flowing] > * .tabs-frame /* Tab Mix Plus */ {
 	overflow-x: hidden !important;
 	overflow-y: auto !important;
 }
 
-tabbrowser[treestyletab-mode="vertical"] .tabs-stack > *:first-child + * > hbox, /* Firefox 3.0 (not 3.5) */
+tabbrowser[treestyletab-mode="vertical"] .tabs-stack > *:first-child + * > hbox /* Firefox 3.0 (not 3.5) */ {
-tabbrowser[treestyletab-mode="vertical"] tabs[flowing] > * .tabs-frame /* Tab Mix Plus */ {
 	-moz-box-flex: 1 !important;
 }
 
-tabbrowser[treestyletab-tabbar-position="left"][treestyletab-scrollbar-inverted="true"] .tabbrowser-arrowscrollbox > scrollbox,
+tabbrowser[treestyletab-tabbar-position="left"][treestyletab-scrollbar-inverted="true"] .tabbrowser-arrowscrollbox > scrollbox {
-tabbrowser[treestyletab-tabbar-position="left"][treestyletab-scrollbar-inverted="true"] .tabs-frame /* Tab Mix Plus */ {
 	direction: rtl !important;
 	/* if there is scrollbar, closeboxes of tabs cannot be clicked because
 	   they are "under the rightside scrollbar" even if it is moved to
@@ -69,8 +64,7 @@ tabbrowser[treestyletab-tabbar-position="left"][treestyletab-scrollbar-inverted=
 	padding-right: 1em !important;
 }
 
-tabbrowser[treestyletab-tabbar-position="left"][treestyletab-scrollbar-inverted="true"] .tabbrowser-arrowscrollbox > scrollbox > .scrollbox-innerbox,
+tabbrowser[treestyletab-tabbar-position="left"][treestyletab-scrollbar-inverted="true"] .tabbrowser-arrowscrollbox > scrollbox > .scrollbox-innerbox {
-tabbrowser[treestyletab-tabbar-position="left"][treestyletab-scrollbar-inverted="true"] .tabbrowser-tabs[firefox2][flowing][closebutton][hideAllTabsButton][tabBarSpace] .tabbrowser-tab /* Tab Mix Plus */ {
 	direction: ltr !important;
 }
 

content/treestyletab/treestyletab.js

@@ -1538,8 +1538,7 @@ var TreeStyleTabService = {
 			);
 		}
 		else { // Firefox 3.0.x
-			eval('aObserver.onDragStart = '+
+			let source = aObserver.onDragStart.toSource().replace( // native
-				aObserver.onDragStart.toSource().replace( // native
 					'aEvent.target.localName == "tab"',
 					<![CDATA[
 						(
@@ -1547,31 +1546,29 @@ var TreeStyleTabService = {
 							$&
 						)
 					]]>
-				).replace( // Tab Mix Plus
+				);
+			if (this.getTreePref('compatibility.TMP')) // Tab Mix Plus
+				source = source.replace(
 					'event.target.localName != "tab"',
 					<![CDATA[
 						gBrowser.treeStyleTab.tabbarDNDObserver.canDragTabbar(event) ||
 						$&
 					]]>
-				)
+				);
-			);
+			eval('aObserver.onDragStart = '+source);
 		}
 
 		var canDropFunctionName = '_setEffectAllowedForDataTransfer' in aObserver ?
 				'_setEffectAllowedForDataTransfer' : // Firefox 3.5 or later
 				'canDrop' ; // Firefox 3.0.x
-		eval('aObserver.'+canDropFunctionName+' = '+
+		let (source) {
-			aObserver[canDropFunctionName].toSource().replace(
+			source = aObserver[canDropFunctionName].toSource().replace(
 				'{',
 				'{ var TSTTabBrowser = this;'
 			).replace(
 				/\.screenX/g, '[TreeStyleTabService.getTabBrowserFromChild(TSTTabBrowser).treeStyleTab.positionProp]'
 			).replace(
 				/\.width/g, '[TreeStyleTabService.getTabBrowserFromChild(TSTTabBrowser).treeStyleTab.sizeProp]'
-			).replace( // Tab Mix Plus
-				/\.screenY/g, '[TreeStyleTabService.getTabBrowserFromChild(TSTTabBrowser).treeStyleTab.invertedPositionProp]'
-			).replace( // Tab Mix Plus
-				/\.height/g, '[TreeStyleTabService.getTabBrowserFromChild(TSTTabBrowser).treeStyleTab.invertedSizeProp]'
 			).replace(
 				/(return (?:true|dt.effectAllowed = "copyMove");)/,
 				<![CDATA[
@@ -1612,8 +1609,15 @@ catch(e) {
 					'false' :
 					'dt.effectAllowed = "none"'
 				)
-			)
+			);
-		);
+			if (this.getTreePref('compatibility.TMP')) // Tab Mix Plus
+				source = source.replace(
+						/\.screenY/g, '[TreeStyleTabService.getTabBrowserFromChild(TSTTabBrowser).treeStyleTab.invertedPositionProp]'
+					).replace(
+						/\.height/g, '[TreeStyleTabService.getTabBrowserFromChild(TSTTabBrowser).treeStyleTab.invertedSizeProp]'
+					);
+			eval('aObserver.'+canDropFunctionName+' = '+source);
+		}
 
 		var dragOverFunctionName = '_onDragOver' in aObserver ?
 				'_onDragOver' : // Firefox 3.5 or later
@@ -1724,7 +1728,7 @@ catch(e) {
 				<![CDATA[$&
 					var loadDroppedLinkToNewChildTab = (
 							dropActionInfo.position != TreeStyleTabService.kDROP_ON ||
-							tab.getAttribute('locked') == 'true' // Tab Mix Plus
+							tab.getAttribute('locked') == 'true' // Tab Mix Plus (or others)
 						);
 					if (!loadDroppedLinkToNewChildTab &&
 						dropActionInfo.position == TreeStyleTabService.kDROP_ON) {
@@ -1732,7 +1736,7 @@ catch(e) {
 					}
 					if (
 						loadDroppedLinkToNewChildTab ||
-						tab.getAttribute('locked') == 'true' // Tab Mix Plus
+						tab.getAttribute('locked') == 'true' // Tab Mix Plus (or others)
 						) {
 						TSTTabBrowser.treeStyleTab.performDrop(dropActionInfo, TSTTabBrowser.loadOneTab(getShortcutOrURI(url), null, null, null, bgLoad, false));
 						return;
@@ -1877,7 +1881,10 @@ catch(e) {
 				   反転された動作（通常のリンク読み込み）を行う */
 				'return false;case 1:',
 				<![CDATA[
-						if (!('TMP_contentAreaClick' in window) && // do nothing for Tab Mix Plus
+						if (( // do nothing for Tab Mix Plus
+								!TreeStyleTabService.getTreePref('compatibility.TMP') ||
+								!('TMP_contentAreaClick' in window)
+							) &&
 							TreeStyleTabService.checkToOpenChildTab()) {
 							TreeStyleTabService.stopToOpenChildTab();
 							if (TreeStyleTabService.isAccelKeyPressed(event)) {
@@ -1914,7 +1921,11 @@ catch(e) {
 				/((openWebPanel\([^\;]+\);|PlacesUIUtils.showMinimalAddBookmarkUI\([^;]+\);)event.preventDefault\(\);return false;\})/,
 				<![CDATA[
 					$1
-					else if (!('TMP_contentAreaClick' in window) && // do nothing for Tab Mix Plus
+					else if (
+						( // do nothing for Tab Mix Plus
+							!TreeStyleTabService.getTreePref('compatibility.TMP') ||
+							!('TMP_contentAreaClick' in window)
+						) &&
 						TreeStyleTabService.checkReadyToOpenNewTab({
 							uri      : wrapper.href,
 							external : {
@@ -1924,7 +1935,8 @@ catch(e) {
 							internal : {
 								newTab : TreeStyleTabService.getTreePref('openAnyLinkInNewTab')
 							}
-						})) {
+						})
+						) {
 						event.stopPropagation();
 						event.preventDefault();
 						handleLinkClick(event, wrapper.href, linkNode);

content/treestyletab/treestyletabbrowser.js

@@ -59,8 +59,11 @@ TreeStyleTabBrowser.prototype = {
 	get scrollBox() 
 	{
 		if (!this._scrollBox) {
-			this._scrollBox = document.getAnonymousElementByAttribute(this.mTabBrowser.mTabContainer, 'class', 'tabs-frame') || // Tab Mix Plus
+			this._scrollBox = ( // Tab Mix Plus
-						this.mTabBrowser.mTabContainer.mTabstrip;
+					this.getTreePref('compatibility.TMP') &&
+					document.getAnonymousElementByAttribute(this.mTabBrowser.mTabContainer, 'class', 'tabs-frame')
+				) ||
+				this.mTabBrowser.mTabContainer.mTabstrip;
 		}
 		return this._scrollBox;
 	},
@@ -68,7 +71,7 @@ TreeStyleTabBrowser.prototype = {
 	get scrollBoxObject()
 	{
 		return (this.scrollBox.scrollBoxObject || this.scrollBox.boxObject)
-				.QueryInterface(Components.interfaces.nsIScrollBoxObject); // Tab Mix Plus
+				.QueryInterface(Components.interfaces.nsIScrollBoxObject); // Tab Mix Plus (ensure scrollbox-ed)
 	},
  
 /* utils */ 
@@ -78,14 +81,20 @@ TreeStyleTabBrowser.prototype = {
 	getTabLabel : function(aTab) 
 	{
 		var label = document.getAnonymousElementByAttribute(aTab, 'class', 'tab-text-stack') || // Mac OS X
-					document.getAnonymousElementByAttribute(aTab, 'class', 'tab-text-container') || // Tab Mix Plus
+					( // Tab Mix Plus
+						this.getTreePref('compatibility.TMP') &&
+						document.getAnonymousElementByAttribute(aTab, 'class', 'tab-text-container')
+					) ||
 					document.getAnonymousElementByAttribute(aTab, 'class', 'tab-text');
 		return label;
 	},
  
 	getTabClosebox : function(aTab) 
 	{
-		var close = document.getAnonymousElementByAttribute(aTab, 'class', 'tab-close-button always-right') || // Tab Mix Plus
+		var close = ( // Tab Mix Plus
+						this.getTreePref('compatibility.TMP') &&
+						document.getAnonymousElementByAttribute(aTab, 'class', 'tab-close-button always-right')
+					) ||
 					document.getAnonymousElementByAttribute(aTab, 'class', 'tab-close-button');
 		return close;
 	},
@@ -598,7 +607,8 @@ TreeStyleTabBrowser.prototype = {
 			aTab.removeAttribute('flex');
 			aTab.maxWidth = 65000;
 			aTab.minWidth = 0;
-			aTab.setAttribute('dir', 'ltr'); // Tab Mix Plus
+			if (this.getTreePref('compatibility.TMP'))
+				aTab.setAttribute('dir', 'ltr'); // Tab Mix Plus
 		}
 		else {
 			aTab.removeAttribute('align');
@@ -608,7 +618,8 @@ TreeStyleTabBrowser.prototype = {
 			aTab.setAttribute('flex', 100);
 			aTab.maxWidth = 250;
 			aTab.minWidth = this.mTabBrowser.mTabContainer.mTabMinWidth;
-			aTab.removeAttribute('dir'); // Tab Mix Plus
+			if (this.getTreePref('compatibility.TMP'))
+				aTab.removeAttribute('dir'); // Tab Mix Plus
 		}
 	},
  
@@ -734,9 +745,12 @@ TreeStyleTabBrowser.prototype = {
 		var toggler = document.getAnonymousElementByAttribute(b, 'class', this.kTABBAR_TOGGLER);
 
 		// Tab Mix Plus
-		var scrollFrame = document.getAnonymousElementByAttribute(b.mTabContainer, 'class', 'tabs-frame');
+		var scrollFrame, newTabBox, tabBarMode;
-		var newTabBox = document.getAnonymousElementByAttribute(b.mTabContainer, 'id', 'tabs-newbutton-box');
+		if (this.getTreePref('compatibility.TMP')) {
-		var tabBarMode = this.getPref('extensions.tabmix.tabBarMode');
+			scrollFrame = document.getAnonymousElementByAttribute(b.mTabContainer, 'class', 'tabs-frame');
+			newTabBox = document.getAnonymousElementByAttribute(b.mTabContainer, 'id', 'tabs-newbutton-box');
+			tabBarMode = this.getPref('extensions.tabmix.tabBarMode');
+		}
 
 		// All-in-One Sidebar
 		var toolboxContainer = document.getAnonymousElementByAttribute(b.mStrip, 'anonid', 'aiostbx-toolbox-tableft');
@@ -775,7 +789,7 @@ TreeStyleTabBrowser.prototype = {
 			b.mTabContainer.setAttribute('align', 'stretch'); // for Mac OS X
 			scrollInnerBox.removeAttribute('flex');
 
-			if (scrollFrame) { // Tab Mix Plus
+			if (this.getTreePref('compatibility.TMP') && scrollFrame) { // Tab Mix Plus
 				document.getAnonymousNodes(scrollFrame)[0].removeAttribute('flex');
 				scrollFrame.parentNode.orient =
 					scrollFrame.orient = 'vertical';
@@ -849,7 +863,7 @@ TreeStyleTabBrowser.prototype = {
 			b.mTabContainer.removeAttribute('align'); // for Mac OS X
 			scrollInnerBox.setAttribute('flex', 1);
 
-			if (scrollFrame) { // Tab Mix Plus
+			if (this.getTreePref('compatibility.TMP') && scrollFrame) { // Tab Mix Plus
 				document.getAnonymousNodes(scrollFrame)[0].setAttribute('flex', 1);
 				scrollFrame.parentNode.orient =
 					scrollFrame.orient = 'horizontal';
@@ -3591,7 +3605,7 @@ TreeStyleTabBrowser.prototype = {
 		try {
 			scrollBoxObject.getScrolledSize(w, h);
 		}
-		catch(e) { // Tab Mix Plus
+		catch(e) { // Tab Mix Plus (or others)
 			return;
 		}
 

defaults/preferences/treestyletab.js

@@ -121,7 +121,7 @@ pref("extensions.multipletab.show.multipletab-selection-item-removeTabSubTree",
 pref("extensions.multipletab.show.multipletab-selection-item-createSubTree", true);
 
 
-pref("extensions.treestyletab.TMP.doNotUpdate.isTabVisible", false);
+pref("extensions.treestyletab.compatibility.TMP", false); // Tab Mix Plus
 
 
 pref("extensions.treestyletab.prefsVersion", 0);

skin/classic/treestyletab/metal-tmp.css

@@ -0,0 +1,29 @@
+/* hacks for Tab Mix Plus */
+
+/* buttons in the tab bar */
+
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton,
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton:hover {
+	background: #b3b2b3 !important;
+	border-top: 1px solid #666666 !important;
+}
+
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="left"] .tabs-closebutton-topbox > .tabs-closebutton {
+	border-right: 1px solid #666666 !important;
+}
+
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="right"] .tabs-closebutton-topbox > .tabs-closebutton {
+	border-left: 1px solid #666666 !important;
+}
+
+:root[treestyletab-enable-compatibility-tmp="true"]:not([active="true"])
+  tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton,
+:root[treestyletab-enable-compatibility-tmp="true"]:not([active="true"])
+  tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton:hover {
+	background: #e4e4e4 !important;
+	border-color: #666666 !important;
+}

skin/classic/treestyletab/metal.css

@@ -1,3 +1,5 @@
+@import url("metal-tmp.css"); // hacks for Tab Mix Plus
+
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* tab bar */
@@ -181,9 +183,7 @@ tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-newta
 tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-alltabs-button,
 tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-alltabs-button:hover,
 tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-container > .tabs-closebutton,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-container > .tabs-closebutton:hover,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-container > .tabs-closebutton:hover {
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton, /* Tab Mix Plus */
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton:hover /* Tab Mix Plus */ {
 	background: #b3b2b3 !important;
 	border-top: 1px solid #666666 !important;
 }
@@ -207,15 +207,13 @@ tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyleta
 
 tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="left"] .tabs-newtab-button,
 tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="left"] .tabs-alltabs-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="left"] .tabs-container > .tabs-closebutton,
+tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="left"] .tabs-container > .tabs-closebutton {
-tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="left"] .tabs-closebutton-topbox > .tabs-closebutton /* Tab Mix Plus */ {
 	border-right: 1px solid #666666 !important;
 }
 
 tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="right"] .tabs-newtab-button,
 tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="right"] .tabs-alltabs-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="right"] .tabs-container > .tabs-closebutton,
+tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="right"] .tabs-container > .tabs-closebutton {
-tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="right"] .tabs-closebutton-topbox > .tabs-closebutton /* Tab Mix Plus */ {
 	border-left: 1px solid #666666 !important;
 }
 
@@ -224,9 +222,7 @@ tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="right"] .ta
 :root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-alltabs-button,
 :root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-alltabs-button:hover,
 :root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-container > .tabs-closebutton,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-container > .tabs-closebutton:hover,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-container > .tabs-closebutton:hover {
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton, /* Tab Mix Plus */
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton:hover /* Tab Mix Plus */ {
 	background: #e4e4e4 !important;
 	border-color: #666666 !important;
 }

skin/classic/treestyletab/treestyletab-tmp.css

@@ -0,0 +1,41 @@
+/* hacks for Tab Mix Plus */
+
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton {
+	-moz-appearance: none !important;
+	border: 0 none !important;
+	-moz-border-top-colors: none !important;
+	-moz-border-right-colors: none !important;
+	-moz-border-bottom-colors: none !important;
+	-moz-border-left-colors: none !important;
+	border-top: 1px solid ThreeDShadow !important;
+	background: ThreeDFace !important;
+}
+
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton:hover {
+	background: ThreeDHighlight !important;
+}
+
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton {
+	background-image: none !important;
+	margin: 0 !important;
+	padding: 0 2px !important;
+	width: 100% !important;
+	min-height: 0 !important;
+	height: 16px !important;
+}
+
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-mode="vertical"] .tabs-newtab-topbox > .tabs-newtab-button {
+	-moz-box-flex: 1;
+	-moz-box-align: center;
+	-moz-box-pack: center;
+	-moz-box-orient: vertical;
+}
+
+:root[treestyletab-enable-compatibility-tmp="true"]
+  tabbrowser[treestyletab-mode="vertical"] .tabbrowser-arrowscrollbox[type="tabmix"] {
+	visibility: collapse !important;
+}

skin/classic/treestyletab/treestyletab.css

@@ -4,6 +4,8 @@
 @import url("chrome://treestyletab/skin/metal/tab.css");
 @import url("chrome://treestyletab/skin/twisty.css");
 
+@import url("treestyletab-tmp.css"); // hacks for Tab Mix Plus
+
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 
@@ -117,8 +119,7 @@ tabbrowser[treestyletab-mode="vertical"] .tabs-alltabs-stack > hbox:not(:last-ch
 
 tabbrowser[treestyletab-mode="vertical"] .tabs-newtab-button,
 tabbrowser[treestyletab-mode="vertical"] .tabs-alltabs-button,
-tabbrowser[treestyletab-mode="vertical"] .tabs-container > .tabs-closebutton,
+tabbrowser[treestyletab-mode="vertical"] .tabs-container > .tabs-closebutton {
-tabbrowser[treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton /* Tab Mix Plus */ {
 	-moz-appearance: none !important;
 	border: 0 none !important;
 	-moz-border-top-colors: none !important;
@@ -130,8 +131,7 @@ tabbrowser[treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closeb
 }
 tabbrowser[treestyletab-mode="vertical"] .tabs-newtab-button:hover,
 tabbrowser[treestyletab-mode="vertical"] .tabs-alltabs-button:hover,
-tabbrowser[treestyletab-mode="vertical"] .tabs-container > .tabs-closebutton:hover,
+tabbrowser[treestyletab-mode="vertical"] .tabs-container > .tabs-closebutton:hover {
-tabbrowser[treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton:hover /* Tab Mix Plus */ {
 	background: ThreeDHighlight !important;
 }
 
@@ -139,8 +139,7 @@ tabbrowser[treestyletab-mode="vertical"] .tabs-newtab-button,
 tabbrowser[treestyletab-mode="vertical"] .tabs-alltabs-box,
 tabbrowser[treestyletab-mode="vertical"] .tabs-alltabs-box-animate,
 tabbrowser[treestyletab-mode="vertical"] .tabs-alltabs-button,
-tabbrowser[treestyletab-mode="vertical"] .tabs-container > .tabs-closebutton,
+tabbrowser[treestyletab-mode="vertical"] .tabs-container > .tabs-closebutton {
-tabbrowser[treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton /* Tab Mix Plus */ {
 	background-image: none !important;
 	margin: 0 !important;
 	padding: 0 2px !important;
@@ -190,16 +189,3 @@ tabbrowser[treestyletab-tabbar-position="bottom"] .treestyletab-tabbar-toggler {
 	border-top: 1px solid ThreeDShadow;
 }
 
-
-
-/* Tab Mix Plus */
-tabbrowser[treestyletab-mode="vertical"] .tabs-newtab-topbox > .tabs-newtab-button {
-	-moz-box-flex: 1;
-	-moz-box-align: center;
-	-moz-box-pack: center;
-	-moz-box-orient: vertical;
-}
-
-tabbrowser[treestyletab-mode="vertical"] .tabbrowser-arrowscrollbox[type="tabmix"] {
-	visibility: collapse !important;
-}