936201 - [Status bar] Update status bar visual design

Status: RESOLVED INVALID

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

Description

[jachen]

Attachment: inappstatusbars.zip

Spoke to Peter and decided to go even darker for the status bar headers.
#20282e

Comment 1

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Seems like it is much simpler to implement that grabbing the color from the app itself. Sam is probably enough here.

Comment 2

[Sam Joch [:samjoch]]

Attachment: Github PR

Comment 3

[Eric Pang [:epang] UX]

Hey Sam, thanks for working on this.  It looks good! Peter has been talking about tweaking the color though, so I just want to check with him before I give feedback+.  Will email him now and find out :).

Comment 4

[Peter La]

Hi Sam,

Please hold off on landing this for the time being.  We are reviewing this change across all screens and are finding the colour may be a bit too blueish.  I will be finalizing on a colour by Monday after we do some sanity checks.

Thanks, and sorry for the inconvenience.

Peter

Comment 5

[Peter La]

Hi Sam,

The final Status Bar color is #121212.

Thanks!

Comment 6

[Sam Joch [:samjoch]]

i have updated the pr. Eric can you check please.

Comment 7

[Eric Pang [:epang] UX]

Comment on attachment 831545 [details] [review]
Github PR

Looks good, thanks Sam! Ready for Review.

Comment 8

[Eric Pang [:epang] UX]

Hey Sam, this status bar change refers only to the apps screens right?  Not the home screen and lock screen (because I believe those screens with have a different status bar background treatment)

Comment 9

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Comment on attachment 831545 [details] [review]
Github PR

Redirect to :alive since this involves window management events.

Comment 10

[Patryk Adamczyk [:patryk] UX]

Attachment: StatusBar.jpg

Looks like the status bar on the homescreen wasn't implemented properly, Eric says it was implemented at 10%. 

Here's the corrected spec:
#121212 @ 75 Opacity, some of the wallpaper shows behind it.
This should be applied to the lockscreen as well.

Comment 11

[Patryk Adamczyk [:patryk] UX]

When a new PR is created, please have Alive review it as per comment #9

Comment 12

[Sam Joch [:samjoch]]

Attachment: Before : After patch — Status bar.png

Patryk, before i update the patch, can you confirm this ?

Comment 13

[Patryk Adamczyk [:patryk] UX]

Comment on attachment 8336012 [details]
Before : After patch — Status bar.png

Thanks for the detailed preview. Please keep it transparent (as seen in the before screen) on the lock screen. The new translucent home screen looks good!

Comment 14

[Eric Pang [:epang] UX]

Comment on attachment 831545 [details] [review]
Github PR

Hi Alive, can you help review this patch? Thanks!

Comment 15

[Sam Joch [:samjoch]]

Comment on attachment 831545 [details] [review]
Github PR

Eric, still need to update the PR, i will trigger the review flag thanks.

Comment 16

[Eric Pang [:epang] UX]

ok, thanks Sam!(In reply to Sam Joch [:samjoch] from comment #15)
> Comment on attachment 831545 [details] [review]
> Github PR
> 
> Eric, still need to update the PR, i will trigger the review flag thanks.

ok, thanks Sam!

Comment 17

[Sam Joch [:samjoch]]

Attachment: Github PR

I have kept the LockScreen status bar transparent.

Comment 18

[Sam Joch [:samjoch]]

Attachment: After patch w/ lockscreen status bar transparent

Comment 19

[Eric Pang [:epang] UX]

Attachment: Homescreen-statusbar(revised).png

Hi Sam, sorry for all the changes, Peter has worked on a revision to the status bar on the home screen.  Can you update it to #000000 @ 50% opacity?  Thanks!

I'll also remove the flag for Alive to review.

Comment 20

[Sam Joch [:samjoch]]

Comment on attachment 8336135 [details] [review]
Github PR

I changed to BLACK @ 50% Opacity for the HomeScreen and have not changed #121212 for app. 

Alive can you review the PR which include your advices ?

Comment 21

[(inactive after 6/18) Alive Kuo [:alive]]

Comment on attachment 8336135 [details] [review]
Github PR

r=me, thanks!

Comment 22

[Sam Joch [:samjoch]]

landed in master: https://github.com/mozilla-b2g/gaia/commit/04ae2d03ff876ffc03a2742034ab9ce89d721a14

Comment 23

[Anthony Ricaud (:rik)]

This was backed out due to a red test. See bug 942719.

Comment 24

[Anthony Ricaud (:rik)]

To run the failing test, you can run ./bin/gaia-marionette apps/system/test/marionette/media_playback_test.js.

Comment 25

[Eric Pang [:epang] UX]

Hey Sam, can you look into this? Thanks!

Comment 26

[Anthony Ricaud (:rik)]

Jim: apps/system/test/marionette/media_playback_test.js seems to fail on many local dev machines but not on Travis. If we land the patch for this bug, we saw Travis failing 95% of the time. Can you look into this?

Otherwise, we're considering landing this patch but disabling this test.

Comment 27

[Jim Porter (:squib)]

The person you probably want to ask is :lightsofapollo or maybe :gaye. I believe the issue is related to marionette-apps' close() function.

Comment 28

[Jim Porter (:squib)]

I talked to Gareth on IRC about this, and let's just disable that test for now. Marionette is giving me too many headaches right now, although hopefully we can reenable that test soon, or we run the risk of it regressing again.

Comment 29

[Anthony Ricaud (:rik)]

Fine with me, as long as you open a bug to track the work to re-enable it.

Comment 30

[Kevin Grandon :kgrandon]

I'll re-land this with a commit to skip the test. I will also file a bug and NI? people to ensure we get it resolved. (Re-landing the fixed test should be high priority).

Comment 31

[Kevin Grandon :kgrandon]

Landing this in master: https://github.com/mozilla-b2g/gaia/commit/8245888f1ac0d27cebbcb48dfdb7e75d89586b00

I was going to add a commit to disable the test, but it looks like they are doing that in bug 942490.

Comment 32

[Patryk Adamczyk [:patryk] UX]

Attachment: StatusBar in master 2013.11.26

Looks like the wallpaper is being drawn twice. Once in the status bar and once in the homescreen resulting in the top 20px of the wallpaper being duplicated.
The wallpaper should be seamless from top to bottom.

Comment 33

[Kevin Grandon :kgrandon]

I'll let Sam look at this one.

Comment 34

[Jason Smith [:jsmith]]

(In reply to Patryk Adamczyk [:patryk] UX from comment #32)
> Created attachment 8338619 [details]
> StatusBar in master 2013.11.26
> 
> Looks like the wallpaper is being drawn twice. Once in the status bar and
> once in the homescreen resulting in the top 20px of the wallpaper being
> duplicated.
> The wallpaper should be seamless from top to bottom.

In general - there's a lot of fallouts being seen by the landing here (e.g. bug 943675, status bar color doesn't align with modal prompt color). Per a discussion in the systemsfe meeting, I think we need to back this out for 1.3.

Let me know what you think Sam.

Comment 35

[Sam Joch [:samjoch]]

Well the status bar need to be defined for all cases.
This patch takes care only of Homescreen/Lockscreen/App.
Can we define which screens are missing ? and created (assigned to me) new bugs.

For the wallpaper issue, i am still working on it.

Comment 36

[Jason Smith [:jsmith]]

(In reply to Sam Joch [:samjoch] from comment #35)
> Well the status bar need to be defined for all cases.
> This patch takes care only of Homescreen/Lockscreen/App.
> Can we define which screens are missing ? and created (assigned to me) new
> bugs.
> 
> For the wallpaper issue, i am still working on it.

I don't think that's an acceptable approach - we can't regress a bunch of screens in the process from an initial feature landing. We need to backout, fix the regressing screens, get a UX review, and re-land with the fixes in place.

Does that make sense?

Comment 37

[Eric Pang [:epang] UX]

Sam this works with me if you agree, if we backout and open a new bug.  If you open a new bug please add it to the google doc.  I think the only other place we need to worry about the status bar is on the e.me screen.  It should be the same as apps.  Thanks!

Comment 38

[Sam Joch [:samjoch]]

Ok revert is here: 9af5d48b81944a7568f98a3ec9d1b4015f4597f7.

Eric, we need figured out which screen is involved ? (Homescreen wallpaper contextmenu; E.me)

It will be much easier if we can find a way that app control the StatusBar ?

Comment 39

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

(In reply to Sam Joch [:samjoch] from comment #38)
> Ok revert is here: 9af5d48b81944a7568f98a3ec9d1b4015f4597f7.
> 
> Eric, we need figured out which screen is involved ? (Homescreen wallpaper
> contextmenu; E.me)
> 
> It will be much easier if we can find a way that app control the StatusBar ?

Sadly there is no trivial answer to that and this is way out of the scope of 1.3.

Comment 40

[Patryk Adamczyk [:patryk] UX]

:samjoch :vingtetun
The screen involved is Home screen, which also affects the app grid and e.me (that seems to be drawn on top of the homescreen). Lock screen seems to work perfectly, so can we just make it work like the lock screen (visually)?

Comment 41

[Patryk Adamczyk [:patryk] UX]

Loaded today's master and the change has been backed out? All the apps use the old black status bar, including the homescreen.

Comment 42

[Jason Smith [:jsmith]]

(In reply to Patryk Adamczyk [:patryk] UX from comment #41)
> Loaded today's master and the change has been backed out? All the apps use
> the old black status bar, including the homescreen.

The change was backed out for having too many serious fallouts in the VD of the entire phone. At a quick glance, every perm prompt had an odd mix of colors with the status bar being transparent vs. perm prompt not being transparent. The resuming from sleep also rendered the status bar first, then the entire phone. I think we need to back up here and identify the VD gaps here, ensure that we have the right color choices each gap, and create an updated implementation patch to address this.

Comment 43

[Patryk Adamczyk [:patryk] UX]

Thanks :jsmith

There is a huge inconsistency with implementing of the building blocks prompts we noticed after doing a scan this week... some cover the status bar, some don't... but that's a separate bug. This likely was escalated with the status bar changes... but the biggest issue was noted in comment 32, the wallpaper being redrawn twice.

Can we do the following...
1. For 1.3 change the status to the gray colour (#121212) initially spec for all screens except for lock screen. This shouldn't cause those visual issues.
2. For 1.4 can we change the home screen status bar to translucent like spec'd in this bug? The visual design team will also create a bug addressing the prompt issue which will need to be fixed first.

Comment 44

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

(In reply to Patryk Adamczyk [:patryk] UX from comment #43)
> Thanks :jsmith
> 
> There is a huge inconsistency with implementing of the building blocks
> prompts we noticed after doing a scan this week... some cover the status
> bar, some don't... but that's a separate bug. This likely was escalated with
> the status bar changes... but the biggest issue was noted in comment 32, the
> wallpaper being redrawn twice.
> 
> Can we do the following...
> 1. For 1.3 change the status to the gray colour (#121212) initially spec for
> all screens except for lock screen. This shouldn't cause those visual issues.
> 2. For 1.4 can we change the home screen status bar to translucent like
> spec'd in this bug? The visual design team will also create a bug addressing
> the prompt issue which will need to be fixed first.

The above plan sounds good to me. One thing I noticed with the gray colour is that the launch screen with the icon has a black background and this mismatch with the statusbar, do we want to change that as well?

Comment 45

[Tim Guan-tin Chien [:timdream] (please needinfo)]

(In reply to Sam Joch [:samjoch] from comment #35)
> For the wallpaper issue, i am still working on it.

The wallpaper issue was bug 917416 and was fixed by backing out the change in master. We shouldn't backout the patch here by that issue alone since the patch isn't the cause.

What are the other issues need to be addressed? I enjoy this design very much with the occasional dogfood :)

Comment 46

[Jason Smith [:jsmith]]

The general requirement here for feature complete should be ensuring that there isn't any obvious visual fallout from doing the refresh. This is largely due to complaints received from 1.2 about the quality bar of the visual design on feature landing with the lockscreen, as the UX team felt that it should have not landed for 1.2 due to graphical glitches.

Right now, the visual design updates here feel awkward without handling the color matching between the status bar & the modal prompts.

Comment 47

[Candice Serran (:cserran)]

(In reply to Jason Smith [:jsmith] from comment #46)
> The general requirement here for feature complete should be ensuring that
> there isn't any obvious visual fallout from doing the refresh. This is
> largely due to complaints received from 1.2 about the quality bar of the
> visual design on feature landing with the lockscreen, as the UX team felt
> that it should have not landed for 1.2 due to graphical glitches.
> 
> Right now, the visual design updates here feel awkward without handling the
> color matching between the status bar & the modal prompts.

Can you confirm what changes are going in (if any) for 1.3?

Comment 48

[Jason Smith [:jsmith]]

(In reply to Candice Serran from comment #47)
> (In reply to Jason Smith [:jsmith] from comment #46)
> > The general requirement here for feature complete should be ensuring that
> > there isn't any obvious visual fallout from doing the refresh. This is
> > largely due to complaints received from 1.2 about the quality bar of the
> > visual design on feature landing with the lockscreen, as the UX team felt
> > that it should have not landed for 1.2 due to graphical glitches.
> > 
> > Right now, the visual design updates here feel awkward without handling the
> > color matching between the status bar & the modal prompts.
> 
> Can you confirm what changes are going in (if any) for 1.3?

Nothing it looks like now, as this was backed out.

Comment 49

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Noted that in bug 917416 platform devs is working on making home screen app opaque. If there is any design concern please bring it up there.

Comment 50

[Eric Pang [:epang] UX]

Closing and marking as invalid since the status bar will be used at the rocketbar in 1.4