MD Settings: Lazy-load sub-pages.

chrome/browser/resources/settings/people_page/people_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/html/web_ui_listener_behavior.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-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html">
 <link rel="import" href="chrome://md-settings/controls/settings_checkbox.html">
 <link rel="import" href="chrome://md-settings/people_page/sync_page.html">
 <link rel="import" href="chrome://md-settings/people_page/sync_private_api.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">
 
 <if expr="chromeos">
 <link rel="import" href="chrome://md-settings/people_page/change_picture.html">
 <link rel="import" href="chrome://md-settings/people_page/easy_unlock_browser_proxy.html">
 <link rel="import" href="chrome://md-settings/people_page/easy_unlock_turn_off_dialog.html">
 <link rel="import" href="chrome://md-settings/people_page/users_page.html">
 </if>
 <if expr="not chromeos">
 <link rel="import" href="chrome://md-settings/people_page/manage_profile.html">
@@ skipping 125 matching lines @@
           </div>
         </template>
 </if>
 
         <div class="settings-box">
           <paper-button class="primary-button" i18n-content="manageOtherPeople"
               on-tap="onManageOtherPeople_">
           </paper-button>
         </div>
       </neon-animatable>
-      <neon-animatable id="sync">
-        <settings-subheader i18n-values="page-title:syncPageTitle">
-        </settings-subheader>
-        <settings-sync-page current-route="[[currentRoute]]">
-        </settings-sync-page>
-      </neon-animatable>
+      <template is="dom-if" name="sync">
+        <settings-subpage page-title="[[i18n('syncPageTitle')]]">
+          <settings-sync-page current-route="[[currentRoute]]">
+          </settings-sync-page>
+        </settings-subpage>
+      </template>
 <if expr="chromeos">
-      <neon-animatable id="users">
-        <settings-subheader i18n-values="page-title:usersPageTitle">
-        </settings-subheader>
-        <settings-users-page prefs="{{prefs}}"></settings-users-page>
-      </neon-animatable>
-      <neon-animatable id="changePicture">
-        <settings-subheader i18n-values="page-title:changePictureTitle">
-        </settings-subheader>
-        <settings-change-picture></settings-change-picture>
-      </neon-animatable>
+      <template is="dom-if" name="users">
+        <settings-subpage page-title="[[i18n('usersPageTitle')]]">
+          <settings-users-page prefs="{{prefs}}"></settings-users-page>
+        </settings-subpage>
+      </template>
+      <template is="dom-if" name="changePicture">
+        <settings-subpage page-title="[[i18n('changePictureTitle')]]">
+          <settings-change-picture></settings-change-picture>
+        </settings-subpage>
+      </template>
 </if>
 <if expr="not chromeos">
-      <neon-animatable id="manageProfile">
-        <settings-subheader i18n-values="page-title:editPerson">
-        </settings-subheader>
-        <settings-manage-profile profile-icon-url="[[profileIconUrl_]]"
-            profile-name="[[profileName_]]">
-        </settings-manage-profile>
-      </neon-animatable>
+      <template is="dom-if" name="manageProfile">
+        <settings-subpage page-title="[[i18n('editPerson')]]">
+          <settings-manage-profile profile-icon-url="[[profileIconUrl_]]"
+              profile-name="[[profileName_]]">
+          </settings-manage-profile>
+        </settings-subpage>
+      </template>
 </if>
     </settings-animated-pages>
 
     <paper-dialog modal id="disconnectDialog">
       <h2 i18n-content="syncDisconnectTitle"></h2>
       <div i18n-values=".innerHTML:syncDisconnectExplanation"></div>
 <if expr="(not chromeos and is_posix) or is_win or is_macosx">
       <paper-checkbox id="deleteProfile"
           i18n-content="syncDisconnectDeleteProfile">
       </paper-checkbox>
 </if>
       <div class="button-strip">
         <paper-button dialog-dismiss i18n-content="cancel">
         </paper-button>
         <paper-button dialog-confirm class="action-button"
             on-tap="onDisconnectConfirm_" i18n-content="syncDisconnectConfirm">
         </paper-button>
       </div>
     </paper-dialog>
 
 <if expr="chromeos">
     <template is="dom-if" if="[[easyUnlockEnabled_]]">
       <easy-unlock-turn-off-dialog id="easyUnlockTurnOffDialog">
       </easy-unlock-turn-off-dialog>
     </template>
 </if>
   </template>
   <script src="people_page.js"></script>
 </dom-module>