818017 - Sync changes in global/alerts/alert.css from Toolkit (Adjust styling of nsIAlertService alert windows).

Status: RESOLVED FIXED

(SeaMonkey :: Themes, defect)

Description

[Philip Chee]

Rollup of changes from:
Bug 769095. Enforce maximum icon size for nsIAlertsService's notification.
Bug 770433 - Update borders and background of alert (toast) notifications on Windows.
Bug 786125 - Alert showing/hiding animation is janky (nsIAlertsService).
Bug 796111. Adjust styling of nsIAlertService alert windows.

See: http://mxr.mozilla.org/mozilla-central/source/toolkit/themes/winstripe/global/alerts/alert.css

Comment 1

[Philip Chee]

Attachment: Patch v1.0 Update.

> Bug 786125 - Alert showing/hiding animation is janky (nsIAlertsService)
So now instead of the toaster sliding in, it fades in using opacity+animation.

> See: http://mxr.mozilla.org/mozilla-central/source/toolkit/themes/winstripe/global/alerts/alert.css

I didn't bother to implement the background-image: linear-gradient(...) bits.

To test use:

Classic:
Components.classes["@mozilla.org/alerts-service;1"]
          .getService(Components.interfaces.nsIAlertsService)
          .showAlertNotification("chrome://global/skin/icons/information-48.png",
                                 "Notification test",
                                 "Surprise! I'm here to test notifications!",
                                 true, "foobarcookie", null);


Modern:
Components.classes["@mozilla.org/alerts-service;1"]
          .getService(Components.interfaces.nsIAlertsService)
          .showAlertNotification("chrome://global/skin/icons/alert-message.gif",
                                 "Notification test",
                                 "Surprise! I'm here to test notifications!",
                                 true, "foobarcookie", null);

Comment 2

[[e-mail]]

(In reply to Philip Chee from comment #1)
> So now instead of the toaster sliding in, it fades in using opacity+animation.
Unfortunately that doesn't seem to work on Remote Desktop...

> I didn't bother to implement the background-image: linear-gradient(...) bits.
No, that would probably have been silly.

Comment 3

[[e-mail]]

(In reply to comment #2)
> (In reply to Philip Chee from comment #1)
> > So now instead of the toaster sliding in, it fades in using opacity+animation.
> Unfortunately that doesn't seem to work on Remote Desktop...
I tried it in Classic on another PC and it doesn't actually fade in - it appears, then the content fades in and out, then it disappears...

Comment 4

[[e-mail]]

Comment on attachment 688230 [details] [diff] [review]
Patch v1.0 Update.

>+.alertImageBox {
>+  padding: 8px 0;
It seems that padding: 8px; suffices.
(Modern style is to use 0px instead of just 0.)

>+  -moz-padding-start: 4px;
Not sure what good this does.

> .alertText {
>   -moz-margin-end: 6px;
> }
Probably superfluous now.

> .alertText[clickable="true"] {
>   cursor: pointer;
As is this.

>+@keyframes alert-animation {
>+  from {
>+    opacity: 0;
>+  }
>+  6.25% {
>+    opacity: 1;
>+  }
>+  93.75% {
>+    opacity: 1;
>+  }
>+  to {
>+    opacity: 0;
>+  }
>+}
I guess we need this for the alert to stand any chance of being eyecatching...

Comment 5

[Philip Chee]

Attachment: Patch v1.1 fix nits.

>>+.alertImageBox {
>>+  padding: 8px 0;
> It seems that padding: 8px; suffices.
> (Modern style is to use 0px instead of just 0.)
Fixed.

>>+  -moz-padding-start: 4px;
> Not sure what good this does.
Removed.

>> .alertText {
>>   -moz-margin-end: 6px;
>> }
> Probably superfluous now.
Removed.

>> .alertText[clickable="true"] {
>>   cursor: pointer;
> As is this.
Removed.

Comment 6

[Philip Chee]

Pushed to comm-central:
http://hg.mozilla.org/comm-central/rev/1fbd802f8ebd