MD Settings: Lazy-load sub-pages.

chrome/browser/resources/settings/appearance_page/appearance_page.html

 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/device-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/image-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="chrome://md-settings/controls/settings_dropdown_menu.html">
 <link rel="import" href="chrome://md-settings/controls/settings_input.html">
 <link rel="import" href="chrome://md-settings/controls/settings_radio_group.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html">
-<link rel="import" href="chrome://md-settings/settings_page/settings_subheader.html">
+<link rel="import" href="chrome://md-settings/settings_page/settings_subpage.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 <link rel="import" href="appearance_fonts_page.html">
 
 <dom-module id="settings-appearance-page">
   <link rel="import" type="css"
       href="chrome://md-settings/appearance_page/appearance_shared.css">
   <link rel="import" type="css" href="chrome://resources/css/widgets.css">
   <link rel="import" href="chrome://resources/html/action_link.html">
   <template>
     <style include="settings-shared"></style>
@@ skipping 58 matching lines @@
             <div class="secondary" i18n-content="chooseFontsAndEncoding"></div>
           </div>
         </div>
         <div class="settings-box">
           <div class="start" i18n-content="pageZoom"></div>
           <settings-dropdown-menu id="pageZoom" pref="{{defaultZoomLevel_}}"
               menu-options="[[pageZoomOptions_]]" no-label-float>
           </settings-dropdown-menu>
         </div>
       </neon-animatable>
-      <neon-animatable id="appearance-fonts">
-        <settings-subheader i18n-values="page-title:customizeFonts">
-        </settings-subheader>
-        <template is="dom-if" if="[[showFontsPage_(currentRoute.subpage.*)]]"
-            restamp>
+      <template is="dom-if" name="appearance-fonts">
+        <settings-subpage page-title="[[i18n('customizeFonts')]]">
           <settings-appearance-fonts-page prefs="{{prefs}}">
           </settings-appearance-fonts-page>
-        </template>
-      </neon-animatable>
+        </settings-subpage>
+      </template>
     </settings-animated-pages>
   </template>
   <script src="appearance_page.js"></script>
 </dom-module>