MD History: Implement search functionality.

chrome/browser/resources/md_history/history_item.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-item',
 
   properties: {
     timeAccessed_: {
       type: String,
       value: ''
     },
 
     websiteTitle_: {
       type: String,
-      value: ''
+      value: '',
+      observer: 'setSearchedTextToBold_'
     },
 
     // Domain is the website text shown on the history-item next to the title.
     // Gives the user some idea of which history items are different pages
     // belonging to the same site, and can be used to look for more items
     // from the same site.
     websiteDomain_: {
       type: String,
       value: ''
     },
@@ skipping 13 matching lines @@
       value: false,
       reflectToAttribute: true
     },
 
     // The time in seconds of when the website was accessed.
     timestamp_: {
       type: Number,
       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,
       notify: true
     }
   },
 
   /**
    * When a history-item is selected the toolbar is notified and increases
    * or decreases its count of selected items accordingly.
@@ skipping 23 matching lines @@
     var position = this.$['menu-button'].getBoundingClientRect();
 
     this.fire('toggle-menu', {
       x: position.left,
       y: position.top,
       accessTime: this.timestamp_
     });
 
     // 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() {
+    var i = 0;

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

Pull this.$.title into a local var here.

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

Bump on the comments in this file.

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

Done.

+    if ((this.searchTerm != '') && (this.searchTerm != null)) {

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

nit: less parens.

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

Done.

+      var searchText = new RegExp(this.quoteString_(this.searchTerm), 'gim');

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

nit: TBH, I kinda like just calling this re. searchText can mean too many
things.

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

Done.

+      var match;
+      this.$.title.textContent = '';
+      while (match = searchText.exec(this.websiteTitle_)) {
+        if (match.index > i)

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

nit: This one needs braces since the content is 2 lines long.

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

NA now.

+          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_;

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

Invert the condition above and early return in this case. Do you remember
DeMoivre's theorem? =P

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

No idea what that is :P but done I think.

+    }
+  },
+
+  /**
+   * 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');
   }
 });