Add setting options to toggle NTP widgets

browser/brave_profile_prefs.cc

@@ -126,6 +126,9 @@ void RegisterProfilePrefs(user_prefs::PrefRegistrySyncable* registry) {
 
   // New Tab Page
   registry->RegisterBooleanPref(kNewTabPageShowBackgroundImage, true);
+  registry->RegisterBooleanPref(kNewTabPageShowClock, true);
+  registry->RegisterBooleanPref(kNewTabPageShowTopSites, true);
+  registry->RegisterBooleanPref(kNewTabPageShowStats, true);
 }
 
 }  // namespace brave

browser/ui/webui/brave_new_tab_message_handler.cc

@@ -46,6 +46,15 @@ void BraveNewTabMessageHandler::OnJavascriptAllowed() {
   pref_change_registrar_.Add(kNewTabPageShowBackgroundImage,
     base::Bind(&BraveNewTabMessageHandler::OnPreferencesChanged,
     base::Unretained(this)));
+  pref_change_registrar_.Add(kNewTabPageShowClock,
+    base::Bind(&BraveNewTabMessageHandler::OnPreferencesChanged,
+    base::Unretained(this)));
+  pref_change_registrar_.Add(kNewTabPageShowStats,
+    base::Bind(&BraveNewTabMessageHandler::OnPreferencesChanged,
+    base::Unretained(this)));
+  pref_change_registrar_.Add(kNewTabPageShowTopSites,
+    base::Bind(&BraveNewTabMessageHandler::OnPreferencesChanged,
+    base::Unretained(this)));
 }
 
 void BraveNewTabMessageHandler::OnJavascriptDisallowed() {
@@ -101,6 +110,12 @@ void BraveNewTabMessageHandler::HandleSaveNewTabPagePref(
   std::string settingsKey;
   if (settingsKeyInput == "showBackgroundImage") {
     settingsKey = kNewTabPageShowBackgroundImage;
+  } else if (settingsKeyInput == "showClock") {
+    settingsKey = kNewTabPageShowClock;
+  } else if (settingsKeyInput == "showTopSites") {
+    settingsKey = kNewTabPageShowTopSites;
+  } else if (settingsKeyInput == "showStats") {
+    settingsKey = kNewTabPageShowStats;
   } else {
     LOG(ERROR) << "Invalid setting key";
     return;

browser/ui/webui/brave_new_tab_ui.cc

@@ -99,6 +99,18 @@ void BraveNewTabUI::SetPreferencesWebUIProperties(
         "showBackgroundImage",
         prefs->GetBoolean(kNewTabPageShowBackgroundImage) ? "true"
                                                           : "false");
+    render_view_host->SetWebUIProperty(
+        "showClock",
+        prefs->GetBoolean(kNewTabPageShowClock) ? "true"
+                                                : "false");
+    render_view_host->SetWebUIProperty(
+        "showTopSites",
+        prefs->GetBoolean(kNewTabPageShowTopSites) ? "true"
+                                                  : "false");
+    render_view_host->SetWebUIProperty(
+        "showStats",
+        prefs->GetBoolean(kNewTabPageShowStats) ? "true"
+                                                : "false");
   }
 }
 

browser/ui/webui/brave_webui_source.cc

@@ -137,6 +137,9 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "dashboardSettingsTitle",
             IDS_BRAVE_NEW_TAB_DASHBOARD_SETTINGS_TITLE },
         { "showBackgroundImage", IDS_BRAVE_NEW_TAB_SHOW_BACKGROUND_IMAGE },
+        { "showBraveStats", IDS_BRAVE_NEW_TAB_SHOW_BRAVE_STATS },
+        { "showClock", IDS_BRAVE_NEW_TAB_SHOW_CLOCK },
+        { "showTopSites", IDS_BRAVE_NEW_TAB_SHOW_TOP_SITES },
 
         // Private Tab - General
         { "learnMore", IDS_BRAVE_PRIVATE_NEW_TAB_LEARN_MORE },

common/pref_names.cc

@@ -54,3 +54,6 @@ const char kHideBraveRewardsButton[] = "brave.hide_brave_rewards_button";
 const char kIPFSCompanionEnabled[] = "brave.ipfs_companion_enabled";
 const char kNewTabPageShowBackgroundImage[] =
     "brave.new_tab_page.show_background_image";
+const char kNewTabPageShowClock[] = "brave.new_tab_page.show_clock";
+const char kNewTabPageShowTopSites[] = "brave.new_tab_page.show_top_sites";
+const char kNewTabPageShowStats[] = "brave.new_tab_page.show_stats";

common/pref_names.h

@@ -47,5 +47,8 @@ extern const char kHangoutsEnabled[];
 extern const char kHideBraveRewardsButton[];
 extern const char kIPFSCompanionEnabled[];
 extern const char kNewTabPageShowBackgroundImage[];
+extern const char kNewTabPageShowClock[];
+extern const char kNewTabPageShowTopSites[];
+extern const char kNewTabPageShowStats[];
 
 #endif  // BRAVE_COMMON_PREF_NAMES_H_

components/brave_new_tab_ui/api/preferences.ts

@@ -12,6 +12,9 @@
 
 export type Preferences = {
   showBackgroundImage: boolean
+  showStats: boolean
+  showClock: boolean
+  showTopSites: boolean
 }
 
 function getWebUIBooleanVal (key: string): boolean {
@@ -24,7 +27,10 @@ export function getPreferences (): Promise<Preferences> {
   // Enforces practice of not setting directly
   // in a redux reducer.
   return Promise.resolve({
-    showBackgroundImage: getWebUIBooleanVal('showBackgroundImage')
+    showBackgroundImage: getWebUIBooleanVal('showBackgroundImage'),
+    showStats: getWebUIBooleanVal('showStats'),
+    showClock: getWebUIBooleanVal('showClock'),
+    showTopSites: getWebUIBooleanVal('showTopSites')
   })
 }
 
@@ -36,6 +42,18 @@ export function saveShowBackgroundImage (value: boolean): void {
   sendSavePref('showBackgroundImage', value)
 }
 
+export function saveShowClock (value: boolean): void {
+  sendSavePref('showClock', value)
+}
+
+export function saveShowTopSites (value: boolean): void {
+  sendSavePref('showTopSites', value)
+}
+
+export function saveShowStats (value: boolean): void {
+  sendSavePref('showStats', value)
+}
+
 export function addChangeListener (listener: () => void): void {
   window.cr.addWebUIListener('preferences-changed', listener)
 }

components/brave_new_tab_ui/components/app.tsx

@@ -32,12 +32,15 @@ class DefaultPage extends React.Component<Props, {}> {
     return this.props.newTabData.isIncognito
       ? <NewPrivateTabPage newTabData={newTabData} actions={actions} />
       : (
-          <NewTabPage
-            newTabData={newTabData}
-            actions={actions}
-            saveShowBackgroundImage={PreferencesAPI.saveShowBackgroundImage}
-          />
-        )
+        <NewTabPage
+          newTabData={newTabData}
+          actions={actions}
+          saveShowBackgroundImage={PreferencesAPI.saveShowBackgroundImage}
+          saveShowClock={PreferencesAPI.saveShowClock}
+          saveShowStats={PreferencesAPI.saveShowStats}
+          saveShowTopSites={PreferencesAPI.saveShowTopSites}
+        />
+      )
   }
 }
 

components/brave_new_tab_ui/components/newTab/index.tsx

@@ -8,9 +8,9 @@ import HTML5Backend from 'react-dnd-html5-backend'
 import {
   Page,
   Header,
-  Clock,
+  ClockWidget as Clock,
   Main,
-  List,
+  ListWidget as List,
   Footer,
   DynamicBackground,
   Gradient
@@ -27,6 +27,9 @@ interface Props {
   newTabData: NewTab.State
   actions: any
   saveShowBackgroundImage: (value: boolean) => void
+  saveShowClock: (value: boolean) => void
+  saveShowTopSites: (value: boolean) => void
+  saveShowStats: (value: boolean) => void
 }
 
 class NewTabPage extends React.Component<Props, {}> {
@@ -69,6 +72,24 @@ class NewTabPage extends React.Component<Props, {}> {
     )
   }
 
+  toggleShowClock = () => {
+    this.props.saveShowClock(
+      !this.props.newTabData.showClock
+    )
+  }
+
+  toggleShowStats = () => {
+    this.props.saveShowStats(
+      !this.props.newTabData.showStats
+    )
+  }
+
+  toggleShowTopSites = () => {
+    this.props.saveShowTopSites(
+      !this.props.newTabData.showTopSites
+    )
+  }
+
   showSettings = () => {
     this.props.actions.showSettingsMenu()
   }
@@ -89,10 +110,10 @@ class NewTabPage extends React.Component<Props, {}> {
         {newTabData.showBackgroundImage && <Gradient />}
         <Page>
           <Header>
-            <Stats stats={newTabData.stats} />
-            <Clock />
+            <Stats stats={newTabData.stats} showWidget={newTabData.showStats}/>
+            <Clock showWidget={newTabData.showClock} />
             <Main>
-              <List>
+              <List showWidget={newTabData.showTopSites}>
                 {
                   this.props.newTabData.gridSites.map((site: NewTab.Site) =>
                     <Block
@@ -125,7 +146,13 @@ class NewTabPage extends React.Component<Props, {}> {
             <Settings
               onClickOutside={this.closeSettings}
               toggleShowBackgroundImage={this.toggleShowBackgroundImage}
+              toggleShowClock={this.toggleShowClock}
+              toggleShowStats={this.toggleShowStats}
+              toggleShowTopSites={this.toggleShowTopSites}
               showBackgroundImage={newTabData.showBackgroundImage}
+              showClock={newTabData.showClock}
+              showStats={newTabData.showStats}
+              showTopSites={newTabData.showTopSites}
             />
           }
           <Footer>

components/brave_new_tab_ui/components/newTab/settings.tsx

@@ -13,7 +13,13 @@ import { getLocale } from '../../../common/locale'
 export interface Props {
   onClickOutside: () => void
   toggleShowBackgroundImage: () => void
+  toggleShowClock: () => void
+  toggleShowStats: () => void
+  toggleShowTopSites: () => void
   showBackgroundImage: boolean
+  showStats: boolean
+  showClock: boolean
+  showTopSites: boolean
 }
 
 export default class Settings extends React.PureComponent<Props, {}> {
@@ -38,7 +44,16 @@ export default class Settings extends React.PureComponent<Props, {}> {
   }
 
   render () {
-    const { toggleShowBackgroundImage, showBackgroundImage } = this.props
+    const {
+      toggleShowBackgroundImage,
+      toggleShowClock,
+      toggleShowStats,
+      toggleShowTopSites,
+      showBackgroundImage,
+      showStats,
+      showClock,
+      showTopSites
+    } = this.props
     return (
       <SettingsWrapper>
         <SettingsMenu innerRef={this.settingsMenuRef}>
@@ -51,6 +66,30 @@ export default class Settings extends React.PureComponent<Props, {}> {
               size='small'
             />
           </SettingsRow>
+          <SettingsRow>
+            <SettingsText>{getLocale('showBraveStats')}</SettingsText>
+            <Toggle
+              onChange={toggleShowStats}
+              checked={showStats}
+              size='small'
+            />
+          </SettingsRow>
+          <SettingsRow>
+            <SettingsText>{getLocale('showClock')}</SettingsText>
+            <Toggle
+              onChange={toggleShowClock}
+              checked={showClock}
+              size='small'
+            />
+          </SettingsRow>
+          <SettingsRow>
+            <SettingsText>{getLocale('showTopSites')}</SettingsText>
+            <Toggle
+              onChange={toggleShowTopSites}
+              checked={showTopSites}
+              size='small'
+            />
+          </SettingsRow>
         </SettingsMenu>
       </SettingsWrapper>
     )

components/brave_new_tab_ui/components/newTab/stats.tsx

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
-import { StatsContainer, StatsItem } from 'brave-ui/features/newTab/default'
+import { StatsContainer, StatsItem, createWidget } from 'brave-ui/features/newTab/default'
 
 // Utils
 import { getLocale } from '../../../common/locale'
@@ -12,7 +12,7 @@ interface Props {
   stats: NewTab.Stats
 }
 
-export default class Stats extends React.Component<Props, {}> {
+class Stats extends React.Component<Props, {}> {
   get millisecondsPerItem () {
     return 50
   }
@@ -90,3 +90,5 @@ export default class Stats extends React.Component<Props, {}> {
     )
   }
 }
+
+export default createWidget(Stats)

components/brave_new_tab_ui/storage.ts

@@ -11,6 +11,9 @@ const keyName = 'new-tab-data'
 
 const defaultState: NewTab.State = {
   showBackgroundImage: false,
+  showStats: false,
+  showClock: false,
+  showTopSites: false,
   showSettings: false,
   topSites: [],
   ignoredTopSites: [],

components/definitions/newTab.d.ts

@@ -41,21 +41,24 @@ declare namespace NewTab {
   }
 
   export interface State {
-    topSites: Site[],
-    ignoredTopSites: Site[],
-    pinnedTopSites: Site[],
-    gridSites: Site[],
-    showEmptyPage: boolean,
-    isIncognito: boolean,
-    useAlternativePrivateSearchEngine: boolean,
-    isTor: boolean,
-    isQwant: boolean,
-    bookmarks: Record<string, Bookmark>,
+    topSites: Site[]
+    ignoredTopSites: Site[]
+    pinnedTopSites: Site[]
+    gridSites: Site[]
+    showEmptyPage: boolean
+    isIncognito: boolean
+    useAlternativePrivateSearchEngine: boolean
+    isTor: boolean
+    isQwant: boolean
+    bookmarks: Record<string, Bookmark>
     stats: Stats
     backgroundImage?: Image
     gridLayoutSize?: 'small'
     showSiteRemovalNotification?: boolean
     showBackgroundImage: boolean
     showSettings: boolean
+    showStats: boolean
+    showClock: boolean
+    showTopSites: boolean
   }
 }

components/resources/brave_components_strings.grd

@@ -139,7 +139,10 @@
       <message name="IDS_BRAVE_NEW_TAB_BOOKMARKS_PAGE_TITLE" desc="Title for bookmarks page">View and Manage Bookmarks</message>
       <message name="IDS_BRAVE_NEW_TAB_HISTORY_PAGE_TITLE" desc="Title for history page">View your browsing history</message>
       <message name="IDS_BRAVE_NEW_TAB_DASHBOARD_SETTINGS_TITLE" desc="Title for dashboard settings">Dashboard Settings</message>
-      <message name="IDS_BRAVE_NEW_TAB_SHOW_BACKGROUND_IMAGE" desc="Text for settings option">Show background image</message>
+      <message name="IDS_BRAVE_NEW_TAB_SHOW_BACKGROUND_IMAGE" desc="Text for settings background option">Show background image</message>
+      <message name="IDS_BRAVE_NEW_TAB_SHOW_BRAVE_STATS" desc="Text for settings show stats option">Show Brave Stats</message>
+      <message name="IDS_BRAVE_NEW_TAB_SHOW_CLOCK" desc="Text for settings show clock option">Show Clock</message>
+      <message name="IDS_BRAVE_NEW_TAB_SHOW_TOP_SITES" desc="Text for settings show top sites option">Show Top Sites</message>
 
       <!-- WebUI private tab resources -->
       <message name="IDS_BRAVE_PRIVATE_NEW_TAB_LEARN_MORE" desc="">Learn more</message>

components/test/brave_new_tab_ui/components/__snapshots__/settings_test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`settings component tests should render the component properly 1`] = `ShallowWrapper {}`;