chrome/browser/resources/password_manager/settings_section.html

<style include="shared-style cr-shared-style">
  #blockedSitesTitle {
    margin-top: 28px;
  }

  .blocked-site-content {
    border-top: var(--cr-separator-line);
    flex: 1;
    min-height: var(--section-min-height);
  }

  .blocked-site-content[first] {
    border-top: none;
  }

  .favicon,
  #blockedSitesHeader {
    margin-inline-end: 20px;
    margin-inline-start: 20px;
  }

  .site-url {
    flex: 1;
  }

  cr-icon-button {
    --cr-icon-button-icon-size: 16px;
    --cr-icon-button-margin-start: 0px;
    --cr-icon-button-margin-end: 10px;
  }

  @media all and (display-mode: standalone) {
    #addShortcutBanner {
      display: none;
    }
  }

  pref-toggle-button:first-of-type {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }

  cr-link-row:last-of-type {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
  }
</style>
<h2 class="page-title">$i18n{settings}</h2>
<div class="card">
  <pref-toggle-button id="passwordToggle" no-extension-indicator
      label="$i18n{savePasswordsLabel}"
      pref="{{prefs.credentials_enable_service}}">
  </pref-toggle-button>
  <template is="dom-if"
        if="[[prefs.credentials_enable_service.extensionId]]">
    <div class="cr-row continuation">
      <extension-controlled-indicator
          id="passwordsExtensionIndicator"
          extension-id="[[prefs.credentials_enable_service.extensionId]]"
          extension-name="[[
              prefs.credentials_enable_service.controlledByName]]"
          extension-can-be-disabled="[[
              prefs.credentials_enable_service.extensionCanBeDisabled]]">
      </extension-controlled-indicator>
    </div>
  </template>
  <pref-toggle-button id="autosigninToggle" class="hr"
      label="$i18n{autosigninLabel}"
      sub-label="$i18n{autosigninDescription}"
      pref="{{prefs.credentials_enable_autosignin}}">
  </pref-toggle-button>
  <if expr="is_win or is_macosx">
    <template is="dom-if"
        if="[[isBiometricAuthenticationForFillingToggleVisible_]]">
      <pref-toggle-button id="biometricAuthenticationToggle" class="hr"
          label="$i18n{biometricAuthenticaionForFillingLabel}"
          sub-label="$i18n{biometricAuthenticaionForFillingSublabel}"
          pref="{{prefs.password_manager.biometric_authentication_filling}}"
          change-requires-validation
          on-validate-and-change-pref="switchBiometricAuthBeforeFillingState_">
      </pref-toggle-button>
    </template>
  </if>
  <template is="dom-if" if="[[isEligibleForAccountStorage]]">
    <pref-toggle-button id="accountStorageToggle" class="hr"
        label="$i18n{accountStorageToggleLabel}"
        sub-label="[[accountEmail]]"
        checked="[[isAccountStoreUser]]"
        change-requires-validation
        on-validate-and-change-pref="changeAccountStorageOptIn_">
    </pref-toggle-button>
  </template>
  <cr-link-row id="trustedVaultBanner" class="cr-row"
      label="[[getTrustedVaultBannerTitle_(trustedVaultBannerState_)]]"
      sub-label="[[getTrustedVaultBannerDescription_(trustedVaultBannerState_)]]"
      hidden$="[[shouldHideTrustedVaultBanner_(trustedVaultBannerState_)]]"
      button-aria-description="$i18n{opensInNewTab}"
      on-click="onTrustedVaultBannerClick_" external>
  </cr-link-row>
  <template is="dom-if" if="[[!passwordManagerDisabled_]]" restamp>
    <passwords-importer account-email="[[accountEmail]]"
        is-account-store-user="[[isAccountStoreUser]]"
        is-user-syncing-passwords="[[isSyncingPasswords]]">
    </passwords-importer>
  </template>
  <template is="dom-if" if="[[hasPasswordsToExport_]]" restamp>
    <passwords-exporter></passwords-exporter>
  </template>
  <template is="dom-if" if="[[canAddShortcut_]]"
      on-dom-change="onShortcutBannerDomChanged_" restamp>
    <cr-link-row id="addShortcutBanner" class="cr-row settings-cr-link-row"
        on-click="onAddShortcutClick_" label="$i18n{addShortcut}"
        sub-label="$i18n{addShortcutDescription}" role-description="button">
    </cr-link-row>
  </template>
  <if expr="is_win or is_macosx">
    <template is="dom-if" if="[[hasPasskeys_]]" restamp>
      <cr-link-row id="managePasskeysRow" external
          class="cr-row settings-cr-link-row" on-click="onManagePasskeysClick_"
          label="$i18n{managePasskeysLabel}">
      </cr-link-row>
    </template>
  </if>
</div>
<div hidden="[[!blockedSites_.length]]">
  <h3 id="blockedSitesTitle" class="page-title">$i18n{blockedSitesTitle}</h3>
  <div class="card" id="blockedSites">
    <div class="flex-centered single-line-label">
      <div id="blockedSitesHeader" class="cr-secondary-text label">
        $i18n{blockedSitesDescription}
      </div>
    </div>
    <div id="blockedSitesList" class="hr">
      <template is="dom-repeat" items="[[blockedSites_]]">
        <div class="flex-centered">
          <site-favicon class="favicon" domain="[[item.urls.link]]">
          </site-favicon>
          <div class="blocked-site-content flex-centered" first$="[[!index]]">
            <div class="label site-url">[[item.urls.shown]]</div>
            <cr-icon-button class="icon-clear" id="removeBlockedValueButton"
                on-click="onRemoveBlockedSiteClick_"
                title="$i18n{deletePassword}"
                aria-label="[[getAriaLabelForBlockedSite_(item)]]">
            </cr-icon-button>
          </div>
        </div>
      </template>
    </div>
  </div>
</div>