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 753 matching lines @@
         rootElement.appendChild(this._previewFormatter.renderPropertyPreview(type, subtype, description));
       }
     }
 
     return rootElement;
   }
 
   /**
    * @param {string} format
    * @param {!Array.<!SDK.RemoteObject>} parameters
-   * @param {!Element} formattedResult
+   * @param {!Node} output
    */
-  _formatWithSubstitutionString(format, parameters, formattedResult) {
+  _formatWithSubstitutionString(format, parameters, output) {
     var formatters = {};
 
     /**
      * @param {boolean} force
      * @param {!SDK.RemoteObject} obj
      * @return {!Element}
      * @this {Console.ConsoleViewMessage}
      */
     function parameterFormatter(force, obj) {
       return this._formatParameter(obj, force, false);
@@ skipping 52 matching lines @@
     formatters.d = integerFormatter;
 
     // Firebug uses %c for styling the message.
     formatters.c = styleFormatter;
 
     // Support %O to force object formatting, instead of the type-based %o formatting.
     formatters.O = parameterFormatter.bind(this, true);
 
     formatters._ = bypassFormatter;
 
+    // replace style formatter with empty formatter to get plain string
+    var plainFormatters = Object.assign({}, formatters, {'c': a => ''});
+    var plainString = String.format(format, parameters, plainFormatters, '', (a, b) => a + b);

[pfeldman, 2016/12/12 22:05:45]

Some of these formatters format objects, so you are appending objects to
strings. Do you want to mute 'o' and 'O' ones as well?

[karabur, 2016/12/14 17:32:50]

I would like to have output linkified only if it looks like url for user in
console.
If I mute objects, then console.log('www.%ogoogle.com') will looks like
'wwwObject.google.com', and will be linkified as 'www.google.com' and it will
interfere with object's node which is also clickable.

If we append objects to strings it will be converted to Node and then to string
representation of it which does not fit url regexp and properly declined as url
 
Perhaps it is better to consider string as non-url at all if it contains '%o' or
'%O' substitutions to make that logic clear and more stable?

+
+    var linkNode = Components.Linkifier.getLinkNode(plainString.formattedResult);

[pfeldman, 2016/12/12 22:05:45]

What if we

format("%s%s %s%s", "http", "://www.fb.com", "http", "://google.com"),

how would it be linkified?

[karabur, 2016/12/14 17:32:50]

This is a good point, I didn't take into account such case. Right now it will be
linkified same way as it was before.
Will add handling of such strings as well, but it will require more complex
logic. Perhaps it will solve other concerns below in comments as well. 

+    if (linkNode) {
+      linkNode.innerHTML = '';

[pfeldman, 2016/12/12 22:05:45]

Use .textContent = instead, we never use innerHTML due to potential code
injection. Also, you are destroying it first and then you are appending it into
output? How does that work?

[karabur, 2016/12/14 17:32:50]

Ok.
I'm using that node as accumulator for formatted string instead of wrapping
formatted string into link node to avoid additional <span> element.
So, first I get proper node for a message, and then build message inside that
node. Since Linfifier._createLink creates link node and fills it's content with
text url, I just remove that and replace with proper formatted message

+      output.appendChild(linkNode);
+    }
+    var linkifyInner = !linkNode;
+
     function append(a, b) {
       if (b instanceof Node) {
         a.appendChild(b);
       } else if (typeof b !== 'undefined') {
-        var toAppend = Components.linkifyStringAsFragment(String(b));
+        var toAppend =
+            linkifyInner ? Components.linkifyStringAsFragment(String(b)) : createTextNode(String(b).trimMiddle(150));

[pfeldman, 2016/12/12 22:05:45]

That sounds like a strange heuristic.

What you should do instead is when you get the formatted string in a node in
line 876, you want to traverse the text nodes in that node and linkify them.

[karabur, 2016/12/14 17:32:50]

not sure I understand. 
in line 876 I will get same string or same string wrapped in style span, or
another node which does not have plain text representation in console at all
which could contain a link (like Object expandable node)
If it is a Node which came in b parameter - no need to linkify that at all, if
it is not node, then it converted to string, what is the point of putting that
string into text node, and then extract back to linkify?

If you referring to linkifyInner - I dont see how we can avoid that check. It is
used to block links inside links in case like format('www.google.com:%d', 80)

         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];
     }
 
+    var formattedResult = linkNode || output;
     // 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);
+    return result;
   }
 
   /**
    * @return {boolean}
    */
   matchesFilterRegex(regexObject) {
     regexObject.lastIndex = 0;
     var text = this.contentElement().deepTextContent();
     return regexObject.test(text);
   }
@@ skipping 375 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;
   }
 };