MD WebUI: Simplify usage of Templatizer in cr-lazy-render

ui/webui/resources/cr_elements/cr_lazy_render/cr_lazy_render.js

 // 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
  * cr-lazy-render is a simple variant of dom-if designed for lazy rendering
  * of elements that are accessed imperatively.
  * Usage:
  *   <template is="cr-lazy-render" id="menu">
  *     <heavy-menu></heavy-menu>
  *   </template>
  *
  *   this.$.menu.get().then(function(menu) {
  *     menu.show();
  *   });
  */
 
-/**
- * A template instance created by Polymer.Templatizer.
- * @constructor
- * @extends {PolymerElement}
- */
-var TemplateInstance = function() {};
-
-/** @type {Array<Element>} */
-TemplateInstance.prototype._children;
-
-/**
- * @param {string} prop
- * @param {Object} value
- * @param {boolean} quiet
- */
-TemplateInstance.prototype.__setProperty = function(prop, value, quiet) {};
-
-/**
- * @param {string} path
- * @param {Object} value
- * @param {boolean} quiet
- */
-TemplateInstance.prototype._notifyPath = function(path, value, quiet) {};
-
 Polymer({
   is: 'cr-lazy-render',
   extends: 'template',
 
   behaviors: [
     Polymer.Templatizer
   ],
 
   /** @private {Promise<Element>} */
   _renderPromise: null,
 
-  /** @private {TemplateInstance} */
-  _instance: null,
+  /** @private {TemplatizerNode} */
+  _child: null,

[Dan Beam, 2016/09/15 17:19:00]

use trailing underscore for Chrome JS unless it has to @override something, i.e.

renderPromise_
child_

[tsergeant, 2016/09/15 23:26:49]

I was originally trying to avoid things like `instance_._children` which was
confusing to write and read.

This CL cleans up several of those cases, so I've made the switch back to
trailing underscores.

 
   /**
    * 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
    *   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 == Node.ELEMENT_NODE)
-          return children[i];
-      }
-    }
-    return null;
+    return this._child;
   },
 
+  /** @private */

[Dan Beam, 2016/09/15 17:19:00]

is this actually private or @protected in polymer terminology?

[tsergeant, 2016/09/15 23:26:49]

It's private, yeah. Nothing else should be using it.

   _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);
+    if (parentNode && !this._child) {
+      var instance = this.stamp({});
+      this._child = instance.root.querySelector('*');

[michaelpg, 2016/09/15 08:44:41]

instance.root.firstElementChild

[tsergeant, 2016/09/15 23:26:49]

Done.

+      parentNode.insertBefore(instance.root, this);
     }
   },
 
   /**
    * @param {string} prop
    * @param {Object} value
    */
   _forwardParentProp: function(prop, value) {
-    if (this._instance)
-      this._instance.__setProperty(prop, value, true);
+    if (this._child)
+      this._child._templateInstance[prop] = value;
   },
 
   /**
    * @param {string} path
    * @param {Object} value
    */
   _forwardParentPath: function(path, value) {
-    if (this._instance)
-      this._instance._notifyPath(path, value, true);
+    if (this._child)
+      this._child._templateInstance.notifyPath(path, value, true);
   }
 });