Username are truncated and can't copied fully

For long username, it will be truncated but can't be copied.
Use <input> instead of <div> to make it can be copied easily.

Bug:
Signed-off-by: qi1988.yang <qi1988.yang@samsung.com>
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I3e7826db375ba8120d1828154b2f9bee276e8492
Reviewed-on: https://chromium-review.googlesource.com/973321Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#545677}

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

@@ -43,8 +43,8 @@
           </span>
         </a>
       </div>
-      <div class="username-column text-elide"
-           id="username">[[item.entry.loginPair.username]]</div>
+      <input id="username" class="username-column text-elide password-field"
+          readonly value="[[item.entry.loginPair.username]]">
       <div class="password-column">
         <template is="dom-if" if="[[!item.entry.federationText]]">
           <input id="password" aria-label=$i18n{editPasswordPasswordLabel}

chrome/test/data/webui/settings/settings_passwords_section_browsertest.js

@@ -69,7 +69,7 @@ TEST_F('SettingsPasswordSectionBrowserTest', 'uiTests', function() {
           node.$$('#originUrl').href);
       assertEquals(
           passwordInfo.loginPair.username,
-          node.$$('#username').textContent.trim());
+          node.$$('#username').value);
       assertEquals(passwordInfo.numCharactersInPassword,
           node.$$('#password').value.length);
     }