MD History: Implement search functionality.

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: {
       type: Array,
       value: function() { return []; }
     },
 
     // The time in seconds of the last history item in historyData.
     lastVisitedTime: {
       type: Number,
       value: 0
     },
 
     menuOpen: {
       type: Boolean,
       value: false,
       reflectToAttribute: true
     },
 
+    searchTerm: {
+      type: String,
+      value: ''
+    },
+
     menuIdentifier: {
       type: Number,
       value: 0
+    },
+
+    // Page waits until results have finished loading before displaying message.
+    loading_: {
+      type: Boolean,
+      value: true
     }
   },
 
   /** @const @private */
   X_OFFSET_: 30,
 
   listeners: {
     'tap': 'closeMenu',
     'toggle-menu': 'toggleMenu_'
   },
 
   /**
    * Closes the overflow menu.
    */
   closeMenu: function() {
     this.menuOpen = false;
   },
 
   /**
+   * Clear the page completely so the page can display new results (search).
+   */
+  resetHistoryResults: function() {
+    // TODO(hsampson): make it so the old results aren't replaced immediately,
+    // only replaced when new results come in.
+    this.loading_ = true;
+    this.splice('historyData', 0, this.historyData.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.
    * @private
    */
   toggleMenu_: function(e) {
     var menu = this.$['overflow-menu'];
 
     // Menu closes if the same button is clicked.
     if (this.menuOpen && this.menuIdentifier == e.detail.accessTime) {
       this.closeMenu();
     } else {
       this.menuOpen = true;
       this.menuIdentifier = e.detail.accessTime;
 
       cr.ui.positionPopupAtPoint(e.detail.x + this.X_OFFSET_, e.detail.y, menu,
           cr.ui.AnchorType.BEFORE);
 
       menu.focus();
     }
   },
 
   /**
    * Adds the newly updated history results into historyData. Adds new fields
    * for each result.
    * @param {!Array<!HistoryEntry>} historyResults The new history results.
    */
-  addNewResults: function(historyResults) {
-    if (historyResults.length == 0)
+  addNewResults: function(historyResults, search) {
+    this.searchTerm = search;
+
+    if (historyResults.length == 0) {
+      this.loading_ = false;
       return;
+    }
 
     // Creates a copy of historyResults to prevent accidentally modifying this
     // field.
     var results = historyResults.slice();
 
     var currentDate = results[0].dateRelativeDay;
 
     // Resets the last history item for the currentDate if new history results
     // for currentDate is loaded.
     var lastHistoryItem = this.historyData[this.historyData.length - 1];
     if (lastHistoryItem && lastHistoryItem.isLastItem &&
         lastHistoryItem.dateRelativeDay == currentDate) {
       this.set('historyData.' + parseInt(this.historyData.length - 1) +
           '.isLastItem', false);
     }
 
     for (var i = 0; i < results.length; i++) {
       // Sets the default values for these fields to prevent undefined types.
       results[i].selected = false;
       results[i].isLastItem = false;
       results[i].isFirstItem = false;
+      results[i].visibleTimestamp =
+          search == '' ? results[i].dateTimeOfDay : results[i].dateShort;
 
       if (results[i].dateRelativeDay != currentDate) {
         results[i - 1].isLastItem = true;
         results[i].isFirstItem = true;
         currentDate = results[i].dateRelativeDay;
       }
-      results[i].needsTimeGap = this.needsTimeGap_(results, i);
+      if (i != 0) {
+        results[i - 1].needsTimeGap = this.needsTimeGap_(results, i - 1);
+      }
     }
     results[i - 1].isLastItem = true;
+    results[i - 1].needsTimeGap = false;
 
     // If it's the first time we get data, the first item will always be the
     // first card.
     if (this.historyData.length == 0)
       results[0].isFirstItem = true;
 
     // Adds results to the beginning of the historyData array.
     results.unshift('historyData');
     this.push.apply(this, results);
 
     this.lastVisitedTime = this.historyData[this.historyData.length - 1].time;
+    this.loading_ = false;
   },
 
   /**
    * Cycle through each entry in historyData and set all items to be
    * unselected.
    * @param {number} overallItemCount The number of checkboxes selected.
    */
   unselectAllItems: function(overallItemCount) {
     for (var i = 0; i < this.historyData.length; i++) {
       if (this.historyData[i].selected) {
@@ skipping 61 matching lines @@
         toBeRemoved.push({
           url: this.historyData[i].url,
           timestamps: this.historyData[i].allTimestamps
         });
 
         count--;
         if (count == 0)
           return toBeRemoved;
       }
     }
+    return toBeRemoved;
   },
 
   /**
    * Called when the card manager is scrolled.
    * @private
    */
   scrollHandler_: function() {
     // Close overflow menu on scroll.
     this.closeMenu();
 
     // 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 <=
+    if (!this.loading_ && scrollElem.scrollHeight <=
         scrollElem.scrollTop + scrollElem.clientHeight + scrollOffset) {
       chrome.send('queryHistory',
-          ['', 0, 0, this.lastVisitedTime, RESULTS_PER_PAGE]);
+          [this.searchTerm, 0, 0, this.lastVisitedTime, RESULTS_PER_PAGE]);
     }
   },
 
   /**
    * Check whether the time difference between the given history item and the
    * next one is large enough for a spacer to be required.
    * @param {Array<HistoryEntry>} results A list of history results.
    * @param {number} index The index number of the first item being compared.
    * @return {boolean} Whether or not time gap separator is required.
    * @private
    */
   needsTimeGap_: function(results, index) {
     var currentItem = results[index];
     var nextItem = results[index + 1];
 
-    if (index + 1 >= results.length)
-      return false;
+    if (this.searchTerm)
+      return currentItem.visibleTimestamp != nextItem.visibleTimestamp;
+    else
+      return currentItem.time - nextItem.time > BROWSING_GAP_TIME &&
+          currentItem.dateRelativeDay == nextItem.dateRelativeDay;
+  },
 
-    return currentItem.time - nextItem.time > BROWSING_GAP_TIME &&
-      currentItem.dateRelativeDay == nextItem.dateRelativeDay;
+  /**
+   * True if there are no results available and the page has finished loading.
+   * @param {number} numberOfResults The length of historyDataByDay_.
+   * @param {boolean} loading Whether the page has finished loading results.
+   * @return {boolean} Whether there are results to show.
+   * @private
+   */
+  noResultsAvailable_: function(numberOfResults, loading) {
+    return numberOfResults == 0 && !loading;
+  },
+
+  /**
+   * Return the message to be displayed if there are no results based on whether
+   * the empty results were for a search or normal history results.
+   * @param {string} search The search term for these results.
+   * @return {string} The displayed message.
+   * @private
+   */
+  noResultsMessage_: function(search) {
+    var messageId = search != '' ? 'noSearchResults' : 'noResults';
+    return loadTimeData.getString(messageId);
   }
 });