351157 - Winstripe Go and Search buttons need graphical overhaul for better OS integration

Status: RESOLVED FIXED

(Firefox :: Toolbars and Customization, defect)

Description

[Dão Gottwald [:dao]]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20060902 Minefield/3.0a1
Build Identifier: 

While semi-transparent, the Go and Search endcaps still don't look acceptable with darkish OS themes. Additionally, the borders look aliased.

Reproducible: Always

Comment 1

[Dão Gottwald [:dao]]

Attachment: new Go, Search and Search provider images v1

Comment 2

[Dão Gottwald [:dao]]

Attachment: screenshot before / after overhaul

Comment 3

[Dão Gottwald [:dao]]

Attachment: screenshot before / after overhaul (classic)

Comment 4

[Dão Gottwald [:dao]]

(In reply to comment #1)
> Created an attachment (id=236539) [edit]
> new Go, Search and Search provider images v1

With these images I tried to achieve:

- smoother border
- new light background
- change the background gradient on active state in order to look pressed

Comment 5

[Peter Kasting]

Changing target milestone to increase chance of showing up on search queries.

I'm not convinced by the before/after mockups.  The after appearance on Luna is significantly worse, while the after appearance on Classic is better in some ways (no bizarre white line around button) but worse in others (buttons are almost invisible now).

I think the endcaps would look better if we styled the textfields non-natively as well, to make them look more like the flat Luna look on Classic.  Making a set of endcap images that look good on Luna and Classic as-is seems almost impossible.

Comment 6

[Dão Gottwald [:dao]]

(In reply to comment #5)
> The after appearance on Luna is significantly worse

Well, it's lighter (I guess that's what you mean) and thus closer to the initial mockup (which I liked). Maybe just my taste, don't know ...

> while the after appearance on Classic is better in some
> ways (no bizarre white line around button) but worse in others (buttons are
> almost invisible now).

Yeah, I know. I'm open to suggestions how to improve this without significantly changing the look on bright themes like Luna.

Comment 7

[Dão Gottwald [:dao]]

Comment on attachment 236539 [details]
new Go, Search and Search provider images v1

canceling review request due to open issues.

Comment 8

[Dão Gottwald [:dao]]

(In reply to comment #6)
> (In reply to comment #5)
> > The after appearance on Luna is significantly worse
> Well, it's lighter (I guess that's what you mean)

Or did you mean the real Luna? I'm asking because my screenshot is from the Royale theme, which doesn't use Luna's beige.

Comment 9

[Peter Kasting]

(In reply to comment #6)
> (In reply to comment #5)
> > The after appearance on Luna is significantly worse
> 
> Well, it's lighter (I guess that's what you mean) and thus closer to the
> initial mockup (which I liked). Maybe just my taste, don't know ...

Um... the top was before, right?  The top Go button is lighter than the bottom one, which is dimmer, which is what I didn't like.

Maybe the buttons can be made to look good by using a light highlight only around the right/bottom sides, which would match the highlighting used by Windows Classic's bevels.  Then they would probably look less out of place on Classic while still having some kind of highlight in Luna?

Comment 10

[Dão Gottwald [:dao]]

(In reply to comment #9)
> Um... the top was before, right?  The top Go button is lighter than the bottom
> one, which is dimmer, which is what I didn't like.

Okay, I tried to fix that. New images coming.

> Maybe the buttons can be made to look good by using a light highlight only
> around the right/bottom sides, which would match the highlighting used by
> Windows Classic's bevels.  Then they would probably look less out of place on
> Classic while still having some kind of highlight in Luna?

There are two borders, a bright and a dark one, plus they are rounded ... I don't think it's possible to make them look like Classic bevels without trashing the look in Luna. At least I don't know how to do this. Painting the bright border on 2 instead of 4 sides probably wouldn't be enough.

Comment 11

[Dão Gottwald [:dao]]

Attachment: new Go, Search and Search provider images v2

Comment 12

[Dão Gottwald [:dao]]

Attachment: v2 screenshots

Comment 13

[Dão Gottwald [:dao]]

(In reply to comment #5)
> I think the endcaps would look better if we styled the textfields non-natively
> as well, to make them look more like the flat Luna look on Classic.  Making a
> set of endcap images that look good on Luna and Classic as-is seems almost
> impossible.

I think this would be acceptable. Fixing top and bottom border widths to 1px could already be enough. But to be sure, I'd have to see this in action. Unfortunately, I didn't get it to work. I guess it's possible and since I'm new to XUL, somebody else might be more successful.

Comment 14

[Dão Gottwald [:dao]]

(In reply to comment #13)
> Fixing top and bottom border widths to 1px could already be enough.

Forget that. I thought the text box would be 2px higher than the endcaps. But at least in the Search bar, that's not the case. It just looks out of place because the border _colors_ don't match.

Comment 15

[Dão Gottwald [:dao]]

(In reply to comment #5)
> I think the endcaps would look better if we styled the textfields non-natively
> as well, to make them look more like the flat Luna look on Classic.  Making a
> set of endcap images that look good on Luna and Classic as-is seems almost
> impossible.

http://forums.mozillazine.org/viewtopic.php?p=2470043#2470043

Comment 16

[Dão Gottwald [:dao]]

See also attachment 236722 [details] for some more v2 screenshots with the proposed "not completely native" textfields (using ThreeDShadow as border-color).

Comment 17

[Dão Gottwald [:dao]]

Peter (or anybody else), if you think v2 still looks worse, please let me know, otherwise please confirm this bug.

Comment 18

[Peter Kasting]

(In reply to comment #17)
> Peter (or anybody else), if you think v2 still looks worse, please let me know,
> otherwise please confirm this bug.

I still don't think it's as good as the old images on Luna (looks very flat).  I think it's a bit better on Classic.  I'll confirm, but I'm not sold :)

Comment 19

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

This seems like aesthetic twiddling which won't garner a clear consensus, and we're not going to block on that sort of debate.

Comment 20

[Dão Gottwald [:dao]]

(In reply to comment #18)
> I still don't think it's as good as the old images on Luna (looks very flat).

Well, that's something I can work on. I don't want it to look flat, I just want to fix the aliased corners and the bad integration when the theme is dark.

Comment 21

[Dão Gottwald [:dao]]

Attachment: Go, Search and Search provider images v3

Comment 22

[Dão Gottwald [:dao]]

Attachment: v3 screenshots

Comment 23

[Dão Gottwald [:dao]]

Comment on attachment 236898 [details]
Go, Search and Search provider images v3

v3 doesn't really work with very dark OS themes. (see last one in attachment 237109 [details])

Comment 24

[ronin.achilles]

(In reply to comment #23)
> (From update of attachment 236898 [details] [edit])
> v3 doesn't really work with very dark OS themes. (see last one in attachment
> 237109 [edit])
> 

The screenshots (v3) for other themes (except very dark) look much much better than the current state. It will be great if you can solve the problem for very dark themes, but even if not, we should definitely land this patch. 

Even for very dark themes, this patch looks better than the current state, if not perfect. 

And this will solve the problem I just filed in Bug 351790

Comment 25

[Peter Kasting]

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

Comment 26

[Dão Gottwald [:dao]]

There are some new end caps that look much better. They are still not perfect (aliased corners), but it's less visible due to the lower opacity. I think it's good enough and I doubt it will be changed again in this bug.

Comment 27

[Dão Gottwald [:dao]]

(In reply to comment #26)
The final images are even better (close to v2, actually).
-> fixed