MD History: Replace app-route with a custom router

chrome/browser/resources/md_history/history_toolbar.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.
 
 Polymer({
   is: 'history-toolbar',
   properties: {
     // Number of history items currently selected.
     // TODO(calamity): bind this to
     // listContainer.selectedItem.selectedPaths.length.
     count: {
       type: Number,
       value: 0,
       observer: 'changeToolbarView_'
     },
 
     // True if 1 or more history items are selected. When this value changes
     // the background colour changes.
     itemsSelected_: {
       type: Boolean,
       value: false,
       reflectToAttribute: true
     },
 
     // The most recent term entered in the search field. Updated incrementally
     // as the user types.
     searchTerm: {
       type: String,
+      observer: 'searchTermChanged_',
       notify: true,
     },
 
     // True if the backend is processing and a spinner should be shown in the
     // toolbar.
     spinnerActive: {
       type: Boolean,
       value: false
     },
 
@@ skipping 19 matching lines @@
       notify: true
     },
 
     // The start time of the query range.
     queryStartTime: String,
 
     // The end time of the query range.
     queryEndTime: String,
   },
 
+  /** @return {CrToolbarSearchFieldElement} */
+  get searchBar() {

[calamity, 2016/09/22 05:12:26]

Might be a good time to rename this 'searchField'.

[tsergeant, 2016/09/23 00:37:44]

Done.

+    return /** @type {CrToolbarElement} */ (this.$['main-toolbar'])
+        .getSearchField();
+  },
+
+  showSearchField: function() {
+    this.searchBar.showAndFocus();
+  },
+
   /**
    * Changes the toolbar background color depending on whether any history items
    * are currently selected.
    * @private
    */
   changeToolbarView_: function() {
     this.itemsSelected_ = this.count > 0;
   },
 
   /**
    * When changing the search term externally, update the search field to
    * reflect the new search term.
-   * @param {string} search
    */
-  setSearchTerm: function(search) {
-    if (this.searchTerm == search)
-      return;
-
-    this.searchTerm = search;
-    var searchField = /** @type {!CrToolbarElement} */(this.$['main-toolbar'])
-                          .getSearchField();
-    searchField.showAndFocus();
-    searchField.setValue(search);
+  searchTermChanged_: function() {
+    if (this.searchBar.getValue() != this.searchTerm) {
+      this.searchBar.showAndFocus();
+      this.searchBar.setValue(this.searchTerm);
+    }
   },
 
   /**
    * @param {!CustomEvent} event
    * @private
    */
   onSearchChanged_: function(event) {
     this.searchTerm = /** @type {string} */ (event.detail);
   },
 
   /** @private */
   onInfoButtonTap_: function() {
     var dropdown = this.$.syncNotice.get();
     dropdown.positionTarget = this.$$('#info-button-icon');
     // It is possible for this listener to trigger while the dialog is
     // closing. Ensure the dialog is fully closed before reopening it.
     if (dropdown.style.display == 'none')
       dropdown.open();
   },
 
   onClearSelectionTap_: function() {
     this.fire('unselect-all');
   },
 
   onDeleteTap_: function() {
     this.fire('delete-selected');
   },
 
-  get searchBar() {
-    return this.$['main-toolbar'].getSearchField();
-  },
-
-  showSearchField: function() {
-    /** @type {!CrToolbarElement} */(this.$['main-toolbar'])
-        .getSearchField()
-        .showAndFocus();
-  },
-
   /**
    * If the user is a supervised user the delete button is not shown.
    * @private
    */
   deletingAllowed_: function() {
     return loadTimeData.getBoolean('allowDeletingHistory');
   },
 
   numberOfItemsSelected_: function(count) {
     return count > 0 ? loadTimeData.getStringF('itemsSelected', count) : '';
   },
 
   getHistoryInterval_: function(queryStartTime, queryEndTime) {
     // TODO(calamity): Fix the format of these dates.
     return loadTimeData.getStringF(
       'historyInterval', queryStartTime, queryEndTime);
   },
 
   /** @private */
   hasDrawerChanged_: function() {
     this.updateStyles();
   },
 });