Closed Bug 925930 Opened 6 years ago Closed 6 years ago

[Status bar] Color changing status bar

Categories

(Firefox OS Graveyard :: Gaia::System, defect, P1)

x86
macOS
defect

Tracking

(Not tracked)

RESOLVED WONTFIX

People

(Reporter: caseyyee.ca, Unassigned)

References

Details

(Whiteboard: ux-tracking, visual design, jian)

Attachments

(2 files, 3 obsolete files)

Proposal for a color changing status bar as part of a 1.3 visual design update.
Moving email discussion thread here:

> On 11/10/2013 00:03, Casey (Kok Ching) Yee wrote:
> This is pretty cool!   Nice work!   A quick few initial thoughts:

> - I'm worried that this will fail us or work unexpectedly outside of our own apps where the markup and styles are known.


That's why we need an heuristic that check if there is a solid color or a small gradient. Then it what we detect does not work, then we can just bail out and use the black color.

> - We would need to have some sort of contrast detection so that we can appropriately color the foreground icons/text white or black to ensure legibility.

Yep I was thinking the same way. This should not be complicated to do.

> - I also think that we'll want to make sure that there is a option to opt out or manually choose a color used.   I feel that app developers fuss over that kind of thing and would appreciate the customize-ability and control of choosing their own palette.   Besides this, the same colors could be used for the cold-app launch animation as well.

> - There are a lot of edge cases to consider.   Apps with no header, changing color palettes, modals & dialogues, trusted UI, etc.

Agreed, here some random thoughs:
- Apps with not header:
  If we take an heuristic that sample the top pixels of the app that should be OK since the statusbar will have the same color as the top color. Now if this top part is a scrolling list that will not work very well :/

> - Changing color palettes:
 That's why I propose to monitored the top area. We can get some repaints events with geometry information. If the top area is repainted then we can resample.

> - Modal & dialogs:
 If needed we can special case those since with Haida they will be very easy to recognize. For in-app dialog the mentioned monitoring may work but it will need some love to not be too flickery.

> - Trusted UI:
 - Easy to special case.


> - Probably too much of an architectural change but we could also consider overlaying the status bar over top of apps instead of above it and setting a opacity?  Not even sure how possible this is.


That will enforce a model similar to iOS where apps developer have to positionned their content some pixels from the top. I'm not a big fan of this tbh.


Also it would be good to ask this to the GFX/Layout team since they will be in Paris sounds (and some of you as well!). They may have better ideas than me since we are lurking into their area here.
Summary: [Status bar] Background color changing status bar → [Status bar] Color changing status bar
Whiteboard: ux-tracking → ux-tracking, visual design, jian
(In reply to Casey Yee [:cyee] from comment #1)

> That's why we need an heuristic that check if there is a solid color or a
> small gradient. Then it what we detect does not work, then we can just bail
> out and use the black color.

>   If we take an heuristic that sample the top pixels of the app that should
> be OK since the statusbar will have the same color as the top color. Now if
> this top part is a scrolling list that will not work very well :/

Right.   Another tricky situation would be the homepage grid.  The top-most colored element would be the orange page indicator bar.   In this case we would probably want to key the color from the background image since we probably won't want a orange status bar.   

> 
> That will enforce a model similar to iOS where apps developer have to
> positionned their content some pixels from the top. I'm not a big fan of
> this tbh.

I'd agree with this.  It would be opt in.

> Also it would be good to ask this to the GFX/Layout team since they will be
> in Paris sounds (and some of you as well!). They may have better ideas than
> me since we are lurking into their area here.

Good call.   I will fish for some ideas to see if we can make this idea work.
A few notes from discussions I have had with platform layout and graphics team here at the work week.

General UX observations:
- Status bar becomes less noticeable and may causes discoverability issues.  
- Status bar becomes harder to visualize as a hit-target.
- The cleaner more integrated look is well liked overall.

Implementation notes:
- Extracting background color from elements by proximity to status bar is quite intensive because it requires layout to be calculated before you can get proper offsets and positioning of elements.
- Z-index will also need to be considered when selecting a element to extract color from.
- We could capture and render screens into canvas element and sample colors from the top 1/4.
- There is a dominant color analyzer that is used to sample colors from favicon that we could use:
http://blog.margaretleibovic.com/post/49947104486/dominant-favicon-color-revisited-on-android
http://mxr.mozilla.org/mozilla-central/source/toolkit/components/places/mozIColorAnalyzer.idl
https://bugzilla.mozilla.org/show_bug.cgi?id=867627
Some additional notes on opt-in/out of status bar color:
- Opt-in in status bar color (via app manifest?) may mean the feature would go unused.
- Since the status bar is specific to the mobile phone context only, does this feature make sense from a universal web app point of view?
(In reply to Casey Yee [:cyee] from comment #3)
> A few notes from discussions I have had with platform layout and graphics
> team here at the work week.
> 
> General UX observations:
> - Status bar becomes less noticeable and may causes discoverability issues.  
> - Status bar becomes harder to visualize as a hit-target.
> - The cleaner more integrated look is well liked overall.
> 
> Implementation notes:
> - Extracting background color from elements by proximity to status bar is
> quite intensive because it requires layout to be calculated before you can
> get proper offsets and positioning of elements.
> - Z-index will also need to be considered when selecting a element to
> extract color from.
> - We could capture and render screens into canvas element and sample colors
> from the top 1/4.
> - There is a dominant color analyzer that is used to sample colors from
> favicon that we could use:
> http://blog.margaretleibovic.com/post/49947104486/dominant-favicon-color-
> revisited-on-android
> http://mxr.mozilla.org/mozilla-central/source/toolkit/components/places/
> mozIColorAnalyzer.idl
> https://bugzilla.mozilla.org/show_bug.cgi?id=867627

I spoke quickly with dbaron yesterday. Mostly because I was thinking of a hack where if people do:
 html {
   outline: 10px solid red;
 }
then we can affect the red color to the status bar. Semantically it should be OK and this should degrade nicely on browsers that does not support it since the outline is out of the viewport.

Then we can simply monitor this specific css rule and update the UI accordingly.

dbaron feels like it is a bit hackish, and tell me that we can simply add a new pseudo class. David, please correct me if I'm wrong.
Flags: needinfo?(dbaron)
pseudo-element rather than pseudo-class, but otherwise yes.  (Neither approach is entirely trivial, but I think the pseudo-element should be doable.)
Flags: needinfo?(dbaron)
Assignee: nobody → padamczyk
Priority: -- → P1
After having several discussions, it has been decided to forgo any sort of color changing status bar for a batch of smaller design changes:

Change the black background to a dark gray to add more lightness to the UX. Make the homescreen / lockscreen statusbar translucent.

Patryk, can you mock this up and post to this thread please.
Flags: needinfo?(padamczyk)
Attached image homescreen.png
Status Bar on the homescreen its.
#333333 @ 75 Opacity
Attached image status_media.png (obsolete) —
Attached image status_prod.png (obsolete) —
Flags: needinfo?(padamczyk)
Attached image status_settings.png (obsolete) —
Status Bar on the homescreen its.
#333333 @ 75 Opacity, some of the wallpaper shows behind it.
This should be applied to the lockscreen as well.

The in app status bars are #4b4c4d
Flags: needinfo?(kyee)
Attached file in app status bars
Spoke to Peter and decided to go even darker for the status bar headers.
#20282e
Attachment #827019 - Attachment is obsolete: true
Attachment #827020 - Attachment is obsolete: true
Attachment #827022 - Attachment is obsolete: true
Assignee: padamczyk → nobody
Blocks: 936201
No longer blocks: 936201
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → WONTFIX
Flags: needinfo?(kyee)
You need to log in before you can comment on or make changes to this bug.