1641268 - UX papercuts on about:welcome first run (multistage)

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Aaron Benson]

1. Adjust left/right padding on buttons to 20px
2. Browser logo should persist at 60px below the top of the page through every step (currently the page shifts up on the importer screen)
3. Page background (default mode) should be #F9F9FA, same as toolbar background.
4. Top/bottom padding of the top site tiles on the importer screen is too much. Reduce to 20px
5. Clicking "Start Import" should not progress to New Tab until the importer wizard is completed.
6. Incorrect font-family. Should be using Metropolis.

Comment 1

[Punam Dahiya [:pdahiya]]

Attachment: Bug 1641268 - Multistage about:welcome UI updates

Comment 2

[Punam Dahiya [:pdahiya]]

Attachment: Bug 1641268 - Multistage about:welcome UI updates

Comment 3

[Punam Dahiya [:pdahiya]]

Opened Bug 1641651 for adding Metropolis as font-family. Bug 1639723 addresses Click of "Start Import" should not progress to New Tab until the importer wizard is completed.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2b61435dd03e
Multistage about:welcome UI updates r=emcminn

Comment 5

[Bogdan Tara[:bogdan_tara | bogdant]]

Backed out changeset 2b61435dd03e (bug 1641268) for browser_aboutwelcome_multistage.js failures

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&searchStr=linux%2C18.04%2Cx64%2Casan%2Copt%2Cmochitests%2Ctest-linux1804-64-asan%2Fopt-mochitest-browser-chrome-e10s-2%2Cm%28bc2%29&fromchange=8d8372333cb931781c0443e3d0f374ade0519521&tochange=c9e3fba165b23344e3f0ab121baf649026a05d62&selectedTaskRun=dViqMIZPQ-iE8ox-GRdpQg-0

Backout link: https://hg.mozilla.org/integration/autoland/rev/cc0edcb0aa0a043a2da87e40fc082d86294462d3

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=304234493&repo=autoland&lineNumber=2164

[task 2020-05-29T09:33:11.669Z] 09:33:11     INFO - TEST-START | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js
[task 2020-05-29T09:33:13.281Z] 09:33:13     INFO - GECKO(2428) | JavaScript error: resource://activity-stream/aboutwelcome/aboutwelcome.bundle.js, line 387: TypeError: can't access property "text", this.props.content.secondary_button is undefined
[task 2020-05-29T09:33:18.407Z] 09:33:18     INFO - TEST-INFO | started process screentopng
[task 2020-05-29T09:33:18.746Z] 09:33:18     INFO - TEST-INFO | screentopng: exit 0
[task 2020-05-29T09:33:18.747Z] 09:33:18     INFO - Buffered messages logged at 09:33:11
[task 2020-05-29T09:33:18.748Z] 09:33:18     INFO - Entering test bound test_Multistage_About_Welcome_branches
[task 2020-05-29T09:33:18.749Z] 09:33:18     INFO - Buffered messages logged at 09:33:12
[task 2020-05-29T09:33:18.750Z] 09:33:18     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | Should not render main.AW_STEP2 in multistage step 1 - true == true - 
[task 2020-05-29T09:33:18.751Z] 09:33:18     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | Should not render main.AW_STEP3 in multistage step 1 - true == true - 
[task 2020-05-29T09:33:18.752Z] 09:33:18     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | Navigated to a welcome screen - "about:welcome" == "about:welcome" - 
[task 2020-05-29T09:33:18.753Z] 09:33:18     INFO - Buffered messages logged at 09:33:13
[task 2020-05-29T09:33:18.753Z] 09:33:18     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | Should not render main.AW_STEP1 in multistage step 2 - true == true - 
[task 2020-05-29T09:33:18.754Z] 09:33:18     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | Should not render main.AW_STEP3 in multistage step 2 - true == true - 
[task 2020-05-29T09:33:18.754Z] 09:33:18     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | Should not render div.secondary-cta.top in multistage step 2 - true == true - 
[task 2020-05-29T09:33:18.755Z] 09:33:18     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | Navigated to a welcome screen - "about:welcome" == "about:welcome" - 
[task 2020-05-29T09:33:18.757Z] 09:33:18     INFO - Console message: [JavaScript Error: "TypeError: can't access property "text", this.props.content.secondary_button is undefined" {file: "resource://activity-stream/aboutwelcome/aboutwelcome.bundle.js" line: 387}]
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - renderSecondaryCTA@resource://activity-stream/aboutwelcome/aboutwelcome.bundle.js:387:7
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - render@resource://activity-stream/aboutwelcome/aboutwelcome.bundle.js:444:38
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - Ie@resource://activity-stream/vendor/react-dom.js:104:8
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - rh@resource://activity-stream/vendor/react-dom.js:103:334
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - zj@resource://activity-stream/vendor/react-dom.js:228:490
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - Th@resource://activity-stream/vendor/react-dom.js:152:225
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - tj@resource://activity-stream/vendor/react-dom.js:152:152
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - Te@resource://activity-stream/vendor/react-dom.js:146:151
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - Pg/<@resource://activity-stream/vendor/react-dom.js:61:68
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - unstable_runWithPriority@resource://activity-stream/vendor/react.js:25:260
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - Da@resource://activity-stream/vendor/react-dom.js:60:280
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - Pg@resource://activity-stream/vendor/react-dom.js:61:16
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - ha@resource://activity-stream/vendor/react-dom.js:60:451
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - @resource://activity-stream/vendor/react-dom.js:236:59
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - Ei@resource://activity-stream/vendor/react-dom.js:41:90
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - @resource://testing-common/content-task.js line 110 > eval:9:14
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - async*@resource://testing-common/content-task.js:111:29
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - MessageListener.receiveMessage*@resource://testing-common/content-task.js:64:19
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - 
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - Buffered messages finished
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - TEST-UNEXPECTED-FAIL | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | Uncaught exception - Should render div.multistageContainer in multistage step 3 - timed out after 50 tries.
[task 2020-05-29T09:33:18.759Z] 09:33:18     INFO - Leaving test bound test_Multistage_About_Welcome_branches
[task 2020-05-29T09:33:18.760Z] 09:33:18     INFO - Entering test bound test_AWMultistage_Primary_Action
[task 2020-05-29T09:33:19.082Z] 09:33:19     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | Stub was called - 
[task 2020-05-29T09:33:19.082Z] 09:33:19     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | send telemetry event - "AWPage:TELEMETRY_EVENT" == "AWPage:TELEMETRY_EVENT" - 
[task 2020-05-29T09:33:19.082Z] 09:33:19     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | click button event recorded in telemetry - "CLICK_BUTTON" == "CLICK_BUTTON" - 
[task 2020-05-29T09:33:19.082Z] 09:33:19     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | primary button click source recorded in telemetry - "primary_button" == "primary_button" - 
[task 2020-05-29T09:33:19.082Z] 09:33:19     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | MessageId sent in click event telemetry - "MULTI-STAGE-WELCOME_AW_STEP1" == "MULTI-STAGE-WELCOME_AW_STEP1" - 
[task 2020-05-29T09:33:19.082Z] 09:33:19     INFO - Leaving test bound test_AWMultistage_Primary_Action
[task 2020-05-29T09:33:19.082Z] 09:33:19     INFO - Entering test bound test_AWMultistage_Secondary_Open_URL_Action
[task 2020-05-29T09:33:19.629Z] 09:33:19     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | Stub called twice to handle Open_URL and Telemetry - 
[task 2020-05-29T09:33:19.629Z] 09:33:19     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | First Call handles special action - "AWPage:SPECIAL_ACTION" == "AWPage:SPECIAL_ACTION" - 
[task 2020-05-29T09:33:19.629Z] 09:33:19     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | Special action OPEN_URL event handled - "OPEN_URL" == "OPEN_URL" - 
[task 2020-05-29T09:33:19.629Z] 09:33:19     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | UTMTerm set in opened URL - 
[task 2020-05-29T09:33:19.629Z] 09:33:19     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | Second Call handles Telemetry event - "AWPage:TELEMETRY_EVENT" == "AWPage:TELEMETRY_EVENT" - 
[task 2020-05-29T09:33:19.630Z] 09:33:19     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | click button event recorded in Telemetry - "CLICK_BUTTON" == "CLICK_BUTTON" - 
[task 2020-05-29T09:33:19.630Z] 09:33:19     INFO - TEST-PASS | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | secondary button click source recorded in Telemetry - "secondary_button" == "secondary_button" - 
[task 2020-05-29T09:33:19.630Z] 09:33:19     INFO - Leaving test bound test_AWMultistage_Secondary_Open_URL_Action
[task 2020-05-29T09:33:19.737Z] 09:33:19     INFO - GECKO(2428) | MEMORY STAT | vsize 20975206MB | residentFast 1099MB
[task 2020-05-29T09:33:19.738Z] 09:33:19     INFO - TEST-OK | browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js | took 8067ms

Comment 6

[Punam Dahiya [:pdahiya]]

Updated patch that fixes failing test. Thanks

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/be5b74fc5731
Multistage about:welcome UI updates r=emcminn

Comment 8

[Alexandru Michis [:malexandru]]

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

Comment 9

[Robert Martin [:romartin], Ecosystem QA]

Attachment: Bottom top sites tile margin

I have verified the following using Firefox Beta 78.0b9 (Build ID: 202000619002543) on Windows 10 x64:

• Left and right padding for buttons is 20px.
• Browser logo has 60px top-margin on the importer page.
• Page background is #F9F9FA.
• Clicking the "Start wizard" does not progress to "about:home" unless the "Import wizard" is completed.

However, @Punam, I've noticed that the top margin for the top sites tiles is 20px, whilst the bottom margin is 26px. According to comment 0 it should be 20px for both top and bottom. Is this something that you reconsidered or would you like me to file a bug for this?

Note: I've attached a screenshot with the bottom margin.

Comment 10

[Punam Dahiya [:pdahiya]]

Hi Robert, margin around tiles should be fixed with https://bugzilla.mozilla.org/show_bug.cgi?id=1644614. Thanks!

Comment 11

[Robert Martin [:romartin], Ecosystem QA]

Thank you @Punam!
Based on the verification done in comment 9 and the fact that the top and bottom margin changes for the top sites tiles are tracked in this bug, I'm marking this issue as VERIFIED.