Implement "Desktop Welcome Pages" feature (v2)

[zenparsing]

Resolves brave/brave-browser#40157
Resolves brave/brave-browser#42562

(for Brave employees)
Privacy / Security review

• v1 https://github.com/brave/reviews/issues/1705
• v2 https://github.com/brave/reviews/issues/1758
• v3 https://github.com/brave/reviews/issues/1848

Submitter Checklist:

• I confirm that no security/privacy review is needed and no other type of reviews are needed, or that I have requested them
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally:
  • npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
  • npm run presubmit wiki, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

• Visit brave://getting-started
• Verify the page loads correctly and that all "browser action" buttons on the page work as expected.
• Enable the flag #brave-show-getting-started-page and restart the browser.
• Visit brave://welcome
• Navigate through the welcome UI and click the "Finish" button.
• Verify that brave://getting-started is loaded correctly.

[brave-builds]

A Storybook has been deployed to preview UI for the latest push

[cdesouza-chromium]

Looks really good @zenparsing. I left a few comments, but this is really well done.

[bsclifton]

Working through Chromium rebase right now - then will take a look at new comments 😄

[diracdeltas]

QA test plan should include what happens if the page is not available (for instance internet disabled)

[github-actions]

[puLL-Merge] - brave/brave-core@26154

Description

This PR adds support for a new WebUI-based education/onboarding page in Brave Browser. The education page can display content from Brave's education server (browser-education.brave.com) and allow users to trigger various browser actions like opening the wallet, rewards panel, VPN panel, or AI chat.

Possible Issues

1. The hardcoded education server URL (browser-education.brave.com) could lead to issues if the domain changes in the future.
2. The timeout duration for server health checks is hardcoded to 2 seconds, which may be too short in some network conditions.

Security Hotspots

1. Message passing between iframe and parent window requires careful origin validation to prevent cross-site scripting attacks.
2. Iframe sandbox permissions should be carefully reviewed to ensure minimum required permissions are granted.
3. The education content server needs to be properly secured as it can send commands that trigger browser actions.

Changes

Changes

1. CODEOWNERS Updates

• Added security team oversight for browser command handler and education URLs

2. New Browser Command Framework

• Added new BraveBrowserCommandHandler to safely handle commands from education content
• Implemented command validation and execution logic
• Supported commands: open wallet, rewards, VPN, AI chat

3. Education Page Infrastructure

• New WebUI component for displaying education content in an iframe
• Server health checking to ensure content availability
• Integration with browser features through Mojo interfaces

4. Welcome Page Integration

• Modified welcome flow to optionally show education page upon completion
• Feature flag control via kShowGettingStartedPage

sequenceDiagram
    participant WelcomeUI
    participant BrowserProxy
    participant WebUI
    participant Server
    participant Browser
    
    WelcomeUI->>BrowserProxy: getWelcomeCompleteURL()
    BrowserProxy->>WebUI: Check if education enabled
    WebUI->>Server: Health check request
    Server-->>WebUI: Response
    WebUI-->>BrowserProxy: Return education URL if healthy
    BrowserProxy-->>WelcomeUI: URL response
    WelcomeUI->>Browser: Navigate to education page
    Browser->>Server: Load education content
    Server-->>Browser: Education content
    Note over Browser: User interacts with education content
    Browser->>Browser: Handle education commands

Loading

[kdenhartog]

All of my comments have been addressed and so have @diracdeltas

Also verified that matomo isn't accessible and has been removed site side for this subdomain.

This checks off all the things for privacy and security reviews so approving

[bsclifton]

There are a few TODOs before merging:

• Need to look at the browser tests - I was having trouble with these locally. Specifically, npm run test -- brave_browser_tests --filter="BraveEducationPageUIBrowserTest.*"
• Updating test plan as @diracdeltas shared above to account for what happens when network is disconnected

[bsclifton]

Circling back - no update needed for test plan as this is loaded by the customer AFTER existing welcome experience happens 😄

[brave-builds]

Released in v1.77.2

[kjozwiak]

Verification PASSED on Win 11 x64 using the following build(s):

Brave | 1.77.33 Chromium: 133.0.6943.54 (Official Build) nightly (64-bit)
-- | --
Revision | f3ef3d8f315fd70c52dacb37981f31a53a8f0b49
OS | Windows 11 Version 24H2 (Build 26100.2894)

Basic Functionality Verifications

Test Case #1 - Refreshing brave://getting-started randomizes order

• visit brave://getting-started and ensured the page loads without any issues
• refresh brave://getting-started several times and ensure that various features being mentioned are randomized re: order
• as per @timchilds, the randomization was to remove any bias on having the same features above the fold

refreshRandomize.mp4

Test Case #2 - Clicking on See a better Web via Ad Blocking section

• visit brave://getting-started and ensured the page loads without any issues
• click on See a better Web via the Ad Blocking section under brave://getting-started
• ensure that the following link is opened in a new tab (confirmed by @bsclifton that the correct search term is being used)

https://search.brave.com/search?q=Best%20cheap%20laptops&source=welcomePages&summary=1

adblockingClick.mp4

Test Case #3 - Clicking on Open Brave Wallet via Wallet section

• visit brave://getting-started and ensured the page loads without any issues
• click on Open Brave Wallet via the Wallet section under brave://getting-started
• ensure that brave://wallet/crypto/onboarding/welcome is opened without any issues
• ensured that brave://wallet/crypto/unlock & brave://wallet/crypto is opened if a wallet already exists
  • Quick Note: just double checking there's no issues but this isn't a valid case as new users won't have wallets created

Opening brave://wallet/crypto/onboarding/welcome via new profile

walletClick.mp4

Opening brave://wallet/crypto/unlock & brave://wallet/crypto via existing profile

walletClickExists.mp4

Test Case #4 - Clicking on Open Brave Rewards via Rewards section

• visit brave://getting-started and ensured the page loads without any issues
• click on Open Brave Rewards via the Rewards section under brave://getting-started
• ensure that rewards panel is opened without any issues
• ensured that you can run through the onboarding using the rewards panel without any issues

Opening rewards panel via new profile

rewardsClick.mp4

Opening rewards panel via existing profile

rewardsClickExists.mp4

Test Case #5 - Clicking on Open Firewall + VPN via Multi-Device VPN section

• visit brave://getting-started and ensured the page loads without any issues
• click on Open Firewall + VPN via the Multi-Device VPN section under brave://getting-started
• ensure that VPN panel is opened without any issues

Opening VPN panel via new profile

VPNClick.mp4

Opening VPN panel via existing profile

VPNClickExisting.mp4

Test Case #6 - Clicking on Chat with Leo via Built-in AI section

• visit brave://getting-started and ensured the page loads without any issues
• click on Chat with Leo via the Built-in AI section under brave://getting-started
• ensure that Leo is opened via the side panel without any issues

Opening Leo side panel via new profile

LeoClicked.mp4

Opening Leo side panel via existing profile

LeoClickedExisting.mp4

Test Case #7 - Access page while offline/no internet connection

Checking offline as requested by @diracdeltas as per #26154 (comment).

• disabled the internet/network on the machine and launched 1.77.33 Chromium: 133.0.6943.54
• ensured that brave://welcome is loaded without issues
• visited brave://getting-started and ensured that there's no obvious issues like crashes due to the page not loading
• refreshed the page several times and ensured it wasn't being displayed/didn't cause any issues
• re-enabled the internet/network and ensured that brave://getting-started retrieved the page
• clicked on a few of the feature buttons and ensured they were correctly being triggered

offlineExample.mp4

brave://welcome --> brave://getting-started flow

• launched 1.77.33 Chromium: 133.0.6943.54
• opened brave://flags and enabled #brave-show-getting-started-page (restarted the browser)
• went through brave://welcome and ensured that brave://getting-started was opened
• went through all the different buttons and ensured that links/tabs/panels were being opened without issues

WelcomeFlow.mp4

Also ensured that tabs are being opened without any issues via vertical tabs when running through #27497 (comment).