[Calendar] Customize Status Bar Color

VERIFIED FIXED in Firefox OS v2.1

Status

Firefox OS
Gaia::Calendar
VERIFIED FIXED
3 years ago
3 years ago

People

(Reporter: mikehenrty, Assigned: mikehenrty)

Tracking

unspecified
2.1 S3 (29aug)
ARM
Gonk (Firefox OS)
Dependency tree / graph

Firefox Tracking Flags

(b2g-v2.1 verified)

Details

(Whiteboard: [systemsfe])

Attachments

(2 attachments, 4 obsolete attachments)

For 2.1, each app will have a customized status bar color. Work to support this was completed in bug 1013913 and bug 1033364. Now we must update each of the apps with the appropriate meta tags as specified in the visual spec:

https://bug1041625.bugzilla.mozilla.org/attachment.cgi?id=8460033
Target Milestone: 2.1 S1 (1aug) → 2.1 S2 (15aug)
Landed: https://github.com/mozilla-b2g/gaia/commit/500ebd79331a50f67e59e4aa0d6dc23af2e5387a
Created attachment 8471200 [details] [review]
[Gaia PR] fix theme color for calendar

Had to do an email color adjustment.
Attachment #8471200 - Flags: review?(gaye)
Created attachment 8471203 [details]
[Screenshot] Email with statusbar
Attachment #8471203 - Flags: ui-review?(epang)
Comment on attachment 8471203 [details]
[Screenshot] Email with statusbar

The status bar background is looking a bit dark.  Can you check that the hex is #ec7616 ?  Thanks!  Flag me again when ready, thanks!
Attachment #8471203 - Flags: ui-review?(epang) → ui-review-
(In reply to Eric Pang [:epang] from comment #4)
> Comment on attachment 8471203 [details]
> [Screenshot] Email with statusbar
> 
> The status bar background is looking a bit dark.  Can you check that the hex
> is #ec7616 ?  Thanks!  Flag me again when ready, thanks!

Yup, the hex value is indeed #ec7616 [1]. Shall we try something lighter?

1.) https://github.com/mikehenrty/gaia/commit/b8d47fcba5ab8c9edceb837ac2d68c119af10294#diff-bdb944480c5cc9465d43aebce7a67865R6
Flags: needinfo?(epang)
Created attachment 8472254 [details]
email.jpg

Sorry to be a pain.. something odd is going on.  Is there an overlay on top of the status bar?
See attached screen, when I sample the first image i get #d46a14.
Flags: needinfo?(epang)
Waiting for ux-review to clear up
(In reply to Eric Pang [:epang] from comment #6)
> Created attachment 8472254 [details]
> email.jpg
> 
> Sorry to be a pain.. something odd is going on.  Is there an overlay on top
> of the status bar?
> See attached screen, when I sample the first image i get #d46a14.

I found it, we do indeed have a linear-gradient on the appwindow chrome which is causing this [1]. I did some git archeaology, and it relates back to first version of the titlebar in bug 1042083.

Etienne, can you help me understand the purpose of the linear-gradient in [1]? This seems to change the theme color we specify in the meta tags by adding a black background with a 0.1 opacity. This means apps are not going to get the color they specified, and since this is a web standard we should probably fix this.



1.) https://github.com/mozilla-b2g/gaia/blob/f33f82d7d97c36a1ff392ac41132319c2a0bf666/apps/system/style/chrome/chrome.css#L10
Flags: needinfo?(etienne)
This was implemented by Vivien. FWIW it makes sense to me to let the system do the darkening since having the status bar clearly delimited is more of a system requirement than an app requirement. But I'm completely fine with both.

That said the spec says

> When using the page's "theme color", user agents MAY adjust the color in UA-defined ways to make it more
> suitable for particular uses. For example, if a UA intends to use the "theme color" as a background and
> display white text over it, it may use a darker variant of the "theme color" for that purpose, to ensure
> adequate contrast. 

so there's nothing to "fix" regarding the spec.
Flags: needinfo?(etienne)
(In reply to Etienne Segonzac (:etienne) from comment #9)
> This was implemented by Vivien. FWIW it makes sense to me to let the system
> do the darkening since having the status bar clearly delimited is more of a
> system requirement than an app requirement. But I'm completely fine with
> both.
> 
> That said the spec says
> 
> > When using the page's "theme color", user agents MAY adjust the color in UA-defined ways to make it more
> > suitable for particular uses. For example, if a UA intends to use the "theme color" as a background and
> > display white text over it, it may use a darker variant of the "theme color" for that purpose, to ensure
> > adequate contrast. 
> 
> so there's nothing to "fix" regarding the spec.

Ah, I hadn't read that. So I guess the b2g statusbar will always slightly darken the theme. That being the case, we need new values from UX for the status colors.
Created attachment 8476161 [details]
[screenshot] Calendar with #ff870a theme

Eric, how is this? For some reason, the color still looks a little strange to me compared to the spec. Let me know if we should still adjust.
Attachment #8471203 - Attachment is obsolete: true
Attachment #8472254 - Attachment is obsolete: true
Attachment #8476161 - Flags: ui-review?(epang)
(In reply to Michael Henretty [:mhenretty] from comment #11)
> Created attachment 8476161 [details]
> [screenshot] Calendar with #ff870a theme
> 
> Eric, how is this? For some reason, the color still looks a little strange
> to me compared to the spec. Let me know if we should still adjust.

Hey Michael, you implemented it correctly..but you're right, I had a hard time with this one cause the black overlay makes the orange look too dark and muddy.  I've updated the spec to use #ff7d14 instead.  It's a little dark, but I think it works better.  Thanks!
Flags: needinfo?(mhenretty)
Created attachment 8476766 [details]
[screenshot] calendar final

With the new value.
Attachment #8476766 - Flags: ui-review?(epang)
Flags: needinfo?(mhenretty)
Comment on attachment 8476161 [details]
[screenshot] Calendar with #ff870a theme

R+, looks good :)
Attachment #8476161 - Flags: ui-review?(epang) → ui-review+
Created attachment 8476769 [details]
ccccccc.png

Latest.
Attachment #8476161 - Attachment is obsolete: true
Attachment #8476766 - Attachment is obsolete: true
Attachment #8476766 - Flags: ui-review?(epang)
Attachment #8476769 - Flags: ui-review?(epang)
Comment on attachment 8476769 [details]
ccccccc.png

Looks good :)
Attachment #8476769 - Flags: ui-review?(epang) → ui-review+
Gareth,

I've gotten ui-review+, so the updated PR is ready to be reviewed now. Sorry about the delay.
Flags: needinfo?(gaye)
Target Milestone: 2.1 S2 (15aug) → 2.1 S3 (29aug)
Comment on attachment 8471200 [details] [review]
[Gaia PR] fix theme color for calendar

Looks harmless enough :). Thanks! Landed on master https://github.com/mozilla-b2g/gaia/commit/ecb4dc352e709b58da52428b543222d1d5ac8cc2
Attachment #8471200 - Flags: review?(gaye) → review+
Flags: needinfo?(gaye)
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → FIXED
Thanks Gareth!
status-b2g-v2.1: --- → fixed
[Environment]
Gaia      e424c85eda87a40c0fa64d6a779c3fa368bf770b
Gecko     https://hg.mozilla.org/mozilla-central/rev/daa84204a11a
BuildID   20140824160205
Version   34.0a1
ro.build.version.incremental=94
ro.build.date=Tue May 20 09:29:20 CST 2014

[Result]
PASS
Status: RESOLVED → VERIFIED

Updated

3 years ago
status-b2g-v2.1: fixed → verified
You need to log in before you can comment on or make changes to this bug.