--- a/browser/components/preferences/in-content/findInPage.js
+++ b/browser/components/preferences/in-content/findInPage.js
@@ -89,16 +89,38 @@ var gSearchResultsPane = {
       } else {
         all = all.concat(this.textNodeDescendants(node));
       }
     }
     return all;
   },
 
   /**
+   * Finds all the special characters of the Regular Expression characters
+   * and escapes those characters and returns as a string
+   * example 1: escapeRegexpSpecialCharacters("$40";
+   * returns 1: '\\$40'
+   * example 2: escapeRegexpSpecialCharacters("*RRRING* Hello?")
+   * returns 2: '\\*RRRING\\* Hello\\?'
+   * Source: http://phpjs.org/functions/preg_quote:491
+   * 
+   * @param String str
+   *    String that may contain special RegExp characters like 
+   *    . \ + * ? [ ^ ] $ ( ) { } = ! < > | : -
+   * @param String delimiter
+   *     Additional delimiter to use escape the special characters
+   * @returns String
+   *    If special characters are found then a new string with escaped characters is returned
+   */
+  escapeRegexpSpecialCharacters (str, delimiter) {
+    return (str + '')
+      .replace(new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\' + (delimiter || '') + '-]', 'g'), '\\$&')
+  },
+
+  /**
    * This function is used to find words contained within the text nodes.
    * We pass in the textNodes because they contain the text to be highlighted.
    * We pass in the nodeSizes to tell exactly where highlighting need be done.
    * When creating the range for highlighting, if the nodes are section is split
    * by an access key, it is important to have the size of each of the nodes summed.
    * @param Array textNodes
    *    List of DOM elements
    * @param Array nodeSizes
@@ -116,23 +138,27 @@ var gSearchResultsPane = {
    *    nodeSizes = "This is an example"
    *    This is used when executing the regular expression
    * @param String searchPhrase
    *    word or words to search for
    * @returns boolean
    *      Returns true when atleast one instance of search phrase is found, otherwise false
    */
   highlightMatches(textNodes, nodeSizes, textSearch, searchPhrase) {
-    let regExp = new RegExp(searchPhrase, "gi");
+    let regExpPhrase = this.escapeRegexpSpecialCharacters(searchPhrase);
+    let regExp = new RegExp(regExpPhrase, "gi");
     let result, indices = [];
 
     while ((result = regExp.exec(textSearch))) {
       indices.push(result.index);
     }
 
+    if(indices.length > 0){
+      let xxx = 0;
+    }
     // Looping through each spot the searchPhrase is found in the concatenated string
     for (let startValue of indices) {
       let endValue = startValue + searchPhrase.length;
       let startNode = null;
       let endNode = null;
       let nodeStartIndex = null;
 
       // Determining the start and end node to highlight from

--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -563,8 +563,67 @@ description > html|a {
   }
   .iOSLink {
     background-image: url("chrome://browser/skin/fxa/ios@2x.png");
   }
   .fxaFirefoxLogo {
     list-style-image: url(chrome://browser/skin/fxa/logo@2x.png);
   }
 }
+
+/* Container for the elements that make up the search bubble. */
+.search-bubble {
+  left: -30px;
+  position: absolute;
+  top: -1000px;  /* Minor hack: position off-screen by default. */
+  /* Create a z-context for search-bubble-innards, its after and before. */
+  z-index: 1;
+}
+
+/* Contains the text content of the bubble.  */
+.search-bubble-innards {
+  background: -webkit-linear-gradient(rgba(255, 248, 172, 0.9),
+                                      rgba(255, 243, 128, 0.9));
+  border-radius: 2px;
+  padding: 4px 10px;
+  text-align: center;
+  width: 100px;
+}
+
+/* Provides the border around the bubble (has to be behind ::after). */
+.search-bubble-innards::before {
+  border: 1px solid rgb(220, 198, 72);
+  border-radius: 2px;
+  bottom: -1px;
+  content: '';
+  left: -1px;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+  z-index: -2;
+}
+
+/* Provides the arrow which points at the anchor element. */
+.search-bubble-innards::after {
+  -webkit-transform: rotate(45deg);
+  background:
+      -webkit-linear-gradient(-45deg, rgb(251, 255, 181),
+                                      rgb(255, 248, 172) 50%,
+                                      rgba(255, 248, 172, 0));
+  border: 1px solid rgb(220, 198, 72);
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+  content: '';
+  height: 12px;
+  left: 53px;
+  position: absolute;
+  top: -7px;
+  width: 12px;
+  z-index: -1;
+}
+
+/* Turns the arrow direction downwards, when the bubble is placed above the
+ * anchor element */
+.search-bubble-innards.above::after {
+  -webkit-transform: rotate(-135deg);
+  bottom: -7px;
+  top: auto;
+}