User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1b2) Gecko/20060818 BonEcho/2.0b2 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1b2) Gecko/20060818 BonEcho/2.0b2 When hovered on All Tabs menu in overflow state, the color leaks on to the right scroll button on top and bottom. Reproducible: Always

Showing the color leak on top and bottom border between All Tabs menu and Right Scroll button.

Request to block Fx2.

taking

here's what's going on here: when in overflow, we have the scrollbutton-down button and the alltabs button right to each other (without any separation). in order to make it appear like two buttons, the image we are using for the alltabs button includes a "built in" edge (some darker pixels on the edge of the image). See chrome://global/skin/icons/alltabs-box-overflow-end-bkgnd.png or http://lxr.mozilla.org/mozilla1.8/source/toolkit/themes/winstripe/global/icons/alltabs-box-overflow-end-bkgnd.png On hover of the all tabs button we are changing the opacity of the image from 0.4 to a full 1.0, in order to get the desired effect. when the opacity is set to 1.0, the color will appear to "leak" as reported in this bug. one solution is to: 1) remove the "built in edge" from alltabs-box-overflow-end-bkgnd.png 2) add a box between the scrollbutton-down and the all tabs box, and use a 1px wide "sliver" image (made from the "built in edge" from alltabs-box-overflow-end-bkgnd.png) note, this will allow us to remove alltabs-box-overflow-end-bkgnd.png and alltabs-box-overflow-start-bkgnd.png and just have chrome://global/skin/icons/alltabs-box-overflow-bkgnd.png, as without the "built in edge" the two images are the same. note, I would not change the opacity of this this 1px box on hover, and I would not animate it on overflow. I'll go work on this fix.

> in order to make it appear like two buttons, the image we are using for the > alltabs button includes a "built in" edge (some darker pixels on the edge of > the image). > > See chrome://global/skin/icons/alltabs-box-overflow-end-bkgnd.png or > http://lxr.mozilla.org/mozilla1.8/source/toolkit/themes/winstripe/global/icons/alltabs-box-overflow-end-bkgnd.png > The built in edge in the image that you have linked to does not seem to extend from top to bottom... it looks like there is some space at both these ends (top & bottom)... as a result, on hover, color seems to leak from these parts since the color of the AllTabs menu & the Right Scroll button merge at the two ends. Maybe if this built in edge is extended all through the height of the All Tabs Menu (alltabs-box-overflow-end-bkgnd.png), the problem should be solved.

Have mocked up an image to show a built in edge on the AllTabs Menu button extending through the button's height; see if this is a possibility in solving the problem.

before figuring out what to do, I need to check with beltzner / mconnor and jay to see how wed we are to the current border that is built in to the alltabs-box-overflow-end-bkgnd.png if those guys are ok with your change, that should be a simple fix. I'll try it out and report back (and seek ui-r)

a third option would be to remove that "build in border" and use a border-left style on the alltabs button. mconnor/beltzner: any preference?

Comment on attachment 235365 [details] screen shot after new image seeking beltzner's ui approval on this change

if I get a review for bug #349286, I'll have to make the same changes to the narrow versions of these images.

thanks for the quick review, beltzner. I've fixed the following images: pinstripe/global/alltabs-box-overflow-bkground.png pinstripe/global/alltabs-box-overflow-bkground-animate.png winstripe/global/alltabs-box-overflow-start-bkground.png winstripe/global/alltabs-box-overflow-start-bkground-animate.png winstripe/global/alltabs-box-overflow-end-bkground.png winstripe/global/alltabs-box-overflow-end-bkground-animate.png

(In reply to comment #13) > if I get a review for bug #349286, I'll have to make the same changes to the > narrow versions of these images. > Narrow versions? Where are they used?

> Narrow versions? Where are they used? see bug #349286, where on windows, the width of the all tabs button is now 18 px (instead of 20 px)

fix checked in (along with the fix for bug #349286)

note, this was both winstripe and pinstripe