<style include="settings-shared">
:host {
/* Fixed height to allow multiple tabs with different height.
* The last entry in the advanced tab should show half an entry.
* crbug.com/652027 */
--body-container-height: 322px;
}
#clearBrowsingDataDialog {
--border-top-color: var(--google-grey-300);
--cr-dialog-top-container-min-height: 42px;
--cr-dialog-body-border-top: 1px solid var(--border-top-color);
}
@media (prefers-color-scheme: dark) {
#clearBrowsingDataDialog {
--border-top-color: var(--cr-separator-color);
}
}
#clearBrowsingDataDialog:not(.fully-rendered) {
visibility: hidden;
}
#clearBrowsingDataDialog [slot=title] {
padding-bottom: 8px;
}
#clearBrowsingDataDialog::part(body-container) {
height: var(--body-container-height);
min-height: 200px;
}
#clearBrowsingDataDialog [slot=body] {
padding-top: 8px;
}
#clearBrowsingDataDialog [slot=footer] {
background: var(--google-grey-50);
border-top: none;
padding: 0;
}
@media (prefers-color-scheme: dark) {
#clearBrowsingDataDialog [slot=footer] {
background: rgb(50, 54, 57); /* Custom color from Namrata. */
}
}
.row {
align-items: center;
display: flex;
min-height: 40px;
}
paper-spinner-lite {
margin-bottom: auto;
margin-inline-end: 16px;
margin-top: auto;
}
settings-checkbox {
--cr-section-two-line-min-height: 48px;
}
#basic-tab settings-checkbox + settings-checkbox {
--settings-checkbox-margin-top: 12px;
}
cr-tabs {
--cr-tabs-font-size: 100%;
--cr-tabs-height: 40px;
}
.time-range-row {
margin-bottom: 12px;
}
.time-range-select {
margin-inline-start: 12px;
}
.dropdown-error::part(select) {
border-color: var(--settings-error-color);
color: var(--settings-error-color);
}
.dropdown-error::part(select):focus {
outline-color: var(--settings-error-color);
}
[slot=title] .secondary {
font-size: calc(13 / 15 * 100%);
padding-top: 8px;
}
.divider {
border-top: var(--cr-separator-line);
margin: 0 16px;
}
#footer-description {
color: var(--cr-secondary-text-color);
padding: 16px;
}
#clearingDataAlert {
clip: rect(0, 0, 0, 0);
position: fixed;
}
.search-history-box {
background-color: var(--google-grey-50);
border: 1px solid var(--google-grey-200);
border-radius: 4px;
display: flex;
margin-top: 12px;
padding: 8px;
}
/* dark mode */
@media (prefers-color-scheme: dark) {
.search-history-box {
background-color: rgba(0, 0, 0, .3);
border-color: transparent;
}
}
.search-history-box-icon {
--iron-icon-fill-color: var(--cr-link-row-start-icon-color,
var(--google-grey-700));
display: flex;
flex-shrink: 0;
margin: auto;
padding-inline-end: 10px;
width: var(--cr-link-row-icon-width, var(--cr-icon-size));
}
@media (prefers-color-scheme: dark) {
.search-history-box-icon {
--iron-icon-fill-color: var(--cr-link-row-start-icon-color,
var(--google-grey-500));
}
}
#nonGoogleSearchHistoryBox {
margin-bottom: 16px;
}
</style>
<cr-dialog id="clearBrowsingDataDialog"
close-text="$i18n{close}" ignore-popstate has-tabs ignore-enter-key>
<div slot="title">
<div>$i18n{clearBrowsingData}</div>
</div>
<div slot="header">
<cr-tabs id="tabs" tab-names="[[tabsNames_]]"
selected="{{selectedTabIndex_}}"
on-selected-changed="recordTabChange_">
</cr-tabs>
</div>
<div slot="body">
<cr-page-selector id="pages" selected="[[selectedTabIndex_]]"
on-iron-select="updateClearButtonState_">
<div id="basic-tab">
<div class="row time-range-row">
<span class="time-range-label" aria-hidden="true">
$i18n{clearTimeRange}
</span>
<template is="dom-if" if="[[!enableCbdTimeframeRequired_]]">
<settings-dropdown-menu id="clearFromBasic" no-set-pref
class="time-range-select"
label="$i18n{clearTimeRange}"
pref="{{prefs.browser.clear_data.time_period_basic}}"
menu-options="[[clearFromOptions_]]"
on-settings-control-change="onTimePeriodChanged_">
</settings-dropdown-menu>
</template>
<template is="dom-if" if="[[enableCbdTimeframeRequired_]]">
<settings-dropdown-menu id="clearFromBasic" required no-set-pref
class="time-range-select"
label="$i18n{clearTimeRange}"
pref="{{prefs.browser.clear_data.time_period_v2_basic}}"
menu-options="[[clearFromOptionsV2_]]"
on-settings-control-change="onTimePeriodChanged_">
</settings-dropdown-menu>
</template>
</div>
<!-- Note: whether these checkboxes are checked are ignored if
deleting history is disabled (i.e. supervised users, policy),
so it's OK to have a hidden checkbox that's also checked (as
the C++ accounts for whether a user is allowed to delete
history independently). -->
<settings-checkbox id="browsingCheckboxBasic"
pref="{{prefs.browser.clear_data.browsing_history_basic}}"
label="$i18n{clearBrowsingHistory}"
sub-label-html="[[browsingCheckboxLabel_(isSyncingHistory_,
'$i18nPolymer{clearBrowsingHistorySummary}',
'$i18nPolymer{clearBrowsingHistorySummarySignedInNoLink}'
)]]"
disabled="[[clearingInProgress_]]"
no-set-pref>
</settings-checkbox>
<settings-checkbox id="cookiesCheckboxBasic"
class="cookies-checkbox"
pref="{{prefs.browser.clear_data.cookies_basic}}"
label="$i18n{clearCookies}"
sub-label="[[cookiesCheckboxLabel_(
syncStatus.signedInState,
shouldShowCookieException_,
'$i18nPolymer{clearCookiesSummary}',
'$i18nPolymer{clearCookiesSummarySignedIn}',
'$i18nPolymer{clearCookiesSummarySyncing}',
'$i18nPolymer{clearCookiesSummarySignedInSupervisedProfile}'
)]]"
disabled="[[clearingInProgress_]]" no-set-pref>
</settings-checkbox>
<settings-checkbox id="cacheCheckboxBasic"
class="cache-checkbox"
pref="{{prefs.browser.clear_data.cache_basic}}"
label="$i18n{clearCache}"
sub-label="[[counters_.cache_basic]]"
disabled="[[clearingInProgress_]]" no-set-pref>
</settings-checkbox>
<div class="search-history-box"
hidden="[[!isSignedIn_]]">
<iron-icon class="search-history-box-icon" aria-hidden="true"
icon="settings20:googleg">
</iron-icon>
<div id="googleSearchHistoryLabel"
inner-h-t-m-l="[[googleSearchHistoryString_]]">
</div>
</div>
<div id="nonGoogleSearchHistoryBox"
class="search-history-box"
hidden="[[!isNonGoogleDse_]]">
<iron-icon class="search-history-box-icon" aria-hidden="true"
icon="cr:search">
</iron-icon>
<div id="nonGoogleSearchHistoryLabel"
inner-h-t-m-l="[[nonGoogleSearchHistoryString_]]">
</div>
</div>
</div>
<div id="advanced-tab">
<div class="row time-range-row">
<span class="time-range-label" aria-hidden="true">
$i18n{clearTimeRange}
</span>
<template is="dom-if" if="[[!enableCbdTimeframeRequired_]]">
<settings-dropdown-menu id="clearFrom" no-set-pref
class="time-range-select"
label="$i18n{clearTimeRange}"
pref="{{prefs.browser.clear_data.time_period}}"
menu-options="[[clearFromOptions_]]"
on-settings-control-change="onTimePeriodChanged_">
</settings-dropdown-menu>
</template>
<template is="dom-if" if="[[enableCbdTimeframeRequired_]]">
<settings-dropdown-menu id="clearFrom" required no-set-pref
class="time-range-select"
label="$i18n{clearTimeRange}"
pref="{{prefs.browser.clear_data.time_period_v2}}"
menu-options="[[clearFromOptionsV2_]]"
on-settings-control-change="onTimePeriodChanged_">
</template>
</div>
<settings-checkbox id="browsingCheckbox"
pref="{{prefs.browser.clear_data.browsing_history}}"
label="$i18n{clearBrowsingHistory}"
sub-label="[[counters_.browsing_history]]"
disabled="[[clearingInProgress_]]"
no-set-pref>
</settings-checkbox>
<settings-checkbox id="downloadCheckbox"
pref="{{prefs.browser.clear_data.download_history}}"
label="$i18n{clearDownloadHistory}"
sub-label="[[counters_.download_history]]"
disabled="[[clearingInProgress_]]"
no-set-pref>
</settings-checkbox>
<settings-checkbox id="cookiesCheckbox"
class="cookies-checkbox"
pref="{{prefs.browser.clear_data.cookies}}"
label="$i18n{clearCookies}"
sub-label="[[counters_.cookies]]"
disabled="[[clearingInProgress_]]" no-set-pref>
</settings-checkbox>
<settings-checkbox id="cacheCheckbox"
class="cache-checkbox"
pref="{{prefs.browser.clear_data.cache}}"
label="$i18n{clearCache}"
sub-label="[[counters_.cache]]"
disabled="[[clearingInProgress_]]" no-set-pref>
</settings-checkbox>
<settings-checkbox
pref="{{prefs.browser.clear_data.passwords}}"
label="$i18n{clearPasswords}"
sub-label="[[counters_.passwords]]"
disabled="[[clearingInProgress_]]" no-set-pref>
</settings-checkbox>
<settings-checkbox
pref="{{prefs.browser.clear_data.form_data}}"
label="$i18n{clearFormData}"
sub-label="[[counters_.form_data]]"
disabled="[[clearingInProgress_]]" no-set-pref>
</settings-checkbox>
<settings-checkbox
pref="{{prefs.browser.clear_data.site_settings}}"
label="$i18nPolymer{siteSettings}"
sub-label="[[counters_.site_settings]]"
disabled="[[clearingInProgress_]]" no-set-pref>
</settings-checkbox>
<settings-checkbox
pref="{{prefs.browser.clear_data.hosted_apps_data}}"
label="$i18n{clearHostedAppData}"
sub-label="[[counters_.hosted_apps_data]]"
disabled="[[clearingInProgress_]]" no-set-pref>
</settings-checkbox>
</div>
</cr-page-selector>
</div>
<div slot="button-container">
<paper-spinner-lite active="[[clearingInProgress_]]">
</paper-spinner-lite>
<cr-button class="cancel-button" autofocus
disabled="[[clearingInProgress_]]"
on-click="onCancelClick_">
$i18n{cancel}
</cr-button>
<cr-button id="clearButton" class="action-button"
on-click="clearBrowsingData_"
disabled="[[isClearButtonDisabled_(clearingInProgress_,
clearButtonDisabled_)]]">
$i18n{clearData}
</cr-button>
<!-- The alert must be inside the dialog for it to be read while the
dialog is open. -->
<div id="clearingDataAlert" role="alert">
[[clearingDataAlertString_]]
</div>
</div>
<if expr="not is_chromeos">
<template is="dom-if"
if="[[shouldShowFooter_(isSignedIn_, syncStatus.signedInState,
isClearPrimaryAccountAllowed_)]]"
restamp>
<div slot="footer">
<settings-sync-account-control sync-status="[[syncStatus]]"
prefs="{{prefs}}" hide-buttons hide-banner>
</settings-sync-account-control>
<div class="divider"></div>
<div id="footer-description" on-click="onSyncDescriptionLinkClicked_">
<span id="signin-info"
hidden="[[!showSigninInfo_(isSignedIn_,
syncStatus.signedInState, isClearPrimaryAccountAllowed_)]]">
$i18nRaw{clearBrowsingDataSignedIn}
</span>
<span id="sync-info"
hidden="[[!showSyncInfo_(isSignedIn_,
syncStatus.signedInState)]]">
$i18nRaw{clearBrowsingDataWithSync}
</span>
<span id="sync-paused-info" hidden="[[!isSyncPaused_]]">
$i18nRaw{clearBrowsingDataWithSyncPaused}
</span>
<span id="sync-passphrase-error-info"
hidden="[[!hasPassphraseError_]]">
$i18nRaw{clearBrowsingDataWithSyncPassphraseError}
</span>
<span id="sync-other-error-info" hidden="[[!hasOtherSyncError_]]">
$i18nRaw{clearBrowsingDataWithSyncError}
</span>
</div>
</div>
</template>
</if>
</cr-dialog>
<template is="dom-if" if="[[showHistoryDeletionDialog_]]" restamp>
<settings-history-deletion-dialog id="historyNotice"
on-close="onHistoryDeletionDialogClose_">
</settings-history-deletion-dialog>
</template>
<template is="dom-if" if="[[showPasswordsDeletionDialog_]]" restamp>
<settings-passwords-deletion-dialog id="passwordsNotice"
on-close="onPasswordsDeletionDialogClose_">
</settings-passwords-deletion-dialog>
</template>