<style include="settings-shared">
img {
width: 100%;
}
#explanationText,
#generalControls {
padding: 0 var(--cr-section-padding);
}
#default,
#additionalProtections {
padding: 16px var(--cr-section-padding) 8px var(--cr-section-padding);
}
#defaultHeader {
padding-top: 0;
padding-bottom: 6px;
}
#exceptionHeader3pcd {
padding: 0 var(--cr-section-padding);
margin-bottom: -32px;
}
#explanationText {
padding-top: 16px;
padding-bottom: var(--cr-section-vertical-padding);
}
#blockThirdPartyToggle {
padding: 0 var(--cr-section-padding);
}
#picture {
display: flex;
}
.radio-group-sub-heading {
padding-bottom: 10px;
}
.bullet-row {
align-items: center;
display: flex;
padding: var(--cr-section-vertical-padding) var(--cr-section-padding);
}
.bullet-row > div {
padding-left: var(--cr-section-padding);
padding-right: 40px;
}
.bullet-line {
align-items: center;
display: flex;
min-height: var(--cr-section-two-line-min-height);
}
.bullet-line.one-line {
min-height: var(--cr-section-min-height);
}
.bullet-line > div {
padding-inline-start: var(--cr-radio-button-size);
}
settings-collapse-radio-button {
--settings-collapse-toggle-min-height: var(--cr-section-min-height);
}
settings-collapse-radio-button:not(:first-of-type) {
--settings-collapse-separator-line: var(--cr-separator-line);
}
settings-collapse-radio-button .bullet-line:last-child {
padding-bottom: 12px;
}
#relatedWebsiteSetsToggle {
padding-inline-end: 0;
padding-inline-start: 0;
}
#toastText {
align-items: center;
display: flex;
max-width: 300px;
min-height: var(--cr-section-two-line-min-height);
}
</style>
<picture id="picture" hidden="[[is3pcdRedesignEnabled_]]">
<source
srcset="chrome://settings/images/cookies_banner_dark.svg"
media="(prefers-color-scheme: dark)">
<img id="banner" alt=""
src="chrome://settings/images/cookies_banner.svg">
</picture>
<picture hidden="[[!is3pcdRedesignEnabled_]]">
<source
srcset="chrome://settings/images/tracking_protection_banner_dark.svg"
media="(prefers-color-scheme: dark)">
<img id="banner" alt=""
src="chrome://settings/images/tracking_protection_banner.svg">
</template>
</picture>
<template is="dom-if" if="[[!is3pcdRedesignEnabled_]]">
<div id="explanationText" class="secondary">
$i18n{thirdPartyCookiesAlignedPageDescription}
</div>
<div id="generalControls">
<settings-radio-group id="primarySettingGroup" no-set-pref
pref="{{prefs.profile.cookie_controls_mode}}"
selectable-elements="
cr-radio-button, settings-collapse-radio-button"
on-change="onCookieControlsModeChanged_">
<settings-collapse-radio-button id="allowThirdParty"
pref="[[prefs.profile.cookie_controls_mode]]"
name="[[cookieControlsModeEnum_.OFF]]"
label="$i18n{thirdPartyCookiesPageAllowRadioLabel}"
expand-aria-label="
$i18n{thirdPartyCookiesPageAllowExpandA11yLabel}">
<div slot="collapse">
<div class="bullet-line">
<iron-icon icon="privacy:cookie"></iron-icon>
<div class="secondary">
$i18n{thirdPartyCookiesPageAllowBulOne}
</div>
</div>
<div class="bullet-line">
<iron-icon icon="privacy:cookie"></iron-icon>
<div class="secondary">
$i18n{thirdPartyCookiesPageAllowBulTwo}
</div>
</div>
</div>
</settings-collapse-radio-button>
<settings-collapse-radio-button id="blockThirdPartyIncognito"
pref="[[prefs.profile.cookie_controls_mode]]"
name="[[cookieControlsModeEnum_.INCOGNITO_ONLY]]"
label="$i18n{thirdPartyCookiesPageBlockIncognitoRadioLabel}"
expand-aria-label="
$i18n{thirdPartyCookiesPageBlockIncognitoExpandA11yLabel}">
<div slot="collapse">
<div class="bullet-line">
<iron-icon icon="privacy:cookie"></iron-icon>
<div class="secondary">
$i18n{thirdPartyCookiesPageBlockIncognitoBulOne}
</div>
</div>
<div class="bullet-line" id="blockThirdPartyIncognitoBulTwo">
<iron-icon icon="settings:block"></iron-icon>
<div class="secondary">
[[getThirdPartyCookiesPageBlockThirdPartyIncognitoBulTwoLabel_()]]
</div>
</div>
</div>
</settings-collapse-radio-button>
<settings-collapse-radio-button id="blockThirdParty"
pref="[[prefs.profile.cookie_controls_mode]]"
name="[[cookieControlsModeEnum_.BLOCK_THIRD_PARTY]]"
label="$i18n{thirdPartyCookiesPageBlockRadioLabel}"
expand-aria-label="
$i18n{thirdPartyCookiesPageBlockExpandA11yLabel}">
<div slot="collapse">
<div class="bullet-line">
<iron-icon icon="privacy:cookie"></iron-icon>
<div class="secondary">
$i18n{thirdPartyCookiesPageBlockBulOne}
</div>
</div>
<div class="bullet-line">
<iron-icon icon="settings:block"></iron-icon>
<div class="secondary">
$i18n{thirdPartyCookiesPageBlockBulTwo}
</div>
</div>
</div>
<template is="dom-if" if="[[enableFirstPartySetsUI_]]">
<div slot="noSelectionCollapse">
<settings-toggle-button
id="relatedWebsiteSetsToggle"
pref="{{prefs.privacy_sandbox.first_party_sets_enabled}}"
label="$i18n{cookiePageRwsLabel}"
sub-label="$i18n{cookiePageRwsSubLabel}"
disabled="[[relatedWebsiteSetsToggleDisabled_(
prefs.profile.cookie_controls_mode.value)]]">
</settings-toggle-button>
</div>
</template>
</settings-collapse-radio-button>
</settings-radio-group>
</div>
</template>
<template is="dom-if" if="[[is3pcdRedesignEnabled_]]">
<div id="default" class="secondary">
$i18n{trackingProtectionPageDescription}
</div>
<div>
<div class="bullet-row">
<iron-icon icon="settings:visibility-off" aria-hidden="true">
</iron-icon>
<div>
$i18n{trackingProtectionBulletOne}
<div class="secondary">
$i18n{trackingProtectionBulletOneDescription}
</div>
</div>
</div>
<div class="bullet-row">
<iron-icon icon="settings:domain-verification" aria-hidden="true">
</iron-icon>
<div>
$i18n{trackingProtectionBulletTwo}
<div class="secondary">
$i18nRaw{trackingProtectionBulletTwoDescription}
</div>
</div>
</div>
</div>
</template>
<h2 id="additionalProtections">
$i18n{trackingProtectionAdvancedLabel}
</h2>
<settings-toggle-button
id="blockThirdPartyToggle"
pref="{{prefs.tracking_protection.block_all_3pc_toggle_enabled}}"
label="$i18n{trackingProtectionThirdPartyCookiesToggleLabel}"
sub-label="
$i18n{trackingProtectionThirdPartyCookiesToggleSubLabel}"
learn-more-url="
$i18n{trackingProtectionThirdPartyCookiesLearnMoreUrl}"
learn-more-aria-label="
$i18n{trackingProtectionThirdPartyCookiesLearnMoreAriaLabel}"
on-settings-boolean-control-change="onBlockAll3pcToggleChanged_"
hidden="[[!is3pcdRedesignEnabled_]]"
icon="settings:visibility-off">
</settings-toggle-button>
<template is="dom-if" if="[[isIpProtectionAvailable_]]">
<settings-toggle-button
id="ipProtectionToggle"
pref="{{prefs.tracking_protection.ip_protection_enabled}}"
label="$i18n{trackingProtectionIpProtectionToggleLabel}"
sub-label-with-link="
$i18n{trackingProtectionIpProtectionToggleSubLabel}"
on-settings-boolean-control-change="onIpProtectionChanged_"
icon="settings:location-disabled">
</settings-toggle-button>
</template>
<template is="dom-if" if="[[isFingerprintingProtectionAvailable_]]">
<settings-toggle-button
id="fingerprintingProtectionToggle"
pref="{{prefs.tracking_protection.fingerprinting_protection_enabled}}"
label="$i18n{trackingProtectionFingerprintingProtectionToggleLabel}"
sub-label="
$i18n{trackingProtectionFingerprintingProtectionToggleSubLabel}"
on-settings-boolean-control-change="onFpProtectionChanged_"
icon="settings:fingerprint-off">
</settings-toggle-button>
</template>
<settings-do-not-track-toggle id="doNotTrack" prefs="{{prefs}}">
</settings-do-not-track-toggle>
<cr-link-row id="site-data-trigger" class="hr"
on-click="onSiteDataClick_" label="$i18n{cookiePageAllSitesLink}"
role-description="$i18n{subpageArrowRoleDescription}">
</cr-link-row>
<div id="exceptionHeader3pcd">
<h2>$i18n{trackingProtectionSitesAllowedCookiesTitle}</h2>
</div>
<site-list id="allow3pcExceptionsList"
category="[[cookiesContentSettingType_]]"
category-subtype="[[contentSetting_.ALLOW]]"
category-header="$i18n{trackingProtectionSitesAllowedCookiesDescription}"
search-filter="[[searchTerm]]"
cookies-exception-type="third-party">
</site-list>
<cr-toast id="toast">
<div id="toastText">$i18n{privacySandboxCookiesDialog}</div>
<cr-button on-click="onPrivacySandboxClick_">
$i18n{privacySandboxCookiesDialogMore}
</cr-button>
<a id="privacySandboxLink" href="adPrivacy"
target="_blank" tabindex="-1" aria-disabled="true"
role="none"></a>
</cr-toast>