・タブの縦置きを自前で実装しきった

・タブの幅をスプリッタで変更できるようにした


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

content/treestyletab/treestyletab.css

@@ -3,7 +3,8 @@
 tab .treestyletab-twisty,
 tab .treestyletab-counter-container,
 tab .treestyletab-drop-marker,
-tab[treestyletab-children]:not([treestyletab-subtree-collapsed="true"]) .treestyletab-counter-container {
+tab[treestyletab-children]:not([treestyletab-subtree-collapsed="true"]) .treestyletab-counter-container,
+tabbrowser:not([treestyletab-vertical="true"]) > tabbox > splitter {
 	display: none;
 }
 
@@ -13,7 +14,8 @@ tab[treestyletab-drop-position] .treestyletab-drop-marker {
 	display: -moz-box;
 }
 
-tab[treestyletab-collapsed="true"] {
+tab[treestyletab-collapsed="true"],
+.tabbrowser-strip[collapsed="true"]+splitter {
 	visibility: collapse;
 }
 
@@ -27,3 +29,8 @@ tabbrowser[treestyletab-vertical="true"] .tabs-closebutton-box {
 tabbrowser[treestyletab-vertical="true"] > tabbox {
 	-moz-box-orient: horizontal !important;
 }
+
+tabbrowser[treestyletab-vertical="true"] .tabbrowser-strip {
+	overflow-x: hidden;
+	overflow-y: auto;
+}

content/treestyletab/treestyletab.js

@@ -18,6 +18,7 @@ var TreeStyleTabService = {
 	kDROP_MARKER_CONTAINER : 'treestyletab-drop-marker-container',
 	kCOUNTER               : 'treestyletab-counter',
 	kCOUNTER_CONTAINER     : 'treestyletab-counter-container',
+	kSPLITTER              : 'treestyletab-splitter',
 
 	kMENUITEM_REMOVESUBTREE_SELECTION : 'multipletab-selection-item-removeTabSubTree',
 	kMENUITEM_REMOVESUBTREE_CONTEXT   : 'context-item-removeTabSubTree',
@@ -305,7 +306,7 @@ var TreeStyleTabService = {
 	 
 	initTabBrowser : function(aTabBrowser) 
 	{
-		this.initTabbarPosition(aTabBrowser, this.getPref('extensions.treestyletab.tabbarPosition'));
+		this.initTabbar(aTabBrowser, this.getPref('extensions.treestyletab.tabbar.position'));
 
 		aTabBrowser.mTabContainer.addEventListener('TreeStyleTab:TabOpen', this, true);
 		aTabBrowser.mTabContainer.addEventListener('TabClose', this, true);
@@ -611,9 +612,12 @@ catch(e) {
 		this.setTabValue(aTab, this.kID, id);
 		aTab.__treestyletab__linkedTabBrowser = aTabBrowser;
 
-		var pos = this.getPref('extensions.treestyletab.tabbarPosition');
-		if (pos == 'left' || pos == 'right')
+		var pos = this.getPref('extensions.treestyletab.tabbar.position');
+		if (pos == 'left' || pos == 'right') {
 			aTab.setAttribute('align', 'stretch');
+			aTab.maxWidth = 65000;
+			aTab.minWidth = 0;
+		}
 
 		this.initTabContents(aTab);
 
@@ -994,6 +998,12 @@ catch(e) {
 		}
 	},
  
+	onTabbarResized : function(aEvent) 
+	{
+		var b = this.getTabBrowserFromChildren(aEvent.originalTarget);
+		this.setPref('extensions.treestyletab.tabbar.width', b.mStrip.boxObject.width);
+	},
+ 	 
 /* Tab Utilities */ 
 	
 	getTabValue : function(aTab, aKey) 
@@ -1345,7 +1355,7 @@ catch(e) {
   
 /* Commands */ 
 	 
-	initTabbarPosition : function(aTabBrowser, aPosition) 
+	initTabbar : function(aTabBrowser, aPosition) 
 	{
 		aPosition = String(aPosition).toLowerCase();
 		var pos = (aPosition == 'left') ? this.kTABBAR_LEFT :
@@ -1353,6 +1363,16 @@ catch(e) {
 			(aPosition == 'bottom') ? this.kTABBAR_BOTTOM :
 			this.kTABBAR_TOP;
 
+		var splitter = document.getAnonymousElementByAttribute(aTabBrowser, 'class', this.kSPLITTER);
+		if (!splitter) {
+			splitter = document.createElement('splitter');
+			splitter.setAttribute('class', this.kSPLITTER);
+			splitter.setAttribute('onmouseup', 'TreeStyleTabService.onTabbarResized(event);');
+			splitter.appendChild(document.createElement('grippy'));
+			var ref = aTabBrowser.mPanelContainer;
+			ref.parentNode.insertBefore(splitter, ref);
+		}
+
 		if (pos & this.kTABBAR_VERTICAL) {
 			this.positionProp     = 'screenY';
 			this.sizeProp         = 'height';
@@ -1361,6 +1381,8 @@ catch(e) {
 			aTabBrowser.mTabBox.orient = 'horizontal';
 			aTabBrowser.mTabContainer.orient = aTabBrowser.mTabContainer.mTabstrip.orient = 'vertical';
 
+			aTabBrowser.mStrip.setAttribute('width', this.getPref('extensions.treestyletab.tabbar.width'));
+
 			aTabBrowser.setAttribute(this.kVERTICAL, true);
 			aTabBrowser.setAttribute(this.kTABBAR_POSITION, 'left');
 		}
@@ -1372,6 +1394,8 @@ catch(e) {
 			aTabBrowser.mTabBox.orient = 'vertical';
 			aTabBrowser.mTabContainer.orient = aTabBrowser.mTabContainer.mTabstrip.orient = 'horizontal';
 
+			aTabBrowser.mStrip.removeAttribute('width');
+
 			aTabBrowser.removeAttribute(this.kVERTICAL);
 			aTabBrowser.setAttribute(this.kTABBAR_POSITION, 'top');
 		}
@@ -1891,8 +1915,8 @@ TreeStyleTabBrowserObserver.prototype = {
 				var value = TreeStyleTabService.getPref(aData);
 				switch (aData)
 				{
-					case 'extensions.treestyletab.tabbarPosition':
-						TreeStyleTabService.initTabbarPosition(this.mTabBrowser, value);
+					case 'extensions.treestyletab.tabbar.position':
+						TreeStyleTabService.initTabbar(this.mTabBrowser, value);
 						break;
 
 					default:

defaults/preferences/treestyletab.js

@@ -5,7 +5,8 @@ pref("extensions.treestyletab.attachChildrenToGrandParentOnRemoveTab", true);
 // 0 = default, 1 = only visible tabs
 pref("extensions.treestyletab.focusMode", 1);
 pref("extensions.treestyletab.levelMargin", 12);
-pref("extensions.treestyletab.tabbarPosition", "left");
+pref("extensions.treestyletab.tabbar.width", 200);
+pref("extensions.treestyletab.tabbar.position", "left");
 
 
 pref("browser.link.open_newwindow.restriction", 0);

skin/classic/treestyletab/treestyletab.css

@@ -1,7 +1,7 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 tabbrowser[treestyletab-vertical="true"] .tabbrowser-tabs {
-	background: ThreeDShadow !important;
+	background: darkgray !important;
 }
 
 tabbrowser[treestyletab-vertical="true"] .tabs-bottom,
@@ -29,7 +29,7 @@ tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab {
 }
 tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab[selected="true"] {
 	margin: 0 !important;
-	padding: 0 !important;
+	padding: 0 0.2em !important;
 	background: ThreeDHighlight !important;
 	-moz-border-top-colors: ThreeDHighlight ThreeDHighlight !important;
 	-moz-border-bottom-colors: ThreeDShadow ThreeDHighlight !important;