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',

[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,
 
   /** @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_;
-  },
-
-  /** @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));
   },
 
   /**
    * @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);
   }
 });