[MD settings] idle load basic and advanced pages

chrome/browser/resources/settings/controls/settings_lazy_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-lazy-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-lazy-render',

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

settings-idle-render?

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

Done.

+  extends: 'template',
+
+  behaviors: [Polymer.Templatizer],
+
+  properties: {
+    /**
+     * Expand the contents of the template when the JavaScript thread is idle.
+     * This Boolean takes action when it is set to true from the false state.
+     * Setting the value to false doesn't undo the call to |render_|.
+     */
+    renderWhenIdle: {
+      observer: 'renderWhenIdleChanged_',
+      type: Boolean,
+    },
+  },
+
+  /** @private {TemplatizerNode} */
+  child_: null,
+
+  /** @override */
+  attached: function() {
+    this.renderWhenIdleChanged_();
+  },
+
+  /** @override */
+  detached: function() {
+    if (this.idleCallback_)
+      cancelIdleCallback(this.idleCallback_);
+  },
+
+  /** @private */
+  renderWhenIdleChanged_: function() {
+    if (this.renderWhenIdle)
+      this.idleCallback_ = requestIdleCallback(this.render_.bind(this));
+  },
+
+  /**
+   * Stamp the template into the DOM tree synchronously
+   * @return {Element} Child element which has been stamped into the DOM tree.
+   */
+  get: function() {
+    if (!this.child_)
+      this.render_();
+    return this.child_;
+  },
+
+  /**
+   * @return {?Element} The element contained in the template, if it has
+   *   already been stamped.
+   */
+  getIfExists: function() {

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

where is this used?

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

It was to keep parity with cr_lazy_render; which has this used in the languages
page. I can remove it for now (in case these files never merge) and re-add it
later if/when these files are merged.

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