[ntp][fre] Add "Don't Show" button functionality

When a user clicks "Don't Show" on their  Modular NTP Desktop v1 First Run Experience (FRE), the FRE and any modules on their screen disappear.

Video Demo: http://recall/-/c4JPivcXNOuBKuUlZnNzlk/bE1kj7kbbxKWG5j5aQh849

Change-Id: Ib34a7fd51f7869ff4542cd6f431864d580ad74a6
Bug: 1306705
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3527496
Reviewed-by: Mohamad Ahmadi <mahmadi@chromium.org>
Commit-Queue: Paul Adedeji <pauladedeji@google.com>
Cr-Commit-Position: refs/heads/main@{#984669}

chrome/app/generated_resources.grd

@@ -6448,12 +6448,15 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_BODY_LINE_2" desc="Line 2 of Modular NTP Desktop v1 First Run Experience's body.">
         See all card options in <ph name="BEGIN_LINK">&lt;a is="action-link" id="customizeChromeLink" on-click="onCustomizeModuleFre_"&gt;</ph>Customize Chrome<ph name="END_LINK">&lt;/a&gt;</ph>
       </message>
-      <message name="IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_OPT_IN_BUTTON" desc="Opt in button for Modular NTP Desktop v1 First Run Experience.">
+      <message name="IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_OPT_IN" desc="Opt in button for Modular NTP Desktop v1 First Run Experience.">
         Got it
       </message>
-      <message name="IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_OPT_OUT_BUTTON" desc="Opt out button for Modular NTP Desktop v1 First Run Experience.">
+      <message name="IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_OPT_OUT" desc="Opt out button for Modular NTP Desktop v1 First Run Experience.">
        Don't show
       </message>
+      <message name="IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_OPT_OUT_TOAST" desc="Opt out toast for Modular NTP Desktop v1 First Run Experience.">
+       You won't see cards on this page again
+      </message>
 
       <!-- Extensions NTP Middle Slot Promo -->
       <message name="IDS_EXTENSIONS_PROMO_PERFORMANCE">

chrome/app/generated_resources_grd/IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_OPT_OUT_TOAST.png.sha1

@@ -0,0 +1 @@
+4b5b7eb12bd6a96947e07314edfd66439e02c670

chrome/browser/resources/new_tab_page/app.html

@@ -289,7 +289,7 @@
             hidden="[[!promoAndModulesLoaded_]]">
         </ntp-middle-slot-promo>
       </template>
-      <template is="dom-if" if="[[modulesEnabled_]]" >
+      <template is="dom-if" if="[[modulesEnabled_]]">
         <ntp-modules id="modules"
             on-modules-loaded="onModulesLoaded_"
             on-customize-module="onCustomizeModule_"

chrome/browser/resources/new_tab_page/modules/modules.html

@@ -85,6 +85,10 @@
     flex-grow: 1;
   }
 
+  #removeModuleFreToastMessage {
+    flex-grow: 1;
+  }
+
   :host([drag-enabled_]) ntp-module-wrapper {
     cursor: grab;
   }
@@ -109,10 +113,10 @@
         $i18nRaw{modulesFirstRunExperienceBodyLine2}
       </div>
       <cr-button class="action-button" on-click="onModulesFreOptIn_">
-        $i18n{modulesFirstRunOptInButton}
+        $i18n{modulesFirstRunExperienceOptIn}
       </cr-button>
-      <cr-button class="cancel-button">
-        $i18n{modulesFirstRunOptOutButton}
+      <cr-button class="cancel-button" on-click="onModulesFreOptOut_">
+        $i18n{modulesFirstRunExperienceOptOut}
       </cr-button>
     </div>
   </template>
@@ -126,3 +130,13 @@
     $i18n{undo}
   </cr-button>
 </cr-toast>
+<cr-toast id="removeModuleFreToast" duration="10000">
+  <div id="removeModuleFreToastMessage">
+    $i18n{modulesFirstRunExperienceOptOutToast}
+  </div>
+  <cr-button id="undoRemoveModuleFreButton"
+      aria-label="$i18n{undoDescription}"
+      on-click="onUndoRemoveModuleFreButtonClick_">
+    $i18n{undo}
+  </cr-button>
+</cr-toast>

chrome/browser/resources/new_tab_page/modules/modules.ts

@@ -37,6 +37,9 @@ export interface ModulesElement {
     removeModuleToast: CrToastElement,
     removeModuleToastMessage: HTMLElement,
     undoRemoveModuleButton: HTMLElement,
+    removeModuleFreToast: CrToastElement,
+    removeModuleFreToastMessage: HTMLElement,
+    undoRemoveModuleFreButton: HTMLElement,
   };
 }
 
@@ -385,10 +388,37 @@ export class ModulesElement extends PolymerElement {
         new Event('customize-module', {bubbles: true, composed: true}));
   }
 
-  private onModulesFreOptIn_() {
+  private hideFre_() {
     NewTabPageProxy.getInstance().handler.setModulesFreVisible(false);
   }
 
+  private onModulesFreOptIn_() {
+    this.hideFre_();
+  }
+
+  private onModulesFreOptOut_() {
+    this.hideFre_();
+    NewTabPageProxy.getInstance().handler.setModulesVisible(false);
+
+    // Hide remove module toast in case user removed a module before opting out
+    // of fre.
+    this.$.removeModuleToast.hide();
+
+    // Any module the user removed before opting out of the FRE should not be
+    // restored if FRE opt out is undone.
+    this.removedModuleData_ = null;
+
+    // Notify the user
+    this.$.removeModuleFreToast.show();
+  }
+
+  /** @private */
+  onUndoRemoveModuleFreButtonClick_() {
+    NewTabPageProxy.getInstance().handler.setModulesFreVisible(true);
+    NewTabPageProxy.getInstance().handler.setModulesVisible(true);
+    this.$.removeModuleFreToast.hide();
+  }
+
   /**
    * Module is dragged by updating the module position based on the
    * position of the pointer.

chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc

@@ -384,10 +384,12 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
        IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_BODY_LINE_1},
       {"modulesFirstRunExperienceBodyLine2",
        IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_BODY_LINE_2},
-      {"modulesFirstRunOptInButton",
-       IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_OPT_IN_BUTTON},
-      {"modulesFirstRunOptOutButton",
-       IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_OPT_OUT_BUTTON},
+      {"modulesFirstRunExperienceOptIn",
+       IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_OPT_IN},
+      {"modulesFirstRunExperienceOptOut",
+       IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_OPT_OUT},
+      {"modulesFirstRunExperienceOptOutToast",
+       IDS_NTP_MODULES_FIRST_RUN_EXPERIENCE_OPT_OUT_TOAST},
   };
   source->AddLocalizedStrings(kStrings);
 

chrome/test/data/webui/new_tab_page/modules/modules_test.ts

@@ -177,6 +177,38 @@ suite('NewTabPageModulesModulesTest', () => {
       // Assert.
       assertTrue(customizeModule.received);
     });
+
+    test(`fre can be opted out of and restored`, async () => {
+      // Arrange.
+      const fooDescriptor = new ModuleDescriptor('foo', 'Foo', initNullModule);
+      moduleRegistry.setResultFor('getDescriptors', [fooDescriptor]);
+      const modulesElement = await createModulesElement([
+        {
+          descriptor: fooDescriptor,
+          element: createElement(),
+        },
+      ]);
+      callbackRouterRemote.setModulesFreVisibility(true);
+      await callbackRouterRemote.$.flushForTesting();
+
+      // Act
+      $$<HTMLElement>(modulesElement, '.cancel-button')!.click();
+
+      // Assert.
+      assertDeepEquals(false, handler.getArgs('setModulesFreVisible')[0]);
+      assertDeepEquals(false, handler.getArgs('setModulesVisible')[0]);
+      assertTrue(modulesElement.$.removeModuleFreToast.open);
+      assertFalse(modulesElement.$.removeModuleToast.open);
+
+
+      // Act.
+      modulesElement.$.undoRemoveModuleFreButton.click();
+
+      // Assert.
+      assertFalse(modulesElement.$.removeModuleFreToast.open);
+      assertDeepEquals(true, handler.getArgs('setModulesFreVisible')[1]);
+      assertDeepEquals(true, handler.getArgs('setModulesVisible')[1]);
+    });
   });
 
   suite('modules redesigned layout', () => {
@@ -367,7 +399,7 @@ suite('NewTabPageModulesModulesTest', () => {
       // Act.
       modulesElement.$.undoRemoveModuleButton.click();
 
-      // // Assert.
+      // Assert.
       assertDeepEquals(['foo', false], handler.getArgs('setModuleDisabled')[1]);
 
       // Act.