347691 - [Mac] New close-tab button is a tiny, off-center stop button

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, defect)

Description

[Phil Ringnalda (:philor)]

Three related problems with the new close-tab button image for Mac:

1. It's an octagonal Stop button, not a round Close button. Getting away from the "two round 16px things next to each other" problem with the default favicon needed to be done, but moving it to the right end of the tab did that, without needing to introduce new confusion about whether it closes the tab or just stops loading it.

2. It's tiny: two 16px things next to each other might have been bad, but a 12px (or whatever it is) thing on the other end of the tab just looks shrunken and wrong.

3. It's off-center: if for some reason it has to be 12px of image in a 16px bag, it shouldn't be sitting down in the lower right corner, where you have all the extra "active but not red" part on the top and left: if you move your mouse toward the close button from the left, a click will close the tab long before you get to the visible part of the button, while coming from the right it only becomes active when you hit the red.

Comment 1

[Mike Connor [:mconnor]]

Needs discussion.

Phil, how big is the Safari closebutton?

Comment 2

[Phil Ringnalda (:philor)]

Out-of-proportion might have been better than tiny: Safari has a 12px close button, with 10px title text and an 18px tab. We now have a 12px button with 12px text and a tab that's somewhere between 18 and 24px, depending on where you are counting.

Safari's close buttons *are* tiny, but because they are larger than the text, and have less blank tab around them, and possibly because the X is larger, with finer lines (I'm no graphic designer to know whether that's having an enlarging effect), they don't *seem* tiny.

Comment 3

[(not reading, please use [e-mail] instead)]

I'm not sure if jay is done with all the mac tab browser changes yet.

Comment 4

[Nick Fagerlund]

I'd really like to see the close buttons be Not-Red, since every tabbed Mac app I've seen uses the grey Safari-style close button. (See http://inessential.com/?comments=1&postid=3329 for a quick reference.) (Besides, the bottom-heavy shading on the current close button is a really gnarly mismatch with the top-heavy shading on the Aqua window close controls.) 

Also: backgrounded tabs have their close buttons severely washed-out, even when they're being hovered over. This seems wrong, since those background close buttons are still very much live and loaded. (This complaint may properly belong to bug 347468 instead.)

Comment 5

[Mike Beltzner [:beltzner, not reading bugmail]]

--> Firefox2, but I'd love to see if we could get this done for Beta2.

What I know we should do is:

 - change from a hexagon (which means "stop") to a circle (which means "close")
 - make sure it's properly centered
 - keep it the same size (smaller targets aren't necessarily better)

What I think we should do is:

 - use light grey with dark grey hover, but I'm willing to take argument on that

Comment 6

[Nick Fagerlund]

This is going to be moved back to the left of the tab, right? Mixing Win and Mac close button styles seems a little cruel to users. (Well, okay--to me.)

Comment 7

[Phil Ringnalda (:philor)]

(Nicholas filed bug 349108 on the unrelated "which side" issue.)

If we have to have monochrome close buttons, please not the grey-on-grey ones from Pinstripe: you wouldn't believe how many inactive tabs I accidently closed in trunk builds from not noticing that the close button changed from grey-on-grey to grey-on-grey when I was clicking to activate and got too close to the close button, before I finally turned browser.tabs.disableBackgroundClose on. Safari's glowing-white-on-deep-black on hover, not just activate, if we can't have red, but since I'm not a Mac-aesthete, just a Mac user, I'd rather have the red warning than have to constantly test how well Undo Close Tab works.

Comment 8

[Myk Melez [:myk] [@mykmelez]]

This needs a new image, which we need to get from Jay at Radiant Core, right?

Comment 9

[Phil Ringnalda (:philor)]

*** Bug 350981 has been marked as a duplicate of this bug. ***

Comment 10

[Phil Ringnalda (:philor)]

*** Bug 351153 has been marked as a duplicate of this bug. ***

Comment 11

[Wayne Woods]

(In reply to comment #5) 
>  - use light grey with dark grey hover, but I'm willing to take argument on that

My only input to this is to plead that it NOT be a hover effect for the active tab. I find that the hover serves no purpose other than to make it hard to find widgets that aren't currently being hovered over. And the current tab close buttons in the Fx 2 theme are a prime example of this... the button on the active tab looks just like all the others.

OK, one other bit of input, since I can't help myself. Claiming grey buttons based on other apps with other themes is fine, but the Fx 2 theme is so cartoon-colourful in places (not meant in a critical way, I just can't think of another word for it) that red buttons fit. Safari's theme is designed in an entirely different way. If you want to see what happens when ideas from that are borrowed and slapped together with bits of Firefox(bird), take a look back at very, very early incarnations of Pinstripe. It really didn't go so well.

Comment 12

[Mike Beltzner [:beltzner, not reading bugmail]]

RC will be providing new graphics here, using a more Safari-like closebutton for tabs.

Comment 13

[Jay Goldman]

Attachment: Pinstripe Tab Close Buttons

These are replacement images for the tab close, based on the Safari icons, centered in 16x16. Please note the addition of a new image (closetab-hover.png) which provides a hover state for the buttons rather than using an opacity change.

Comment 14

[Phil Ringnalda (:philor)]

Taking, for the CSS to wire up the pretty new third image...

Comment 15

[Phil Ringnalda (:philor)]

Attachment: Three image CSS

Seems to be the lot of them.

Comment 16

[(not reading, please use [e-mail] instead)]

phil, thanks for working on this!

could you attach screen shots of the new icons in action (in all locations, including the close button in the sidebar)?  Since the new icons are centered, and the old ones were not, I'm slightly worried that things are going to be slightly off-centered now.

also, since the images have opacity built in, this should mean that we'll be removing opacity rules (like http://lxr.mozilla.org/seamonkey/source/toolkit/themes/pinstripe/global/browser.css#205, for example).

Comment 17

[Phil Ringnalda (:philor)]

Comment on attachment 237439 [details] [diff] [review]
Three image CSS

Oops, I missed the opacity. That might explain why they look so blurry to me in inaction :)

Now if I can just find where the off-center version was moved to look like it wasn't off-center...

Comment 18

[Phil Ringnalda (:philor)]

Erm, I missed the opacity because that's only on the trunk, not on the branch.

Comment 19

[(not reading, please use [e-mail] instead)]

phil, sorry about that red herring!  (I lxr'd seamonkey instead of branch)

but what about http://lxr.mozilla.org/mozilla1.8/source/toolkit/themes/pinstripe/global/browser.css#240?

(try setting browser.tabs.closeButtons to 3, I think)

Comment 20

[Phil Ringnalda (:philor)]

No, set browser.tabs.disableBackgroundClose to true. Comment 7 was supposed to remind me to file about it, but I forgot. Filed bug 351965 for that special horror.

Comment 21

[Phil Ringnalda (:philor)]

Attachment: Uncentered screenshot

Advice on what to do with centering welcome. Screen shot is current on top, with my patch and the new images on the bottom. Right now, favicons and close buttons are centered on the active tab (including the white strip's effect), and too low on the background tab, while the text is too high on the active tab and centered on the background tab; with my patch the close button joins the text in being centered on background tabs and too high on the active tab.

Comment 22

[Jay Goldman]

Attachment: Lighter tab close X

I'm not sure how to fix the centering, but the screenshot shows me that the X is too close to the background colour of the circle - let's try swapping in this version instead.

Comment 23

[Phil Ringnalda (:philor)]

Attachment: Myriad closetabs

All four closetabs with the image from attachment 237537 [details] - looks much clearer to me, thanks Jay!

Comment 24

[Wayne Woods]

Phil: I reckon your centering for the close button and the text is fine as it is. I think their current position is a good compromise between background and foreground tab dimensions.

The only thing that seems out of alignment is the favicon, which needs to shift 1px north. I think once it's pushed up, the text will no longer seem like it's too high on the active tab

The tab close buttons also look much nicer now, thanks! Though I still feel they'd be better at the larger (old theme) size... they seem to balance the favicons better.

Comment 25

[Phil Ringnalda (:philor)]

(In reply to comment #24)
> Though I still feel they'd be better at the larger (old theme) size

They do retain the off-center versions dangerous habit of having extra invisible active pixels around the edges (probably more, even, since before to get to the invisible active part you had to have the cursor on the left or on top, where you were more likely to think you were on the button anyway), but I get the feeling we've lost that argument.

Comment 26

[Phil Ringnalda (:philor)]

Attachment: Centered screenshot

Looks good to me, anyway.

Comment 27

[Phil Ringnalda (:philor)]

Attachment: Fixed CSS, take 2

Tabstrip is hard: took me forever to realize I needed some margin-bottom to keep the favicon from sliding down on an active tab.

Comment 28

[Mike Connor [:mconnor]]

Comment on attachment 237644 [details] [diff] [review]
Fixed CSS, take 2

tested and looks good, thanks! r+a=me

Comment 29

[Phil Ringnalda (:philor)]

(For anyone thinking about checking in, it's attachment 237537 [details], closetab-hover.png and closetab-active.png from attachment 237352 [details], and attachment 237644 [details] [diff] [review])

Comment 30

[Mike Connor [:mconnor]]

checked in, thanks Phil and Jay!