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 2497db1bdbde186501d92266724742850b638673..4d386cb91de735a21a33a2201656337e4575072d 100644
--- a/chrome/browser/resources/md_history/history_item.js
+++ b/chrome/browser/resources/md_history/history_item.js
@@ -12,7 +12,8 @@ Polymer({
 
     websiteTitle: {
       type: String,
-      value: ''
+      value: '',
+      observer: 'setSearchedTextToBold_'
     },
 
     // Domain is the website text shown on the history-item next to the title.
@@ -46,6 +47,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,
@@ -89,5 +97,45 @@ Polymer({
     });
     // Stops the 'tap' event from closing the menu when it opens.
     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() {

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

This is generally good. The thing that's a little messy is that you're changing
the contents of a node which is meant to be managed by Polymer.

I would get rid of the {{websiteTitle}} from this line in history_item.html:
<a href="{{websiteUrl_}}" id="title">{{websiteTitle_}}</a>

To make sure that this function is the only one responsible for the contents of
that node.

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

Done.

+    var i = 0;
+    if ((this.searchTerm != '') && (this.searchTerm != null)) {
+      var searchText = new RegExp(this.quoteString_(this.searchTerm), 'gim');
+      var match;
+      this.$['title'].textContent = '';

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

Just use this.$.title

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

Done.

+      while (match = searchText.exec(this.websiteTitle)) {
+        if (match.index > i)
+          this.$['title'].appendChild(document.createTextNode(
+                this.websiteTitle.slice(i, match.index)));
+        i = searchText.lastIndex;
+        // Mark the highlighted text in bold.
+        var b = document.createElement('b');
+        b.textContent = this.websiteTitle.substring(match.index, i);
+        this.$['title'].appendChild(b);
+      }
+      if (i < this.websiteTitle.length)
+        this.$['title'].appendChild(document.createTextNode(
+                this.websiteTitle.slice(i)));
+    } else {
+      this.$['title'].textContent = this.websiteTitle;
+    }
+  },
+
+  /**
+   * Quote a string so it can be used in a regular expression.
+   * @param {string} str The source string.
+   * @return {string} The escaped string.
+   * @private
+   */
+  quoteString_: function(searchTerm) {
+    return searchTerm.replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g,
+        '\\$1');
   }
 });