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

Status: VERIFIED FIXED

(Firefox Graveyard :: Panorama, defect)

Description

[AndreiD[QA]]

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

Comment 1

[AndreiD[QA]]

Attachment: tab bar normally displaying AppTabs

Comment 2

[AndreiD[QA]]

Attachment: Panorama displaying AppTabs with ScrollBar

Comment 3

[George Carstoiu]

I am confirming issue - setting resolution to New.

Comment 4

[Mihai Sucan [:msucan]]

I cannot reproduce the issue on Ubuntu 10.04 (Linux):

http://img.i7m.de/show/j65tw.png

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?

Comment 5

[Dão Gottwald [:dao]]

Why exactly are you using overflow-x: hidden? Note that this implicitly sets overflow-y: auto.

Comment 6

[Mihai Sucan [:msucan]]

(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.

Comment 7

[Dão Gottwald [:dao]]

No, it's "visible" by default.

Comment 8

[Mihai Sucan [:msucan]]

(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?

Comment 9

[Dão Gottwald [:dao]]

(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.

Comment 10

[AndreiD[QA]]

(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: http://hg.mozilla.org/mozilla-central/rev/3470891975c7

Reproduceable on:
build: Mozilla/5.0 (Windows NT 6.1; rv:2.0b12pre) Gecko/20110209 Firefox/4.0b12pre
build config: http://hg.mozilla.org/mozilla-central/rev/fd0817e454fe

*Note:
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)

Comment 11

[Mihai Sucan [:msucan]]

Attachment: proposed fix

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!

Comment 12

[Dão Gottwald [:dao]]

Can you use overflow: -moz-hidden-unscrollable?

Comment 13

[Mihai Sucan [:msucan]]

Attachment: updated fix

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. :) )

Comment 14

[Mihai Sucan [:msucan]]

Comment on attachment 511786 [details] [diff] [review]
updated fix

Asking Dão for review.

Comment 15

[Michael Yoshitaka Erlewine [:mitcho]]

Note to approvers: ridiculously light footprint (3 CSS lines changed); r+ from Dão; fixes bad, confusing UI glitch introduced recently.

Comment 16

[Mihai Sucan [:msucan]]

Thanks for the review+ Dão and for the approval Dolske!

Comment 17

[Phil Ringnalda (:philor)]

http://hg.mozilla.org/mozilla-central/rev/f580cdea927a

Comment 18

[George Carstoiu]

Mozilla/5.0 (Windows NT 6.1; rv:2.0b12pre) Gecko/20110215 Firefox/4.0b12pre

Verified issue and it's no longer reproducible.