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

RESOLVED FIXED in Firefox 2

Status

()

Firefox
Toolbars and Customization
RESOLVED FIXED
12 years ago
12 years ago

People

(Reporter: dao, Unassigned)

Tracking

unspecified
Firefox 2
x86
Windows XP
Points:
---
Bug Flags:
blocking-firefox2 -

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [Fx2 theme change])

Attachments

(7 obsolete attachments)

(Reporter)

Description

12 years ago
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
(Reporter)

Updated

12 years ago
Blocks: 347454
Whiteboard: [Fx2 theme change]
(Reporter)

Comment 1

12 years ago
Created attachment 236539 [details]
new Go, Search and Search provider images v1
Attachment #236539 - Flags: review?(mconnor)
(Reporter)

Comment 2

12 years ago
Created attachment 236540 [details]
screenshot before / after overhaul
(Reporter)

Comment 3

12 years ago
Created attachment 236541 [details]
screenshot before / after overhaul (classic)
(Reporter)

Comment 4

12 years ago
(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
(Reporter)

Updated

12 years ago
Flags: blocking-firefox2?

Comment 5

12 years ago
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.
Target Milestone: --- → Firefox 2
(Reporter)

Comment 6

12 years ago
(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.
(Reporter)

Comment 7

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

canceling review request due to open issues.
Attachment #236539 - Flags: review?(mconnor)
(Reporter)

Comment 8

12 years ago
(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.

Updated

12 years ago
Component: General → Toolbars
QA Contact: general → toolbars

Comment 9

12 years ago
(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?
(Reporter)

Comment 10

12 years ago
(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.
(Reporter)

Comment 11

12 years ago
Created attachment 236579 [details]
new Go, Search and Search provider images v2
Attachment #236539 - Attachment is obsolete: true
Attachment #236540 - Attachment is obsolete: true
Attachment #236541 - Attachment is obsolete: true
Attachment #236579 - Flags: review?(mconnor)
(Reporter)

Comment 12

12 years ago
Created attachment 236580 [details]
v2 screenshots
(Reporter)

Comment 13

12 years ago
(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.
(Reporter)

Comment 14

12 years ago
(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.
(Reporter)

Comment 15

12 years ago
(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
(Reporter)

Comment 16

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

Comment 17

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

Comment 18

12 years ago
(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 :)
Status: UNCONFIRMED → NEW
Ever confirmed: true
This seems like aesthetic twiddling which won't garner a clear consensus, and we're not going to block on that sort of debate.
Flags: blocking-firefox2? → blocking-firefox2-
(Reporter)

Comment 20

12 years ago
(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.
(Reporter)

Comment 21

12 years ago
Created attachment 236898 [details]
Go, Search and Search provider images v3
Attachment #236579 - Attachment is obsolete: true
Attachment #236580 - Attachment is obsolete: true
Attachment #236579 - Flags: review?(mconnor)
(Reporter)

Comment 22

12 years ago
Created attachment 236901 [details]
v3 screenshots
(Reporter)

Updated

12 years ago
Attachment #236898 - Flags: review?
(Reporter)

Comment 23

12 years ago
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])
Attachment #236898 - Attachment is obsolete: true
Attachment #236898 - Flags: review?

Comment 24

12 years ago
(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

12 years ago
*** Bug 351790 has been marked as a duplicate of this bug. ***
(Reporter)

Comment 26

12 years ago
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.
Status: NEW → RESOLVED
Last Resolved: 12 years ago
Resolution: --- → WORKSFORME
(Reporter)

Comment 27

12 years ago
(In reply to comment #26)
The final images are even better (close to v2, actually).
-> fixed
Status: RESOLVED → REOPENED
Resolution: WORKSFORME → ---
(Reporter)

Updated

12 years ago
Status: REOPENED → RESOLVED
Last Resolved: 12 years ago12 years ago
Resolution: --- → FIXED
(Reporter)

Updated

12 years ago
Attachment #236901 - Attachment is obsolete: true
You need to log in before you can comment on or make changes to this bug.