864958 - Refine private browsing chrome colour

Status: RESOLVED FIXED

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

Description

[Ian Barlow (:ibarlow)]

We've been fiddling with the colours in our tab UI, which in turn has made it clash with the dark Private Browsing chrome. We should darken the PB chrome a little to compensate. 

Will post colour values here shortly, just posting this for now as a potential nom for the ui hackathon.

Comment 1

[Lucas Rocha (:lucasr)]

Ian, specs needed I guess?

Comment 2

[Ian Barlow (:ibarlow)]

mockup: http://cl.ly/image/3c0B3u3Y2j2j

Only change here is updating the dark chrome to use a background colour of #24272a. I also pulled the purple menu icon, to simplify the look a bit. Let's try it and see.

Comment 3

[Ian Barlow (:ibarlow)]

We'll want to make sure to update the about:privatebrowsing page background colour as well.

Comment 4

[Ian Barlow (:ibarlow)]

Friendly ping on progress here -- PB is looking a little sad in Nightly right now and I'd like us to get this resolved before we push out our new tab UI.

Comment 5

[Sriram Ramasubramanian [:sriram]]

(In reply to Ian Barlow (:ibarlow) from comment #2)
> mockup: http://cl.ly/image/3c0B3u3Y2j2j
> 
> Only change here is updating the dark chrome to use a background colour of
> #24272a. I also pulled the purple menu icon, to simplify the look a bit.
> Let's try it and see.

Does this follow RGB_565 scheme that had problems in about:privatebrowsing ??

Comment 6

[Ian Barlow (:ibarlow)]

No, it didn't. I need to revisit these colours anyway, the build I just tested didn't look good. Sriram I'll probably ping you for help here soon.

Comment 7

[Sriram Ramasubramanian [:sriram]]

Red and blue can take values - 00, 08, 10, 18, 21, 29, 31, 39, 42, 4A, 52, 5A, 63, 6B, 73, 7B, 84, 8C, 94, 9C, A5, AD, B5, BD, C6, CE, D6, DE, E7, EF, F7, FF.

Green can take values - 00, 04, 08, 0C, 10, 14, 18, 1C, 20, 24, 28, 2C, 30, 34, 38, 3C, 41, 45, 49, 4D, 51, 55, 59, 5D, 61, 65, 69, 6D, 71, 75, 79, 7D, 82, 86, 8A, 8E, 92, 96, 9A, 9E, A2, A6, AA, AE, B2, B6, BA, BE, C3, C7, CB, CF, D3, D7, DB, DF, E3, E7, EB, EF, F3, F7, FB, FF.

Comment 8

[Ian Barlow (:ibarlow)]

Ok this is going to take a few more steps than I originally thought to get everything looking properly balanced. 

1. Change private browsing titlebar bg colour to #212121
2. Update urlbar resources with new ones (here http://cl.ly/1Z27122S2627)
3. Lighten the tab background (we will need to adjust the tab tray colour now, too) slightly, to #394245

Comment 9

[Ian Barlow (:ibarlow)]

Sorry for the delay on this, bu I have tweaked the colour values from comment 8 a bit, to fit with Sriram's guidelines. 

Tab bg should be #39414A
Title bar bg should be #212021

Comment 10

[Lucas Rocha (:lucasr)]

Attachment: New background color and menu icon for private tabs

Comment 11

[Sriram Ramasubramanian [:sriram]]

Comment on attachment 755363 [details] [diff] [review]
New background color and menu icon for private tabs

Review of attachment 755363 [details] [diff] [review]:
-----------------------------------------------------------------

LGTM. So we removed the hot pink menu icon?? Yaaaay!

Comment 12

[Lucas Rocha (:lucasr)]

Waiting for ibarlow with his latest design update here.

Comment 13

[Lucas Rocha (:lucasr)]

Assigning this to ibarlow for clarity.

Comment 14

[Ian Barlow (:ibarlow)]

Reassigning to Anthony, and changing the context of this bug a little. 

Originally, this was about darkening the private browsing title bar to make the colour go with the tab background colour better. I am less convinced now that darkening it is the right approach, as it makes the tab background look like it's actually in the foreground. 

Anthony, let's explore some colour variants for the private browsing title bar and URL bar colour here, and post them to the bug when they are ready.

Comment 15

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

Will do. Stay tuned!

Thanks Ian!

Comment 16

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

Managed to get some mock ups out. Not sure if we have considered changing the color of the background that lies under these tabs but here are some that change it, and some that don't. And then some!

http://cl.ly/image/1H211B3L3e1N

Also, explored the idea of a lighter "URL bar" such that site's favicons would look more as the site author intended. But an overall darker look seemed to drive the message home a bit better IMO.

Comment 17

[Ian Barlow (:ibarlow)]

Thanks Anthony this looks great. Let's chat on IRC and narrow this down today.

Comment 18

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

Additional revisions made as per feedback. Narrowed down to fewer options, also corrected color codes to obey the values that Sriram outlined above.

http://cl.ly/image/113s0Z353k2y

Note: purple outlines on the right one was just an experiment. Thought it matched the whole PB motif a bit more. Just a thought!

Comment 19

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

Picked up the purple a bit more in this example as well. http://cl.ly/image/0e363j031n37

Comment 20

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

Assigning back to Lucas for implementation.

Lucas brought up some valid concerns of the transition for the user and their experience when jumping back and forth between PB and default while on a PB tab or on a default/normal browsing tab. I'm suggesting a quick fade-in and out of the darker background that will provide a smoother, less jarring user experience. The color of the "current/active tab" along the bottom will stay relevant to the user (i.e. it will not change depending on the background state (browsing PB tabs vs default/normal tabs). 

I would say the goal is to make it more obvious to the user which mode they're in and even hint at what the mode "Private Browsing" really entails. Also, to improve overall visual aspect of the PB URL bar so that it doesn't clash as much with the background and sits more comfortably above the user's content.

Please find color specs attached in this latest screen shot: http://cl.ly/image/013e3F231o3H

Thanks Lucas!

Comment 21

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

bumping! and also updating colors as i just realized the last one had a minor issue. :)

http://cl.ly/image/2X0I470K050T

Comment 22

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

Attachment: WIP_pb_mock1.png

Going to pick this bug up again in light of the toolbar updates we've been pushing for.

Posting a WIP... going to keep iterating on this. Far right is what we currently do.

Comment 23

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

^ more info on the mock in the middle: 

I've got a better understanding of what the limitations are around changing the colours of the background tray so I'm trying to work within that and have the scope of this bug not exceed more than it needs to.

That being said, correct me if I'm wrong!

Comment 24

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

Attachment: prev_bfox_mock1.png

Wanted to post a little exploration I've been doing on the visual side for this to chug it along. (Also, in keeping with the toolbar refinements me and Lucas are landing)

Comment 25

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

^ ignore the labels :) like I said - exploration

Comment 26

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

Attachment: prev_pb_mock1.png

Had a go at some color changes, I'd love to see this on a build to get it on some Android devices to test how the colors react to actual device screens. Pretty simple in terms of what we're actually changing (from our Normal mode) and that was definitely something that was intentional.

For Private browsing mode:
---

 1 ) "Toolbar grey" --> "Tabs tray grey pressed" (for the active tab)
 2 ) Divider --> #7878A5 (new color, will have to see how the loading bar looks on top of this)
 3 ) Adding a new 9-patch asset for the input bar (assets to follow)
 4 ) Using "Private browsing purple" for the highlighting the active tab (instead of our "Fennec UI orange")

Comment 27

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

Attachment: prev_pb_mock2.png

Not sure how hard changing the loading bar color to our "Private Browsing Purple" would be but here's what it would look like.

Comment 28

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

Attachment: Screenshot of about:privatebrowsing

We're going to need some design adjustments on about:privatebrowsing - over to the antlam.

Comment 29

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

Attachment: urlbar_pb_new.zip

This is a good start.

There's some changes I'd like to make in this bug before we move on to the default "empty state" contents on screen (which will likeyl be in another bug).

 - I'm not sure why we use the purple overflow icon there, can we use the default?
 - Can we set the default loading "track" color? #7878A5
 - Can we set the loading bar color? Private browsing purple
 - Can we use these new 9-patches for the URL bar, I found the current colors aren't in our palette and don't work that well.

Comment 30

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

Not my primary work at the moment so feel free to take if you have extra cycles and are interested in this.

Comment 31

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

Attachment: MozReview Request: Bug 864958 - Replace private toolbar background with tabs_tray_grey_pressed. r=mhaigh

Bug 864958 - Replace private toolbar background with tabs_tray_grey_pressed. r=mhaigh

Comment 32

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

Anthony, the current url bar shadow color is "#12000000" – would you like to update that?

Also, should the private browsing url bar shadow color be added to the palette as "url_bar_shadow_private"? I can also add the current color as "url_bar_shadow".

Comment 33

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

Comment on attachment 8614764 [details]
MozReview Request: Bug 864958 - Replace private toolbar background with tabs_tray_grey_pressed. r=mhaigh

Bug 864958 - Replace private toolbar background with tabs_tray_grey_pressed. r=mhaigh

Comment 34

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

Attachment: MozReview Request: Bug 864958 - Add new private browsing url bar assets. r=mhaigh

Bug 864958 - Add new private browsing url bar assets. r=mhaigh

Comment 35

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

Attachment: MozReview Request: Bug 864958 - Set url bar shadow color in private browsing mode. r=mhaigh

Bug 864958 - Set url bar shadow color in private browsing mode. r=mhaigh

Comment 36

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

Attachment: MozReview Request: Bug 864958 - Tint the progress bar in private browsing mode. r=mhaigh

Bug 864958 - Tint the progress bar in private browsing mode. r=mhaigh

Note: the tinted view is only a single color while the original asset contains
gradients.

Comment 37

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

The included changesets complete all the requests in comment 29.

Anthony, note that the progress bar is currently a 9-patch image that contains gradients while my tint in private browsing mode removes those gradients (i.e. it's the single color you requested). Any thoughts? Should we update the existing asset [1] (which doesn't actually have an xxhdpi version)? Note that I can also tint it to a single color for the quick and easy version, though the asset would likely be less compressible.

[1]: https://mxr.mozilla.org/mozilla-central/source/mobile/android/base/resources/drawable-xhdpi/progress.9.png

Comment 38

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

(In reply to Michael Comella (:mcomella) from comment #32)
> Anthony, the current url bar shadow color is "#12000000" – would you like to
> update that?
> 
> Also, should the private browsing url bar shadow color be added to the
> palette as "url_bar_shadow_private"? I can also add the current color as
> "url_bar_shadow".

#12000000 is not a hex color, so I'm a bit confused here. 

We should sync up in person cause a lot of the context is lost here for me

Comment 39

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

(In reply to Anthony Lam (:antlam) from comment #38)
> #12000000 is not a hex color, so I'm a bit confused here. 

Should I just grab the RGB values from a screenshot here and put them into the code, Anthony?

> We should sync up in person cause a lot of the context is lost here for me

Talked in person and Anthony is good with the current design. Testing on tablet and filing a follow-up for other pb changes.

Comment 40

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

Attachment: Tablet

Still look good, Anthony?

Comment 41

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

Comment on attachment 8626306 [details]
MozReview Request: Bug 864958 - Tint the progress bar in private browsing mode. r=mhaigh

Bug 864958 - Tint the progress bar in private browsing mode. r=mhaigh

Note: the tinted view is only a single color while the original asset contains
gradients.

Comment 42

[Martyn Haigh (:mhaigh)]

Comment on attachment 8626306 [details]
MozReview Request: Bug 864958 - Tint the progress bar in private browsing mode. r=mhaigh

https://reviewboard.mozilla.org/r/12057/#review10531

Ship It!

Comment 43

[Martyn Haigh (:mhaigh)]

Comment on attachment 8626305 [details]
MozReview Request: Bug 864958 - Set url bar shadow color in private browsing mode. r=mhaigh

https://reviewboard.mozilla.org/r/12055/#review10535

Ship It!

Comment 44

[Martyn Haigh (:mhaigh)]

Comment on attachment 8626304 [details]
MozReview Request: Bug 864958 - Add new private browsing url bar assets. r=mhaigh

https://reviewboard.mozilla.org/r/12053/#review10537

It's debatable if you need the mdpi assets - I'm erring on not including them but we'll remove these once bug 1171946 lands so up to you.

Comment 45

[Martyn Haigh (:mhaigh)]

Comment on attachment 8614764 [details]
MozReview Request: Bug 864958 - Replace private toolbar background with tabs_tray_grey_pressed. r=mhaigh

https://reviewboard.mozilla.org/r/10031/#review10539

Ship It!

Comment 46

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

https://reviewboard.mozilla.org/r/12053/#review10545

Let's leave them in and wait until bug 1171946 lands.

Comment 47

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

https://hg.mozilla.org/integration/fx-team/rev/66cd9d9bf23b
https://hg.mozilla.org/integration/fx-team/rev/f8d90a2adc9d
https://hg.mozilla.org/integration/fx-team/rev/d11dd076d026
https://hg.mozilla.org/integration/fx-team/rev/7ca978706f30

Comment 48

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

Comment on attachment 8626405 [details]
Tablet

This is looking great!! But we'll need to tint those icons I think.

Namely, Back (active), forward, refresh, tabs and menu overflow.

Can we tint them to be Tabs tray icon grey? (#AFB1B3). As for the visual feedback, we can use Text and tabs tray grey (#363B40).

In the special case of the "inactive back button", we can use Toolbar icon grey (#5F6368)

Thanks mcomella!

Comment 49

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/66cd9d9bf23b
https://hg.mozilla.org/mozilla-central/rev/f8d90a2adc9d
https://hg.mozilla.org/mozilla-central/rev/d11dd076d026
https://hg.mozilla.org/mozilla-central/rev/7ca978706f30

Comment 50

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

(In reply to Anthony Lam (:antlam) from comment #48)
> This is looking great!! But we'll need to tint those icons I think.

Filed bug 1179479.

Comment 51

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

Since we have several follow-ups (e.g. bug 1184708, bug 1179479), after speaking with antlam in bug 1177611 comment 9, we're going to back this out of 41 to land with Tracking Protection in 42.

This range should be:
* This bug
* bug 1179403
* bug 1179407
* bug 1180011

Comment 52

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

Backout: https://hg.mozilla.org/releases/mozilla-aurora/rev/cc90ade14b31

This should complete the 41 backout of the private browsing tweaks.

Ryan, how should I update the target milestone?

Comment 53

[Ryan VanderMeulen [:RyanVM]]

I think things are good as-is.