タブバーとコンテンツ領域が重なる所を半透明に

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

content/treestyletab/treestyletab.css

@@ -25,6 +25,7 @@
 .tabbrowser-strip[treestyletab-tabbar-autohide="hidden"]+splitter,
 tabbrowser:not([treestyletab-tabbar-autohide="hidden"]) .treestyletab-tabbar-toggler,
 #TabsToolbar[treestyletab-tabbar-autohide="hidden"] > *,
+#TabsToolbar:not([treestyletab-tabbar-autohide-state="expanded"]) #treestyletab-tabbar-resizer-box,
 #appcontent[ahFull="true"] .tabbrowser-strip[ahHIDE="true"]+splitter /* AutoHide */,
 .tabbrowser-strip[treestyletab-tabbar-fixed="true"]+splitter,
 .tabbrowser-strip[treestyletab-print-preview="true"],
@@ -113,6 +114,20 @@ tabbrowser[treestyletab-mode="vertical"] .tabs-stack > *:first-child + * > hbox:
 	overflow: hidden !important;
 }
 
+#TabsToolbar[treestyletab-tabbar-autohide-state="expanded"] > *,
+.tabs-toolbar-inner-box[treestyletab-tabbar-autohide-state="expanded"] > * {
+	position: relative;
+	z-index: 2;
+}
+#TabsToolbar[treestyletab-tabbar-autohide-state="expanded"] #treestyletab-tabbar-resizer-box {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	top: 0;
+	z-index: 1;
+}
+
 
 
 .tabbrowser-tabs:not([treestyletab-mode="vertical"]) .tabbrowser-tab:not([treestyletab-nest="0"]) + .tabbrowser-tab[treestyletab-nest="0"],

content/treestyletab/treestyletab.xul

@@ -147,4 +147,9 @@
 	</menupopup>
 </popupset>
 
+<toolbar id="TabsToolbar">
+	<hbox id="treestyletab-tabbar-resizer-box">
+	</hbox>
+</toolbar>
+
 </overlay>

content/treestyletab/treestyletabbrowser.js

@@ -1288,7 +1288,8 @@ TreeStyleTabBrowser.prototype = {
 		var strip = this.tabStrip;
 		var tabContainerBox = this.getTabContainerBox(this.mTabBrowser);
 		var positioned = false;
-		if (this.currentTabbarPosition != 'top' ||
+		var pos = this.currentTabbarPosition;
+		if (pos != 'top' ||
 			this.mTabBrowser.getAttribute(this.kFIXED) != 'true') {
 			positioned = true;
 
@@ -1299,8 +1300,8 @@ TreeStyleTabBrowser.prototype = {
 			let realHeight = parseInt(this._tabStripPlaceHolder.getAttribute('height') || box.height);
 			let width = aWidth || realWidth;
 			let height = aHeight || realHeight;
-			let xOffset = this.currentTabbarPosition == 'right' ? width - realWidth : 0 ;
-			let yOffset = this.currentTabbarPosition == 'bottom' ? height - realHeight : 0 ;
+			let xOffset = pos == 'right' ? width - realWidth : 0 ;
+			let yOffset = pos == 'bottom' ? height - realHeight : 0 ;
 
 			strip.style.top = (box.screenY - root.screenY + root.y - yOffset)+'px';
 			strip.style.left = (box.screenX - root.screenX + root.x - xOffset)+'px';
@@ -1308,6 +1309,12 @@ TreeStyleTabBrowser.prototype = {
 			strip.style.width = (tabContainerBox.width = width)+'px';
 			strip.style.height = (tabContainerBox.height = height)+'px';
 
+			let resizerStyle = this.floatingTabbarResizerBox.style;
+			resizerStyle.top    = pos == 'top' ? realHeight+'px' : '' ;
+			resizerStyle.right  = pos == 'right' ? realWidth+'px' : '' ;
+			resizerStyle.left   = pos == 'left' ? realWidth+'px' : '' ;
+			resizerStyle.bottom = pos == 'bottom' ? realHeight+'px' : '' ;
+
 			tabContainerBox.collapsed = (this.splitter && this.splitter.getAttribute('state') == 'collapsed');
 
 			this.mTabBrowser.tabContainer.setAttribute('context', this.mTabBrowser.tabContextMenu.id);
@@ -1359,6 +1366,10 @@ TreeStyleTabBrowser.prototype = {
 		if ('_positionPinnedTabs' in this.mTabBrowser.mTabContainer)
 			this.mTabBrowser.mTabContainer._positionPinnedTabs();
 	},
+	get floatingTabbarResizerBox()
+	{
+		return document.getElementById('treestyletab-tabbar-resizer-box');
+	},
  
 	resetTabbarSize : function TSTBrowser_resetTabbarSize() 
 	{

content/treestyletab/treestyletabbrowser_autoHide.js

@@ -30,8 +30,6 @@ TreeStyleTabBrowserAutoHide.prototype = {
 	kTRANSPARENT_FULL  : 2,
 	kTRANSPARENT_STYLE : ['none', 'part', 'full'],
  
-	emulatedTransparency : TreeStyleTabService.Comparator.compare(TreeStyleTabService.XULAppInfo.version, '4.0b5') < 0, 
- 
 	get mode() /* PUBLIC API */ 
 	{
 		var mode = this.mOwner.browser.getAttribute(this.kMODE);
@@ -263,7 +261,7 @@ TreeStyleTabBrowserAutoHide.prototype = {
 		var pos = sv.currentTabbarPosition;
 		var box = b.mCurrentBrowser.boxObject;
 
-		if (!this.emulatedTransparency && this.expanded) { // Firefox 4.0-
+		if (sv.isFloating && this.expanded) { // Firefox 4.0-
 			box = {
 				screenX : box.screenX + (pos == 'left' ? this.XOffset : 0 ),
 				screenY : box.screenY,
@@ -468,10 +466,10 @@ TreeStyleTabBrowserAutoHide.prototype = {
  
 	showHideInternal : function TSTAutoHide_showHideInternal(aReason) 
 	{
-		if (this.emulatedTransparency)
+		var sv = this.mOwner;
+		if (!sv.isFloating)
 			this.stopRendering();
 
-		var sv  = this.mOwner;
 		var b   = sv.browser;
 		var pos = sv.currentTabbarPosition;
 
@@ -497,7 +495,7 @@ TreeStyleTabBrowserAutoHide.prototype = {
 		window.setTimeout(function(aSelf) {
 			aSelf.redrawContentArea();
 			aSelf.fireStateChangeEvent();
-			if (aSelf.emulatedTransparency)
+			if (!sv.isFloating)
 				aSelf.startRendering();
 		}, 0, this);
 	},
@@ -519,7 +517,7 @@ TreeStyleTabBrowserAutoHide.prototype = {
 		var sv  = this.mOwner;
 		var b   = sv.browser;
 		var pos = sv.currentTabbarPosition;
-		if (this.emulatedTransparency) { // -Firefox 3.6
+		if (!sv.isFloating) { // -Firefox 3.6
 			switch (pos)
 			{
 				case 'left':
@@ -549,10 +547,10 @@ TreeStyleTabBrowserAutoHide.prototype = {
 			case this.kMODE_SHRINK:
 				if (pos == 'left' || pos == 'right') {
 					let width = sv.maxTabbarWidth(this.getTreePref('tabbar.width'));
-					if (this.emulatedTransparency) // -Firefox 3.6
-						sv.setTabStripAttribute('width', width);
-					else // Firefox 4.0-
+					if (sv.isFloating) // Firefox 4.0-
 						sv.updateFloatingTabbar(width, 0, true);
+					else // -Firefox 3.6
+						sv.setTabStripAttribute('width', width);
 				}
 				break;
 		}
@@ -571,9 +569,8 @@ TreeStyleTabBrowserAutoHide.prototype = {
 		var splitter = document.getAnonymousElementByAttribute(b, 'class', sv.kSPLITTER);
 		this.splitterWidth = (splitter ? splitter.boxObject.width : 0 );
 
-		if (this.emulatedTransparency) { // -Firefox 3.6
+		if (!sv.isFloating) // -Firefox 3.6
 			sv.container.style.margin = 0;
-		}
 
 		switch (this.mode)
 		{
@@ -619,10 +616,10 @@ TreeStyleTabBrowserAutoHide.prototype = {
   
 	redrawContentArea : function TSTAutoHide_redrawContentArea() 
 	{
-		if (!this.emulatedTransparency)
+		var sv = this.mOwner;
+		if (sv.isFloating)
 			return;
 
-		var sv  = this.mOwner;
 		var pos = sv.currentTabbarPosition;
 		try {
 			var v = sv.browser.markupDocumentViewer;
@@ -659,7 +656,7 @@ TreeStyleTabBrowserAutoHide.prototype = {
 	},
 	redrawContentAreaWithDelay : function TSTAutoHide_redrawContentAreaWithDelay()
 	{
-		if (!this.emulatedTransparency)
+		if (this.mOwner.isFloating)
 			return;
 
 		window.setTimeout(function(aSelf) {
@@ -669,7 +666,7 @@ TreeStyleTabBrowserAutoHide.prototype = {
  
 	resetContentAreas : function TSTAutoHide_resetContentAreas()
 	{
-		if (!this.emulatedTransparency)
+		if (this.mOwner.isFloating)
 			return;
 
 		this.mOwner.getTabsArray(this.mOwner.browser).forEach(function(aTab) {
@@ -683,17 +680,14 @@ TreeStyleTabBrowserAutoHide.prototype = {
  
 	get shouldRedraw() 
 	{
-		return this.emulatedTransparency && this.enabled && this.expanded;
+		return !this.mOwner.isFloating && this.enabled && this.expanded;
 	},
  
 	drawBG : function TSTAutoHide_drawBG() 
 	{
-		if (!this.emulatedTransparency)
-			return;
-
 		var sv = this.mOwner;
-
-		if (!this.tabbarCanvas || this.isResizing) return;
+		if (sv.isFloating || !this.tabbarCanvas || this.isResizing)
+			return;
 
 		this.tabbarCanvas.style.width = (this.tabbarCanvas.width = 1)+'px';
 		this.tabbarCanvas.style.height = (this.tabbarCanvas.height = 1)+'px';
@@ -845,7 +839,7 @@ TreeStyleTabBrowserAutoHide.prototype = {
   
 	clearBG : function TSTAutoHide_clearBG() 
 	{
-		if (!this.emulatedTransparency || !this.tabbarCanvas)
+		if (this.mOwner.isFloating || !this.tabbarCanvas)
 			return;
 
 		this.tabbarCanvas.style.display = 'none';

skin/classic/treestyletab/ui.css

@@ -176,3 +176,7 @@ tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-tabbar-toggler {
 tabbrowser[treestyletab-tabbar-position="bottom"] .treestyletab-tabbar-toggler {
 	border-top: 1px solid ThreeDShadow;
 }
+
+#TabsToolbar[treestyletab-tabbar-transparent="part"] #treestyletab-tabbar-resizer-box {
+	background: rgba(0, 0, 0, 0.25);
+}