MD History: Implement search functionality.

chrome/browser/resources/md_history/history_card_manager.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-card-manager',
 
   properties: {
     // An array of objects sorted in reverse chronological order.
     // Each object has a date and the history items belonging to that date.
@@ skipping 10 matching lines @@
 
     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_: {
+      type: String,
+      value: ''
+    },
+
+    // Page waits until results have finished loading before displaying message.
+    loading_: {
+      type: Boolean,
+      value: false
     }
   },
 
   /** @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() {
+    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.
    * @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();
     }
   },
 
   /**
+   * 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 = [];
     var currentDate = results[0].dateRelativeDay;
 
     for (var i = 0; i < results.length; i++) {
       if (!currentDate)
         continue;
 
       results[i].selected = false;
       if (results[i].dateRelativeDay != currentDate) {
         this.appendHistoryData_(currentDate, historyItems);
         currentDate = results[i].dateRelativeDay;
         historyItems = [];
       }
       historyItems.push(results[i]);
     }
 
     if (currentDate)
       this.appendHistoryData_(currentDate, historyItems);
 
     this.lastVisitedTime = historyItems[historyItems.length - 1].time;
+    this.loading_ = false;
+    Polymer.dom.flush();
   },
 
   /**
    * Cycle through each entry in historyDataByDay_ and set all items to be
    * unselected.
    */
   unselectAllItems: function(overallItemCount) {
     var historyCardData = this.historyDataByDay_;
 
     for (var i = 0; i < historyCardData.length; i++) {
@@ skipping 13 matching lines @@
   /**
    * Adds the given items into historyDataByDay_. Adds items to the last
    * existing day if the date matches, creates a new element otherwise.
    * @param {string} date The date of the history items.
    * @param {!Array<!HistoryEntry>} historyItems The list of history items for
    * the current date.
    * @private
    */
   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 {
       this.push('historyDataByDay_', {
         date: date,
         historyItems: historyItems
       });
     }
   },
 
   /**
    * 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'];
+    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',
+          [this.searchTerm, 0, 0, this.lastVisitedTime, RESULTS_PER_PAGE]);
+    }
+  },
 
-    if (scrollElem.scrollHeight <=
-        scrollElem.scrollTop + scrollElem.clientHeight + scrollOffset) {
-      chrome.send('queryHistory',
-          ['', 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);
   }
 });