MD Settings: Lazy load the contents of the "advanced" settings.

chrome/browser/resources/settings/controls/settings_idle_render.js

Index: chrome/browser/resources/settings/controls/settings_idle_render.js
diff --git a/chrome/browser/resources/settings/controls/settings_idle_render.js b/chrome/browser/resources/settings/controls/settings_idle_render.js
index 8e224c9e5414b54437e08f556a7411fdbb2a9868..84d788b581f5980b063badd604303e74b0ded88f 100644
--- a/chrome/browser/resources/settings/controls/settings_idle_render.js
+++ b/chrome/browser/resources/settings/controls/settings_idle_render.js
@@ -12,11 +12,19 @@
  */
 
 Polymer({
-  is: 'settings-idle-render',
+  is: 'settings-idle-load',

[dpapad, 2017/03/16 20:47:16]

I'll rename this file to settings_idle_load.js. Just wanted to sent it out as-is
first, to showcase the diff better.

   extends: 'template',
 
   behaviors: [Polymer.Templatizer],
 
+  properties: {
+    /**
+     * If specified, it will be loaded via an HTML import before stamping the
+     * template.
+     */
+    url: String,
+  },
+
   /** @private {TemplatizerNode} */
   child_: null,
 
@@ -25,7 +33,7 @@ Polymer({
 
   /** @override */
   attached: function() {
-    this.idleCallback_ = requestIdleCallback(this.render_.bind(this));
+    this.idleCallback_ = requestIdleCallback(this.get.bind(this));
   },
 
   /** @override */
@@ -35,25 +43,32 @@ Polymer({
   },
 
   /**
-   * Stamp the template into the DOM tree synchronously
-   * @return {Element} Child element which has been stamped into the DOM tree.
+   * @return {!Promise<Element>} Child element which has been stamped into the
+   *     DOM tree.
    */
   get: function() {
-    if (!this.child_)
-      this.render_();
-    return this.child_;
-  },
-
-  /** @private */
-  render_: function() {
-    if (!this.ctor)
-      this.templatize(this);
-    var parentNode = this.parentNode;
-    if (parentNode && !this.child_) {
-      var instance = this.stamp({});
-      this.child_ = instance.root.firstElementChild;
-      parentNode.insertBefore(instance.root, this);
+    if (!this.loading_) {
+      if (this.url) {
+        this.loading_ = new Promise(function(resolve, reject) {
+          this.importHref(this.url, resolve, reject, true);
+        }.bind(this));
+      } else {
+        this.loading_ = Promise.resolve();
+      }
     }
+    return this.loading_.then(function() {
+      if (!this.child_) {
+        if (!this.ctor)
+          this.templatize(this);
+        var parentNode = this.parentNode;
+        if (parentNode && !this.child_) {
+          var instance = this.stamp({});
+          this.child_ = instance.root.firstElementChild;
+          parentNode.insertBefore(instance.root, this);
+        }
+      }
+      return this.child_;
+    }.bind(this));
   },
 
   /**