<style
<if expr="not chromeos_ash">
include="cr-shared-style md-select"
</if>
<if expr="chromeos_ash">
include="cr-shared-style md-select cros-color-overrides"
</if>
>
/* TODO(crbug.com/349860796): Replace border override by instead removing
the "hr" class from the Secure DNS element once the new "Secure
connections" settings section ships by default. */
:host(.no-hr) settings-toggle-button.hr {
border-top: 0;
}
#resolverSelect {
width: inherit;
}
#resolverLabel {
flex: 1;
}
#privacyPolicy {
display: none;
padding: calc(var(--cr-section-padding) / 2) var(--cr-section-padding);
}
/* Style the link appearing within the privacyPolicy's localized
content. */
#privacyPolicy a {
color: var(--cr-link-color);
}
#secureDnsInputContainer {
margin-top: calc(var(--cr-section-padding) / 2);
}
<if expr="chromeos_ash">
:host-context(body.revamp-wayfinding-enabled) settings-toggle-button {
--cr-icon-button-margin-end: 16px;
--iron-icon-fill-color: var(--cros-sys-primary);
}
</if>
</style>
<if expr="not chromeos_ash">
<settings-toggle-button
id="secureDnsToggle"
class="hr"
pref="{{secureDnsToggle_}}"
label="$i18n{secureDns}"
sub-label="[[secureDnsDescription_]]"
on-change="onToggleChanged_">
</settings-toggle-button>
</if>
<if expr="chromeos_ash">
<template is="dom-if" if="[[!isRevampWayfindingEnabled_]]">
<settings-toggle-button
id="secureDnsToggle"
class="hr"
pref="{{secureDnsToggle_}}"
label="$i18n{secureDnsOsSettingsTitle}"
sub-label="[[secureDnsDescription_]]"
on-change="onToggleChanged_">
</settings-toggle-button>
</template>
<template is="dom-if" if="[[isRevampWayfindingEnabled_]]">
<settings-toggle-button
id="secureDnsToggle"
class="hr"
icon="os-settings:privacy-secure-dns"
pref="[[secureDnsToggle_]]"
label="$i18n{secureDnsOsSettingsTitle}"
sub-label="[[secureDnsDescription_]]"
on-settings-boolean-control-change="onDnsToggleClick_"
no-set-pref>
</settings-toggle-button>
</template>
</if>
<div id="resolverOptions" hidden="[[!showSecureDnsOptions_]]">
<div class="cr-row continuation">
<div id="resolverLabel" class="flex cr-padded-text">
$i18n{secureDnsSecureDropdownModeDescription}
</div>
<select id="resolverSelect"
class="md-select"
aria-labelledby="resolverLabel"
on-change="onDropdownSelectionChanged_">
<option value="[[resolverTypeEnum_.AUTOMATIC]]">
$i18n{secureDnsAutomaticModeDescription}
</option>
<option value="[[resolverTypeEnum_.CUSTOM]]">
$i18n{secureDnsCustomProviderDescription}
</option>
<template is="dom-repeat" items="[[resolverOptions_]]">
<option data-resolver-type$="[[resolverTypeEnum_.BUILT_IN]]"
value="[[index]]">
[[item.name]]
</option>
</template>
</select>
</div>
<div id="privacyPolicy">
<div class="cr-secondary-text"
inner-h-t-m-l="[[privacyPolicyString_]]"></div>
</div>
<div id="secureDnsInputContainer" class="cr-row continuation">
<secure-dns-input id="secureDnsInput"
value="[[secureDnsInputValue_]]"
on-value-update="onSecureDnsInputEvaluated_">
</secure-dns-input>
</div>
</div>
<if expr="chromeos_ash">
<template is="dom-if" if="[[showDisableDnsDialog_]]" restamp>
<settings-secure-dns-dialog id="warningDialog"
on-close="onDisableDnsDialogClosed_" prefs="{{prefs}}">
</settings-secure-dns-dialog>
</template>
</if>