[MD settings] idle load basic and advanced pages

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',
+  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: {

[dpapad, 2017/01/31 23:10:13]

Is this attribute necessary? In other words, does it make sense to use that
subclass without the 'render-when-idle' attribute set to true?

If not, can we simply make this the default behavior and remove this attribute
completely (along with the change observer)?

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

Done.

+      observer: 'renderWhenIdleChanged_',
+      type: Boolean,
+    },
+  },
+
+  /** @private {TemplatizerNode} */
+  child_: null,
+
+  /** @private {number} */
+  idleCallback_: 0,
+
+  /** @override */
+  attached: function() {
+    this.renderWhenIdleChanged_();
+  },
+
+  /** @override */
+  detached: function() {
+    if (this.idleCallback_)

[dpapad, 2017/01/31 23:10:13]

Can we avoid implicit boolean conversions? It is OK in this case, but in general
it is often the source of subtle bugs in JS code.

if (this.idleCallback_ != 0)
  ...

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

Done.

+      cancelIdleCallback(this.idleCallback_);
+  },
+
+  /** @private */
+  renderWhenIdleChanged_: function() {
+    if (this.renderWhenIdle && !this.child_)
+      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_;
+  },
+
+  /** @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);
+  }
+});