Brave VPN card widget in NTP

browser/brave_content_browser_client.cc

@@ -642,6 +642,12 @@ void BraveContentBrowserClient::RegisterWebUIInterfaceBrokers(
           .Add<brave_new_tab_page::mojom::PageHandlerFactory>()
           .Add<brave_news::mojom::BraveNewsController>();
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  if (brave_vpn::IsBraveVPNFeatureEnabled()) {
+    ntp_registration.Add<brave_vpn::mojom::ServiceHandler>();
+  }
+#endif
+
   if (base::FeatureList::IsEnabled(features::kBraveNtpSearchWidget)) {
     ntp_registration.Add<searchbox::mojom::PageHandler>();
   }

browser/brave_profile_prefs.cc

@@ -38,6 +38,7 @@
 #include "brave/components/brave_shields/content/browser/brave_shields_p3a.h"
 #include "brave/components/brave_shields/core/common/pref_names.h"
 #include "brave/components/brave_sync/brave_sync_prefs.h"
+#include "brave/components/brave_vpn/common/buildflags/buildflags.h"
 #include "brave/components/brave_wallet/browser/brave_wallet_prefs.h"
 #include "brave/components/brave_wayback_machine/buildflags/buildflags.h"
 #include "brave/components/brave_webtorrent/browser/buildflags/buildflags.h"
@@ -367,6 +368,10 @@ void RegisterProfilePrefs(user_prefs::PrefRegistrySyncable* registry) {
   registry->RegisterBooleanPref(kNewTabPageShowBraveTalk, true);
   registry->RegisterBooleanPref(kNewTabPageHideAllWidgets, false);
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  registry->RegisterBooleanPref(kNewTabPageShowBraveVPN, true);
+#endif
+
 // Private New Tab Page
 #if !BUILDFLAG(IS_ANDROID)
   brave_private_new_tab::prefs::RegisterProfilePrefs(registry);

browser/extensions/api/settings_private/brave_prefs_util.cc

@@ -176,6 +176,8 @@ const PrefsUtil::TypedPrefMap& BravePrefsUtil::GetAllowlistedKeys() {
       settings_api::PrefType::kBoolean;
   (*s_brave_allowlist)[kNewTabPageShowBraveTalk] =
       settings_api::PrefType::kBoolean;
+  (*s_brave_allowlist)[kNewTabPageShowBraveVPN] =
+      settings_api::PrefType::kBoolean;
   (*s_brave_allowlist)[kNewTabPageShowsOptions] =
       settings_api::PrefType::kNumber;
 #if BUILDFLAG(ENABLE_EXTENSIONS)

browser/ui/webui/new_tab_page/brave_new_tab_message_handler.cc

@@ -23,6 +23,7 @@
 #include "brave/components/brave_news/common/pref_names.h"
 #include "brave/components/brave_perf_predictor/common/pref_names.h"
 #include "brave/components/brave_search_conversion/pref_names.h"
+#include "brave/components/brave_vpn/common/buildflags/buildflags.h"
 #include "brave/components/constants/pref_names.h"
 #include "brave/components/ntp_background_images/browser/url_constants.h"
 #include "brave/components/ntp_background_images/browser/view_counter_service.h"
@@ -86,6 +87,9 @@ base::Value::Dict GetPreferencesDictionary(PrefService* prefs) {
                 prefs->GetBoolean(brave_news::prefs::kBraveNewsOptedIn));
   pref_data.Set("hideAllWidgets", prefs->GetBoolean(kNewTabPageHideAllWidgets));
   pref_data.Set("showBraveTalk", prefs->GetBoolean(kNewTabPageShowBraveTalk));
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  pref_data.Set("showBraveVPN", prefs->GetBoolean(kNewTabPageShowBraveVPN));
+#endif
   pref_data.Set(
       "showSearchBox",
       prefs->GetBoolean(brave_search_conversion::prefs::kShowNTPSearchBox));
@@ -329,6 +333,12 @@ void BraveNewTabMessageHandler::OnJavascriptAllowed() {
       kNewTabPageShowBraveTalk,
       base::BindRepeating(&BraveNewTabMessageHandler::OnPreferencesChanged,
                           base::Unretained(this)));
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  pref_change_registrar_.Add(
+      kNewTabPageShowBraveVPN,
+      base::BindRepeating(&BraveNewTabMessageHandler::OnPreferencesChanged,
+                          base::Unretained(this)));
+#endif
   pref_change_registrar_.Add(
       kNewTabPageHideAllWidgets,
       base::BindRepeating(&BraveNewTabMessageHandler::OnPreferencesChanged,
@@ -452,6 +462,10 @@ void BraveNewTabMessageHandler::HandleSaveNewTabPagePref(
     settings_key = kNewTabPageHideAllWidgets;
   } else if (settings_key_input == "showBraveTalk") {
     settings_key = kNewTabPageShowBraveTalk;
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  } else if (settings_key_input == "showBraveVPN") {
+    settings_key = kNewTabPageShowBraveVPN;
+#endif
   } else if (settings_key_input == "showSearchBox") {
     settings_key = brave_search_conversion::prefs::kShowNTPSearchBox;
   } else if (settings_key_input == "promptEnableSearchSuggestions") {

browser/ui/webui/new_tab_page/brave_new_tab_page_handler.cc

@@ -24,6 +24,7 @@
 #include "brave/components/brave_search_conversion/pref_names.h"
 #include "brave/components/brave_search_conversion/types.h"
 #include "brave/components/brave_search_conversion/utils.h"
+#include "brave/components/brave_vpn/common/buildflags/buildflags.h"
 #include "brave/components/constants/pref_names.h"
 #include "brave/components/l10n/common/localization_util.h"
 #include "brave/components/ntp_background_images/browser/ntp_background_images_data.h"
@@ -34,7 +35,10 @@
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/search_engines/template_url_service_factory.h"
 #include "chrome/browser/themes/theme_syncable_service.h"
+#include "chrome/browser/ui/browser_window/public/browser_window_features.h"
+#include "chrome/browser/ui/browser_window/public/browser_window_interface.h"
 #include "chrome/browser/ui/chrome_select_file_policy.h"
+#include "chrome/browser/ui/tabs/public/tab_interface.h"
 #include "chrome/common/pref_names.h"
 #include "chrome/grit/generated_resources.h"
 #include "components/omnibox/browser/omnibox_view.h"
@@ -55,6 +59,12 @@
 #include "url/gurl.h"
 #include "url/origin.h"
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+#include "brave/browser/brave_vpn/brave_vpn_service_factory.h"
+#include "brave/browser/ui/brave_vpn/brave_vpn_controller.h"
+#include "brave/components/brave_vpn/browser/brave_vpn_service.h"
+#endif
+
 namespace {
 
 bool IsNTPPromotionEnabled(Profile* profile) {
@@ -313,6 +323,36 @@ void BraveNewTabPageHandler::SearchWhatYouTyped(const std::string& host,
   web_contents_->OpenURL(params, /*navigation_handle_callback=*/{});
 }
 
+void BraveNewTabPageHandler::RefreshVPNState() {
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  auto* vpn_service =
+      brave_vpn::BraveVpnServiceFactory::GetForProfile(profile_);
+  vpn_service->ReloadPurchasedState();
+#endif
+}
+
+void BraveNewTabPageHandler::LaunchVPNPanel() {
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  auto* tab = tabs::TabInterface::GetFromContents(web_contents_);
+  CHECK(tab);
+  tab->GetBrowserWindowInterface()
+      ->GetFeatures()
+      .GetBraveVPNController()
+      ->ShowBraveVPNBubble(/* show_select */ true);
+#endif
+}
+
+void BraveNewTabPageHandler::OpenVPNAccountPage() {
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  auto* tab = tabs::TabInterface::GetFromContents(web_contents_);
+  CHECK(tab);
+  tab->GetBrowserWindowInterface()
+      ->GetFeatures()
+      .GetBraveVPNController()
+      ->OpenVPNAccountPage();
+#endif
+}
+
 bool BraveNewTabPageHandler::IsCustomBackgroundImageEnabled() const {
   if (profile_->GetPrefs()->IsManagedPreference(GetThemePrefNameInMigration(
           ThemePrefInMigration::kNtpCustomBackgroundDict))) {

browser/ui/webui/new_tab_page/brave_new_tab_page_handler.h

@@ -74,6 +74,9 @@ class BraveNewTabPageHandler : public brave_new_tab_page::mojom::PageHandler,
                           bool ctrl_key,
                           bool meta_key,
                           bool shift_key) override;
+  void RefreshVPNState() override;
+  void LaunchVPNPanel() override;
+  void OpenVPNAccountPage() override;
 
   // Observe BraveNTPCustomBackgroundService.
   void OnBackgroundUpdated();

browser/ui/webui/new_tab_page/brave_new_tab_ui.cc

@@ -39,6 +39,12 @@
 #include "mojo/public/cpp/bindings/pending_receiver.h"
 #include "ui/webui/resources/cr_components/searchbox/searchbox.mojom.h"
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+#include "brave/browser/brave_vpn/brave_vpn_service_factory.h"
+#include "brave/components/brave_vpn/browser/brave_vpn_service.h"
+#include "brave/components/brave_vpn/common/brave_vpn_utils.h"
+#endif
+
 using ntp_background_images::NTPCustomImagesSource;
 
 BraveNewTabUI::BraveNewTabUI(content::WebUI* web_ui, const std::string& name)
@@ -73,6 +79,17 @@ BraveNewTabUI::BraveNewTabUI(content::WebUI* web_ui, const std::string& name)
 
   AddBackgroundColorToSource(source, web_contents);
 
+  // Lottie animations tick on a worker thread and requires the document CSP to
+  // be set to "worker-src blob: 'self';".
+  source->OverrideContentSecurityPolicy(
+      network::mojom::CSPDirectiveName::WorkerSrc,
+      "worker-src blob: chrome://resources 'self';");
+
+  source->OverrideContentSecurityPolicy(
+      network::mojom::CSPDirectiveName::TrustedTypes,
+      "trusted-types static-types lottie-worker-script-loader lit-html-desktop "
+      "default; ");
+
   source->AddBoolean(
       "featureCustomBackgroundEnabled",
       !profile->GetPrefs()->IsManagedPreference(GetThemePrefNameInMigration(
@@ -91,6 +108,14 @@ BraveNewTabUI::BraveNewTabUI(content::WebUI* web_ui, const std::string& name)
       "featureFlagSearchWidget",
       base::FeatureList::IsEnabled(features::kBraveNtpSearchWidget));
 
+  source->AddBoolean("vpnWidgetSupported",
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+                     brave_vpn::IsBraveVPNFeatureEnabled()
+#else
+                     false
+#endif
+  );
+
   web_ui->AddMessageHandler(base::WrapUnique(
       BraveNewTabMessageHandler::Create(source, profile, was_restored)));
   web_ui->AddMessageHandler(
@@ -140,6 +165,19 @@ void BraveNewTabUI::BindInterface(
       /*omnibox_controller=*/nullptr);
 }
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+void BraveNewTabUI::BindInterface(
+    mojo::PendingReceiver<brave_vpn::mojom::ServiceHandler>
+        pending_vpn_service_handler) {
+  auto* profile = Profile::FromWebUI(web_ui());
+  CHECK(profile);
+  auto* vpn_service = brave_vpn::BraveVpnServiceFactory::GetForProfile(profile);
+  if (vpn_service) {
+    vpn_service->BindInterface(std::move(pending_vpn_service_handler));
+  }
+}
+#endif
+
 void BraveNewTabUI::CreatePageHandler(
     mojo::PendingRemote<brave_new_tab_page::mojom::Page> pending_page,
     mojo::PendingReceiver<brave_new_tab_page::mojom::PageHandler>

browser/ui/webui/new_tab_page/brave_new_tab_ui.h

@@ -11,6 +11,7 @@
 
 #include "brave/components/brave_new_tab_ui/brave_new_tab_page.mojom.h"
 #include "brave/components/brave_news/common/brave_news.mojom.h"
+#include "brave/components/brave_vpn/common/buildflags/buildflags.h"
 #include "chrome/browser/ui/webui/searchbox/realbox_handler.h"
 #include "content/public/browser/web_ui_controller.h"
 #include "mojo/public/cpp/bindings/pending_receiver.h"
@@ -19,6 +20,10 @@
 #include "ui/webui/mojo_web_ui_controller.h"
 #include "ui/webui/resources/cr_components/searchbox/searchbox.mojom.h"
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+#include "brave/components/brave_vpn/common/mojom/brave_vpn.mojom.h"  // nogncheck
+#endif
+
 namespace brave_news {
 class BraveNewsController;
 }  // namespace brave_news
@@ -45,6 +50,11 @@ class BraveNewTabUI : public ui::MojoWebUIController,
   void BindInterface(mojo::PendingReceiver<searchbox::mojom::PageHandler>
                          pending_page_handler);
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  void BindInterface(mojo::PendingReceiver<brave_vpn::mojom::ServiceHandler>
+                         pending_vpn_service_handler);
+#endif
+
  private:
   // new_tab_page::mojom::PageHandlerFactory:
   void CreatePageHandler(

components/brave_new_tab_ui/BUILD.gn

@@ -14,6 +14,7 @@ transpile_web_ui("brave_new_tab_ui") {
   public_deps = [
     ":mojom_js",
     "//brave/components/brave_news/common:mojom_js",
+    "//brave/components/brave_vpn/common/mojom:mojom_js",
   ]
   if (!is_android && !is_ios) {
     public_deps += [

components/brave_new_tab_ui/actions/brave_vpn_actions.ts

@@ -0,0 +1,21 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import { createAction } from 'redux-act'
+import * as BraveVPN from '../api/braveVpn'
+
+export const initialize = createAction<BraveVPN.PurchasedState>('initialize')
+export const toggleConnection = createAction('toggleConnection')
+export const launchVPNPanel = createAction('launchVPNPanel')
+export const openVPNAccountPage = createAction('openVPNAccountPage')
+export const purchasedStateChanged = createAction<BraveVPN.PurchasedState>(
+  'purchasedStateChanged'
+)
+export const connectionStateChanged = createAction<BraveVPN.ConnectionState>(
+  'connectionStateChanged'
+)
+export const selectedRegionChanged = createAction<BraveVPN.Region>(
+  'connectionStateChanged'
+)

components/brave_new_tab_ui/api/braveVpn.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as BraveVPN from 'gen/brave/components/brave_vpn/common/mojom/brave_vpn.mojom.m.js'
+// Provide access to all the generated types
+export * from 'gen/brave/components/brave_vpn/common/mojom/brave_vpn.mojom.m.js'
+
+export default function getVPNServiceHandler () {
+  return BraveVPN.ServiceHandler.getRemote()
+}

components/brave_new_tab_ui/api/getActions.ts

@@ -9,6 +9,7 @@ import * as gridSitesActions from '../actions/grid_sites_actions'
 import * as rewardsActions from '../actions/rewards_actions'
 import * as stackWidgetActions from '../actions/stack_widget_actions'
 import * as todayActions from '../actions/today_actions'
+import * as braveVPNActions from '../actions/brave_vpn_actions'
 import { NewTabActions } from '../constants/new_tab_types'
 import store from '../store'
 
@@ -29,6 +30,7 @@ export function getActionsForDispatch (dispatch: Dispatch) {
   const allActions = Object.assign({}, newTabActions, stackWidgetActions, gridSitesActions, rewardsActions)
   return {
     ...bindActionCreators(allActions, dispatch),
-    today: bindActionCreators(todayActions, dispatch)
+    today: bindActionCreators(todayActions, dispatch),
+    braveVPN: bindActionCreators(braveVPNActions, dispatch)
   }
 }

components/brave_new_tab_ui/api/initialData.ts

@@ -9,6 +9,8 @@ import * as privateTabDataAPI from './privateTabData'
 import * as wallpaper from './wallpaper'
 import * as newTabAdsDataAPI from './newTabAdsData'
 import getNTPBrowserAPI from './background'
+import getVPNServiceHandler, * as BraveVPN from '../api/braveVpn'
+import { loadTimeData } from '$web-common/loadTimeData'
 
 export type InitialData = {
   preferences: NewTab.Preferences
@@ -20,6 +22,7 @@ export type InitialData = {
   braveRewardsSupported: boolean
   braveTalkSupported: boolean
   searchPromotionEnabled: boolean
+  purchasedState: BraveVPN.PurchasedState
 }
 
 export type PreInitialRewardsData = {
@@ -56,7 +59,8 @@ export async function getInitialData (): Promise<InitialData> {
       braveTalkSupported,
       searchPromotionEnabled,
       braveBackgrounds,
-      customImageBackgrounds
+      customImageBackgrounds,
+      purchasedState
     ] = await Promise.all([
       preferencesAPI.getPreferences(),
       statsAPI.getStats(),
@@ -83,6 +87,15 @@ export async function getInitialData (): Promise<InitialData> {
       }),
       getNTPBrowserAPI().pageHandler.getCustomImageBackgrounds().then(({ backgrounds }) => {
         return backgrounds.map(background => ({ type: 'image', wallpaperImageUrl: background.url.url }))
+      }),
+      new Promise((resolve) => {
+        if (loadTimeData.getBoolean('vpnWidgetSupported')) {
+          getVPNServiceHandler().getPurchasedState().then(({state}) => {
+            resolve(state.state)
+          })
+        } else {
+          resolve(BraveVPN.PurchasedState.NOT_PURCHASED)
+        }
       })
     ])
     console.timeStamp('Got all initial data.')
@@ -95,7 +108,8 @@ export async function getInitialData (): Promise<InitialData> {
       customImageBackgrounds,
       braveRewardsSupported,
       braveTalkSupported,
-      searchPromotionEnabled
+      searchPromotionEnabled,
+      purchasedState
     } as InitialData
   } catch (e) {
     console.error(e)

components/brave_new_tab_ui/apiEventsToStore.ts

@@ -12,6 +12,7 @@ import * as newTabAdsDataAPI from './api/newTabAdsData'
 import getNTPBrowserAPI, { Background, CustomBackground } from './api/background'
 import { getInitialData, getRewardsInitialData, getRewardsPreInitialData } from './api/initialData'
 import * as backgroundData from './data/backgrounds'
+import { loadTimeData } from '$web-common/loadTimeData'
 
 async function updatePreferences (prefData: NewTab.Preferences) {
   getActions().preferencesUpdated(prefData)
@@ -71,6 +72,9 @@ export function wireApiEventsToStore () {
     getNTPBrowserAPI().addBackgroundUpdatedListener(onBackgroundUpdated)
     getNTPBrowserAPI().addCustomImageBackgroundsUpdatedListener(onCustomImageBackgroundsUpdated)
     getNTPBrowserAPI().addSearchPromotionDisabledListener(() => getActions().searchPromotionDisabled())
+    if (loadTimeData.getBoolean('vpnWidgetSupported')) {
+      getActions().braveVPN.initialize(initialData.purchasedState)
+    }
   })
   .catch(e => {
     console.error('New Tab Page fatal error:', e)