<style include="cr-shared-style sanitize-shared">
.completed-icon {
height: 32px;
width: 32px;
}
cr-expand-button {
background-color: var(--cros-sys-app_base);
border-radius: var(--cr-card-border-radius);
margin-bottom: 8px;
padding: 14px 16px 16px 14px;
}
.expand-buttons {
background-color: var(--cros-sys-app_base_shaded);
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
height: 290px;
padding: 12px;
overflow-y: scroll;
}
.expand-container-icon {
height: 24px;
margin-right: 12px;
width: 24px;
}
.expand-div {
align-items: center;
display: inline-flex;
}
.expand-title {
color: var(--cros-sys-on_surface);
font: var(--cros-button-1-font);
font-family: var(--cros-button-1-font-family);
font-size: var(--cros-button-1-font-size);
font-weight: var(--cros-button-1-font-weight);
line-height: var(--cros-button-1-line-height);
}
.sanitize-done-info {
background-color: var(--cros-sys-secondary_container);
border-radius: 16px;
}
.sanitize-done-rollback {
color: var(--cros-sys-on_secondary_container);
font: var(--cros-button-2-font);
font-family: var(--cros-button-2-font-family);
font-size: var(--cros-button-2-font-size);
font-weight: var(--cros-button-2-font-weight);
line-height: var(--cros-button-2-line-height);
padding: 12px 12px 16px 12px;
}
.secondary-button-container {
margin-left: auto;
}
.list-container {
align-items: center;
border-top: var(--cr-separator-line);
color: var(--cros-sys-on_surface);
display: flex;
font: var(--cros-button-1-font);
font-family: var(--cros-button-1-font-family);
font-size: var(--cros-button-1-font-size);
font-weight: var(--cros-button-1-font-weight);
line-height: var(--cros-button-1-line-height);
min-height: var(--settings-row-min-height);
padding-top: 4px;
}
.list-container:not(:last-child) {
padding-bottom: 4px;
}
</style>
<div slot="body">
<div class="completed-icon-div">
<svg class="completed-icon"
preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 32 32">
<use href="svg/finished_32.svg#finished_32"></use>
</svg>
</div>
<div id="title" class="title">$i18n{sanitizeDoneTitle}</div>
<div class="sanitize-description">
$i18n{sanitizeDoneExplanation}
</div>
<div class="sanitize-done-info">
<div class="sanitize-done-rollback">
$i18n{sanitizeDoneRollback}
</div>
<div class="expand-buttons">
<cr-expand-button class="expand-container"
expanded="{{extensionsExpanded_}}"
id="expandExtensions">
<div class="expand-div">
<svg class="expand-container-icon extensions-icon"
preserveAspectRatio="xMidYMid meet"
role="img" viewBox="0 0 32 32">
<use href="svg/extension_off_32.svg#extension_off_32"></use>
</svg>
<span class="expand-title">
$i18n{sanitizeDoneAccordionExtensionsTitle}
</span>
</div>
<template is="dom-if" if="[[extensionsExpanded_]]">
<div>
<div class="list-container">
$i18n{sanitizeDoneAccordionExtensionsReenable}
<span class="secondary-button-container">
<cros-button role="button" button-style="secondary"
id="extensionsButton" on-click="onExtensionsButtonClick_"
aria-label="$i18n{sanitizeDoneButtonExtensions}"
label="$i18n{sanitizeDoneButtonExtensions}">
</cros-button>
</span>
</div>
</div>
</template>
</cr-expand-button>
<cr-expand-button
class="expand-container"
expanded="{{chromeOSSettingsInfoExpanded_}}"
id="expandChromeOsSettingsInfo">
<div class="expand-div">
<svg class="expand-container-icon chromeos-icon"
preserveAspectRatio="xMidYMid meet"
role="img" viewBox="0 0 24 24">
<use href="svg/card_settings.svg#card_settings"></use>
</svg>
<span class="expand-title">
$i18n{sanitizeDoneAccordionChromeOsTitle}
</span>
</div>
<template is="dom-if" if="[[chromeOSSettingsInfoExpanded_]]">
<div>
<div class="list-container">
$i18n{sanitizeDoneAccordionChromeOsInput}
<span class="secondary-button-container">
<cros-button role="button" button-style="secondary"
id="chromeOsInputButton" on-click="onChromeOsInputClick_"
aria-label="$i18n{sanitizeDoneButtonChromeOSInput}"
label="$i18n{sanitizeDoneButtonChromeOSInput}">
</cros-button>
</span>
</div>
<div class="list-container">
$i18n{sanitizeDoneAccordionChromeOsNetwork}
<span class="secondary-button-container">
<cros-button role="button" button-style="secondary"
id="chromeOsNetworkButton"
on-click="onChromeOsNetworkClick_"
aria-label="$i18n{sanitizeDoneButtonChromeOSNetwork}"
label="$i18n{sanitizeDoneButtonChromeOSNetwork}">
</cros-button>
</span>
</div>
</div>
</template>
</cr-expand-button>
<cr-expand-button
class="expand-container"
expanded="{{chromeSettingsInfoExpanded_}}"
id="expandChromeSettingsInfo">
<div class="expand-div">
<svg class="expand-container-icon chrome-icon"
preserveAspectRatio="xMidYMid meet"
role="img" viewBox="0 0 24 24">
<use href="svg/card_chrome_product.svg#card_chrome_product"></use>
</svg>
<span class="expand-title">
$i18n{sanitizeDoneAccordionChromeTitle}
</span>
</div>
<template is="dom-if" if="[[chromeSettingsInfoExpanded_]]">
<div>
<div class="list-container">
$i18n{sanitizeDoneAccordionChromeSiteContent}
<span class="secondary-button-container">
<cros-button role="button" button-style="secondary"
id="chromeSiteContentButton"
on-click="onChromeSiteContentClick_"
label="Chrome Site Content">
</cros-button>
</span>
</div>
<div class="list-container">
$i18n{sanitizeDoneAccordionChromeStartup}
<span class="secondary-button-container">
<cros-button role="button" button-style="secondary"
id="chromeStartupButton" on-click="onChromeStartupClick_"
aria-label="$i18n{sanitizeDoneButtonChromeStartup}"
label="$i18n{sanitizeDoneButtonChromeStartup}">
</cros-button>
</span>
</div>
<div class="list-container">
$i18n{sanitizeDoneAccordionChromeHomepage}
<span class="secondary-button-container">
<cros-button role="button" button-style="secondary"
id="chromeHomepageButton" on-click="onChromeHomepageClick_"
aria-label="$i18n{sanitizeDoneButtonChromeHomepage}"
label="$i18n{sanitizeDoneButtonChromeHomepage}">
</cros-button>
</span>
</div>
<div class="list-container">
$i18n{sanitizeDoneAccordionChromeLanguages}
<span class="secondary-button-container">
<cros-button role="button" button-style="secondary"
id="chromeLanguagesButton" on-click="onChromeLanguagesClick_"
aria-label="$i18n{sanitizeDoneButtonChromeLanguages}"
label="$i18n{sanitizeDoneButtonChromeLanguages}">
</cros-button>
</span>
</div>
</div>
</template>
</cr-expand-button>
</div>
</div>
<div class="button-container done-button-container">
<cros-button role="button" button-style="primary" id="doneButton"
label="$i18n{sanitizeDoneButton}" on-click="onDoneClick_">
</cros-button>
</div>
</div>