Fix the alignment on chrome://settings/passwords

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/icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../focus_row_behavior.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="passwords_shared_css.html">
 
 <dom-module id="password-list-item">
   <template>
     <style include="settings-shared passwords-shared">
@@ skipping 20 matching lines @@
           title="[[item.loginPair.urls.link]]">
         <a id="originUrl" target="_blank" class="selectable no-min-width"
             href="[[item.loginPair.urls.link]]"
             focus-row-control focus-type="originUrl">
           <span class="text-elide">
             [[item.loginPair.urls.shown]]
           </span>
         </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>
 </dom-module>