Need improved styling for Popup blocking UI on Mac

RESOLVED FIXED in Firefox 2 beta2

Status

()

defect
RESOLVED FIXED
13 years ago
13 years ago

People

(Reporter: marcia, Assigned: jgoldman)

Tracking

({fixed1.8.1, regression})

2.0 Branch
Firefox 2 beta2
PowerPC
macOS
Points:
---
Dependency tree / graph
Bug Flags:
blocking-firefox2 +

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [mustfix][Fx2 theme change])

Attachments

(7 attachments, 1 obsolete attachment)

Seen on today's bon echo build - Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.1a3) Gecko/20060607 BonEcho/2.0a3

I couldn't find an existing bug for this, so filing it now per beltzner. The popup blocking UI needs to be styled for the Mac (both font and color).
This was a regression from the changes made in bug 268590. CCing Neil who made the patch.
Blocks: 268590
Keywords: regression
Flags: blocking-firefox2+
What colours should it use? The older notification bar was in a white bubble, but the new one has three different types, info, warning and critical which appear in different colours.
cc'ing some of the visual dudes to get their input, too.

Right now the grey background makes the area look disabled. I think we should be running with something along the lines of the following colour scheme:

Info:     light blue/grey based on the default button colour from aqua
Warning:  yellow
Critical: red

I'd agree with Beltzner's assessment - the current bar looks disabled and doesn't really grab my attention, and generally speaking those are good colours to use. I might simplify and just pick a standard light blue rather than grabbing the default colour from aqua.

I hesitate to rely on colour coding only since some users with colour-deficiencies might miss out on the differentiation between levels - does the (!) icon on the far left change to different icons depending on the severity of the message or is colour the only differentiator?
I was pretty sure that the icon did change, but now can't remember seeing it. Neil, do you have a testcase we can use for the three levels?
The icon is specified by the caller; no default icons are built-in to the notification widget.

Testcase at http://www.xulplanet.com/ndeakin/tests/xts/notification/notificationbox-simple.xul
We can do a little styling on them as part of our work on the theme. I think we need some more muted colours (the red's a little intense). Is there a mechanism in place that would allow default icons if the caller doesn't specify one? We can add Info, Warning, and Critical icons to the full set (likely just based on the native icons for the same levels).
Target Milestone: --- → Firefox 2 beta2
Does someone need to answer Jay's question in Comment 7 in order to move forward with this?
This will be part of the new theme implementation (adding dependency)
Depends on: 328065
Whiteboard: [mustfix]
Blocks: 328065
No longer depends on: 328065
--> mglenn as per comment 7

Jay, I don't know if there's a way to add icons such that they'll be overridden. For now let's focus on getting colours for the various backgrounds and touching up the existing icons that we ship (if there's time).

Neil, what are the existing icons that we ship? And where should the guys be looking to set the colours for the various priorities in all the OSes?
Assignee: beltzner → mglenn
Status: NEW → ASSIGNED
Whiteboard: [mustfix] → [mustfix][Fx2 theme change]
Assignee: mglenn → jgoldman
Status: ASSIGNED → NEW
Neil - can we get an answer to Comment #10? Thanks!
Status: NEW → ASSIGNED
The changes should be in global/notification.css

There are three styles, warning (the default), info and critical. I just noticed that we should be setting the text colour as well:

notification {
  background-color: InfoBackground;
  color: InfoText;
}

notification[type="info"] {
  background-color: -moz-Dialog;
}

notification[type="critical"] {
  background-color: red;
}

The notification supports icons set by the caller and doesn't use any default.
A couple of mockups for how to style this for Pinstripe are attached. Thoughts? 
I believe 1.5 had rounded UI on the mac.  was this change intentional?
I've added a screenshot of 1.5 (Mac OS X) displaying a message for reference. It is definitely rounded, though the bar as presented in the builds of Fx2 is straight across the top. I don't have a big preference either way, though I think the scrollbar top looks a bit awkward in 1.5 because it stops below the notification box with no clear end. We could still apply the gradient to the rounded box as well.
The reason that the bar isn't rounded in FF2 is because Neil regressed it in his patch for bug 268590. ;)

I like the rounded edges, for what it's worth.
This looks okay to me, much improved over what was there. I do like the rounded edges ala 1.5, but as Asa pointed out that makes it look more like it is part of the page. To offset the warning, it probably looks best the way Jay has it styled now.
(In reply to comment #18)
> I've added a screenshot of 1.5 (Mac OS X) displaying a message for reference.
> It is definitely rounded, though the bar as presented in the builds of Fx2 is
> straight across the top. I don't have a big preference either way, though I
> think the scrollbar top looks a bit awkward in 1.5 because it stops below the
> notification box with no clear end. We could still apply the gradient to the
> rounded box as well.

On colours & gradients ...

 - what's the reason for using them, other than 'cause we can?
 - the red/yellow gradients start out too light; the more subtle looking gradient in the blue seems better to my eye
 - the yellow colour is a little gray; maybe use the same yellow as mail.app uses for the "Unable to verify signature" error?
 - the red colour looks a little light; maybe the same red you're using for the privacy pref icon's "Do Not Enter" is probably where we want to take our cue

On rounded corners ...

 - mail.app uses no border whatsoever, and I actually think that's the cleanest way of dealing with this
 - if we need to have a 1px border on it, rounding the corners slightly would be OK; the real problem with the 1.5 implementation is that there's a bunch of whitespace around the "bubble" which makes it look like it's floating in the page, not tacked on to the top.
We were doing gradients mostly because we can, but also because they looked good with the rest of the UI. I think the flat colours are better because they draw more attention to the messages and less to the styling. This is also the yellow from the Mail.app bar.
Attachment #233474 - Flags: review?
Attachment #233474 - Flags: review? → review?(beltzner)
Attachment #233474 - Flags: review?(beltzner) → ui-review?(beltzner)
Comment on attachment 233474 [details]
Updated proposal for styling notifications

Thanks, Jay. My blackberry thinks these look lots better.
Attachment #233474 - Flags: review+
Comment on attachment 233474 [details]
Updated proposal for styling notifications

I like, except the red on pale red will possibly hurt a11y, so make sure the contrast is good, and ask aaronlev tomorrow, but this is the right approach in general.
Attachment #233474 - Flags: ui-review?(beltzner) → ui-review+
Firefox doesn't seem to ever set the type of notification to any other than warning, so we weren't able to figure out how to test info and critical. It would be better to set the level appropriately where required (e.g.: blocking images from loading that were specifically blocked is likely info rather than warning, installing add-ons might best be left warning).
Jay, see Comment 6 for the testcase.
Attachment #233886 - Flags: review?(jgoldman) → review+
landed the last patch on branch
Keywords: fixed1.8.1
Attachment #233886 - Flags: approval1.8.1+
Status: ASSIGNED → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.