MD History: Add spinners when new data is loading or searching

chrome/browser/resources/md_history/history_list.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-list',
 
   properties: {
     // An array of history entries in reverse chronological order.
     historyData: {
@@ skipping 10 matching lines @@
       type: String,
       value: ''
     },
 
     // True if there is a pending request to the backend.
     loading_: {
       type: Boolean,
       value: true
     },
 
+    // True if it's searching at the backend.
+    searching_: {
+      type: Boolean,
+      value: false
+    },
+
     resultLoadingDisabled_: {
       type: Boolean,
       value: false
     },
   },
 
   listeners: {
     'infinite-list.scroll': 'closeMenu_',
     'tap': 'closeMenu_',
     'toggle-menu': 'toggleMenu_',
   },
 
   /**
    * Closes the overflow menu.
    * @private
    */
   closeMenu_: function() {
     /** @type {CrSharedMenuElement} */(this.$.sharedMenu).closeMenu();
   },
 
   /**
    * Mark the page as currently loading new data from the back-end.
    */
-  setLoading: function() {
-    this.loading_ = true;
+  setSearching: function() {

[tsergeant, 2016/04/07 01:07:02]

We need to be careful about changing when loading_ is true, since it also:

* Disables loading more data by scrolling down
* Controls what messages can appear over the page.

If you want to have a separate searching_ boolean, you'll still need to make
sure that loading_ is true.

[lshang, 2016/04/15 03:31:54]

Done.
Thanks for reminding!

+    this.searching_ = true;
   },
 
   /**
    * Opens the overflow menu unless the menu is already open and the same button
    * is pressed.
    * @param {Event} e The event with details of the menu item that was clicked.
    * @private
    */
   toggleMenu_: function(e) {
     var target = e.detail.target;
     /** @type {CrSharedMenuElement} */(this.$.sharedMenu).toggleMenu(
         target, e.detail.timestamp);
   },
 
   /**
    * Disables history result loading when there are no more history results.
    */
   disableResultLoading: function() {
     this.resultLoadingDisabled_ = true;
   },
 
   /**
    * Adds the newly updated history results into historyData. Adds new fields
    * for each result.
    * @param {!Array<!HistoryEntry>} historyResults The new history results.
    * @param {string} searchTerm Search query used to find these results.
    */
   addNewResults: function(historyResults, searchTerm) {
     this.loading_ = false;
+    this.searching_ = false;
 
     if (this.searchTerm != searchTerm) {
       if (this.historyData)
         this.splice('historyData', 0, this.historyData.length);
       this.searchTerm = searchTerm;
     }
 
     if (historyResults.length == 0)
       return;
 
@@ skipping 184 matching lines @@
     return historyDataLength > 0;
   },
 
   noResultsMessage_: function(searchTerm, isLoading) {
     if (isLoading)
       return '';
     var messageId = searchTerm !== '' ? 'noSearchResults' : 'noResults';
     return loadTimeData.getString(messageId);
   }
 });