1202256 - Use Gaia-Toast for System Banner

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::System::System UI, defect)

Description

[Michael Henretty [:mikehenrty][:mhenretty]]

Right now the system banner is in a bad state. It uses styling that's been around since pre 1.0, it covers a significant portion of the screen for 4 seconds, and is un-dismissable. Let's use gaia-toast instead.

Comment 1

[GitHub Autolander Bot]

Attachment: [gaia] mikehenrty:bug-1202256-gaia-toast > mozilla-b2g:master

Comment 2

[Michael Henretty [:mikehenrty][:mhenretty]]

Comment on attachment 8657592 [details] [review]
[gaia] mikehenrty:bug-1202256-gaia-toast > mozilla-b2g:master

Kevin, could you take a look here? Eric is going to do the ui-review, but I've already got his confirmation we should move ahead with this.

Comment 3

[Michael Henretty [:mikehenrty][:mhenretty]]

Comment on attachment 8657592 [details] [review]
[gaia] mikehenrty:bug-1202256-gaia-toast > mozilla-b2g:master

Eric, here is the patch for using gaia-toast as the system banner. Note, there is a case where we can have a button in the banner. It is hard to reproduce because you need to have an app crash, then unselect the checkbox, hit send, and then have the app crash again. Since that's a pain, I will attach some screenshots instead.

Comment 4

[Michael Henretty [:mikehenrty][:mhenretty]]

Attachment: [screenshot] gaia-toast with button

Eric, here is the gaia-toast with a button.

Comment 5

[Kevin Grandon :kgrandon]

Feels wrong to me to start mixing UI styles (building blocks /w components), but let's see what Eric says. I guess we're already using this in the keyboard app, so might as well go forward with it.

Comment 6

[Eric Pang [:epang] UX]

Attachment: Mini System Toasts Spec.png

Hey Mike, I've put together a mini spec for the system toasts.  Let me know if something doesn't make sense or if something needs more explaining.  For the button I went with text since I think it buys us a tiny bit more space for localization and is a bit cleaner. Hoping we can change the background colour of the toast based om the theme colour too!  Ping me when it's ready to review again :).

Comment 7

[Eric Pang [:epang] UX]

(In reply to Kevin Grandon :kgrandon from comment #5)
> Feels wrong to me to start mixing UI styles (building blocks /w components),
> but let's see what Eric says. I guess we're already using this in the
> keyboard app, so might as well go forward with it.
 
Hey Kev, just wanted to mention that from a visual perspective we've got the go ahead to start using the web components, so we don't have to worry about mixing the bbs and components.

Comment 8

[Michael Henretty [:mikehenrty][:mhenretty]]

Comment on attachment 8657592 [details] [review]
[gaia] mikehenrty:bug-1202256-gaia-toast > mozilla-b2g:master

Alright, as we discussed on IRC, we are just going to go with the dark theme for now since we cannot programmatically determine the background color of any given app, and theme-color doesn't really tell us enough.

What do you think now Eric?

Comment 9

[Michael Henretty [:mikehenrty][:mhenretty]]

Working on the Gij tests now.

Comment 10

[Michael Henretty [:mikehenrty][:mhenretty]]

Attachment: [screenshot] new gaia-toast with button

Eric, here is a screenshot with the button.

Comment 11

[Michael Henretty [:mikehenrty][:mhenretty]]

Attachment: [screenshot] even newer gaia-toast

Ahh, I had forgotten to include the screen opacity. Here it is.

Comment 12

[Eric Pang [:epang] UX]

Comment on attachment 8657592 [details] [review]
[gaia] mikehenrty:bug-1202256-gaia-toast > mozilla-b2g:master

R+ Looks good, thanks Mike!

Comment 13

[Eric Pang [:epang] UX]

Comment on attachment 8657876 [details]
[screenshot] even newer gaia-toast

R+ thanks again Mike!

Comment 14

[Michael Henretty [:mikehenrty][:mhenretty]]

Ok, I think I've fixed all the tests. Kevin, could you take a look now?

Comment 15

[Michael Henretty [:mikehenrty][:mhenretty]]

Comment on attachment 8657592 [details] [review]
[gaia] mikehenrty:bug-1202256-gaia-toast > mozilla-b2g:master

Trying to get this in before vaca since it blocks pin-the-web. Alberto, could you take a look?

Comment 16

[Alberto Pastor [:albertopq]]

Comment on attachment 8657592 [details] [review]
[gaia] mikehenrty:bug-1202256-gaia-toast > mozilla-b2g:master

The code looks good to me + ui_review+ = r+.
It would be nice to make all the banners (clock, notifications, call screen) uniform across the OS using the component, though.

 Thanks!

Comment 17

[Alberto Pastor [:albertopq]]

master: https://github.com/mozilla-b2g/gaia/commit/d2008e81f67a40a90c12bde111a091a16ec5272f