337725 - Increase the size of the drop-down target for the search engine selection drop-down in the toolbar searchbox on Mac OS X

Status: RESOLVED FIXED

(Firefox :: Search, enhancement)

Description

[Joe Hughes]

Because of the lack of a rectangle border, the little triangle that you need to click to get to the search engine selection drop-down looks very small on the Mac.  (The hit area is much larger, but it's hard to tell where it ends and the one for the search "Go" button begins.)  The visual target should be enlarged somehow.

Comment 1

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

I'll whip together some better art that fits within the mac oval for beta1 even if we don't get the visual refresh pieces entirely squared away by then. Chris Beard has identified this as a must-have for the first beta.

Comment 2

[Mike Connor [:mconnor]]

needs-art+

Comment 3

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

Steven, can you tell we're getting our B1 ducks in a row today? You're getting cc'd left, right and centre! :) Just wondering if you might be able to take a peek at this and work something better up for a short term time frame in advance of bug 328065 which isn't scheduled to land until B2.

Bigger triangle, bigger hit area, or maybe even make it look more like the "Go" button by putting the glass and triangle in a grey-oval? You'll probably have better ideas.

Comment 4

[Steven Garrity [:sgarrity]]

Yeah, I was getting annoyed by this exact issue using Alpha 3 the other day. I wasn't sure if there was a difference between clicking on the search (google) icon or the down-arrow.

I'll see if I can come up with anything better - CCing Kevin Gerich on this too, since he's way better at this kind of thing than I am.

Can anyone get some screenshots of what this looks like on Mac/Windows/Linux right now?

Comment 5

[Joe Hughes]

Attachment: Mac OS X screenshot (current state)

Comment 6

[Joe Hughes]

Attachment: Linux (Gnome)

Comment 7

[Joe Hughes]

Attachment: Searchbox on Windows XP/Luna

Comment 8

[Joe Hughes]

Note that none of those screenshots shows the mouseover state--someone who has better screenshot tools will have to provide those.  The main differences are that on the Mac the magnifying glass is darker on rollover, while on Windows and Gnome you get a beveled border (including one that separates the drop-down arrow from the search button) on rollover.

Comment 9

[Steven Garrity [:sgarrity]]

What about replacing the magnifying glass icon with the search engine icon ('G', 'Y!', etc.)? Has that been considered?

Comment 10

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

(In reply to comment #9)
> What about replacing the magnifying glass icon with the search engine icon
> ('G', 'Y!', etc.)? Has that been considered?

Indeed it has. See bug 258672 comment 39 and thereabouts, and bug 335441 for more details; new comments on this topic should go to the latter of those two bugs, I think. I think I should probably add that latter as a dependency for this one, really.

Comment 11

[Kevin Gerich]

I know the search engine menu behavior is slightly different than the URLbar history dropdown, but how about drawing the search box as an autocomplete text box, and giving the button inside a treatment like to the proposed Go button?

http://kmgerich.com/archive/temp/searchwidget-mockup1.png

Comment 12

[Joe Hughes]

(In reply to comment #11)
> http://kmgerich.com/archive/temp/searchwidget-mockup1.png

That's really nice in terms of consistency and visual appeal, though it seems to make the go and search buttons appear less button-like and more like status indicators.  (That's already proven to be an issue with the RSS icon in the url bar.)

Comment 13

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

(In reply to comment #11)
> I know the search engine menu behavior is slightly different than the URLbar
> history dropdown, but how about drawing the search box as an autocomplete text
> box, and giving the button inside a treatment like to the proposed Go button?

I like the screenshot; it looks really clean, but the difference in behaviour between the two drop-downs would be extremely discordant. For one, clicking the drop-down button would let me pick from history, for the other, it wouldn't.*

Maybe we're looking at this the wrong way around. What if we tried to combine the search engine logo with the button?

(* I think the reason it works OK in windows right now is that it doesn't look like a standard drop-down/autocomplete widget, but rather, like some special kind of button)

Comment 14

[Wayne Woods]

When this is redeisgned, I think care needs to be given to delineate between the search button (magnifying glass) and the menu triangle. Currently it looks like they're the same button, which makes it intuitive (but wrong) to click on the magnifying glass to pop up the menu. The Windows version achieves this much better.

(Personally, I think the old system was more intuitive as well as more efficient of space. Just add a triangle to the search plugin icon to ensure users know it's a menu button)

Comment 15

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

For beta 1, can we just use the larger dropmark from the URL bar to increase the target size on this window? That addresses the immediate issue on OS X and buys us a bit more time for this seemingly endless debate :)

Comment 16

[Joey Minta]

Attachment: use different icon

This patch flips us to use the folderarrow.png picture that's normally used in bookmarks for open folders.  I think this is what was asked for as a temporary measure.  Screenshot to follow.

Comment 17

[Joey Minta]

Attachment: screenshot

Screenshot of the searchbar with this change

Comment 18

[Joey Minta]

Comment on attachment 226870 [details] [diff] [review]
use different icon

Patch landed on trunk.  Asking for 1.8.1 approval as this is extremely minimal risk.

Comment 19

[Mike Schroepfer]

This is a beta1 solution, for beta2 we'll have some new theme stuff that will make it better.

Comment 20

[Joey Minta]

Comment on attachment 226870 [details] [diff] [review]
use different icon

This patch has been landed on 1.8 now.  Leaving bug open for the beta2 work.

Comment 21

[Jesse Ruderman]

Mac trunk doesn't have a chrome://browser/skin/bookmarks/folderarrow.png, so this change made the search engine selection dropdown disappear entirely.

Comment 22

[Joey Minta]

(In reply to comment #21)
> Mac trunk doesn't have a chrome://browser/skin/bookmarks/folderarrow.png, so
> this change made the search engine selection dropdown disappear entirely.
> 
Bug 342789

Comment 23

[Mike Connor [:mconnor]]

We're changing the binding to fix this, dumping to beltzner's list until we figure out how to structure the theme/visual change bug hierarchy.

Comment 24

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

I'm going to mark this as FIXED, but leave this note to bug 345407 which is the bug for the new theme / visual refresh for the Search Bar which will really hammer the solution home.