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..89c8fde70e60a88bcc85cb1fea306b5575978c36 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',

[Dan Beam, 2017/03/18 00:36:40]

can you rename this file now?

   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,31 @@ 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_;
-  },
+    if (this.loading_)
+      return this.loading_;
+
+    this.loading_ = new Promise(function(resolve, reject) {
+      this.importHref(
+          this.url,
+          function() {

[Dan Beam, 2017/03/18 00:15:51]

i think this code could use some new lines.  suggestions follow

+            assert(!this.ctor);
+            this.templatize(this);
+            assert(this.ctor);

[Dan Beam, 2017/03/18 00:15:51]

\n

[dpapad, 2017/03/20 20:34:54]

Done.

+            var instance = this.stamp({});

[Dan Beam, 2017/03/18 00:15:51]

\n

[dpapad, 2017/03/20 20:34:55]

Done.

+            assert(!this.child_);
+            this.child_ = instance.root.firstElementChild;

[Dan Beam, 2017/03/18 00:15:51]

\n

[dpapad, 2017/03/20 20:34:54]

Done.

+            this.parentNode.insertBefore(instance.root, this);
+            resolve(this.child_);

[Dan Beam, 2017/03/18 00:15:51]

\n

[dpapad, 2017/03/20 20:34:55]

Done.

+            this.fire('lazy-loaded');
+          }.bind(this),
+          reject, true);
+    }.bind(this));

[Dan Beam, 2017/03/18 00:15:51]

please use `git cl format --js` on this code

[dpapad, 2017/03/20 20:34:55]

Done.

 
-  /** @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);
-    }
+    return this.loading_;
   },
 
   /**