[Quests V2] Update Quests V2 context menu

Add context menu options for done, info. Update text for all menu options. Add icons for all menu options. Adding styling for menu. Screenshot: https://screenshot.googleplex.com/AFaUneQ44kYRp6e Bug: 1434394 Change-Id: I17aa27aebcb9630e9528922ad130567b9369e693 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4752605 Reviewed-by: Roman Arora <romanarora@chromium.org> Reviewed-by: John Lee <johntlee@chromium.org> Code-Coverage: findit-for-me@appspot.gserviceaccount.com <findit-for-me@appspot.gserviceaccount.com> Reviewed-by: Thomas Lukaszewicz <tluk@chromium.org> Commit-Queue: Roman Arora <romanarora@chromium.org> Cr-Commit-Position: refs/heads/main@{#1184322}
chromium · Aug 16, 2023 · 5fdcc21 · 5fdcc21
1 parent 01d003e
commit 5fdcc21
Show file tree

Hide file tree

Showing 12 changed files with 251 additions and 56 deletions.
diff --git a/chrome/browser/new_tab_page/modules/new_tab_page_modules_interactive_uitest.cc b/chrome/browser/new_tab_page/modules/new_tab_page_modules_interactive_uitest.cc
@@ -321,7 +321,7 @@ IN_PROC_BROWSER_TEST_F(NewTabPageModulesRedesignedInteractiveUiTest,
       "ntp-module-wrapper",
       "ntp-history-clusters-redesigned",
       "history-clusters-header-v2",
-      "#dismissButton"};
+      "#dismiss"};
 
   RunTestSequence(
       // 1. Wait for new tab page to load.
@@ -348,5 +348,62 @@ IN_PROC_BROWSER_TEST_F(NewTabPageModulesRedesignedInteractiveUiTest,
                                       kSampleNumClusters - 1));
 }
 
-// TODO(crbug.com/1434428): Add a test that asserts the 'Done' button dismisses
-// the card.
+#if BUILDFLAG(IS_CHROMEOS)
+#define MAYBE_ClickingDoneButtonDismissesCluster \
+  DISABLED_ClickingDoneButtonDismissesCluster
+#else
+#define MAYBE_ClickingDoneButtonDismissesCluster \
+  ClickingDoneButtonDismissesCluster
+#endif
+IN_PROC_BROWSER_TEST_F(NewTabPageModulesRedesignedInteractiveUiTest,
+                       MAYBE_ClickingDoneButtonDismissesCluster) {
+  const DeepQuery kModulesContainer = {"ntp-app", "ntp-modules-v2",
+                                       "#container"};
+  const DeepQuery kHistoryClustersMoreButton = {
+      "ntp-app",
+      "ntp-modules-v2",
+      "ntp-module-wrapper",
+      "ntp-history-clusters-redesigned",
+      "history-clusters-header-v2",
+      "ntp-module-header-v2",
+      "#menuButton"};
+  const DeepQuery kHistoryClustersMoreActionMenu = {
+      "ntp-app",
+      "ntp-modules-v2",
+      "ntp-module-wrapper",
+      "ntp-history-clusters-redesigned",
+      "history-clusters-header-v2",
+      "cr-action-menu",
+      "dialog"};
+  const DeepQuery kHistoryClustersDoneButton = {
+      "ntp-app",
+      "ntp-modules-v2",
+      "ntp-module-wrapper",
+      "ntp-history-clusters-redesigned",
+      "history-clusters-header-v2",
+      "#done"};
+
+  RunTestSequence(
+      // 1. Wait for new tab page to load.
+      LoadNewTabPage(),
+      // 2. Wait for modules container to have an expected child count matching
+      // the test setup.
+      WaitForElementChildElementCount(kModulesContainer, kSampleNumClusters),
+      // 3. Ensure the NTP history clusters module "done" button exists, and
+      // thus, that the module loaded successfully.
+      WaitForElementToLoad(kHistoryClustersDoneButton),
+      // 4. Scroll to the "done" element of the NTP history clusters module.
+      // Modules may sometimes load below the fold.
+      ScrollIntoView(kNewTabPageElementId, kHistoryClustersDoneButton),
+      // 5. Click the "more actions" menu button of the NTP history clusters
+      // module.
+      ClickElement(kNewTabPageElementId, kHistoryClustersMoreButton),
+      // 6. Wait for history clusters menu dialog to be anchored.
+      WaitForElementStyleSet(kHistoryClustersMoreActionMenu),
+      // 7. Click the "done" element of the NTP history clusters module.
+      ClickElement(kNewTabPageElementId, kHistoryClustersDoneButton),
+      // 8. Wait for modules container to reflect an updated element count that
+      // resulted from dismissing a module.
+      WaitForElementChildElementCount(kModulesContainer,
+                                      kSampleNumClusters - 1));
+}
diff --git a/chrome/browser/resources/new_tab_page/BUILD.gn b/chrome/browser/resources/new_tab_page/BUILD.gn
@@ -12,6 +12,8 @@ assert(!is_android)
 grd_prefix = "new_tab_page"
 
 build_webui("build") {
+  icons_html_files = [ "modules/v2/icons.html" ]
+
   static_files = [
     "new_tab_page.html",
     "shared_vars.css",

diff --git a/chrome/browser/resources/new_tab_page/modules/v2/history_clusters/header_tile.html b/chrome/browser/resources/new_tab_page/modules/v2/history_clusters/header_tile.html
@@ -1,5 +1,6 @@
 <style include="cr-icons cr-shared-style">
   :host {
+    --menu-item-margin: 12px;
     background: var(--color-new-tab-page-module-item-background);
     border-radius: var(--ntp-module-item-border-radius);
     display: flex;
@@ -20,15 +21,6 @@
     --cr-menu-shadow: var(--ntp-menu-shadow);
   }
 
-  cr-icon-button {
-    --cr-icon-button-icon-size: 20px;
-    --cr-icon-button-fill-color: var(--color-new-tab-page-primary-foreground);
-    --cr-icon-button-hover-background-color:
-        var(--color-new-tab-page-control-background-hovered);
-    margin-inline-end: -4px;
-    margin-inline-start: 0;
-  }
-
   #label-container {
     color: var(--color-new-tab-page-primary-foreground);
     display: flex;
@@ -81,37 +73,48 @@
     margin-inline-start: 12px;
     line-height: 20px;
   }
+
+  .icon {
+    --cr-icon-ripple-size: 20px;
+    -webkit-mask-size: 16px;
+    background-color: transparent;
+    fill: var(--color-new-tab-page-secondary-foreground);
+    margin-inline-start: calc(-1 * var(--menu-item-margin));
+    margin-inline-end: var(--menu-item-margin);
+  }
+
+  hr {
+    background-color: var(--color-new-tab-page-module-context-menu-divider);
+    border: none;
+    height: 1px;
+    margin: 0;
+  }
 </style>
 <ntp-module-header-v2
     header-text="[[i18n('modulesJourneysResumeJourney', '')]]"
     on-menu-button-click="onMenuButtonClick_"
     more-actions-text="[[i18n('modulesMoreActions', clusterLabel)]]">
 </ntp-module-header-v2>
 <div id="label-container">
-    <h2 id="label" hidden="[[suggestionChipHeaderEnabled_]]">
-      [[clusterLabel]]
-    </h2>
-    <div id="suggestion-chip" hidden="[[!suggestionChipHeaderEnabled_]]">
-      <div id="suggestion-chip-icon" class="cr-icon"></div>
-      <h2 id="suggestion-chip-label">[[clusterLabel]]</h2>
-    </div>
+  <div id="label" hidden="[[suggestionChipHeaderEnabled_]]">
+    [[clusterLabel]]
+  </div>
+  <div id="suggestion-chip" hidden="[[!suggestionChipHeaderEnabled_]]">
+    <div id="suggestion-chip-icon" class="cr-icon"></div>
+    <span id="suggestion-chip-label">[[clusterLabel]]</span>
+  </div>
 </div>
 
 <cr-action-menu id="actionMenu">
-  <button id="openInfoDialogButton" class="dropdown-item"
-      on-click="onButtonClick_" data-action="info">
-    [[i18n('moduleInfoButtonTitle')]]
-  </button>
-  <button id="dismissButton" class="dropdown-item"
-      on-click="onButtonClick_" data-action="dismiss">
-    [[dismissText]]
-  </button>
-  <button id="disableButton" class="dropdown-item"
-      on-click="onButtonClick_" data-action="disable">
-    [[disableText]]
-  </button>
-  <button id="customizeButton" class="dropdown-item"
-      on-click="onCustomizeButtonClick_">
-    $i18n{modulesCustomizeButtonText}
-  </button>
+  <template is="dom-repeat"
+      items="[[getMenuItemGroups_()]]" as="group">
+    <template is="dom-repeat" items="[[group]]">
+      <button id="[[item.action]]" class="dropdown-item"
+          on-click="onButtonClick_" data-action$="[[item.action]]">
+        <iron-icon class="icon cr-icon" icon="[[item.icon]]"></iron-icon>
+        [[item.text]]
+      </button>
+    </template>
+    <hr hidden$="[[!showDivider_(index)]]">
+  </template>
 </cr-action-menu>
diff --git a/chrome/browser/resources/new_tab_page/modules/v2/history_clusters/header_tile.ts b/chrome/browser/resources/new_tab_page/modules/v2/history_clusters/header_tile.ts
@@ -3,17 +3,25 @@
 // found in the LICENSE file.
 
 import '../module_header.js';
+import '../icons.html.js';
 import 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.js';
 import 'chrome://resources/cr_elements/cr_shared_style.css.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
 import {CrActionMenuElement} from 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.js';
 import {assert} from 'chrome://resources/js/assert_ts.js';
-import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {I18nMixin, loadTimeData} from '../../../i18n_setup.js';
 
 import {getTemplate} from './header_tile.html.js';
 
+export interface MenuItem {
+  action: string;
+  icon: string;
+  text: string;
+}
+
 export interface HistoryClustersHeaderElementV2 {
   $: {
     actionMenu: CrActionMenuElement,
@@ -34,8 +42,6 @@ export class HistoryClustersHeaderElementV2 extends I18nMixin
   static get properties() {
     return {
       clusterLabel: String,
-      dismissText: String,
-      disableText: String,
 
       /** Whether suggestion chip header will show. */
       suggestionChipHeaderEnabled_: {
@@ -48,26 +54,67 @@ export class HistoryClustersHeaderElementV2 extends I18nMixin
   }
 
   clusterLabel: string;
-  dismissText: string;
-  disableText: string;
   private suggestionChipHeaderEnabled_: boolean;
 
-  private onButtonClick_(e: Event) {
-    const action: string = (e.target! as any).dataset.action;
+  private onButtonClick_(e: DomRepeatEvent<MenuItem>) {
+    const {action} = e.model.item;
     assert(action);
     this.$.actionMenu.close();
-    this.dispatchEvent(
-        new Event(`${action}-button-click`, {bubbles: true, composed: true}));
+    if (action === 'customize-module') {
+      this.dispatchEvent(
+          new Event('customize-module', {bubbles: true, composed: true}));
+    } else {
+      this.dispatchEvent(new Event(
+          `${action}-button-click`, {bubbles: true, composed: true}));
+    }
   }
 
   private onMenuButtonClick_(e: Event) {
     this.$.actionMenu.showAt(e.target as HTMLElement);
   }
 
-  private onCustomizeButtonClick_() {
-    this.$.actionMenu.close();
-    this.dispatchEvent(
-        new Event('customize-module', {bubbles: true, composed: true}));
+  private getMenuItemGroups_(): MenuItem[][] {
+    return [
+      [
+        {
+          action: 'done',
+          icon: 'modules:done',
+          text: this.i18n('modulesJourneysDoneButton'),
+        },
+        {
+          action: 'dismiss',
+          icon: 'modules:thumb_down',
+          text: this.i18n('modulesJourneysDismissButton'),
+        },
+        {
+          action: 'disable',
+          icon: 'modules:block',
+          text: this.i18nRecursive(
+              '', 'modulesDisableButtonTextV2', 'modulesJourneyDisable'),
+        },
+        {
+          action: 'show-all',
+          icon: 'modules:right_panel_open',
+          text: this.i18n('modulesJourneysShowAllButton'),
+        },
+        {
+          action: 'info',
+          icon: 'modules:info',
+          text: this.i18n('moduleInfoButtonTitle'),
+        },
+      ],
+      [
+        {
+          action: 'customize-module',
+          icon: 'modules:tune',
+          text: this.i18n('modulesCustomizeButtonText'),
+        },
+      ],
+    ];
+  }
+
+  private showDivider_(index: number): boolean {
+    return index === 0;
   }
 }
 

diff --git a/chrome/browser/resources/new_tab_page/modules/v2/history_clusters/module.html b/chrome/browser/resources/new_tab_page/modules/v2/history_clusters/module.html
@@ -190,12 +190,9 @@
 </style>
 <div id="layout">
   <history-clusters-header-v2
-      disable-text="[[i18nRecursive('',
-                                  'modulesDisableButtonText',
-                                  'modulesJourneyDisable')]]"
-      dismiss-text="[[i18n('modulesDismissButtonText', cluster.label)]]"
       on-disable-button-click="onDisableButtonClick_"
       on-dismiss-button-click="onDismissButtonClick_"
+      on-done-button-click="onDoneButtonClick_"
       on-info-button-click="onInfoButtonClick_"
       cluster-label="[[computeLabel_()]]"
       format$="[[format]]"

diff --git a/chrome/browser/resources/new_tab_page/modules/v2/history_clusters/module.ts b/chrome/browser/resources/new_tab_page/modules/v2/history_clusters/module.ts
@@ -153,11 +153,30 @@ export class HistoryClustersModuleElement extends I18nMixin
     }));
   }
 
+  private onDoneButtonClick_() {
+    HistoryClustersProxyImpl.getInstance()
+        .handler.updateClusterVisitsInteractionState(
+            this.cluster.visits, InteractionState.kDone);
+    this.dispatchEvent(new CustomEvent('dismiss-module-instance', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        message: loadTimeData.getStringF(
+            'dismissModuleToastMessage', this.cluster.label),
+        restoreCallback: () => {
+          HistoryClustersProxyImpl.getInstance()
+              .handler.updateClusterVisitsInteractionState(
+                  this.cluster.visits, InteractionState.kDefault);
+        },
+      },
+    }));
+  }
+
   private onInfoButtonClick_() {
     this.$.infoDialogRender.get().showModal();
   }
 
-  private onShowAllClick_() {
+  private onShowAllButtonClick_() {
     assert(this.cluster.label.length >= 2);
     HistoryClustersProxyImpl.getInstance().handler.showJourneysSidePanel(
         this.cluster.label.substring(1, this.cluster.label.length - 1));

diff --git a/chrome/browser/resources/new_tab_page/modules/v2/icons.html b/chrome/browser/resources/new_tab_page/modules/v2/icons.html
@@ -0,0 +1,32 @@
+<iron-iconset-svg name="modules" size="24">
+  <svg>
+    <defs>
+      <g id="block" viewBox="0 -960 960 960">
+        <path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-60q142.375 0 241.188-98.812Q820-337.625 820-480q0-60.662-21-116.831Q778-653 740-699L261-220q45 39 101.493 59.5Q418.987-140 480-140ZM221-261l478-478q-46-39-102.169-60T480-820q-142.375 0-241.188 98.812Q140-622.375 140-480q0 61.013 22 117.507Q184-306 221-261Z">
+        </path>
+      </g>
+      <g id="done" viewBox="0 -960 960 960">
+        <path d="M378-246 154-470l43-43 181 181 384-384 43 43-427 427Z">
+        </path>
+      </g>
+      <g id="thumb_down" viewBox="0 -960 960 960">
+        <path d="M242-840h444v512L408-40l-39-31q-6-5-9-14t-3-22v-10l45-211H103q-24 0-42-18t-18-42v-81.839Q43-477 41.5-484.5T43-499l126-290q8.878-21.25 29.595-36.125Q219.311-840 242-840Zm384 60H229L103-481v93h373l-53 249 203-214v-427Zm0 427v-427 427Zm60 25v-60h133v-392H686v-60h193v512H686Z">
+        </path>
+      </g>
+      <g id="right_panel_open" viewBox="0 -960 960 960">
+        <path d="M433-344v-272L297-480l136 136ZM180-120q-24.75 0-42.375-17.625T120-180v-600q0-24.75 17.625-42.375T180-840h600q24.75 0 42.375 17.625T840-780v600q0 24.75-17.625 42.375T780-120H180Zm453-60h147v-600H633v600Zm-60 0v-600H180v600h393Zm60 0h147-147Z">
+        </path>
+      </g>
+      <g id="info" viewBox="0 0 24 24">
+        <path d="M0 0h24v24H0V0z" fill="none">
+        </path>
+        <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z">
+        </path>
+      </g>
+      <g id="tune" viewBox="0 -960 960 960">
+        <path d="M427-120v-225h60v83h353v60H487v82h-60Zm-307-82v-60h247v60H120Zm187-166v-82H120v-60h187v-84h60v226h-60Zm120-82v-60h413v60H427Zm166-165v-225h60v82h187v60H653v83h-60Zm-473-83v-60h413v60H120Z">
+        </path>
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
diff --git a/chrome/browser/ui/color/chrome_color_id.h b/chrome/browser/ui/color/chrome_color_id.h
@@ -215,6 +215,7 @@
   E_CPONLY(kColorNewTabPageMicBorderColor) \
   E_CPONLY(kColorNewTabPageMicIconColor) \
   E_CPONLY(kColorNewTabPageModuleControlBorder) \
+  E_CPONLY(kColorNewTabPageModuleContextMenuDivider) \
   E_CPONLY(kColorNewTabPageModuleBackground) \
   E_CPONLY(kColorNewTabPageModuleIconContainerBackground) \
   E_CPONLY(kColorNewTabPageModuleItemBackground) \

diff --git a/chrome/browser/ui/color/material_new_tab_page_color_mixer.cc b/chrome/browser/ui/color/material_new_tab_page_color_mixer.cc
@@ -61,6 +61,7 @@ void AddMaterialNewTabPageColorMixer(ui::ColorProvider* provider,
   }
   mixer[kColorNewTabPageHistoryClustersModuleItemBackground] = {
       ui::kColorSysBaseContainerElevated};
+  mixer[kColorNewTabPageModuleContextMenuDivider] = {ui::kColorSysDivider};
 
   mixer[kColorNewTabPagePromoBackground] = {ui::kColorSysBase};