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}

chrome/browser/ui/webui/history/history_ui.cc

@@ -171,6 +171,8 @@ content::WebUIDataSource* CreateAndAddHistoryUIHTMLSource(Profile* profile) {
       {"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},

chrome/test/data/webui/cr_components/history_embeddings/filter_chips_test.ts

@@ -28,29 +28,29 @@ suite('cr-history-embeddings-filter-chips', () => {
     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);
   });
 

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>

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 @@ hr {
 }
 </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>
 

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 @@ function generateSuggestions(): Suggestion[] {
 
 export interface HistoryEmbeddingsFilterChips {
   $: {
-    byGroupChip: HTMLElement,
-    byGroupChipIcon: IronIconElement,
+    showByGroupSelectMenu: HTMLSelectElement,
   };
 }
 export class HistoryEmbeddingsFilterChips extends PolymerElement {
@@ -97,8 +93,8 @@ export class HistoryEmbeddingsFilterChips extends PolymerElement {
     return this.selectedSuggestion === suggestion;
   }
 
-  private onByGroupClick_() {
-    this.showResultsByGroup = !this.showResultsByGroup;
+  private onShowByGroupSelectMenuChanged_() {
+    this.showResultsByGroup = this.$.showByGroupSelectMenu.value === 'true';
   }
 
   private onTimeRangeStartChanged_() {