diff --git a/content/treestyletab/treestyletab.css b/content/treestyletab/treestyletab.css index 1858cf9a..3e760cf1 100644 --- a/content/treestyletab/treestyletab.css +++ b/content/treestyletab/treestyletab.css @@ -1,4 +1,5 @@ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); tab .treestyletab-twisty, tab .treestyletab-counter-container, @@ -22,7 +23,9 @@ tab[treestyletab-collapsed="true"], 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 { +tabbrowser[treestyletab-vertical="true"] .tabs-closebutton-box, +tabbrowser[treestyletab-vertical="true"] .tab-drop-indicator-bar + { display: none !important; } @@ -34,3 +37,31 @@ tabbrowser[treestyletab-vertical="true"] .tabbrowser-strip { overflow-x: hidden; overflow-y: auto; } + + + +tabbrowser[treestyletab-tabbar-position="right"] .tabbrowser-tab .tab-image-middle { + -moz-box-ordinal-group: 20; +} + +tabbrowser[treestyletab-tabbar-position="right"] .tabbrowser-tab .tab-close-button { + -moz-box-ordinal-group: 10; +} + + +tabbrowser[treestyletab-tabbar-position="right"] .tabbrowser-tab .tab-icon { + -moz-box-ordinal-group: 50; +} + +tabbrowser[treestyletab-tabbar-position="right"] .tabbrowser-tab html|canvas.informationaltab-thumbnail { + -moz-box-ordinal-group: 10; +} + +tabbrowser[treestyletab-tabbar-position="right"] .tabbrowser-tab .tab-text { + -moz-box-ordinal-group: 20; +} + +tabbrowser[treestyletab-tabbar-position="right"] .tabbrowser-tab .treestyletab-counter-container { + -moz-box-ordinal-group: 30; +} + diff --git a/content/treestyletab/treestyletab.js b/content/treestyletab/treestyletab.js index c7a1c705..870f8e13 100644 --- a/content/treestyletab/treestyletab.js +++ b/content/treestyletab/treestyletab.js @@ -306,7 +306,7 @@ var TreeStyleTabService = { initTabBrowser : function(aTabBrowser) { - this.initTabbar(aTabBrowser, this.getPref('extensions.treestyletab.tabbar.position')); + this.initTabbar(aTabBrowser); aTabBrowser.mTabContainer.addEventListener('TreeStyleTab:TabOpen', this, true); aTabBrowser.mTabContainer.addEventListener('TabClose', this, true); @@ -1357,6 +1357,7 @@ catch(e) { initTabbar : function(aTabBrowser, aPosition) { + if (!aPosition) aPosition = this.getPref('extensions.treestyletab.tabbar.position'); aPosition = String(aPosition).toLowerCase(); var pos = (aPosition == 'left') ? this.kTABBAR_LEFT : (aPosition == 'right') ? this.kTABBAR_RIGHT : @@ -1381,10 +1382,28 @@ catch(e) { aTabBrowser.mTabBox.orient = 'horizontal'; aTabBrowser.mTabContainer.orient = aTabBrowser.mTabContainer.mTabstrip.orient = 'vertical'; + aTabBrowser.mPanelContainer.removeAttribute('width'); aTabBrowser.mStrip.setAttribute('width', this.getPref('extensions.treestyletab.tabbar.width')); aTabBrowser.setAttribute(this.kVERTICAL, true); - aTabBrowser.setAttribute(this.kTABBAR_POSITION, 'left'); + if (pos == this.kTABBAR_RIGHT) { + aTabBrowser.setAttribute(this.kTABBAR_POSITION, 'right'); + window.setTimeout(function() { + aTabBrowser.mStrip.setAttribute('ordinal', 30); + splitter.setAttribute('ordinal', 20); + aTabBrowser.mPanelContainer.setAttribute('ordinal', 10); + }, 0); + this.levelMarginProp = 'margin-right'; + } + else { + aTabBrowser.setAttribute(this.kTABBAR_POSITION, 'left'); + window.setTimeout(function() { + aTabBrowser.mStrip.setAttribute('ordinal', 10); + splitter.setAttribute('ordinal', 20); + aTabBrowser.mPanelContainer.setAttribute('ordinal', 30); + }, 0); + this.levelMarginProp = 'margin-left'; + } } else { this.positionProp = 'screenX'; @@ -1395,9 +1414,27 @@ catch(e) { aTabBrowser.mTabContainer.orient = aTabBrowser.mTabContainer.mTabstrip.orient = 'horizontal'; aTabBrowser.mStrip.removeAttribute('width'); + aTabBrowser.mPanelContainer.removeAttribute('width'); aTabBrowser.removeAttribute(this.kVERTICAL); - aTabBrowser.setAttribute(this.kTABBAR_POSITION, 'top'); + if (pos == this.kTABBAR_BOTTOM) { + aTabBrowser.setAttribute(this.kTABBAR_POSITION, 'bottom'); + window.setTimeout(function() { + aTabBrowser.mStrip.setAttribute('ordinal', 30); + splitter.setAttribute('ordinal', 20); + aTabBrowser.mPanelContainer.setAttribute('ordinal', 10); + }, 0); + this.levelMarginProp = 'margin-bottom'; + } + else { + aTabBrowser.setAttribute(this.kTABBAR_POSITION, 'top'); + window.setTimeout(function() { + aTabBrowser.mStrip.setAttribute('ordinal', 10); + splitter.setAttribute('ordinal', 20); + aTabBrowser.mPanelContainer.setAttribute('ordinal', 30); + }, 0); + this.levelMarginProp = 'margin-top'; + } } }, @@ -1917,6 +1954,7 @@ TreeStyleTabBrowserObserver.prototype = { { case 'extensions.treestyletab.tabbar.position': TreeStyleTabService.initTabbar(this.mTabBrowser, value); + TreeStyleTabService.updateAllTabsIndent(this.mTabBrowser); break; default: diff --git a/skin/classic/treestyletab/treestyletab.css b/skin/classic/treestyletab/treestyletab.css index 4e7e5cb2..7c396d58 100644 --- a/skin/classic/treestyletab/treestyletab.css +++ b/skin/classic/treestyletab/treestyletab.css @@ -5,9 +5,7 @@ tabbrowser[treestyletab-vertical="true"] .tabbrowser-tabs { } 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 { +tabbrowser[treestyletab-vertical="true"] .tabs-left { display: none !important; } @@ -35,6 +33,16 @@ tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab[selected="true"] { -moz-border-bottom-colors: ThreeDShadow ThreeDHighlight !important; } +tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab > .tab-image-left, +tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab > .tab-image-right { + height: auto; + margin: 0 !important; + padding: 0 !important; + background: transparent; + width: 0; +} + + tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab > .tab-image-middle, tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab > .tab-close-button { height: auto;