Implement autofill Address and Credit Card lists.

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 cfa7fa31eda024a177d53ffe979c1183220a14fa..679e77a3bff41b51a9973bb8c136f64039c72eab 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,30 +1,20 @@
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/html/action_link.html">
 <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/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/passwords_and_forms_page/passwords_shared_css.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <dom-module id="passwords-section">
   <template>
-    <style include="settings-shared"></style>
-    <style>
-      :host {
-        display: flex;
-        flex-direction: column;
-      }
-
+    <style include="settings-shared passwords-shared">
       #manageLink {
-        -webkit-margin-start: 20px;
         margin-bottom: 24px;
       }
 
-      .heading {
-        -webkit-margin-start: 20px;
-        margin-bottom: 8px;
-      }
-
       #password {
         background-color: transparent;
         border: none;
@@ -33,17 +23,6 @@
         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;
       }
@@ -66,21 +45,6 @@
         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;
-      }
-
       .list-link {
         color: black;
         text-decoration: none;
@@ -92,36 +56,38 @@
     </style>
     <div id="manageLink">$i18nRaw{managePasswordsLabel}</div>
     <div class="heading">$i18n{savedPasswordsHeading}</div>
-    <div id="saved-password-columns" class="list-item">
-      <div class="website-column">$i18n{editPasswordWebsiteLabel}</div>
-      <div class="username-column">
-        $i18n{editPasswordUsernameLabel}
-      </div>
-      <div class="password-column">
-        $i18n{editPasswordPasswordLabel}
+    <div class="item-list">
+      <div class="list-item column-header">
+        <div class="website-column">$i18n{editPasswordWebsiteLabel}</div>
+        <div class="username-column">
+          $i18n{editPasswordUsernameLabel}
+        </div>
+        <div class="password-column">
+          $i18n{editPasswordPasswordLabel}
+        </div>
       </div>
-    </div>
-    <iron-list id="passwordList" class="vertical-list list-section"
-        items="[[savedPasswords]]">
-      <template>
-        <div class="list-item">
-          <a id="originUrl" href="[[item.linkUrl]]" target="_blank"
-              class="website-column list-link">[[item.loginPair.originUrl]]</a>
-          <div id="username"
-              class="username-column">[[item.loginPair.username]]</div>
-          <div class="password-column">
-            <!-- Password type and disabled in order to match mock. -->
-            <input id="password" type="password" disabled
-                value="[[getEmptyPassword_(item.numCharactersInPassword)]]">
-            </input>
-            <paper-icon-button id="passwordMenu" icon="cr:more-vert"
-                on-tap="onPasswordMenuTap_" alt="$i18n{passwordMenu}"
-                tabindex$="[[tabIndex]]">
-            </paper-icon-button>
+      <iron-list id="passwordList" items="[[savedPasswords]]"
+          class="vertical-list list-section list-with-header">
+        <template>
+          <div class="list-item">
+            <a id="originUrl" target="_blank" class="website-column list-link"
+                href="[[item.linkUrl]]">[[item.loginPair.originUrl]]</a>
+            <div id="username"
+                class="username-column">[[item.loginPair.username]]</div>
+            <div class="password-column">
+              <!-- Password type and disabled in order to match mock. -->
+              <input id="password" type="password" disabled
+                  value="[[getEmptyPassword_(item.numCharactersInPassword)]]">
+              </input>
+              <paper-icon-button id="passwordMenu" icon="cr:more-vert"
+                  on-tap="onPasswordMenuTap_" alt="$i18n{passwordMenu}"
+                  tabindex$="[[tabIndex]]">
+              </paper-icon-button>
+            </div>
           </div>
-        </div>
-      </template>
-    </iron-list>
+        </template>
+      </iron-list>
+    </div>
     <cr-shared-menu id="menu">
       <div id="menuEditPassword" class="list-item menu-item"
           on-tap="onMenuEditPasswordTap_"
@@ -131,8 +97,8 @@
     </cr-shared-menu>
     <password-edit-dialog id="passwordEditDialog"></password-edit-dialog>
     <div class="heading">$i18n{passwordExceptionsHeading}</div>
-    <iron-list id="passwordExceptionsList" class="vertical-list list-section"
-        items="[[passwordExceptions]]">
+    <iron-list id="passwordExceptionsList" items="[[passwordExceptions]]"
+        class="vertical-list list-section item-list">
       <template>
         <div class="list-item two-line">
           <a id="exception" href="[[item.linkUrl]]" target="_blank"
@@ -146,5 +112,7 @@
       </template>
     </iron-list>
   </template>
+  <!-- action_link.css is needed for the |managePasswordsLabel| link -->
+  <link rel="import" type="css" href="chrome://resources/css/action_link.css">
   <script src="chrome://md-settings/passwords_and_forms_page/passwords_section.js"></script>
 </dom-module>