MD History: Add lazy-render element for simple lazy initialization.

chrome/browser/resources/md_history/lazy_render.js

Index: chrome/browser/resources/md_history/lazy_render.js
diff --git a/chrome/browser/resources/md_history/lazy_render.js b/chrome/browser/resources/md_history/lazy_render.js
new file mode 100644
index 0000000000000000000000000000000000000000..47b854745adbfe53200e3959990e60a246150af3
--- /dev/null
+++ b/chrome/browser/resources/md_history/lazy_render.js
@@ -0,0 +1,95 @@
+// Copyright 2016 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
+ * history-lazy-render is a simple variant of dom-if designed for lazy rendering
+ * of elements that are accessed imperatively.
+ * Usage:
+ *   <template is="history-lazy-render" id="menu">
+ *     <heavy-menu></heavy-menu>
+ *   </template>
+ *
+ *   this.$.menu.get().then(function(menu) {
+ *     menu.show();
+ *   });
+ */
+
+Polymer({
+  is: 'history-lazy-render',
+  extends: 'template',
+
+  behaviors: [
+    Polymer.Templatizer
+  ],
+
+  /** @private {Promise<Element>} */

[calamity, 2016/08/12 06:25:04]

Is this a valid type annotation? And below.

[tsergeant, 2016/08/16 03:49:06]

Yup. We use it somewhere else as well. See
https://developers.google.com/closure/compiler/docs/js-for-compiler

[calamity, 2016/08/16 07:00:01]

Acknowledged.

+  _renderPromise: null,
+
+  /** @private {TemplateInstance} */
+  _instance: null,
+
+  /**
+   * Stamp the template into the DOM tree asynchronously
+   * @return {Promise<Element>} Promise which resolves when the template has
+   *   been stamped.
+   */
+  get: function() {
+    if (!this._renderPromise) {
+      this._renderPromise = new Promise(function(resolve) {
+        this._debounceTemplate(function() {
+          this._render();
+          this._renderPromise = null;
+          resolve(this.getIfExists());
+        }.bind(this));
+      }.bind(this));
+    }
+    return this._renderPromise;
+  },
+
+  /**
+   * @return {Element} The element contained in the template, if it has

[calamity, 2016/08/12 06:25:04]

I'm surprised this lets you return null without using {?Element}

[tsergeant, 2016/08/16 03:49:06]

Everything is nullable by default, so that's why this works. I'll change it to
?Element to document that the null return is expected behavior.

+   *   already been stamped.
+   */
+  getIfExists: function() {
+    if (this._instance) {
+      var children = this._instance._children;
+
+      for (var i = 0; i < children.length; i++) {
+        if (children[i].nodeType == 1)

[calamity, 2016/08/12 06:25:04]

== Node.ELEMENT_NODE?

[tsergeant, 2016/08/16 03:49:06]

Huh. I should have known something like this would exist.

+          return children[i];
+      }
+    }
+    return null;
+  },
+
+  _render: function() {
+    if (!this.ctor)
+      this.templatize(this);
+    var parentNode = this.parentNode;
+    if (parentNode && !this._instance) {
+      this._instance = /** @type {TemplateInstance} */(this.stamp({}));
+      var root = this._instance.root;
+      parentNode.insertBefore(root, this);
+    }
+  },
+
+  /**
+   * @param {string} prop
+   * @param {Object} value
+   */
+  _forwardParentProp: function(prop, value) {
+    if (this._instance)
+      this._instance.__setProperty(prop, value, true);
+  },
+
+  /**
+   * @param {string} path
+   * @param {Object} value
+   */
+  _forwardParentPath: function(path, value) {

[calamity, 2016/08/12 06:25:04]

So these all depend on Polymer's internal implementation, right? #neverchange

[tsergeant, 2016/08/16 03:49:06]

Yeah, seems like this is the only way to use Polymer.Templatizer.

+    if (this._instance)
+      this._instance._notifyPath(path, value, true);
+  }
+});