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

<style include="settings-shared">
  .text-container {
    margin: 0 var(--cr-section-padding);
  }

  .button-container {
    border-top: var(--cr-separator-line);
    margin-top: var(--cr-form-field-bottom-spacing);
    padding: var(--cr-form-field-bottom-spacing) var(--cr-section-padding);
  }

  .row-container {
    display: flex;
    justify-content: space-between;
    padding-bottom: var(--cr-form-field-bottom-spacing);
    padding-top: 6px;
    width: var(--settings-input-max-width);
  }

  input {
    background-color: transparent;
    border: none;
    color: inherit;
    cursor: default;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    outline: none;
    padding-bottom: 6px;
    padding-top: 6px;
    text-align: inherit;
    text-overflow: ellipsis;
    width: 100%;
  }

  settings-textarea {
    --cr-input-background-color: transparent;
    --cr-input-padding-start: 0;
    --cr-input-readonly-opacity: 1;
  }

  settings-textarea.empty-note {
    --cr-input-color: var(--cr-secondary-text-color);
  }

  #editButton {
    margin-inline-end: var(--cr-button-edge-spacing);
  }
</style>
<template is="dom-if" if="[[credential]]" restamp>
  <div class="text-container">
    <div id="usernameLabel" class="cr-form-field-label">
      $i18n{editPasswordUsernameLabel}
    </div>
    <div class="row-container">
      <input id="usernameInput" value="[[credential.username]]" readonly
          aria-label="$i18n{editPasswordUsernameLabel}">
      <cr-icon-button id="copyUsernameButton" class="icon-copy-content"
          slot="suffix" title="$i18n{copyUsername}"
          on-click="onCopyUsernameButtonClick_">
      </cr-icon-button>
    </div>
    <div id="passwordLabel" class="cr-form-field-label">
      $i18n{editPasswordPasswordLabel}
    </div>
    <div class="row-container">
      <input id="passwordInput" readonly value="[[getPassword_(password_)]]"
          type="[[getPasswordInputType_(credential, isPasswordVisible_)]]"
          aria-label="$i18n{editPasswordPasswordLabel}">
      <template is="dom-if" if="[[!isFederated_(credential)]]" restamp>
        <cr-icon-button id="showPasswordButton" slot="suffix"
            class$="[[getIconClass_(isPasswordVisible_)]]"
            title="[[getPasswordButtonTitle_(isPasswordVisible_)]]"
            on-click="onShowPasswordButtonClick_">
        </cr-icon-button>
        <cr-icon-button id="copyPasswordButton" slot="suffix"
            class="icon-copy-content" title="$i18n{copyPassword}"
            on-click="onCopyPasswordButtonClick_">
        </cr-icon-button>
      </template>
    </div>
    <template is="dom-if"
        if="[[isNoteEnabled_(credential, isPasswordNotesEnabled_)]]" restamp>
      <settings-textarea id="note" class$="[[getNoteClass_(credential.note)]]"
          value="[[getNoteValue_(credential.note)]]" readonly autogrow
          label="$i18n{passwordNoteLabel}">
      </settings-textarea>
    </template>
  </div>
  <div class="button-container">
    <template is="dom-if" if="[[!isFederated_(credential)]]" restamp>
      <cr-button id="editButton" on-click="onEditButtonClick_">
        $i18n{edit}
      </cr-button>
    </template>
    <cr-button id="deleteButton" on-click="onDeleteButtonClick_">
      $i18n{delete}
    </cr-button>
  </div>
</template>
<if expr="is_chromeos">
  <template is="dom-if" if="[[showPasswordPromptDialog_]]" restamp>
    <settings-password-prompt-dialog on-token-obtained="onTokenObtained_"
        on-close="onPasswordPromptClose_">
    </settings-password-prompt-dialog>
  </template>
</if>
<template is="dom-if" if="[[showEditDialog_]]" restamp>
  <password-edit-dialog id="passwordEditDialog" existing-entry="[[credential]]"
      saved-passwords="[[savedPasswords]]" on-close="onEditDialogClosed_"
      on-saved-password-edited="onSavedPasswordEdited_">
  </password-edit-dialog>
</template>
<template is="dom-if" if="[[showPasswordRemoveDialog]]" restamp>
  <password-remove-dialog id="passwordRemoveDialog"
      duplicated-password="[[credential]]"
      on-close="onPasswordRemoveDialogClose"
      on-password-remove-dialog-passwords-removed="onPasswordRemoveDialogPasswordsRemoved">
  </password-remove-dialog>
</template>
<cr-toast id="toast" duration="5000">
  <span>[[toastText_]]</span>
</cr-toast>