Add ability to linkify substituted string

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

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * 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:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 759 matching lines @@
     formatters.c = styleFormatter;
 
     // Support %O to force object formatting, instead of the type-based %o formatting.
     formatters.O = parameterFormatter.bind(this, true);
 
     formatters._ = bypassFormatter;
 
     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);
           applyCurrentStyle(wrapper);
           for (var i = 0; i < wrapper.children.length; ++i)
             applyCurrentStyle(wrapper.children[i]);
           toAppend = wrapper;
         }
         a.appendChild(toAppend);
       }
       return a;
     }
 
     /**
      * @param {!Element} element
      */
     function applyCurrentStyle(element) {
       for (var key in currentStyle)
         element.style[key] = currentStyle[key];
     }
 
     // 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;
   }
 
   /**
    * @return {boolean}
    */
   matchesFilterRegex(regexObject) {
     regexObject.lastIndex = 0;
     var text = this.contentElement().deepTextContent();
     return regexObject.test(text);
   }
@@ skipping 242 matching lines @@
   }
 
   /**
    * @return {number}
    */
   searchCount() {
     return this._searchHighlightNodes.length;
   }
 
   /**
-   * @return {!Element}
+   * @return {!Array.<!Element>}
    */
-  searchHighlightNode(index) {
+  searchHighlightNodes(index) {
     return this._searchHighlightNodes[index];
   }
 
   /**
    * @param {string} string
    * @return {?Element}
    */
   _tryFormatAsError(string) {
     /**
      * @param {string} prefix
@@ skipping 116 matching lines @@
   toMessageElement() {
     if (!this._element) {
       super.toMessageElement();
       this._expandGroupIcon = UI.Icon.create('', 'expand-group-icon');
       this._contentElement.insertBefore(this._expandGroupIcon, this._contentElement.firstChild);
       this.setCollapsed(this._collapsed);
     }
     return this._element;
   }
 };