Fix the alignment on chrome://settings/passwords

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

Index: chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html
diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html b/chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html
index 63248d2eca4f6b2f0eba7a8b6ea05bdca0cf0c5c..c644ee67b567d02980d4c58942b97d179a33904f 100644
--- a/chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html
@@ -38,25 +38,25 @@
         </a>
       </div>
       <div class="username-column selectable text-elide"
-          id="username">[[item.loginPair.username]]</div>
-        <div class="password-column text-elide">
-          <template is="dom-if" if="[[!item.federationText]]">
-            <!-- Password type and disabled in order to match mock. -->
-            <input id="password" type="password" disabled
-                value="[[getEmptyPassword_(item.numCharactersInPassword)]]">
-            </input>
-          </template>
-          <template is="dom-if" if="[[item.federationText]]">
-            <span class="selectable text-elide">
-              [[item.federationText]]
-            </span>
-          </template>
-        </div>
-        <paper-icon-button id="passwordMenu" icon="cr:more-vert"
-            on-tap="onPasswordMenuTap_" title="$i18n{moreActions}"
-            focus-row-control focus-type="passwordMenu">
-        </paper-icon-button>
+          id="username">[[item.loginPair.username]]

[hcarmona, 2017/05/09 19:23:28]

Let's reformat this so it's more readable:

<div class="username-column selectable text-elide" id="username">
  [[item.loginPair.username]]
</div>

[vasilii, 2017/05/19 13:20:13]

Done.

       </div>
+      <div class="password-column text-elide">
+        <template is="dom-if" if="[[!item.federationText]]">
+          <!-- Password type and disabled in order to match mock. -->
+          <input id="password" type="password" disabled
+              value="[[getEmptyPassword_(item.numCharactersInPassword)]]">
+          </input>
+        </template>
+        <template is="dom-if" if="[[item.federationText]]">
+          <span class="selectable text-elide">
+            [[item.federationText]]
+          </span>
+        </template>
+      </div>

[hcarmona, 2017/05/09 19:23:28]

We can move this div so the button is inside, then we can add a CSS rule to not
shrink the button and we should be aligned again without the need for an extra
invisible button :-)

[vasilii, 2017/05/19 13:20:13]

Done.

+      <paper-icon-button id="passwordMenu" icon="cr:more-vert"
+          on-tap="onPasswordMenuTap_" title="$i18n{moreActions}"
+          focus-row-control focus-type="passwordMenu">
+      </paper-icon-button>
     </div>
   </template>
   <script src="password_list_item.js"></script>