347616 - Address Bar Dropdown Button looks odd with the new polished Go Button

Status: RESOLVED FIXED

(Firefox :: Toolbars and Customization, defect)

Description

[ronin.achilles]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1b1) Gecko/20060806 BonEcho/2.0b1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1b1) Gecko/20060806 BonEcho/2.0b1

The address bar dropdown button is still the old(native) style, while the Go button has been refreshed. Together they give a very odd look. In the mockup that was originally shown, the dropdown button looks polished and plays well with the new go button. So why hasn't the change been made (or has it been made and will land in the next few days?).

Original Mockup: http://wiki.mozilla.org/FX2_Visual_Update/Default_Theme_Update

Reproducible: Always

Comment 1

[ronin.achilles]

Attachment: Address Bar Dropdown (Native) with New Go Button

Attached a screenshot of the address bar dropdown button with the refreshed Go button.

Comment 2

[Jackie Liu]

I don't think the new theme is fully implemented yet.  There are still a few things to be expected.  So, probably the best bet is to be patient.

Comment 3

[Jay Goldman]

Attachment: Changes the autocomplete-dropmark to be an image instead of the -moz-appearence control.

Note: requires the autocomplete-history-dropmark.png and autocomplete-history-dropmark-rtl.png to be in place - see next attachment.

Comment 4

[Jay Goldman]

Attachment: Place in /toolkit/themes/winstripe/global/

Comment 5

[Jay Goldman]

Attachment: Now with jar.mn patches too!

Comment 6

[Simon Bünzli]

Is making one more element _less_ native really the way to go? How will the drop-down button look when it happens not to be precisely the size of the image (think large fonts)? See also bug 347751 for other issues with non-native UI elements. Is it really acceptable that the new theme hardly looks native to the OS anymore?

Comment 7

[Mike Connor [:mconnor]]

If the native UI option is visually unappealing, it's ok to deviate.  We're looking at the options here though.

Comment 8

[Simon Bünzli]

(In reply to comment #7)
> If the native UI option is visually unappealing, it's ok to deviate.

IANAUE but IMHO this is shaky ground, especially since there not _one_ native option to compare to but about as many as there are OS specific themes.

Comment 9

[Mike Connor [:mconnor]]

Comment on attachment 232866 [details] [diff] [review]
Now with jar.mn patches too!

So, this doesn't scale, and because of how dropmarkers work, really won't look ok.  We'll circle back around on this.

Comment 10

[Peter Kasting]

(In reply to comment #9)
> (From update of attachment 232866 [details] [diff] [review] [edit])
> So, this doesn't scale,

Also see bug 348138 (and bug 347398) on scaling issues with elements already checked in.

Comment 11

[Jay Goldman]

Reassigning to mconnor based on him telling me to do so :)

Comment 12

[Peter Kasting]

As with bug 348138, this does not block browser usage, but seems technically scary to fix (it will basically be the exact same fix).  I'd like to hear from drivers on whether that would merit doing at least a halfway fix for this in B2, but I don't want to retarget the milestone willy-nilly.  Comments?

Comment 13

[shirish]

I agree tht it doesn't stop FF 2 but as a user would like something which does scale up with big fonts & looks cooler than what it looks right now (ugly) compared to the Go button. I'm sure u guys will come up with something cool :)

Comment 14

[Peter Kasting]

CCing pamg as any solution here would probably use the same method as the one for bug 348138.

Comment 15

[Pam Greene]

Applying the stack method used for bug 348138 here to provide a nicely stretching dropmarker shouldn't be hard.  Should the changes be in toolkit/, or only in browser/?

Comment 16

[Pam Greene]

Attachment: Piecewise-stretchable background

For /toolkit/themes/winstripe/global/autocomplete-dropmark-bkgnd.png

Comment 17

[Pam Greene]

Attachment: Piecewise-stretchable arrow overlay

For /toolkit/themes/winstripe/global/autocomplete-dropmark-arrow.png

Comment 18

[Pam Greene]

Attachment: Implements stretchable, themed dropmarker

Even though this patch touches toolkit/ XML and CSS, it's pretty low-risk.  All it does is add a stack and background images to the history-dropmarker binding, which defaults to showing only the dropmarker image when (as in pinstripe) none are defined for the background.  It does push the dropmarker-image in one level, but nothing I can find cares about that.

Comment 19

[Pam Greene]

Attachment: Screenshot of stretched dropmarker

Comment 20

[Peter Kasting]

This is pretty awesome, Pam; do you have a screenshot in non-stretched mode on Luna of the old (native) dropdown versus the new (themed) one?  I'd like to make sure my feeling before that this would much improve the look of the address bar was correct.

Also, I'm concerned that the background image doesn't look alpha-blended in your stretched screenshot, while the Go button is alpha-blended; the resulting color contrast is odd.  (And of course the fact that the dropmarker stretches and the Go button doesn't still looks weird... sigh)

Comment 21

[Pam Greene]

(In reply to comment #20)
> This is pretty awesome, Pam; do you have a screenshot in non-stretched mode on
> Luna of the old (native) dropdown versus the new (themed) one?

Yes, but it'll have to wait until after the holiday weekend; sorry.  I don't have a Windows build machine at home.

> Also, I'm concerned that the background image doesn't look alpha-blended in
> your stretched screenshot, while the Go button is alpha-blended; the resulting
> color contrast is odd.

I'll make sure it's properly alpha-blended before checking it in.  Or maybe Radiant Core could provide the needed images, so we don't rely on my Photoshop skills?

Comment 22

[Jay Goldman]

(In reply to comment #21)

> I'll make sure it's properly alpha-blended before checking it in.  Or maybe
> Radiant Core could provide the needed images, so we don't rely on my Photoshop
> skills?

We sure can! Just not 100% sure what that is - which image do you need? Thanks!

Comment 23

[Mike Connor [:mconnor]]

Comment on attachment 236496 [details] [diff] [review]
Implements stretchable, themed dropmarker

r+a=me

Pam, this looks great!  If you don't have cycles for the images, please just let Jay know.

Comment 24

[Dão Gottwald [:dao]]

(In reply to comment #20)
> Also, I'm concerned that the background image doesn't look alpha-blended in
> your stretched screenshot, while the Go button is alpha-blended; the resulting
> color contrast is odd.  (And of course the fact that the dropmarker stretches
> and the Go button doesn't still looks weird... sigh)

The background is white, isn't it? Transparency won't help then (but it will look odd on secure sites).
By the way, I think the arrow shouldn't scale (at least not with Gecko 1.8 / without Cairo's anti-aliasing).

Comment 25

[Pam Greene]

(In reply to comment #22)
> > I'll make sure it's properly alpha-blended before checking it in.  Or maybe
> > Radiant Core could provide the needed images, so we don't rely on my Photoshop
> > skills?
> 
> We sure can! Just not 100% sure what that is - which image do you need?

As far as I can tell, the image I used is alpha-blended, but it has much less transparency than the other images (the Go button, for instance).  Jay, if you could provide a pair of images with transparency that looks more consistent with the other buttons, that would be helpful.  Specifically, I need an image like autocomplete-history-dropmark.png from your attachment above, but just the four background rectangles, without the arrows; and another image that has only the four arrows and their anti-aliasing on a transparent background.  I only need one pair, not a separate set for RTL.  Thanks!

Comment 26

[Pam Greene]

Attachment: Before and After screenshots

(In reply to comment #20)
> This is pretty awesome, Pam; do you have a screenshot in non-stretched mode on
> Luna of the old (native) dropdown versus the new (themed) one?

Here you go.

Comment 27

[Pam Greene]

Attachment: Fixes pinstripe and de-stretches arrow

Just enough of a change that I'd like a quick re-review, please.  This patch fixes pinstripe, which my partial build didn't properly test last time.  It also fixes the stretched arrow Dao noticed.

Comment 28

[Adam Guthrie]

Pam said it would be good if I tested this on Linux, so I did. These changes aren't being picked up since we use gnomestripe's autocomplete.css rules. Were we planning to have this on Linux, too? 

Comment 29

[Peter Kasting]

(In reply to comment #28)
> Pam said it would be good if I tested this on Linux, so I did. These changes
> aren't being picked up since we use gnomestripe's autocomplete.css rules. Were
> we planning to have this on Linux, too? 

Yes, I think so; and if you could fix bug 351195 in the process, I would love you.

Comment 30

[Pam Greene]

(In reply to comment #28)
> Pam said it would be good if I tested this on Linux, so I did. These changes
> aren't being picked up since we use gnomestripe's autocomplete.css rules.

Okay, I'll work on a Linux fix too.  Thanks for testing.

Comment 31

[Pam Greene]

Comment on attachment 236916 [details] [diff] [review]
Fixes pinstripe and de-stretches arrow

Requesting review and approval; pusing Linux fixes to followup.

Comment 32

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

Attachment: what it looks like on Linux

Here's a screenshot showing what the dropmarker looks like on Linux once the changes have been applied there as well.  I applied the changes to Linux by simply removing gnomestripe's autocomplete.css (patch in bug 351195).

Note that things look fine at a 10px application font.  But when I bump up the font to 18px, a white section appears in the middle of the dropmarker.

Comment 33

[Pam Greene]

Landing this, for Windows and Mac, on 1.8.1 branch.  Linux fixes to be covered in bug 351195 and bug 351618.

Comment 34

[Bryan]

This breaks native look and feel in Classic mode!

~B

Comment 35

[Dão Gottwald [:dao]]

The dropdown button needs to use the background-color of the toolbar.

Comment 36

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

> The dropdown button needs to use the background-color of the toolbar.

see bug #351770

Comment 37

[ronin.achilles]

(In reply to comment #35)
> The dropdown button needs to use the background-color of the toolbar.
> 

Filed a separate Bug 351905 to address this issue.

Comment 38

[Radek 'sysKin' Czyz]

This has become by far the brightest button in the UI. It's even brighter than the yellow background used in secure sites. Using XP/classic.