632252 - The find bar should be visually styled to match the add-ons bar

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Alex Faaborg [:faaborg] (Firefox UX)]

We currently have two bottom bars that have different visual styles.  Particularly on Windows this looks unintentional, with one being a light grey, and the other blue.

Comment 2

[Dão Gottwald [:dao]]

Attachment: patch

This takes care of Aero Glass only, as this is the most obvious case. Alex, can you please file individual bugs with more concrete suggestions per platform?

Comment 3

[:Felipe Gomes (needinfo for replies!)]

When I talked to Shorlander I was under the impression that the find bar should be visually distinct from the add-on bar on purpose, as the addon-bar is part of the browser UI and the find bar is attached to the content.

Comment 4

[:Felipe Gomes (needinfo for replies!)]

Comment on attachment 510566 [details] [diff] [review]
patch

The gradient tones on the addonbar changes when the find bar is open because it stretches more (being part of the browser-bottombox background). Is it possible to avoid that?

Comment 5

[Dão Gottwald [:dao]]

The 20px is supposed to ensure it doesn't stretch:
    background-image: -moz-linear-gradient(@toolbarHighlight@, rgba(255,255,255,0) 20px);

But maybe it actually should stretch?

Comment 6

[Dão Gottwald [:dao]]

Another option might be:

background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0), @toolbarHighlight@ 20px);

Comment 7

[:Felipe Gomes (needinfo for replies!)]

Comment on attachment 510566 [details] [diff] [review]
patch

Yeah starting from the bottom works much better. r+ with that.

I believe it really shouldn't stretch, because it goes against the calm UI, and it would get worse if we style the Sync notifications in the same way (I'll file a bug similar to this one for the Sync UI because I think we really need it).

Alex, can you take a look on comment 3?

Comment 8

[Alex Faaborg [:faaborg] (Firefox UX)]

>When I talked to Shorlander I was under the impression that the find bar should
>be visually distinct from the add-on bar on purpose, as the addon-bar is part
>of the browser UI and the find bar is attached to the content.

If we were going for an obvious browser level/tab level distinction (like having the add-ons bar consisting of frosted glass), then making them distinct would make sense.  But if both are just styled like toolbars, I think having two different visual styles ends up looking like a mistake.  cc'ing shorlander for his opinion.

Comment 9

[Jonathan Haas]

(In reply to comment #3)
> When I talked to Shorlander I was under the impression that the find bar should
> be visually distinct from the add-on bar on purpose, as the addon-bar is part
> of the browser UI and the find bar is attached to the content.

I don't think the find bar is more attachted to the content than the addon-bar. Many add-ons like Adblock Plus, Stylish, NoScript, Greasemonkey etc. are clearly attached to the current tab, exactly as the find bar is.

Additionally, everybody knows the find bar is part of the browser UI and not part of the page content, so it should look like a browser toolbar, too.

Comment 10

[Dão Gottwald [:dao]]

Attachment: patch

with the change from comment 6

Comment 11

[Alex Faaborg [:faaborg] (Firefox UX)]

My proposed alternative style for Windows is now up here:

http://areweprettyyet.com/4/mainWindow/#bottombars

still debating the design with shorlander and beltzner though.  When users visually focus directly on the close buttons, it should be reasonably clear that there are two different rows, both due to the small horizontal line, and due to the gestalt principle of proximity (although we might need to increase the white space between the two rows a bit more before that effect is strong enough).

Comment 12

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

Comment on attachment 511349 [details] [diff] [review]
patch

I know Stephen and Alex have been thinking of how to solve this, so want them to give it UI blessing before approving.

Comment 13

[Alex Faaborg [:faaborg] (Firefox UX)]

Stephen has some newer mockups now than the one in comment #11

Comment 14

[Stephen Horlander [:shorlander]]

Comment on attachment 511349 [details] [diff] [review]
patch

This is pretty close to what I had in mind. Can the separator be more subtle? Also we should do the same flat and consistent toolbar treatment for XP. I will attach a mockup.

Comment 15

[Stephen Horlander [:shorlander]]

Attachment: Bottom Bars

- Flat toolbar color
- Subtle toolbar separator

Comment 16

[Dão Gottwald [:dao]]

Attachment: work in progress

This is entirely untested, it may not work at all.

Comment 17

[Dão Gottwald [:dao]]

Attachment: work in progress

(still not tested)

Comment 18

[Theodore]

This will update the style for the Sync error bar as well, right?

Comment 19

[Siddhartha Dugar [:sdrocking]]

Please fix this sooner.

Comment 20

[Dão Gottwald [:dao]]

Attachment: patch

Comment 21

[Marco Bonardo [:mak]]

https://hg.mozilla.org/mozilla-central/rev/ceb9e5cad736