MD History: Implement search functionality.

chrome/browser/resources/md_history/history_card_manager.js

Index: chrome/browser/resources/md_history/history_card_manager.js
diff --git a/chrome/browser/resources/md_history/history_card_manager.js b/chrome/browser/resources/md_history/history_card_manager.js
index 6f9cae24671a0f2ac9b27d3a60f208f0c4db943e..17d11d354b84e3fd7e86bca61ef12005b55eb127 100644
--- a/chrome/browser/resources/md_history/history_card_manager.js
+++ b/chrome/browser/resources/md_history/history_card_manager.js
@@ -12,19 +12,39 @@ Polymer({
       type: Array,
       value: function() { return []; }
     },
+
     // The time of access of the last element of historyDataByDay_.
     lastVisitedTime: {
       type: Number,
       value: 0
     },
+
     menuOpen: {
       type: Boolean,
       value: false,
       reflectToAttribute: true
     },
+
     menuIdentifier: {
       type: Number,
       value: 0
+    },
+
+    searchTerm: {
+      type: String,
+      value: ''
+    },
+
+    // Message shown when no results available. Depends on searchTerm.
+    noResultsMessage: {

[tsergeant, 2016/02/02 02:57:36]

Can this be private?

[hsampson, 2016/02/03 02:37:58]

Done.

+      type: String,
+      value: ''
+    },
+
+    // Page waits until results have finished loading before displaying message.
+    loading: {

[tsergeant, 2016/02/02 02:57:36]

And this?

[hsampson, 2016/02/03 02:37:58]

Done.

+      type: Boolean,
+      value: false
     }
   },
 
@@ -44,6 +64,14 @@ Polymer({
   },
 
   /**
+   * Clear the page completely so the page can display new results (search).
+   */
+  resetHistoryResults: function() {
+    this.loading = true;
+    this.splice('historyDataByDay_', 0, this.historyDataByDay_.length);
+  },
+
+  /**
    * 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.
@@ -67,13 +95,36 @@ Polymer({
   },
 
   /**
+   * Reformat the search results so they all have the same dateRelativeDay (will
+   * all display on the same card). Also so the date displays instead of time.
+   * @param {array<HistoryEntry>} results The new search results.
+   * @param {string} searchTerm The search term used to find these results.
+   */
+  reformatSearchResults_: function(results, searchTerm) {
+    for (i = 0; i < results.length; i++) {
+      results[i].dateRelativeDay = searchTerm;
+      results[i].dateTimeOfDay = results[i].dateShort;
+      results[i].historySearchTerm = searchTerm;

[tsergeant, 2016/02/02 02:57:36]

What's this? I don't see it anywhere else

[hsampson, 2016/02/03 02:37:58]

This is used in addNewResults() if the results returned are search results, as
the results get returned in a slightly different format.

+    }
+  },
+
+  /**
    * Split the newly updated history results into history items sorted via day
    * accessed.
    * @param {Array<HistoryEntry>} results The new history results.
+   * @param {string} searchTerm The search term used for chrome.send.
    */
-  addNewResults: function(results) {
-    if (results.length == 0)
+  addNewResults: function(results, searchTerm) {
+    this.searchTerm = searchTerm;
+    this.noResultsMessage_();
+
+    if (results.length == 0) {
+      this.loading = false;
       return;
+    }
+
+    if (searchTerm != '')
+      this.reformatSearchResults_(results, searchTerm);
 
     var dateSortedData = [];
     var historyItems = [];
@@ -95,6 +146,8 @@ Polymer({
       this.appendHistoryData_(currentDate, historyItems);
 
     this.lastVisitedTime = historyItems[historyItems.length - 1].time;
+    this.loading = false;
+    Polymer.dom.flush();
   },
 
   /**
@@ -128,7 +181,7 @@ Polymer({
    */
   appendHistoryData_: function(date, historyItems) {
     var lastDay = this.historyDataByDay_.length - 1;
-    if (lastDay > 0 && date == this.historyDataByDay_[lastDay].date) {
+    if (lastDay >= 0 && date == this.historyDataByDay_[lastDay].date) {
       this.set('historyDataByDay_.' + lastDay + '.historyItems',
           this.historyDataByDay_[lastDay].historyItems.concat(historyItems));
     } else {
@@ -146,7 +199,6 @@ Polymer({
   scrollHandler_: function() {
     // Closes overflow menu on scroll.
     this.closeMenu();
-
     this.loadMoreIfAtEnd_();
   },
 
@@ -156,12 +208,32 @@ Polymer({
    */
   loadMoreIfAtEnd_: function() {
     var scrollOffset = 10;
-    var scrollElem = this.$['infinite-list'];
-
-    if (scrollElem.scrollHeight <=
-        scrollElem.scrollTop + scrollElem.clientHeight + scrollOffset) {
+    var scrollElem = this.$$('#infinite-list');

[tsergeant, 2016/02/02 02:57:36]

If you use hidden$=, then you won't need to worry about this either.

[hsampson, 2016/02/03 02:37:58]

Done.

+    if ((scrollElem != undefined) && (scrollElem.scrollHeight <=
+         scrollElem.scrollTop + scrollElem.clientHeight + scrollOffset) &&
+        (scrollElem.scrollTop != 0)) {
       chrome.send('queryHistory',
-          ['', 0, 0, this.lastVisitedTime, RESULTS_PER_PAGE]);
+          [this.searchTerm, 0, 0, this.lastVisitedTime, RESULTS_PER_PAGE]);
     }
+  },
+
+  /**
+   * True if there are no results available and the page has finished loading.
+   * @param {number} numberOfResults The length of historyDataByDay_.
+   * @return {boolean} Whether there are results to show.
+   * @private
+   */
+  noResults_: function(numberOfResults) {
+    return numberOfResults == 0 && !this.loading;
+  },
+
+  /**
+   * Sets the message displayed when there are no results. Displayed if there is
+   * no history at all or if the search returned no results.
+   * @private
+   */
+  noResultsMessage_: function() {
+    var messageId = this.searchTerm == '' ? 'noResults' : 'noSearchResults';
+    this.noResultsMessage = loadTimeData.getString(messageId);
   }
 });