From bb1fb4e81c709a394d7b08b37e73b76ad96f48cc Mon Sep 17 00:00:00 2001
From: piro <piro@599a83e7-65a4-db11-8015-0010dcdd6dc2>
Date: Thu, 1 Apr 2010 13:13:05 +0000
Subject: [PATCH] =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E3=83=80=E3=82=A4=E3=82=A2?=
 =?UTF-8?q?=E3=83=AD=E3=82=B0=E3=81=8C=E3=81=AA=E3=82=8B=E3=81=B9=E3=81=8F?=
 =?UTF-8?q?=E5=B0=8F=E3=81=95=E3=81=8F=E3=81=AA=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

git-svn-id: http://www.cozmixng.org/repos/piro/treestyletab/trunk@6553 599a83e7-65a4-db11-8015-0010dcdd6dc2
---
 content/treestyletab/config.css |  4 +++
 content/treestyletab/config.js  | 50 ++++++++++++++++++++++++--
 content/treestyletab/config.xul | 62 +++++++++++++++------------------
 3 files changed, 79 insertions(+), 37 deletions(-)

diff --git a/content/treestyletab/config.css b/content/treestyletab/config.css
index 9a5b86e5..1d39b680 100644
--- a/content/treestyletab/config.css
+++ b/content/treestyletab/config.css
@@ -9,3 +9,7 @@
 	width: 24px;
 	height: 24px;
 }
+
+arrowscrollbox[overflow="true"] {
+	border: 1px inset ThreeDFace;
+}
diff --git a/content/treestyletab/config.js b/content/treestyletab/config.js
index c2c75570..310b9b9d 100644
--- a/content/treestyletab/config.js
+++ b/content/treestyletab/config.js
@@ -40,10 +40,7 @@ function init()
 function initAppearancePane()
 {
 	onChangeTabbarPosition();
-}
 
-function initStylePane()
-{
 	var mixed = document.getElementById('extensions.treestyletab.tabbar.style-mixed');
 	if (comparator.compare(XULAppInfo.version, '3.5') >= 0) {
 		mixed.removeAttribute('disabled');
@@ -61,6 +58,53 @@ function initStylePane()
 	else {
 		sidebar.setAttribute('disabled', true);
 	}
+
+	var boxes = [
+			document.getElementById('extensions.treestyletab.tabbar.style-arrowscrollbox'),
+			document.getElementById('extensions.treestyletab.twisty.style-arrowscrollbox')
+		];
+	Array.slice(boxes[0].childNodes).concat(Array.slice(boxes[1].childNodes))
+	.forEach(function(aItem) {
+		var start       = 0;
+		var delta       = 200;
+		var radian      = 90 * Math.PI / 180;
+		aItem.style.overflow = 'hidden';
+		aItem.width = 0;
+		aItem.style.maxWidth = 0;
+		var task = function(aTime, aBeginning, aChange, aDuration) {
+			var width;
+			if (aTime >= aDuration) {
+				width = start + delta;
+				finished = true;
+			}
+			else {
+				width = start + (delta * Math.sin(aTime / aDuration * radian));
+				finished = false;
+			}
+			aItem.removeAttribute('width');
+			aItem.style.maxWidth = parseInt(width)+'px';
+
+			var itemBox = aItem.boxObject;
+			var parentBox = aItem.parentNode.boxObject;
+			if (
+				parentBox.screenX > itemBox.screenX ||
+				parentBox.screenX + parentBox.width < itemBox.screenX + itemBox.width
+				) {
+				aItem.parentNode.setAttribute('overflow', true);
+				if (aItem.selected)
+					aItem.parentNode.scrollBoxObject.ensureElementIsVisible(aItem);
+			}
+
+			if (finished) {
+				start = null;
+				delta = null;
+				radian = null;
+				aItem = null;
+			}
+			return finished;
+		};
+		window['piro.sakura.ne.jp'].animationManager.addTask(task, 0, 0, 500);
+	});
 }
 
 
diff --git a/content/treestyletab/config.xul b/content/treestyletab/config.xul
index ca4b9577..3715582a 100644
--- a/content/treestyletab/config.xul
+++ b/content/treestyletab/config.xul
@@ -53,6 +53,12 @@
 		<preference id="extensions.treestyletab.tabbar.invertTabContents"
 			name="extensions.treestyletab.tabbar.invertTabContents"
 			type="bool"/>
+		<preference id="extensions.treestyletab.tabbar.style"
+			name="extensions.treestyletab.tabbar.style"
+			type="string"/>
+		<preference id="extensions.treestyletab.twisty.style"
+			name="extensions.treestyletab.twisty.style"
+			type="string"/>
 	</preferences>
 
 	<vbox>
@@ -138,42 +144,13 @@
 		</vbox>
 	</groupbox>
 
-	</vbox>
-
-</prefpane>
-
-<prefpane id="prefpane-style" label="&config.tabs.style;"
-	onpaneload="initStylePane();">
-	<preferences>
-		<preference id="extensions.treestyletab.tabbar.style"
-			name="extensions.treestyletab.tabbar.style"
-			type="string"/>
-		<preference id="extensions.treestyletab.twisty.style"
-			name="extensions.treestyletab.twisty.style"
-			type="string"/>
-	</preferences>
-
 	<groupbox>
 		<caption label="&config.tabbar.style.caption;"/>
 		<radiogroup id="extensions.treestyletab.tabbar.style-radiogroup"
 			preference="extensions.treestyletab.tabbar.style"
 			orient="vertical">
-			<hbox align="center">
-			<radio value="plain" label="&config.tabbar.style.plain;"
-				class="image" align="center"
-				src="chrome://treestyletab/content/res/style-plain.png"/>
-			<radio value="flat" label="&config.tabbar.style.flat;"
-				class="image" align="center"
-				src="chrome://treestyletab/content/res/style-flat.png"/>
-			<radio value="mixed" label="&config.tabbar.style.mixed;"
-				class="image" align="center"
-				src="chrome://treestyletab/content/res/style-mixed.png"
-				id="extensions.treestyletab.tabbar.style-mixed"/>
-			</hbox>
-			<hbox align="center">
-			<radio value="vertigo" label="&config.tabbar.style.vertigo;"
-				class="image" align="center"
-				src="chrome://treestyletab/content/res/style-vertigo.png"/>
+			<arrowscrollbox orient="horizontal" flex="1"
+				id="extensions.treestyletab.tabbar.style-arrowscrollbox">
 			<radio value="metal" label="&config.tabbar.style.metal;"
 				class="image" align="center"
 				src="chrome://treestyletab/content/res/style-metal.png"/>
@@ -181,7 +158,20 @@
 				class="image" align="center"
 				src="chrome://treestyletab/content/res/style-sidebar.png"
 				id="extensions.treestyletab.tabbar.style-sidebar"/>
-			</hbox>
+			<radio value="mixed" label="&config.tabbar.style.mixed;"
+				class="image" align="center"
+				src="chrome://treestyletab/content/res/style-mixed.png"
+				id="extensions.treestyletab.tabbar.style-mixed"/>
+			<radio value="flat" label="&config.tabbar.style.flat;"
+				class="image" align="center"
+				src="chrome://treestyletab/content/res/style-flat.png"/>
+			<radio value="plain" label="&config.tabbar.style.plain;"
+				class="image" align="center"
+				src="chrome://treestyletab/content/res/style-plain.png"/>
+			<radio value="vertigo" label="&config.tabbar.style.vertigo;"
+				class="image" align="center"
+				src="chrome://treestyletab/content/res/style-vertigo.png"/>
+			</arrowscrollbox>
 			<hbox align="center">
 			<radio value="" label="&config.tabbar.style.none;"/>
 			</hbox>
@@ -192,7 +182,8 @@
 		<radiogroup id="extensions.treestyletab.twisty.style-radiogroup"
 			preference="extensions.treestyletab.twisty.style"
 			orient="vertical">
-			<hbox align="center">
+			<arrowscrollbox orient="horizontal" flex="1"
+				id="extensions.treestyletab.twisty.style-arrowscrollbox">
 			<radio value="auto" label="&config.twisty.style.auto;"/>
 			<radio value="retro" label="&config.twisty.style.retro;"
 				class="image" align="center"
@@ -206,12 +197,14 @@
 			<radio value="osx" label="&config.twisty.style.osx;"
 				class="image" align="center"
 				src="chrome://treestyletab/content/res/twisty-osx.png"/>
-			</hbox>
+			</arrowscrollbox>
 			<hbox align="center">
 			<radio value="none" label="&config.twisty.style.none;"/>
 			</hbox>
 		</radiogroup>
 	</groupbox>
+
+	</vbox>
 </prefpane>
 
 <prefpane id="prefpane-menu" label="&config.tabs.menu;">
@@ -790,6 +783,7 @@
 
 </prefpane>
 
+<script src="res/animationManager.js" type="application/javascript"/>
 <script src="config.js" type="application/javascript"/>
 
 </prefwindow>