Closed Bug 1052488 Opened 5 years ago Closed 5 years ago

[Rocketbar] Implement opacity/color matching to statusbar

Categories

(Firefox OS Graveyard :: Gaia, defect)

ARM
Gonk (Firefox OS)
defect
Not set

Tracking

(tracking-b2g:backlog)

RESOLVED FIXED
2.1 S3 (29aug)
tracking-b2g backlog

People

(Reporter: kgrandon, Assigned: kgrandon)

References

Details

(Keywords: polish, Whiteboard: [systemsfe])

Attachments

(2 files)

Attached file Spec
The opacity/colour changes depending on which app the user is in.
Blocks: rocketbar-mvp
No longer blocks: rocketbar-search-mvp
blocking-b2g: --- → backlog
What's left to do here, Kevin?
Flags: needinfo?(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.
Flags: needinfo?(kgrandon)
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?
Flags: needinfo?(epang)
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.
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
Flags: needinfo?(kgrandon)
(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 :)
Flags: needinfo?(epang)
(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?
Flags: needinfo?(rmacdonald)
(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.
Flags: needinfo?(kgrandon)
(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?
Flags: needinfo?(epang)
(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!
Flags: needinfo?(epang) → needinfo?(bfrancis)
(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.
Flags: needinfo?(rmacdonald)
No longer blocks: rocketbar-mvp
Yes, that does sound more feasible, thanks.
Flags: needinfo?(bfrancis)
Keywords: polish
Assignee: nobody → kgrandon
Status: NEW → ASSIGNED
Whiteboard: [systemsfe]
Target Milestone: --- → 2.1 S3 (29aug)
Attached file 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.
Attachment #8479421 - Flags: review+
In master: https://github.com/mozilla-b2g/gaia/commit/0eab5f351235b8f49f88800360723f684a74777b

Eric - Please verify in master that you are happy with the colors. Thanks!
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
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.
It's already landed and will be included in 2.1 so I'm not sure what the value of doing that is?
(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!
Flags: needinfo?(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.
Flags: needinfo?(epang)
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 :)
Flags: needinfo?(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.
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!
(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
Flags: needinfo?(epang) → needinfo?(kgrandon)
Ok, I'm going to look around and try to generate a more accurate equation for this I suppose.
Flags: needinfo?(kgrandon)
blocking-b2g: backlog → ---
You need to log in before you can comment on or make changes to this bug.