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

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

 // Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview
  * settings-idle-render is a simple variant of dom-if designed for lazy
  * rendering of elements that are accessed imperatively.
  * If a use for idle time expansion is found outside of settings, this code
  * should be replaced by cr-lazy-render after that feature is merged into
  * ui/webui/resources/cr_elements/cr_lazy_render/cr_lazy_render.js
  */
 
 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,
 
   /** @private {number} */
   idleCallback_: 0,
 
   /** @override */
   attached: function() {
-    this.idleCallback_ = requestIdleCallback(this.render_.bind(this));
+    this.idleCallback_ = requestIdleCallback(this.get.bind(this));
   },
 
   /** @override */
   detached: function() {
     // No-op if callback already fired.
     cancelIdleCallback(this.idleCallback_);
   },
 
   /**
-   * 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_;
 
-  /** @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);
-    }
+    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.

+
+    return this.loading_;
   },
 
   /**
    * @param {string} prop
    * @param {Object} value
    */
   _forwardParentProp: function(prop, value) {
     if (this.child_)
       this.child_._templateInstance[prop] = value;
   },
 
   /**
    * @param {string} path
    * @param {Object} value
    */
   _forwardParentPath: function(path, value) {
     if (this.child_)
       this.child_._templateInstance.notifyPath(path, value, true);
   }
 });