・タブの縦置きを自前で実装開始

・タブが縦置きされている時、ドロップ位置をタブのborderで示すようにした


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

content/treestyletab/treestyletab.css

@@ -16,3 +16,10 @@ tab[treestyletab-drop-position] .treestyletab-drop-marker {
 tab[treestyletab-collapsed="true"] {
 	visibility: collapse;
 }
+
+tabbrowser[treestyletab-vertical="true"] .tabbrowser-arrowscrollbox > .scrollbutton-up,
+tabbrowser[treestyletab-vertical="true"] .tabbrowser-arrowscrollbox > .scrollbutton-down-stack,
+tabbrowser[treestyletab-vertical="true"] .tabs-alltabs-stack,
+tabbrowser[treestyletab-vertical="true"] .tabs-closebutton-box {
+	display: none !important;
+}

content/treestyletab/treestyletab.js

@@ -9,6 +9,7 @@ var TreeStyleTabService = {
 	kCOLLAPSED         : 'treestyletab-collapsed',
 	kNEST              : 'treestyletab-nest',
 	kDROP_POSITION     : 'treestyletab-drop-position',
+	kTABBAR_POSITION   : 'treestyletab-tabbar-position',
 	kVERTICAL          : 'treestyletab-vertical',
 
 	kTWISTY                : 'treestyletab-twisty',
@@ -32,6 +33,15 @@ var TreeStyleTabService = {
 	kACTION_ATTACH : 2,
 	kACTION_PART   : 4,
 
+	kTABBAR_TOP    : 1,
+	kTABBAR_BOTTOM : 2,
+	kTABBAR_LEFT   : 4,
+	kTABBAR_RIGHT  : 8,
+
+	kTABBAR_HORIZONTAL : 3,
+	kTABBAR_VERTICAL   : 12,
+	kTABBAR_INVERTED   : 10,
+
 	levelMargin      : 12,
 	levelMarginProp  : 'margin-left',
 	positionProp     : 'screenY',
@@ -293,6 +303,8 @@ var TreeStyleTabService = {
 	 
 	initTabBrowser : function(aTabBrowser) 
 	{
+		this.initTabbarPosition(aTabBrowser, this.getPref('extensions.treestyletab.tabbarPosition'));
+
 		aTabBrowser.mTabContainer.addEventListener('TreeStyleTab:TabOpen', this, true);
 		aTabBrowser.mTabContainer.addEventListener('TabClose', this, true);
 		aTabBrowser.mTabContainer.addEventListener('TabMove', this, true);
@@ -584,8 +596,6 @@ catch(e) {
 
 		aTabBrowser.__treestyletab__observer = new TreeStyleTabBrowserObserver(aTabBrowser);
 
-		aTabBrowser.setAttribute(this.kVERTICAL, true);
-
 		delete addTabMethod;
 		delete removeTabMethod;
 		delete i;
@@ -599,6 +609,10 @@ catch(e) {
 		this.setTabValue(aTab, this.kID, id);
 		aTab.__treestyletab__linkedTabBrowser = aTabBrowser;
 
+		var pos = this.getPref('extensions.treestyletab.tabbarPosition');
+		if (pos == 'left' || pos == 'right')
+			aTab.setAttribute('align', 'stretch');
+
 		this.initTabContents(aTab);
 
 		var event = document.createEvent('Events');
@@ -1327,6 +1341,38 @@ catch(e) {
   
 /* Commands */ 
 	 
+	initTabbarPosition : function(aTabBrowser, aPosition) 
+	{
+		aPosition = String(aPosition).toLowerCase();
+		var pos = (aPosition == 'left') ? this.kTABBAR_LEFT :
+			(aPosition == 'right') ? this.kTABBAR_RIGHT :
+			(aPosition == 'bottom') ? this.kTABBAR_BOTTOM :
+			this.kTABBAR_TOP;
+
+		if (pos & this.kTABBAR_VERTICAL) {
+			this.positionProp     = 'screenY';
+			this.sizeProp         = 'height';
+			this.invertedSizeProp = 'width';
+
+			aTabBrowser.mTabBox.orient = 'horizontal';
+			aTabBrowser.mTabContainer.orient = aTabBrowser.mTabContainer.mTabstrip.orient = 'vertical';
+
+			aTabBrowser.setAttribute(this.kVERTICAL, true);
+			aTabBrowser.setAttribute(this.kTABBAR_POSITION, 'left');
+		}
+		else {
+			this.positionProp     = 'screenX';
+			this.sizeProp         = 'width';
+			this.invertedSizeProp = 'height';
+
+			aTabBrowser.mTabBox.orient = 'vertical';
+			aTabBrowser.mTabContainer.orient = aTabBrowser.mTabContainer.mTabstrip.orient = 'horizontal';
+
+			aTabBrowser.removeAttribute(this.kVERTICAL);
+			aTabBrowser.setAttribute(this.kTABBAR_POSITION, 'top');
+		}
+	},
+ 
 /* attach/part */ 
 	
 	attachTabTo : function(aChild, aParent, aInfo) 
@@ -1839,6 +1885,15 @@ TreeStyleTabBrowserObserver.prototype = {
 
 			case 'nsPref:changed':
 				var value = TreeStyleTabService.getPref(aData);
+				switch (aData)
+				{
+					case 'extensions.treestyletab.tabbarPosition':
+						TreeStyleTabService.initTabbarPosition(this.mTabBrowser, value);
+						break;
+
+					default:
+						break;
+				}
 				break;
 
 			default:

defaults/preferences/treestyletab.js

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

skin/classic/treestyletab/treestyletab.css

@@ -1,5 +1,76 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+tabbrowser[treestyletab-vertical="true"] .tabbrowser-tabs {
+	background: ThreeDShadow !important;
+}
+
+tabbrowser[treestyletab-vertical="true"] .tabs-bottom,
+tabbrowser[treestyletab-vertical="true"] .tabs-left,
+tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab > .tab-image-left,
+tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab > .tab-image-right {
+	display: none !important;
+}
+
+tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab {
+	-moz-appearance: none !important;
+	min-height: 2em;
+	margin: 0 !important;
+	padding: 0 0.2em !important;
+	background: ThreeDFace !important;
+	border-top: 2px solid !important;
+	-moz-border-top-colors: ThreeDFace ThreeDFace !important;
+	border-bottom: 2px solid !important;
+	-moz-border-bottom-colors: ThreeDShadow ThreeDFace !important;
+	-moz-border-radius-topleft : 0 !important;
+	-moz-border-radius-topright : 0 !important;
+	-moz-border-radius-bottomleft : 0 !important;
+	-moz-border-radius-bottomright : 0 !important;
+	-moz-box-align: stretch !important;
+}
+tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab[selected="true"] {
+	margin: 0 !important;
+	padding: 0 !important;
+	background: ThreeDHighlight !important;
+	-moz-border-top-colors: ThreeDHighlight ThreeDHighlight !important;
+	-moz-border-bottom-colors: ThreeDShadow ThreeDHighlight !important;
+}
+
+tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab > .tab-image-middle,
+tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab > .tab-close-button {
+	height: auto;
+	margin: 0 !important;
+	padding: 0 !important;
+	background: transparent;
+}
+tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab[selected="true"] > .tab-image-middle,
+tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab[selected="true"] > .tab-close-button {
+	background: transparent;
+}
+
+tabbrowser[treestyletab-tabbar-position="left"] .tabbrowser-tab {
+	border-left: 2px solid !important;
+	-moz-border-left-colors: ThreeDLightShadow ThreeDFace !important;
+	border-right: 2px solid !important;
+	-moz-border-right-colors: ThreeDLightShadow ThreeDFace !important;
+}
+tabbrowser[treestyletab-tabbar-position="left"] .tabbrowser-tab[selected="true"] {
+	-moz-border-left-colors: ThreeDLightShadow ThreeDHighlight !important;
+	-moz-border-right-colors: ThreeDLightShadow ThreeDHighlight !important;
+}
+
+tabbrowser[treestyletab-tabbar-position="right"] .tabbrowser-tab {
+	border-right: 2px solid !important;
+	-moz-border-right-colors: ThreeDLightShadow ThreeDFace !important;
+	border-left: 2px solid !important;
+	-moz-border-left-colors: ThreeDLightShadow ThreeDFace !important;
+}
+tabbrowser[treestyletab-tabbar-position="right"] .tabbrowser-tab[selected="true"] {
+	-moz-border-right-colors: ThreeDLightShadow ThreeDHighlight !important;
+	-moz-border-left-colors: ThreeDLightShadow ThreeDHighlight !important;
+}
+
+
+
 .treestyletab-twisty-container {
 	margin: 0 3px 0 -3px;
 	-moz-box-pack: start;
@@ -33,32 +104,53 @@ tab[treestyletab-subtree-collapsed="true"] .treestyletab-twisty {
 	-moz-box-pack: center;
 }
 
-tab[treestyletab-drop-position="self"] .treestyletab-drop-marker {
+tabbrowser:not([treestyletab-vertical="true"]) tab[treestyletab-drop-position="self"] .treestyletab-drop-marker {
 	list-style-image: url("dropmarker-down.png");
 }
 
-tab[treestyletab-drop-position="before"] .treestyletab-drop-marker {
+tabbrowser:not([treestyletab-vertical="true"]) tab[treestyletab-drop-position="before"] .treestyletab-drop-marker {
 	list-style-image: url("dropmarker-left.png");
 }
 
-tab[treestyletab-drop-position="after"] .treestyletab-drop-marker {
+tabbrowser:not([treestyletab-vertical="true"]) tab[treestyletab-drop-position="after"] .treestyletab-drop-marker {
 	list-style-image: url("dropmarker-right.png");
 }
 
+/*
 tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="self"] .treestyletab-drop-marker {
 	list-style-image: url("dropmarker-right.png");
 }
+*/
+tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="self"] {
+	-moz-border-top-colors: -moz-dialogtext -moz-dialogtext !important;
+	-moz-border-right-colors: -moz-dialogtext -moz-dialogtext !important;
+	-moz-border-bottom-colors: -moz-dialogtext -moz-dialogtext !important;
+	-moz-border-left-colors: -moz-dialogtext -moz-dialogtext !important;
+}
 
+/*
 tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="before"] .treestyletab-drop-marker {
 	list-style-image: url("dropmarker-up.png");
 }
+*/
+tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="before"] {
+	-moz-border-top-colors: -moz-dialogtext -moz-dialogtext !important;
+}
 
+/*
 tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="after"] .treestyletab-drop-marker {
 	list-style-image: url("dropmarker-down.png");
 }
+*/
+tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="after"] {
+	-moz-border-bottom-colors: -moz-dialogtext -moz-dialogtext !important;
+}
 
-tab[treestyletab-children][treestyletab-drop-position] .treestyletab-twisty,
+tabbrowser:not([treestyletab-vertical="true"]) tab[treestyletab-children][treestyletab-drop-position] .treestyletab-twisty,
-tab[treestyletab-drop-position] .tab-icon-image,
+tabbrowser:not([treestyletab-vertical="true"]) tab[treestyletab-drop-position] .tab-icon-image,
-tab[treestyletab-drop-position] .tab-extra-status {
+tabbrowser:not([treestyletab-vertical="true"]) tab[treestyletab-drop-position] .tab-extra-status {
 	visibility: hidden;
 }
+
+
+