chromium/chrome/browser/resources/ash/settings/os_privacy_page/secure_dns.html

    <style include="cr-shared-style md-select cros-color-overrides">
      #resolverSelect {
        width: inherit;
      }

      #resolverLabel {
        flex: 1;
      }

      #privacyPolicy, #networkDefaultDescription {
        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);
      }

      :host-context(body.revamp-wayfinding-enabled) settings-toggle-button {
        --cr-icon-button-margin-end: 16px;
        --iron-icon-fill-color: var(--cros-sys-primary);
      }
    </style>

    <template is="dom-if" if="[[!shouldShowDialogWhenDisablingDns_]]">
      <settings-toggle-button
          id="secureDnsToggle"
          class="hr"
          icon="[[getDnsRowIcon_()]]"
          pref="{{secureDnsToggle_}}"
          label="$i18n{secureDnsOsSettingsTitle}"
          sub-label="[[secureDnsDescription_]]"
          on-change="onToggleChanged_">
      </settings-toggle-button>
    </template>

    <template is="dom-if" if="[[shouldShowDialogWhenDisablingDns_]]">
      <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>

    <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_"
            aria-describedby$="[[networkDefaultAriaDescribedBy_]]">
          <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>

      <template is="dom-if" if="[[showPrivacyPolicyDescription_]]" restamp>
        <localized-link id="privacyPolicy"
            class="cr-secondary-text"
            localized-string="[[privacyPolicyString_]]">
        </localized-link>
      </template>

      <template is="dom-if" if="[[showNetworkDefaultDescription_]]" restamp>
        <div id="networkDefaultDescription" class="cr-secondary-text">
          $i18n{secureDnsSecureDropdownModeNetworkDefaultDescription}
        </div>
      </template>

      <div id="secureDnsInputContainer" class="cr-row continuation">
        <secure-dns-input id="secureDnsInput"
            value="[[secureDnsInputValue_]]"
            on-value-update="onSecureDnsInputEvaluated_">
        </secure-dns-input>
      </div>
    </div>

    <template is="dom-if" if="[[showDisableDnsDialog_]]" restamp>
      <settings-secure-dns-dialog id="warningDialog"
          on-close="onDisableDnsDialogClosed_" prefs="{{prefs}}">
      </settings-secure-dns-dialog>
    </template>