[MD settings] using h2 for sub-headers consistently.

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

Index: chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html
diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html b/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html
index 2892c53b0187f66fc4232365eac454cb16fa2ece..70c61f9ce5bdc1337f6b73fb277946cf9219107b 100644
--- a/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html
@@ -11,10 +11,6 @@
   <link rel="import" type="css" href="chrome://resources/css/action_link.css">
   <template>
     <style include="settings-shared passwords-shared">
-      .link-item {
-        border-top: var(--settings-separator-line);
-      }
-
       .menu-item {
         @apply(--settings-actionable);
       }
@@ -39,9 +35,11 @@
         color: var(--paper-grey-600);
       }
     </style>
-    <div class="heading">$i18n{addresses}</div>
-    <div class="item-list">
-      <div id="addressList" class="vertical-list list-section">
+    <div class="settings-box first">
+      <h2>$i18n{addresses}</h2>

[hcarmona, 2016/08/25 21:37:43]

Can we add the classes directly to the h2?
(here and elsewhere)

[dschuyler, 2016/08/25 22:25:05]

Not easily. I did give it a go and it complicates
the line height. settings-box is intended to wrap
something and not to style the thing itself. I've
been told that div is extremely inexpensive, so I
don't expect this is adding too much.

[hcarmona, 2016/08/25 22:27:58]

Acknowledged.

+    </div>
+    <div class="list-frame">
+      <div id="addressList" class="vertical-list">
         <template is="dom-repeat" items="[[addresses]]">
           <div class="list-item two-line">
             <div class="start">
@@ -57,7 +55,7 @@
           </div>
         </template>
       </div>
-      <div class="list-item link-item">
+      <div class="list-item list-button">
         <a is="action-link" on-tap="onAddAddressTap_">$i18n{addAddress}</a>
       </div>
     </div>
@@ -72,14 +70,15 @@
           on-close="unstampAddressEditDialog_">
       </settings-address-edit-dialog>
     </template>
-    <div class="heading">$i18n{creditCards}</div>
-    <div class="item-list">
+    <div class="settings-box first">
+      <h2>$i18n{creditCards}</h2>
+    </div>
+    <div class="list-frame">
       <div class="list-item column-header">
         <div class="type-column">$i18n{creditCardType}</div>
         <div class="expiration-column">$i18n{creditCardExpiration}</div>
       </div>
-      <div id="creditCardList"
-          class="vertical-list list-section list-with-header">

[hcarmona, 2016/08/25 21:37:43]

Good catch. I didn't realize "list-section" was unused.

[dschuyler, 2016/08/25 22:25:05]

Acknowledged.

+      <div id="creditCardList" class="vertical-list list-with-header">
         <template is="dom-repeat" items="[[creditCards]]">
           <div class="list-item two-line">
             <div class="type-column">
@@ -104,7 +103,7 @@
           </div>
         </template>
       </div>
-      <div class="list-item link-item">
+      <div class="list-item list-button">
         <a is="action-link" on-tap="onAddCreditCardTap_">
           $i18n{addCreditCard}
         </a>