[DevTools] Add open in editor #22649

ezzak · 2021-10-28T20:37:01Z

Summary

Add ability to view the current component in your code editor.

Test Plan

Open with vscode (default behavior):

openincode.mov

Open in sublime (customized behavior):

devtoolssublime.mov

Icon updated after these videos were captured

Sarkar44

review change

jstejada

this is amazing, thank you!! overall lgtm! do you thing you could add a screen recording of what this looks like to the test plan? cc @bvaughn

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

jstejada · 2021-10-28T21:53:48Z

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

@@ -20,6 +20,7 @@ import {ElementTypeSuspense} from 'react-devtools-shared/src/types';
 import CannotSuspendWarningMessage from './CannotSuspendWarningMessage';
 import InspectedElementView from './InspectedElementView';
 import {InspectedElementContext} from './InspectedElementContext';
+import {isInternalFacebookBuild} from 'react-devtools-feature-flags';


i wonder if we should add a feature flag for this feature, i think probably we don't need to, but checking to see if @bvaughn has thoughts

bvaughn · 2021-10-29T13:49:01Z

Give me a few minutes. I'll take a look this morning.

bvaughn · 2021-10-29T14:09:57Z

@Sarkar44 If you have specific suggestions or ideas, they're welcome, but please don't leave vague comments on PRs. (I've noticed a few comments in the past 24 hours like this so I'm mentioning it explicitly.)

bvaughn · 2021-10-29T14:01:02Z

packages/react-devtools-extensions/webpack.config.js

@@ -92,6 +93,7 @@ module.exports = {
      __TEST__: NODE_ENV === 'test',
      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.EDITOR_URL': `"${EDITOR_URL}"`,


How do we feel about making this a user configurable setting that could maybe also accept a default initial value via process.env?

That way VS Code users outside of Facebook could also benefit from this.

bvaughn · 2021-10-29T14:02:15Z

packages/react-devtools-shared/src/devtools/views/ButtonIcon.js

@@ -268,3 +272,7 @@ const PATH_VIEW_DOM = `
 const PATH_VIEW_SOURCE = `
  M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z
  `;
+
+const PATH_VS_CODE = `
+  M 17.488281 2.394531 L 9.058594 10.148438 L 4.34375 6.597656 L 2.394531 7.730469 L 7.042969 12 L 2.394531 16.269531 L 4.34375 17.40625 L 9.058594 13.851562 L 17.488281 21.605469 L 21.605469 19.605469 L 21.605469 4.394531 Z M 17.488281 7.496094 L 17.488281 16.503906 L 11.511719 12 Z M 17.488281 7.496094


VS Code is pretty popular, and easily recognizable, but I wonder if we should use a more generic icon for this?

Maybe something like:

M7 5h10v2h2V3c0-1.1-.9-1.99-2-1.99L7 1c-1.1 0-2 .9-2 2v4h2V5zm8.41 11.59L20 12l-4.59-4.59L14 8.83 17.17 12 14 15.17l1.41 1.42zM10 15.17L6.83 12 10 8.83 8.59 7.41 4 12l4.59 4.59L10 15.17zM17 19H7v-2H5v4c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-4h-2v2z

Sorry to interrupt you. I want to ask how is this gigantic string get converted to an icon. I never saw something like this until now. what it is called tell me the name and I will learn about it online.

It's an SVG path.

Check out these components to see how it's used:

Icon:

react/packages/react-devtools-shared/src/devtools/views/Icon.js

Lines 88 to 98 in 9c8161b

return (

<svg

xmlns="http://www.w3.org/2000/svg"

className={`${styles.Icon} ${className}`}

width="24"

height="24"

viewBox="0 0 24 24">

<path d="M0 0h24v24H0z" fill="none" />

<path fill="currentColor" d={pathData} />

</svg>

);

ButtonIcon:

react/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js

Lines 140 to 154 in 9c8161b

return (

<svg

xmlns="http://www.w3.org/2000/svg"

className={`${styles.ButtonIcon} ${className}`}

width="24"

height="24"

viewBox="0 0 24 24">

<path d="M0 0h24v24H0z" fill="none" />

{typeof pathData === 'string' ? (

<path fill="currentColor" d={pathData} />

) : (

pathData

)}

</svg>

);

Thanks for the info. I got to know something new.

bvaughn · 2021-10-29T14:17:55Z

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

+    const url = new URL(editorURL);
+    url.searchParams.set('project', 'facebook-www');
+    url.searchParams.append('paths[0]', source.fileName);
+    url.searchParams.append('lines[0]', String(source.lineNumber));


Obviously this part is pretty Facebook-specific, so maybe my comment to leave this open for non-Facebook users is too optimistic for initial launch. Still, it seems like maybe there's something we could eventually do here.

What this URL ends up doing on the server side is just returning a redirect to the browser:

fb-vscode://nuclide.core/open-arc?project=facebook-www&path=...&line=...

VS Code supports a similar URL handler for the public releases, aka

vscode://file/c:/myProject/

So maybe the thing to do here would be for us to switch our behavior – whether we use the simple scheme like this or the Facebook specific URL query based on the isInternalFacebookBuild flag?

ezzak · 2021-11-01T05:41:00Z

Updated to make the url configurable:

Assumption: URL should have the two tokens "{path}" and "{line}" which we fill in, we kinda need these to be tokens as different apps do things differently.

VSCode Urls: https://code.visualstudio.com/docs/editor/command-line#_opening-vs-code-with-urls
Sublime Urls: https://github.com/asuth/subl-handler

bvaughn

Tested it with an OSS build and CRA:

open-in-editor.mp4

bvaughn · 2021-11-01T20:48:21Z

Also confirmed that it works in the extension:

jstejada · 2021-11-01T21:03:30Z

so good! excited for this to land!

bvaughn

This is, overall, great!

One requested change:

For the internal build, let's actually pre-fill in the editor URL value (rather than just a placeholder).

For the OSS version, we can leave the placeholder as the default (bc not everyone uses VSCode).

In other words...

OSS build:

No default value.
Placeholder text for vscode (like you currently have).

FB build (or whenever DevTools is built with process.env.EDITOR_URL):

Default value that equals process.env.EDITOR_URL.
Placeholder value equal to process.env.EDITOR_URL if default value is erased.

My thinking:

Practically everyone at FB uses VSCode and on-demand.
VS Code is popular externally but there are other editors too.

…and default it to env variable if present

ezzak · 2021-11-02T18:36:20Z

Addressed comments:

Updated behavior:

Without env variable:

process.env.EDITOR_URL defaulted to null. Setting is disabled by default. If user goes to settings they can see the vscode default url as a placeholder and use it if they wish to. If user types anything in this the setting gets enabled.

With env variable:

process.env.EDITOR_URL is a string. Setting is enabled by default and uses this url. If user goes to settings they can see it pre-filed in. If they delete it they can disable the setting or they can override it to a desired value.

useId is the updated version of this API.

bvaughn

Thanks for seeing this through! I'm going to push a few small tweaks, then we can land.

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

1. Removed an unnecessary console.log 2. Added extra space/padding around new editor URL setting 3. Removed 'restart needed' label and updated setting to listen for change event

Co-authored-by: Brian Vaughn <bvaughn@fb.com>

Devtools add open in vscode for fb

bd45952

facebook-github-bot added the CLA Signed label Oct 28, 2021

Sarkar44 approved these changes Oct 28, 2021

View reviewed changes

jstejada requested review from lunaruan, bvaughn and jstejada October 28, 2021 21:46

jstejada added the Component: Developer Tools label Oct 28, 2021

jstejada approved these changes Oct 28, 2021

View reviewed changes

bvaughn reviewed Oct 29, 2021

View reviewed changes

bvaughn mentioned this pull request Oct 29, 2021

PoC: support launch editor feature for selected component #20821

Closed

configurable editor

5c4a531

ezzak and others added 3 commits October 31, 2021 22:46

configurable editor

e5b7dc1

format files

50096b0

Merge branch 'facebook:main' into main

5f30f77

ezzak requested a review from bvaughn November 1, 2021 18:22

bvaughn reviewed Nov 1, 2021

View reviewed changes

ezzak added 4 commits November 2, 2021 11:24

Disable functionality by default, make local storage source of truth …

033da12

…and default it to env variable if present

Merge branch 'main' of https://github.com/ezzak/react

165024c

fix prettier

6608106

fix bug in default value for env variable case

555ad58

Dino1981 referenced this pull request Nov 2, 2021

Remove experimental useOpaqueIdentifier API (#22672)

75f3dde

useId is the updated version of this API.

bvaughn approved these changes Nov 3, 2021

View reviewed changes

Couple of minor tweaks:

9550c04

1. Removed an unnecessary console.log 2. Added extra space/padding around new editor URL setting 3. Removed 'restart needed' label and updated setting to listen for change event

bvaughn merged commit 255221c into facebook:main Nov 3, 2021

ezzak changed the title ~~[DevTools] Add open in editor for fb~~ [DevTools] Add open in editor Nov 3, 2021

KamranAsif pushed a commit to KamranAsif/react that referenced this pull request Nov 4, 2021

[DevTools] Add open in editor for fb (facebook#22649)

0a9b377

Co-authored-by: Brian Vaughn <bvaughn@fb.com>

Airkro mentioned this pull request Dec 21, 2021

Feature Request(devtools): launch-editor for selected component #20435

Closed

zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022

[DevTools] Add open in editor for fb (facebook#22649)

0e48a88

Co-authored-by: Brian Vaughn <bvaughn@fb.com>

sudo888samewick mentioned this pull request Nov 27, 2023

Duplicate with the official devtool feature?（官方的 Devtool 是否已经实现类似功能） zthxxx/react-dev-inspector#157

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DevTools] Add open in editor #22649

[DevTools] Add open in editor #22649

ezzak commented Oct 28, 2021 •

edited

Sarkar44 left a comment

jstejada left a comment

jstejada Oct 28, 2021

bvaughn commented Oct 29, 2021

bvaughn commented Oct 29, 2021

bvaughn Oct 29, 2021

bvaughn Oct 29, 2021

akgupta0777 Oct 29, 2021

bvaughn Oct 29, 2021

akgupta0777 Oct 29, 2021

bvaughn Oct 29, 2021

bvaughn Oct 29, 2021 •

edited

ezzak commented Nov 1, 2021

bvaughn left a comment

bvaughn commented Nov 1, 2021

jstejada commented Nov 1, 2021

bvaughn left a comment •

edited

ezzak commented Nov 2, 2021

bvaughn left a comment

	return (
	<svg
	xmlns="http://www.w3.org/2000/svg"
	className={`${styles.Icon} ${className}`}
	width="24"
	height="24"
	viewBox="0 0 24 24">
	<path d="M0 0h24v24H0z" fill="none" />
	<path fill="currentColor" d={pathData} />
	</svg>
	);

[DevTools] Add open in editor #22649

[DevTools] Add open in editor #22649

Conversation

ezzak commented Oct 28, 2021 • edited

Summary

Test Plan

Sarkar44 left a comment

Choose a reason for hiding this comment

jstejada left a comment

Choose a reason for hiding this comment

jstejada Oct 28, 2021

Choose a reason for hiding this comment

bvaughn commented Oct 29, 2021

bvaughn commented Oct 29, 2021

bvaughn Oct 29, 2021

Choose a reason for hiding this comment

bvaughn Oct 29, 2021

Choose a reason for hiding this comment

akgupta0777 Oct 29, 2021

Choose a reason for hiding this comment

bvaughn Oct 29, 2021

Choose a reason for hiding this comment

akgupta0777 Oct 29, 2021

Choose a reason for hiding this comment

bvaughn Oct 29, 2021

Choose a reason for hiding this comment

bvaughn Oct 29, 2021 • edited

Choose a reason for hiding this comment

ezzak commented Nov 1, 2021

bvaughn left a comment

Choose a reason for hiding this comment

bvaughn commented Nov 1, 2021

jstejada commented Nov 1, 2021

bvaughn left a comment • edited

Choose a reason for hiding this comment

ezzak commented Nov 2, 2021

bvaughn left a comment

Choose a reason for hiding this comment

ezzak commented Oct 28, 2021 •

edited

bvaughn Oct 29, 2021 •

edited

bvaughn left a comment •

edited