[NTP Next] Add shields stats

browser/ui/webui/brave_new_tab/BUILD.gn

@@ -30,6 +30,7 @@ source_set("brave_new_tab") {
     "//brave/components/brave_new_tab",
     "//brave/components/brave_new_tab:mojom",
     "//brave/components/brave_new_tab/resources:generated_resources",
+    "//brave/components/brave_perf_predictor/common",
     "//brave/components/brave_private_cdn",
     "//brave/components/brave_search_conversion",
     "//brave/components/l10n/common",

browser/ui/webui/brave_new_tab/DEPS

@@ -1,3 +1,4 @@
 include_rules = [
+  "+brave/components/brave_perf_predictor/common",
   "+brave/components/brave_private_cdn",
 ]

browser/ui/webui/brave_new_tab/new_tab_page_handler.cc

@@ -12,6 +12,7 @@
 #include "brave/browser/ui/webui/brave_new_tab/background_adapter.h"
 #include "brave/browser/ui/webui/brave_new_tab/custom_image_chooser.h"
 #include "brave/browser/ui/webui/brave_new_tab/top_sites_adapter.h"
+#include "brave/components/brave_perf_predictor/common/pref_names.h"
 #include "brave/components/brave_private_cdn/private_cdn_helper.h"
 #include "brave/components/brave_private_cdn/private_cdn_request_helper.h"
 #include "brave/components/brave_search_conversion/pref_names.h"
@@ -427,6 +428,27 @@ void NewTabPageHandler::SetClockFormat(const std::string& clock_format,
   std::move(callback).Run();
 }
 
+void NewTabPageHandler::GetShowShieldsStats(
+    GetShowShieldsStatsCallback callback) {
+  std::move(callback).Run(pref_service_->GetBoolean(kNewTabPageShowStats));
+}
+
+void NewTabPageHandler::SetShowShieldsStats(
+    bool show_shields_stats,
+    SetShowShieldsStatsCallback callback) {
+  pref_service_->SetBoolean(kNewTabPageShowStats, show_shields_stats);
+  std::move(callback).Run();
+}
+
+void NewTabPageHandler::GetShieldsStats(GetShieldsStatsCallback callback) {
+  auto stats = mojom::ShieldsStats::New();
+  stats->ads_blocked = pref_service_->GetUint64(kAdsBlocked) +
+                       pref_service_->GetUint64(kTrackersBlocked);
+  stats->bandwidth_saved_bytes = pref_service_->GetUint64(
+      brave_perf_predictor::prefs::kBandwidthSavedBytes);
+  std::move(callback).Run(std::move(stats));
+}
+
 void NewTabPageHandler::OnUpdate(UpdateObserver::Source update_source) {
   if (!page_.is_bound()) {
     return;
@@ -444,6 +466,9 @@ void NewTabPageHandler::OnUpdate(UpdateObserver::Source update_source) {
     case UpdateObserver::Source::kTopSitesPrefs:
       page_->OnTopSitesPrefsUpdated();
       break;
+    case UpdateObserver::Source::kShieldsStatsPrefs:
+      page_->OnShieldsStatsPrefsUpdated();
+      break;
   }
 }
 

browser/ui/webui/brave_new_tab/new_tab_page_handler.h

@@ -135,6 +135,10 @@ class NewTabPageHandler : public mojom::NewTabPageHandler {
   void GetClockFormat(GetClockFormatCallback callback) override;
   void SetClockFormat(const std::string& clock_format,
                       SetClockFormatCallback callback) override;
+  void GetShowShieldsStats(GetShowShieldsStatsCallback callback) override;
+  void SetShowShieldsStats(bool show_shields_stats,
+                           SetShowShieldsStatsCallback callback) override;
+  void GetShieldsStats(GetShieldsStatsCallback callback) override;
 
  private:
   void OnCustomBackgroundsSelected(ShowCustomBackgroundChooserCallback callback,

browser/ui/webui/brave_new_tab/new_tab_page_ui.cc

@@ -86,9 +86,15 @@ static constexpr webui::LocalizedString kStrings[] = {
     {"showClockLabel", IDS_NEW_TAB_SHOW_CLOCK_LABEL},
     {"showSearchBoxLabel", IDS_NEW_TAB_SHOW_SEARCH_BOX_LABEL},
     {"showSponsoredImagesLabel", IDS_NEW_TAB_SHOW_SPONSORED_IMAGES_LABEL},
+    {"showStatsLabel", IDS_NEW_TAB_SHOW_STATS_LABEL},
     {"showTopSitesLabel", IDS_NEW_TAB_SHOW_TOP_SITES_LABEL},
     {"solidBackgroundLabel", IDS_NEW_TAB_SOLID_BACKGROUND_LABEL},
     {"solidBackgroundTitle", IDS_NEW_TAB_SOLID_BACKGROUND_LABEL},
+    {"statsAdsBlockedText", IDS_NEW_TAB_STATS_ADS_BLOCKED_TEXT},
+    {"statsBandwidthSavedText", IDS_NEW_TAB_STATS_BANDWIDTH_SAVED_TEXT},
+    {"statsSettingsTitle", IDS_NEW_TAB_STATS_SETTINGS_TITLE},
+    {"statsTimeSavedText", IDS_NEW_TAB_STATS_TIME_SAVED_TEXT},
+    {"statsTitle", IDS_NEW_TAB_STATS_TITLE},
     {"topSiteRemovedText", IDS_NEW_TAB_TOP_SITE_REMOVED_TEXT},
     {"topSiteRemovedTitle", IDS_NEW_TAB_TOP_SITE_REMOVED_TITLE},
     {"topSitesCustomOptionText", IDS_NEW_TAB_TOP_SITES_CUSTOM_OPTION_TEXT},

browser/ui/webui/brave_new_tab/update_observer.cc

@@ -8,6 +8,7 @@
 #include <utility>
 
 #include "brave/browser/ntp_background/ntp_background_prefs.h"
+#include "brave/components/brave_perf_predictor/common/pref_names.h"
 #include "brave/components/brave_search_conversion/pref_names.h"
 #include "brave/components/constants/pref_names.h"
 #include "brave/components/ntp_background_images/common/pref_names.h"
@@ -35,6 +36,11 @@ UpdateObserver::UpdateObserver(PrefService& pref_service) {
   AddPrefListener(ntp_prefs::kNtpUseMostVisitedTiles, Source::kTopSitesPrefs);
   AddPrefListener(kNewTabPageShowClock, Source::kClockPrefs);
   AddPrefListener(kNewTabPageClockFormat, Source::kClockPrefs);
+  AddPrefListener(kNewTabPageShowStats, Source::kShieldsStatsPrefs);
+  AddPrefListener(kAdsBlocked, Source::kShieldsStatsPrefs);
+  AddPrefListener(kTrackersBlocked, Source::kShieldsStatsPrefs);
+  AddPrefListener(brave_perf_predictor::prefs::kBandwidthSavedBytes,
+                  Source::kShieldsStatsPrefs);
 }
 
 UpdateObserver::~UpdateObserver() = default;

browser/ui/webui/brave_new_tab/update_observer.h

@@ -24,7 +24,8 @@ class UpdateObserver {
     kBackgroundPrefs,
     kClockPrefs,
     kSearchPrefs,
-    kTopSitesPrefs
+    kTopSitesPrefs,
+    kShieldsStatsPrefs
   };
 
   explicit UpdateObserver(PrefService& pref_service);

components/brave_new_tab/new_tab_page.mojom

@@ -63,6 +63,11 @@ enum TopSitesListKind {
   kMostVisited
 };
 
+struct ShieldsStats {
+  double ads_blocked;
+  double bandwidth_saved_bytes;
+};
+
 // WebUI-side handler for notifications from the browser.
 interface NewTabPage {
 
@@ -81,6 +86,9 @@ interface NewTabPage {
   // Called when the list of most-visited sites has been updated.
   OnTopSitesListUpdated();
 
+  // Called when preferences related to shields stats have been updated.
+  OnShieldsStatsPrefsUpdated();
+
 };
 
 // Browser-side handler for requests from the WebUI page.
@@ -200,4 +208,11 @@ interface NewTabPageHandler {
   GetClockFormat() => (string clock_format);
   SetClockFormat(string clock_format) => ();
 
+  // Gets or sets whether the shields stats widget is displayed.
+  GetShowShieldsStats() => (bool show_shields_stats);
+  SetShowShieldsStats(bool show_shields_stats) => ();
+
+  // Returns shields browsing stats for the current user.
+  GetShieldsStats() => (ShieldsStats shields_stats);
+
 };

components/brave_new_tab/resources/brave_new_tab_strings.grdp

@@ -136,6 +136,11 @@
     Show Sponsored Images
   </message>
 
+  <message name="IDS_NEW_TAB_SHOW_STATS_LABEL" desc="">
+    Show Brave Stats
+  </message>
+
+
   <message name="IDS_NEW_TAB_SHOW_TOP_SITES_LABEL" desc="">
     Show top sites
   </message>
@@ -144,6 +149,26 @@
     Solid colors
   </message>
 
+  <message name="IDS_NEW_TAB_STATS_ADS_BLOCKED_TEXT" desc="">
+    Trackers &amp; ads blocked
+  </message>
+
+  <message name="IDS_NEW_TAB_STATS_BANDWIDTH_SAVED_TEXT" desc="">
+    Bandwidth saved
+  </message>
+
+  <message name="IDS_NEW_TAB_STATS_SETTINGS_TITLE" desc="">
+    Brave Stats
+  </message>
+
+  <message name="IDS_NEW_TAB_STATS_TIME_SAVED_TEXT" desc="">
+    Time saved
+  </message>
+
+  <message name="IDS_NEW_TAB_STATS_TITLE" desc="">
+    STATS
+  </message>
+
   <message name="IDS_NEW_TAB_TOP_SITE_REMOVED_TEXT" desc="">
     Top site removed
   </message>

components/brave_new_tab/resources/components/app.style.ts

@@ -63,7 +63,12 @@ export const style = scoped.css`
   }
 
   .widget-container {
-    min-height: 8px;
+    margin: 0 24px 16px;
+    max-height: 120px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: 16px;
   }
 
 `

components/brave_new_tab/resources/components/app.tsx

@@ -12,6 +12,7 @@ import { BackgroundCaption } from './background_caption'
 import { SettingsModal, SettingsView } from './settings/settings_modal'
 import { TopSites } from './top_sites/top_sites'
 import { Clock } from './clock'
+import { StatsWidget } from './widgets/stats_widget'
 
 import { style } from './app.style'
 
@@ -47,7 +48,9 @@ export function App() {
         <div className='background-caption-container'>
           <BackgroundCaption />
         </div>
-        <div className='widget-container' />
+        <div className='widget-container'>
+          <StatsWidget />
+        </div>
       </main>
       <Background />
       <SettingsModal

components/brave_new_tab/resources/components/ntp_widget.style.ts

@@ -0,0 +1,17 @@
+/* Copyright (c) 2025 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 { color } from '@brave/leo/tokens/css/variables'
+import { scoped } from '../lib/scoped_css'
+
+export const style = scoped.css`
+  & {
+    color: ${color.text.primary};
+    border-radius: 16px;
+    background: rgba(0, 0, 0, 0.50);
+    backdrop-filter: blur(50px);
+    padding: 16px;
+  }
+`

components/brave_new_tab/resources/components/ntp_widget.tsx

@@ -0,0 +1,20 @@
+/* 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 React from 'react'
+
+import { style } from './ntp_widget.style'
+
+interface Props {
+  children: React.ReactNode
+}
+
+export function NtpWidget(props: Props) {
+  return (
+    <div {...style} data-theme='dark'>
+      {props.children}
+    </div>
+  )
+}

components/brave_new_tab/resources/components/settings/settings_modal.tsx

@@ -12,11 +12,17 @@ import { BackgroundPanel } from './background_panel'
 import { TopSitesPanel } from './top_sites_panel'
 import { SearchPanel } from './search_panel'
 import { ClockPanel } from './clock_panel'
+import { StatsPanel } from './stats_panel'
 import { useLocale } from '../locale_context'
 
 import { style } from './settings_modal.style'
 
-export type SettingsView = 'background' | 'top-sites' | 'search' | 'clock'
+export type SettingsView =
+  'background' |
+  'top-sites' |
+  'search' |
+  'clock' |
+  'stats'
 
 interface Props {
   initialView: SettingsView | null
@@ -42,6 +48,7 @@ export function SettingsModal(props: Props) {
       case 'top-sites': return <TopSitesPanel />
       case 'search': return <SearchPanel />
       case 'clock': return <ClockPanel />
+      case 'stats': return <StatsPanel />
     }
   }
 
@@ -51,6 +58,7 @@ export function SettingsModal(props: Props) {
       case 'top-sites': return getString('topSitesSettingsTitle')
       case 'search': return getString('searchSettingsTitle')
       case 'clock': return getString('clockSettingsTitle')
+      case 'stats': return getString('statsSettingsTitle')
     }
   }
 
@@ -76,6 +84,7 @@ export function SettingsModal(props: Props) {
             <Navigation>
               {renderNavItem('background')}
               {renderNavItem('search')}
+              {renderNavItem('stats')}
               {renderNavItem('top-sites')}
               {renderNavItem('clock')}
             </Navigation>

components/brave_new_tab/resources/components/settings/stats_panel.style.ts

@@ -0,0 +1,23 @@
+/* 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 { scoped } from '../../lib/scoped_css'
+
+export const style = scoped.css`
+  & {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    > * {
+      display: flex;
+      align-items: center;
+
+      label {
+        flex: 1 1 auto;
+      }
+    }
+  }
+`

components/brave_new_tab/resources/components/settings/stats_panel.tsx

@@ -0,0 +1,32 @@
+/* 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 React from 'react'
+import Toggle from '@brave/leo/react/toggle'
+
+import { useLocale } from '../locale_context'
+import { useNewTabModel, useNewTabState } from '../new_tab_context'
+
+import { style } from './stats_panel.style'
+
+export function StatsPanel() {
+  const { getString } = useLocale()
+  const model = useNewTabModel()
+
+  const showStats = useNewTabState((state) => state.showShieldsStats)
+
+  return (
+    <div {...style}>
+      <div className='form-control-row'>
+        <label>{getString('showStatsLabel')}</label>
+        <Toggle
+          size='small'
+          checked={showStats}
+          onChange={({ checked }) => { model.setShowShieldsStats(checked) }}
+        />
+      </div>
+    </div>
+  )
+}