Improve backgrounds and borders for OSX notification bars

RESOLVED FIXED in Firefox 44

Status

()

Toolkit
Themes
RESOLVED FIXED
2 years ago
2 years ago

People

(Reporter: Gijs, Assigned: Gijs)

Tracking

unspecified
mozilla44
All
Mac OS X
Points:
---

Firefox Tracking Flags

(firefox44 fixed)

Details

Attachments

(3 attachments)

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?
Flags: needinfo?(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?
Flags: needinfo?(shorlander)
(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.
Created attachment 8674840 [details]
Screen Shot 2015-10-16 at 13.11.25.png
Flags: needinfo?(shorlander)
Created attachment 8674917 [details]
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.
Flags: needinfo?(shorlander) → needinfo?(gijskruitbosch+bugs)
Created attachment 8675648 [details] [diff] [review]
Patch v1

This seemed like the straightforward way of addressing this...
Attachment #8675648 - Flags: review?(dao)
Flags: needinfo?(gijskruitbosch+bugs)
Assignee: nobody → gijskruitbosch+bugs
Status: NEW → ASSIGNED

Comment 6

2 years ago
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.
(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 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
Attachment #8675648 - Flags: review?(dao) → review+

Comment 9

2 years ago
https://hg.mozilla.org/integration/fx-team/rev/43cfd689d5b0
https://hg.mozilla.org/mozilla-central/rev/43cfd689d5b0
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
status-firefox44: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla44

Updated

2 years ago
Summary: Investigate improving backgrounds and borders for OSX notification bars → Improve backgrounds and borders for OSX notification bars
You need to log in before you can comment on or make changes to this bug.