chrome/browser/resources/settings/autofill_page/password_check.html

    <style include="cr-shared-style settings-shared iron-flex">
      #iconContainer {
        height: 24px;
        line-height: 100%;
        margin-inline-end: 20px;
        padding: 4px;
        width: 24px;
      }
      #iconContainer.warning-halo {
        background: radial-gradient(circle 16px at 16px,
                                    #FCE8E6 100%,
                                    transparent 100%);
      }

      iron-icon,
      #progressSpinner {
        --paper-spinner-stroke-width: 2px;
        height: 22px;
        line-height: 100%;
        padding: 0 1px 2px;
        width: 22px;
      }

      iron-icon.has-security-issues {
        --iron-icon-fill-color: var(--google-red-600);
      }

      @media (prefers-color-scheme: dark) {
        iron-icon.has-security-issues {
          --iron-icon-fill-color: var(--google-red-300);
        }
        #iconContainer.warning-halo {
          background: radial-gradient(circle 16px at 16px,
                                      var(--google-grey-900) 100%,
                                      transparent 100%);
        }
      }

      iron-icon.no-security-issues {
        --iron-icon-fill-color: var(--google-blue-600);
        background-size: 16px 16px;
      }

      iron-icon.hidden {
        display: none;
      }

      #securityCheckHeader {
        border-bottom: var(--cr-separator-line);
      }

      #bannerImage {
        width: 100%;
      }

      iron-icon.policy-disabled {
        margin-inline-start: var(--cr-controlled-by-spacing);
      }

    </style>
    <!-- The banner is visible if no insecure password was found (yet) and user
    is signed in. -->
    <template is="dom-if"
        if="[[shouldShowBanner_(status, leakedPasswords, weakPasswords)]]">
      <picture>
        <source srcset="[[bannerImageSrc_(1, status)]]"
                media="(prefers-color-scheme: dark)">
        <img id="bannerImage" src="[[bannerImageSrc_(0, status)]]" alt="">
      </picture>
    </template>

    <!-- The header showing progress or result of the check-->
    <div class="cr-row first two-line" id="securityCheckHeader">
      <!-- If the password check concluded, show only a status Icon. -->
      <div id="iconContainer" class$="[[iconHaloClass_]]">
        <template is="dom-if" if="[[!isCheckInProgress_(status)]]">
          <iron-icon class$="[[getStatusIconClass_(status, signedIn,
                              leakedPasswords, weakPasswords)]]"
                     icon="[[getStatusIcon_(status, signedIn,
                             leakedPasswords, weakPasswords)]]">
          </iron-icon>
        </template>

        <!-- Show a loader instead of an icon while checking passwords. -->
        <template is="dom-if" if="[[isCheckInProgress_(status)]]">
          <paper-spinner-lite id="progressSpinner" active>
          </paper-spinner-lite>
        </template>
      </div>

      <div class="flex cr-padded-text">
        <div id="titleRow">
          <span id="title" inner-h-t-m-l="[[title_]]"></span>
          <span class="secondary inline" id="lastCompletedCheck"
              hidden$="[[!showsTimestamp_(status)]]">
            &bull; [[status.elapsedTimeSinceLastCheck]]
          </span>
        </div>
        <div class="secondary" id="subtitle"
            hidden$="[[!showsPasswordsCount_(status, leakedPasswords, weakPasswords)]]">
          [[getPasswordsCount_(status, insecurePasswordsCount,
              compromisedPasswordsCount, weakPasswordsCount)]]
        </div>
      </div>
      <cr-button id="controlPasswordCheckButton"
          on-click="onPasswordCheckButtonClick_"
          class$="[[getButtonTypeClass_(status)]] cr-button-gap"
          hidden$="[[isButtonHidden_]]">
        [[getButtonText_(status)]]
      </cr-button>
    </div>
    <div id="noCompromisedCredentials"
        class="cr-row first"
        hidden$="[[!showNoCompromisedPasswordsLabel_]]">
      <div class="cr-padded-text secondary">
        $i18n{noCompromisedCredentials}
      </div>
    </div>
    <div id="compromisedCredentialsBody"
        hidden$="[[!showCompromisedCredentialsBody_]]">
      <div class="cr-row first">
        <h2>$i18n{compromisedPasswords}</h2>
      </div>
      <div class="list-frame vertical-list">
        <div class="cr-padded-text secondary"
            id="compromisedPasswordsDescription"
            hidden$="[[!hasLeakedCredentials_(leakedPasswords)]]">
          $i18n{compromisedPasswordsDescription}
        </div>
      </div>
      <div id="leakedPasswordList" class="list-frame first">
        <template is="dom-repeat" items="[[leakedPasswords]]">
          <password-check-list-item item="[[item]]"
              on-more-actions-click="onMoreActionsClick_"
              clicked-change-password=
              "[[clickedChangePassword_(item, clickedChangePasswordIds_.size)]]"
              on-change-password-clicked="onChangePasswordClick_"
<if expr="is_chromeos">
              token-request-manager="[[tokenRequestManager]]"
</if>
              on-already-changed-password-click="onAlreadyChangedClick_">
          </password-check-list-item>
        </template>
      </div>
      <div class="list-frame vertical-list">
        <div class="list-item secondary" hidden$="[[signedIn]]"
            id="signedOutUserLabel">
          <div inner-h-t-m-l="[[getSignedOutUserLabel_(leakedPasswords)]]"></div>
        </div>
      </div>
      <div id="mutedCredentialsBody" hidden$="[[!showMutedPasswordsSection_]]">
        <div class="list-frame vertical-list">
          <cr-expand-button id="expandMutedLeakedCredentialsButton"
              class="cr-row list-item first" no-hover
              expanded="{{mutedLeakedCredentialsExpanded_}}">
            [[mutedLeakedCredentialsTitle_]]
          </cr-expand-button>
        </div>
        <div class="list-frame">
          <iron-collapse id="mutedPasswordList"
              opened="[[mutedLeakedCredentialsExpanded_]]">
            <template is="dom-repeat" items="[[mutedPasswords]]">
              <password-check-list-item item="[[item]]"
                  on-more-actions-click="onMoreActionsClick_"
                  clicked-change-password="[[clickedChangePassword_(item,
                                             clickedChangePasswordIds_.size)]]"
                  on-change-password-clicked="onChangePasswordClick_"
<if expr="is_chromeos">
                  token-request-manager="[[tokenRequestManager]]"
</if>
                  on-already-changed-password-click="onAlreadyChangedClick_">
              </password-check-list-item>
            </template>
          </iron-collapse>
        </div>
      </div>
    </div>
    <!-- TODO(crbug.com/1119752): |weakCredentialsBody| is almost a copy-paste
    of |compromisedCredentialsBody|. Clean it up by creating a polymer element
    for this. -->
    <div id="weakCredentialsBody" hidden$="[[!hasWeakCredentials_(weakPasswords)]]">
      <div class="cr-row first">
        <h2>$i18n{weakPasswords}</h2>
      </div>
      <div class="list-frame vertical-list">
        <div class="cr-padded-text secondary" id="weakPasswordsDescription"
            inner-h-t-m-l="[[getWeakPasswordsHelpText_(isSyncingPasswords)]]">
        </div>
      </div>
      <div id="weakPasswordList" class="list-frame first">
        <template is="dom-repeat" items="[[weakPasswords]]">
          <password-check-list-item item="[[item]]"
              on-more-actions-click="onMoreActionsClick_"
              clicked-change-password=
              "[[clickedChangePassword_(item, clickedChangePasswordIds_.size)]]"
              on-change-password-clicked="onChangePasswordClick_"
<if expr="is_chromeos">
              token-request-manager="[[tokenRequestManager]]"
</if>
              on-already-changed-password-click="onAlreadyChangedClick_">
          </password-check-list-item>
        </template>
      </div>
    </div>
    <cr-action-menu id="moreActionsMenu" role-description="$i18n{menu}"
        accessibility-label="$i18n{moreActions}">
      <button id="menuShowPassword" class="dropdown-item"
          on-click="onMenuShowPasswordClick_">
        [[showHideMenuTitle_]]
      </button>
      <button id="menuEditPassword" class="dropdown-item"
          on-click="onEditPasswordClick_">
        $i18n{editPassword}
      </button>
      <button id="menuRemovePassword" class="dropdown-item"
          on-click="onMenuRemovePasswordClick_">
        $i18n{removeCompromisedPassword}
      </button>
      <template is="dom-if" if="[[isMutePasswordButtonEnabled_]]" restamp>
        <button id="menuMuteCompromisedPassword" class="dropdown-item"
            on-click="onMenuMuteCompromisedPasswordClick_"
            disabled="[[isMutingDisabledByPrefs_()]]">
          $i18n{muteCompromisedPassword}
          <template is="dom-if" if="[[isMutingDisabledByPrefs_()]]">
            <iron-icon icon="cr20:domain" class="policy-disabled"
                aria-label$="$i18n{controlledSettingPolicy}">
            </iron-icon>
          </template>
        </button>
      </template>
      <template is="dom-if" if="[[isUnmutePasswordButtonEnabled_]]" restamp>
        <button id="menuUnmuteMutedCompromisedPassword" class="dropdown-item"
            on-click="onMenuUnmuteMutedCompromisedPasswordClick_"
            disabled="[[isMutingDisabledByPrefs_()]]">
          $i18n{unmuteMutedCompromisedPassword}
          <template is="dom-if" if="[[isMutingDisabledByPrefs_()]]">
            <iron-icon icon="cr20:domain" class="policy-disabled"
                aria-label$="$i18n{controlledSettingPolicy}">
            </iron-icon>
          </template>
        </button>
      </template>
    </cr-action-menu>
    <template is="dom-if" if="[[showPasswordEditDialog_]]" restamp>
      <password-edit-dialog on-close="onPasswordEditDialogClosed_"
          id="passwordEditDialog" existing-entry="[[activePassword_]]"
          saved-passwords="[[savedPasswords]]"
          is-account-store-user="[[isAccountStoreUser]]">
      </password-edit-dialog>
    </template>
    <template is="dom-if" if="[[showPasswordRemoveDialog_]]" restamp>
      <settings-password-remove-confirmation-dialog
          on-close="onPasswordRemoveDialogClosed_" item="[[activePassword_]]">
      </settings-password-remove-confirmation-dialog>
    </template>
    <template is="dom-if" if="[[showPasswordEditDisclaimer_]]" restamp>
      <settings-password-edit-disclaimer-dialog
          on-edit-password-click="onEditPasswordClick_"
          origin="[[activePassword_.urls.shown]]"
          on-close="onEditDisclaimerClosed_">
      </settings-password-edit-disclaimer-dialog>
    </template>
    <if expr="is_chromeos">
      <template is="dom-if" if="[[showPasswordPromptDialog_]]" restamp>
        <settings-password-prompt-dialog on-token-obtained="onTokenObtained_"
            on-close="onPasswordPromptClosed_">
        </settings-password-prompt-dialog>
      </template>
    </if>