Update onboarding to new design and flow

Description

Update the onboarding UI/UE to the new design and flow.

• First run dialog for Windows/macOS/Linux will be hidden/disabled https://github.com/brave/brave-browser/issues/27225
• brave://welcome will be shown as the first screen on first launch (after successful installation)
• brave://welcome will give users the ability to Set Brave as Default or skip to next screen
• Second screen will give users the ability import from the browsers installed on their machine: Chrome, Chrome Beta, Chrome Canary, Edge, Internet Explorer, Firefox, Opera, and Vivaldi. The default browser will be default selected.
• If there is more than one user profile in Chromium based browsers, we will show an additional selection screen to allow which profiles to import. Multiple selection and import of all profiles are supported.
• If there are no browsers to import with the main use case being Safari import, then users will fallback to selecting theme color https://github.com/brave/brave-browser/issues/27170
• There will be a confirmation screen after import.
• The final screen will show Help Improve Brave screen. https://github.com/brave/brave-browser/issues/27126
• After completing the onboarding, users will be taken to the New tab page.

Actual result:

Expected result:

https://www.figma.com/file/MFHpcXJMg2RUQpUJMAZZ4R/Desktop-Onboarding?node-id=3325%3A42022&t=FNxONWq75FP9PByP-0

Reproduces how often:

Brave version (brave://version info)

Version/Channel Information:

• Can you reproduce this issue with the current release? n/a
• Can you reproduce this issue with the beta channel? yes
• Can you reproduce this issue with the nightly channel? yes

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? n/a
• Does the issue resolve itself when disabling Brave Rewards? n/a
• Is the issue reproducible on the latest version of Chrome? n/a

Miscellaneous Information:

Related issues: https://github.com/brave/brave-core/pull/16208 https://github.com/brave/brave-browser/issues/27126 https://github.com/brave/brave-browser/issues/27253

https://github.com/brave/brave-core/pull/16164 https://github.com/brave/brave-browser/issues/26851 https://github.com/brave/brave-browser/issues/27060 https://github.com/brave/brave-browser/issues/27061 https://github.com/brave/brave-browser/issues/27105

[LaurenWags]

Removing QA/Blocked as required uplifts (https://github.com/brave/brave-core/pull/16321) to 1.47.x were done

[MadhaviSeelam]

Verification In progress using

Brave | 1.47.136 Chromium: 108.0.5359.128 (Official Build) beta (64-bit)
-- | --
Revision | 1cd27afdb8e5d057070c0961e04c490d2aca1aa0-refs/branch-heads/5359@{#1185}
OS | Windows 11 Version 21H2 (Build 22000.1335)

and

Brave | 1.47.148 Chromium: 109.0.5414.46 (Official Build) beta (64-bit)
-- | --
Revision | 6e36b77363ef3febbe792af680fa1367993ddcf0-refs/branch-heads/5414@{#709}
OS | Windows 11 Version 21H2 (Build 22000.1335)

Test Case 1: New onboarding UI - brave://welcome page upon Brave launch - PASSED

1. Install 1.47.136
2. launch Brave
3. verified First run dialog no longer displayed
4. click Set Brave as default browser

Confirmed new onboarding UI is shown - brave://welcome page with Set Brave as a default browser and Skip buttons as the first screen

Test Case 2: Single browser and Single profile

Case 1: Second screen Import Settings will give users the ability to import and most recent used browser is set as a default - Edge - Failed

• Pre-requisite: Microsoft Edge with a single profile with bookmarks, extensions, saved passwords

1. continue from Test Case 1
   • brave://welcome page - Set Brave as default browser
2. verified the second page listed pre-installed non-brave browsers - Microsoft Edge

####Confirmed Import Settings, displayed after setting Brave as default *Chromium based browser was checked by default on Import Settings page - Failed *Most recent used browser was Edge, and it was not checked by default - Failed

Filed: *https://github.com/brave/brave-browser/issues/27522

Case 2 Set Brave as default and complete import from Microsoft Edge - PASSED

1. continue from Case 1
   • brave://welcome page - import settings screen
2. select Microsoft Edge
3. click Import button
4. open brave://settings/appearance

• Confirmed Setup complete screen is displayed
• Confirmed Help improve Brave screen is displayed
• Confirmed Brave is your default browser message is shown

step 2-3	result	result	result

Case 3: Verify default settings in the Help improve brave better screen - PASSED

1. continue Case 2
   • Help improve Brave better screen is displayed
2. verified Send diagnostic reports if you experience a crash or freeze entry is checked as default
3. verified Share completely private and anonymous product insights about what features are being used by Brave's users entry is checked as default
4. clicked brave://settings/privacy link beneath the Finish button
5. brave://settings/privacy tab opened in a separate tab
6. confirmed Automatically send diagnostic reports setting is enabled
7. confirmed Allow privacy-preserving product analytics (P3A) setting is enabled
8. click Privacy Policy link
9. confirmed Brave Browser Privacy Policy page opened in a new-tab —> brave://settings/privacy
10. return to Help improve Brave better screen and click Learn more` links
    • Send diagnostic reports if you experience a crash or freeze redirected to:
      • https://support.brave.com/hc/en-us/articles/360017905872-How-do-I-enable-or-disable-automatic-crash-reporting
    • Share completely private and anonymous product insights about what features are being used by Brave's users redirected to:
      • https://support.brave.com/hc/en-us/articles/9140465918093-What-is-P3A-in-Brave-

Confirmed links on the page worked as expected

step 2-4	step 5-7	step 8-9	step 10a	step 10b

Case 4: Verify Bookmarks, Extensions & Saved passwords are successfully imported from Edge - FAILED

1. continue from Case 3:
   • Help improve Brave screen is displayed
2. click Finish button
3. confirmed new tab page is loaded as a first screen
4. confirmed imported Bookmarks shown on the bookmarks bar and brave://bookmarks
5. confirmed saved passwords shown in brave://settings/passwords
6. confirmed history shown in brave://history

####Confirmed Bookmarks imported successfully ####Confirmed Saved passwords imported successfully ****Extensions are not imported - *https://github.com/brave/brave-browser/issues/27487

bookmarks	saved passwords	history

Case 5: Uncheck default settings in the Help improve brave better screen - PASSED

1. new profile
2. launch Brave
3. click Set Brave as default browser
4. select Microsoft Edge
5. click Import button
6. confirmed Setup complete page shown
7. uncheck Send diagnostic reports if you experience a crash or freeze entry
8. uncheck Share completely private and anonymous product insights about what features are being used by Brave's users entry
9. click Finish
10. confirmed new tab page with imported bookmarks shown on the bookmarks bar
11. open brave://settings/privacy in a new tab page

####Confirmed Automatically send diagnostic reports setting is disabled ####Confirmed Allow privacy-preserving product analytics (P3A) setting is disabled

step 3	step 4-5	step 6	step 7-9	step 10	result

Case 6: Do not set Brave as default & do not import - PASSED

Prerequisite: Microsoft Edge as a default browser in `Windows` settings

1. new profile
2. launch Brave
3. click Skip on brave://welcome screen
4. click Skip on Import Settings screen
5. click finish
6. new-tab page is shown
7. go to brave://settings/getStarted

####Confirmed no profile data is imported. ####Confirmed Brave://settings/getStarted page shown Make default button

Prerequisite	step 3	step 4	step 5	step 6	step 7

Filed: *https://github.com/brave/brave-browser/issues/27554

Case 7: Set Brave as default but do not import - PASSED

1. new profile
2. launch Brave
3. click Set Brave as default browser on brave://welcome screen
4. click Skip on Import Settings screen
5. click finish
6. new tab page is shown without any Profile data
7. go to brave://settings/getStarted

Confirmed Brave is your default browser message shown

step 3	step 4	step 5	step 6	result

Case 8: Do not set Brave as default but import Profile data - PASSED

Prerequisite: Microsoft Edge as a default browser in `Windows` settings

1. new profile
2. launch Brave
3. click Skip on brave://welcome screen
4. click Import on Import Settings screen
5. check Microsoft Edge
6. check the checkbox for Microsoft Edge Profile 2
7. click import profiles button
8. click Finish
9. go to brave://settings/getStarted

Confirmed new tab page shown with Profile data is imported (Bookmarks, Save passwords)

*Brave://settings/getStarted page should show Make default button instead page shows Brave is your default browser message.

pre-req	step 3	step 4	step 5	step 7	step 8	result	result

Case 9: Set Brave as default and skip import from onboarding UI, but proceed to import from brave://settings/importData - Failed

Prerequisite: Make sure Microsoft Edge as a default browser in `Windows

1. new profile
2. launch Brave
3. click Set Brave as default browser
4. click Skip
5. click Finish
6. verified new tab page opened as expected
7. brave://settings/getStarted
8. Brave is your default browser message shown
9. open brave://settings/importData
10. select Microsoft Edge Profile 1
11. click Import

####Confirmed bookmarks are imported and shown in the Bookmarks side panel *Extensions are not imported - *https://github.com/brave/brave-browser/issues/27487 *Click Import button on Import bookmarks and settings modal failed to dismiss- *https://github.com/brave/brave-browser/issues/27425

prerequisite	step 3	step 4	step 5	step 6	step 8	step 9-10	step 11

Test Case 3: Single browser & Multiple profiles

Case 1: Set Brave as default and import from multiple profiles - Microsoft Edge - PASSED

Pre-requisite: Created 4 Profiles in Microsoft Edge with following:

• Profile 1: Bookmarks, Saved Passwords, Extensions, History
• Profile 2: Bookmarks
• Profile 3: Bookmarks
• Profile 4: No favorites

1. new profile
2. launch Brave
3. click Set Brave as default browser
4. select Microsoft Edge
5. clicked Import
6. confirmed all 4 profiles (Profile 1 - 4) displayed on Select profile to import modal
7. clicked Select All to select
8. unchecked Profile 3
9. clicked Back
10. navigated to Import Settings screen
11. clicked Import again
12. selected Profiles 1, 2, & 4
13. clicked Import profiles
14. confirmed Setup Complete confirmation screen shown
15. click Finish
16. new tab page shown with bookmarks on the bookmarks bar

####Confirmed Bookmarks from Profile 1 and 2 are successfully imported ####Confirmed Saved passwords from Profile 1 are successfully imported

step3	step 5	step 7	step 8	step 9-10	step 12	step 15	step 16	passwords

Test Case 4: Multiple browsers and Multiple profiles

Case 1: Verify all installed non-Brave browsers are shown in the Import Settings page - FAILED

Pre-requisites: Have import supported browsers installed Chrome, Chrome Beta, Chrome Dev, Chrome Canary, Edge, Firefox, Opera, and Vivaldi

1. new profile
2. launch Brave
3. click Set Brave as default browser button on brave://welcome page

Confirmed Chrome, Chrome Canary, Edge, Firefox, Opera, and Vivaldi browsers listed

*Chrome Beta and Chrome Dev are not listed

ex1	ex2

Filed *https://github.com/brave/brave-browser/issues/27500

Case 2: Do not show all Chrome channels in the Select profile to import screen when Chrome (Stable) selected in Import Settings page - FAILED

1. new profile
2. launch Brave
3. click Set Brave as default browser button on brave://welcome page
4. select Chrome
5. click Import

*Profiles from Chrome Beta and Dev channels also rendered. Should list only Chrome stable channel - Chrome Beta Person 1 - Chrome Dev Person 1 - Chrome Dev Person 2

Case 3: Set Brave as default and import from multiple browsers with multiple profiles - Select individually -PASSED

Firefox

Create 4 Firefox profiles: Profile 1: Bookmarks, Extensions, Saved passwords Profile 2: Bookmarks, Extensions Profile 3: Bookmarks Profile 4: No data

1. new profile
2. launch Brave
3. click Set Brave as default browser button on brave://welcome page
4. select Mozilla Firefox on Import Settings screen
5. click Import
6. click Select All
7. click Import profiles
8. click Finish

step 3	step 4-5	step 5	step 6-7	step 8	result

Chrome Stable - PASSED

Profile 1: Bookmarks, Saved passwords, Extensions Profile 2: Bookmarks Profile 3: No Data Profile 4: Bookmarks Profile 5: Bookmarks

1. new profile
2. launch Brave
3. click Set Brave as default browser
4. select Chrome
5. click Import
6. click Select All and unselect Chrome Person 2
7. click Import profiles
8. click Finish

####Confirmed Bookmarks, saved passwords are successfully imported from Profile 1 ####Confirmed Bookmarks from Profiles 4 & 5 are imported ####Confirmed Profile 2 data is unchecked, so no data is imported

step 3	step 4-5	step 6-7	step 8	result	ex

Case 4: Set Brave as default and import from multiple browsers with multiple profiles simultaneously - FAILED

Chrome Canary Profile 1: Bookmarks & Saved passwords Profile 2: Bookmarks

1. new profile
2. launch Brave
3. click Set Brave as default browser
4. select multiple browsers simultaneously - Chrome Canary, Chrome Beta, Chrome Dev & Opera

*Could not select multiple browsers simultaneously

step 3	step 4-5

Chrome Beta - Failed - not listed

Profile 1: Extensions & Saved passwords

• Chrome Beta channel is not listed

Chrome Dev - Failed

Profile 1: Bookmarks, Saved passwords, Extensions Profile 2: Bookmarks

Vivaldi

Create 3 Vivaldi profiles Profile 1: Bookmarks, Extensions, Saved passwords Profile 2: Bookmarks Profile 3: No data

Filed: *https://github.com/brave/brave-browser/issues/27500

Test Case 5: Upgrade

Case 1: Previously onboarding is completed - PASSED

1. Install 1.46.144
2. launch Brave
3. click Skip welcome tour link
4. new tab page shown as expected
5. close Brave
6. rename the profile to Beta
7. launch Brave

Confirmed new onboarding UI is not displayed.

step 1	step 2-3	step 4	step 7	result

Case 2: If previously onboarding is not completed, new onboarding UI is shown -PASSED

1. Install 1.46.144
2. launch Brave
3. do not click Skip welcome tour link and close Brave
4. rename the profile to Beta
5. launch Brave

Confirmed new onboarding UI is displayed.

step 1	step 3	result	result

Test Case 6: Background animations only work if hardware acceleration is enabled and “Reduce motion” flag disabled

Case 1: Disable HW accel --disable-gpu - PASSED

new profile launch Brave with Disable HW accel flag --disable-gpu

Confirmed no animation played upon Brave launch on brave://welcome - first screen

disable

https://user-images.githubusercontent.com/98358127/209826909-110cf367-254a-441d-af38-c36a27c5be60.mp4

Case 2: Enable HW accel and Reduced motion should be checked

new profile launch Brave with `Enable HW accel and Reduced motion should be checked`

default https://user-images.githubusercontent.com/98358127/209826897-3eb81dc1-ddd5-4540-97df-93b68ffc28ee.mp4

Bugs filed:

• https://github.com/brave/brave-browser/issues/27500
• https://github.com/brave/brave-browser/issues/27522
• https://github.com/brave/brave-browser/issues/27425
• https://github.com/brave/brave-browser/issues/27556
• https://github.com/brave/brave-browser/issues/27557

Encountered:

• https://github.com/brave/brave-browser/issues/27487

Closed: Invalid

• https://github.com/brave/brave-browser/issues/27554
• https://github.com/brave/brave-browser/issues/27499

Related: https://github.com/brave/brave-browser/issues/27558

• https://github.com/brave/brave-browser/issues/27491
• https://github.com/brave/brave-browser/issues/27493