Bug 594002 - Make the tab bar scrollbox deal with tab scrolling properly when it has padding set on it. r=Enn, a=betaN

This commit is contained in:
Markus Stange 2010-11-24 10:50:20 +01:00
parent 91753f22f5
commit bf9e89781c
3 changed files with 63 additions and 9 deletions

View File

@ -2782,12 +2782,20 @@
var scrollButtonWidth = (this.getAttribute("overflow") != "true" || pinnedOnly) ? 0 :
this.mTabstrip._scrollButtonDown.scrollWidth;
var paddingStart = this.mTabstrip.scrollboxPaddingStart;
for (var i = this.tabbrowser._numPinnedTabs - 1; i >= 0; i--) {
let tab = this.childNodes[i];
width += pinnedOnly ? 0 : tab.scrollWidth;
if (this.getAttribute("overflow") != "true")
tab.style.MozMarginStart = - (width + scrollButtonWidth) + "px";
else
tab.style.MozMarginStart = - (width + scrollButtonWidth + paddingStart) + "px";
}
if (width == 0 || this.getAttribute("overflow") != "true")
this.style.MozMarginStart = width + "px";
else
this.style.MozMarginStart = width + paddingStart + "px";
this.mTabstrip.ensureElementIsVisible(this.selectedItem, false);
]]></body>
</method>

View File

@ -46,14 +46,16 @@ function runOverflowTests(aEvent) {
var element;
gBrowser.selectedTab = firstScrollable();
isLeft(firstScrollable(), "Selecting the first tab scrolls it into view");
ok(left(scrollbox) <= left(firstScrollable()), "Selecting the first tab scrolls it into view " +
"(" + left(scrollbox) + " <= " + left(firstScrollable()) + ")");
element = nextRightElement();
EventUtils.synthesizeMouse(downButton, 1, 1, {});
isRight(element, "Scrolled one tab to the right with a single click");
gBrowser.selectedTab = tabs[tabs.length - 1];
isRight(gBrowser.selectedTab, "Selecting the last tab scrolls it into view");
ok(right(gBrowser.selectedTab) <= right(scrollbox), "Selecting the last tab scrolls it into view " +
"(" + right(gBrowser.selectedTab) + " <= " + right(scrollbox) + ")");
element = nextLeftElement();
EventUtils.synthesizeMouse(upButton, 1, 1, {});
@ -64,11 +66,13 @@ function runOverflowTests(aEvent) {
isLeft(element, "Scrolled one page of tabs with a double click");
EventUtils.synthesizeMouse(upButton, 1, 1, {clickCount: 3});
isLeft(firstScrollable(), "Scrolled to the start with a triple click");
var firstScrollableLeft = left(firstScrollable());
ok(left(scrollbox) <= firstScrollableLeft, "Scrolled to the start with a triple click " +
"(" + left(scrollbox) + " <= " + firstScrollableLeft + ")");
for (var i = 2; i; i--)
EventUtils.synthesizeMouseScroll(scrollbox, 1, 1, {axis: "horizontal", delta: -1});
isLeft(firstScrollable(), "Remained at the start with the mouse wheel");
is(left(firstScrollable()), firstScrollableLeft, "Remained at the start with the mouse wheel");
element = nextRightElement();
EventUtils.synthesizeMouseScroll(scrollbox, 1, 1, {axis: "horizontal", delta: 1});

View File

@ -26,7 +26,10 @@
collapsed="true"
xbl:inherits="orient"
oncommand="_autorepeatbuttonScroll(event);"/>
<xul:scrollbox xbl:inherits="orient,align,pack,dir" flex="1" anonid="scrollbox">
<xul:scrollbox class="arrowscrollbox-scrollbox"
anonid="scrollbox"
flex="1"
xbl:inherits="orient,align,pack,dir">
<children/>
</xul:scrollbox>
<xul:autorepeatbutton class="autorepeatbutton-down"
@ -135,7 +138,26 @@
this._scrollbox.scrollWidth;
]]></getter>
</property>
<property name="scrollPaddingRect" readonly="true">
<getter><![CDATA[
// This assumes that this._scrollbox doesn't have any border.
var outerRect = this.scrollClientRect;
var innerRect = {};
innerRect.left = outerRect.left - this._scrollbox.scrollLeft;
innerRect.top = outerRect.top - this._scrollbox.scrollTop;
innerRect.right = innerRect.left + this._scrollbox.scrollWidth;
innerRect.bottom = innerRect.top + this._scrollbox.scrollHeight;
return innerRect;
]]></getter>
</property>
<property name="scrollboxPaddingStart" readonly="true">
<getter><![CDATA[
var ltr = (window.getComputedStyle(this, null).direction == "ltr");
var paddingStartName = ltr ? "padding-left" : "padding-right";
var scrollboxStyle = window.getComputedStyle(this._scrollbox, null);
return parseFloat(scrollboxStyle.getPropertyValue(paddingStartName));
]]></getter>
</property>
<property name="scrollPosition">
<getter><![CDATA[
return this.orient == "vertical" ?
@ -186,6 +208,23 @@
rect = element.getBoundingClientRect();
var elementStart = vertical ? rect.top : rect.left;
var elementEnd = vertical ? rect.bottom : rect.right;
var scrollPaddingRect = this.scrollPaddingRect;
let style = window.getComputedStyle(this._scrollbox, null);
var scrollContentRect = {
left: scrollPaddingRect.left + parseFloat(style.paddingLeft),
top: scrollPaddingRect.top + parseFloat(style.paddingTop),
right: scrollPaddingRect.right - parseFloat(style.paddingRight),
bottom: scrollPaddingRect.bottom - parseFloat(style.paddingBottom)
};
if (elementStart <= (vertical ? scrollContentRect.top : scrollContentRect.left)) {
elementStart = vertical ? scrollPaddingRect.top : scrollPaddingRect.left;
}
if (elementEnd >= (vertical ? scrollContentRect.bottom : scrollContentRect.right)) {
elementEnd = vertical ? scrollPaddingRect.bottom : scrollPaddingRect.right;
}
var amountToScroll;
if (elementStart < containerStart) {
@ -543,7 +582,10 @@
onmouseup="if (event.button == 0) _stopScroll();"
onmouseover="_continueScroll(-1);"
onmouseout="_pauseScroll();"/>
<xul:scrollbox xbl:inherits="orient,align,pack,dir" flex="1" anonid="scrollbox">
<xul:scrollbox class="arrowscrollbox-scrollbox"
anonid="scrollbox"
flex="1"
xbl:inherits="orient,align,pack,dir">
<children/>
</xul:scrollbox>
<xul:toolbarbutton class="scrollbutton-down" collapsed="true"