chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.html

<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
<link rel="import" href="../icons.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="password-edit-dialog">
  <template>
    <style include="settings-shared">
      paper-input[readonly] {
        /* Lighter than label to appear uneditable. */
        color: var(--paper-grey-500);

        /* For readonly inputs we don't want to show focus styles. */
        --paper-input-container-underline-focus: {
          display: none;
        };

        --paper-input-container-label-focus: {
          color: var(--paper-input-container-color, --secondary-text-color);
        };
      }

      #passwordGroup {
        align-items: center;
        display: flex;
      }

      paper-input {
        width: var(--paper-input-max-width);
      }

      paper-icon-button {
        --iron-icon-fill-color: var(--paper-grey-600);
      }
    </style>
    <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
      <div class="title">$i18n{passwordDetailsTitle}</div>
      <div class="body">
        <paper-input id="websiteInput" label="$i18n{editPasswordWebsiteLabel}"
            value="[[item.loginPair.urls.link]]" readonly always-float-label
            on-tap="onReadonlyInputTap_">
        </paper-input>
        <paper-input id="usernameInput" label="$i18n{editPasswordUsernameLabel}"
            value="[[item.loginPair.username]]" readonly always-float-label
            on-tap="onReadonlyInputTap_">
        </paper-input>
        <div id="passwordGroup">
          <paper-input id="passwordInput" always-float-label
              label="$i18n{editPasswordPasswordLabel}"
              type="[[getPasswordInputType_(item, password)]]"
              value="[[getPassword_(item, password)]]" readonly
            on-tap="onReadonlyInputTap_">
          </paper-input>
          <paper-icon-button id="showPasswordButton"
              hidden$="[[item.federationText]]"
              icon="settings:visibility" on-tap="onShowPasswordButtonTap_"
              title="[[showPasswordTitle_(password,
                  '$i18nPolymer{hidePassword}','$i18nPolymer{showPassword}')]]">
          </paper-icon-button>
        </div>
      </div>
      <div class="button-container">
        <paper-button class="action-button" on-tap="onActionButtonTap_">
          $i18n{passwordsDone}
        </paper-button>
      </div>
    </dialog>
  </template>
  <script src="password_edit_dialog.js"></script>
</dom-module>