タブのアニメーションをCSS Transitionで行うようにした

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

content/treestyletab/treestyletab.css

@@ -150,3 +150,45 @@ image.tab-icon {
 #aiostbx-tabright-toolbox:not([incustomisemode="true"]) > toolbar:not([currentset]) {
 	visibility: collapse;
 }
+
+
+
+.tabbrowser-tabs[treestyletab-animation-enabled="true"][treestyletab-mode="vertical"]:not([treestyletab-tab-inverted="true"])
+  .tabbrowser-tab {
+	-moz-transition: margin-top 0.15s ease-out,
+	                 opacity 0.15s ease-out,
+	                 margin-left 0.2s ease-out;
+	transition: margin-top 0.15s ease-out,
+	            opacity 0.15s ease-out,
+	            margin-left 0.2s ease-out;
+}
+
+.tabbrowser-tabs[treestyletab-animation-enabled="true"][treestyletab-mode="vertical"][treestyletab-tab-inverted="true"]
+  .tabbrowser-tab {
+	-moz-transition: margin-top 0.15s ease-out,
+	                 opacity 0.15s ease-out,
+	                 margin-right 0.2s ease-out;
+	transition: margin-top 0.15s ease-out,
+	            opacity 0.15s ease-out,
+	            margin-right 0.2s ease-out;
+}
+
+.tabbrowser-tabs[treestyletab-animation-enabled="true"]:not([treestyletab-mode="vertical"]):not([treestyletab-tab-inverted="true"])
+  .tabbrowser-tab {
+	-moz-transition: margin-left 0.15s ease-out,
+	                 opacity 0.15s ease-out,
+	                 margin-top 0.2s ease-out;
+	transition: margin-left 0.15s ease-out,
+	            opacity 0.15s ease-out,
+	            margin-top 0.2s ease-out;
+}
+
+.tabbrowser-tabs[treestyletab-animation-enabled="true"]:not([treestyletab-mode="vertical"])[treestyletab-tab-inverted="true"]
+  .tabbrowser-tab {
+	-moz-transition: margin-left 0.15s ease-out,
+	                 opacity 0.15s ease-out,
+	                 margin-bottom 0.2s ease-out;
+	transition: margin-left 0.15s ease-out,
+	            opacity 0.15s ease-out,
+	            margin-bottom 0.2s ease-out;
+}

content/treestyletab/treestyletabbrowser.js

@@ -570,6 +570,7 @@ TreeStyleTabBrowser.prototype = {
 		this.onPrefChange('extensions.treestyletab.showBorderForFirstTab');
 		this.onPrefChange('extensions.treestyletab.tabbar.invertTabContents');
 		this.onPrefChange('extensions.treestyletab.tabbar.invertClosebox');
+		this.onPrefChange('extensions.treestyletab.animation.enabled');
 
 		var tabContextMenu = b.tabContextMenu ||
 							document.getAnonymousElementByAttribute(b, 'anonid', 'tabContextMenu');
@@ -1486,6 +1487,10 @@ TreeStyleTabBrowser.prototype = {
 				this.checkTabsIndentOverflow();
 				break;
 
+			case 'extensions.treestyletab.animation.enabled':
+				this.setTabbrowserAttribute(this.kANIMATION_ENABLED, value ? 'true' : null );
+				break;
+
 			default:
 				break;
 		}
@@ -3664,18 +3669,20 @@ TreeStyleTabBrowser.prototype = {
 
 		var regexp = this.indentRulesRegExp;
 		var property = this.indentProp+'-'+aTarget;
+		var CSSTransitionEnabled = ('Transition' in aTab.style || 'MozTransition' in aTab.style);
 		if (
 			!this.animationEnabled ||
 			aJustNow ||
 			this.indentDuration < 1 ||
 			!aTarget ||
+			CSSTransitionEnabled ||
 			this.isCollapsed(aTab)
 			) {
 			aTab.setAttribute(
 				'style',
 				aTab.getAttribute('style')
 					.replace(regexp, '')+';'+
-					(aTarget ? property+':'+aIndent+'px !important;' : '' )
+					(aTarget || CSSTransitionEnabled ? property+':'+aIndent+'px !important;' : '' )
 			);
 			return;
 		}
@@ -3931,6 +3938,8 @@ TreeStyleTabBrowser.prototype = {
 		aTab.removeAttribute(this.kX_OFFSET);
 		aTab.removeAttribute(this.kY_OFFSET);
 
+		aTab.setAttribute(this.kCOLLAPSING_PHASE, aCollapsed ? this.kCOLLAPSING_PHASE_TO_BE_COLLAPSED : this.kCOLLAPSING_PHASE_TO_BE_EXPANDED );
+
 		if (
 			!this.animationEnabled ||
 			aJustNow ||
@@ -3944,7 +3953,6 @@ TreeStyleTabBrowser.prototype = {
 					.replace(this.collapseRulesRegExp, '')
 					.replace(this.kOPACITY_RULE_REGEXP, '')
 			);
-			aTab.removeAttribute(this.kCOLLAPSING);
 			if (aCollapsed)
 				aTab.setAttribute(this.kCOLLAPSED_DONE, true);
 			else
@@ -3988,14 +3996,25 @@ TreeStyleTabBrowser.prototype = {
 		var deltaOpacity = endOpacity - startOpacity;
 		var collapseProp = 'margin-'+this.collapseTarget;
 
-		aTab.setAttribute(this.kCOLLAPSING, true);
+		var CSSTransitionEnabled = ('Transition' in aTab.style || 'MozTransition' in aTab.style);
-		aTab.setAttribute(
+		if (CSSTransitionEnabled) {
-			'style',
+			aTab.setAttribute(
-			aTab.getAttribute('style')
+				'style',
-				.replace(this.collapseRulesRegExp, '')+';'+
+				aTab.getAttribute('style')
-				collapseProp+': -'+startMargin+'px !important;'+
+					.replace(this.collapseRulesRegExp, '')+';'+
-				'opacity: '+startOpacity+' !important;'
+					collapseProp+': -'+endMargin+'px !important;'+
-		);
+					'opacity: '+endOpacity+' !important;'
+			);
+		}
+		else {
+			aTab.setAttribute(
+				'style',
+				aTab.getAttribute('style')
+					.replace(this.collapseRulesRegExp, '')+';'+
+					collapseProp+': -'+startMargin+'px !important;'+
+					'opacity: '+startOpacity+' !important;'
+			);
+		}
 
 		if (!aCollapsed) aTab.removeAttribute(this.kCOLLAPSED_DONE);
 
@@ -4017,14 +4036,15 @@ TreeStyleTabBrowser.prototype = {
 			}
 			if (aTime >= aDuration || stopAnimation) {
 				delete aTab.__treestyletab__updateTabCollapsedTask;
-				aTab.removeAttribute(self.kCOLLAPSING);
 				if (aCollapsed) aTab.setAttribute(self.kCOLLAPSED_DONE, true);
-				aTab.setAttribute(
+				if (!CSSTransitionEnabled) {
-					'style',
+					aTab.setAttribute(
-					aTab.getAttribute('style')
+						'style',
-						.replace(self.collapseRulesRegExp, '')
+						aTab.getAttribute('style')
-						.replace(self.kOPACITY_RULE_REGEXP, '')
+							.replace(self.collapseRulesRegExp, '')
-				);
+							.replace(self.kOPACITY_RULE_REGEXP, '')
+					);
+				}
 				aTab.removeAttribute(offsetAttr);
 
 				maxMargin = null;
@@ -4043,16 +4063,18 @@ TreeStyleTabBrowser.prototype = {
 				return true;
 			}
 			else {
-				var power   = Math.sin(aTime / aDuration * radian);
+				if (!CSSTransitionEnabled) {
-				var margin  = startMargin + (deltaMargin * power);
+					let power   = Math.sin(aTime / aDuration * radian);
-				var opacity = startOpacity + (deltaOpacity  * power);
+					let margin  = startMargin + (deltaMargin * power);
-				aTab.setAttribute(
+					let opacity = startOpacity + (deltaOpacity  * power);
-					'style',
+					aTab.setAttribute(
-					aTab.getAttribute('style')
+						'style',
-						.replace(self.collapseRulesRegExp, '')+';'+
+						aTab.getAttribute('style')
-						collapseProp+': -'+margin+'px !important;'+
+							.replace(self.collapseRulesRegExp, '')+';'+
-						'opacity: '+opacity+' !important;'
+							collapseProp+': -'+margin+'px !important;'+
-				);
+							'opacity: '+opacity+' !important;'
+					);
+				}
 				aTab.setAttribute(offsetAttr, maxMargin);
 				return false;
 			}

modules/utils.js

@@ -69,7 +69,9 @@ var TreeStyleTabUtils = {
 	kSUBTREE_COLLAPSED  : 'treestyletab-subtree-collapsed',
 	kCOLLAPSED          : 'treestyletab-collapsed',
 	kCOLLAPSED_DONE     : 'treestyletab-collapsed-done',
-	kCOLLAPSING         : 'treestyletab-collapsing',
+	kCOLLAPSING_PHASE   : 'treestyletab-collapsing-phase',
+	kCOLLAPSING_PHASE_TO_BE_COLLAPSED : 'collapse',
+	kCOLLAPSING_PHASE_TO_BE_EXPANDED : 'expand',
 	kALLOW_COLLAPSE     : 'treestyletab-allow-subtree-collapse',
 
 	kX_OFFSET           : 'treestyletab-x-offset',
@@ -86,6 +88,7 @@ var TreeStyleTabUtils = {
 	kRESIZING           : 'treestyletab-tabbar-resizing',
 	kINDENTED           : 'treestyletab-tabs-indented',
 	kPRINT_PREVIEW      : 'treestyletab-print-preview',
+	kANIMATION_ENABLED  : 'treestyletab-animation-enabled',
 
 	kTAB_INVERTED          : 'treestyletab-tab-inverted',
 	kTAB_CONTENTS_INVERTED : 'treestyletab-tab-contents-inverted',