diff --git a/content/treestyletab/res/tabFx2Compatible.css b/content/treestyletab/res/tabFx2Compatible.css deleted file mode 100644 index 08b03b37..00000000 --- a/content/treestyletab/res/tabFx2Compatible.css +++ /dev/null @@ -1,79 +0,0 @@ -/* - Firefox 2 compatible tab structure library for Firefox 3 or later - - Usage: - - - license: The MIT License, Copyright (c) 2009-2011 SHIMODA "Piro" Hiroshi - http://github.com/piroor/fxaddonlibs/blob/master/license.txt - original: - http://github.com/piroor/fxaddonlibs/blob/master/tabFx2Compatible.xul - http://github.com/piroor/fxaddonlibs/blob/master/tabFx2Compatible.xml - http://github.com/piroor/fxaddonlibs/blob/master/tabFx2Compatible.css -*/ - -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); - -:root[tabFx2Compatible="15"] - .tabbrowser-tab { - -moz-binding: url(tabFx2Compatible.xml#tabbrowser-tab-3) !important; -} - -:root[tabFx2Compatible="15"][tabFx2Compatible-flags~="separate-tabContextMenu"] - .tabbrowser-tab { - -moz-binding: url(tabFx2Compatible.xml#tabbrowser-tab-4) !important; -} - -:root[tabFx2Compatible="15"]:not([tabFx2Compatible-flags~="png-throbber"])[tabFx2Compatible-flags~="fx3"] - .tab-icon-image[busy] { - list-style-image: url("chrome://global/skin/throbber/Throbber-small.gif") !important; - opacity: 0.6; -} - -:root[tabFx2Compatible="15"][tabFx2Compatible-flags~="png-throbber"][tabFx2Compatible-flags~="fx3"] - .tab-icon-image[busy] { - list-style-image: url("chrome://global/skin/icons/loading_16.png") !important; -} - -:root[tabFx2Compatible="15"][tabFx2Compatible-flags~="mac"][tabFx2Compatible-flags~="png-throbber"] - .tab-icon-image { - list-style-image: url("chrome://global/skin/tree/item.png"); -} -:root[tabFx2Compatible="15"][tabFx2Compatible-flags~="blank-favicon"] - .tab-icon-image { - list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); -} - -:root[tabFx2Compatible="15"][tabFx2Compatible-flags~="mac"] - .tabbrowser-tab:not(:hover) .tab-icon-image:not([selected="true"]) { - opacity: 0.6; -} - -:root[tabFx2Compatible="15"] - .tabbrowser-tab:focus > .tab-image-middle { - outline: 1px dotted; -} -/* we must split declarations for old Gecko */ -:root[tabFx2Compatible="15"] - .tabbrowser-tab:-moz-focusring > .tab-stack { - outline: 1px dotted; -} - - -:root[tabFx2Compatible="15"] - .tab-image-left[pinned="true"], -:root[tabFx2Compatible="15"] - .tab-image-right[pinned="true"] { - display: none !important; -} - -/* Tab Utilities */ -:root[tabFx2Compatible="15"] - .tabbrowser-tabs[highlightLocked][highlightSelected][highlightUnread] - > .tabbrowser-tab .tab-icon > .tab-icon-image ~ *, -:root[tabFx2Compatible="15"] - .tabbrowser-tabs[highlightlocked][highlightselected][highlightunread] - > .tabbrowser-tab .tab-icon > .tab-icon-image ~ * { - background: none !important; -} - diff --git a/content/treestyletab/res/tabFx2Compatible.xml b/content/treestyletab/res/tabFx2Compatible.xml deleted file mode 100644 index 3846a91f..00000000 --- a/content/treestyletab/res/tabFx2Compatible.xml +++ /dev/null @@ -1,107 +0,0 @@ - - - - -%tabBrowserDTD; - -%globalDTD; -]> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/content/treestyletab/res/tabFx2Compatible.xul b/content/treestyletab/res/tabFx2Compatible.xul deleted file mode 100644 index b8477e50..00000000 --- a/content/treestyletab/res/tabFx2Compatible.xul +++ /dev/null @@ -1,92 +0,0 @@ - - - - - - diff --git a/content/treestyletab/treestyletab.css b/content/treestyletab/treestyletab.css index 132e6e8d..6620ec2c 100644 --- a/content/treestyletab/treestyletab.css +++ b/content/treestyletab/treestyletab.css @@ -5,15 +5,19 @@ /* twisty in tabs */ .treestyletab-twisty, .tabbrowser-tabs[treestyletab-twisty-style="none"] - .treestyletab-twisty-container, + .treestyletab-twisty, .tabbrowser-tabs:not([treestyletab-allow-subtree-collapse="true"]) - .treestyletab-twisty-container { - display: none; + .treestyletab-twisty { + visibility: hidden; } .tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"] .tabbrowser-tab[treestyletab-children][treestyletab-allow-subtree-collapse="true"] .treestyletab-twisty { - display: -moz-box; + visibility: visible; +} +.tabbrowser-tab[pinned="true"] + .treestyletab-twisty { + visibility: collapse; } /* collapsed children counter */ @@ -44,6 +48,14 @@ position: relative; } .tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"][treestyletab-stack-collapsed-tabs="true"] + .tabbrowser-tab[treestyletab-collapsed="true"][fadein], +/** + * Tab Mix Plus dynamically inserts a CSS rule like + * "#tabbrowser-tabs > .tabbrowser-tab { ... }" and it unexpectedly + * expands width of "collapsed" tabs. So, to apply our rule prior than + * TMP's one, I put the "#tabbrowser-tabs" version also. + */ +#tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"][treestyletab-stack-collapsed-tabs="true"] .tabbrowser-tab[treestyletab-collapsed="true"][fadein] { visibility: visible; max-width: 20px; @@ -52,12 +64,8 @@ -moz-box-flex: 0; mask: url("res/tabEffects.svg#fadein-mask"); } -.tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"][treestyletab-stack-collapsed-tabs="true"] - .tabbrowser-tab[treestyletab-collapsed-done="true"] .tab-image-left > *, .tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"][treestyletab-stack-collapsed-tabs="true"] .tabbrowser-tab[treestyletab-collapsed-done="true"] .tab-image-middle > *, -.tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"][treestyletab-stack-collapsed-tabs="true"] - .tabbrowser-tab[treestyletab-collapsed-done="true"] .tab-image-right > *, .tabbrowser-tabs[treestyletab-allow-subtree-collapse="true"][treestyletab-stack-collapsed-tabs="true"] .tabbrowser-tab[treestyletab-collapsed-done="true"] .tab-close-button { visibility: collapse; diff --git a/content/treestyletab/treestyletab.xul b/content/treestyletab/treestyletab.xul index c37b57b3..83a9b7dc 100644 --- a/content/treestyletab/treestyletab.xul +++ b/content/treestyletab/treestyletab.xul @@ -10,8 +10,6 @@ - - diff --git a/modules/browser.js b/modules/browser.js index da8f0fad..3b367023 100644 --- a/modules/browser.js +++ b/modules/browser.js @@ -893,33 +893,25 @@ TreeStyleTabBrowser.prototype = { } }, - initTabContents : function TSTBrowser_initTabContents(aTab) + initTabContents : function TSTBrowser_initTabContents(aTab, aForce) { var d = this.document; - var icon = d.getAnonymousElementByAttribute(aTab, 'class', 'tab-icon'); + var throbber = d.getAnonymousElementByAttribute(aTab, 'class', 'tab-throbber'); var twisty = d.getAnonymousElementByAttribute(aTab, 'class', this.kTWISTY); - if (icon && !twisty) { - twisty = d.createElement('image'); - twisty.setAttribute('class', this.kTWISTY); - let container = d.createElement('hbox'); - container.setAttribute('class', this.kTWISTY_CONTAINER); - container.appendChild(twisty); - - icon.appendChild(container); - + if (throbber && !twisty) { let marker = d.createElement('image'); marker.setAttribute('class', this.kDROP_MARKER); - container = d.createElement('hbox'); - container.setAttribute('class', this.kDROP_MARKER_CONTAINER); - container.appendChild(marker); + throbber.parentNode.appendChild(marker); - icon.appendChild(container); + twisty = d.createElement('image'); + twisty.setAttribute('class', this.kTWISTY); + throbber.parentNode.appendChild(twisty); } var label = this.getTabLabel(aTab); var counter = d.getAnonymousElementByAttribute(aTab, 'class', this.kCOUNTER_CONTAINER); - if (label && label.parentNode != aTab && !counter) { + if (label && !counter) { counter = d.createElement('hbox'); counter.setAttribute('class', this.kCOUNTER_CONTAINER); @@ -946,76 +938,82 @@ TreeStyleTabBrowser.prototype = { label.parentNode.appendChild(counter); } - var tabContentBox = d.getAnonymousElementByAttribute(aTab, 'class', 'tab-content'); - if (tabContentBox && - (tabContentBox.firstChild.className || '').indexOf('tab-image-') > -1) { - // Set stretched only if the tabFx2Compatible.xml is applied. - // Tab Mix Plus overrides the binding so icons are wrongly stretched. - tabContentBox.setAttribute('align', this.isVertical ? 'stretch' : 'center' ); - } - - this.initTabContentsOrder(aTab); + this.initTabContentsOrder(aTab, aForce); }, - initTabContentsOrder : function TSTBrowser_initTabContentsOrder(aTab) + initTabContentsOrder : function TSTBrowser_initTabContentsOrder(aTab, aForce) { var d = this.document; - var label = this.getTabLabel(aTab); - var close = this.getTabClosebox(aTab); - var inverted = this.mTabBrowser.getAttribute(this.kTAB_CONTENTS_INVERTED) == 'true'; + var label = this.getTabLabel(aTab); + var close = this.getTabClosebox(aTab); + var throbber = d.getAnonymousElementByAttribute(aTab, 'class', 'tab-throbber'); + + var twisty = d.getAnonymousElementByAttribute(aTab, 'class', this.kTWISTY); + var marker = d.getAnonymousElementByAttribute(aTab, 'class', this.kDROP_MARKER); + var counter = d.getAnonymousElementByAttribute(aTab, 'class', this.kCOUNTER_CONTAINER); var nodesContainer = d.getAnonymousElementByAttribute(aTab, 'class', 'tab-content') || aTab; var nodes = Array.slice(d.getAnonymousNodes(nodesContainer) || nodesContainer.childNodes); - // reset order + // reset order at first! nodes.forEach(function(aNode, aIndex) { + if (aNode.getAttribute('class') == 'informationaltab-thumbnail-container') + return; aNode.setAttribute('ordinal', aIndex); }, this); - // rearrange top-level contents + // after that, rearrange contents nodes.splice(nodes.indexOf(close), 1); - if (inverted) { - if (this.mTabBrowser.getAttribute(this.kCLOSEBOX_INVERTED) == 'true') - nodes.splice(nodes.indexOf(label.parentNode)+1, 0, close); - else - nodes.splice(nodes.indexOf(label.parentNode), 0, close); - } - else { - if (this.mTabBrowser.getAttribute(this.kCLOSEBOX_INVERTED) == 'true') - nodes.splice(nodes.indexOf(label.parentNode), 0, close); - else - nodes.splice(nodes.indexOf(label.parentNode)+1, 0, close); - } - var count = nodes.length; - Array.slice(nodes).reverse() - .forEach(function(aNode, aIndex) { - aNode.setAttribute('ordinal', (count - aIndex + 1) * 100); - }, this); + if (this.mTabBrowser.getAttribute(this.kCLOSEBOX_INVERTED) == 'true') + nodes.splice(nodes.indexOf(label), 0, close); + else + nodes.splice(nodes.indexOf(label)+1, 0, close); - // rearrange contents in "tab-image-middle" - nodes = Array.slice(label.parentNode.childNodes); + if (marker) { + nodes.splice(nodes.indexOf(marker), 1); + nodes.splice(nodes.indexOf(throbber), 0, marker); + } + if (twisty) { + nodes.splice(nodes.indexOf(twisty), 1); + nodes.splice(nodes.indexOf(throbber), 0, twisty); + } - if (inverted) + if (this.mTabBrowser.getAttribute(this.kTAB_CONTENTS_INVERTED) == 'true') nodes.reverse(); - var counter = d.getAnonymousElementByAttribute(aTab, 'class', this.kCOUNTER_CONTAINER); - if (counter) { + if (counter) { // counter must rightside of the label! nodes.splice(nodes.indexOf(counter), 1); nodes.splice(nodes.indexOf(label)+1, 0, counter); } - count = nodes.length; - nodes.reverse().forEach(function(aNode, aIndex) { - if (aNode.getAttribute('class') == 'informationaltab-thumbnail-container') - return; - aNode.setAttribute('ordinal', (count - aIndex + 1) * 100); - }, this); + var count = nodes.length; + nodes.reverse() + .forEach(function(aNode, aIndex) { + if (aNode.getAttribute('class') == 'informationaltab-thumbnail-container') + return; + aNode.setAttribute('ordinal', (count - aIndex + 1) * 100); + }); + + if (aForce) { + /** + * After the order of contents are changed dynamically, + * Gecko doesn't re-render them in the new order. + * Changing of "display" or "position" can fix this problem. + */ + nodes.forEach(function(aNode) { + aNode.style.position = 'fixed'; + }); + this.Deferred.wait(0.1).next(function() { + nodes.forEach(function(aNode) { + aNode.style.position = ''; + }); + }); + } }, updateInvertedTabContentsOrder : function TSTBrowser_updateInvertedTabContentsOrder(aTarget) { - if (!this.getTreePref('tabbar.invertTabContents')) return; var self = this; this.Deferred.next(function() { var b = self.mTabBrowser; @@ -2109,14 +2107,14 @@ TreeStyleTabBrowser.prototype = { case 'extensions.treestyletab.tabbar.invertTabContents': this.setTabbrowserAttribute(this.kTAB_CONTENTS_INVERTED, value); tabs.forEach(function(aTab) { - this.initTabContents(aTab); + this.initTabContents(aTab, true); }, this); return; case 'extensions.treestyletab.tabbar.invertClosebox': this.setTabbrowserAttribute(this.kCLOSEBOX_INVERTED, value); tabs.forEach(function(aTab) { - this.initTabContents(aTab); + this.initTabContents(aTab, true); }, this); return; diff --git a/modules/utils.js b/modules/utils.js index b374623e..98ef001f 100644 --- a/modules/utils.js +++ b/modules/utils.js @@ -144,9 +144,7 @@ var TreeStyleTabUtils = { /* classes */ kTWISTY : 'treestyletab-twisty', - kTWISTY_CONTAINER : 'treestyletab-twisty-container', kDROP_MARKER : 'treestyletab-drop-marker', - kDROP_MARKER_CONTAINER : 'treestyletab-drop-marker-container', kCOUNTER : 'treestyletab-counter', kCOUNTER_CONTAINER : 'treestyletab-counter-container', kCOUNTER_PAREN : 'treestyletab-counter-paren', @@ -869,23 +867,30 @@ var TreeStyleTabUtils = { var minY = box.screenY; var maxX = minX + box.width; var maxY = minY + box.height; - var icon = tab.ownerDocument.getAnonymousElementByAttribute(tab, 'class', 'tab-icon'); + + var icon = tab.ownerDocument.getAnonymousElementByAttribute(tab, 'class', 'tab-icon-image'); var iconBox = icon.boxObject; + var throbber = tab.ownerDocument.getAnonymousElementByAttribute(tab, 'class', 'tab-throbber'); + var throbberBox = throbber.boxObject; + var extraMinX = Math.min(throbberBox.screenX, iconBox.screenX); + var extraMinY = Math.min(throbberBox.screenY, iconBox.screenY); + var extraMaxX = Math.max(throbberBox.screenX + throbberBox.width, iconBox.screenX + iconBox.width); + var extraMaxY = Math.max(throbberBox.screenY + throbberBox.height, iconBox.screenY + iconBox.height); + if (!box.width || !box.height) { - minX = iconBox.screenX; - minY = iconBox.screenY; - maxX = minX + iconBox.width; - maxY = minY + iconBox.height; + minX = extraMinX; + minY = extraMinY; + maxX = extraMaxX; + maxY = extraMaxY; } - if ( - box.width && box.height && + else if ( this.shouldExpandTwistyArea && !this._expandTwistyAreaBlockers.length ) { - minX = Math.min(minX, iconBox.screenX); - minY = Math.min(minY, iconBox.screenY); - maxX = Math.max(maxX, iconBox.screenX + iconBox.width); - maxY = Math.max(maxY, iconBox.screenY + iconBox.height); + minX = Math.min(minX, extraMinX); + minY = Math.min(minY, extraMinY); + maxX = Math.max(maxX, extraMaxX); + maxY = Math.max(maxY, extraMaxY); } var x = aEvent.screenX; diff --git a/skin/classic/treestyletab/Darwin-styled.css b/skin/classic/treestyletab/Darwin-styled.css index 66c4ca96..f9418056 100644 --- a/skin/classic/treestyletab/Darwin-styled.css +++ b/skin/classic/treestyletab/Darwin-styled.css @@ -12,18 +12,10 @@ background: #777; } -#main-window - .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] - .tabbrowser-tab:not([selected="true"]) - .tab-image-middle, #main-window .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] .tabbrowser-tab:not([selected="true"]) .tab-close-button, -#main-window - .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] - .tabbrowser-tab[selected="true"] - .tab-image-middle, #main-window .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] .tabbrowser-tab[selected="true"] @@ -32,30 +24,6 @@ background-repeat: repeat-x; } -#main-window - .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] - .tabbrowser-tab:not([selected="true"]) - .tab-image-left, -#main-window - .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] - .tabbrowser-tab:not([selected="true"]) - .tab-image-right, -#main-window - .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] - .tabbrowser-tab[selected="true"] - .tab-image-left, -#main-window - .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] - .tabbrowser-tab[selected="true"] - .tab-image-right { - background-position: left bottom; - background-repeat: no-repeat; -} - -#main-window:-moz-window-inactive - .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] - .tabbrowser-tab:not([selected="true"]) - .tab-image-middle, #main-window:-moz-window-inactive .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] .tabbrowser-tab:not([selected="true"]) @@ -72,23 +40,3 @@ background-repeat: repeat-x; } -#main-window:-moz-window-inactive - .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] - .tabbrowser-tab:not([selected="true"]) - .tab-image-right, -#main-window:-moz-window-inactive - .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] - .tabbrowser-tab:not([selected="true"]) - .tab-image-right, -#main-window:-moz-window-inactive - .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] - .tabbrowser-tab[selected="true"] - .tab-image-right, -#main-window:-moz-window-inactive - .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-tabs-indented="true"] - .tabbrowser-tab[selected="true"] - .tab-image-right { - background-position: left bottom; - background-repeat: no-repeat; -} - diff --git a/skin/classic/treestyletab/metal/tab-base.css b/skin/classic/treestyletab/metal/tab-base.css index 2188d8d6..2ea6c7fe 100644 --- a/skin/classic/treestyletab/metal/tab-base.css +++ b/skin/classic/treestyletab/metal/tab-base.css @@ -72,18 +72,17 @@ .tab-background { margin: 0 !important; } -.tabbrowser-tabs[treestyletab-mode="vertical"] - .tab-content { - margin-left: 0 !important; - margin-right: 0 !important; -} - .tabbrowser-tabs[treestyletab-mode="vertical"] .tab-content { border: 10px solid transparent; margin: 0 !important; + padding: 0 5px 0 10px; -moz-appearance: none !important; } +.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-tab-inverted="true"] + .tab-content { + padding: 0 10px 0 5px; +} .tabbrowser-tabs[treestyletab-mode="vertical"]:not([treestyletab-tab-inverted="true"]) @@ -96,12 +95,6 @@ border-left: 0 none !important; -moz-border-left-colors: none !important; } -.tabbrowser-tabs[treestyletab-mode="vertical"]:not([treestyletab-tab-inverted="true"]) - .tabbrowser-tab:not([treestyletab-drop-position="self"]) .tab-image-right, -.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-tab-inverted="true"] - .tabbrowser-tab:not([treestyletab-drop-position="self"]) .tab-image-left { - padding-right: 2px !important; -} diff --git a/skin/classic/treestyletab/square/Darwin.css b/skin/classic/treestyletab/square/Darwin.css index bffde53a..0d9af46c 100644 --- a/skin/classic/treestyletab/square/Darwin.css +++ b/skin/classic/treestyletab/square/Darwin.css @@ -22,34 +22,18 @@ tabbrowser:not([treestyletab-style="vertigo"])[treestyletab-mode="vertical"] position: relative !important; } -#main-window:-moz-window-inactive - .tabbrowser-tabs[treestyletab-mode="vertical"] - .tabbrowser-tab - .tab-image-middle, #main-window:-moz-window-inactive .tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab .tab-close-button, -#main-window:-moz-window-inactive - .tabbrowser-tabs[treestyletab-mode="vertical"] - .tabbrowser-tab[selected="true"] - .tab-image-middle, #main-window:-moz-window-inactive .tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[selected="true"] .tab-close-button, -#main-window:-moz-window-inactive - .tabbrowser-tabs[treestyletab-tabbar-position="bottom"] - .tabbrowser-tab - .tab-image-middle, #main-window:-moz-window-inactive .tabbrowser-tabs[treestyletab-tabbar-position="bottom"] .tabbrowser-tab .tab-close-button, -#main-window:-moz-window-inactive - .tabbrowser-tabs[treestyletab-tabbar-position="bottom"] - .tabbrowser-tab[selected="true"] - .tab-image-middle, #main-window:-moz-window-inactive .tabbrowser-tabs[treestyletab-tabbar-position="bottom"] .tabbrowser-tab[selected="true"] diff --git a/skin/classic/treestyletab/square/base.css b/skin/classic/treestyletab/square/base.css index 3450d6a2..2e6a71f8 100644 --- a/skin/classic/treestyletab/square/base.css +++ b/skin/classic/treestyletab/square/base.css @@ -161,47 +161,15 @@ background-color: ThreeDHighlight !important; } -.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) - .tabbrowser-tab - .tab-image-left, -.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) - .tabbrowser-tab - .tab-image-right, -.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) - .tabbrowser-tab:not([selected="true"]) - .tab-image-left, -.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) - .tabbrowser-tab:not([selected="true"]) - .tab-image-right { - height: auto; - margin: 0 !important; - padding: 0 !important; - background: transparent; - width: 0; -} - .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab - .tab-image-middle, -.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) - .tabbrowser-tab - .tab-close-button, -.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) - .tabbrowser-tab:not([selected="true"]):not(:hover) - .tab-image-middle, -.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) - .tabbrowser-tab:not([selected="true"]):not(:hover) - .tab-image-middle .tab-close-button { height: auto; margin: 0 !important; padding: 0 !important; background: transparent; } -.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) - .tabbrowser-tab[selected="true"] - .tab-image-middle, .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab[selected="true"] .tab-close-button { diff --git a/skin/classic/treestyletab/twisty/twisty.css b/skin/classic/treestyletab/twisty/twisty.css index f81816f8..c18adc34 100644 --- a/skin/classic/treestyletab/twisty/twisty.css +++ b/skin/classic/treestyletab/twisty/twisty.css @@ -2,96 +2,55 @@ .tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab:not([pinned="true"]) - .treestyletab-twisty-container, + .treestyletab-twisty, .tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-allow-subtree-collapse="true"] .tabbrowser-tab[treestyletab-allow-subtree-collapse="true"][treestyletab-children]:not([pinned="true"]) - .treestyletab-twisty-container { - margin: 0 3px 0 -3px; + .treestyletab-twisty { + position: relative; + margin: 0 -13px 0 -3px; + max-height: 16px; + max-width: 16px; + min-height: 16px; + min-width: 16px; -moz-box-pack: start; -moz-box-align: center; -moz-box-flex: 1; } -.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-tab-contents-inverted="true"] - .tabbrowser-tab:not([pinned="true"]) - .treestyletab-twisty-container, -.tabbrowser-tabs[treestyletab-mode="horizontal"][treestyletab-allow-subtree-collapse="true"][treestyletab-tab-contents-inverted="true"] - .tabbrowser-tab[treestyletab-allow-subtree-collapse="true"][treestyletab-children]:not([pinned="true"]) - .treestyletab-twisty-container { - margin: 0 -3px 0 3px; -} .tabbrowser-tabs[treestyletab-twisty-style^="modern"][treestyletab-mode="vertical"] .tabbrowser-tab:not([pinned="true"]) - .treestyletab-twisty-container, + .treestyletab-twisty, .tabbrowser-tabs[treestyletab-twisty-style^="osx"][treestyletab-mode="vertical"] .tabbrowser-tab:not([pinned="true"]) - .treestyletab-twisty-container, + .treestyletab-twisty, .tabbrowser-tabs[treestyletab-twisty-style^="modern"][treestyletab-mode="horizontal"][treestyletab-allow-subtree-collapse="true"] .tabbrowser-tab[treestyletab-allow-subtree-collapse="true"][treestyletab-children]:not([pinned="true"]) - .treestyletab-twisty-container, + .treestyletab-twisty, .tabbrowser-tabs[treestyletab-twisty-style^="osx"][treestyletab-mode="horizontal"][treestyletab-allow-subtree-collapse="true"] .tabbrowser-tab[treestyletab-allow-subtree-collapse="true"][treestyletab-children]:not([pinned="true"]) - .treestyletab-twisty-container { - position: relative; - margin: 0 14px 0 -14px; + .treestyletab-twisty { + margin: 0 -2px 0 -5px; } .tabbrowser-tabs[treestyletab-twisty-style^="modern"][treestyletab-mode="vertical"][treestyletab-tab-contents-inverted="true"] .tabbrowser-tab:not([pinned="true"]) - .treestyletab-twisty-container, + .treestyletab-twisty, .tabbrowser-tabs[treestyletab-twisty-style^="osx"][treestyletab-mode="vertical"][treestyletab-tab-contents-inverted="true"] .tabbrowser-tab:not([pinned="true"]) - .treestyletab-twisty-container, + .treestyletab-twisty, .tabbrowser-tabs[treestyletab-twisty-style^="modern"][treestyletab-mode="horizontal"][treestyletab-allow-subtree-collapse="true"][treestyletab-tab-contents-inverted="true"] .tabbrowser-tab[treestyletab-allow-subtree-collapse="true"][treestyletab-children]:not([pinned="true"]) - .treestyletab-twisty-container, + .treestyletab-twisty, .tabbrowser-tabs[treestyletab-twisty-style^="osx"][treestyletab-mode="horizontal"][treestyletab-allow-subtree-collapse="true"][treestyletab-tab-contents-inverted="true"] .tabbrowser-tab[treestyletab-allow-subtree-collapse="true"][treestyletab-children]:not([pinned="true"]) - .treestyletab-twisty-container { - margin: 0 -14px 0 14px; + .treestyletab-twisty { + margin: 0 -5px 0 -2px; } .tabbrowser-tabs[treestyletab-twisty-style="retro"][treestyletab-mode="horizontal"][treestyletab-allow-subtree-collapse="true"] .tabbrowser-tab[treestyletab-allow-subtree-collapse="true"][treestyletab-children]:not([pinned="true"]) - .treestyletab-twisty-container { - position: relative; - margin: 0 16px 0 -16px; -} - -.tabbrowser-tabs[treestyletab-twisty-style="retro"][treestyletab-mode="horizontal"][treestyletab-allow-subtree-collapse="true"] - .tabbrowser-tab[treestyletab-allow-subtree-collapse="true"][treestyletab-children]:not([pinned="true"]) - .tab-icon { - margin-left: 16px; -} -.tabbrowser-tabs[treestyletab-twisty-style^="modern"][treestyletab-mode="horizontal"][treestyletab-allow-subtree-collapse="true"] - .tabbrowser-tab[treestyletab-allow-subtree-collapse="true"][treestyletab-children]:not([pinned="true"]) - .tab-icon, -.tabbrowser-tabs[treestyletab-twisty-style^="osx"][treestyletab-mode="horizontal"][treestyletab-allow-subtree-collapse="true"] - .tabbrowser-tab[treestyletab-allow-subtree-collapse="true"][treestyletab-children]:not([pinned="true"]) - .tab-icon { - margin-left: 12px; -} -.tabbrowser-tabs[treestyletab-twisty-style^="modern"][treestyletab-mode="vertical"][treestyletab-allow-subtree-collapse="true"]:not([treestyletab-tab-contents-inverted="true"]) - .tabbrowser-tab:not([pinned="true"]) - .tab-icon, -.tabbrowser-tabs[treestyletab-twisty-style^="osx"][treestyletab-mode="vertical"][treestyletab-allow-subtree-collapse="true"]:not([treestyletab-tab-contents-inverted="true"]) - .tabbrowser-tab:not([pinned="true"]) - .tab-icon, -.tabbrowser-tabs[treestyletab-twisty-style^="modern"][treestyletab-mode="horizontal"][treestyletab-allow-subtree-collapse="true"] - .tabbrowser-tab[treestyletab-allow-subtree-collapse="true"][treestyletab-children]:not([pinned="true"]) - .tab-icon, -.tabbrowser-tabs[treestyletab-twisty-style^="osx"][treestyletab-mode="horizontal"][treestyletab-allow-subtree-collapse="true"] - .tabbrowser-tab[treestyletab-allow-subtree-collapse="true"][treestyletab-children]:not([pinned="true"]) - .tab-icon { - margin-left: 9px; -} -.tabbrowser-tabs[treestyletab-twisty-style^="modern"][treestyletab-mode="vertical"][treestyletab-allow-subtree-collapse="true"][treestyletab-tab-contents-inverted="true"] - .tabbrowser-tab:not([pinned="true"]) - .tab-icon, -.tabbrowser-tabs[treestyletab-twisty-style^="osx"][treestyletab-mode="vertical"][treestyletab-allow-subtree-collapse="true"][treestyletab-tab-contents-inverted="true"] - .tabbrowser-tab:not([pinned="true"]) - .tab-icon { - margin-right: 9px; + .treestyletab-twisty { + margin: 0 -16px 0 0; } .treestyletab-twisty {