From 6196870e3474f73801fd9b32a1edca2498b3c313 Mon Sep 17 00:00:00 2001 From: ithinc Date: Tue, 29 Jan 2013 18:14:45 -0800 Subject: [PATCH] Bug 649654 - When tab bar underflow occurs and tab strip was scrolled to the beginning, resize tabs such that they can be closed in succession. r=fryn --- browser/base/content/tabbrowser.css | 3 +- browser/base/content/tabbrowser.xml | 105 ++++++++++++---------------- 2 files changed, 48 insertions(+), 60 deletions(-) diff --git a/browser/base/content/tabbrowser.css b/browser/base/content/tabbrowser.css index 2dd6a05297c8..9f1b8a91f443 100644 --- a/browser/base/content/tabbrowser.css +++ b/browser/base/content/tabbrowser.css @@ -47,11 +47,12 @@ tabpanels { } .closing-tabs-spacer { + min-width: 0; pointer-events: none; } .tabbrowser-tabs:not(:hover) > .tabbrowser-arrowscrollbox > .closing-tabs-spacer { - transition: width .15s ease-out; + transition: min-width 150ms ease-out; } /** diff --git a/browser/base/content/tabbrowser.xml b/browser/base/content/tabbrowser.xml index 9d8cd32792e5..62e887dae381 100644 --- a/browser/base/content/tabbrowser.xml +++ b/browser/base/content/tabbrowser.xml @@ -1780,10 +1780,6 @@ // update tab close buttons state this.tabContainer.adjustTabstrip(); - - setTimeout(function(tabs) { - tabs._lastTabClosedByMouse = false; - }, 0, this.tabContainer); } // update first-tab/last-tab/beforeselected/afterselected attributes @@ -2828,10 +2824,13 @@ return; // Ignore vertical events var tabs = document.getBindingParent(this); - tabs.removeAttribute("overflow"); - if (tabs._lastTabClosedByMouse) - tabs._expandSpacerBy(this._scrollButtonDown.clientWidth); + if (tabs.hasAttribute("dontresize") || tabs.hasAttribute("using-closing-tabs-spacer")) { + tabs.mTabstrip._scrollButtonUp.style.visibility = "hidden"; + tabs.mTabstrip._scrollButtonDown.style.visibility = "hidden"; + } else { + tabs.removeAttribute("overflow"); + } tabs.tabbrowser._removingTabs.forEach(tabs.tabbrowser.removeTab, tabs.tabbrowser); @@ -2876,8 +2875,7 @@ command="cmd_newNavigatorTab" onclick="checkForMiddleClick(this, event);" tooltiptext="&newTabButton.tooltip;"/> - + @@ -3074,8 +3072,6 @@ document.getAnonymousElementByAttribute(this, "anonid", "closing-tabs-spacer"); - false - .tabbrowser-tab[fadein]:not([pinned])"; @@ -3098,60 +3094,48 @@ var isEndTab = (aTab._tPos > tabs[tabs.length-1]._tPos); var tabWidth = aTab.getBoundingClientRect().width; - this._lastTabClosedByMouse = true; + // Locking is neither in effect nor needed, so let tabs expand normally. + if (isEndTab && !this.hasAttribute("dontresize")) + return; - if (this.getAttribute("overflow") == "true") { - // Don't need to do anything if we're in overflow mode and aren't scrolled - // all the way to the right, or if we're closing the last tab. - if (isEndTab || !this.mTabstrip._scrollButtonDown.disabled) - return; + // Let spacer grow to the maximum and lock it, then let tabs expand normally + if (isEndTab) { + let spacer = this._closingTabsSpacer; + spacer.style.MozBoxFlex = 1; + spacer.style.minWidth = getComputedStyle(spacer).width; + spacer.style.MozBoxFlex = ""; - // If the tab has an owner that will become the active tab, the owner will - // be to the left of it, so we actually want the left tab to slide over. - // This can't be done as easily in non-overflow mode, so we don't bother. - if (aTab.owner) - return; - - this._expandSpacerBy(tabWidth); - } else { // non-overflow mode - // Locking is neither in effect nor needed, so let tabs expand normally. - if (isEndTab && !this.hasAttribute("dontresize")) - return; - - // Let spacer grow to the maximum and lock it, then let tabs expand normally - if (isEndTab) { - let spacer = this._closingTabsSpacer; - spacer.style.MozBoxFlex = 1; - spacer.style.minWidth = getComputedStyle(spacer).width; - spacer.style.MozBoxFlex = ""; - - this.setAttribute("dontanimate", "true"); - this.removeAttribute("dontresize"); - this.clientTop; - this.removeAttribute("dontanimate"); - return; - } - - if (this.hasAttribute("dontresize")) - return; + this.setAttribute("dontanimate", "true"); + this.removeAttribute("dontresize"); + this.clientTop; + this.removeAttribute("dontanimate"); + return; + } + if (!this.hasAttribute("dontresize")) { this._delayResizingRule.style.setProperty("max-width", tabWidth + "px", "important"); this.setAttribute("dontanimate", "true"); this.setAttribute("dontresize", "true"); this.clientTop; // flush styles to skip animation; see bug 649247 this.removeAttribute("dontanimate"); - this.tabbrowser.addEventListener("mousemove", this, false); - window.addEventListener("mouseout", this, false); } - ]]> - - - - = 0) { + spacer.style.minWidth = width + "px"; + this.setAttribute("using-closing-tabs-spacer", "true"); + } + } + this.tabbrowser.addEventListener("mousemove", this, false); window.addEventListener("mouseout", this, false); ]]> @@ -3162,12 +3146,15 @@ this.tabbrowser.removeEventListener("mousemove", this, false); window.removeEventListener("mouseout", this, false); - if (this.hasAttribute("using-closing-tabs-spacer")) { - this.removeAttribute("using-closing-tabs-spacer"); - this._closingTabsSpacer.style.width = 0; - } this._closingTabsSpacer.style.minWidth = ""; + this.removeAttribute("using-closing-tabs-spacer"); this.removeAttribute("dontresize"); + + if (this.hasAttribute("overflow") && this.mTabstrip._scrollbox.scrollWidth <= this.mTabstrip._scrollbox.clientWidth) { + this.mTabstrip._scrollButtonUp.style.visibility = ""; + this.mTabstrip._scrollButtonDown.style.visibility = ""; + this.removeAttribute("overflow"); + } ]]>