Add ability to linkify substituted string

third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js

Index: third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
diff --git a/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js b/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
index 8c62058d640b367a3f0953535898d39f52fb1c71..c50ad478164d36f48c9034267336dfd667a15ee4 100644
--- a/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
+++ b/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
@@ -777,8 +777,8 @@ Console.ConsoleViewMessage = class {
     function append(a, b) {
       if (b instanceof Node) {
         a.appendChild(b);
-      } else if (typeof b !== 'undefined') {
-        var toAppend = Components.linkifyStringAsFragment(String(b));
+      } else if (typeof b !== 'undefined' && b !== '') {
+        var toAppend = createTextNode(String(b));
         if (currentStyle) {
           var wrapper = createElement('span');
           wrapper.appendChild(toAppend);
@@ -801,7 +801,20 @@ Console.ConsoleViewMessage = class {
     }
 
     // String.format does treat formattedResult like a Builder, result is an object.
-    return String.format(format, parameters, formatters, formattedResult, append);
+    var result = String.format(format, parameters, formatters, formattedResult, append);
+    let plainText = formattedResult.textContent;
+    var linkRanges = Components.Linkifier.getLinkRanges(plainText);

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

Instead of exposing a handful methods on Components.Linkifier, we could have one
that linkifies by means of UI.highlightRanges. You should just say:

Components.linkifyURLsInNode(formattedResult);

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

How it should handle the fact what ConsoleViewMessage requires some special
style handling (see comment below)? 

+
+    function linkifier(text, parent, idx) {

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

You should annotate these parameters using jsdoc

+      var linkNode =
+          Components.Linkifier.createLinkNode(plainText.substr(linkRanges[idx].offset, linkRanges[idx].length), text);
+      if (parent && parent.style.cssText)

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

Why is this necessary? That looks like something UI.highlightRanges should take
care of.

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

I think this logic is specific for ConsoleViewMessage, and in particular to
_formatWithSubstitutionString, since it is only place in app where we want to
transfer style attr from parent to highlighted prop. That logic and dom
structure is internal for _formatWithSubstitutionString, it is created in local
append function.
 In another places where UI.highlightRangesWithStyleClass used or could be used
we should not do that style transfer (parent node could have some styles we
don't want to duplicate on highlighted text, for example, padding or borders, or
anything else).

+        linkNode.style.cssText = parent.style.cssText;
+      return linkNode;
+    }
+    UI.highlightRangesWithStyleClass(formattedResult, linkRanges, '', [], linkifier);
+
+    return result;
   }
 
   /**
@@ -1064,9 +1077,9 @@ Console.ConsoleViewMessage = class {
   }
 
   /**
-   * @return {!Element}
+   * @return {!Array.<!Element>}
    */
-  searchHighlightNode(index) {
+  searchHighlightNodes(index) {
     return this._searchHighlightNodes[index];
   }