Bug 1335905 - Fixed most of Jareds corrections r?jaws r?mconley draft
authorFirefox <manotejmeka@gmail.com>
Fri, 03 Mar 2017 15:26:24 -0500
changeset 493305 315a857cdc56e01341133373eb4f70fcc74019b8
parent 493036 e6607ac7a2a48975dd4ca4a68eb3c769d32257b5
child 547836 55e2ca5c195bdec6fcd4f73e9cb5d014a767ff5e
push id47732
push userbmo:manotejmeka@gmail.com
push dateFri, 03 Mar 2017 20:31:32 +0000
reviewersjaws, mconley
bugs1335905
milestone54.0a1
Bug 1335905 - Fixed most of Jareds corrections r?jaws r?mconley MozReview-Commit-ID: 3I9qQkgCpAL
browser/app/profile/firefox.js
browser/components/preferences/in-content/SearchEach.js
browser/components/preferences/in-content/findInPage.js
browser/components/preferences/in-content/jar.mn
browser/components/preferences/in-content/preferences.js
browser/components/preferences/in-content/preferences.xul
browser/components/preferences/in-content/searchResults.xul
browser/components/preferences/in-content/tests/browser_search_within_preferences.js
browser/locales/en-US/chrome/browser/preferences/preferences.dtd
browser/locales/en-US/chrome/browser/preferences/preferences.properties
browser/locales/en-US/chrome/browser/preferences/searchResults.dtd
browser/locales/en-US/chrome/browser/preferences/searchResults.properties
browser/locales/jar.mn
browser/themes/shared/incontentprefs/icons.svg
browser/themes/shared/incontentprefs/preferences.inc.css
browser/tools/mozscreenshots/mozscreenshots/extension/configurations/Preferences.jsm
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -668,16 +668,19 @@ pref("plugin.state.flash", 2);
 pref("plugin.state.java", 1);
 
 #ifdef XP_WIN
 pref("browser.preferences.instantApply", false);
 #else
 pref("browser.preferences.instantApply", true);
 #endif
 
+// Toggling Search bar on and off in about:preferences
+pref("browser.preferences.search", false);
+
 pref("browser.download.show_plugins_in_list", true);
 pref("browser.download.hide_plugins_without_extensions", true);
 
 // Backspace and Shift+Backspace behavior
 // 0 goes Back/Forward
 // 1 act like PgUp/PgDown
 // 2 and other values, nothing
 #ifdef UNIX_BUT_NOT_MAC
@@ -1592,10 +1595,8 @@ pref("browser.formautofill.experimental"
 pref("browser.formautofill.enabled", false);
 pref("browser.formautofill.loglevel", "Warn");
 
 // Enable safebrowsing v4 tables (suffixed by "-proto") update.
 #ifdef NIGHTLY_BUILD
 pref("urlclassifier.malwareTable", "goog-malware-shavar,goog-unwanted-shavar,goog-malware-proto,goog-unwanted-proto,test-malware-simple,test-unwanted-simple");
 pref("urlclassifier.phishTable", "goog-phish-shavar,goog-phish-proto,test-phish-simple");
 #endif
-
-pref("browser.preference.search",false);
rename from browser/components/preferences/in-content/SearchEach.js
rename to browser/components/preferences/in-content/findInPage.js
--- a/browser/components/preferences/in-content/SearchEach.js
+++ b/browser/components/preferences/in-content/findInPage.js
@@ -1,42 +1,39 @@
-// Search Object to load the 6th pin properly
-var gSearchResults = {
-  init() {}
-}
-
-// Obtaining the search field
-let mainSearchElement = document.getElementById("searchTextIMF");
-
-// Boolean flag to init JavaScript bindings
-let firstTimeSearch = true;
-
-document.getElementById("searchTextIMF").addEventListener("command", searchFunc);
-
-// Obtaining the Search Results tag
-const searchResultsCategory = document.getElementById("categories").firstElementChild;
+var gFindSelection = null;
+// Search Results Pane
+var gSearchResultsCategory = null;
+// Search input
+var gMainSearchElement = null;
 
 /**
- * Toggling Seachbar on and off according to browser.preference.search
+ * Toggling Seachbar on and off according to browser.preferences.search
  */
-function hideShowSearch() {
-  let mainSearchEnable = Services.prefs.getBoolPref("browser.preference.search");
+function showSearchIfEnabled() {
+  let mainSearchEnable = Services.prefs.getBoolPref("browser.preferences.search");
   if (mainSearchEnable) {
-    mainSearchElement.hidden = false;
-    // setAttribute("hidden", "false");
-  } else {
-    mainSearchElement.hidden = true;
-    // setAttribute("hidden", "true");
+    gMainSearchElement.hidden = false;
+  }
+  else {
+    gMainSearchElement.hidden = true;
   }
 }
+// paneSearchResults needs init function to initialize the object
+var gSearchResultsPane = {
+  init() {
+    let controller = getSelectionController();
+    gFindSelection = controller.getSelection(Ci.nsISelectionController.SELECTION_FIND);
 
-// Clearing the search filed before enabling
-mainSearchElement.innerHTML = "";
-mainSearchElement.value = "";
-hideShowSearch();
+    document.getElementById("searchInput").addEventListener("command", searchFunction);
+    gSearchResultsCategory = document.getElementById("category-search-results");
+    // Obtaining the search Input
+    gMainSearchElement = document.getElementById("searchInput");
+    showSearchIfEnabled();
+  }
+}
 
 /**
  * Check that the passed string matches the filter arguments.
  *
  * @param String str
  *    to search for filter words in.
  * @param String filter
  *    is a string containing all of the words to filter on.
@@ -50,154 +47,126 @@ function stringMatchesFilters(str, filte
 
   let searchStr = str.toLowerCase();
   let filterStrings = filter.toLowerCase().split(/\s+/);
   return !filterStrings.some(function(f) {
     return searchStr.indexOf(f) == -1;
   });
 }
 
+let categoriesInitialized = false;
+
 /**
  * When search bar is clicked initializes all the JS bindings
  *
  * @returns null
  */
-function searchOnClick() {
+function initializeCategories() {
   //  Initializing all the JS for all the tabs
-  if (firstTimeSearch) {
-    firstTimeSearch = false;
-    gCategoryInits.forEach( function(eachTab) {
-      if (!eachTab.inited) {
-        eachTab.init();
+  if (!categoriesInitialized) {
+    categoriesInitialized = true;
+    for (let eachTab of gCategoryInits) {
+      // eachTab [name, Object]
+      if (!eachTab[1].inited) {
+        eachTab[1].init();
       }
-    });
+    }
   }
 }
 
 /**
  * Finding text nodes from the nodes
- * Source - http:// stackoverflow.com/questions/10730309/find-all-text-nodes-in-html-page
+ * Source - http://stackoverflow.com/questions/10730309/find-all-text-nodes-in-html-page
  *
  * @param Node nodeObject
  *    Html element
  * @returns array of text nodes
  */
-function textNodesUnder(node) {
+function textNodeDescendants(node) {
   let all = [];
   for (node = node.firstChild; node; node = node.nextSibling) {
-    if (node.nodeType === node.TEXT_NODE) all.push(node);
-    else all = all.concat(textNodesUnder(node));
+    if (node.nodeType === node.TEXT_NODE) { all.push(node); }
+    else { all = all.concat(textNodeDescendants(node)); }
   }
   return all;
 }
 
 /**
- * Finding words in the text node
- *
- * @param Node textNode
- *    Html element
- * @param String word
- *    work to search for
- * @param Object findSelection
- *    SelectionController
- * @returns boolean
- *      Returns true when atleast one instance of word is found, false otherwise
- */
-function searchWord(textNode, word, findSelection) {
-  let textSearch = textNode.textContent;
-  let regExp = new RegExp(word, "gi");
-  let result, indices = [];
-
-  while ((result = regExp.exec(textSearch))) {
-    indices.push(result.index);
-  }
-
-  //  Add each found word to range
-  for (let i = 0; i < indices.length; i++) {
-    let range = document.createRange();
-    range.setStart(textNode, indices[i]);
-    range.setEnd(textNode, (indices[i] + word.length) );
-    findSelection.addRange(range); //  Add each range to be highlighted
-  }
-  return indices.length > 0;
-}
-
-/**
  * Finding words in the text nodes
  * Cases where the word is split up due to access keys
  * @param Array textNodes
  *    List of Html elements
  * @param Array nodeSizes
  *    Running size of text nodes
  * @param String textSearch
  *    Concatination of textNodes's text content
- * @param String word
- *    Word to search for
- * @param Object findSelection
- *    SelectionController
+ * @param String searchPhrase
+ *    word or words to search for
  * @returns boolean
- *      Returns true when atleast one instance of word is found, otherwise false
+ *      Returns true when atleast one instance of search phrase is found, otherwise false
  */
-function multiSearch(textNodes, nodeSizes, textSearch, word, findSelection) {
-  let regExp = new RegExp(word, "gi");
+function multiSearch(textNodes, nodeSizes, textSearch, searchPhrase) {
+  let regExp = new RegExp(searchPhrase, "gi");
   let result, indices = [];
 
   while ((result = regExp.exec(textSearch))) {
     indices.push(result.index);
   }
 
-  // Looping through each spot the word is found in the concatinated string
-  indices.forEach(function(startValue, startIndex) {
-    let endValue = startValue + word.length;
+  // Looping through each spot the searchPhrase is found in the concatinated 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
     nodeSizes.forEach(function(lengthNodes, index) {
       // Determining the start node
       if (!startNode && lengthNodes >= startValue) {
         startNode = textNodes[index];
         nodeStartIndex = index;
+        // Calculating the offset when found query is not in the first node
         if (index > 0 ) {
           startValue -= nodeSizes[index - 1];
         }
       }
       // Determining the end node
       if (!endNode && lengthNodes >= endValue) {
         endNode = textNodes[index];
+        /** Calculating the offset when endNode is different from startNode
+        *   or when endNode is not the first node
+        */
         if (index != nodeStartIndex || index > 0 ) {
           endValue -= nodeSizes[index - 1];
         }
       }
     });
-    // Selection the section to higlight
     let range = document.createRange();
     range.setStart(startNode, startValue);
     range.setEnd(endNode, endValue);
-    findSelection.addRange(range);
-  });
+    gFindSelection.addRange(range);
+  }
 
   return indices.length > 0;
 }
 
 /**
  * Finding if search phrase in defined node property (textContet, value, label)
  *
  * @param Node nodePropertyObject
  *    specific html element property
  * @param String searchPhrase
  *    word or words to search for
  * @returns boolean
  *      Returns true when found in textContent, false otherwise
  */
 function searchNodeProperty(nodePropertyObject, searchPhrase) {
-  if (typeof nodePropertyObject == "string" && nodePropertyObject != ""
-  && stringMatchesFilters(nodePropertyObject, searchPhrase)) {
-    return true;
+  if (typeof nodePropertyObject == "string" && nodePropertyObject != "") {
+    return stringMatchesFilters(nodePropertyObject, searchPhrase);
   }
   return false;
 }
 
 /**
  * Getter for Selection Controller
  *
  * @returns controller
@@ -211,162 +180,126 @@ function getSelectionController() {
   let controller = docShell.QueryInterface(Ci.nsIInterfaceRequestor)
                .getInterface(Ci.nsISelectionDisplay)
                .QueryInterface(Ci.nsISelectionController);
 
   return controller;
 }
 
 /**
- * SHows or hides content according to search input
+ * Shows or hides content according to search input
  *
  * @param String event
- *    to search for filter words in
+ *    to search for filted query in
  */
-function searchFunc(event) {
-  let words = event.target.value.trim();
+function searchFunction(event) {
+  let query = event.target.value.trim();
 
-  // Controller
-  let controller = getSelectionController();
-  let findSelection = controller.getSelection(Ci.nsISelectionController.SELECTION_FIND);
-  findSelection.removeAllRanges();
+  gFindSelection.removeAllRanges();
 
-  // Init for Search Results tab
   let srHeader = document.getElementById("header-searchResults");
-  let noResults = document.getElementById("noResultsFound");
-  let strings = document.getElementById("searchResultBundle");
 
-  if (words) {
-    console.time("SearchTime");
-
+  if (query) {
     // Showing the Search Results Tag
     gotoPref("paneSearchResults");
-    srHeader.hidden = false;
-    // setAttribute("hidden", "false");
-    searchResultsCategory.hidden = false;
-    // setAttribute("hidden", "false");
+    // srHeader.hidden = false;
+    gSearchResultsCategory.hidden = false;
 
-    let searchFound = false;
+    let resultsFound = false;
 
     // Building the range for highlighted areas
     let rootPreferences = document.getElementById("mainPrefPane")
-    let rootPreferencesChildren = rootPreferences.childNodes;
+    let rootPreferencesChildren = rootPreferences.children;
 
     // Showing all the children to bind JS, Access Keys, etc
     for (let i = 0; i < rootPreferences.childElementCount; i++) {
       rootPreferencesChildren[i].hidden = false;
-      // setAttribute("hidden", "false");
     }
 
-    // Showing or Hiding specific section depending on if words are found
+    // Showing or Hiding specific section depending on if words in query are found
     for (let i = 0; i < rootPreferences.childElementCount; i++) {
-      if (nodeRecursion(rootPreferencesChildren[i], words, findSelection)) {
+      if (rootPreferencesChildren[i].className != "header" &&
+      rootPreferencesChildren[i].className != "no-results-message" &&
+      searchWithinNode(rootPreferencesChildren[i], query)) {
         rootPreferencesChildren[i].hidden = false;
-        // setAttribute("hidden", "false");
-        searchFound = true;
-      } else {
+        resultsFound = true;
+      }
+      else {
         rootPreferencesChildren[i].hidden = true;
-        // setAttribute("hidden", "true");
       }
     }
+    // It hides Search Results header so turning it on
     srHeader.hidden = false;
-    // setAttribute("hidden", "false");
 
-    if (!searchFound) {
-      noResults.hidden = false;
-      // setAttribute("hidden", "false");
-      for (let i = 0; i < noResults.childNodes.length; i++) {
-        if (i == 0) {
-            noResults.childNodes[0].textContent = strings.getFormattedString("sorryMessage", [words]);
-        }
-        noResults.childNodes[i].hidden = false;
-        // setAttribute("hidden", "false");
+    if (!resultsFound) {
+      for (let element of document.querySelectorAll(".no-results-message")) {
+        element.hidden = false;
       }
+      let strings = document.getElementById("searchResultBundle");
+      document.getElementById("sorry-message").textContent = strings.getFormattedString("sorryMessage", [query]);
     }
-    console.timeEnd("SearchTime");
-  } else {
-    searchResultsCategory.hidden = true;
-    // setAttribute("hidden", "true");
-
-    srHeader.hidden = true;
-    // setAttribute("hidden", "true");
-    noResults.hidden = true;
-    // setAttribute("hidden", "true");
-    // Hiding the child nodes so they will not be searched
-    for (let i = 0; i < noResults.childNodes.length; i++) {
-      noResults.childNodes[i].hidden = true;
-      // setAttribute("hidden", "true");
-    }
-
+  }
+  else {
+    gSearchResultsCategory.hidden = true;
+    document.getElementById("sorry-message").textContent = "";
     // Going back to General when cleared
     gotoPref("paneGeneral");
   }
-
 }
 
 /**
  * Finding leaf nodes and checking their content for words to search
  *
  * @param Node nodeObject
  *    Html element
  * @param String searchPhrase
- *    The list of words to search for
- * @param Object findSelection
- *    SelectionController
  * @returns boolean
  *      Returns true when found in atleast one childNode, false otherwise
  */
-function nodeRecursion(nodeObject, searchPhrase, findSelection) {
+function searchWithinNode(nodeObject, searchPhrase) {
   let foundIn = false;
   if (nodeObject.childElementCount == 0) {
     let leafTextNodes, otherTextNodes = [];
-    //  List of words to search on
-    let listOfWords = searchPhrase.trim().split();
 
     if (nodeObject) {
-      leafTextNodes = textNodesUnder(nodeObject);
+      leafTextNodes = textNodeDescendants(nodeObject);
     }
     if (nodeObject.boxObject) {
-      otherTextNodes = textNodesUnder(nodeObject.boxObject);
+      otherTextNodes = textNodeDescendants(nodeObject.boxObject);
     }
-
-     //  Searching in the Text Nodes
-    leafTextNodes.forEach(function(node) {
-      listOfWords.forEach(function(word) {
-        let boolAns = searchWord(node, word, findSelection);
-        foundIn = foundIn || boolAns;
-      });
-    });
+    //  Searching in the Text Nodes
+    for (let node of leafTextNodes) {
+      let boolAns = multiSearch([node], [node.length], node.textContent, searchPhrase);
+      foundIn = foundIn || boolAns;
+    }
 
     //  Collecting data from boxObject
     let nodeSizes = [];
     let allNodeText = "";
     let runningSize = 0;
 
-    otherTextNodes.forEach(function(node) {
+    for (let node of otherTextNodes) {
       runningSize += node.textContent.length;
       allNodeText += node.textContent;
       nodeSizes.push(runningSize);
-    });
+    }
 
-    listOfWords.forEach(function(word) {
-      // Access key are presented
-      let splitAns = multiSearch(otherTextNodes, nodeSizes, allNodeText, word, findSelection);
+    // Access key are presented
+    let splitAns = multiSearch(otherTextNodes, nodeSizes, allNodeText, searchPhrase);
 
-      //  Searching in the buttons label property
-      let buttonAns = searchNodeProperty(nodeObject["label"], word);
+    //  Searching in the buttons label property
+    let buttonAns = searchNodeProperty(nodeObject.getAttribute("label"), searchPhrase);
 
-      //  Label tag that does not have textContent but text is in Value attr
-      let labelAns = searchNodeProperty(nodeObject["value"], word);
+    //  Label tag that does not have textContent but text is in Value attr
+    let labelAns = searchNodeProperty(nodeObject.value, searchPhrase);
 
-      foundIn = foundIn || splitAns || buttonAns || labelAns;
-    });
+    foundIn = foundIn || splitAns || buttonAns || labelAns;
   }
 
   for (let i = 0; i < nodeObject.childNodes.length; i++) {
     // Search only if child node is not hidden
     if (!nodeObject.childNodes[i].hidden) {
-      let boolAns = nodeRecursion(nodeObject.childNodes[i], searchPhrase, findSelection);
+      let boolAns = searchWithinNode(nodeObject.childNodes[i], searchPhrase);
       foundIn = foundIn || boolAns;
     }
   }
   return foundIn;
 }
--- a/browser/components/preferences/in-content/jar.mn
+++ b/browser/components/preferences/in-content/jar.mn
@@ -11,9 +11,9 @@ browser.jar:
    content/browser/preferences/in-content/privacy.js
    content/browser/preferences/in-content/containers.js
    content/browser/preferences/in-content/advanced.js
    content/browser/preferences/in-content/applications.js
    content/browser/preferences/in-content/content.js
    content/browser/preferences/in-content/sync.js
    content/browser/preferences/in-content/security.js
    content/browser/preferences/in-content/search.js
-   content/browser/preferences/in-content/SearchEach.js
+   content/browser/preferences/in-content/findInPage.js
--- a/browser/components/preferences/in-content/preferences.js
+++ b/browser/components/preferences/in-content/preferences.js
@@ -54,25 +54,26 @@ addEventListener("DOMContentLoaded", fun
   init_all();
 });
 
 function init_all() {
   document.documentElement.instantApply = true;
 
   gSubDialog.init();
   register_module("paneGeneral", gMainPane);
-  register_module("paneSearchResults", gSearchResults);
+  register_module("paneSearchResults", gSearchResultsPane);
   register_module("paneSearch", gSearchPane);
   register_module("panePrivacy", gPrivacyPane);
   register_module("paneContainers", gContainersPane);
   register_module("paneAdvanced", gAdvancedPane);
   register_module("paneApplications", gApplicationsPane);
   register_module("paneContent", gContentPane);
   register_module("paneSync", gSyncPane);
   register_module("paneSecurity", gSecurityPane);
+  gSearchResultsPane.init();
 
   let categories = document.getElementById("categories");
   categories.addEventListener("select", event => gotoPref(event.target.value));
 
   document.documentElement.addEventListener("keydown", function(event) {
     if (event.keyCode == KeyEvent.DOM_VK_TAB) {
       categories.setAttribute("keyboard-navigation", "true");
     }
--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -20,17 +20,16 @@
 <!ENTITY % globalPreferencesDTD SYSTEM "chrome://global/locale/preferences.dtd">
 <!ENTITY % preferencesDTD SYSTEM
   "chrome://browser/locale/preferences/preferences.dtd">
 <!ENTITY % privacyDTD SYSTEM "chrome://browser/locale/preferences/privacy.dtd">
 <!ENTITY % tabsDTD SYSTEM "chrome://browser/locale/preferences/tabs.dtd">
 <!ENTITY % searchDTD SYSTEM "chrome://browser/locale/preferences/search.dtd">
 <!ENTITY % syncBrandDTD SYSTEM "chrome://browser/locale/syncBrand.dtd">
 <!ENTITY % syncDTD SYSTEM "chrome://browser/locale/preferences/sync.dtd">
-<!ENTITY % searchResultsDTD SYSTEM "chrome://browser/locale/preferences/searchResults.dtd">
 <!ENTITY % securityDTD SYSTEM
   "chrome://browser/locale/preferences/security.dtd">
 <!ENTITY % containersDTD SYSTEM
   "chrome://browser/locale/preferences/containers.dtd">
 <!ENTITY % sanitizeDTD SYSTEM "chrome://browser/locale/sanitize.dtd">
 <!ENTITY % mainDTD SYSTEM "chrome://browser/locale/preferences/main.dtd">
 <!ENTITY % aboutHomeDTD SYSTEM "chrome://browser/locale/aboutHome.dtd">
 <!ENTITY % contentDTD SYSTEM "chrome://browser/locale/preferences/content.dtd">
@@ -49,17 +48,16 @@
 %securityDTD;
 %containersDTD;
 %sanitizeDTD;
 %mainDTD;
 %aboutHomeDTD;
 %contentDTD;
 %applicationsDTD;
 %advancedDTD;
-%searchResultsDTD;
 ]>
 
 #ifdef XP_WIN
 #define USE_WIN_TITLE_STYLE
 #endif
 
 <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       xmlns:html="http://www.w3.org/1999/xhtml"
@@ -70,19 +68,19 @@
       title="&prefWindow.title;">
 #endif
 
   <html:link rel="shortcut icon"
               href="chrome://browser/skin/preferences/in-content/favicon.ico"/>
 
   <script type="application/javascript"
           src="chrome://browser/content/utilityOverlay.js"/>
+  <script src="chrome://browser/content/preferences/in-content/findInPage.js"/>
   <script type="application/javascript"
           src="chrome://browser/content/preferences/in-content/preferences.js"/>
-
   <script src="chrome://browser/content/preferences/in-content/subdialogs.js"/>
 
   <stringbundle id="bundleBrand"
                 src="chrome://branding/locale/brand.properties"/>
   <stringbundle id="bundlePreferences"
                 src="chrome://browser/locale/preferences/preferences.properties"/>
 
   <stringbundleset id="appManagerBundleset">
@@ -197,18 +195,18 @@
       <!-- Disable the findbar because it doesn't work properly.
            Remove this keyset once bug 1094240 ("disablefastfind" attribute
            broken in e10s mode) is fixed. -->
       <key key="&focusSearch1.key;" modifiers="accel" id="focusSearch1" oncommand=";"/>
     </keyset>
 
 
     <vbox class="main-content" flex="1">
-      <div align="right">  
-        <textbox type="search" name="q" value="" id="searchTextIMF" placeholder="Search" oncommand=";" hidden="true" onclick="searchOnClick()"/>
+      <div align="right">
+        <textbox type="search" id="searchInput" placeholder="&searchInput.label;" oncommand=";" hidden="true" onfocus="initializeCategories()"/>
       </div>
       <prefpane id="mainPrefPane">
 #include searchResults.xul
 #include main.xul
 #include search.xul
 #include privacy.xul
 #include containers.xul
 #include advanced.xul
@@ -234,13 +232,9 @@
         </caption>
         <browser id="dialogFrame"
                  name="dialogFrame"
                  autoscroll="false"
                  disablehistory="true"/>
       </groupbox>
     </vbox>
   </stack>
-
-    <script src="chrome://browser/content/preferences/in-content/SearchEach.js"/>
-
 </page>
-
--- a/browser/components/preferences/in-content/searchResults.xul
+++ b/browser/components/preferences/in-content/searchResults.xul
@@ -1,15 +1,15 @@
-<stringbundle id="searchResultBundle" src="chrome://browser/locale/preferences/searchResults.properties"/>
+<stringbundle id="searchResultBundle" src="chrome://browser/locale/preferences/preferences.properties"/>
 
 
 <hbox id="header-searchResults"
       class="header"
       hidden="true"
       data-category="paneSearchResults">
   <label class="header-name" flex="1">&paneSearchResults.title;</label>
   <html:a class="help-button" target="_blank" aria-label="&helpButton.label;"></html:a>
 </hbox>
 
-<groupbox id="noResultsFound" align="start" data-category="paneSearchResults" hidden="true">
-  <label hidden="true"></label>
-  <label hidden="true">&needHelp.label;<a href="https://support.mozilla.org/t5/Mozilla-Support-English/ct-p/Mozilla-EN" class="text-link">&supportPage.label;</a></label>
+<groupbox class="no-results-message" align="start" data-category="paneSearchResults" hidden="true">
+  <label class="no-results-message" id="sorry-message" hidden="true"></label>
+  <label class="no-results-message" hidden="true">&needHelp.label;<a href="https://support.mozilla.org/t5/Mozilla-Support-English/ct-p/Mozilla-EN" class="text-link">&supportPage.label;</a></label>
 </groupbox>
--- a/browser/components/preferences/in-content/tests/browser_search_within_preferences.js
+++ b/browser/components/preferences/in-content/tests/browser_search_within_preferences.js
@@ -1,159 +1,156 @@
 /*
 This file contains tests for the preferences search bar
 */
 
 /**
  * Tests to see if search bar is being hidden when pref is turned off
  */
 add_task(function*() {
-  Services.prefs.setBoolPref("browser.preference.search", false);
+  Services.prefs.setBoolPref("browser.preferences.search", false);
   yield openPreferencesViaOpenPreferencesAPI("paneGeneral", undefined, {leaveOpen: true});
-  let searchInput = gBrowser.contentDocument.querySelectorAll("#searchTextIMF");
-  is(searchInput.length, 1, "There should only be one element name searchTextIMF querySelectorAll");
+  let searchInput = gBrowser.contentDocument.querySelectorAll("#searchInput");
+  is(searchInput.length, 1, "There should only be one element name searchInput querySelectorAll");
   is_element_hidden(searchInput[0], "Search box should be hidden");
   yield BrowserTestUtils.removeTab(gBrowser.selectedTab);
 });
 
 
 /**
- * Tests to see if search bar is being shown when pref is turned one
+ * Tests to see if search bar is being shown when pref is turned on
  */
 add_task(function*() {
-  Services.prefs.setBoolPref("browser.preference.search", true);
+  Services.prefs.setBoolPref("browser.preferences.search", true);
   yield openPreferencesViaOpenPreferencesAPI("paneGeneral", undefined, {leaveOpen: true});
-  let searchInput = gBrowser.contentDocument.getElementById("searchTextIMF");
+  let searchInput = gBrowser.contentDocument.getElementById("searchInput");
   is_element_visible(searchInput, "Search box should be shown");
   yield BrowserTestUtils.removeTab(gBrowser.selectedTab);
-  Services.prefs.setBoolPref("browser.preference.search", false);
+  Services.prefs.setBoolPref("browser.preferences.search", false);
 });
 
 /**
  * Test for "Search Result" panel
  */
 add_task(function*() {
-  Services.prefs.setBoolPref("browser.preference.search", true);
+  Services.prefs.setBoolPref("browser.preferences.search", true);
   yield openPreferencesViaOpenPreferencesAPI("paneGeneral", undefined, {leaveOpen: true});
 
   let searchResultsPane = gBrowser.contentDocument.getElementById("category-search-results");
 
   is_element_hidden(searchResultsPane, "Should not be in search results pane yet");
 
   // Performs search
-  let searchInput = gBrowser.contentDocument.getElementById("searchTextIMF");
+  let searchInput = gBrowser.contentDocument.getElementById("searchInput");
   searchInput.click();
-  yield new Promise(resolve => setTimeout(resolve, 1000));
   searchInput.value = "password";
   searchInput.click();
 
   // Checks we are in paneSearchResults
   is_element_visible(searchResultsPane, "Should be in search results pane");
 
   // Takes search off
   searchInput.value = "";
   searchInput.click();
 
   // Checks if back to normal
   is_element_hidden(searchResultsPane, "Should not be in search results pane");
 
-
   yield BrowserTestUtils.removeTab(gBrowser.selectedTab);
-  Services.prefs.setBoolPref("browser.preference.search", false);
-
+  Services.prefs.setBoolPref("browser.preferences.search", false);
 });
 
 /**
  * Test for "password" case
  * When we search "password", it should show the "passwordGroup"
  */
 add_task(function*() {
-  Services.prefs.setBoolPref("browser.preference.search", true);
+  Services.prefs.setBoolPref("browser.preferences.search", true);
   yield openPreferencesViaOpenPreferencesAPI("paneGeneral", undefined, {leaveOpen: true});
 
   let searchResults = gBrowser.contentDocument.getElementById("passwordsGroup");
 
   is_element_hidden(searchResults, "Should not be in search results yet");
 
   // Performs search
-  let searchInput = gBrowser.contentDocument.getElementById("searchTextIMF");
+  let searchInput = gBrowser.contentDocument.getElementById("searchInput");
   searchInput.click();
-  yield new Promise(resolve => setTimeout(resolve, 1000));
   searchInput.value = "password";
   searchInput.click();
 
   // Checks we are in we have found it
   is_element_visible(searchResults, "Should be in search results");
 
   // Takes search off
   searchInput.value = "";
   searchInput.click();
 
   // Checks if back to normal
   is_element_hidden(searchResults, "Should not be in search results");
 
-
   yield BrowserTestUtils.removeTab(gBrowser.selectedTab);
-  Services.prefs.setBoolPref("browser.preference.search", false);
-
+  Services.prefs.setBoolPref("browser.preferences.search", false);
 });
 
 /**
  * Test for if nothing is found
  */
 add_task(function*() {
-  Services.prefs.setBoolPref("browser.preference.search", true);
+  Services.prefs.setBoolPref("browser.preferences.search", true);
   yield openPreferencesViaOpenPreferencesAPI("paneGeneral", undefined, {leaveOpen: true});
 
-  let searchResults = gBrowser.contentDocument.getElementById("noResultsFound");
+  let allSearchResults = gBrowser.contentDocument.getElementsByClassName("no-results-message");
 
-  is_element_hidden(searchResults, "Should not be in search results yet");
+  for (let result of allSearchResults){
+    is_element_hidden(result, "Should not be in search results yet");
+  }
 
   // Performs search
-  let searchInput = gBrowser.contentDocument.getElementById("searchTextIMF");
+  let searchInput = gBrowser.contentDocument.getElementById("searchInput");
   searchInput.click();
-  yield new Promise(resolve => setTimeout(resolve, 1000));
   searchInput.value = "coach";
   searchInput.click();
 
-  // Checks we are in no results found
-  is_element_visible(searchResults, "Should be in search results");
+  for (let result of allSearchResults){
+    // Checks we are in no results found
+    // All elements should be shown because word is not found
+    is_element_visible(result, "Should be in search results");
+  }
 
   // Takes search off
   searchInput.value = "";
   searchInput.click();
-
-  // Checks if back to normal
-  is_element_hidden(searchResults, "Should not be in search results");
+  for (let result of allSearchResults){
+    // Checks if back to normal
+    is_element_hidden(result, "Should not be in search results");
+  }
 
   yield BrowserTestUtils.removeTab(gBrowser.selectedTab);
-  Services.prefs.setBoolPref("browser.preference.search", false);
+  Services.prefs.setBoolPref("browser.preferences.search", false);
 });
 
 /**
  * Test for if we go back to general tab after search case
  */
 add_task(function*() {
-  Services.prefs.setBoolPref("browser.preference.search", true);
+  Services.prefs.setBoolPref("browser.preferences.search", true);
   yield openPreferencesViaOpenPreferencesAPI("privacy", undefined, {leaveOpen: true});
-
+  
   let generalPane = gBrowser.contentDocument.getElementById("header-general");
 
   is_element_hidden(generalPane, "Should not be in general");
 
   // Performs search
-  let searchInput = gBrowser.contentDocument.getElementById("searchTextIMF");
+  let searchInput = gBrowser.contentDocument.getElementById("searchInput");
   searchInput.click();
-  yield new Promise(resolve => setTimeout(resolve, 1000));
   searchInput.value = "password";
   searchInput.click();
 
   // Takes search off
   searchInput.value = "";
   searchInput.click();
 
   // Checks if back to normal
   is_element_visible(generalPane, "Should be in generalPane");
 
-
   yield BrowserTestUtils.removeTab(gBrowser.selectedTab);
-  Services.prefs.setBoolPref("browser.preference.search", false);
+  Services.prefs.setBoolPref("browser.preferences.search", false);
 });
--- a/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
@@ -9,23 +9,28 @@
 <!ENTITY  prefWindow.titleGNOME   "&brandShortName; Preferences">
 <!-- When making changes to prefWindow.styleWin test both Windows Classic and
      Luna since widget heights are different based on the OS theme -->
 <!ENTITY  prefWinMinSize.styleWin2      "width: 42em; min-height: 37.5em;">
 <!ENTITY  prefWinMinSize.styleMac       "width: 47em; min-height: 40em;">
 <!ENTITY  prefWinMinSize.styleGNOME     "width: 45.5em; min-height: 40.5em;">
 
 <!ENTITY  paneGeneral.title       "General">
-<!-- Added for Search functionality testing -->
 <!ENTITY  paneSearchResults.title "Search Results">
 <!ENTITY  paneTabs.title          "Tabs">
 <!ENTITY  paneSearch.title        "Search">
 <!ENTITY  paneContent.title       "Content">
 <!ENTITY  paneApplications.title  "Applications">
 <!ENTITY  panePrivacy.title       "Privacy">
 <!ENTITY  paneContainers.title    "Container Tabs">
 <!ENTITY  paneSecurity.title      "Security">
 <!ENTITY  paneAdvanced.title      "Advanced">
 
 <!-- LOCALIZATION NOTE (paneSync.title): This should match syncBrand.shortName.label in ../syncBrand.dtd -->
 <!ENTITY  paneSync.title          "Sync">
 
 <!ENTITY  helpButton.label        "Help">
+
+<!ENTITY searchInput.label        "Search">
+
+<!-- Search Results Pane-->
+<!ENTITY needHelp.label             "Need help? Visit ">
+<!ENTITY supportPage.label          "Firefox Support">
\ No newline at end of file
--- a/browser/locales/en-US/chrome/browser/preferences/preferences.properties
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.properties
@@ -246,8 +246,12 @@ removeContainerAlertTitle=Remove This Co
 
 # LOCALIZATION NOTE (removeContainerMsg): Semi-colon list of plural forms.
 # See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
 # #S is the number of container tabs
 removeContainerMsg=If you remove this Container now, #S container tab will be closed. Are you sure you want to remove this Container?;If you remove this Container now, #S container tabs will be closed. Are you sure you want to remove this Container?
 
 removeContainerOkButton=Remove this Container
 removeContainerButton2=Don’t remove this Container
+
+# Search Results Pane
+# in descriptionApplications, %S will be replaced by the word being searched
+sorryMessage=Sorry! No results were found for "%S"
deleted file mode 100644
--- a/browser/locales/en-US/chrome/browser/preferences/searchResults.dtd
+++ /dev/null
@@ -1,6 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-
-<!ENTITY needHelp.label             "Need help? Visit ">
-<!ENTITY supportPage.label          "Firefox Support">
deleted file mode 100644
--- a/browser/locales/en-US/chrome/browser/preferences/searchResults.properties
+++ /dev/null
@@ -1,6 +0,0 @@
-# This Source Code Form is subject to the terms of the Mozilla Public
-# License, v. 2.0. If a copy of the MPL was not distributed with this
-# file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
-# in descriptionApplications, %S will be replaced by the word being searched
-sorryMessage=Sorry! No results were found for "%S"
--- a/browser/locales/jar.mn
+++ b/browser/locales/jar.mn
@@ -78,18 +78,16 @@
     locale/browser/preferences/privacy.dtd            (%chrome/browser/preferences/privacy.dtd)
     locale/browser/preferences/security.dtd           (%chrome/browser/preferences/security.dtd)
     locale/browser/preferences/containers.dtd         (%chrome/browser/preferences/containers.dtd)
     locale/browser/preferences/sync.dtd               (%chrome/browser/preferences/sync.dtd)
     locale/browser/preferences/tabs.dtd               (%chrome/browser/preferences/tabs.dtd)
     locale/browser/preferences/search.dtd             (%chrome/browser/preferences/search.dtd)
     locale/browser/preferences/siteDataSettings.dtd   (%chrome/browser/preferences/siteDataSettings.dtd)
     locale/browser/preferences/translation.dtd        (%chrome/browser/preferences/translation.dtd)
-    locale/browser/preferences/searchResults.dtd (%chrome/browser/preferences/searchResults.dtd)
-    locale/browser/preferences/searchResults.properties (%chrome/browser/preferences/searchResults.properties)
     locale/browser/syncBrand.dtd                (%chrome/browser/syncBrand.dtd)
     locale/browser/syncSetup.properties         (%chrome/browser/syncSetup.properties)
 % resource search-plugins chrome://browser/locale/searchplugins/
 #if BUILD_FASTER
     locale/browser/searchplugins/               (searchplugins/*.xml)
     locale/browser/searchplugins/list.json      (search/list.json)
 #else
     locale/browser/searchplugins/               (.deps/generated_@AB_CD@/*.xml)
--- a/browser/themes/shared/incontentprefs/icons.svg
+++ b/browser/themes/shared/incontentprefs/icons.svg
@@ -38,16 +38,24 @@
     </g>
     <g id="sync-shape">
       <path d="M17.024,3.351 c-0.562,0.331 -1.311,0.879 -1.821,1.698 -0.367,0.592 -0.752,1.288 -1.08,1.914 0.987,0.413 1.862,1.095 2.476,2.029 0.614,0.957 0.929,2.122 0.83,3.351 -0.201,1.787 -1.359,3.433 -3.046,4.36 -0.696,-0.774 -1.951,-2.945 -1.951,-2.945 -0.007,0.007 -0.004,2.556 -0.871,4.334 -0.573,1.184 -1.24,2.202 -2.305,2.995 1.431,0.51 2.915,0.886 4.282,0.909 l 0.162,0.002 c 2.99,0.021 5.844,-0.48 5.844,-0.48 0,0 -1.236,-0.802 -1.808,-1.346 1.86,-1.072 3.111,-2.791 3.634,-4.708 0.283,-0.759 0.478,-1.566 0.57,-2.409 C 22.383,9.011 20.33,5.278 17.024,3.351 Z M 6.569,12.302 C 6.526,10.271 7.755,8.327 9.644,7.29 c 0.696,0.774 2.32,2.899 2.32,2.899 0,0 -0.064,-5.157 1.657,-7.973 -6.097,-0.668 -9.69,0.443 -9.69,0.443 0,0 1.763,0.607 2.333,1.136 C 6.122,3.891 5.984,3.992 5.85,4.096 4.4,5.064 3.368,6.449 2.825,7.994 2.436,8.892 2.171,9.863 2.06,10.887 1.622,14.886 3.629,18.572 6.871,20.515 7.39,20.124 7.975,19.631 8.61,18.983 9.189,18.389 9.647,17.682 10.021,16.967 8.082,16.208 6.714,14.404 6.569,12.302 Z"/>
     </g>
     <g id="advanced-shape">
       <path d="M19.173,16.163c0.004,0.04,0.007,0.08,0.007,0.121c0,1.748-3.197,3.165-7.14,3.165 c-3.943,0-7.14-1.417-7.14-3.165c0 -0.037,0.003-0.073,0.006-0.109C3.11,16.572,2,17.243,2,18.341C2,20.362,6.477,22,12,22 c5.523,0,10-1.638,10-3.659 C22,17.22,20.922,16.553,19.173,16.163z"/>
       <path d="M18.224,15.979c0.006-0.11-0.018-0.285-0.054-0.39c0,0-0.762-2.205-1.176-3.403 c-0.624-1.807-2.112-6.139-2.112-6.139c-0.036-0.104-0.031-0.273,0.01-0.376l0.497-1.234c0.041-0.102,0.116-0.266,0.166-0.364 l0.986-1.942c0.05-0.098,0.013-0.133-0.081-0.077L9.965,5.871c-0.095,0.056-0.203,0.186-0.24,0.29c0,0-0.252,0.7-0.412,1.144 C8.64,9.173,7.968,11.04,7.296,12.908c-0.26,0.723-0.52,1.446-0.78,2.168c-0.056,0.156-0.112,0.311-0.168,0.466 c-0.093,0.26-0.049,0.617,0.032,0.881c0.237,0.763,1.001,1.189,1.708,1.435c0.611,0.213,1.254,0.328,1.895,0.403 c0.895,0.105,1.805,0.14,2.706,0.112c1.356-0.041,2.767-0.261,4.004-0.846c0.429-0.203,0.854-0.459,1.174-0.816 c0.121-0.135,0.226-0.287,0.297-0.455C18.215,16.134,18.224,15.979,18.224,15.979z M14.063,16.131 c0.019,0.108-0.046,0.156-0.143,0.104l-1.466-0.772c-0.097-0.052-0.257-0.052-0.354,0l-1.466,0.773 c-0.097,0.052-0.162,0.004-0.143-0.104l0.28-1.636c0.019-0.109-0.031-0.261-0.109-0.338l-1.186-1.158 c-0.079-0.077-0.054-0.153,0.055-0.169l1.638-0.239c0.109-0.016,0.238-0.11,0.286-0.209l0.733-1.488 c0.049-0.099,0.128-0.099,0.177,0l0.733,1.488c0.049,0.099,0.178,0.193,0.286,0.209l1.639,0.239 c0.109,0.016,0.134,0.092,0.055,0.169l-1.186,1.158c-0.079,0.077-0.128,0.229-0.109,0.338L14.063,16.131z"/>
     </g>
+    <g id="searchResults-shape">
+      <path d="M8,16.3c1.5,0,3-0.4,4.3-1.3l4.6,4.6c0.3,0.3,0.8,0.4,1.2,0.3s0.8-0.5,0.9-0.9s0-0.9-0.3-1.2l-4.5-4.5
+			c2.4-2.9,2.5-7.2,0.2-10.2S8-0.8,4.6,0.8s-5.2,5.4-4.4,9.1S4.2,16.3,8,16.3z M8,1.9c3.4,0,6.1,2.8,6.1,6.2s-2.7,6.2-6.1,6.2
+			S1.9,11.5,1.9,8C1.9,4.6,4.6,1.9,8,1.9L8,1.9z"/>
+			<path d="M8,12.9c2.6,0,4.7-2.1,4.7-4.8S10.6,3.4,8,3.4c-2.6,0-4.7,2.1-4.7,4.7c0,1.3,0.5,2.5,1.4,3.4
+			C5.6,12.4,6.7,12.9,8,12.9L8,12.9z M7.8,4.5c0.4,0,0.8,0.4,0.8,0.8S8.3,6.1,7.8,6.1C6.8,6.1,6,6.9,6,7.9c0,0.4-0.4,0.8-0.8,0.8
+			S4.5,8.3,4.5,7.9C4.5,6,6,4.5,7.8,4.5L7.8,4.5z"/>
+    </g>
   </defs>
   <use id="general" xlink:href="#general-shape"/>
   <use id="general-native" xlink:href="#general-shape"/>
   <use id="search" xlink:href="#search-shape"/>
   <use id="search-native" xlink:href="#search-shape"/>
   <use id="content" xlink:href="#content-shape"/>
   <use id="content-native" xlink:href="#content-shape"/>
   <use id="applications" xlink:href="#applications-shape"/>
@@ -55,9 +63,11 @@
   <use id="privacy" xlink:href="#privacy-shape"/>
   <use id="privacy-native" xlink:href="#privacy-shape"/>
   <use id="security" xlink:href="#security-shape"/>
   <use id="security-native" xlink:href="#security-shape"/>
   <use id="sync" xlink:href="#sync-shape"/>
   <use id="sync-native" xlink:href="#sync-shape"/>
   <use id="advanced" xlink:href="#advanced-shape"/>
   <use id="advanced-native" xlink:href="#advanced-shape"/>
+  <use id="searchResults" xlink:href="#searchResults-shape"/>
+  <use id="searchResults-native" xlink:href="#searchResults-shape"/>
 </svg>
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -97,17 +97,17 @@ treecol {
   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync");
 }
 
 #category-advanced > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced");
 }
 
 #category-search-results > .category-icon {
-  list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search");
+  list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#searchResults");
 }
 
 @media (max-width: 800px) {
   .category-name {
     display: none;
   }
 }
 
@@ -559,47 +559,8 @@ 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);
   }
 }
-
-.search-highlighted {
-  background-color: yellow;
-}
-
-.search-bubble {
-  position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black;
-}
-
-.search-bubble .search-bubble-text {
-    visibility: visible;
-    width: 120px;
-    background-color: #555;
-    color: #fff;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px 0;
-    position: absolute;
-    z-index: 1;
-    bottom: 125%;
-    left: 50%;
-    margin-left: -60px;
-    opacity: 0;
-    transition: opacity 1s;
-    opacity: 1;
-}
-
-.search-bubble .search-bubble-text::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: yellow transparent transparent transparent;
-}
--- a/browser/tools/mozscreenshots/mozscreenshots/extension/configurations/Preferences.jsm
+++ b/browser/tools/mozscreenshots/mozscreenshots/extension/configurations/Preferences.jsm
@@ -13,17 +13,16 @@ Cu.import("resource://gre/modules/Task.j
 Cu.import("resource://testing-common/TestUtils.jsm");
 Cu.import("resource://testing-common/ContentTask.jsm");
 
 this.Preferences = {
 
   init(libDir) {
     let panes = [
       ["paneGeneral", null],
-      ["paneSearchResults", null], // Search Functionality testing
       ["paneSearch", null],
       ["paneContent", null],
       ["paneApplications", null],
       ["panePrivacy", null],
       ["panePrivacy", null, DNTDialog],
       ["panePrivacy", null, clearRecentHistoryDialog],
       ["paneSecurity", null],
       ["paneSync", null],