Settings Rewrite: Make a common settings-section component.

chrome/browser/resources/settings/a11y_page/a11y_page.html

 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-material/paper-material.html">
 <link rel="import" href="chrome://md-settings/checkbox/checkbox.html">
+<link rel="import" href="chrome://md-settings/settings_page/settings_section.html">
 
 <dom-module id="cr-settings-a11y-page">
-  <link rel="import" type="css"
-      href="chrome://md-settings/settings_page/settings_page.css">
   <link rel="import" type="css" href="a11y_page.css">
   <template>
-    <paper-material>
+    <cr-settings-section page-title="[[pageTitle]]" icon="[[icon]]">

[michaelpg, 2015/07/21 22:04:01]

Distributing all of the page content to another element adds some complexity and
doesn't give us much. It would be simpler to make a <cr-settings-section-header>
element and use that here.

For the <paper-material> (or whatever we use as the container for a top-level
section), we could move that outside of the individual pages, so a page isn't
tied to one style. This would enable us to include a given page as a top-level
page (by using <paper-material>) or as a sub-page (by using... something else).
It would also mean, if we want to change the container to something else, we
don't have to edit each individual page's file.

[tommycli, 2015/07/22 19:06:42]

Done.

       <div class="more-a11y-link">
         <a href="https://chrome.google.com/webstore/category/collection/accessibility"
             target="_blank" i18n-content="moreFeaturesLink"></a>
       </div>
 
 <if expr="chromeos">
       <cr-settings-checkbox i18n-values="label:optionsInMenuLabel"
           pref="{{prefs.settings.a11y.enable_menu}}">
       </cr-settings-checkbox>
       <cr-settings-checkbox i18n-values="label:largeMouseCursorLabel"
@@ skipping 35 matching lines @@
           <option value="1000" i18n-content="delayBeforeClickVeryLong">
           </option>
         </select>
       </div>
 
       <cr-settings-checkbox pref="{{prefs.settings.a11y.virtual_keyboard}}"
           i18n-values="label:onScreenKeyboardLabel">
       </cr-settings-checkbox>
 </if>
 
-    </paper-material>
+    </cr-settings-section>
   </template>
   <script src="a11y_page.js"></script>
 </dom-module>