blob: e79c20ea1bccb6ef82e36b5c5ba2a03791ebf465 [file] [log] [blame]
<style include="cr-shared-style settings-shared cr-page-host-style">
.banner {
display: block;
margin-inline-end: auto;
margin-inline-start: auto;
width: 120px;
}
.box-last {
padding-bottom: 12px;
}
.card {
background-color: var(--cr-card-background-color);
border-radius: var(--cr-card-border-radius);
box-shadow: var(--cr-card-shadow);
flex: 1;
}
.card-banner {
display: block;
margin-inline-end: auto;
margin-inline-start: auto;
max-width: 400px;
}
.info-header {
color: var(--cr-secondary-text-color);
font-weight: 500;
}
.label-wrapper {
display: block;
}
.secondary {
color: var(--cr-secondary-text-color);
font-weight: 400;
}
.section-header {
color: var(--cr-primary-text-color);
font-size: 108%;
font-weight: 400;
letter-spacing: .25px;
margin-bottom: 12px;
margin-top: var(--cr-section-vertical-margin);
outline: none;
padding-bottom: 4px;
padding-top: 8px;
}
.updated-toggle-button {
font-weight: 500;
}
#flocCard {
margin-top: var(--cr-section-vertical-margin);
}
#flocExplanation {
margin-block-end: 8px;
}
#overscroll {
padding-top: 64px;
}
#page-container {
box-sizing: border-box;
display: block;
height: inherit;
margin: 0 auto;
max-width: 550px;
min-width: 400px;
position: relative;
width: calc(100% * var(--cr-centered-card-width-percentage));
}
#page-heading {
font-size: 2rem;
font-weight: 200;
margin: 0;
padding: 28px 0 14px 0;
text-align: center;
}
</style>
<settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs>
<div id="page-container">
<h1 id="page-heading">$i18n{privacySandboxTitle}</h1>
<picture>
<source class="banner"
srcset="chrome://settings/images/privacy_sandbox_banner_dark.svg"
media="(prefers-color-scheme: dark)">
<img class="banner" alt=""
src="chrome://settings/images/privacy_sandbox_banner.svg">
</picture>
<template is="dom-if" if="[[!privacySandboxSettings2Enabled_]]">
<div>
<h2 id="pageHeader" class="section-header" tabindex="-1">
$i18n{privacySandboxPageHeading}
</h2>
</div>
<p>$i18n{privacySandboxPageExplanation1}</p>
<p>$i18n{privacySandboxPageExplanation2}</p>
<p>$i18n{privacySandboxPageExplanation3}</p>
<p>$i18nRaw{privacySandboxPageExplanation4}</p>
</template>
<template is="dom-if" if="[[privacySandboxSettings2Enabled_]]">
<p>$i18nRaw{privacySandboxPageExplanation1Phase2}</p>
<p>$i18n{privacySandboxPageExplanation2Phase2}</p>
</template>
<div class="card">
<settings-toggle-button id="apiToggleButton"
class$="[[apiToggleButtonClass_()]]"
pref="{{prefs.privacy_sandbox.apis_enabled}}"
label="$i18n{privacySandboxPageSettingTitle}"
on-change="onApiToggleButtonChange_">
</settings-toggle-button>
<template is="dom-if" if="[[!privacySandboxSettings2Enabled_]]">
<div id="phase1SettingExplanation" class="cr-row continuation">
<div class="secondary">
$i18n{privacySandboxPageSettingExplanation1}
</div>
</div>
<div class="cr-row continuation">
<div class="secondary">
<ul>
<li><span>$i18n{privacySandboxPageSettingExplanation2}</span></li>
<li><span>$i18n{privacySandboxPageSettingExplanation3}</span></li>
</ul>
</div>
</div>
<div class="cr-row continuation box-last">
<cr-button class="cr-button" id="learnMoreButton" role="button"
tabindex="0" on-click="onLearnMoreButtonClick_">
$i18n{privacySandboxPageDetails}
</cr-button>
</div>
</template>
<template is="dom-if" if="[[privacySandboxSettings2Enabled_]]">
<div id="phase2SettingExplanation" class="cr-row continuation">
<div class="secondary">
$i18n{privacySandboxPageSettingExplanation1Phase2}
</div>
</div>
<div class="cr-row continuation box-last">
<div class="secondary">
<ul>
<li>
<span>$i18n{privacySandboxPageSettingExplanation2Phase2}</span>
</li>
<li>
<span>$i18n{privacySandboxPageSettingExplanation3Phase2}</span>
</li>
</ul>
</div>
</div>
</template>
</div>
<template is="dom-if" if="[[privacySandboxSettings2Enabled_]]">
<div id="flocCard" class="card">
<picture>
<source class="card-banner" media="(prefers-color-scheme: dark)"
srcset="./images/privacy_sandbox_floc_banner_dark.svg">
<img class="card-banner" alt=""
src="./images/privacy_sandbox_floc_banner.svg">
</picture>
<settings-toggle-button id="flocToggleButton"
class="updated-toggle-button"
pref="{{prefs.generated.floc_enabled}}"
label="$i18n{privacySandboxPageFlocHeading}"
on-change="onFlocToggleButtonChange_">
</settings-toggle-button>
<div id="flocExplanation" class="cr-row continuation">
<div class="secondary">$i18nRaw{privacySandboxPageFlocExplanation}</div>
</div>
<div class="cr-row continuation">
<div class="label-wrapper">
<div class="info-header">$i18n{privacySandboxPageFlocStatus}</div>
<div id="flocStatus" class="cr-secondary-text">
[[flocId_.trialStatus]]
</div>
</div>
</div>
<div class="cr-row continuation">
<div class="label-wrapper">
<div class="info-header">$i18n{privacySandboxPageFlocCohort}</div>
<div id="flocId" class="cr-secondary-text">[[flocId_.cohort]]</div>
</div>
</div>
<div class="cr-row continuation">
<div class="label-wrapper">
<div class="info-header">
$i18n{privacySandboxPageFlocCohortNextUpdate}
</div>
<div id="flocUpdatedOn" class="cr-secondary-text">
[[flocId_.nextUpdate]]
</div>
</div>
</div>
<div class="cr-row continuation">
<div class="secondary">$i18n{privacySandboxPageFlocResetExplanation}</div>
</div>
<div class="cr-row continuation box-last">
<cr-button id="resetFlocIdButton" class="cr-button" role="button"
disabled$="[[!flocId_.canReset]]" on-click="onResetFlocClick_">
$i18n{privacySandboxPageFlocResetCohort}
</cr-button>
</div>
</template>
</div>
<div id="overscroll"></div>