Make links in previews clickable

[eliihen]

What

This is feature request to make link strings be rendered as clickable links that open in new tabs. This mainly refers to the details side panel, but could also refer to links rendered in the inline previews (#5).

Why

When we work with web sockets at work, we often send metadata relating to the connection in meta frames to the client. These meta frames sometimes contain URLs with more details about the client's subscription. It would be useful if these could be rendered as links, and not have to be copied and pasted.

I suspect this will require some work in the TreeView component - making it render an <a> instead of a <span> when it detects something that looks like a link, as well as using the tabs API to open a new tab with this link.

What do you think?

[janodvarko]

I like the idea.

The hard part will be the tree customization. Long strings are often cropped (using ... in the middle) and I think that we should keep it while changing span to a.

E.g. the following could stay as is but change to a link. But, there might be a tooltip...
"https://pbs.twimg.com/pr...324/KPfj7uLv_normal.jpg""

What do you think?

Honza

[eliihen]

@janodvarko

Yeah, indeed, keep the crop, that's a good feature. We need to make sure it's a working link though, not what you pasted above :)

You have easy access to the full string though, right? If so, just change the tag to an <a> when we detect something like /^https?:\/\/.*/.

We probably can't use href though, as we are in the dev tools context. We probably need to use an onClick to trigger a tabs.open(url).

End result should be something like this

<a href="" onClick={ () => this.openTab('https://example.com') }>
  https://ex...e.com
</a>

You want to do the change in firebug.sdk or should I give it a shot when I get time?