[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:

committed by
Chromium LUCI CQ

parent
735af47218
commit
ee095569f5
chrome
browser
resources
settings
clear_browsing_data_dialog
test
data
webui
@ -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);
|
||||
});
|
||||
});
|
||||
|
Reference in New Issue
Block a user