diff --git a/content/treestyletab/treestyletab.css b/content/treestyletab/treestyletab.css index 5447a21a..840b88a2 100644 --- a/content/treestyletab/treestyletab.css +++ b/content/treestyletab/treestyletab.css @@ -16,3 +16,10 @@ tab[treestyletab-drop-position] .treestyletab-drop-marker { tab[treestyletab-collapsed="true"] { visibility: collapse; } + +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 { + display: none !important; +} diff --git a/content/treestyletab/treestyletab.js b/content/treestyletab/treestyletab.js index 6e05d83b..3f927527 100644 --- a/content/treestyletab/treestyletab.js +++ b/content/treestyletab/treestyletab.js @@ -9,6 +9,7 @@ var TreeStyleTabService = { kCOLLAPSED : 'treestyletab-collapsed', kNEST : 'treestyletab-nest', kDROP_POSITION : 'treestyletab-drop-position', + kTABBAR_POSITION : 'treestyletab-tabbar-position', kVERTICAL : 'treestyletab-vertical', kTWISTY : 'treestyletab-twisty', @@ -32,6 +33,15 @@ var TreeStyleTabService = { kACTION_ATTACH : 2, kACTION_PART : 4, + kTABBAR_TOP : 1, + kTABBAR_BOTTOM : 2, + kTABBAR_LEFT : 4, + kTABBAR_RIGHT : 8, + + kTABBAR_HORIZONTAL : 3, + kTABBAR_VERTICAL : 12, + kTABBAR_INVERTED : 10, + levelMargin : 12, levelMarginProp : 'margin-left', positionProp : 'screenY', @@ -293,6 +303,8 @@ var TreeStyleTabService = { initTabBrowser : function(aTabBrowser) { + this.initTabbarPosition(aTabBrowser, this.getPref('extensions.treestyletab.tabbarPosition')); + aTabBrowser.mTabContainer.addEventListener('TreeStyleTab:TabOpen', this, true); aTabBrowser.mTabContainer.addEventListener('TabClose', this, true); aTabBrowser.mTabContainer.addEventListener('TabMove', this, true); @@ -584,8 +596,6 @@ catch(e) { aTabBrowser.__treestyletab__observer = new TreeStyleTabBrowserObserver(aTabBrowser); - aTabBrowser.setAttribute(this.kVERTICAL, true); - delete addTabMethod; delete removeTabMethod; delete i; @@ -599,6 +609,10 @@ catch(e) { this.setTabValue(aTab, this.kID, id); aTab.__treestyletab__linkedTabBrowser = aTabBrowser; + var pos = this.getPref('extensions.treestyletab.tabbarPosition'); + if (pos == 'left' || pos == 'right') + aTab.setAttribute('align', 'stretch'); + this.initTabContents(aTab); var event = document.createEvent('Events'); @@ -1042,7 +1056,7 @@ catch(e) { }, /* tree */ - + getRootTabs : function(aTabBrowser) { return this.evaluateXPath( @@ -1327,8 +1341,40 @@ catch(e) { /* Commands */ + initTabbarPosition : function(aTabBrowser, aPosition) + { + aPosition = String(aPosition).toLowerCase(); + var pos = (aPosition == 'left') ? this.kTABBAR_LEFT : + (aPosition == 'right') ? this.kTABBAR_RIGHT : + (aPosition == 'bottom') ? this.kTABBAR_BOTTOM : + this.kTABBAR_TOP; + + if (pos & this.kTABBAR_VERTICAL) { + this.positionProp = 'screenY'; + this.sizeProp = 'height'; + this.invertedSizeProp = 'width'; + + aTabBrowser.mTabBox.orient = 'horizontal'; + aTabBrowser.mTabContainer.orient = aTabBrowser.mTabContainer.mTabstrip.orient = 'vertical'; + + aTabBrowser.setAttribute(this.kVERTICAL, true); + aTabBrowser.setAttribute(this.kTABBAR_POSITION, 'left'); + } + else { + this.positionProp = 'screenX'; + this.sizeProp = 'width'; + this.invertedSizeProp = 'height'; + + aTabBrowser.mTabBox.orient = 'vertical'; + aTabBrowser.mTabContainer.orient = aTabBrowser.mTabContainer.mTabstrip.orient = 'horizontal'; + + aTabBrowser.removeAttribute(this.kVERTICAL); + aTabBrowser.setAttribute(this.kTABBAR_POSITION, 'top'); + } + }, + /* attach/part */ - + attachTabTo : function(aChild, aParent, aInfo) { if (!aChild || !aParent || this.getParentTab(aChild) == aParent) return; @@ -1467,7 +1513,7 @@ catch(e) { // this.checkTabsIndentOverflow(b); }, - checkTabsIndentOverflow : function(aTabBrowser) + checkTabsIndentOverflow : function(aTabBrowser) { if (this.checkTabsIndentOverflowTimer) { window.clearTimeout(this.checkTabsIndentOverflowTimer); @@ -1510,7 +1556,7 @@ catch(e) { this.updateAllTabsIndent(b); } }, - + updateTabsCount : function(aTab) { var count = document.getAnonymousElementByAttribute(aTab, 'class', this.kCOUNTER); @@ -1839,6 +1885,15 @@ TreeStyleTabBrowserObserver.prototype = { case 'nsPref:changed': var value = TreeStyleTabService.getPref(aData); + switch (aData) + { + case 'extensions.treestyletab.tabbarPosition': + TreeStyleTabService.initTabbarPosition(this.mTabBrowser, value); + break; + + default: + break; + } break; default: @@ -1852,4 +1907,4 @@ TreeStyleTabBrowserObserver.prototype = { delete this.mTabBrowser; } }; - + diff --git a/defaults/preferences/treestyletab.js b/defaults/preferences/treestyletab.js index 85c0f210..ba3ebfa5 100644 --- a/defaults/preferences/treestyletab.js +++ b/defaults/preferences/treestyletab.js @@ -4,7 +4,8 @@ pref("extensions.treestyletab.autoExpandSubTreeOnAppendChild", true); pref("extensions.treestyletab.attachChildrenToGrandParentOnRemoveTab", true); // 0 = default, 1 = only visible tabs pref("extensions.treestyletab.focusMode", 1); -pref("extensions.treestyletab.levelMargin", 16); +pref("extensions.treestyletab.levelMargin", 12); +pref("extensions.treestyletab.tabbarPosition", "left"); pref("browser.link.open_newwindow.restriction", 0); diff --git a/skin/classic/treestyletab/treestyletab.css b/skin/classic/treestyletab/treestyletab.css index d53b9944..3caa215d 100644 --- a/skin/classic/treestyletab/treestyletab.css +++ b/skin/classic/treestyletab/treestyletab.css @@ -1,5 +1,76 @@ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +tabbrowser[treestyletab-vertical="true"] .tabbrowser-tabs { + background: ThreeDShadow !important; +} + +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 { + display: none !important; +} + +tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab { + -moz-appearance: none !important; + min-height: 2em; + margin: 0 !important; + padding: 0 0.2em !important; + background: ThreeDFace !important; + border-top: 2px solid !important; + -moz-border-top-colors: ThreeDFace ThreeDFace !important; + border-bottom: 2px solid !important; + -moz-border-bottom-colors: ThreeDShadow ThreeDFace !important; + -moz-border-radius-topleft : 0 !important; + -moz-border-radius-topright : 0 !important; + -moz-border-radius-bottomleft : 0 !important; + -moz-border-radius-bottomright : 0 !important; + -moz-box-align: stretch !important; +} +tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab[selected="true"] { + margin: 0 !important; + padding: 0 !important; + background: ThreeDHighlight !important; + -moz-border-top-colors: ThreeDHighlight ThreeDHighlight !important; + -moz-border-bottom-colors: ThreeDShadow ThreeDHighlight !important; +} + +tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab > .tab-image-middle, +tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab > .tab-close-button { + height: auto; + margin: 0 !important; + padding: 0 !important; + background: transparent; +} +tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab[selected="true"] > .tab-image-middle, +tabbrowser[treestyletab-vertical="true"] .tabbrowser-tab[selected="true"] > .tab-close-button { + background: transparent; +} + +tabbrowser[treestyletab-tabbar-position="left"] .tabbrowser-tab { + border-left: 2px solid !important; + -moz-border-left-colors: ThreeDLightShadow ThreeDFace !important; + border-right: 2px solid !important; + -moz-border-right-colors: ThreeDLightShadow ThreeDFace !important; +} +tabbrowser[treestyletab-tabbar-position="left"] .tabbrowser-tab[selected="true"] { + -moz-border-left-colors: ThreeDLightShadow ThreeDHighlight !important; + -moz-border-right-colors: ThreeDLightShadow ThreeDHighlight !important; +} + +tabbrowser[treestyletab-tabbar-position="right"] .tabbrowser-tab { + border-right: 2px solid !important; + -moz-border-right-colors: ThreeDLightShadow ThreeDFace !important; + border-left: 2px solid !important; + -moz-border-left-colors: ThreeDLightShadow ThreeDFace !important; +} +tabbrowser[treestyletab-tabbar-position="right"] .tabbrowser-tab[selected="true"] { + -moz-border-right-colors: ThreeDLightShadow ThreeDHighlight !important; + -moz-border-left-colors: ThreeDLightShadow ThreeDHighlight !important; +} + + + .treestyletab-twisty-container { margin: 0 3px 0 -3px; -moz-box-pack: start; @@ -33,32 +104,53 @@ tab[treestyletab-subtree-collapsed="true"] .treestyletab-twisty { -moz-box-pack: center; } -tab[treestyletab-drop-position="self"] .treestyletab-drop-marker { +tabbrowser:not([treestyletab-vertical="true"]) tab[treestyletab-drop-position="self"] .treestyletab-drop-marker { list-style-image: url("dropmarker-down.png"); } -tab[treestyletab-drop-position="before"] .treestyletab-drop-marker { +tabbrowser:not([treestyletab-vertical="true"]) tab[treestyletab-drop-position="before"] .treestyletab-drop-marker { list-style-image: url("dropmarker-left.png"); } -tab[treestyletab-drop-position="after"] .treestyletab-drop-marker { +tabbrowser:not([treestyletab-vertical="true"]) tab[treestyletab-drop-position="after"] .treestyletab-drop-marker { list-style-image: url("dropmarker-right.png"); } +/* tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="self"] .treestyletab-drop-marker { list-style-image: url("dropmarker-right.png"); } +*/ +tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="self"] { + -moz-border-top-colors: -moz-dialogtext -moz-dialogtext !important; + -moz-border-right-colors: -moz-dialogtext -moz-dialogtext !important; + -moz-border-bottom-colors: -moz-dialogtext -moz-dialogtext !important; + -moz-border-left-colors: -moz-dialogtext -moz-dialogtext !important; +} +/* tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="before"] .treestyletab-drop-marker { list-style-image: url("dropmarker-up.png"); } +*/ +tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="before"] { + -moz-border-top-colors: -moz-dialogtext -moz-dialogtext !important; +} +/* tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="after"] .treestyletab-drop-marker { list-style-image: url("dropmarker-down.png"); } +*/ +tabbrowser[treestyletab-vertical="true"] tab[treestyletab-drop-position="after"] { + -moz-border-bottom-colors: -moz-dialogtext -moz-dialogtext !important; +} -tab[treestyletab-children][treestyletab-drop-position] .treestyletab-twisty, -tab[treestyletab-drop-position] .tab-icon-image, -tab[treestyletab-drop-position] .tab-extra-status { +tabbrowser:not([treestyletab-vertical="true"]) tab[treestyletab-children][treestyletab-drop-position] .treestyletab-twisty, +tabbrowser:not([treestyletab-vertical="true"]) tab[treestyletab-drop-position] .tab-icon-image, +tabbrowser:not([treestyletab-vertical="true"]) tab[treestyletab-drop-position] .tab-extra-status { visibility: hidden; } + + +