<style include="cr-shared-style settings-shared settings-columned-section">
img {
width: 100%;
}
#safeBrowsingSection {
padding: 0 var(--cr-section-padding);
}
.bullet-line {
align-items: center;
display: flex;
min-height: var(--cr-section-min-height);
}
.bullet-line > div {
padding-inline-start: var(--cr-radio-button-size);
}
settings-collapse-radio-button:not(:first-of-type) {
--settings-collapse-separator-line: var(--cr-separator-line);
}
settings-collapse-radio-button[hidden] + settings-collapse-radio-button {
--settings-collapse-separator-line: 0;
}
settings-collapse-radio-button .bullet-line:last-child {
padding-bottom: 12px;
}
settings-toggle-button {
padding-inline-end: 0;
padding-inline-start: 0;
}
settings-toggle-button:not([disabled]) {
pointer-events: all;
}
#safeBrowsingEnhanced .bullet-line:last-of-type {
padding-bottom: 12px;
}
#safeBrowsingEnhanced {
--cr-radio-button-unchecked-ripple-color:
var(--cr-radio-button-checked-ripple-color);
}
#secureConnectionsSection {
padding: 24px var(--cr-section-padding) 8px;
}
#secureConnectionsSection h2 {
padding: 0;
}
#httpsOnlyModeToggle {
padding: 0 var(--cr-section-padding);
}
#httpsFirstModeToggle {
margin-top: 8px;
}
#httpsFirstModeRadioGroup {
width: 100%;
}
#httpsFirstModeRadioGroup .list-item {
padding-block-start: 8px;
padding-block-end: 8px;
padding-inline-start: 20px;
padding-inline-end: 20px;
}
#learnMoreLabelContainer {
pointer-events: auto;
}
</style>
<picture>
<source
srcset="chrome://settings/images/safe_browsing_banner_dark.svg"
media="(prefers-color-scheme: dark)">
<img id="banner" alt=""
src="chrome://settings/images/safe_browsing_banner.svg">
</picture>
<div id="safeBrowsingSection">
<h2>$i18n{safeBrowsingSectionLabel}</h2>
<settings-radio-group id="safeBrowsingRadioGroup" no-set-pref
pref="{{prefs.generated.safe_browsing}}"
selectable-elements="cr-radio-button, settings-collapse-radio-button"
on-change="onSafeBrowsingRadioChange_">
<settings-collapse-radio-button id="safeBrowsingEnhanced"
name="[[safeBrowsingSettingEnum_.ENHANCED]]"
pref="[[prefs.generated.safe_browsing]]"
label="$i18n{safeBrowsingEnhanced}"
sub-label="$i18n{safeBrowsingEnhancedDesc}"
indicator-aria-label="$i18n{controlledSettingPolicy}"
expand-aria-label="$i18n{safeBrowsingEnhancedExpandA11yLabel}"
on-expand-clicked="onEnhancedProtectionExpandButtonClicked_"
no-automatic-collapse>
<div id="enhancedProtectionDescContainer" slot="collapse"
class="settings-columned-section">
<div class="column">
<h3 class="description-header">
$i18n{columnHeadingWhenOn}
</h3>
<ul class="icon-bulleted-list">
<li>
<iron-icon icon="settings20:data" aria-hidden="true">
</iron-icon>
<div class="secondary">
$i18n{safeBrowsingEnhancedWhenOnBulOne}
</div>
</li>
<li>
<iron-icon icon="settings20:download" aria-hidden="true">
</iron-icon>
<div class="secondary">
$i18n{safeBrowsingEnhancedWhenOnBulTwo}
</div>
</li>
<li>
<iron-icon icon="settings20:gshield" aria-hidden="true">
</iron-icon>
<div class="secondary">
$i18n{safeBrowsingEnhancedWhenOnBulThree}
</div>
</li>
<li>
<iron-icon icon="settings:language" aria-hidden="true">
</iron-icon>
<div class="secondary">
$i18n{safeBrowsingEnhancedWhenOnBulFour}
</div>
</li>
<li>
<iron-icon icon="settings20:vpn-key-new" aria-hidden="true">
</iron-icon>
<div class="secondary">
$i18n{safeBrowsingEnhancedWhenOnBulFive}
</div>
</li>
</ul>
</div>
<div class="column">
<h3 class="description-header">
$i18n{columnHeadingConsider}
</h3>
<ul class="icon-bulleted-list">
<li>
<iron-icon icon="settings20:link"></iron-icon>
<div class="cr-secondary-text">
$i18n{safeBrowsingEnhancedThingsToConsiderBulOne}
</div>
</li>
<li>
<iron-icon icon="settings20:account-circle"></iron-icon>
<div class="cr-secondary-text">
$i18n{safeBrowsingEnhancedThingsToConsiderBulTwo}
</div>
</li>
<li>
<iron-icon icon="settings:performance"></iron-icon>
<div class="cr-secondary-text">
$i18n{safeBrowsingEnhancedThingsToConsiderBulThree}
</div>
</li>
</ul>
<div id="learnMoreLabelContainer" class="cr-secondary-text">
$i18nRaw{safeBrowsingEnhancedLearnMoreLabel}
</div>
</div>
</div>
</settings-collapse-radio-button>
<settings-collapse-radio-button id="safeBrowsingStandard"
name="[[safeBrowsingSettingEnum_.STANDARD]]"
pref="[[prefs.generated.safe_browsing]]"
label="$i18n{safeBrowsingStandard}"
sub-label="[[getSafeBrowsingStandardSubLabel_(
enableHashPrefixRealTimeLookups_)]]"
indicator-aria-label="$i18n{controlledSettingPolicy}"
expand-aria-label="$i18n{safeBrowsingStandardExpandA11yLabel}"
info-opened="{{infoOpened_}}"
on-expand-clicked="onStandardProtectionExpandButtonClicked_"
no-automatic-collapse>
<div slot="noSelectionCollapse">
<template is="dom-if" if="[[!hideExtendedReportingRadioButton_]]">
<settings-toggle-button id="safeBrowsingReportingToggle"
pref="{{prefs.safebrowsing.scout_reporting_enabled}}"
label="$i18n{safeBrowsingStandardReportingLabel}"
sub-label="$i18n{safeBrowsingEnableExtendedReportingDesc}"
on-change="onSafeBrowsingExtendedReportingChange_"
disabled="[[getDisabledExtendedSafeBrowsing_(
prefs.generated.safe_browsing.*)]]">
</settings-toggle-button>
</template>
<settings-toggle-button id="passwordsLeakToggle"
label="$i18n{passwordsLeakDetectionLabel}"
pref="{{prefs.generated.password_leak_detection}}"
sub-label="[[getPasswordsLeakToggleSubLabel_(
prefs.profile.password_manager_leak_detection.*,
prefs.generated.password_leak_detection.*)]]">
</settings-toggle-button>
</div>
</settings-collapse-radio-button>
<settings-collapse-radio-button id="safeBrowsingDisabled" no-collapse
name="[[safeBrowsingSettingEnum_.DISABLED]]"
pref="[[prefs.generated.safe_browsing]]"
label="$i18n{safeBrowsingNone}"
sub-label="$i18n{safeBrowsingNoneDesc}"
indicator-aria-label="$i18n{controlledSettingPolicy}">
</settings-collapse-radio-button>
</settings-radio-group>
</div>
<template is="dom-if" if="[[enableHttpsFirstModeNewSettings_]]" restamp>
<div id="secureConnectionsSection">
<h2>$i18n{secureConnectionsSectionTitle}</h2>
<div class="cr-secondary-text">
$i18n{secureConnectionsSectionDescription}
</div>
</div>
<settings-toggle-button id="httpsFirstModeToggle" class="cr-row first"
pref="{{prefs.generated.https_first_mode_enabled}}"
label="$i18n{httpsOnlyModeTitle}"
sub-label="[[getHttpsFirstModeSubLabel_(
prefs.generated.https_first_mode_enabled.*)]]"
numeric-unchecked-values="[[httpsFirstModeUncheckedValues_]]"
numeric-checked-value=
"[[httpsFirstModeSettingEnum_.ENABLED_BALANCED]]">
</settings-toggle-button>
<cr-collapse id="httpsFirstModeRadioGroupCollapse"
opened="[[isHttpsFirstModeExpanded_(
prefs.generated.https_first_mode_enabled.value)]]">
<div class="cr-row continuation https-first-mode-radio-group">
<settings-radio-group id="httpsFirstModeRadioGroup"
pref="{{prefs.generated.https_first_mode_enabled}}">
<controlled-radio-button id="httpsFirstModeEnabledBalanced"
name="[[getName_(
httpsFirstModeSettingEnum_.ENABLED_BALANCED)]]"
pref="[[prefs.generated.https_first_mode_enabled]]"
label="$i18n{httpsFirstModeEnabledBalancedLabel}"
class="list-item">
<div class="cr-secondary-text">
$i18n{httpsFirstModeEnabledBalancedSubLabel}
</div>
</controlled-radio-button>
<controlled-radio-button id="httpsFirstModeEnabledStrict"
name="[[getName_(httpsFirstModeSettingEnum_.ENABLED_FULL)]]"
pref="[[prefs.generated.https_first_mode_enabled]]"
label="$i18n{httpsFirstModeEnabledStrictLabel}"
class="list-item">
<div class="cr-secondary-text">
$i18n{httpsFirstModeEnabledStrictSubLabel}
</div>
</controlled-radio-button>
</settings-radio-group>
</div>
</cr-collapse>
</template>
<div class="cr-row first">
<h2>$i18n{advancedPageTitle}</h2>
</div>
<template is="dom-if" if="[[!enableHttpsFirstModeNewSettings_]]" restamp>
<settings-toggle-button id="httpsOnlyModeToggle"
pref="{{prefs.generated.https_first_mode_enabled}}"
label="$i18n{httpsOnlyModeTitle}"
sub-label="[[getHttpsFirstModeSubLabel_(
prefs.generated.https_first_mode_enabled.*)]]"
numeric-checked-value="[[httpsFirstModeSettingEnum_.ENABLED_FULL]]">
</settings-toggle-button>
<template is="dom-if" if="[[showSecureDnsSetting_]]">
<settings-secure-dns prefs="{{prefs}}"></settings-secure-dns>
</template>
</template>
<tempate is="dom-if" if="[[enableHttpsFirstModeNewSettings_]]" restamp>
<template is="dom-if" if="[[showSecureDnsSetting_]]">
<settings-secure-dns prefs="{{prefs}}" class="no-hr">
</settings-secure-dns>
</template>
</tempate>
<if expr="is_chromeos">
<template is="dom-if" if="[[showSecureDnsSettingLink_]]">
<cr-link-row id="openChromeOSSecureDnsSettings"
on-click="onOpenChromeOsSecureDnsSettingsClicked_"
label="$i18n{openChromeOSSecureDnsSettingsLabel}" external>
</cr-link-row>
</template>
</if>
<cr-link-row id="v8-setting-link" class="hr" on-click="onV8SettingsClick_"
label="$i18n{securityV8LinkTitle}"
sub-label="$i18n{securityV8LinkDescription}"
role-description="$i18n{subpageArrowRoleDescription}">
</cr-link-row>
<template is="dom-if" if="[[enableSecurityKeysSubpage_]]">
<cr-link-row id="security-keys-subpage-trigger" class="hr"
label="$i18n{securityKeysTitle}"
sub-label="$i18n{securityKeysDesc}"
on-click="onSecurityKeysClick_"
role-description="$i18n{subpageArrowRoleDescription}">
</cr-link-row>
</template>
<if expr="is_win">
<template is="dom-if" if="[[enableSecurityKeysPhonesSubpage_]]">
<cr-link-row id="security-keys-phones-subpage-trigger"
label="$i18n{securityKeysPhonesManage}"
sub-label="$i18n{securityKeysPhonesManageDesc}"
on-click="onManagePhonesClick_">
</cr-link-row>
</template>
</if>
<if expr="chrome_root_store_cert_management_ui">
<template is="dom-if" if="[[enableCertManagementUIV2_]]">
<cr-link-row id="manageCertificatesLinkRow" class="hr"
role-description="$i18n{subpageArrowRoleDescription}"
label="$i18n{manageCertificates}"
sub-label="$i18n{manageCertificatesDescription}"
on-click="onNewManageCertificatesClick_" external>
</cr-link-row>
</template>
<template is="dom-if" if="[[!enableCertManagementUIV2_]]">
<cr-link-row id="manageCertificatesLinkRow"
class="hr"
<if expr="not use_nss_certs">
external
</if>
<if expr="use_nss_certs">
role-description="$i18n{subpageArrowRoleDescription}"
</if>
label="$i18n{manageCertificates}"
sub-label="$i18n{manageCertificatesDescription}"
on-click="onManageCertificatesClick_">
</cr-link-row>
<cr-link-row id="chromeCertificates"
class="hr"
external
label="$i18n{chromeCertificates}"
sub-label="$i18n{chromeCertificatesDescription}"
on-click="onChromeCertificatesClick_">
</cr-link-row>
</template>
</if>
<if expr="not chrome_root_store_cert_management_ui">
<cr-link-row id="manageCertificatesLinkRow"
class="hr"
<if expr="not use_nss_certs">
external
</if>
<if expr="use_nss_certs">
role-description="$i18n{subpageArrowRoleDescription}"
</if>
label="$i18n{manageCertificates}"
sub-label="$i18n{manageCertificatesDescription}"
on-click="onManageCertificatesClick_">
</cr-link-row>
<cr-link-row id="chromeCertificates"
class="hr"
external
label="$i18n{chromeCertificates}"
sub-label="$i18n{chromeCertificatesDescription}"
on-click="onChromeCertificatesClick_">
</cr-link-row>
</if>
<cr-link-row id="advanced-protection-program-link" class="hr"
label="$i18n{advancedProtectionProgramTitle}"
sub-label="$i18n{advancedProtectionProgramDesc}"
on-click="onAdvancedProtectionProgramLinkClick_"
external>
</cr-link-row>
<template is="dom-if" if="[[showDisableSafebrowsingDialog_]]" restamp>
<settings-simple-confirmation-dialog
title-text="$i18n{safeBrowsingDisableDialog}"
body-text="$i18n{safeBrowsingDisableDialogDesc}"
confirm-text="$i18n{safeBrowsingDisableDialogConfirm}"
on-close="onDisableSafebrowsingDialogClose_">
</settings-simple-confirmation-dialog>
</template>