MD History: Implement search functionality.

chrome/browser/resources/md_history/history_item.js

Index: chrome/browser/resources/md_history/history_item.js
diff --git a/chrome/browser/resources/md_history/history_item.js b/chrome/browser/resources/md_history/history_item.js
index 375da18be14d4e25b8095de06ab3cbd7de34549a..742ad1d754688bda6897606a044159ff6300bb38 100644
--- a/chrome/browser/resources/md_history/history_item.js
+++ b/chrome/browser/resources/md_history/history_item.js
@@ -12,14 +12,15 @@ Polymer({
       value: ''
     },
 
-    timeAccessed: {
+    visibleTimestamp: {
       type: String,
       value: ''
     },
 
     websiteTitle: {
       type: String,
-      value: ''
+      value: '',
+      observer: 'setSearchedTextToBold_'
     },
 
     // Domain is the website text shown on the history-item next to the title.
@@ -53,6 +54,13 @@ Polymer({
       value: 0
     },
 
+    // Search term used in the chrome.send to obtain this history-item.
+    searchTerm: {
+      type: String,
+      value: '',
+      observer: 'setSearchedTextToBold_'
+    },
+
     selected: {
       type: Boolean,
       value: false,
@@ -74,6 +82,11 @@ Polymer({
     hasTimeGap: {
       type: Boolean,
       value: false
+    },
+
+    numberOfItems: {
+      type: Number,
+      value: 0
     }
   },
 
@@ -115,7 +128,65 @@ Polymer({
     e.stopPropagation();
   },
 
+  /**
+   * If the results shown are search results set the search term to be bold
+   * where it is displayed in the history-item title.
+   * @private
+   */
+  setSearchedTextToBold_: function() {
+    var i = 0;
+    var title = this.$.title;
+
+    if (this.searchTerm == '' || this.searchTerm == null) {
+      title.textContent = this.websiteTitle;
+      return;
+    }
+
+    var re = new RegExp(this.quoteString_(this.searchTerm), 'gim');
+    var match;
+    title.textContent = '';
+    while (match = re.exec(this.websiteTitle)) {
+      if (match.index > i)
+        title.appendChild(document.createTextNode(
+            this.websiteTitle.slice(i, match.index)));
+      i = re.lastIndex;
+      // Mark the highlighted text in bold.
+      var b = document.createElement('b');
+      b.textContent = this.websiteTitle.substring(match.index, i);
+      title.appendChild(b);
+    }
+    if (i < this.websiteTitle.length)
+      title.appendChild(document.createTextNode(this.websiteTitle.slice(i)));
+  },
+
+  /**
+   * Quote a string so it can be used in a regular expression.
+   * @param {string} searchTerm The source string.
+   * @return {string} The escaped string.
+   * @private
+   */
+  quoteString_: function(searchTerm) {
+    return searchTerm.replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g,
+        '\\$1');
+  },
+
   selectionNotAllowed_: function() {
     return !loadTimeData.getBoolean('allowDeletingHistory');
+  },
+
+  /**
+   * Generates the title for this history card.
+   * @param {number} numberOfItems The number of items in the card.
+   * @param {string} search The search term associated with these results.
+   * @private
+   */
+  listTitle_: function(numberOfItems, historyDate, search) {
+    var resultId = numberOfItems == 1 ? 'searchResult' : 'searchResults';
+
+    if (search)
+      return loadTimeData.getStringF('foundSearchResults', numberOfItems,
+                                     loadTimeData.getString(resultId), search);
+    else
+      return historyDate;
   }
 });