1133826 - [Private Browser] Cards view overlay for private windows

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::System::Browser Chrome, defect)

Description

[Michael Henretty [:mikehenrty][:mhenretty]]

According to the private browser spec (sections 6.1 and 7.1), we need to update the cards view (and show windows in browser) to have a special semi-transparent overlay and icon.

spec:
https://mozilla.app.box.com/s/fanxlaw7ilhm0walsod6hy4ps47v9eh3

assets:
https://mozilla.app.box.com/s/t615fkirlxarti8b0pvv7xn48mm8w90z

icons landed in gaia:
https://github.com/mozilla-b2g/gaia/blob/f1cccc2cdb0c56d8e5cea6300e9ce0b33f0f99fb/apps/system/style/icons/pb_icon.png

Comment 1

[Sam Foster [:sfoster] (he/him)]

The card view look/feel is updated in bug 1125095, we need those changes for the private window tab view / task manager specs to make sense.

Comment 2

[Sam Foster [:sfoster] (he/him)]

Eric: the specs seem to disagree with the changes we made to the task manager button bar colors in bug 1125095. The private browsing specs show a mid-grey being used for that button bar for non-private windows and the darker #5f5f5f for private windows, but we use #5f5f5f for non-private windows already (see https://bug1125095.bugzilla.mozilla.org/attachment.cgi?id=8562934)

Comment 3

[Eric Pang [:epang] UX]

(In reply to Sam Foster [:sfoster] from comment #2)
> Eric: the specs seem to disagree with the changes we made to the task
> manager button bar colors in bug 1125095. The private browsing specs show a
> mid-grey being used for that button bar for non-private windows and the
> darker #5f5f5f for private windows, but we use #5f5f5f for non-private
> windows already (see
> https://bug1125095.bugzilla.mozilla.org/attachment.cgi?id=8562934)

Hey Sam, thanks for catching this.  For now let's see how it looks if they are the same in the Task Manager.  I'm hoping the overlay and icon will be enough to reinforce that it's a private window.  I think it's more important that it's really visible in the tab view.

Comment 4

[GitHub Autolander Bot]

Attachment: [gaia] sfoster:private-browser-task-manager-overlay-bug-1133826 > mozilla-b2g:master

Comment 5

[Sam Foster [:sfoster] (he/him)]

Comment on attachment 8566192 [details] [review]
[gaia] sfoster:private-browser-task-manager-overlay-bug-1133826 > mozilla-b2g:master

Here's where I've got to with this so far, but there are issues: 

Ideally, we want the card view to simply show the app window in its current state, i.e. we would see the identification overlay which already has the private browsing background and icon, plus title. That is (mostly) true for all but the active app - which we use a screenshot for. So this patch adds a new overflow (:after content) for that case. And it kinda works, but: 

* Hard to tell, but seems like this exacerbates the current jank with scrolling the card strip
* The card for the active app is currently missing the title in the overlay. I could add that - essentially duplicating the identification overlay structure. But that seems redundant and wrong?
* Transitions are odd. When you show the task manager, the overlay on the active app just snaps in. And right now when you select a card, it zooms in without the overlay, then you see it briefly, then it goes away. Presumably I just messed up with the changes to windows.css and can fix. Ideally we want basically the same behavior(as code as far as possible) as the edge gesture - you see the overlay as it transitions in, then it fades out. I'm not sure that's going to be practical with the current approach.

Comment 6

[Sam Foster [:sfoster] (he/him)]

Comment on attachment 8566192 [details] [review]
[gaia] sfoster:private-browser-task-manager-overlay-bug-1133826 > mozilla-b2g:master

PR updated, so we use the :after overlay for both active/inactive apps. Also tweaked the icon size to better match the spec. Hard to assess transitions right now as we're seeing graphics jank across all of gaia, but it doesn't seem be any worse

Comment 7

[Sam Foster [:sfoster] (he/him)]

Attachment: private-browsing-card-view.png

Tab view and task manager with private & non-private browser windows

Comment 8

[Eric Pang [:epang] UX]

Comment on attachment 8566703 [details]
private-browsing-card-view.png

Hey Sam,  this looks really good.  Just noticed one thing that wasn't in my spec that would really help the transition.  When accessing the task manager/tab view is it possible to fade in the overlay?  At the moment it instantly switches on which looks a little janky.  Ping me to let me know if it's possible.  Thanks!

Comment 9

[Etienne Segonzac (:etienne)]

Comment on attachment 8566192 [details] [review]
[gaia] sfoster:private-browser-task-manager-overlay-bug-1133826 > mozilla-b2g:master

Sweet and simple.
r=me with the transition either removed or actually transitioning ;)

Comment 10

[Sam Foster [:sfoster] (he/him)]

> Just noticed one thing that wasn't in my
> spec that would really help the transition.  When accessing the task
> manager/tab view is it possible to fade in the overlay?  At the moment it
> instantly switches on which looks a little janky.

It should be possible, but as Etienne says in the PR, it may not perform - we'll have to try it and see. In the meantime I dont think we want to block landing the feature on this, so I've filed bug 1135123 to track this.

Comment 11

[GitHub Autolander Bot]

Pull request has landed in master: https://github.com/mozilla-b2g/gaia/commit/a25c7d26c42f8ec31efc56892631f4779a71e17d

Comment 12

[Eric Pang [:epang] UX]

Comment on attachment 8566703 [details]
private-browsing-card-view.png

Sounds good, thanks Sam!

Comment 13

[Chris Lord [:cwiiis]]

Seems this hasn't actually been uplifted to 2.2 yet, n?bajaj in case this has slipped the net.

Comment 14

[Kevin Grandon :kgrandon]

Comment on attachment 8566192 [details] [review]
[gaia] sfoster:private-browser-task-manager-overlay-bug-1133826 > mozilla-b2g:master

(In reply to Chris Lord [:cwiiis] from comment #13)
> Seems this hasn't actually been uplifted to 2.2 yet, n?bajaj in case this
> has slipped the net.

Oh, I thought this has made it =( Flipping the needinfo to a 2.2 uplift approval request as this is part of a new feature.


[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): Feature implementation.
[User impact] if declined: Poor private browsing experience.
[Testing completed]: Manual and unit testing.
[Risk to taking this patch] (and alternatives if risky): Low risk, smallish patch and has been baking on master for a while.
[String changes made]: None.

Comment 15

[Ryan VanderMeulen [:RyanVM]]

v2.2: https://github.com/mozilla-b2g/gaia/commit/92287222077c8b2717807107ca36859a9587ac77

Comment 16

[Shally Li（leave from Mozilla）]

This bug has been verified as "pass" on latest nightly build of Flame v2.2&master.

STR:
1.Open Browser app
2.Tap 'New private window'.
3.Long tap Home button to go to task manager, or tap '...' menu icon and tap 'Show Windows'.

Actual results: On cards view/'Show Windows' view, the browser private window icon overlays as expected.
See attachment: verified_Flame_v2.2.png
Reproduce rate: 0/10


Device: Flame v2.2 (Verified) 
Build ID               20150715002506
Gaia Revision          84d0c76370dcd3d25813b00de55194730884355b
Gaia Date              2015-07-09 13:09:14
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/a5db6d9850f6
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150715.040736
Firmware Date          Wed Jul 15 04:07:49 EDT 2015
Bootloader             L1TC000118D0

Device: Flame master (Verified)
Build ID               20150715160204
Gaia Revision          b9968cdc4a1dee49848fed6159a59c378cea062d
Gaia Date              2015-07-15 12:13:34
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/49683d4e9ebd
Gecko Version          42.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150715.192231
Firmware Date          Wed Jul 15 19:22:42 EDT 2015
Bootloader             L1TC000118D0

Comment 17

[Shally Li（leave from Mozilla）]

Attachment: verified_Flame_v2.2.png