633360 - Tab bar's toolbar/scroll button borders overlap nav bar

Status: VERIFIED FIXED

(Firefox :: Theme, defect)

Description

[Frank Yan (:fryn)]

Attachment: shorlander's screenshot of the problem

In all Windows 7 themes that I've tested (Aero, Basic, Classic), the tab bar's toolbar button :hover borders and scroll button borders (and border effects) overlap the nav bar by 1px.

In non-maximized mode of Aero, the scroll buttons' border effects extend an additional pixel, so the bug becomes much more visible. This additional pixel is due to:

>#main-window[sizemode=normal]:not([inFullscreen=true]) #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme),
>#main-window[sizemode=normal]:not([inFullscreen=true])[disablechrome] #TabsToolbar {
>  margin-bottom: -1px;

I would consider at least the latter issue (the additional pixel) to be definitely worth fixing for Firefox 4.

Comment 1

[Marco Bonardo [:mak] (Away Apr 25 - May 5)]

Attachment: experiment 1

this makes the appearance perfect, but those are probably the longest selectors I have ever seen :(
Possible alternative could be to just set the 1px bottom border on the original -moz-border-image, is perfect in normal mode, when maximized the difference is really really faint (the line is detached 1px from the border, but doesn't look bad)

Comment 2

[Marco Bonardo [:mak] (Away Apr 25 - May 5)]

Attachment: experiment 2

The other approach.
Feel free to throw these away if they are useless :)

Comment 3

[Dão Gottwald [:dao]]

The real problem is that the buttons have negative vertical margins, to prevent them from increasing the tab bar height. I can probably work around it in this case, but it would be better if the margins weren't needed in the first place.

Comment 4

[Dão Gottwald [:dao]]

Actually, I think I'm going to just get rid of the toolbar button appearance to avoid the hack altogether...

Comment 5

[Dão Gottwald [:dao]]

Attachment: patch

Comment 6

[Frank Yan (:fryn)]

Comment on attachment 511898 [details] [diff] [review]
patch

Could we use this same scaleX(-1) technique to remove the need for tab-arrow-right.png and the right half of tab-overflow-border.png in pinstripe and gnomestripe too?

Comment 7

[Dão Gottwald [:dao]]

Pinstripe, probably yes. Gnomestripe uses native scroll arrows which I wouldn't want to mess with.

Comment 8

[Frank Yan (:fryn)]

Could we use the background-image: -moz-linear-gradient(...); background-size: 1px 100%; technique to eliminate the need for tab-overflow-border.png entirely?

Comment 9

[Dão Gottwald [:dao]]

Yes. Could be done in a follow-up bug.

Comment 10

[Frank Yan (:fryn)]

Comment on attachment 511898 [details] [diff] [review]
patch

Looks good to me.

Comment 12

[Stephen Horlander [:shorlander]]

Comment on attachment 511898 [details] [diff] [review]
patch

This looks good! :)

Comment 13

[Dão Gottwald [:dao]]

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

Comment 14

[George Carstoiu]

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

Verified issue and it's no longer present.