Refine private browsing chrome colour

RESOLVED FIXED in Firefox 42

Status

()

defect
RESOLVED FIXED
6 years ago
3 years ago

People

(Reporter: ibarlow, Assigned: mcomella)

Tracking

(Blocks 1 bug)

Trunk
Firefox 41
ARM
Android
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox41 wontfix, firefox42 fixed, fennec42+)

Details

(Whiteboard: ui-hackathon)

Attachments

(10 attachments, 2 obsolete attachments)

14.41 KB, patch
sriram
: review+
Details | Diff | Splinter Review
45.35 KB, image/png
Details
59.17 KB, image/png
Details
141.68 KB, image/png
Details
9.50 KB, application/zip
Details
40 bytes, text/x-review-board-request
mhaigh
: review+
Details
40 bytes, text/x-review-board-request
mhaigh
: review+
Details
40 bytes, text/x-review-board-request
mhaigh
: review+
Details
40 bytes, text/x-review-board-request
mhaigh
: review+
Details
75.67 KB, image/png
antlam
: feedback-
Details
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.
Ian, specs needed I guess?
Flags: needinfo?(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.
Flags: needinfo?(ibarlow)
We'll want to make sure to update the about:privatebrowsing page background colour as well.
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.
Assignee: nobody → lucasr.at.mozilla
(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 ??
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.
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.
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
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 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!
Attachment #755363 - Flags: review?(sriram) → review+
Waiting for ibarlow with his latest design update here.
Flags: needinfo?(ibarlow)
OS: Mac OS X → Android
Hardware: x86 → ARM
Version: unspecified → Trunk
Status: NEW → ASSIGNED
Assigning this to ibarlow for clarity.
Assignee: lucasr.at.mozilla → 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.
Assignee: ibarlow → alam
Flags: needinfo?(ibarlow)
Summary: Darken private browsing chrome → Refine private browsing chrome colour
Will do. Stay tuned!

Thanks Ian!
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.
Thanks Anthony this looks great. Let's chat on IRC and narrow this down today.
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!
Picked up the purple a bit more in this example as well. http://cl.ly/image/0e363j031n37
Assignee: alam → lucasr.at.mozilla
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!
bumping! and also updating colors as i just realized the last one had a minor issue. :)

http://cl.ly/image/2X0I470K050T
Flags: needinfo?(lucasr.at.mozilla)
Posted image WIP_pb_mock1.png (obsolete) —
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.
^ 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!
Posted image prev_bfox_mock1.png (obsolete) —
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)
^ ignore the labels :) like I said - exploration
Blocks: new-toolbar-v2
No longer blocks: new-toolbar-v1
Flags: needinfo?(lucasr.at.mozilla)
Assignee: lucasr.at.mozilla → nobody
Posted image 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")
Attachment #8434338 - Attachment is obsolete: true
Attachment #8474632 - Attachment is obsolete: true
Posted image 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.
We're going to need some design adjustments on about:privatebrowsing - over to the antlam.
Flags: needinfo?(alam)
Posted file 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.
Flags: needinfo?(alam) → needinfo?(michael.l.comella)
Flags: needinfo?(michael.l.comella)
Not my primary work at the moment so feel free to take if you have extra cycles and are interested in this.
Assignee: nobody → michael.l.comella
Assignee: michael.l.comella → mhaigh
Attachment #8614764 - Attachment description: MozReview Request: Bug 864958 - Replace private toolbar background with tabs_tray_grey_pressed. r=mhaigh → (WIP) MozReview Request: Bug 864958 - Replace private toolbar background with tabs_tray_grey_pressed. r=mhaigh
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".
Flags: needinfo?(alam)
Assignee: mhaigh → michael.l.comella
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
Attachment #8614764 - Attachment description: (WIP) MozReview Request: Bug 864958 - Replace private toolbar background with tabs_tray_grey_pressed. r=mhaigh → MozReview Request: Bug 864958 - Replace private toolbar background with tabs_tray_grey_pressed. r=mhaigh
Attachment #8614764 - Flags: review?(mhaigh)
Bug 864958 - Set url bar shadow color in private browsing mode. r=mhaigh
Attachment #8626305 - Flags: review?(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.
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
(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
Flags: needinfo?(alam)
(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.
Posted image Tablet
Still look good, Anthony?
Attachment #8626405 - Flags: feedback?(alam)
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.
Attachment #8626306 - Flags: review?(mhaigh) → review+
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!
Attachment #8626305 - Flags: review?(mhaigh) → review+
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 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.
Attachment #8626304 - Flags: review?(mhaigh) → review+
Attachment #8614764 - Flags: review?(mhaigh) → review+
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 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!
Flags: needinfo?(michael.l.comella)
Attachment #8626405 - Flags: feedback?(alam) → feedback-
(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.
Flags: needinfo?(michael.l.comella)
Depends on: 1184708
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
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?
tracking-fennec: --- → 42+
Flags: needinfo?(ryanvm)
I think things are good as-is.
Flags: needinfo?(ryanvm)
No longer depends on: 1139202
You need to log in before you can comment on or make changes to this bug.