1215333 - Improve backgrounds and borders for OSX notification bars

Status: RESOLVED FIXED

(Toolkit :: Themes, defect)

Description

[:Gijs (he/him)]

Stephen, seems like these are all images when they could be linear gradients, and that the border colors are the same at the top and bottom of the window. Is that correct? Should they be different?

Comment 1

[Stephen Horlander [:shorlander]]

The current styling was done before we had linear-gradient support, which would explain the images. The border-color thing is surprising, I am not seeing that on notification bars. Do you have a screenshot?

Comment 2

[:Gijs (he/him)]

(In reply to Stephen Horlander [:shorlander] from comment #1)
> The current styling was done before we had linear-gradient support, which
> would explain the images. The border-color thing is surprising, I am not
> seeing that on notification bars. Do you have a screenshot?

You see different borders for the same notification style at the top and at the bottom of the window? I mean, generally, the border is pretty hard to distinguish because of the gradient, IMO, but there we are. I can get you some screenshots.

Comment 3

[:Gijs (he/him)]

Attachment: Screen Shot 2015-10-16 at 13.11.25.png

Comment 4

[Stephen Horlander [:shorlander]]

Attachment: Borders

(In reply to :Gijs Kruitbosch from comment #3)
> Created attachment 8674840 [details]
> Screen Shot 2015-10-16 at 13.11.25.png

Oh! Sorry, totally misread that. Yeah, the bottom bar should not look like that. It should have no dark bottom-border and the same top-border as the bottom-border of the top bar.

Comment 5

[:Gijs (he/him)]

Attachment: Patch v1

This seemed like the straightforward way of addressing this...

Comment 6

[Tim Nguyen :ntim]

Comment on attachment 8675648 [details] [diff] [review]
Patch v1

Review of attachment 8675648 [details] [diff] [review]:
-----------------------------------------------------------------

::: toolkit/themes/osx/global/notification.css
@@ +11,5 @@
>  }
>  
>  notification[type="info"] {
>    color: rgba(255,255,255,0.95);
> +  background: linear-gradient(#606060, #404040) #404040;

I would take this bug as an opportunity to update the notification bar background on OSX to match the spec in bug 1024741.

Comment 7

[:Gijs (he/him)]

(In reply to Tim Nguyen [:ntim] from comment #6)
> Comment on attachment 8675648 [details] [diff] [review]
> Patch v1
> 
> Review of attachment 8675648 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> ::: toolkit/themes/osx/global/notification.css
> @@ +11,5 @@
> >  }
> >  
> >  notification[type="info"] {
> >    color: rgba(255,255,255,0.95);
> > +  background: linear-gradient(#606060, #404040) #404040;
> 
> I would take this bug as an opportunity to update the notification bar
> background on OSX to match the spec in bug 1024741.

That doesn't really make sense. This is just an incremental change to bring OS X in line with the other OSes. Implementing that spec would be a different bug, and is essentially massive scope creep. I don't even know if it is still up-to-date, and using those background only on OS X and nowhere else would be weird, as would using those backgrounds but not updating the button styling.

So, no, not going to do that.

Comment 8

[Dão Gottwald [:dao]]

Comment on attachment 8675648 [details] [diff] [review]
Patch v1

> notification[type="info"] {
>   color: rgba(255,255,255,0.95);
>-  background: url("chrome://global/skin/notification/info-bar-background.png") #404040 repeat-x top left;
>-  border-top: 1px solid #707070;
>+  background: linear-gradient(#606060, #404040) #404040;

Please remove the trailing #404040 as the background-color, as it's completely covered by the opaque gradient.

> notification[type="warning"] {
>   color: rgba(0,0,0,0.95);
>-  background: url("chrome://global/skin/notification/warning-bar-background.png") #ffc703 repeat-x top left;
>-  border-top: 1px solid #ffe970;
>+  background: linear-gradient(#ffe13e, #ffc703) #ffc703;

ditto

> notification[type="critical"] {
>   color: rgba(255,255,255,0.95);
>-  background: url("chrome://global/skin/notification/critical-bar-background.png") #980000 repeat-x top left;
>-  border-top: 1px solid #e35959;
>+  background: linear-gradient(#d40000, #980000) #980000;

ditto

Comment 9

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/43cfd689d5b0

Comment 10

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/43cfd689d5b0