423740 - use OS X platform-compatible colors for notification bars

Status: VERIFIED WORKSFORME

(Firefox :: Theme, defect)

Description

[Madhava Enros [:madhava]]

The current notification bar colors don't fit with the OS X platform colors.

Suggestions for revised coloring to come.

Comment 1

[Madhava Enros [:madhava]]

Attachment: colour suggestions

Comment 2

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

I don't think I have ever seen the yellow, so I'm not sure that is the best way to integrate with the platform.  Also, the mail.app notification bars already break apple's HIG with their use of aqua buttons, so I don't think we should consider those great source material.

Comment 3

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

Attachment: purple in mail.app

This is a nice cold color that could work well, although potentially isn't saturated enough.

Comment 4

[Madhava Enros [:madhava]]

Attachment: a purple take on the warning-level notification bar

Comment 5

[Stephen Horlander [:shorlander]]

I could use some clarification on some things.

Currently in the CSS there are rules for: Info, Warning and Critical. These are the three types of notification bars? What is "Fail" referencing?

I have seen Info and Warning but never Critical(currently colored red in the theme). Does anyone have an example of this?

In addition to that are these bars supposed to be generic? Meaning right now the "Remember Password" bar is an example of an Info notification bar. Are there other bars that would be styled as Info bars? If so it would need CSS rules. At present I think the images are hardcoded because they are not in the CSS. 

Which means if I were to replace Info.png, which is used in the "Blocked Popup" bar, then it would replace it everywhere.

Comment 6

[Stephen Horlander [:shorlander]]

Ok, you can ignore my question about "Fail". Fail = Critical. For suspected forgery sites?

In which case I think using black/grey would be a mistake. I think we should stick with red. In the Finder the charcoal bar is actually used for things that are informative. The example is "Trash" so you know the folder is the trash folder and not just any folder. It is also used to indicate Shared Folders so you know whatever you put there is shared. Charcoal doesn't really scream critical to me.

I also think the warning bar would best be as yellow. Yellow is already a pretty standard color for warning as the OS X warning icon is yellow. Purple doesn't really say warning to me. Certainly it doesn't observe a known system standard for that. I think it would be better to stick to a known color used in that context. It would also keep it fairly consistent across platforms with only varying hues.

Comment 7

[Madhava Enros [:madhava]]

Yes - "fail" should be "critical."  The slang somehow replaced the real term in my head.

I'll defer to your judgement on the matters of using red vs. black/grey and yellow.  Is there a dark red that we can draw from OSX somewhere?

Comment 8

[Stephen Horlander [:shorlander]]

Attachment: Default OS X notification icons

Comment 9

[Stephen Horlander [:shorlander]]

Attachment: Potential OS X Notification Bars

The first linked attachment(https://bugzilla.mozilla.org/attachment.cgi?id=311482&action=edit) contains the equivalent default OS X icons for Info, Warning and Critical.

I think we should just use those colors. Or shades of them as I have mocked up here. The blue was too dark so I lightened it and I darkened the red a bit but overall they are close.

Comment 10

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

I like the yellow and red bars in that mockup, but I'm not as sure about the blue one.  Perhaps for the notification state we should try something a little more muted, like white, grey or black?  If we want to use blue, perhaps a gradient like the selected item in sidebars, since the dark hues seem to fit into the overall OS theme better.

Comment 11

[Stephen Horlander [:shorlander]]

I like the idea of using black/grey instead of blue. It would also be in line with the Finder.

Comment 12

[Stephen Horlander [:shorlander]]

Attachment: Potential OS X Notification Bars

With a black bar.

Comment 13

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

Attachment: Notification bar inside a dialog box?

Is this a notification bar inside of a dialog box?

Comment 14

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

Comment on attachment 311730 [details]
 Potential OS X Notification Bars

Yeah, this is good. I think to go lighter on the black bar would make it start to clash with the tabstrip and toolbar above.

Comment 15

[Stephen Horlander [:shorlander]]

Attachment: Updated Blocked Pop-up Glyph

Would this still fall under ui-r+ from https://bugzilla.mozilla.org/attachment.cgi?id=311730?

Comment 16

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

This was resolved by Kevin and Stephen when they were working on Proto for Firefox 3.

Comment 17

[Henrik Skupin [:whimboo][⌚️UTC+1]]

As long as we don't exactly know witch patch fixed this issue we have to mark this bug as WFM.