1361986 - Implement photon design for about:privatebrowsing

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P1)

Description

[Dão Gottwald [:dao]]

mockup: https://mozilla.invisionapp.com/share/ZKBC94BPQ#/screens/229751570_Private_Browsing

Comment 1

[Dão Gottwald [:dao]]

Attachment: Bug 1361986 - Update the about:privatebrowsing design for photon.

Review commit: https://reviewboard.mozilla.org/r/136132/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/136132/

Comment 2

[Johann Hofmann [:johannh]]

Comment on attachment 8864447 [details]
Bug 1361986 - Update the about:privatebrowsing design for photon.

https://reviewboard.mozilla.org/r/136132/#review139204

r=me with the overflow fixed. Also please note that the general font weight seems a bit too bold on my machine (especially compared with the mockups), but that's something we can also refine later on.

::: browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css:14
(Diff revision 1)
>  }
>  
>  html.private {
> -  --in-content-page-color: #beb8cc;
> -  --in-content-text-color: #beb8cc;
> -  --in-content-page-background: #1c023c;
> +  --in-content-page-color: white;
> +  --in-content-text-color: white;
> +  --in-content-page-background: #25003e;

Are we not defining CSS variables for colors anymore?

::: toolkit/themes/shared/in-content/info-pages.inc.css
(Diff revision 1)
>    flex-direction: column;
>    box-sizing: border-box;
>    min-height: 100vh;
> -  padding-top: 0;
> +  padding: 0 48px;
> -  padding-bottom: 0;
> -  padding-inline-start: calc(48px + 4.6em);

This padding was keeping the icons from overflowing out of the window on small window sizes. We should probably keep it or at least fix the issue.

Comment 3

[Johann Hofmann [:johannh]]

Comment on attachment 8864447 [details]
Bug 1361986 - Update the about:privatebrowsing design for photon.

https://reviewboard.mozilla.org/r/136132/#review139204

> Are we not defining CSS variables for colors anymore?

Oh, nvm this, I thought I had deleted it but mozreview submitted anyway.

Comment 4

[Dão Gottwald [:dao]]

Comment on attachment 8864447 [details]
Bug 1361986 - Update the about:privatebrowsing design for photon.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/136132/diff/1-2/

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9267221b3d84
Update the about:privatebrowsing design for photon. r=johannh

Comment 6

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/9267221b3d84

Comment 7

[Brindusa Tot, Desktop QA]

Attachment: PB_OnOffTrackingProtectionButton.jpg

Johann, 

While verifying this on the latest Nightly, 55.0a1, build ID 20170523030206, I noticed that the 'Tracking Protection on/off' slider on the PB page, set to off position, has a different color(brighter) than the one shown in the image from the invisionapp link provided. Please see the attached screenshot.

Also, the shape of the ON/OFF slider is a little different - it seems to be shorter and wider.

Are these differences intentional?

Comment 8

[Johann Hofmann [:johannh]]

(In reply to Brindusa Tot[:brindusat] from comment #7)
> Created attachment 8870414 [details]
> PB_OnOffTrackingProtectionButton.jpg
> 
> Johann, 
> 
> While verifying this on the latest Nightly, 55.0a1, build ID 20170523030206,
> I noticed that the 'Tracking Protection on/off' slider on the PB page, set
> to off position, has a different color(brighter) than the one shown in the
> image from the invisionapp link provided. Please see the attached screenshot.
> 
> Also, the shape of the ON/OFF slider is a little different - it seems to be
> shorter and wider.
> 
> Are these differences intentional?

Not that I know of, we just missed it. Can you make a new bug for making this button look exactly like the mockups please?

Comment 9

[Fahima Zulfath]

> (In reply to Brindusa Tot[:brindusat] from comment #7)
> > Created attachment 8870414 [details]
> > PB_OnOffTrackingProtectionButton.jpg
> > 
> > Johann, 
> > 
> > While verifying this on the latest Nightly, 55.0a1, build ID 20170523030206,
> > I noticed that the 'Tracking Protection on/off' slider on the PB page, set
> > to off position, has a different color(brighter) than the one shown in the
> > image from the invisionapp link provided. Please see the attached screenshot.
> > 
> > Also, the shape of the ON/OFF slider is a little different - it seems to be
> > shorter and wider.
> > 
> > Are these differences intentional?
> 
> Not that I know of, we just missed it. Can you make a new bug for making
> this button look exactly like the mockups please?

Managed to reproduce the issue on an affected build, on Windows 10x64.
Firefox 55.0b4, Build ID: 20170622104007
Firefox 56.0a1, Build ID: 20170622030208
I hope now its properly aligned with shape, color, etc in latest version. It looks like the left side image of attachment 8870414 [details].

[Testday - 20170623]

Comment 10

[Brindusa Tot, Desktop QA]

Verified on latest Nightly 56.0a1, on Windows 10 x 64, Mac OS X 10.12 and Ubuntu 16.04 x64.

Logged bug 1378799 for the issue described in comment 7.