Add ability to linkify substituted string

third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js

Index: third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
index ef8aed6389eba681045fa65787b2f186f404147a..85b08521843faf07f782f29b779302affe5c1da3 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
@@ -836,7 +836,7 @@ UI.ElementFocusRestorer = class {
  * @param {number} offset
  * @param {number} length
  * @param {!Array.<!Object>=} domChanges
- * @return {?Element}
+ * @return {?Array.<!Element>}
  */
 UI.highlightSearchResult = function(element, offset, length, domChanges) {
   var result = UI.highlightSearchResults(element, [new Common.SourceRange(offset, length)], domChanges);
@@ -847,7 +847,7 @@ UI.highlightSearchResult = function(element, offset, length, domChanges) {
  * @param {!Element} element
  * @param {!Array.<!Common.SourceRange>} resultRanges
  * @param {!Array.<!Object>=} changes
- * @return {!Array.<!Element>}
+ * @return {!Array.<!Array.<!Element>>}
  */
 UI.highlightSearchResults = function(element, resultRanges, changes) {
   return UI.highlightRangesWithStyleClass(element, resultRanges, UI.highlightedSearchResultClassName, changes);
@@ -875,9 +875,10 @@ UI.runCSSAnimationOnce = function(element, className) {
  * @param {!Array.<!Common.SourceRange>} resultRanges
  * @param {string} styleClass
  * @param {!Array.<!Object>=} changes
- * @return {!Array.<!Element>}
+ * @param {function(string,?Element,number):!Element=} highlightCreator
+ * @return {!Array.<!Array.<!Element>>}

[pfeldman, 2017/01/27 19:10:07]

Hm. That makes things quite complex. I would expect search to have higher
priority than the link and override its style with the actual search highlight,
while still producing single node as a result. It seems like we need to manage
highlighters in a way that they are aware of each other and can have different
priorities. Otherwise search result's rounded border would be split at the index
url linkifier decides to split the node.

[karabur, 2017/01/27 21:21:04]

Yes, something looks wrong for me here as well, but I think it is because here
we have two opposite requirements - destroy dom and create one text node for
search, and keep dom structure and create set of text nodes for link. 
Do you mean highlightRangesWithStyleClass should be aware of that difference and
produce single node or set of nodes depending on is it used for search or link? 

Problem with round borders exists, indeed, right now it solved on css level, and
looks the same as before. I've found that more simple solution than put
conditional logic for different use cases into highlightRangesWithStyleClass.
Dont you think we should keep that way in sake of simplicity and keeping
highlightRangesWithStyleClass more generic?

  */
-UI.highlightRangesWithStyleClass = function(element, resultRanges, styleClass, changes) {
+UI.highlightRangesWithStyleClass = function(element, resultRanges, styleClass, changes, highlightCreator) {
   changes = changes || [];
   var highlightNodes = [];
   var textNodes = element.childTextNodes();
@@ -905,6 +906,8 @@ UI.highlightRangesWithStyleClass = function(element, resultRanges, styleClass, c
   for (var i = 0; i < resultRanges.length; ++i) {
     var startOffset = resultRanges[i].offset;
     var endOffset = startOffset + resultRanges[i].length;
+    var rangeHighlightNodes = [];
+    highlightNodes.push(rangeHighlightNodes);
 
     while (startIndex < textNodes.length &&
            nodeRanges[startIndex].offset + nodeRanges[startIndex].length <= startOffset)
@@ -915,46 +918,37 @@ UI.highlightRangesWithStyleClass = function(element, resultRanges, styleClass, c
     if (endIndex === textNodes.length)
       break;
 
-    var highlightNode = ownerDocument.createElement('span');
-    highlightNode.className = styleClass;
-    highlightNode.textContent = lineText.substring(startOffset, endOffset);
-
-    var lastTextNode = textNodes[endIndex];
-    var lastText = lastTextNode.textContent;
-    lastTextNode.textContent = lastText.substring(endOffset - nodeRanges[endIndex].offset);
-    changes.push({node: lastTextNode, type: 'changed', oldText: lastText, newText: lastTextNode.textContent});
-
-    if (startIndex === endIndex) {
-      lastTextNode.parentElement.insertBefore(highlightNode, lastTextNode);
-      changes.push({node: highlightNode, type: 'added', nextSibling: lastTextNode, parent: lastTextNode.parentElement});
-      highlightNodes.push(highlightNode);
-
-      var prefixNode = ownerDocument.createTextNode(lastText.substring(0, startOffset - nodeRanges[startIndex].offset));
-      lastTextNode.parentElement.insertBefore(prefixNode, highlightNode);
-      changes.push({node: prefixNode, type: 'added', nextSibling: highlightNode, parent: lastTextNode.parentElement});
-    } else {
-      var firstTextNode = textNodes[startIndex];
-      var firstText = firstTextNode.textContent;
-      var anchorElement = firstTextNode.nextSibling;
-
-      firstTextNode.parentElement.insertBefore(highlightNode, anchorElement);
-      changes.push(
-          {node: highlightNode, type: 'added', nextSibling: anchorElement, parent: firstTextNode.parentElement});
-      highlightNodes.push(highlightNode);
-
-      firstTextNode.textContent = firstText.substring(0, startOffset - nodeRanges[startIndex].offset);
-      changes.push({node: firstTextNode, type: 'changed', oldText: firstText, newText: firstTextNode.textContent});
-
-      for (var j = startIndex + 1; j < endIndex; j++) {
-        var textNode = textNodes[j];
-        var text = textNode.textContent;
-        textNode.textContent = '';
-        changes.push({node: textNode, type: 'changed', oldText: text, newText: textNode.textContent});
+    for (var j = startIndex; j <= endIndex; j++) {
+      var textNode = textNodes[j];
+      var nodeRange = nodeRanges[j];
+      var nodeRangeEndOffset = nodeRange.offset + nodeRange.length;
+      var prefixText = nodeRange.offset < startOffset ? lineText.substring(nodeRange.offset, startOffset) : '';
+      var suffixText = nodeRangeEndOffset > endOffset ? lineText.substring(endOffset, nodeRangeEndOffset) : '';
+      var highlightText =
+          lineText.substring(Math.max(startOffset, nodeRange.offset), Math.min(endOffset, nodeRangeEndOffset));
+      var highlightNode;
+      if (highlightCreator) {
+        highlightNode = highlightCreator(highlightText, textNode.parentElement, i);
+      } else {
+        highlightNode = ownerDocument.createElement('span');
+        highlightNode.className = styleClass;
+        highlightNode.textContent = highlightText;
+      }
+      changes.push({node: textNode, type: 'changed', oldText: textNode.textContent, newText: suffixText});
+      textNode.textContent = suffixText;
+      textNode.parentElement.insertBefore(highlightNode, textNode);
+      rangeHighlightNodes.push(highlightNode);
+      changes.push({node: highlightNode, type: 'added', nextSibling: textNode, parent: textNode.parentElement});
+      if (prefixText) {
+        var prefixNode = createTextNode(prefixText);
+        textNode.parentElement.insertBefore(prefixNode, highlightNode);
+        changes.push({node: prefixNode, type: 'added', nextSibling: highlightNode, parent: textNode.parentElement});
       }
     }
+
     startIndex = endIndex;
     nodeRanges[startIndex].offset = endOffset;
-    nodeRanges[startIndex].length = lastTextNode.textContent.length;
+    nodeRanges[startIndex].length = textNodes[endIndex].textContent.length;
   }
   return highlightNodes;
 };