Bug 149638 – Web Inspector: Can't click on a stack trace link when it's in a console message preview

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Web Inspector

[Nikita Vasilyev]

Created attachment 262093 [details]
[Image] Bug

Steps:
1. Open stacktrace-preview.html
2. Open the console

Expected:
Console stack trace should have clickable source links. Line breaks should be line breaks and not "↵".

Actual:
Can't click on the source links and line breaks are shown as "↵".

Notes:
While the error object view was improved a couple of months ago, there are still cases when we don’t display stacktraces properly. We should do what Tim originally suggested, auto detect silly error.stack format and render it as a stack trace object tree instead (https://bugs.webkit.org/show_bug.cgi?id=143853#c0). That's what Chrome does, too.

[Radar WebKit Bug Importer]

<rdar://problem/22902212>

[Nikita Vasilyev]

Created attachment 262095 [details]
[HTML] Reduction

[Nikita Vasilyev]

Created attachment 263407 [details]
WIP

[Nikita Vasilyev]

Comment on attachment 263407 [details]
WIP

View in context: https://bugs.webkit.org/attachment.cgi?id=263407&action=review

> Source/WebInspectorUI/UserInterface/Base/Main.js:2023
> +    var linkStringRegEx = /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/|www\.)[\w$\-_+*'=\|\/\\(){}\[\]%@&#~,:;.!?]{2,}[\w$\-_+*=\|\/\\({%@&#~]/;

[ character doesn't have to escaped here but it was driving me (and WebStorm) crazy.

> Source/WebInspectorUI/UserInterface/Views/FormattedValue.css:49
> +.formatted-string, [class].formatted-string > a {

"[class]" hack is used to increase rule specificity.

> Source/WebInspectorUI/UserInterface/Views/FormattedValue.js:172
> +        span.textContent = doubleQuotedString(displayString);

This fails on console.log("blah", "a URL longer than WebInspector.FormattedValue.MAX_PREVIEW_STRING_LENGTH"). A long URL gets truncated first, which results in a wrong URL.

The patch needs to be more complex than this.

[Devin Rousso]

Comment on attachment 263407 [details]
WIP

View in context: https://bugs.webkit.org/attachment.cgi?id=263407&action=review

>> Source/WebInspectorUI/UserInterface/Views/FormattedValue.js:172
>> +        span.textContent = doubleQuotedString(displayString);
> 
> This fails on console.log("blah", "a URL longer than WebInspector.FormattedValue.MAX_PREVIEW_STRING_LENGTH"). A long URL gets truncated first, which results in a wrong URL.
> 
> The patch needs to be more complex than this.

I am a bit confused here.  If the only thing that is causing this to not work is the fact that the string is truncated before it is linkified, then why not just save the string before you modify it?

[Nikita Vasilyev]

(In reply to comment #5)
> Comment on attachment 263407 [details]
> WIP
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=263407&action=review
> 
> >> Source/WebInspectorUI/UserInterface/Views/FormattedValue.js:172
> >> +        span.textContent = doubleQuotedString(displayString);
> > 
> > This fails on console.log("blah", "a URL longer than WebInspector.FormattedValue.MAX_PREVIEW_STRING_LENGTH"). A long URL gets truncated first, which results in a wrong URL.
> > 
> > The patch needs to be more complex than this.
> 
> I am a bit confused here.  If the only thing that is causing this to not
> work is the fact that the string is truncated before it is linkified, then
> why not just save the string before you modify it?

We need to linkify first.
Then we need to truncate the text. URLs shouldn't be affected, but links' text should.

We wouldn't be able to use String#truncate any longer, since it operates on strings and after linkifying we'll have nodes (<a> and text nodes).

[Devin Rousso]

(In reply to comment #6)
> (In reply to comment #5)
> > Comment on attachment 263407 [details]
> > WIP
> > 
> > View in context:
> > https://bugs.webkit.org/attachment.cgi?id=263407&action=review
> > 
> > >> Source/WebInspectorUI/UserInterface/Views/FormattedValue.js:172
> > >> +        span.textContent = doubleQuotedString(displayString);
> > > 
> > > This fails on console.log("blah", "a URL longer than WebInspector.FormattedValue.MAX_PREVIEW_STRING_LENGTH"). A long URL gets truncated first, which results in a wrong URL.
> > > 
> > > The patch needs to be more complex than this.
> > 
> > I am a bit confused here.  If the only thing that is causing this to not
> > work is the fact that the string is truncated before it is linkified, then
> > why not just save the string before you modify it?
> 
> We need to linkify first.
> Then we need to truncate the text. URLs shouldn't be affected, but links'
> text should.
> 
> We wouldn't be able to use String#truncate any longer, since it operates on
> strings and after linkifying we'll have nodes (<a> and text nodes).

Ah I understand now.  Seems like we may need to create something like WebInspector.linkifyTruncatedStringAsFragment that will linkify and then truncate.  It seems like WebInspector.linkifyStringAsFragmentWithCustomLinkifier is only ever called inside WebInspector.linkifyStringAsFragment, so maybe just add a parameter shouldTruncate and pass in the non-truncated string.  Interesting situation :P

[Timothy Hatcher]

It would be good to finish this up.

[Devin Rousso]

Is this still an issue?  I just tried this with the reduction file and am seeing it render with links just fine.

[Joseph Pecoraro]

Yeah, this looks like it is working now. Nikita, do you remember what fixed it?

[Nikita Vasilyev]

Bug 149790 "Web Inspector: When logging strings, detect stack traces and show them as StackTraceView" solved this.

[Timothy Hatcher]

*** This bug has been marked as a duplicate of bug 149790 ***