Update history "show by" button to use a select menu instead of a chip

http://screen/YmX37AW435pq2NG

Bug: 328648133
Change-Id: Ic14b86e4108ee7a5cb96170032a3402c7d05cbd5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5468627
Reviewed-by: Nico Weber <thakis@chromium.org>
Reviewed-by: manuk hovanesian <manukh@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1291683}
diff --git a/chrome/browser/ui/webui/history/history_ui.cc b/chrome/browser/ui/webui/history/history_ui.cc
index 03cc636..5ddf1da 100644
--- a/chrome/browser/ui/webui/history/history_ui.cc
+++ b/chrome/browser/ui/webui/history/history_ui.cc
@@ -171,6 +171,8 @@
       {"historyEmbeddingsDisclaimer", IDS_HISTORY_EMBEDDINGS_DISCLAIMER},
       {"historyEmbeddingsPromoHeading", IDS_HISTORY_EMBEDDINGS_PROMO_HEADING},
       {"historyEmbeddingsPromoBody", IDS_HISTORY_EMBEDDINGS_PROMO_BODY},
+      {"historyEmbeddingsShowByDate", IDS_HISTORY_EMBEDDINGS_SHOW_BY_DATE},
+      {"historyEmbeddingsShowByGroup", IDS_HISTORY_EMBEDDINGS_SHOW_BY_GROUP},
       {"historyEmbeddingsSuggestion1", IDS_HISTORY_EMBEDDINGS_SUGGESTION_1},
       {"historyEmbeddingsSuggestion2", IDS_HISTORY_EMBEDDINGS_SUGGESTION_2},
       {"historyEmbeddingsSuggestion3", IDS_HISTORY_EMBEDDINGS_SUGGESTION_3},
diff --git a/chrome/test/data/webui/cr_components/history_embeddings/filter_chips_test.ts b/chrome/test/data/webui/cr_components/history_embeddings/filter_chips_test.ts
index f61b05b..9b1eb70 100644
--- a/chrome/test/data/webui/cr_components/history_embeddings/filter_chips_test.ts
+++ b/chrome/test/data/webui/cr_components/history_embeddings/filter_chips_test.ts
@@ -28,29 +28,29 @@
     return flushTasks();
   });
 
-  test('UpdatesByGroupChipByBinding', () => {
-    assertFalse(element.$.byGroupChip.hasAttribute('selected'));
-    assertEquals('history-embeddings:by-group', element.$.byGroupChipIcon.icon);
+  test('UpdatesShowByMenuByBinding', () => {
+    assertEquals('false', element.$.showByGroupSelectMenu.value);
     element.showResultsByGroup = true;
-    assertTrue(element.$.byGroupChip.hasAttribute('selected'));
-    assertEquals('cr:check', element.$.byGroupChipIcon.icon);
+    assertEquals('true', element.$.showByGroupSelectMenu.value);
   });
 
-  test('UpdatesByGroupChipByClicking', async () => {
+  test('UpdatesShowByGroupSelectMenu', async () => {
     let notifyEventPromise =
         eventToPromise('show-results-by-group-changed', element);
-    element.$.byGroupChip.click();
+    element.$.showByGroupSelectMenu.value = 'true';
+    element.$.showByGroupSelectMenu.dispatchEvent(new Event('change'));
     let notifyEvent = await notifyEventPromise;
     assertTrue(element.showResultsByGroup);
-    assertTrue(element.$.byGroupChip.hasAttribute('selected'));
+    assertEquals('true', element.$.showByGroupSelectMenu.value);
     assertTrue(notifyEvent.detail.value);
 
     notifyEventPromise =
         eventToPromise('show-results-by-group-changed', element);
-    element.$.byGroupChip.click();
+    element.$.showByGroupSelectMenu.value = 'false';
+    element.$.showByGroupSelectMenu.dispatchEvent(new Event('change'));
     notifyEvent = await notifyEventPromise;
     assertFalse(element.showResultsByGroup);
-    assertFalse(element.$.byGroupChip.hasAttribute('selected'));
+    assertEquals('false', element.$.showByGroupSelectMenu.value);
     assertFalse(notifyEvent.detail.value);
   });
 
diff --git a/components/history_strings.grdp b/components/history_strings.grdp
index caa7806..cb18b71 100644
--- a/components/history_strings.grdp
+++ b/components/history_strings.grdp
@@ -131,6 +131,12 @@
   <message name="IDS_HISTORY_EMBEDDINGS_PROMO_BODY" desc="On the history page, the body text of the promo for history embeddings." translateable="false">
     Enter a search query to search through history. Here is some more placeholder text about how to search History and what data is available. Here is some more text to make this placeholder longer. View more in <ph name="BEGIN_LINK">&lt;a target="_blank" href="$1"&gt;</ph>Settings<ph name="END_LINK">&lt;/a&gt;</ph>.
   </message>
+  <message name="IDS_HISTORY_EMBEDDINGS_SHOW_BY_DATE" desc="On the history page, the label on the option to show history results grouped by date." translateable="false">
+    Show by date
+  </message>
+  <message name="IDS_HISTORY_EMBEDDINGS_SHOW_BY_GROUP" desc="On the history page, the label on the option to show history results grouped by history clusters." translateable="false">
+    Show by group
+  </message>
   <message name="IDS_HISTORY_EMBEDDINGS_SUGGESTION_1" desc="On the history page, the text inside of a suggestion chip that a user can click to update their search to show results from yesterday" translateable="false">
     Yesterday
   </message>
diff --git a/ui/webui/resources/cr_components/history_embeddings/filter_chips.html b/ui/webui/resources/cr_components/history_embeddings/filter_chips.html
index ccdf550..963a3d8 100644
--- a/ui/webui/resources/cr_components/history_embeddings/filter_chips.html
+++ b/ui/webui/resources/cr_components/history_embeddings/filter_chips.html
@@ -1,4 +1,4 @@
-<style>
+<style include="md-select">
 :host {
   display: flex;
   align-items: center;
@@ -24,13 +24,16 @@
 }
 </style>
 
-<cr-chip id="byGroupChip" selected$="[[showResultsByGroup]]"
-    on-click="onByGroupClick_">
-  <iron-icon id="byGroupChipIcon"
-      icon="[[getByGroupIcon_(showResultsByGroup)]]">
-  </iron-icon>
-  $i18n{historyClustersTabLabel}
-</cr-chip>
+<select id="showByGroupSelectMenu" class="md-select"
+    value="[[showResultsByGroup]]"
+    on-change="onShowByGroupSelectMenuChanged_">
+  <option value="false">
+    $i18n{historyEmbeddingsShowByDate}
+  </option>
+  <option value="true">
+    $i18n{historyEmbeddingsShowByGroup}
+  </option>
+</select>
 
 <hr></hr>
 
diff --git a/ui/webui/resources/cr_components/history_embeddings/filter_chips.ts b/ui/webui/resources/cr_components/history_embeddings/filter_chips.ts
index 8a80344..2194ff7 100644
--- a/ui/webui/resources/cr_components/history_embeddings/filter_chips.ts
+++ b/ui/webui/resources/cr_components/history_embeddings/filter_chips.ts
@@ -4,12 +4,9 @@
 
 import '//resources/cr_elements/cr_chip/cr_chip.js';
 import '//resources/cr_elements/cr_shared_vars.css.js';
-import '//resources/cr_elements/icons.html.js';
-import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
-import './icons.html.js';
+import '//resources/cr_elements/md_select.css.js';
 
 import {loadTimeData} from '//resources/js/load_time_data.js';
-import type {IronIconElement} from '//resources/polymer/v3_0/iron-icon/iron-icon.js';
 import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import type {DomRepeatEvent} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -49,8 +46,7 @@
 
 export interface HistoryEmbeddingsFilterChips {
   $: {
-    byGroupChip: HTMLElement,
-    byGroupChipIcon: IronIconElement,
+    showByGroupSelectMenu: HTMLSelectElement,
   };
 }
 export class HistoryEmbeddingsFilterChips extends PolymerElement {
@@ -97,8 +93,8 @@
     return this.selectedSuggestion === suggestion;
   }
 
-  private onByGroupClick_() {
-    this.showResultsByGroup = !this.showResultsByGroup;
+  private onShowByGroupSelectMenuChanged_() {
+    this.showResultsByGroup = this.$.showByGroupSelectMenu.value === 'true';
   }
 
   private onTimeRangeStartChanged_() {