From 52d0ac5df1f35c1d5b13cb15d5ef414bfbf0e9b9 Mon Sep 17 00:00:00 2001
From: John Lee <johntlee@chromium.org>
Date: Wed, 24 Apr 2024 03:10:13 +0000
Subject: [PATCH] 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 | 2 ++
.../history_embeddings/filter_chips_test.ts | 20 +++++++++----------
components/history_strings.grdp | 6 ++++++
.../history_embeddings/filter_chips.html | 19 ++++++++++--------
.../history_embeddings/filter_chips.ts | 12 ++++-------
5 files changed, 33 insertions(+), 26 deletions(-)
diff --git a/chrome/browser/ui/webui/history/history_ui.cc b/chrome/browser/ui/webui/history/history_ui.cc
index 03cc63658815b..5ddf1daf18b8f 100644
--- a/chrome/browser/ui/webui/history/history_ui.cc
+++ b/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},
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 f61b05bc2b4c3..9b1eb705e0895 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 @@ 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);
});
diff --git a/components/history_strings.grdp b/components/history_strings.grdp
index caa7806e1927c..cb18b71591752 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"><a target="_blank" href="$1"></ph>Settings<ph name="END_LINK"></a></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 ccdf5506b4fc6..963a3d8d1bc65 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 @@ 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>
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 8a80344721f5f..2194ff78b1ba3 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 @@ 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_() {