Brave VPN card widget in NTP

[simonhong]

Resolves brave/brave-browser#41778

Screen.Recording.2024-11-04.130356.mp4

TODOs:

• Add BraveVPNController to BrowserWindowFeatures brave-browser#41973
• Provide a way to launch vpn panel with server selection page brave-browser#41991
• Polish UI
• Fix build failure on Linux/Android

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:

Sign-up, primary flow, and basic functions

1. Launch with clean profile
2. Click promotion card's Free trial button and check account page is loaded
3. Load vpn credentials from account page
4. Check card shows main page (toggle button)
5. Turn on/off with that toggle button and check vpn is connected/disconnected
6. Click Change link and check vpn panel is opened with server selection
7. Change to another region and check vpn card also has same state

Check consistency of VPN widget with toolbar panel, hamburger menu, and taskbar

1. Turn VPN widget on and check that on state matches toolbar panel, hamburger menu, and taskbar item on Windows and on macOS menu bar (Settings > Control Center > menu bar Show in menu bar) .
2. Turn VPN widget off and check that off state matches too toolbar panel, hamburger menu, and taskbar item on Windows and macOS control center.

NOTE: This f/u PR(#26496) should be verified together.

Widget display for New and Existing users
New users

1. Launch older version than 1.75.8 that doesn't have vpn card with clean profile
2. Ensure rewards/talk card widget are visible and shutdown
3. Install the newer version than 1.75.8 that includes vpn card
4. Launch browser and notice that VPN widget appears in the foreground

Existing users

1. Launch older version than 1.75.8 that doesn't have vpn card with clean profile
2. Hide rewards and talk card widgets and shutdown
3. Install the newer version than 1.75.8 that includes vpn card
4. Launch browser and notice that VPN widget appears in the foreground

Linux

1. Ensure that widget doesn't appear on Linux

[brave-builds]

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

[rmcfadden3]

Per DM with @rebron, some suggested changes:

• Change both card headers to Brave VPN (so basically drop the word Firewall, per branding changes we've made on brave.com/firewall-vpn)
• Change card label in NTP dashboard to Brave VPN as well
• Change 3rd bullet in NTP card from Many more great privacy features to instead say Protect every app on your device

And, I know the Rewards card copy isn't necessarily under review here, but noting the word watching seems off. We don't have video adds, so you're not really watching anything. Suggest replacing the word watching with the word viewing instead.

[diracdeltas]

cc @bridiver for review

[github-actions]

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

Description

This PR adds a new Brave VPN widget to the New Tab Page (NTP) in Brave Browser. The widget allows users to view and control their VPN connection status directly from the NTP.

Changes

Changes

1. browser/brave_content_browser_client.cc:

   • Added registration for the Brave VPN service handler.

2. browser/brave_profile_prefs.cc:

   • Added a new preference for showing the Brave VPN widget on the NTP.

3. browser/extensions/api/settings_private/brave_prefs_util.cc:

   • Added the new Brave VPN preference to the allowlist.

4. browser/ui/webui/new_tab_page/brave_new_tab_message_handler.cc:

   • Added handling for the new Brave VPN preference.

5. browser/ui/webui/new_tab_page/brave_new_tab_page_handler.cc:

   • Added methods to handle Brave VPN-related actions (refreshing state, launching panel, opening account page).

6. browser/ui/webui/new_tab_page/brave_new_tab_ui.cc:

   • Added support for the Brave VPN widget, including binding the VPN service interface.

7. components/brave_new_tab_ui/:

   • Added new components, actions, reducers, and API handlers for the Brave VPN widget.
   • Updated existing components to include the new VPN widget.

8. components/constants/pref_names.h:

   • Added a new preference name for showing the Brave VPN widget.

9. components/definitions/newTab.d.ts:

   • Updated TypeScript definitions to include Brave VPN-related types.

10. components/resources/brave_vpn_strings.grdp:

    • Added new localized strings for the Brave VPN widget.

11. components/webui/webui_resources.cc:

    • Added new localized strings for the Brave VPN widget.

Possible Issues

1. The PR introduces a new feature that is conditionally compiled based on the ENABLE_BRAVE_VPN flag. Ensure that this flag is properly set in all build configurations where the feature should be available.

2. The new VPN widget might affect the layout and performance of the New Tab Page. Thorough testing should be done to ensure it doesn't negatively impact the user experience.

Security Hotspots

1. The PR introduces new mojo interfaces for the VPN service. Ensure that proper security measures are in place to prevent unauthorized access to VPN-related functionality.

2. The VPN connection status is being exposed on the New Tab Page. Verify that sensitive information (such as IP addresses or server details) is not inadvertently exposed to potential attackers.

[brave-builds]

Released in v1.75.8

[MadhaviSeelam]

Verification PASSED using

Brave | 1.75.44 Chromium: 131.0.6778.85 (Official Build) nightly (64-bit)
-- | --
Revision | f14243b5f56477f2b635b3babf9d37521a02737e
OS | Windows 11 Version 24H2 (Build 26100.2314)

1. Installed 1.75.44
2. launched Brave
3. completed onboarding

Case 1: Initial sell screen/ NOT Subscribed state - Passed

1. confirmed Brave VPN card widget is shown in the NTP
2. confirmed Brave VPN widget is displayed in the foreground with Rewards and Talk widgets in the background
3. confirmed the card widget named Brave VPN and the design matched to the screenshot
4. when clicked Start free trial, button it navigated to check out page - https://account.brave.com/intent=checkout&product=vpn - Failed
5. confirmed when clicked on 3-dot menu, Hide Brave VPN option is shown
6. confirmed new Brave VPN icon is shown in the toolbar

step 1	step 2-3	step 4	step 5	step 6

Case 2: Customize Dashboard - Card functionality - Passed

1. continued from Case 1
   • Brave VPN card widget is shown in NTP
2. Clicked Customize in the NTP
3. clicked Cards
4. confirmed Brave VPN card widget is shown
5. clicked Hide button
6. confirmed Brave VPN card widget is hidden in the NTP
7. clicked Add button
8. confirmed Brave VPN card widget is shown in the NTP
9. click Clock in the Dashboard
10. enable Show Clock
11. confirmed Clock is shown above the Talk card and Brave VPN positioned as expected.
12. turned Off Cards toggle,
13. Hide and Add functionality for Talk, Rewards & Brave VPN worked as expected

step 5	step 6	step 7	step 9	step 11	step 12	step 13

Case 3: Sign up/Subscribe to Brave VPN via NTP widget as a New user - Passed

1. continued from Case 2
   -Brave VPN widget is shown in NTP
2. clicked Start free trial
3. confirmed checkout page is loaded -https://account.brave.com/intent=checkout&product=vpn - Failed
4. for this testing purposes, logged into account.bravesoftware.com
5. entered [email protected] the email field
6. completed purchase for Brave VPN
7. confirmed green credentials loaded message shown
8. opened a new tab page
9. confirmed Brave VPN widget is shown in disconnected state with toggle off in the NTP
10. confirmed Brave VPN card matches to Figma designs in the disconnected state
11. confirmed default locale (USA) is shown on the card as expected.
12. confirmed new VPN icon in the tool bar shown in disconnected state
13. confirmed when clicked on VPN icon in the toolbar, VPN panel shows disconnected state

step 1	step 2	step 7	step 8	step 10	step 11 - 13

Case 4: Enable Brave VPN via NTP card widget in the NTP - Passed

1. Continue from case 2:
   • Subscribed to Brave VPN
   • Not enabled yet
2. toggled On in the Brave VPN card widget
3. confirmed Connecting state shown when toggled On
4. confirmed Brave VPN successfully connected.
5. confirmed Brave VPN icon shown connected state in the Card
6. confirmed Brave VPN icon in the toolbar shown green checkmark for connected status
7. clicked hamburger menu >Brave VPN
8. confirmed connected status is shown
9. clicked Taskbar to view Brave VPN icon
10. confirmed Brave VPN icon in the toolbar is shown green checkmark for connected status
11. confirmed Brave VPN wireguard protocol is enabled in brave://settings/system

step 1	step 3	step 6	step 8	step 10	step 11

Case 5: Default WireGuard and fallback to IKEv2 connections - Passed

1. New profile
2. opened brave://settings/system
3. verified Use Wireguard protocol in Brave VPN is disabled
4. logged into Brave VPN as an existing user and refreshed VPN
5. enabled VPN connection via Brave VPN card widget
6. confirmed Wireguard protocol is enabled
7. disabled VPN via VPN icon in the toolbar
8. toggle off Wireguard protocol in brave://settings/system
9. enabled VPN connection via Brave VPN card widget
10. confirmed VPN connected successfully with IKEv2 fallback

step 4	step 5	step 6	step 7	step 8	step 9	step 10

Case 6 - Multiple Profiles - Passed

1. New profile
2. click Microsoft Edge >>Import (3 Profiles) >>Import Profiles >>Finish
3. added another profile with Citron theme via hamburger menu
4. logged into VPN as an existing user [email protected]
5. clicked to Refresh Firewall + VPN
6. confirmed Profile 1 shows Brave VPN card widget in disconnected state
7. opened rest of MS Edge profiles and Profile 2
8. enabled VPN for profile 1.
9. confirmed when VPN enabled, rest of the profiles as well
10. confirmed when VPN disabled, rest of the profiles as well

2024-11-30_13h39_33.mp4

Case 7 - Server Selection - Passed

1. continue from Case 6:
   • verified VPN region shown as default region USA (optimal) VPN card widget
2. visited whatismyipaddress.com
3. confirmed USA region (Ashburn) is shown
4. clicked Change link in the VPN card widget
5. hover over Spain and clicked Connect button
6. connected to Spain region
7. confirmed VPN card widget shows correct Spain region
8. reloaded whatismyipaddress.com page
9. confirmed correct region Spain shown
10. switched to different region South Africa and hover over and clicked Johannesburg
11. confirmed correct region South Africa - Johannesburg server is shown on the VPN card widget
12. reloaded whatismyipaddress.com page and confirmed correct region shown - South Africa

step 1	step 3	step 5	step 7	step 9	step 10	step 11	step 12

Case 8 - Can't connect to server UI - Passed

new profile

subscribed to VPN as an existing user on account.bravesoftware.com ([email protected])

enabled VPN via VPN card widget

successfully connected to default optimal server selection in the USA region

disabled VPN

unplugged your network cable (or disable Wi-Fi)

toggled ON via VPN card widget

waited until it errors out with a red icon on the toolbar VPN icon and taskbar tray icon

switched to different server via Change server link

confirmed Can't connect to server message is shown

plugged network cable back in OR enable Wi-Fi (disabled in step 6)

clicked the Try again button

Confirm successfully connected to VPN

2024-12-02_20h04_09.mp4

Case 9 -Connection consistency - Passed

1. New profile
2. logged into Brave VPN as an existing user (on account.bravesoftware.com)
3. Turn on Brave VPN via Brave VPN card widget.
4. confirmed Brave VPN is shown connected state visually on the card widget, taskbar icon & toolbar VPN icon
5. confirmed connected state matched on toolbar panel, toolbar VPN icon, hamburger menu and taskbar item - failed
6. disconnected VPN
7. confirmed Brave VPN is shown in disconnected state on toolbar panel, toolbar VPN icon, hamburger menu and taskbar item

2024-11-30_17h02_31.mp4

Case 10 Upgrade - Passed

1. Installed 1.75.7
2. launched Brave
3. logged into account.bravesoftware.com as an existing user ([email protected])
4. clicked Refresh Firewall + VPN
5. connected to VPN via toolbar VPN panel
6. upgraded to latest nightly 1.75.59 via brave://settings/help
7. clicked new tab page
8. confirmed Brave VPN card widget is shown on NTP
9. confirmed VPN is still toggled on
10. disconnected VPN via VPN card widget on NTP
11. confirmed able to connect to VPN via card widget, hamburger menu, toolbar VPN panel

upgrade.mp4

[MadhaviSeelam]

Verification PASSED using

Brave | 1.75.65 Chromium: 131.0.6778.85 (Official Build) nightly (arm64)
-- | --
Revision | 968ebf429bada6fabd3444b10bcce905fe9fb8f6
OS | macOS Version 14.6.1 (Build 23G93)

Case 1: Initial sell screen/ NOT Subscribed state - PASSED

0. deleted previous BraveVPN OS-configs
1. Installed 1.75.65
2. launched Brave
3. completed onboarding process
4. confirmed Brave VPN card widget is shown in the NTP
5. confirmed Brave VPN widget is displayed in the foreground with Rewards and Talk widgets in the background
6. confirmed the card widget named Brave VPN and the design matched to the screenshot
7. when clicked Start free trial, button it navigated to check out page - https://account.brave.com/intent=checkout&product=vpn
8. confirmed when clicked on 3-dot menu, Hide Brave VPN option is shown
9. confirmed new Brave VPN icon is shown in the toolbar

step 4 -6	step 7	step 8	step 9

Case 2: Sign up/Subscribe to Brave VPN via NTP widget as a New user -PASSED

1. continued from Case 1
   -Brave VPN widget is shown in NTP
2. clicked Start free trial
3. confirmed checkout page is loaded -https://account.brave.com/intent=checkout&product=vpn
4. for this testing purposes, logged into account.bravesoftware.com
5. entered [email protected] the email field
6. completed purchase for Brave VPN
7. confirmed green credentials loaded message shown
8. opened a new tab page (refresh the page)
9. confirmed Brave VPN widget is shown in disconnected state with toggle off in the NTP
10. confirmed Brave VPN card matches to Figma designs in the disconnected state
11. confirmed default locale (USA) is shown on the card as expected.
12. confirmed new VPN icon in the tool bar shown in disconnected state
13. confirmed when clicked on VPN icon in the toolbar, VPN panel shows disconnected state

step 1	step 3	step 5	step 7	step 10-12	step 13-14

Case 3: Enable Brave VPN via NTP card widget in the NTP - PASSED

1. Continue from case 2:
   • Subscribed to Brave VPN
   • Not enabled yet
   • Brave VPN config was not added in network settings
2. toggled On in the Brave VPN card widget
3. confirmed Connecting state shown when toggled On
4. clicked Allow in "Brave Browser Nightly" Would like to Add VPN Configurations dialog
5. confirmed BraveVPNNightly is in connected state in Network settings
6. confirmed Brave VPN icon shown connected state in the Card
7. confirmed VPN connected default region USA with optimal text
8. confirmed Brave VPN icon in the toolbar shown green checkmark for connected status
9. confirmed network settings show NY server selection as a default
10. clicked hamburger menu >Brave VPN
11. confirmed connected status is shown

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

Case 4 - Server Selection - PASSED

1. continue from Case 3:
   • verified VPN region shown as default region USA (optimal) VPN card widget
2. visited browserleaks.com/dns
3. confirmed USA region (New York) is shown
4. confirmed local (ISP) DNS resolvers are now shown. They are from the connected VPN region
5. opened NTP and clicked Change link in the VPN card widget
6. hover over Spain and clicked Connect button
7. connected to Spain region
8. confirmed VPN card widget shows correct Spain region
9. reloaded browserleaks.com/dns page
10. confirmed correct region Spain shown
11. switched to different region South Africa and hover over and clicked Johannesburg
12. confirmed correct region South Africa - Johannesburg server is shown on the VPN card widget
13. reloaded whatismyipaddress.com page and confirmed correct region shown - South Africa

step 1	step 3-4	step 6	step 7-8	step 10	step 11	step 12	step 13

Case 5 - Can't connect to server UI -PASSED

new profile

subscribed to VPN as a new user on account.bravesoftware.com ([email protected])

enabled VPN via VPN card widget

successfully connected to default optimal server selection in the USA region

disabled VPN

unplugged your network cable (or disable Wi-Fi)

toggled ON via VPN card widget

waited until it errors out with a red icon on the toolbar VPN icon

switched to different server via Change server link

confirmed Can't connect to server message is shown

plugged network cable back in OR enable Wi-Fi (disabled in step 6)

clicked the Try again button

Confirm successfully connected to VPN

Screen.Recording.2024-12-02.at.2.57.29.PM.mov

Case 6 -Connection consistency - PASSED

1. continued from Case 5
2. logged into Brave VPN as an existing user (on account.bravesoftware.com)
3. Turn on Brave VPN via Brave VPN card widget.
4. confirmed Brave VPN is shown connected state visually on the card widget, taskbar icon & toolbar VPN icon
5. confirmed connected state matched on toolbar panel, toolbar VPN icon, hamburger menu and Apple System settings
6. disconnected VPN
7. confirmed Brave VPN is shown in disconnected state on toolbar panel, toolbar VPN icon, hamburger menu and Apple System settings

Screen.Recording.2024-12-02.at.5.32.29.PM.mov

Case 7: Customize Dashboard - Card functionality - Passed

1. continued from Case 1
   • Brave VPN card widget is shown in NTP
2. Clicked Customize in the NTP
3. clicked Cards
4. confirmed Brave VPN card widget is shown
5. clicked Hide button
6. confirmed Brave VPN card widget is hidden in the NTP
7. clicked Add button
8. confirmed Brave VPN card widget is shown in the NTP
9. click Clock in the Dashboard
10. enable Show Clock
11. confirmed Clock is shown above the Talk card and Brave VPN positioned as expected.
12. turned Off Cards toggle,
13. Hide and Add functionality for Talk, Rewards & Brave VPN worked as expected

step 5	step 6	step 7	step 9	step 11	step 13

Case 8 Upgrade - Passed

1. Installed 1.75.7
2. launched Brave
3. logged into account.bravesoftware.com as an existing user ([email protected])
4. clicked Refresh Firewall + VPN
5. connected to VPN via toolbar VPN panel
6. upgraded to latest nightly 1.75.59 via brave://settings/help
7. clicked new tab page
8. confirmed Brave VPN card widget is shown on NTP
9. confirmed VPN is still toggled on
10. disconnected VPN via VPN card widget on NTP
11. confirmed able to connect/disconnect to VPN via card widget, hamburger menu, toolbar VPN panel and apple settings

Screen.Recording.2024-12-03.at.11.19.42.AM.mov

[MadhaviSeelam]

Verification Passed using

Brave	1.75.64 Chromium: 131.0.6778.85 (Official Build) nightly (64-bit) 
Revision	6f4d9580aeb2e6742c0565cebc20fb4511e3a853
OS	Linux

1. Installed 1.75.64
2. launched Brave
3. relaunched Brave to pull in griffin
4. competed onboarding
5. Confirmed no Brave VPN card widget shown
6. verified Talk and Rewards widgets are shown as expected