[MD settings] idle load basic and advanced pages

chrome/browser/resources/settings/basic_page/basic_page.html

Index: chrome/browser/resources/settings/basic_page/basic_page.html
diff --git a/chrome/browser/resources/settings/basic_page/basic_page.html b/chrome/browser/resources/settings/basic_page/basic_page.html
index 8b59da3d20096627f65f8077ddbb843d7d2235b0..57d50dec64e0dc6f415bf4345daad09f1773b99c 100644
--- a/chrome/browser/resources/settings/basic_page/basic_page.html
+++ b/chrome/browser/resources/settings/basic_page/basic_page.html
@@ -1,6 +1,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="/a11y_page/a11y_page.html">
 <link rel="import" href="/appearance_page/appearance_page.html">
+<link rel="import" href="/controls/settings_lazy_render.html">
 <link rel="import" href="/downloads_page/downloads_page.html">
 <link rel="import" href="/languages_page/languages_page.html">
 <link rel="import" href="/on_startup_page/on_startup_page.html">
@@ -106,7 +107,8 @@
         </template>
 </if>
         <template is="dom-if" if="[[showPage(pageVisibility.search)]]" restamp>
-          <settings-section page-title="$i18n{searchPageTitle}" section="search">
+          <settings-section page-title="$i18n{searchPageTitle}"
+              section="search">
             <settings-search-page prefs="{{prefs}}"></settings-search-page>
           </settings-section>
         </template>
@@ -140,8 +142,7 @@
       </div>
     </template>
 
-    <template is="dom-if"
-        if="[[showAdvancedSettings_(pageVisibility.advancedSettings)]]">
+    <div hidden$="[[!showAdvancedSettings_(pageVisibility.advancedSettings)]]">
       <template is="dom-if" if="[[showAdvancedToggle_(
           inSearchMode, hasExpandedSection_)]]">
         <div id="toggleSpacer"></div>
@@ -155,10 +156,11 @@
         </h2>
       </template>
 
-      <template is="dom-if" if="[[showAdvancedPage_(
-          currentRoute_, inSearchMode, hasExpandedSection_,
-          advancedToggleExpanded)]]">
-        <div id="advancedPage">
+      <template is="settings-lazy-render" id="lazyAdvancedPage"
+          render-when-idle>

[Dan Beam, 2017/01/31 03:19:21]

why would we need render-when-idle if this element is only used here?  why not
just invoke requestIdleCallback() from attached()?

[dschuyler, 2017/01/31 22:03:53]

We'd also want the .get() and .render_(). It seems cleaner to keep it separate
as it's a separate concept.

+        <div id="advancedPage" hidden$="[[!showAdvancedPage_(
+            currentRoute_, inSearchMode, hasExpandedSection_,
+            advancedToggleExpanded)]]">
 <if expr="chromeos">
           <template is="dom-if" if="[[showPage(pageVisibility.dateTime)]]"
               restamp>
@@ -246,7 +248,7 @@
           </template>
         </div>
       </template>
-    </template>
+    </div>
   </template>
   <script src="basic_page.js"></script>
 </dom-module>