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

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="../focus_row_behavior.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="../site_favicon.html">
<link rel="import" href="passwords_shared_css.html">
<link rel="import" href="show_password_behavior.html">

<dom-module id="password-list-item">
  <template>
    <style include="settings-shared passwords-shared">
      #originUrl {
        /* The following non-flex directives allow eliding long originUrls from
         * the left. Forcing rtl should not cause an issue for right-to-left
         * languages in this case, since valid URL characters are restricted to
         * ASCII.
         */
         direction: rtl;
         display: flex;
      }

      #username,
      #password {
        /* Since #password is an input element this is necessary to prevent
         * Chrome from using the operating system's font instead of the Material
         * Design font.
         */
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        text-overflow: ellipsis;
      }

      #password {
<if expr="chromeos or is_linux">
        font-family: 'DejaVu Sans Mono', monospace;
</if>
<if expr="is_win">
        font-family: 'Consolas', monospace;
</if>
<if expr="is_macosx">
        font-family: 'Menlo', monospace;
</if>
      }
    </style>
    <div class="list-item" focus-row-container>
      <div class="website-column no-min-width"
          title="[[item.entry.loginPair.urls.link]]">
        <site-favicon url="[[item.entry.loginPair.urls.link]]"></site-favicon>
        <a id="originUrl" target="_blank" class="no-min-width"
            href="[[item.entry.loginPair.urls.link]]"
            focus-row-control focus-type="originUrl">
          <span class="text-elide">
            <!-- This bdo tag is necessary to fix the display of domains
              starting with numbers. -->
            <bdo dir="ltr">[[item.entry.loginPair.urls.shown]]</bdo>
          </span>
        </a>
      </div>
      <input id="username" class="username-column password-field"
          readonly tabindex="-1" value="[[item.entry.loginPair.username]]">
      <div class="password-column">
        <template is="dom-if" if="[[!item.entry.federationText]]">
          <input id="password" aria-label=$i18n{editPasswordPasswordLabel}
              type="[[getPasswordInputType_(item.password)]]"
              on-click="onReadonlyInputTap_" class="password-field" readonly
              disabled$="[[!item.password]]"
              value="[[getPassword_(item.password)]]">
          <paper-icon-button-light id="showPasswordButtonContainer"
              class$="[[getIconClass_(item.password)]]">
            <button id="showPasswordButton"
                on-click="onShowPasswordButtonTap_"
                title="[[showPasswordTitle_(item.password,
                    '$i18nPolymer{hidePassword}',
                    '$i18nPolymer{showPassword}')]]"
                focus-row-control focus-type="showPassword">
            </button>
          </paper-icon-button-light>
        </template>
        <span class="password-field text-elide" id="federated"
            hidden$="[[!item.entry.federationText]]">
          [[item.entry.federationText]]
        </span>
      </div>
      <paper-icon-button-light class="icon-more-vert">
        <button id="passwordMenu"
            on-click="onPasswordMenuTap_"
            title="$i18n{moreActions}" focus-row-control
            focus-type="passwordMenu"
            aria-label$="[[getMoreActionsLabel_(item)]]">
        </button>
      </paper-icon-button-light>
    </div>
  </template>
  <script src="password_list_item.js"></script>
</dom-module>