Make the passwords list have 3 columns and not over-scroll.

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

Index: chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html
diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html b/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html
index 5da06e0939461d21921c1540ad1d60750901c94f..2626e429c143873495e1fd6cb3cad5637596102c 100644
--- a/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html
@@ -1,61 +1,139 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.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="chrome://resources/cr_elements/cr_shared_menu/cr_shared_menu.html">
 <link rel="import" href="chrome://md-settings/passwords_and_forms_page/password_edit_dialog.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <dom-module id="passwords-section">
-  <link rel="import" type="css" href="chrome://md-settings/passwords_and_forms_page/passwords_section.css">
   <template>
     <style include="settings-shared"></style>
-    <div class="list-frame">
-      <div class="secondary" i18n-content="savedPasswordsHeading"></div>
-      <iron-list id="passwordList" class="vertical-list list-section"
-          items="[[savedPasswords]]">
-        <template>
-          <div class="list-item two-line">
-            <div class="start">
-              <div id="originUrl">[[item.loginPair.originUrl]]</div>
-              <div id="username"
-                  class="secondary">[[item.loginPair.username]]</div>
-            </div>
+    <style>
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+
+      #manageLink {
+        -webkit-margin-start: 20px;
+        margin-bottom: 24px;
+      }
+
+      .heading {
+        -webkit-margin-start: 20px;
+        margin-bottom: 8px;
+      }
+
+      #password {
+        background-color: transparent;
+        border: none;
+        flex: 1;
+        height: 20px;
+        width: 0;
+      }
+
+      #saved-password-columns {
+        -webkit-margin-end: 20px;
+        -webkit-margin-start: 56px;
+        color: var(--google-grey-500);
+        font-weight: 500;
+      }
+
+      #passwordList > div:first-of-type {
+        border-top: 1px solid #e0e0e0;
+      }
+
+      .website-column {
+        flex: 3;
+      }
+
+      .username-column {
+        -webkit-margin-end: 16px;
+        -webkit-margin-start: 16px;
+        flex: 2;
+      }
+
+      .password-column {
+        align-items: center;
+        display: flex;
+        flex: 2;
+      }
+
+      /* TODO(hcarmona): Grow menu width by 64px if content is wider */
+      .menu-item {
+        -webkit-padding-start: 24px;
+        width: 104px;
+      }
+
+      paper-icon-button {
+        -webkit-margin-end: 0;
+        -webkit-margin-start: 20px;
+        -webkit-padding-end: 0;
+        -webkit-padding-start: 0;
+        color: var(--google-grey-600);
+        width: 20px;
+      }
+
+      iron-list {
+        -webkit-margin-end: 20px;
+        -webkit-margin-start: 56px;
+        margin-bottom: 16px;
+      }
+    </style>
+    <!-- TODO(hcarmona): i18n this string and link -->
+    <div id="manageLink">Access your passwords from any device at
+      <a target="_blank"
+          href="https://passwords.google.com">passwords.google.com</a></div>
+    <div class="heading" i18n-content="savedPasswordsHeading"></div>
+    <div id="saved-password-columns" class="list-item">
+      <div class="website-column" i18n-content="editPasswordWebsiteLabel"></div>
+      <div class="username-column"
+          i18n-content="editPasswordUsernameLabel"></div>
+      <div class="password-column"
+          i18n-content="editPasswordPasswordLabel"></div>
+    </div>
+    <iron-list id="passwordList" class="vertical-list list-section"
+        items="[[savedPasswords]]">
+      <template>
+        <div class="list-item">
+          <div id="originUrl"
+              class="website-column">[[item.loginPair.originUrl]]</div>
+          <div id="username"
+              class="username-column">[[item.loginPair.username]]</div>
+          <div class="password-column">
             <!-- Password type and disabled in order to match mock. -->
-            <paper-input id="password" type="password" disabled
+            <input id="password" type="password" disabled
                 value="[[getEmptyPassword_(item.numCharactersInPassword)]]">
-            </paper-input>
+            </input>
             <paper-icon-button id="passwordMenu" icon="more-vert"
                 on-tap="onPasswordMenuTap_" i18n-values="alt:passwordMenu"
                 tabindex$="[[tabIndex]]">
             </paper-icon-button>
           </div>
-        </template>
-      </iron-list>
-      <cr-shared-menu id="menu">
-        <div id="menuEditPassword" class="list-item menu-item"
-            i18n-content="editPassword" on-tap="onMenuEditPasswordTap_"
-            hidden="[[!showPasswords]]"></div>
-        <div id="menuRemovePassword" class="list-item menu-item"
-            i18n-content="removePassword" on-tap="onMenuRemovePasswordTap_">
         </div>
-      </cr-shared-menu>
-      <password-edit-dialog id="passwordEditDialog"></password-edit-dialog>
-    </div>
-    <div class="list-frame">
-      <div class="secondary" i18n-content="passwordExceptionsHeading"></div>
-      <iron-list id="passwordExceptionsList" class="vertical-list list-section"
-          items="[[passwordExceptions]]">
-        <template>
-          <div class="list-item two-line">
-            <div id="exception" class="start">[[item]]</div>
-            <paper-icon-button id="removeExceptionButton" icon="close"
-                on-tap="onRemoveExceptionButtonTap_" tabindex$="[[tabIndex]]"
-                i18n-values="alt:deletePasswordException"></paper-icon-button>
-          </div>
-        </template>
-      </iron-list>
-    </div>
+      </template>
+    </iron-list>
+    <cr-shared-menu id="menu">
+      <div id="menuEditPassword" class="list-item menu-item"
+          i18n-content="editPassword" on-tap="onMenuEditPasswordTap_"
+          hidden="[[!showPasswords]]"></div>
+      <div id="menuRemovePassword" class="list-item menu-item"
+          i18n-content="removePassword" on-tap="onMenuRemovePasswordTap_">
+      </div>
+    </cr-shared-menu>
+    <password-edit-dialog id="passwordEditDialog"></password-edit-dialog>
+    <div class="heading" i18n-content="passwordExceptionsHeading"></div>
+    <iron-list id="passwordExceptionsList" class="vertical-list list-section"
+        items="[[passwordExceptions]]">
+      <template>
+        <div class="list-item two-line">
+          <div id="exception" class="start">[[item]]</div>
+          <paper-icon-button id="removeExceptionButton" icon="close"
+              on-tap="onRemoveExceptionButtonTap_" tabindex$="[[tabIndex]]"
+              i18n-values="alt:deletePasswordException"></paper-icon-button>
+        </div>
+      </template>
+    </iron-list>
   </template>
   <script src="chrome://md-settings/passwords_and_forms_page/passwords_section.js"></script>
 </dom-module>