Closed
Bug 1052488
Opened 10 years ago
Closed 10 years ago
[Rocketbar] Implement opacity/color matching to statusbar
Categories
(Firefox OS Graveyard :: Gaia, defect)
Tracking
(tracking-b2g:backlog)
People
(Reporter: kgrandon, Assigned: kgrandon)
References
Details
(Keywords: polish, Whiteboard: [systemsfe])
Attachments
(2 files)
The opacity/colour changes depending on which app the user is in.
Updated•10 years ago
|
Updated•10 years ago
|
blocking-b2g: --- → backlog
Updated•10 years ago
|
Blocks: browser-chrome-mvp
Assignee | ||
Comment 2•10 years ago
|
||
(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)
Comment 3•10 years ago
|
||
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)
Assignee | ||
Comment 4•10 years ago
|
||
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•10 years ago
|
||
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)
Comment 6•10 years ago
|
||
(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)
Comment 7•10 years ago
|
||
(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)
Assignee | ||
Comment 8•10 years ago
|
||
(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)
Comment 9•10 years ago
|
||
(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?
Updated•10 years ago
|
Flags: needinfo?(epang)
Comment 10•10 years ago
|
||
(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)
Comment 11•10 years ago
|
||
(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)
Updated•10 years ago
|
No longer blocks: rocketbar-mvp
Assignee | ||
Updated•10 years ago
|
Assignee: nobody → kgrandon
Status: NEW → ASSIGNED
Whiteboard: [systemsfe]
Target Milestone: --- → 2.1 S3 (29aug)
Assignee | ||
Comment 13•10 years ago
|
||
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+
Assignee | ||
Comment 14•10 years ago
|
||
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: 10 years ago
Resolution: --- → FIXED
Comment 15•10 years ago
|
||
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.
Assignee | ||
Comment 16•10 years ago
|
||
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•10 years ago
|
||
(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)
Assignee | ||
Comment 18•10 years ago
|
||
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)
Assignee | ||
Comment 19•10 years ago
|
||
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)
Assignee | ||
Comment 20•10 years ago
|
||
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.
Assignee | ||
Comment 21•10 years ago
|
||
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•10 years ago
|
||
(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)
Assignee | ||
Comment 23•10 years ago
|
||
Ok, I'm going to look around and try to generate a more accurate equation for this I suppose.
Flags: needinfo?(kgrandon)
Updated•10 years ago
|
blocking-b2g: backlog → ---
tracking-b2g:
--- → backlog
You need to log in
before you can comment on or make changes to this bug.
Description
•