1041896 - [Calendar] Customize Status Bar Color

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::Calendar, defect)

Description

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

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

Comment 1

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

Landed: https://github.com/mozilla-b2g/gaia/commit/500ebd79331a50f67e59e4aa0d6dc23af2e5387a

Comment 2

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

Attachment: [Gaia PR] fix theme color for calendar

Had to do an email color adjustment.

Comment 3

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

Attachment: [Screenshot] Email with statusbar

Comment 4

[Eric Pang [:epang] UX]

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!

Comment 5

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

(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

Comment 6

[Eric Pang [:epang] UX]

Attachment: 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.

Comment 7

[Gareth Aye [:gaye] (back from PTO)]

Waiting for ux-review to clear up

Comment 8

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

(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

Comment 9

[Etienne Segonzac (: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.

Comment 10

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

(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.

Comment 11

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

Attachment: [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.

Comment 12

[Eric Pang [:epang] UX]

(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!

Comment 13

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

Attachment: [screenshot] calendar final

With the new value.

Comment 14

[Eric Pang [:epang] UX]

Comment on attachment 8476161 [details]
[screenshot] Calendar with #ff870a theme

R+, looks good :)

Comment 15

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

Attachment: ccccccc.png

Latest.

Comment 16

[Eric Pang [:epang] UX]

Comment on attachment 8476769 [details]
ccccccc.png

Looks good :)

Comment 17

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

Gareth,

I've gotten ui-review+, so the updated PR is ready to be reviewed now. Sorry about the delay.

Comment 18

[Gareth Aye [:gaye] (back from PTO)]

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

Comment 19

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

Thanks Gareth!

Comment 20

[Edward Chen[:edchen]]

[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