[NTP Quests] Add info dialog and disable toast/action

Added the info dialog, disable toast/actiion and updated the text for the disable button. Also added GRIT strings and screenshots. Bug: 1413517 Change-Id: I9cedce9f5acf47446e2d837f7fb03a6367dce7d8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4327268 Commit-Queue: Marlon Facey <mfacey@chromium.org> Reviewed-by: Roman Arora <romanarora@chromium.org> Cr-Commit-Position: refs/heads/main@{#1115540}
chromium · Mar 10, 2023 · 0f1a7be · 0f1a7be
1 parent 442aa07
commit 0f1a7be
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 7 deletions.
diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
@@ -7281,6 +7281,18 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_NTP_MODULES_SHOW_ALL" desc="A label for the show all button in NTP Quests Module.">
         Show all
       </message>
+      <message name="IDS_NTP_MODULES_HISTORY_CLUSTERS_INFO" desc="Text shown in the body of the info dialog of the history clusters module.">
+        You’re seeing pages you've visited and suggested searches to help you easily get back to your most recent activity in Chrome Journeys.
+        <ph name="BREAK">&lt;br&gt;</ph>
+        <ph name="BREAK">&lt;br&gt;</ph>
+        You can manage settings from the card menu or see more options in Customize Chrome.
+      </message>
+      <message name="IDS_NTP_MODULES_HISTORY_CLUSTERS_SENTENCE2" desc="Variant of the name of the History Clusters module in sentence case shown in various UIs.">
+        Journeys
+      </message>
+      <message name="IDS_NTP_MODULES_HISTORY_CLUSTERS_DISABLE_TEXT" desc="A label to append to the disable text in the dropdown.">
+        Journeys card
+      </message>
 
       <!-- Extensions NTP Middle Slot Promo -->
       <message name="IDS_EXTENSIONS_PROMO_PERFORMANCE">

diff --git a/chrome/app/generated_resources_grd/IDS_NTP_MODULES_HISTORY_CLUSTERS_DISABLE_TEXT.png.sha1 b/chrome/app/generated_resources_grd/IDS_NTP_MODULES_HISTORY_CLUSTERS_DISABLE_TEXT.png.sha1
@@ -0,0 +1 @@
+08ba1a40d838efa46d4b3ca2cddf0f9e2d0c42bb
diff --git a/chrome/app/generated_resources_grd/IDS_NTP_MODULES_HISTORY_CLUSTERS_INFO.png.sha1 b/chrome/app/generated_resources_grd/IDS_NTP_MODULES_HISTORY_CLUSTERS_INFO.png.sha1
@@ -0,0 +1 @@
+5baf709aed54d7d4c1a9034d8b3dd3e05d549614
diff --git a/chrome/app/generated_resources_grd/IDS_NTP_MODULES_HISTORY_CLUSTERS_SENTENCE2.png.sha1 b/chrome/app/generated_resources_grd/IDS_NTP_MODULES_HISTORY_CLUSTERS_SENTENCE2.png.sha1
@@ -0,0 +1 @@
+2029fd82dcf535539c4c9350d27284126d8e874c
diff --git a/chrome/browser/resources/new_tab_page/modules/history_clusters/module.html b/chrome/browser/resources/new_tab_page/modules/history_clusters/module.html
@@ -55,15 +55,19 @@
 </style>
 <div id="content">
   <ntp-module-header
-      disable-text="[[i18n('modulesDisableButtonText', title_)]]"
-      dismiss-text="[[i18n('modulesDismissButtonText', title_)]]"
-      show-info-button show-dismiss-button
-      on-dismiss-button-click="onDismissButtonClick_"
-      icon-src="chrome://resources/images/icon_journeys.svg">
+    disable-text="[[i18nRecursive('',
+                                  'modulesDisableButtonText',
+                                  'modulesJourneyDisable')]]"
+    dismiss-text="[[i18n('modulesDismissButtonText', title_)]]"
+    show-info-button show-dismiss-button
+    on-disable-button-click="onDisableButtonClick_"
+    on-dismiss-button-click="onDismissButtonClick_"
+    on-info-button-click="onInfoButtonClick_"
+    icon-src="chrome://resources/images/icon_journeys.svg">
     [[i18n('modulesJourneysResumeJourney', title_)]]
     <button id="showAllButton" type="button" on-click="onShowAllClick_"
             slot="title-actions">
-        [[i18n('modulesJourneyShowAll')]]
+        [[i18n('modulesJourneysShowAll')]]
     </button>
   </ntp-module-header>
   <template is="dom-if" if="[[isLayout_(1, layoutType)]]" restamp>
@@ -121,3 +125,9 @@
     </div>
   </template>
 </div>
+<cr-lazy-render id="infoDialogRender">
+  <template>
+    <ntp-info-dialog inner-h-t-m-l="[[i18nAdvanced('modulesJourneysInfo')]]">
+    </ntp-info-dialog>
+  </template>
+</cr-lazy-render>
diff --git a/chrome/browser/resources/new_tab_page/modules/history_clusters/module.ts b/chrome/browser/resources/new_tab_page/modules/history_clusters/module.ts
@@ -6,10 +6,12 @@ import '../module_header.js';
 import './suggest_tile.js';
 import './tile.js';
 
+import {CrLazyRenderElement} from 'chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {Cluster, URLVisit} from '../../history_cluster_types.mojom-webui.js';
 import {I18nMixin, loadTimeData} from '../../i18n_setup.js';
+import {InfoDialogElement} from '../info_dialog';
 import {ModuleDescriptor} from '../module_descriptor.js';
 
 import {HistoryClustersProxyImpl} from './history_clusters_proxy.js';
@@ -35,6 +37,12 @@ export enum HistoryClusterLayoutType {
   LAYOUT_3 = 3,  // 2 image visits & 2 non-image visits
 }
 
+export interface HistoryClustersModuleElement {
+  $: {
+    infoDialogRender: CrLazyRenderElement<InfoDialogElement>,
+  };
+}
+
 // TODO:(crbug.com/1410808): Add module UI logic.
 export class HistoryClustersModuleElement extends I18nMixin
 (PolymerElement) {
@@ -74,6 +82,18 @@ export class HistoryClustersModuleElement extends I18nMixin
     return type === this.layoutType;
   }
 
+  private onDisableButtonClick_() {
+    const disableEvent = new CustomEvent('disable-module', {
+      composed: true,
+      detail: {
+        message: loadTimeData.getStringF(
+            'disableModuleToastMessage',
+            loadTimeData.getString('modulesJourneysSentence2')),
+      },
+    });
+    this.dispatchEvent(disableEvent);
+  }
+
   private onDismissButtonClick_() {
     HistoryClustersProxyImpl.getInstance().handler.dismissCluster(
         [this.searchResultPage, ...this.cluster.visits]);
@@ -87,6 +107,10 @@ export class HistoryClustersModuleElement extends I18nMixin
     }));
   }
 
+  private onInfoButtonClick_() {
+    this.$.infoDialogRender.get().showModal();
+  }
+
   private onShowAllClick_() {
     HistoryClustersProxyImpl.getInstance().handler.showJourneysSidePanel(
         this.cluster.label || '');

diff --git a/chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc b/chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc
@@ -468,7 +468,10 @@ content::WebUIDataSource* CreateAndAddNewTabPageUiHtmlSource(Profile* profile) {
       {"modulesFirstRunExperienceOptOutToast",
        IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_OPT_OUT_TOAST},
       {"modulesJourneysResumeJourney", IDS_NTP_MODULES_RESUME_YOUR_JOURNEY},
-      {"modulesJourneyShowAll", IDS_NTP_MODULES_SHOW_ALL},
+      {"modulesJourneysShowAll", IDS_NTP_MODULES_SHOW_ALL},
+      {"modulesJourneysInfo", IDS_NTP_MODULES_HISTORY_CLUSTERS_INFO},
+      {"modulesJourneysSentence2", IDS_NTP_MODULES_HISTORY_CLUSTERS_SENTENCE2},
+      {"modulesJourneyDisable", IDS_NTP_MODULES_HISTORY_CLUSTERS_DISABLE_TEXT},
 
       // Middle slot promo.
       {"undoDismissPromoButtonToast", IDS_NTP_UNDO_DISMISS_PROMO_BUTTON_TOAST},