Closed Bug 633213 Opened 13 years ago Closed 13 years ago

An invalid (non-functional) Scroll bar is present in the Panorama view where the AppTabs icons should be displayed


(Firefox Graveyard :: Panorama, defect)

Windows 7
Not set


(Not tracked)

Firefox 4.0b12


(Reporter: andrei.domuta, Assigned: msucan)



(Keywords: regression, Whiteboard: [visual][ux])


(3 files, 1 obsolete file)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.94 Safari/534.13
Build Identifier: Mozilla/5.0 (Windows NT 6.1; rv:2.0b12pre) Gecko/20110210 Firefox/4.0b12pre

An invalid (non-functional) scroll bar is present in the Panorama View (group view) where the AppTabs icons should be displayed (on the right margin of a group)

Reproducible: Always

Steps to Reproduce:
1. Launch Firefox on a new profile
2. Open 7 or more tabs with different webpages loaded in them
3. Pin 5 of them as AppTabs leaving 2 or more normal tabs
4. Enter GroupView (Panorama)
5. Resize the group to minimum possible
Actual Results:  
5.Stack view is visible, but an invalid (non-functional) scrollbar is visible as well, where the AppTabs icons should be displayed.

Expected Results:  
1.Firefox should launch with 2 tabs open (startpage and mozilla page)
2.Seven or more different tabs should be opened
3.Five AppTabs and 2 or more normal tabs present
4.Group View with one group present: 2 or more thumbnails and 5 appTabs (icons positioned on the right margin of the group)
5.Icons should display properly (stack view of the thumbnails and AppTabs icons)

See attachements for screenshots
Attachment #511404 - Attachment description: TabView normally displaying AppTabs → tab bar normally displaying AppTabs
Attachment #511405 - Attachment description: GroupView displaying AppTabs with ScrollBar → Panorama displaying AppTabs with ScrollBar
Blocks: 627096
Keywords: regression
Whiteboard: [visual][ux]
I am confirming issue - setting resolution to New.
Ever confirmed: true
I cannot reproduce the issue on Ubuntu 10.04 (Linux):

Nonetheless, the render looks familiar. I did see this appearing when the truncation ellipsis was too big.

Andrei: do you have a custom Firefox theme / persona? Do you have a custom Windows theme?

Dao / Ian: the problem is somwhere in tabview.css, in the properties of .appTabTrayContainerTruncated:after. I know that having bottom: 0 caused the scrollbar to show for me as well. I believe this is caused by one bug related to bug 631112 or bug 631114 which I found while working on bug 595965. There's some weirdness with the columns implementation. :)

To work around the problem here, perhaps we need to increase the value of the bottom property.

Still, I wonder why it happens, because element height is always 15px, line-height is also always 15px, so irrespective of fonts and other system configs... it should not overflow. Thoughts?
Why exactly are you using overflow-x: hidden? Note that this implicitly sets overflow-y: auto.
(In reply to comment #5)
> Why exactly are you using overflow-x: hidden? Note that this implicitly sets
> overflow-y: auto.

Because .appTabTray is wider than .appTabTrayContainer. The container is sized to be 20% of the groupitem width. The columns are truncated by reducing the width of the container, hence the need for overflow-x: hidden. Sure, overflow-y is auto by default.
No, it's "visible" by default.
(In reply to comment #7)
> No, it's "visible" by default.

And would this difference (from visible to auto) cause the problem?

I could try to set a calculated height from the TabView GroupItem.adjustAppTabTray() function, for the container as well, and just go ahead with overflow:hidden, to always avoid scrollbars. Would this be fine?
(In reply to comment #8)
> (In reply to comment #7)
> > No, it's "visible" by default.
> And would this difference (from visible to auto) cause the problem?

Yes, auto gives you scrollbars on overflow.
(In reply to Comment #4)

I did a regression range and here are the results:

WFM on:
build: Mozilla/5.0 (Windows NT 6.1; rv:2.0b12pre) Gecko/20110208 Firefox/4.0b12pre
build config:

Reproduceable on:
build: Mozilla/5.0 (Windows NT 6.1; rv:2.0b12pre) Gecko/20110209 Firefox/4.0b12pre
build config:

The theme for the OS is the Windows 7 one (with aero)
For Firefox there is nothing installed (all are default and on a clean profile)
Attached patch proposed fix (obsolete) — Splinter Review
Proposed fix. Simply set overflow:hidden for .appTabTrayContainer. This works because the GroupItem.adjustAppTabTray() method sets the correct width and height for the element, so overflow:hidden won't cause issues, it only makes sure the scrollbar won't show.

Someone should test this on Windows and Mac. On Linux it renders fine. Thanks!
Assignee: nobody → mihai.sucan
Attachment #511687 - Flags: review?(ian)
Can you use overflow: -moz-hidden-unscrollable?
Attached patch updated fixSplinter Review
Updated the patch to use -moz-hidden-unscrollable - it works. Thanks Dão!

(I should check MDN and Mozilla's CSS extensions more often, hehe. :) )
Attachment #511687 - Attachment is obsolete: true
Attachment #511786 - Flags: review?(ian)
Attachment #511687 - Flags: review?(ian)
Comment on attachment 511786 [details] [diff] [review]
updated fix

Asking Dão for review.
Attachment #511786 - Flags: review?(ian) → review?(dao)
Attachment #511786 - Flags: review?(dao) → review+
Note to approvers: ridiculously light footprint (3 CSS lines changed); r+ from Dão; fixes bad, confusing UI glitch introduced recently.
Blocks: 595965
Attachment #511786 - Flags: approval2.0? → approval2.0+
Thanks for the review+ Dão and for the approval Dolske!
Keywords: checkin-needed
Version: unspecified → Trunk
Closed: 13 years ago
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 4.0b12
Mozilla/5.0 (Windows NT 6.1; rv:2.0b12pre) Gecko/20110215 Firefox/4.0b12pre

Verified issue and it's no longer reproducible.
Product: Firefox → Firefox Graveyard
You need to log in before you can comment on or make changes to this bug.