1659711 - The "Start Browsing" button from the "Privacy" branch is wrongly displayed over the animation

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect)

Description

[Marius Coman [:mcoman], Ecosystem QA]

Attachment: rec of the issue.gif

[Affected versions]:

• Firefox Beta 80.0 RC build (Build ID: 20200817172600)

[Affected Platforms]:

• All Windows

[Prerequisites]:

• Have a Firefox profile with the following pref in the "about:config" page:
  • browser.aboutwelcome.overrideContent set to {"id": "multi-stage-welcome-importable-theme", "template": "multistage", "screens": [{"id":"AW_GET_STARTED", "order": 0, "content": {"zap": true, "title": {"string_id": "onboarding-multistage-welcome-header"}, "subtitle": {"string_id": "onboarding-multistage-welcome-subtitle"}, "primary_button": {"label": {"string_id": "onboarding-multistage-welcome-primary-button-label"}, "action": {"navigate": true}},"secondary_button": {"text": {"string_id": "onboarding-multistage-welcome-secondary-button-text"}, "label": {"string_id": "onboarding-multistage-welcome-secondary-button-label"}, "position": "top", "action": {"type": "OPEN_URL", "addFlowParams": true, "data": {"args": "https://accounts.firefox.com/?service=sync&action=email&context=fx_desktop_v3&entrypoint=activity-stream-firstrun&style=trailhead", "where": "current"}}}}}, {"id": "AW_IMPORT_SETTINGS", "order": 1, "content": { "zap": true, "disclaimer": {"string_id": "onboarding-import-sites-disclaimer"}, "title": {"string_id": "onboarding-multistage-import-header"}, "subtitle": {"string_id": "onboarding-multistage-import-subtitle"}, "tiles": {"type": "topsites"}, "primary_button": { "label": {"string_id": "onboarding-multistage-import-primary-button-label"}, "action": {"type": "SHOW_MIGRATION_WIZARD", "navigate": true}}, "secondary_button": { "label": {"string_id": "onboarding-multistage-import-secondary-button-label"}, "action": {"navigate": true}}}}, {"id": "AW_CHOOSE_THEME", "order": 2, "content": { "zap": true, "title": {"string_id": "onboarding-multistage-theme-header"}, "subtitle": {"string_id": "onboarding-multistage-theme-subtitle"}, "tiles": {"type": "theme", "action": {"theme": "<event>"}, "data": [{"theme": "light", "label": {"string_id": "onboarding-multistage-theme-label-light"}}, {"theme": "dark", "label": {"string_id": "onboarding-multistage-theme-label-dark"}}]}, "primary_button": {"label": {"string_id": "onboarding-multistage-theme-primary-button-label"}, "action": { "navigate": true}}, "secondary_button": { "label": {"string_id": "onboarding-multistage-theme-secondary-button-label"}, "action": {"theme": "default", "navigate": true}}}}, { "id": "AW_PRIVACY", "order": 3, "content": { "title": "Automatic Privacy", "subtitle": "Firefox automatically blocks trackers and malware, and keeps companies from secretly following you around. When you see the shield while browsing, Firefox is protecting you.", "tiles": {"type": "video", "media_type": "privacy", "source": { "default" : "resource://activity-stream/data/content/assets/privacy-onboarding.webm", "dark" : "resource://activity-stream/data/content/assets/privacy-onboarding-dark.webm"}}, "primary_button": { "label": "Start Browsing", "action": {"navigate": true}}}}]}

[Steps to reproduce]:

1. Open the browser with the profile from prerequisites.
2. Navigate to the "about:welcome" page and click the "Start Setup" button.
3. Observe the "Start Browsing" button's position.

[Expected result]:

• The "Start Browsing" button is displayed under the animation.

[Actual result]:

• The "Start Browsing" button is wrongly displayed over the animation.

[Additional Notes]:

• This issue is more visible if the browser's "Light" theme is activated.
• This issue may be also reproducible on Mac and Linux, but these platforms are not is scope at this moment.
• Attached a screen recording of the issue:

Comment 1

[Emily McMinn :emcminn]

Hi Marius, this was actually intentional! The button was intended to sit on top of the animation, which fades out to background color. The fade is a bit more aggressive in dark mode, since the color contrast is higher, so one possibility would be to match the more intense fade in light mode.

Eric, could you confirm that would be ok? I'll attach some screenshots of what the result would be.

Comment 2

[Emily McMinn :emcminn]

Attachment: privacy-dark.mov

current dark mode animation

Comment 3

[Emily McMinn :emcminn]

Attachment: privacy-light.mov

Suggested change to light mode animation

Comment 4

[Eric Pang [:epang] UX]

(In reply to Emily McMinn :emcminn from comment #1)

Hi Marius, this was actually intentional! The button was intended to sit on top of the animation, which fades out to background color. The fade is a bit more aggressive in dark mode, since the color contrast is higher, so one possibility would be to match the more intense fade in light mode.

Eric, could you confirm that would be ok? I'll attach some screenshots of what the result would be.

I'm good with matching the more aggressive fade, thanks Emily!

Comment 5

[Emily McMinn :emcminn]

Attachment: Bug 1659711 - Match fade for light and dark mode privacy screens

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a1d9f08caae7
Match fade for light and dark mode privacy screens r=pdahiya

Comment 7

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/a1d9f08caae7

Comment 8

[Marius Coman [:mcoman], Ecosystem QA]

I have verified that this issue is no longer reproducible with the latest Firefox Nightly (81.0a1 Build ID - 20200824094458) installed, on Windows 10 x64, Ubuntu 18.04 x64 and Mac 10.15. Now, the "Start Browsing" button's position respects the specs from comment 3.