Add ability to linkify substituted string

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

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
@@ skipping 818 matching lines @@
     this._previous = null;
     this._element = null;
   }
 };
 
 /**
  * @param {!Element} element
  * @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);
   return result.length ? result[0] : null;
 };
 
 /**
  * @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);
 };
 
 /**
  * @param {!Element} element
  * @param {string} className
  */
 UI.runCSSAnimationOnce = function(element, className) {
   function animationEndCallback() {
     element.classList.remove(className);
     element.removeEventListener('webkitAnimationEnd', animationEndCallback, false);
   }
 
   if (element.classList.contains(className))
     element.classList.remove(className);
 
   element.addEventListener('webkitAnimationEnd', animationEndCallback, false);
   element.classList.add(className);
 };
 
 /**
  * @param {!Element} element
  * @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();
   var lineText = textNodes
                      .map(function(node) {
                        return node.textContent;
                      })
                      .join('');
   var ownerDocument = element.ownerDocument;
 
   if (textNodes.length === 0)
     return highlightNodes;
 
   var nodeRanges = [];
   var rangeEndOffset = 0;
   for (var i = 0; i < textNodes.length; ++i) {
     var range = {};
     range.offset = rangeEndOffset;
     range.length = textNodes[i].textContent.length;
     rangeEndOffset = range.offset + range.length;
     nodeRanges.push(range);
   }
 
   var startIndex = 0;
   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)
       startIndex++;
     var endIndex = startIndex;
     while (endIndex < textNodes.length && nodeRanges[endIndex].offset + nodeRanges[endIndex].length < endOffset)
       endIndex++;
     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;
 };
 
 UI.applyDomChanges = function(domChanges) {
   for (var i = 0, size = domChanges.length; i < size; ++i) {
     var entry = domChanges[i];
     switch (entry.type) {
       case 'added':
         entry.parent.insertBefore(entry.node, entry.nextSibling);
@@ skipping 1063 matching lines @@
     callback(fileSelectorElement.files[0]);
   }
   return fileSelectorElement;
 };
 
 /**
  * @const
  * @type {number}
  */
 UI.MaxLengthForDisplayedURLs = 150;