Last Comment Bug 632252 - The find bar should be visually styled to match the add-ons bar
: The find bar should be visually styled to match the add-ons bar
Status: RESOLVED FIXED
:
Product: Firefox
Classification: Client Software
Component: Theme (show other bugs)
: unspecified
: All Windows 7
: -- normal (vote)
: Firefox 10
Assigned To: Dão Gottwald [:dao]
:
Mentors:
: 631884 (view as bug list)
Depends on: 599215
Blocks:
  Show dependency treegraph
 
Reported: 2011-02-07 17:24 PST by Alex Faaborg [:faaborg] (Firefox UX)
Modified: 2011-11-04 22:24 PDT (History)
19 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
patch (1.87 KB, patch)
2011-02-08 04:44 PST, Dão Gottwald [:dao]
felipc: review+
Details | Diff | Splinter Review
patch (1.91 KB, patch)
2011-02-10 04:30 PST, Dão Gottwald [:dao]
shorlander: ui‑review-
Details | Diff | Splinter Review
Bottom Bars (101.12 KB, image/jpeg)
2011-02-16 11:43 PST, Stephen Horlander [:shorlander]
no flags Details
work in progress (4.38 KB, patch)
2011-02-18 05:01 PST, Dão Gottwald [:dao]
no flags Details | Diff | Splinter Review
work in progress (4.44 KB, patch)
2011-02-18 05:02 PST, Dão Gottwald [:dao]
no flags Details | Diff | Splinter Review
patch (4.35 KB, patch)
2011-09-28 12:22 PDT, Dão Gottwald [:dao]
shorlander: review+
Details | Diff | Splinter Review

Description Alex Faaborg [:faaborg] (Firefox UX) 2011-02-07 17:24:11 PST
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 1 Tyler Downer [:Tyler] 2011-02-07 21:40:28 PST
*** Bug 631884 has been marked as a duplicate of this bug. ***
Comment 2 Dão Gottwald [:dao] 2011-02-08 04:44:20 PST
Created attachment 510566 [details] [diff] [review]
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 me!) 2011-02-08 14:00:06 PST
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 me!) 2011-02-08 14:04:20 PST
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] 2011-02-08 14:07:06 PST
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] 2011-02-08 14:13:11 PST
Another option might be:

background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0), @toolbarHighlight@ 20px);
Comment 7 :Felipe Gomes (needinfo me!) 2011-02-08 14:30:40 PST
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) 2011-02-09 14:33:40 PST
>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 2011-02-10 02:21:45 PST
(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] 2011-02-10 04:30:02 PST
Created attachment 511349 [details] [diff] [review]
patch

with the change from comment 6
Comment 11 Alex Faaborg [:faaborg] (Firefox UX) 2011-02-10 15:05:25 PST
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] 2011-02-15 13:28:44 PST
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) 2011-02-15 16:03:06 PST
Stephen has some newer mockups now than the one in comment #11
Comment 14 Stephen Horlander [:shorlander] 2011-02-16 11:40:58 PST
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] 2011-02-16 11:43:19 PST
Created attachment 512872 [details]
Bottom Bars

- Flat toolbar color
- Subtle toolbar separator
Comment 16 Dão Gottwald [:dao] 2011-02-18 05:01:10 PST
Created attachment 513435 [details] [diff] [review]
work in progress

This is entirely untested, it may not work at all.
Comment 17 Dão Gottwald [:dao] 2011-02-18 05:02:15 PST
Created attachment 513436 [details] [diff] [review]
work in progress

(still not tested)
Comment 18 Theodore 2011-05-14 20:31:49 PDT
This will update the style for the Sync error bar as well, right?
Comment 19 Siddhartha Dugar [:sdrocking] 2011-07-22 06:05:01 PDT
Please fix this sooner.
Comment 20 Dão Gottwald [:dao] 2011-09-28 12:22:05 PDT
Created attachment 563141 [details] [diff] [review]
patch
Comment 21 Marco Bonardo [::mak] 2011-10-03 08:01:58 PDT
https://hg.mozilla.org/mozilla-central/rev/ceb9e5cad736

Note You need to log in before you can comment on or make changes to this bug.