MD Settings: Lazy-load sub-pages.

chrome/browser/resources/settings/settings_page/settings_animated_pages.js

 // Copyright 2015 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-animated-pages' is a container for a page and animated subpages.
  * It provides a set of common behaviors and animations.
  *
  * Example:
@@ skipping 23 matching lines @@
      *
      * The section name must match the name specified in settings_router.js.
      */
     section: {
       type: String,
     },
   },
 
   /** @override */
   created: function() {
+    // Observe the light DOM so we know when it's ready.
+    this.lightDomObserver_ = Polymer.dom(this).observeNodes(
+        this.lightDomChanged_.bind(this));
+
     this.addEventListener('subpage-back', function() {
       assert(this.currentRoute.section == this.section);
       assert(this.currentRoute.subpage.length >= 1);
 
       this.setSubpageChain(this.currentRoute.subpage.slice(0, -1));
     }.bind(this));
   },
 
+  /**
+   * Called initially once the effective children are ready.
+   * @private
+   */
+  lightDomChanged_: function() {
+    if (this.lightDomReady_)
+      return;
+
+    this.lightDomReady_ = true;
+    Polymer.dom(this).unobserveNodes(this.lightDomObserver_);
+    this.runQueuedRouteChange_();
+  },
+
+  /**
+   * Calls currentRouteChanged_ with the deferred route change info.
+   * @private
+   */
+  runQueuedRouteChange_: function() {
+    if (!this._queuedRouteChange)

[Dan Beam, 2016/03/25 03:21:59]

shouldn't this be queuedRouteChange_?
                                   ^

[michaelpg, 2016/03/29 22:04:03]

Done.

+      return;
+    this.async(this.currentRouteChanged_.bind(
+        this,
+        this._queuedRouteChange.newRoute,
+        this._queuedRouteChange.oldRoute));
+  },
+
   /** @private */
   currentRouteChanged_: function(newRoute, oldRoute) {
+    // Don't manipulate the light DOM until it's ready.
+    if (!this.lightDomReady_) {
+      if (!this._queuedRouteChange)
+        this._queuedRouteChange = {newRoute: newRoute, oldRoute: oldRoute};
+      else
+        this._queuedRouteChange.newRoute = newRoute;

[Dan Beam, 2016/03/25 03:21:59]

nit:

this.queuedRouteChange_ = this.queuedRouteChange_ || {oldRoute: oldRoute};
this.queuedRouteChange_.newRoute = newRoute;

[michaelpg, 2016/03/29 22:04:03]

Done.

+      return;
+    }
+
     // route.section is only non-empty when the user is within a subpage.
     // When the user is not in a subpage, but on the Basic page, route.section
     // is an empty string.
     var newRouteIsSubpage = newRoute && newRoute.section == this.section;
     var oldRouteIsSubpage = oldRoute && oldRoute.section == this.section;
 
+    if (newRouteIsSubpage)
+      this.ensureSubpageInstance_();
+
     if (!newRouteIsSubpage || !oldRouteIsSubpage ||
         newRoute.subpage.length == oldRoute.subpage.length) {
       // If two routes are at the same level, or if either the new or old route
       // is not a subpage, fade in and out.
       this.$.animatedPages.exitAnimation = 'fade-out-animation';
       this.$.animatedPages.entryAnimation = 'fade-in-animation';
     } else {
       // For transitioning between subpages at different levels, slide.
       if (newRoute.subpage.length > oldRoute.subpage.length) {
         this.$.animatedPages.exitAnimation = 'slide-left-animation';
         this.$.animatedPages.entryAnimation = 'slide-from-right-animation';
       } else {
         this.$.animatedPages.exitAnimation = 'slide-right-animation';
         this.$.animatedPages.entryAnimation = 'slide-from-left-animation';
       }
     }
 
     this.$.animatedPages.selected =
         newRouteIsSubpage ? newRoute.subpage.slice(-1)[0] : 'main';
   },
 
   /**
+   * Ensures that the template enclosing the subpage is stamped.
+   * @private
+   */
+  ensureSubpageInstance_: function() {
+    var id = this.currentRoute.subpage.slice(-1)[0];
+    var template = Polymer.dom(this).querySelector(
+        'template[name="' + id + '"]');
+
+    // Set the subpage's id for use by neon-animated-pages.
+    var subpage = template._content.querySelector('settings-subpage');
+    if (!subpage.id)
+      subpage.id = id;
+
+    // Render synchronously so neon-animated-pages can select the subpage.
+    template.if = true;
+    template.render();

[Dan Beam, 2016/03/25 03:21:59]

why is this better than using the standard declarative binding?  i.e.
if="[[ensureSubpageInstance_(...)]]"?

[michaelpg, 2016/03/29 22:04:03]

for declarative binding, we'd have to define ensureSubpageInstance on every
section element (which we could do with a new behavior, but would still mean
taking responsibility away from settings-animated-pages).

also, the template content needs to be created before setting
this.$.animatedPages.selected (in currentRouteChanged). we can't guarantee that
declaratively without jumping through weird async hoops.

+  },
+
+  /**
    * Buttons in this pageset should use this method to transition to subpages.
    */
   setSubpageChain: function(subpage) {
     this.currentRoute = {
       page: this.currentRoute.page,
       section: subpage.length > 0 ? this.section : '',
       subpage: subpage,
     };
   },
 });