0

[Settings] Expose TimePeriod and change event from CBD TimePicker

This change exposes the currently selected TimePeriod and dispatches a
time-period-change event when the currently selected TimePeriod changes.

This will be used by the Clear Browsing Data v2 dialog to update the
counters and for the deletion.

Bug: 397187800
Change-Id: I03a052395c4fe60ddce316dfcdae7dcfc506bc28
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6513449
Reviewed-by: Rainhard Findling <rainhard@chromium.org>
Commit-Queue: Zaina Al-Mashni <zalmashni@google.com>
Cr-Commit-Position: refs/heads/main@{#1457531}
This commit is contained in:
Zaina Al-Mashni
2025-05-08 06:13:44 -07:00
committed by Chromium LUCI CQ
parent 735af47218
commit ee095569f5
4 changed files with 81 additions and 4 deletions

@ -61,7 +61,8 @@
<div slot="title">$i18n{clearBrowsingData}</div>
<div slot="body">
<!-- TODO(crbug.com/397187800): Update counters on selected time period.-->
<settings-clear-browsing-data-time-picker prefs="{{prefs}}">
<settings-clear-browsing-data-time-picker id="timePicker" prefs="{{prefs}}"
on-selected-time-period-change="onTimePeriodChanged_">
</settings-clear-browsing-data-time-picker>
<div id="checkboxContainer">
<template is="dom-repeat"

@ -24,6 +24,7 @@ import {loadTimeData} from '../i18n_setup.js';
import {BrowsingDataType} from './clear_browsing_data_browser_proxy.js';
import {getTemplate} from './clear_browsing_data_dialog_v2.html.js';
import type {SettingsClearBrowsingDataTimePicker} from './clear_browsing_data_time_picker.js';
export interface SettingsClearBrowsingDataDialogV2Element {
$: {
@ -32,6 +33,7 @@ export interface SettingsClearBrowsingDataDialogV2Element {
deleteBrowsingDataDialog: CrDialogElement,
showMoreButton: CrButtonElement,
manageOtherGoogleDataRow: HTMLElement,
timePicker: SettingsClearBrowsingDataTimePicker,
};
}
@ -161,12 +163,16 @@ export class SettingsClearBrowsingDataDialogV2Element extends
this.getPref(getDataTypePrefName(datatype)).value;
}
private onTimePeriodChanged_() {
// TODO(crbug.com/397187800): Restart counters.
}
private onCancelClick_() {
this.$.deleteBrowsingDataDialog.close();
}
private onClearBrowsingDataClick_() {
// TODO(crbug.com/397187800): Trigger the deletion.
// TODO(crbug.com/397187800): Trigger the deletion and update prefs.
}
private onShowMoreClick_() {

@ -72,6 +72,7 @@ export class SettingsClearBrowsingDataTimePicker extends
return {
selectedTimePeriod_: {
type: Number,
observer: 'onTimePeriodSelectionChanged_',
value: TimePeriod.LAST_HOUR,
},
@ -139,11 +140,20 @@ export class SettingsClearBrowsingDataTimePicker extends
const timePeriodValue =
this.getPref('browser.clear_data.time_period').value;
if (timePeriodValue in TimePeriod) {
if (timePeriodValue in TimePeriod &&
timePeriodValue !== this.selectedTimePeriod_) {
this.selectedTimePeriod_ = timePeriodValue;
}
}
private onTimePeriodSelectionChanged_() {
// Dispatch a |selected-time-period-change| event to notify that the
// currently selected time period has changed due to an explicit user
// selection or a pref change.
this.dispatchEvent(new CustomEvent(
'selected-time-period-change', {bubbles: true, composed: true}));
}
private computeExpandedOptionList_(): TimePeriodOption[] {
const expandedOptionsList: TimePeriodOption[] = [];
@ -192,7 +202,11 @@ export class SettingsClearBrowsingDataTimePicker extends
}
private onTimePeriodSelected_(event: DomRepeatEvent<TimePeriodOption>) {
this.selectedTimePeriod_ = event.model.item.value;
const newTimePeriod = event.model.item.value;
if (newTimePeriod !== this.selectedTimePeriod_) {
this.selectedTimePeriod_ = event.model.item.value;
}
}
private onMoreTimePeriodsButtonClick_(e: Event) {
@ -210,6 +224,10 @@ export class SettingsClearBrowsingDataTimePicker extends
// dialog.
e.stopPropagation();
}
getSelectedTimePeriod(): TimePeriod {
return this.selectedTimePeriod_;
}
}
declare global {

@ -186,4 +186,56 @@ suite('DeleteBrowsingDataTimePicker', function() {
verifyMenuItemsExistForTimePeriods(
[TimePeriod.LAST_WEEK, TimePeriod.ALL_TIME]);
});
test('SelectionChangesTriggerChangeEvent', async function() {
let timePeriodChangeCallCount = 0;
timePicker.addEventListener('selected-time-period-change', () => {
timePeriodChangeCallCount++;
});
// By default, LAST_HOUR is selected.
assertEquals(TimePeriod.LAST_HOUR, timePicker.getSelectedTimePeriod());
// Select the LAST_HOUR chip again.
const lastHourChip = getChipForTimePeriod(TimePeriod.LAST_HOUR);
assertTrue(!!lastHourChip);
lastHourChip.click();
await flushTasks();
// Change event should not be fired if the time period does not change.
assertEquals(0, timePeriodChangeCallCount);
// Select LAST_15_MINUTES from the available chips.
const last15minChip = getChipForTimePeriod(TimePeriod.LAST_15_MINUTES);
assertTrue(!!last15minChip);
last15minChip.click();
await flushTasks();
assertEquals(
TimePeriod.LAST_15_MINUTES, timePicker.getSelectedTimePeriod());
// Change event should be fired on time period selection from chips.
assertEquals(1, timePeriodChangeCallCount);
// Select ALL_TIME from the available menu items.
const allTimeMenuItem = getMenuItemForTimePeriod(TimePeriod.ALL_TIME);
assertTrue(!!allTimeMenuItem);
allTimeMenuItem.click();
await flushTasks();
assertEquals(TimePeriod.ALL_TIME, timePicker.getSelectedTimePeriod());
// Change event should be fired on time period selection from menu items.
assertEquals(2, timePeriodChangeCallCount);
// Update pref to FOUR_WEEKS.
timePicker.setPrefValue(
'browser.clear_data.time_period', TimePeriod.FOUR_WEEKS);
await flushTasks();
assertEquals(TimePeriod.FOUR_WEEKS, timePicker.getSelectedTimePeriod());
// Change event should be fired on pref changes.
assertEquals(3, timePeriodChangeCallCount);
// Update pref to FOUR_WEEKS again.
timePicker.setPrefValue(
'browser.clear_data.time_period', TimePeriod.FOUR_WEEKS);
await flushTasks();
// Change event should not be fired if the pref does not change.
assertEquals(3, timePeriodChangeCallCount);
});
});