[Devtools] Make link style value clickable

[otakustay]

I didn't find a suitable place to open feature request of react devtools.

We're developing a babel plugin to inject a useDebugValue into every component so that developers can immediately see the source file path of inspecting component like:

We are expecting this file:// url clickable and open the default code editor on clicked, like those image urls in DOM panel:

This can be a helpful feature to help developers quickly location source files, stackoverflow questions and more

[kkragoth]

Hello,

I am very interested in starting to contribute to this project and I would like to grab this issue since it seems quite easy to start but I've never set up this devtools project so I am little nervous. If I could be pointed in right direction with docs (I saw architecture and dev workflow from issue Combine view highlighting code but all links would be useful!) and starting place for this issue I'd be happy to try this as a first issue

[bvaughn]

@kkragoth Feel free to work on this issue!

I just posted a contributing guide which should hopefully have all of the info you need to get started:
https://github.com/facebook/react/blob/main/packages/react-devtools/CONTRIBUTING.md

[bvaughn]

Please also keep in mind that links should not be clickable when props are editable, (since this would interfere with editing), only when they're read-only

[PrinceRajRoy]

@bvaughn I was trying this out, any suggestion how to use/open the default code editor? It works fine with vscode url path as
vscode://file/{path to file}

2021-07-09.15-35-29.mp4

[otakustay]

Default editor should be registered system wide, I think it is enough to just open the file:// protocol url and leave OS to decide which app to handle this

[kkragoth]

@otakustay I thought the same but I started working in parallel and file:/// seems to be intercepted by Chrome (for security reasons) and that's the issue that @PrinceRajRoy might be talking about.

Screen.Recording.2021-07-09.at.18.54.23.mov

[PrinceRajRoy]

@kkragoth indeed, I tried with firefox too, same security issue.

[otakustay]

This is not a problem, the displayed string is fully controlled by developers, they can change it to vscode:// if their default editor is vscode, for devtools it just renders a link and all behavior should comply with browser.

[rainedoescode]

It looks like it may be possible to use process.env.EDITOR to check the user's default text editor, but it's not guaranteed to be a coding environment

[anushaNemilidinne]

Hello! is anyone working on this issue? Been using React for almost 2 years and I always wanted to contribute to this open source project.

[bvaughn]

So far as I know, there is no open PR for this so it's still up for grabs.

[kkragoth]

I'm little nervous to start PR, but I found out I have some questions that maybe other joining contributors and someone later assigned to issue might ask.

I'v very new to this project so I thought the best place to start is with KeyValue file (edited in PR).

I have some questions that I think will be useful for anyone starting work with this issue being new to project

• is this the correct place I'm trying to do changes?
• How can I set in devtools to disallow editing values? Right now for testing I simply set specific booleans (isReadOnly/canEdit...) to appropriate values in code.
• this issue feels nice to add 'http'/'https' support, not really sure if needed.
• how one should approach adding tests for this issue?

Also I believe this issue was started as a way for developers to get quickly to source file. Devtools sometimes render 'source' in panel for component. This could be made to be a clickable link instead of copying to clipboard

[bvaughn]

How can I set in devtools to disallow editing values? Right now for testing I simply set specific booleans (isReadOnly/canEdit...) to appropriate values in code.

DevTools already has this feature built-in. Sometimes props can be edited (e.g. if you're using a DEV build of React) and sometimes not. We shouldn't change that for this feature. My point was just that links should not be clickable when props are editable because that would break the editing experience.

[kkragoth]

How can I set in devtools to disallow editing values? Right now for testing I simply set specific booleans (isReadOnly/canEdit...) to appropriate values in code.

DevTools already has this feature built-in. Sometimes props can be edited (e.g. if you're using a DEV build of React) and sometimes not. We shouldn't change that for this feature. My point was just that links should not be clickable when props are editable because that would break the editing experience.

I understand and never broke editing experience.

I only had no idea how to start devtools where props can't be modified since I've been only using DEV builds, and now after your comment I know I should've been using production builds. The code I supplied works if props can't be modified then display it as link but if it's editable then nothing changes.

[bvaughn]

That seems right then. (Though I suggest using color: var(--color-link); for those styled links to make them fit the theme right.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!