Keeps the original text node when search highlighting happens so it can later be restored.

chrome/browser/resources/settings/search_settings.js

Index: chrome/browser/resources/settings/search_settings.js
diff --git a/chrome/browser/resources/settings/search_settings.js b/chrome/browser/resources/settings/search_settings.js
index fb2e8348daa363502f0f7a75bb70f5efb41f35b6..1a0b1a3de0b1f09f8b73fd6d3cba277c73c89ebf 100644
--- a/chrome/browser/resources/settings/search_settings.js
+++ b/chrome/browser/resources/settings/search_settings.js
@@ -7,6 +7,9 @@ cr.define('settings', function() {
   var WRAPPER_CSS_CLASS = 'search-highlight-wrapper';
 
   /** @const {string} */
+  var ORG_CONTENT_CSS_CLASS = 'search-highlight-original-content';

[dpapad, 2016/09/23 19:36:05]

Nit: Probably better to stay away from non-established abbreviations. Just
rename to ORIGINAL_CONTENT_CSS_CLASS

[Moe, 2016/09/23 23:22:54]

Done.

+
+  /** @const {string} */
   var HIT_CSS_CLASS = 'search-highlight-hit';
 
   /** @const {string} */
@@ -45,8 +48,8 @@ cr.define('settings', function() {
 
   /**
    * Finds all previous highlighted nodes under |node| (both within self and
-   * children's Shadow DOM) and removes the highlights (yellow rectangle and
-   * search bubbles).
+   * children's Shadow DOM) and replaces the highlights (yellow rectangle and
+   * search bubbles) with the original text node.
    * TODO(dpapad): Consider making this a private method of TopLevelSearchTask.
    * @param {!Node} node
    * @private
@@ -55,21 +58,8 @@ cr.define('settings', function() {
     var wrappers = node.querySelectorAll('* /deep/ .' + WRAPPER_CSS_CLASS);
 
     for (var wrapper of wrappers) {
-      var hitElements = wrapper.querySelectorAll('.' + HIT_CSS_CLASS);
-      // For each hit element, remove the highlighting.
-      for (var hitElement of hitElements) {
-        wrapper.replaceChild(hitElement.firstChild, hitElement);
-      }
-
-      // Normalize so that adjacent text nodes will be combined.
-      wrapper.normalize();
-      // Restore the DOM structure as it was before the search occurred.
-      if (wrapper.previousSibling)
-        wrapper.textContent = ' ' + wrapper.textContent;
-      if (wrapper.nextSibling)
-        wrapper.textContent = wrapper.textContent + ' ';
-
-      wrapper.parentElement.replaceChild(wrapper.firstChild, wrapper);
+      var originalNode = wrapper.querySelector('.' + ORG_CONTENT_CSS_CLASS);
+      wrapper.parentElement.replaceChild(originalNode.firstChild, wrapper);
     }
 
     var searchBubbles = node.querySelectorAll(
@@ -96,6 +86,13 @@ cr.define('settings', function() {
     // replacement content.
     node.parentNode.replaceChild(wrapper, node);
 
+    // Keep the existing node around for when the highlights are removed.

[dpapad, 2016/09/23 19:36:05]

For future reference, explain in the comment that the original text node might
be involved in data-binding and therefore should not be discarded.

[Moe, 2016/09/23 23:22:54]

Done.

+    var span = document.createElement('span');
+    span.classList.add(ORG_CONTENT_CSS_CLASS);
+    span.style.display = 'none';
+    span.appendChild(node);
+    wrapper.appendChild(span);
+
     for (var i = 0; i < tokens.length; ++i) {
       if (i % 2 == 0) {
         wrapper.appendChild(document.createTextNode(tokens[i]));