Bug 1335905 - Fixed Regexp Special characters search
MozReview-Commit-ID: 9D3TUa7nGhv
--- 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;
+}