1052488 - [Rocketbar] Implement opacity/color matching to statusbar

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia, defect)

Description

[Kevin Grandon :kgrandon]

Attachment: Spec

The opacity/colour changes depending on which app the user is in.

Comment 1

[Ben Francis [:benfrancis]]

What's left to do here, Kevin?

Comment 2

[Kevin Grandon :kgrandon]

(In reply to Ben Francis [:benfrancis] from comment #1)
> What's left to do here, Kevin?

I think the main thing left is to match the rocketbar background color to the statusbar, based on the attached spec here.

Comment 3

[Ben Francis [:benfrancis]]

The statusbar only changes colour in certain certified apps. Apps don't have an expanded Rocketbar state unless they request browser chrome, in which case the Rocketbar has the light theme of browser windows.

The collapsed Rocketbar currently has the semi-transparent colour rgba(51, 51, 51, 0.5). Do we need to do something more fancy?

Not sure if there's actually anything left to do?

Comment 4

[Kevin Grandon :kgrandon]

The screenshot currently does not match the implementation. Perhaps this is only an issue for certified apps though. Maybe this is just some polish left to do here, that we can look at doing post-FL.

Comment 5

[Eric Chang [:ericcc] [:echang]]

Hi Kevin, Do we have any spec for these action pages in apps? They are usually in gray and does not matches with app color, thanks~
https://mozilla.box.com/s/r5mggfylncrmxvnxb09h

Comment 6

[Eric Pang [:epang] UX]

(In reply to Ben Francis [:benfrancis] from comment #3)
> The statusbar only changes colour in certain certified apps. Apps don't have
> an expanded Rocketbar state unless they request browser chrome, in which
> case the Rocketbar has the light theme of browser windows.
> 
> The collapsed Rocketbar currently has the semi-transparent colour rgba(51,
> 51, 51, 0.5). Do we need to do something more fancy?
> 
> Not sure if there's actually anything left to do?

Hey Ben, there's a few changes that are needed.  This is for RB across the OS, not just the browser.  The input field of the RB changes colour and opacity in different apps.

Home screen, packaged apps (default value): #cccccc @25 % opacity
Productivity apps (orange header): #cccccc @20 % opacity
Comms apps (Teal header): #cccccc @ 20 % opacity
Media (dark grey header): #cccccc @ 15% opacity
Settings, browser, ftu, callscreen, marketplace, etc (light header): #cccccc @ 40% opacity

Let me know if you have any questions :)

Comment 7

[Eric Pang [:epang] UX]

(In reply to Eric Chang [:ericcc] [:echang] from comment #5)
> Hi Kevin, Do we have any spec for these action pages in apps? They are
> usually in gray and does not matches with app color, thanks~
> https://mozilla.box.com/s/r5mggfylncrmxvnxb09h

Hi Eric, we're hoping to have these dialogs overlay the entire screen so the status bar is not shown.  I'm not sure on the progress though.  Rob, do you know if this is going to be possible?

Comment 8

[Kevin Grandon :kgrandon]

(In reply to Eric Pang [:epang] from comment #7)
> Hi Eric, we're hoping to have these dialogs overlay the entire screen so the
> status bar is not shown.  I'm not sure on the progress though.  Rob, do you
> know if this is going to be possible?

This is possible,but definitely not in 2.1.

Comment 9

[Ben Francis [:benfrancis]]

(In reply to Eric Pang [:epang] from comment #6)
> The input field of the RB changes colour and
> opacity in different apps.

There's currently no way for apps to specify the colour or opacity of the input field, only the status bar. We could try to use an algorithm to pick a colour based on the statusbar colour, but it probably wouldn't have the results you're asking for.

Is there a simpler approach we can take with just one colour/opacity that works in all cases or two alternate colours depending on status bar colour? Does the text colour of the title need to change too?

Comment 10

[Eric Pang [:epang] UX]

(In reply to Ben Francis [:benfrancis] from comment #9)
> (In reply to Eric Pang [:epang] from comment #6)
> > The input field of the RB changes colour and
> > opacity in different apps.
> 
> There's currently no way for apps to specify the colour or opacity of the
> input field, only the status bar. We could try to use an algorithm to pick a
> colour based on the statusbar colour, but it probably wouldn't have the
> results you're asking for.
> 
> Is there a simpler approach we can take with just one colour/opacity that
> works in all cases or two alternate colours depending on status bar colour?
> Does the text colour of the title need to change too?

Hey Ben,

The input field is always the same colour #cccccc.  Only the opacity varies, I would be okay with only have 2 capacities for now.

1. Dark @ 20% Opacity (where white status bar icons are used)
Home screen, packaged apps, Productivity apps (orange header), Comms apps (Teal header), Media (dark grey header)

2. Light @ 40% opacity
Settings, browser, ftu, callscreen, marketplace

Yes, about the text colours, but it looks like the this has already landed on master.

Let me know if haven't only 2 opacities helps.

Thanks!

Comment 11

[Rob MacDonald [:robmac]]

(In reply to Kevin Grandon :kgrandon from comment #8)
> (In reply to Eric Pang [:epang] from comment #7)
> > Hi Eric, we're hoping to have these dialogs overlay the entire screen so the
> > status bar is not shown.  I'm not sure on the progress though.  Rob, do you
> > know if this is going to be possible?
> 
> This is possible,but definitely not in 2.1.

That would be the preferred approach. I'm talking with Michael about this as well.

Comment 12

[Ben Francis [:benfrancis]]

Yes, that does sound more feasible, thanks.

Comment 13

[Kevin Grandon :kgrandon]

Attachment: Github pull request

If we're only looking to change the background input color that's pretty trivial to do so. Taking and going to land with R=me to speed things up.

Comment 14

[Kevin Grandon :kgrandon]

In master: https://github.com/mozilla-b2g/gaia/commit/0eab5f351235b8f49f88800360723f684a74777b

Eric - Please verify in master that you are happy with the colors. Thanks!

Comment 15

[Stephany Wilkes]

Should we flag this as being for 2.1? Looks as those it's going to be, but it's currently noted as "backlog." Let me know and thanks for the good work here.

Comment 16

[Kevin Grandon :kgrandon]

It's already landed and will be included in 2.1 so I'm not sure what the value of doing that is?

Comment 17

[Eric Pang [:epang] UX]

(In reply to Kevin Grandon :kgrandon from comment #14)
> In master:
> https://github.com/mozilla-b2g/gaia/commit/
> 0eab5f351235b8f49f88800360723f684a74777b
> 
> Eric - Please verify in master that you are happy with the colors. Thanks!

Hey Kevin,

There were some changes to the colour matching status bar..
It's messed with the visibility of the input field.  Is it possible to have 4 sets of opacity?

All #cccccc

Black - 25%
Home screen, packaged apps (default value)

Dark - 10%
Media (dark grey header)
Clock
FM Radio

Med - 30%
Productivity apps (orange header)
Comms apps (Teal header)

Light - 70%
Settings
Browser
ftu
Callscreen
Marketplace

Let me know, cause the visibility is an issue at the moment. Thanks!

Comment 18

[Kevin Grandon :kgrandon]

Eric - things start to become painful as we add more stop points, instead I'd like to find some formula that offers use a fairly close fit in all of our cases and may work well with third party apps.

Let me see what resources I can dig up and I will post a suggestion here soon.

Comment 19

[Kevin Grandon :kgrandon]

We currently generate a brightness value between 0 and 255 based on color. Our current brightness values are:

Black (default): 0
Dark grey (fm radio): 43.4
Teal (contacts): 159.4
Orange (calendar): 162.7
Light (settings): 238
White (browser): 255

Based on these we may be able to fit some equation to it to produce the proper background color. Eric - do you have any thoughts on this? I'm going to explore some options, but if you have any ideas or know some math experts let's ask them :)

Comment 20

[Kevin Grandon :kgrandon]

A quick hack may be to fit a linear regression to the values. Using the brightness values from comment 19, I've generated one.

0, 25
43.4, 10
160, 30
238, 70
255, 70

A simple linear regression generator produces these results: 11.115 + (0.215 * x)

Plugging this in for opacity values we get the following results for opacity:

Black (default): 11%
Dark grey (fm radio): 20%
Teal (contacts): 45%
Orange (calendar): 46%
Light (settings): 62%
White (browser): 67%

This isn't quite perfect given the ideal numbers in comment 17, so I'm going to see if there's more tricks we can play.

Comment 21

[Kevin Grandon :kgrandon]

Eric - Can you plug the numbers from comment 20 into photoshop and see how they look? I'm going to continue to see if there's more tricks we can play here. Thanks!

Comment 22

[Eric Pang [:epang] UX]

(In reply to Kevin Grandon :kgrandon from comment #21)
> Eric - Can you plug the numbers from comment 20 into photoshop and see how
> they look? I'm going to continue to see if there's more tricks we can play
> here. Thanks!

Hey Kevin,

I tried out the values, was really hoping they would work.  But I think more tricks will be needed.
Here's what I found for each.  Let me know if there's something I can do to help. Thank!

> Black (default): 11% - Not visible enough
> Dark grey (fm radio): 20% - Too visible
> Teal (contacts): 45% - Too visible
> Orange (calendar): 46% - Too visible
> Light (settings): 62% - Okay
> White (browser): 67% - Okay

Comment 23

[Kevin Grandon :kgrandon]

Ok, I'm going to look around and try to generate a more accurate equation for this I suppose.