[Status bar] Update status bar visual design

RESOLVED INVALID

Status

Firefox OS
Gaia::System
P1
normal
RESOLVED INVALID
4 years ago
4 years ago

People

(Reporter: jachen, Assigned: samjoch)

Tracking

(Blocks: 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: ux-tracking, visual design, jian [ucid:System148, 1.3:p2, ft:systemsfe])

Attachments

(7 attachments, 1 obsolete attachment)

(Reporter)

Description

4 years ago
Created attachment 828900 [details]
inappstatusbars.zip

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

Updated

4 years ago
No longer depends on: 925930
Seems like it is much simpler to implement that grabbing the color from the app itself. Sam is probably enough here.
(Assignee)

Updated

4 years ago
Assignee: nobody → sjochimek
(Assignee)

Comment 2

4 years ago
Created attachment 831545 [details] [review]
Github PR
Attachment #831545 - Flags: review?
Attachment #831545 - Flags: feedback?(jachen)
(Assignee)

Updated

4 years ago
Attachment #831545 - Flags: review?
(Assignee)

Updated

4 years ago
Attachment #831545 - Flags: feedback?(epang)
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

4 years ago
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

4 years ago
Hi Sam,

The final Status Bar color is #121212.

Thanks!
(Assignee)

Comment 6

4 years ago
i have updated the pr. Eric can you check please.
Flags: needinfo?(epang)
Whiteboard: ux-tracking, visual design, jian → ux-tracking, visual design, jian [systemsfe][1.3:p2]
Comment on attachment 831545 [details] [review]
Github PR

Looks good, thanks Sam! Ready for Review.
Attachment #831545 - Flags: feedback?(epang) → feedback+
(Assignee)

Updated

4 years ago
Attachment #831545 - Flags: feedback?(jachen) → review?(etienne)

Updated

4 years ago
Flags: needinfo?(epang)

Updated

4 years ago
Attachment #831545 - Flags: review?(etienne) → review?(timdream)
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)
Flags: needinfo?(sjochimek)
Comment on attachment 831545 [details] [review]
Github PR

Redirect to :alive since this involves window management events.
Attachment #831545 - Flags: review?(timdream) → review?(alive)
Attachment #831545 - Flags: review?(alive)
Created attachment 8335388 [details]
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.
When a new PR is created, please have Alive review it as per comment #9
(Assignee)

Comment 12

4 years ago
Created attachment 8336012 [details]
Before : After patch — Status bar.png

Patryk, before i update the patch, can you confirm this ?
Attachment #8336012 - Flags: feedback?(padamczyk)
Flags: needinfo?(sjochimek)
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!
Attachment #8336012 - Flags: feedback?(padamczyk) → feedback+
Comment on attachment 831545 [details] [review]
Github PR

Hi Alive, can you help review this patch? Thanks!
Attachment #831545 - Flags: review?(alive)
(Assignee)

Comment 15

4 years ago
Comment on attachment 831545 [details] [review]
Github PR

Eric, still need to update the PR, i will trigger the review flag thanks.
Attachment #831545 - Flags: review?(alive)
(Assignee)

Updated

4 years ago
Attachment #831545 - Attachment is obsolete: true
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!
(Assignee)

Comment 17

4 years ago
Created attachment 8336135 [details] [review]
Github PR

I have kept the LockScreen status bar transparent.
Attachment #8336135 - Flags: review?(alive)
(Assignee)

Comment 18

4 years ago
Created attachment 8336136 [details]
After patch w/ lockscreen status bar transparent
Created attachment 8336693 [details]
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.
Flags: needinfo?(sjochimek)

Updated

4 years ago
Attachment #8336135 - Flags: review?(alive)
(Assignee)

Comment 20

4 years ago
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 ?
Attachment #8336135 - Flags: review?(alive)
Comment on attachment 8336135 [details] [review]
Github PR

r=me, thanks!
Attachment #8336135 - Flags: review?(alive) → review+
(Assignee)

Comment 22

4 years ago
landed in master: https://github.com/mozilla-b2g/gaia/commit/04ae2d03ff876ffc03a2742034ab9ce89d721a14
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Flags: needinfo?(sjochimek)
Resolution: --- → FIXED
Whiteboard: ux-tracking, visual design, jian [systemsfe][1.3:p2] → ux-tracking, visual design, jian [ucid:System148, 1.3:p2, ft:systemsfe]
Blocks: 942704
This was backed out due to a red test. See bug 942719.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---

Updated

4 years ago
Depends on: 942719
To run the failing test, you can run ./bin/gaia-marionette apps/system/test/marionette/media_playback_test.js.
Hey Sam, can you look into this? Thanks!
Flags: needinfo?(sjochimek)
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.
Flags: needinfo?(squibblyflabbetydoo)

Comment 27

4 years ago
The person you probably want to ask is :lightsofapollo or maybe :gaye. I believe the issue is related to marionette-apps' close() function.
Flags: needinfo?(squibblyflabbetydoo)

Comment 28

4 years ago
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.
Fine with me, as long as you open a bug to track the work to re-enable it.
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).
Flags: needinfo?(sjochimek)
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.
Status: REOPENED → RESOLVED
Last Resolved: 4 years ago4 years ago
Resolution: --- → FIXED
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.
Flags: needinfo?(sjochimek)
Flags: needinfo?(kgrandon)
I'll let Sam look at this one.
Flags: needinfo?(kgrandon)

Updated

4 years ago
Depends on: 943675
(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.
(Assignee)

Comment 35

4 years ago
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.
Flags: needinfo?(sjochimek)
(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?
Flags: needinfo?(sjochimek)
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!
(Assignee)

Comment 38

4 years ago
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 ?
Flags: needinfo?(sjochimek) → needinfo?(21)
(Assignee)

Updated

4 years ago
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
(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.
Flags: needinfo?(21)

Updated

4 years ago
No longer blocks: 942704
Depends on: 942704
: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)?
Loaded today's master and the change has been backed out? All the apps use the old black status bar, including the homescreen.
(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.
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.
Flags: needinfo?(sjochimek)
Flags: needinfo?(21)
Blocks: 946615
No longer blocks: 946615
(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?
Flags: needinfo?(21)
(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 :)
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.
(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?
(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.
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.
Closing and marking as invalid since the status bar will be used at the rocketbar in 1.4
Status: REOPENED → RESOLVED
Last Resolved: 4 years ago4 years ago
Resolution: --- → INVALID
(Assignee)

Updated

4 years ago
Flags: needinfo?(sjochimek)
You need to log in before you can comment on or make changes to this bug.