Implement photon design for about:privatebrowsing

VERIFIED FIXED in Firefox 55

Status

()

Firefox
Theme
P1
normal
VERIFIED FIXED
3 months ago
22 days ago

People

(Reporter: dao, Assigned: dao)

Tracking

(Blocks: 1 bug)

Trunk
Firefox 55
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox55 verified)

Details

(Whiteboard: [photon-visual][p2])

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(2 attachments)

(Assignee)

Description

3 months ago
mockup: https://mozilla.invisionapp.com/share/ZKBC94BPQ#/screens/229751570_Private_Browsing
(Assignee)

Updated

3 months ago
Summary: about:privatebrowsing design update → Implement photon design for about:privatebrowsing
(Assignee)

Updated

3 months ago
Flags: qe-verify+
Comment hidden (mozreview-request)

Updated

3 months ago
Iteration: --- → 55.5 - May 15
Priority: -- → P1
QA Contact: brindusa.tot

Comment 2

3 months ago
mozreview-review
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.
Attachment #8864447 - Flags: review?(jhofmann) → review+

Comment 3

3 months ago
mozreview-review-reply
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 hidden (mozreview-request)

Comment 5

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

Comment 6

3 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/9267221b3d84
Status: ASSIGNED → RESOLVED
Last Resolved: 3 months ago
status-firefox55: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 55
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?
(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

a month ago
> (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]
status-firefox55: fixed → verified
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.
Status: RESOLVED → VERIFIED

Updated

22 days ago
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.