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 6844515fc8ce23f55f008b3a95b2e296ce5c8484..1f3e44eb60ff083bd5dbdf63ae263c1969016aa8 100644
--- a/chrome/browser/resources/md_history/history_card_manager.js
+++ b/chrome/browser/resources/md_history/history_card_manager.js
@@ -28,6 +28,23 @@ Polymer({
     menuIdentifier: {
       type: Number,
       value: 0
+    },
+
+    searchTerm: {
+      type: String,
+      value: ''
+    },
+
+    // Message shown when no results available. Depends on searchTerm.
+    noResultsMessage_: {
+      type: String,
+      value: ''
+    },
+
+    // Page waits until results have finished loading before displaying message.
+    loading_: {
+      type: Boolean,
+      value: false
     }
   },
 
@@ -47,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);

[tsergeant, 2016/02/04 02:28:49]

Have you thought about not replacing the old results immediately, but when new
results come in? I'd expect that would have better performance, since you'd be
changing historyDataByData once rather than twice with a gap between them.

If you're not sure or it's too annoying right now, we can probably follow this
up later (maybe put in a TODO for it, though)

[hsampson, 2016/02/08 04:40:23]

Acknowledged.

+  },
+
+  /**
    * 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.
@@ -70,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} search The search term used to find these results.
+   */
+  reformatSearchResults_: function(results, search) {
+    for (var i = 0; i < results.length; i++) {
+      results[i].dateRelativeDay = search;

[tsergeant, 2016/02/04 02:28:49]

On further thought, I don't like this pattern. It's clobbering the meaning of
these variables and making the code hard to read (dateRelativeDay is sometimes
not a date, dateTimeOfDay is either a time or a date).

I would prefer it if you made a new field for these things with a more generic
name, set them regardless of whether you're in a search or not, use those where
you need to, and leave the original fields alone.

For example, create something like results[i].visibleTimestamp which is set to
dateTimeOfDay for normal results, but dateShort for search results.

[hsampson, 2016/02/08 04:40:23]

Done.

+      results[i].dateTimeOfDay = results[i].dateShort;
+      results[i].historySearchTerm = search;

[tsergeant, 2016/02/08 22:59:01]

What happened to historySearchTerm? Was it unused?

[hsampson, 2016/02/09 02:17:51]

Yes it wasn't being used anywhere.

+    }
+  },
+
+  /**
    * Split the newly updated history results into history items sorted via day
    * accessed.
    * @param {!Array<!HistoryEntry>} results The new history results.
+   * @param {string} search The search term used for chrome.send.
    */
-  addNewResults: function(results) {
-    if (results.length == 0)
+  addNewResults: function(results, search) {
+    this.searchTerm = search;
+    this.noResults_();
+
+    if (results.length == 0) {
+      this.loading_ = false;
       return;
+    }
+
+    if (search != '')
+      this.reformatSearchResults_(results, search);
 
     var dateSortedData = [];
     var historyItems = [];
@@ -99,6 +147,8 @@ Polymer({
       this.appendHistoryData_(currentDate, historyItems);
 
     this.lastVisitedTime = historyItems[historyItems.length - 1].time;
+    this.loading_ = false;
+    Polymer.dom.flush();
   },
 
   /**
@@ -132,7 +182,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 {
@@ -154,12 +204,31 @@ Polymer({
     // Requests the next list of results when the scrollbar is near the bottom
     // of the window.
     var scrollOffset = 10;
-    var scrollElem = this.$['infinite-list'];
-
-    if (scrollElem.scrollHeight <=
-        scrollElem.scrollTop + scrollElem.clientHeight + scrollOffset) {
+    var scrollElem = this.$$('#infinite-list');

[tsergeant, 2016/02/04 02:28:49]

infinite-list will always be present, so you can use this.$[] now.

[hsampson, 2016/02/08 04:40:23]

Done.

+    if ((!this.loading_) && (scrollElem.scrollHeight <=
+         scrollElem.scrollTop + scrollElem.clientHeight + scrollOffset)) {

[calamity, 2016/02/05 02:30:10]

nit: less parens.

[hsampson, 2016/02/08 04:40:23]

Done.

       chrome.send('queryHistory',
-          ['', 0, 0, this.lastVisitedTime, RESULTS_PER_PAGE]);
+          [this.searchTerm, 0, 0, this.lastVisitedTime, RESULTS_PER_PAGE]);
     }
+  },
+
+  /**
+   * True if there are results available or the page hasn't finished loading.
+   * @param {number} numberOfResults The length of historyDataByDay_.
+   * @return {boolean} Whether there are results to show.
+   * @private
+   */
+  resultsAvailable_: function(numberOfResults) {

[calamity, 2016/02/05 02:30:10]

Does this run? It needs an underscore?

[hsampson, 2016/02/08 04:40:23]

Yes it runs.

+    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
+   */
+  noResults_: function() {
+    var messageId = this.searchTerm == '' ? 'noResults' : 'noSearchResults';
+    this.noResultsMessage_ = loadTimeData.getString(messageId);
   }
 });