894473 - Support using LWT accent color as background color in more of the UI

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: Theme and Visual Design, defect, P3)

Description

[Wesley Johnston (:wesj)]

New about:home doesn't show themes over the top of it anymore. Maybe we have to do that because we're showing lists now? but it would be nice if we still have the nice big image...

Comment 1

[Sriram Ramasubramanian [:sriram]]

There are no designs for this yet. Ideally, changing the layouts from standard android to GeckoXYZView would show the personas.

Comment 2

[Aaron Train [:aaronmt]]

What will users see if they have any installed persona's and update to 26?

Comment 3

[Lucas Rocha (:lucasr)]

(In reply to Aaron Train [:aaronmt] from comment #2)
> What will users see if they have any installed persona's and update to 26?

I guess they'll see the theme applied to the toolbar only?

Comment 4

[Sriram Ramasubramanian [:sriram]]

Yes. The theme will be on the toolbar only.

Comment 5

[Chenxia Liu [:liuche]]

Attachment: Screenshot: Current LWT

I'm not sure how better theme intergration would look with our title strip, but we used to do this [1] with our old about:home, and I think sriram made some progress using the theme background in the browser menu.

Any thoughts from UX?

[1] http://cl.ly/image/3j3L091C391E

Comment 6

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Ah, this is interesting! Are we looking at just this page and just the tool bar? I'm just wondering where else these themes surface themselves.

Comment 7

[:Margaret Leibovic]

I feel like this should be a WONTFIX. Leaving the call to antlam.

Comment 8

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Will leave NI on for this one as I mull it over a bit more but I'm leaning towards a WONTFIX too. 

The only + side I see is having a more "personalized" about:home? but I'm not sure that's best achieved by just exposing the theme's image in the toolbar on about:home.

Comment 9

[Mark Finkle (:mfinkle) (use needinfo?)]

One thing I wouldn't mind trying to do is use the "accent color" provided in a LWT to change the color of our UI in many more places. We have plans for using LWTs in our onboarding process soon, and adding the accent color to more of the UI would go a long way. Using the color is a lot easier than using a bitmap too.

Comment 10

[Mark Finkle (:mfinkle) (use needinfo?)]

We could try using the color (or a lighter version) as the background color:
* the "tab strip" in the HomePager
* the pages themselves
* the URLBar textview

We could try using a darker version of the color as the background color:
* Tabs tray

Comment 11

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Attachment: (Current) tinted tabs tray

It seems the tabs tray is already tinted with the predominant color, just not too heavily and many themes seem to use black, which does not change the grey background in any extreme way. See [1] for the associated code.

[1]: https://mxr.mozilla.org/mozilla-central/source/mobile/android/base/LightweightTheme.java?rev=0dc0ff9bb484#425

Comment 12

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Attachment: (current) untinted tabs tray

For comparison's sake...

Comment 13

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Another idea: tinting the system status bar with the predominant theme color (the color change to the URL bar at the moment can look a bit strange, depending on the theme).

Comment 14

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Playing around a bit.

Comment 15

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Attachment: (v1) tinted tabs tray

After trying a few values, I tried one that's a bit darker. I'll attach followup screenshots with issues, however.

Comment 16

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

(In reply to Michael Comella (:mcomella) from comment #15)
> After trying a few values, I tried one that's a bit darker.

I meant that I found an alpha value that's a bit more extreme that was my favorite of those tried.

Comment 17

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Attachment: (v1) tinted tabs tray pb font color issue

The font here is too dark - we can steal the tab name font color and maybe lighten the blue for the link (I think all themes should get darker as they filter over the default background color).

Comment 18

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Attachment: (v1) tinted tabs tray pb toolbar bg color issue

The tabs tray background is not the same as the space to the right of the toolbar and the lack of transition there looks pretty crappy. I think we should use the same technique there as we do for non-private browsing (but keep the toolbar the darker solid color).

Comment 19

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Note that the issue in comment 17 can be swept under the rug if we don't make the background color as extreme. For the record, I used 88 for the alpha value in the screenshots, but an alpha value of 55 or lower would also work.

Comment 20

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Attachment: (v1) tinted home pager

This is as extreme as we can get without dark colors (e.g. black) causing the gray sub-text to be difficult to read.

If we were more thorough here, we have the, "Is this theme dark?" information already so we can change the font colors too (at the price of code and theming complexity).

Comment 21

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Nice experiments here Michael! With the new toolbar's stroke around the URL bar, it looks like we can offer a bit more in terms of what a LWT entails.

(In reply to Mark Finkle (:mfinkle) from comment #9)
> One thing I wouldn't mind trying to do is use the "accent color" provided in
> a LWT to change the color of our UI in many more places. 

I'd agree. When I first submitted a theme, I expected the "accent" color to do more. 

Although, I'm not so sure about using it for something as dominant as a "background color", even just as a tint. I wonder how it would look if we used the accent color for maybe changing the color of the buttons or the underline/indicator? (would we have to prep the assets of each icon of a different color?)

Comment 22

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Attachment: (v1) tinted home pager indicator

Keep in mind I still have the background color change.

Comment 23

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Attachment: (v1) tinted home pager indicator light

This is a tint indicator that is hard to see - what do you think, Anthony? Keep in mind this color also needs to mesh well with the tabs tray background if it's also the selector in the tabs tray and highlight on the thumbnails.

Comment 24

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Note that the tabs tray selector is an image resource, which we can set to the color of our choosing using color filters (but perhaps the base asset should be white, rather than orange and we color with that). As for the thumbnail highlight, I'm not sure - I was unable to find where this color was set, but presumably we can use a similar technique to either one here.

Comment 25

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Comment on attachment 8506509 [details]
(v1) tinted home pager indicator light

Yeah that's kind of weird, but it does show the idea off. (+ for that!)

I'm not sure the change in background is necessary, maybe just the underline? That way, users could use bolder colors (e.g. orange underline is great, but if the background was orange that might not be so great).

I wonder how/if this affects some of the ideas we had around themes when we were in London (for Tablets).

Maybe we should hold off on this and see how it affects tablet's first. 

Thoughts?

Comment 26

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

(In reply to Anthony Lam (:antlam) from comment #25)
> Maybe we should hold off on this and see how it affects tablet's first. 

I would agree, at least until bug 1085771 lands.

Comment 27

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Not a priority so I'm going to unassign. Note that I lost the patches when my hard drive died. Also, changing the tab indicator light for PB mode may be desirable (like bug 1177611).

Comment 28

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.