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

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 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.

Pushed by dgottwald@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/9267221b3d84 Update the about:privatebrowsing design for photon. r=johannh

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?

(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?

> (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]

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.