348442 - Use native toolbar buttons for the navigation toolbar

Status: RESOLVED FIXED

(Firefox :: Toolbars and Customization, defect)

Description

[Simon Bünzli]

(Spin off from bug 347416 comment #11)

The main toolbar buttons (of CSS class toolbarbutton-1) should behave as platform native toolbar buttons. This was the first requirement for the visual update as listed at http://wiki.mozilla.org/FX2_Visual_Update/Default_Theme_Update .

Current issues:
* only a faint hover effect (the buttons don't look raised)
* no real "pressed" state (the buttons' images don't move/sink in)
* smaller mouse target (less padding to the sides)

All in all, under Windows (and possibly Linux as well) those buttons don't look native and - as a consequence - don't feel native, either. In fact, IMO they look and feel quite Mac-ish.

Related bugs: bug 347412, bug 347447, bug 347432, bug 347692.

Comment 1

[Dave Townsend [:mossop]]

Just for comparison, in IE 7 the main navigation bar buttons have no bevel. In Opera 9 they have a non-3d hover effect, basically a border and changed background colour.

Comment 2

[Simon Bünzli]

Note that this bug also has consequences for extension authors who want to seamlessly add toolbar buttons: they are currently required to ship at least three images (normal, hovering, pressed) instead of one - which can be a major PITA for graphically challenged coders.

Comment 3

[Simon Bünzli]

(In reply to comment #1)
OTOH, most IE7 buttons continue to look&feel native (everything below the main navigation bar, which isn't even a real toolbar - but that's a different issue). And just because IE7 gets it wrong doesn't mean that we also have to. ;) In fact, as long as Firefox otherwise doesn't look Vista-ish (by having the navigation elements above the menu bar), I'd not try to specifically mirror the (still unreleased) IE7.

And Opera is known for not being too native.

Comment 4

[Jez]

Taking the bevel away seems dumb.  IE6 navigation buttons do have a bevel.  How is the current Winstripe theme 'non-native', exactly?

Talking about IE7 is dumb because
1) it isn't out yet
2) its look+feel will probably be designed with Vista in mind.

Designing all Windows releases to look good in Vista is stupid because virtually nobody uses it yet, and even if they did, it still looks dumb compared to the vast majority of XP apps.  Why not detect the Windows version and decide based on that if you're so desperate to change things (although I don't understand how a bevel is not Windows native).

Comment 5

[Dão Gottwald [:dao]]

I'd care less if the bevel effect would be removed for the theme's buttons only and if the graphics looked clearer. I.e. IE7's Back & Forward buttons do a much better job here, imho:

(In reply to comment #0)
> * only a faint hover effect (the buttons don't look raised)
> * no real "pressed" state (the buttons' images don't move/sink in)

Comment 6

[:Gavin Sharp [email: [e-mail]]]

(In reply to comment #5)
> I'd care less if the bevel effect would be removed for the theme's buttons only

That's bug 347416.

Comment 7

[Bill Gianopoulos [:WG9s]]

A lot of what is being complained about here could be argued to be a personal preference issue.  However, the too small mouse target issue is a serious usability issue particularly at higher screen resolutions.

I use the dropdown menu form the back button a  lot. Therefore,  to put it succinctly the browsser is just plain unusable for me with this theme.

Comment 8

[Mike Connor [:mconnor]]

FWIW, the target area isn't that different, it just appears smaller, there's clickable areas above/below the outline.

Comment 9

[Bill Gianopoulos [:WG9s]]

(In reply to comment #8)
> FWIW, the target area isn't that different, it just appears smaller, there's
> clickable areas above/below the outline.
> 

So there is.  Didn't think to even try.  Sorry for bad info and extra bug spam.

Comment 10

[Simon Bünzli]

(In reply to comment #8)
> FWIW, the target area isn't that different, it just appears smaller, there's
> clickable areas above/below the outline.

True, but there isn't to the right/left making the buttons unnecessarily smaller and causing the back button to not touch the left screen border any longer when the window is maximized.

Comment 11

[Peter Kasting]

(In reply to comment #8)
> FWIW, the target area isn't that different, it just appears smaller, there's
> clickable areas above/below the outline.

People will try to target what appears to be the clickable area, so if it appears dramatically smaller, they'll try very hard to target it and feel frustrated even though they don't actually need to.

At least, this is my experience with the new buttons and with similar sorts of targeting issues in the past.

Comment 12

[Peter Kasting]

Ultimately, I'm not sure what removing the bevels on the navigation buttons buys us (for winstripe/gnomestripe).

We can reasonably draw them without looking bad (like we currently do) by doing something like bug 347447 comment 9/bug 347447 comment 11.  This would make their function clearer, make targeting easier, and allow us to be more platform-native.

Or we can not do bevels, which gets us... I'm not sure what.

Comment 13

[ronin.achilles]

(In reply to comment #12)
> Ultimately, I'm not sure what removing the bevels on the navigation buttons
> buys us (for winstripe/gnomestripe).
> 
> We can reasonably draw them without looking bad (like we currently do) by doing
> something like bug 347447 comment 9/bug 347447 comment 11.  This would make
> their function clearer, make targeting easier, and allow us to be more
> platform-native.
> 
> Or we can not do bevels, which gets us... I'm not sure what.
> 

I assume the bevels were removed to give a smooth/sleek look but frankly I can't really judge as to how much have we succeeded in doing that. 

Anyways, I just observed in WMP 11, that while the buttons themselves are flat, the bevels around buttons are glossy and have 3D look. My point here is that maybe we could have bevels will transparency here which will give a nice sleek 3D look (like the Go and Search buttons... but only upon hover; not persistently). That way, we can make it easy for the user to target the buttons, maintain the native look and yet make the whole thing look sleek/glossy/3Disque.

Screenshots coming.

Comment 14

[ronin.achilles]

Attachment: Glossy Bevels

Screenshots representing what I meant in previous comment.

I also realized that we are already doing something very similar on the Back/Forward dropmarkers.

Comment 15

[Ria Klaassen (not reading all bugmail)]

For me the bevel on hover is only a sign that I hit a button, not more or less than that. I hardly see what it looks like and therefore it does not influence the looks of the theme at all. That's why it took me quite some days to discover that the bevels were gone, I only had the vague feeling that "something was wrong".

Comment 16

[Rob Marshall [tH]]

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

Comment 17

[Sebastian Moser]

I have problems with the new behavior, because it makes it more difficult to be sure weather a button is hovered or not. the little change in the graphic is too little, I think.

Also, there is a confusion with the bookmarks toolbar, the bookmarks-manager, which still are native.

But primarily, this bug should be solved, because "feeling native" was one of the requirements of the new theme.
As much as I appreciate the efforts for this new theme, and as much as I really like all the icons and ideas and so, this is a bug that I think really has to be solved.

Don't make the same mistake like the Flock people (they have this non-native, non-bevel-toolbar-buttons, too)

Comment 18

[Bryan]

(In reply to comment #1)
> Just for comparison, in IE 7 the main navigation bar buttons have no bevel. 

IE7 does in classic mode!

~B

Comment 19

[Matt Leidholm]

For a completely fair comparison, you need to note that IE7's main navigation icons look like buttons to begin with. They actually did a very good job with fwd/back: they just beckon to be pushed. The icon-type toolbar items *do* use the native bevel, because that's what users expect; and that's what users will expect from our toolbar icons as well.

Besides, using a slight opacity/saturation change to indicate hover isn't as good for accessibility (it can be difficult to spot, even with perfect eyesight). I'm definitely for returning the bevel to it's rightful place on the toolbar.

Comment 20

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

We've asked the Radiant Core guys to do us up a set of the icons without the drop-down hover effect for the back/forward button so that we can return to using native bevels on XP. 

Comment 21

[Jez]

Hum, now who do I remember suggesting retaining the native bevels again...?

As for 'on XP', I think you should do it on Vista as well.  What does IE7 do *on Vista* for the icon-type toolbar icons (which all of Firefox's toolbar icons are styled similarly to)?

Comment 22

[Jez]

(In reply to comment #19)
> For a completely fair comparison, you need to note that IE7's main navigation
> icons look like buttons to begin with. They actually did a very good job with
> fwd/back: they just beckon to be pushed.

I remember this from the days of Windows 3.1.  It's just a permenant bevel, styled to look better.

Toolbar buttons are buttons, that's why they're called buttons.  Real life buttons have depth, or you wouldn't be able to push them.  So should GUI buttons.  The basic choice you have is permanent bevel (apparently MS's latest GUI fad so FF just has to copy it) or mouseover-bevel, which all previous versions of FF use.  No bevel, though, just looks silly and unintuative.

Comment 23

[Sebastian Moser]

(In reply to comment #20)
> We've asked the Radiant Core guys to do us up a set of the icons without the
> drop-down hover effect for the back/forward button so that we can return to
> using native bevels on XP. 

I think the current handling of the prev/next-buttons is great - would there be a way to style them similar to what we have now, but native? (or is this dropped with using native bevels?)

Comment 24

[Mike Connor [:mconnor]]

In sync with the bevels, the pill looks really ugly, sadly.  I liked it a lot, but not enough to hold on to no bevels.

Jeremy, there's no need to be a dick.  Plenty of people expressed that desire, without the consistent attitude and arrogance you and a few others shared.  It was an experiment that we felt was worth trying, and while it didn't work as well as we hoped, if we don't try these things, we end in stagnation.

Comment 25

[Jez]

Was I being a 'dick'?  If you say so.  You lot are too thin-skinned.  We were just saying what we thought the general users would think of it, and unsurprisingly we are quite keen to see FF's next major release not be a visual disaster.

Comment 26

[Mike Connor [:mconnor]]

"Hum, now who do I remember suggesting retaining the native bevels again...?" is being a dick, in my books, like pretty much every other form of "I told you so."  It has nothing to do with thin/thick skin, it has to do with calling it like I see it.

Anyway, this should be fixed now.  Please file bugs (and nominate for blocking) on any cases I may have missed.