スタイル切り替え機能を追加

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

content/treestyletab/config.xul

@@ -1,5 +1,6 @@
 <?xml version="1.0"?>
 <?xml-stylesheet href="chrome://global/skin/"?>
+<?xml-stylesheet href="chrome://treestyletab/skin/config.css" type="text/css"?>
 <!DOCTYPE prefwindow [
 <!ENTITY % mainDTD SYSTEM "chrome://treestyletab/locale/treestyletab.dtd">
 %mainDTD;
@@ -17,6 +18,9 @@
 		<preference id="extensions.treestyletab.tabbar.position"
 			name="extensions.treestyletab.tabbar.position"
 			type="string"/>
+		<preference id="extensions.treestyletab.tabbar.style"
+			name="extensions.treestyletab.tabbar.style"
+			type="string"/>
 	</preferences>
 
 	<checkbox id="extensions.treestyletab.tabbar.scroll.smooth-check"
@@ -31,6 +35,22 @@
 			<radio value="right" label="&config.tabbar.position.right;"/>
 		</radiogroup>
 	</groupbox>
+	<groupbox>
+		<caption label="&config.tabbar.style.caption;"/>
+		<radiogroup id="extensions.treestyletab.tabbar.style-radiogroup"
+			preference="extensions.treestyletab.tabbar.style"
+			orient="horizontal">
+			<radio value="default" label="&config.tabbar.style.default;"
+				class="image" align="center"
+				src="chrome://treestyletab/content/res/style-default.png"/>
+			<radio value="vertigo" label="&config.tabbar.style.vertigo;"
+				class="image" align="center"
+				src="chrome://treestyletab/content/res/style-vertigo.png"/>
+			<radio value="mixed" label="&config.tabbar.style.mixed;"
+				class="image" align="center"
+				src="chrome://treestyletab/content/res/style-mixed.png"/>
+		</radiogroup>
+	</groupbox>
 </prefpane>
 
 <prefpane id="prefpane-tab" label="&config.tabs.tab;"

content/treestyletab/treestyletab.js

@@ -11,6 +11,7 @@ var TreeStyleTabService = {
 	kDROP_POSITION     : 'treestyletab-drop-position',
 	kTABBAR_POSITION   : 'treestyletab-tabbar-position',
 	kVERTICAL          : 'treestyletab-vertical',
+	kSTYLE             : 'treestyletab-style',
 
 	kTWISTY                : 'treestyletab-twisty',
 	kTWISTY_CONTAINER      : 'treestyletab-twisty-container',
@@ -664,6 +665,7 @@ catch(e) {
 		}
 
 		aTabBrowser.__treestyletab__observer = new TreeStyleTabBrowserObserver(aTabBrowser);
+		aTabBrowser.__treestyletab__observer.observe(null, 'nsPref:changed', 'extensions.treestyletab.tabbar.style');
 
 		delete addTabMethod;
 		delete removeTabMethod;
@@ -2183,6 +2185,9 @@ TreeStyleTabBrowserObserver.prototype = {
 						TreeStyleTabService.updateAllTabsIndent(this.mTabBrowser);
 						break;
 
+					case 'extensions.treestyletab.tabbar.style':
+						this.mTabBrowser.setAttribute(TreeStyleTabService.kSTYLE, value);
+
 					default:
 						break;
 				}

defaults/preferences/treestyletab.js

@@ -10,6 +10,7 @@ pref("extensions.treestyletab.tabbar.position", "left");
 pref("extensions.treestyletab.tabbar.scroll.smooth", true);
 pref("extensions.treestyletab.tabbar.scroll.timeout", 250);
 pref("extensions.treestyletab.openGroupBookmarkAsTabSubTree", true);
+pref("extensions.treestyletab.tabbar.style", "default");
 
 
 pref("browser.link.open_newwindow.restriction", 0);

locale/en-US/treestyletab/treestyletab.dtd

@@ -9,6 +9,11 @@
 <!ENTITY config.tabbar.position.left    "Leftside">
 <!ENTITY config.tabbar.position.right   "Rightside">
 
+<!ENTITY config.tabbar.style.caption "Appearance of the tab bar">
+<!ENTITY config.tabbar.style.default "Default">
+<!ENTITY config.tabbar.style.vertigo "Vertigo">
+<!ENTITY config.tabbar.style.mixed   "Mixed">
+
 
 <!ENTITY config.tabs.tab "Tab Operations">
 

locale/ja/treestyletab/treestyletab.dtd

@@ -9,6 +9,11 @@
 <!ENTITY config.tabbar.position.left    "ウィンドウの左側">
 <!ENTITY config.tabbar.position.right   "ウィンドウの右側">
 
+<!ENTITY config.tabbar.style.caption "タブバーの表示スタイル">
+<!ENTITY config.tabbar.style.default "標準">
+<!ENTITY config.tabbar.style.vertigo "Vertigo">
+<!ENTITY config.tabbar.style.mixed   "Mixed">
+
 
 <!ENTITY config.tabs.tab "タブの開き方">
 

skin/classic/treestyletab/config.css

@@ -0,0 +1,7 @@
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+radio.image .radio-label-box,
+radio.image label.radio-label {
+	-moz-box-align: center;
+}
+

skin/classic/treestyletab/treestyletab.css

@@ -1,5 +1,8 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+
+/* Default style */
+
 tabbrowser[treestyletab-vertical="true"] .tabbrowser-tabs {
 	background: darkgray !important;
 }
@@ -78,6 +81,79 @@ tabbrowser[treestyletab-tabbar-position="right"] .tabbrowser-tab[selected="true"
 }
 
 
+/* Vertigo style */
+
+tabbrowser[treestyletab-vertical="true"][treestyletab-style="vertigo"] .tabbrowser-tabs {
+	background: transparent !important;
+}
+tabbrowser[reestyletab-tabbar-position="left"][treestyletab-style="vertigo"] .tabbrowser-tabs {
+	border-right: 1px solid #aaa !important;
+}
+tabbrowser[reestyletab-tabbar-position="right"][treestyletab-style="vertigo"] .tabbrowser-tabs {
+	border-left: 1px solid #aaa !important;
+}
+
+tabbrowser[treestyletab-vertical="true"][treestyletab-style="vertigo"] .tabbrowser-tab {
+	background: transparent !important;
+	-moz-border-top-colors: transparent transparent !important;
+	-moz-border-bottom-colors: transparent transparent !important;
+}
+tabbrowser[treestyletab-vertical="true"][treestyletab-style="vertigo"] .tabbrowser-tab:hover {
+	background: #e0e8f6 !important;
+	-moz-border-top-colors: #e0e8f6 #e0e8f6 !important;
+	-moz-border-bottom-colors: #e0e8f6 #e0e8f6 !important;
+}
+tabbrowser[treestyletab-vertical="true"][treestyletab-style="vertigo"] .tabbrowser-tab[selected="true"] {
+	background: #c1d2ee !important;
+	-moz-border-top-colors: #c1d2ee #c1d2ee !important;
+	-moz-border-bottom-colors: #c1d2ee #c1d2ee !important;
+}
+
+tabbrowser[treestyletab-tabbar-position="left"][treestyletab-style="vertigo"] .tabbrowser-tab,
+tabbrowser[treestyletab-tabbar-position="right"][treestyletab-style="vertigo"] .tabbrowser-tab {
+	-moz-border-left-colors: transparent transparent !important;
+	-moz-border-right-colors: transparent transparent !important;
+}
+tabbrowser[treestyletab-tabbar-position="left"][treestyletab-style="vertigo"] .tabbrowser-tab:hover,
+tabbrowser[treestyletab-tabbar-position="right"][treestyletab-style="vertigo"] .tabbrowser-tab:hover {
+	-moz-border-left-colors: #e0e8f6 #e0e8f6 !important;
+	-moz-border-right-colors: #e0e8f6 #e0e8f6 !important;
+}
+tabbrowser[treestyletab-tabbar-position="left"][treestyletab-style="vertigo"] .tabbrowser-tab[selected="true"],
+tabbrowser[treestyletab-tabbar-position="right"][treestyletab-style="vertigo"] .tabbrowser-tab[selected="true"] {
+	-moz-border-left-colors: #c1d2ee #c1d2ee !important;
+	-moz-border-right-colors: #c1d2ee #c1d2ee !important;
+}
+
+
+/* Mixed style */
+
+tabbrowser[treestyletab-vertical="true"][treestyletab-style="mixed"] .tabbrowser-tab:hover {
+	background: #e0e8f6 !important;
+	-moz-border-top-colors: #e0e8f6 #e0e8f6 !important;
+	-moz-border-bottom-colors: ThreeDShadow #e0e8f6 !important;
+}
+tabbrowser[treestyletab-vertical="true"][treestyletab-style="mixed"] .tabbrowser-tab[selected="true"] {
+	background: #c1d2ee !important;
+	-moz-border-top-colors: #c1d2ee #c1d2ee !important;
+	-moz-border-bottom-colors: ThreeDShadow #c1d2ee !important;
+}
+
+tabbrowser[treestyletab-tabbar-position="left"][treestyletab-style="mixed"] .tabbrowser-tab:hover,
+tabbrowser[treestyletab-tabbar-position="right"][treestyletab-style="mixed"] .tabbrowser-tab:hover {
+	-moz-border-left-colors: ThreeDLightShadow #e0e8f6 !important;
+	-moz-border-right-colors: ThreeDLightShadow #e0e8f6 !important;
+}
+tabbrowser[treestyletab-tabbar-position="left"][treestyletab-style="mixed"] .tabbrowser-tab[selected="true"],
+tabbrowser[treestyletab-tabbar-position="right"][treestyletab-style="mixed"] .tabbrowser-tab[selected="true"] {
+	-moz-border-left-colors: ThreeDLightShadow #c1d2ee !important;
+	-moz-border-right-colors: ThreeDLightShadow #c1d2ee !important;
+}
+
+
+
+
+/* Tree UI */
 
 .treestyletab-twisty-container {
 	margin: 0 3px 0 -3px;
@@ -107,6 +183,8 @@ tab[treestyletab-subtree-collapsed="true"] .treestyletab-twisty {
 }
 
 
+/* Drop Markers */
+
 .treestyletab-drop-marker-container {
 	-moz-box-align: center;
 	-moz-box-pack: center;