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

chrome/browser/resources/md_history/list_container.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.
 
 Polymer({
   is: 'history-list-container',
 
   properties: {
     // The path of the currently selected page.
     selectedPage_: String,
@@ skipping 48 matching lines @@
     // Disable querying until the first set of results have been returned. If
     // there is a search, query immediately to support search query params from
     // the URL.
     var noResults = !this.queryResult || this.queryResult.results == null;
     if (queryState.queryingDisabled ||
         (!this.queryState.searchTerm && noResults)) {
       return;
     }
 
     // Close any open dialog if a new query is initiated.
-    if (!incremental && this.$.dialog.open)
-      this.$.dialog.close();
+    var dialog = this.$.dialog.getIfExists();
+    if (!incremental && dialog && dialog.open)
+      dialog.close();
 
     this.set('queryState.querying', true);
     this.set('queryState.incremental', incremental);
 
     var lastVisitTime = 0;
     if (incremental) {
       var lastVisit = this.queryResult.results.slice(-1)[0];
       lastVisitTime = lastVisit ? lastVisit.time : 0;
     }
 
@@ skipping 10 matching lines @@
         .unselectAllItems(count);
   },
 
   /**
    * Delete all the currently selected history items. Will prompt the user with
    * a dialog to confirm that the deletion should be performed.
    */
   deleteSelectedWithPrompt: function() {
     if (!loadTimeData.getBoolean('allowDeletingHistory'))
       return;
-
-    this.$.dialog.showModal();
+    this.$.dialog.get().then(function(dialog) {
+      dialog.showModal();
+    });
   },
 
   /**
    * @param {HistoryRange} range
    * @private
    */
   groupedRangeChanged_: function(range) {
     this.selectedPage_ = this.queryState.range == HistoryRange.ALL_TIME ?
       'infinite-list' : 'grouped-list';
 
@@ skipping 22 matching lines @@
 
       if (results[i].dateRelativeDay != currentDate) {
         currentDate = results[i].dateRelativeDay;
       }
     }
   },
 
   /** @private */
   onDialogConfirmTap_: function() {
     this.$['infinite-list'].deleteSelected();
-    this.$.dialog.close();
+    var dialog = assert(this.$.dialog.getIfExists());
+    dialog.close();
   },
 
   /** @private */
   onDialogCancelTap_: function() {
-    this.$.dialog.close();
+    var dialog = assert(this.$.dialog.getIfExists());
+    dialog.close();
   },
 
   /**
    * Closes the overflow menu.
    * @private
    */
   closeMenu_: function() {
-    /** @type {CrSharedMenuElement} */(this.$.sharedMenu).closeMenu();
+    var menu = this.$.sharedMenu.getIfExists();
+    if (menu)
+      menu.closeMenu();
   },
 
   /**
    * Opens the overflow menu unless the menu is already open and the same button
    * is pressed.
    * @param {{detail: {item: !HistoryEntry, target: !HTMLElement}}} e
+   * @return {Promise<Element>}
    * @private
    */
   toggleMenu_: function(e) {
     var target = e.detail.target;
-    /** @type {CrSharedMenuElement} */(this.$.sharedMenu).toggleMenu(
-        target, e.detail.item);
+    return this.$.sharedMenu.get().then(function(menu) {
+      /** @type {CrSharedMenuElement} */(menu).toggleMenu(
+          target, e.detail.item);
+    });
   },
 
   /** @private */
   onMoreFromSiteTap_: function() {
-    var menu = /** @type {CrSharedMenuElement} */(this.$.sharedMenu);
+    var menu = assert(this.$.sharedMenu.getIfExists());
     this.fire('search-domain', {domain: menu.itemData.domain});
     menu.closeMenu();
   },
 
   /** @private */
   onRemoveFromHistoryTap_: function() {
-    var menu = /** @type {CrSharedMenuElement} */(this.$.sharedMenu);
+    var menu = assert(this.$.sharedMenu.getIfExists());
     md_history.BrowserService.getInstance()
         .deleteItems([menu.itemData])
         .then(function(items) {
           this.$['infinite-list'].removeDeletedHistory_(items);
           // This unselect-all is to reset the toolbar when deleting a selected
           // item. TODO(tsergeant): Make this automatic based on observing list
           // modifications.
           this.fire('unselect-all');
         }.bind(this));
     menu.closeMenu();
   },
 });