348633 - [mac] New Search UI doesn't look right

Status: RESOLVED FIXED

(Firefox :: Search, defect)

Description

[Marcia Knous [:marcia]]

Seen using Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.1b1) Gecko/20060814 BonEcho/2.0b1.

The new quicksearch UI doesn't look right to me.  They changed the behavior so when you click on the favicon it turns into a hover state, but the outline of that field is very faint on my PPC Mac. To me it also looks jarring to not have the outline present all the time. Screenshots coming.

Comment 1

[Marcia Knous [:marcia]]

Attachment: Screenshot of today's build, with favicon area in hover state.

Comment 2

[Marcia Knous [:marcia]]

Attachment: Screenshot of 080906 build, with quicksearch bar all attached.

Comment 3

[Pam Greene]

I agree, the images don't look like they're attached to the searchbar very well.  Perhaps the art could be adjusted to strengthen the connection between the two?

Comment 4

[Marcia Knous [:marcia]]

nominating to get this on the radar.

Comment 5

[Pam Greene]

Attachment: Mockup of possible changes

Here's a mockup of possible changes, with two options.  

Both options add a beveled border on the right and left ends of the text area (achieved by reverse bevels on the button images), to match the ones on the top and bottom and the one at the end of the urlbar.  

On one option, the second change is a slight darkening of the rounded edges on all three buttons, so they meet the dark top borders more smoothly but still look convex to fit with the other toolbar buttons.  (They're not very smoothly darkened in my version, because I'm not a very skilled artist.)

On the other, the rounded edges are also darkened, but here they're flipped vertically so they merge with the borders and look firmly attached to the text boxes.

Comment 6

[Jay Goldman]

(In reply to comment #5)

> On one option, the second change is a slight darkening of the rounded edges on
> all three buttons, so they meet the dark top borders more smoothly but still
> look convex to fit with the other toolbar buttons.

This is definitely my preferred of the three - we didn't intend to have the buttons look like they were inside the field, which the third mockup looks like to me. If that's what everyone else agrees to, I can whip up smoother graphics.

(I think you're an excellent artist Pam!)

Comment 7

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

Option #2 is great, I'd been wondering about this myself (was gonna give it another day to see if I got used to it) and I agree with Jay; these mockups are great!

Comment 8

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

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

Comment 9

[Marcia Knous [:marcia]]

I also agree that Option 2 is the best one of the choices. Thanks for the work Pam.

Comment 10

[mark]

all applications on mac have one concrete style. the same should use firefox. like it was. would look more native

Comment 11

[Jay Goldman]

Attachment: Pintstripe end cap replacement images

This should be what we're looking for - Pam: let me know if you need anything else.

Comment 12

[Pam Greene]

Attachment: Screenshots showing bevels

Thanks, Jay, those are great.  I did try one thing, adding bevels to the inner edges of the endcaps so that the searchbar text area is fully beveled the same way the urlbar is.  (The urlbar does that with CSS, but the searchbar can't, so this little hack is needed.)

The three screenshots in this image show the current build, a build with Jay's new images, and a build with images that include the bevels.  Beltzner, if you'll make a call, I'll check 'em in.

Comment 13

[Jay Goldman]

Pam - we're going to revisit the images again to see if we can be more Mac OS X like so I would say hold off on this for a bit before we commit anything. Thanks!

Comment 14

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

Comment on attachment 237142 [details]
Screenshots showing bevels

Pam: let's go with "beveled"; as Jay said, we're looking at removing the 3d effect on the endcaps, but if we don't manage to get to that, what you're showing here is a clear improvement over the "before" image.

thanks!

Comment 15

[Pam Greene]

Attachment: Images as landed

Landing new images on 1.8.1 branch:

Go.png from attachment 236754 [details]
Search-go.png from its Search.png, plus bevels
Search-provider-bkgnd.png from its image, plus bevels

Comment 16

[mark]

regression 351937