{"patch":"diff --git a\/packages\/react-devtools-core\/webpack.standalone.js b\/packages\/react-devtools-core\/webpack.standalone.js\nindex 9d7c1fc34a..234d638353 100644\n--- a\/packages\/react-devtools-core\/webpack.standalone.js\n+++ b\/packages\/react-devtools-core\/webpack.standalone.js\n@@ -30,6 +30,7 @@ const __DEV__ = NODE_ENV === 'development';\n \n const DEVTOOLS_VERSION = getVersionString();\n \n+const EDITOR_URL = process.env.EDITOR_URL || null;\n const LOGGING_URL = process.env.LOGGING_URL || null;\n \n const featureFlagTarget =\n@@ -83,6 +84,7 @@ module.exports = {\n __TEST__: NODE_ENV === 'test',\n 'process.env.DEVTOOLS_PACKAGE': `\"react-devtools-core\"`,\n 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.EDITOR_URL': EDITOR_URL != null ? `\"${EDITOR_URL}\"` : null,\n 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n 'process.env.LOGGING_URL': `\"${LOGGING_URL}\"`,\n 'process.env.NODE_ENV': `\"${NODE_ENV}\"`,\ndiff --git a\/packages\/react-devtools-extensions\/webpack.config.js b\/packages\/react-devtools-extensions\/webpack.config.js\nindex 99b1d18d3a..ac7c51f3bd 100644\n--- a\/packages\/react-devtools-extensions\/webpack.config.js\n+++ b\/packages\/react-devtools-extensions\/webpack.config.js\n@@ -32,6 +32,7 @@ const __DEV__ = NODE_ENV === 'development';\n \n const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);\n \n+const EDITOR_URL = process.env.EDITOR_URL || null;\n const LOGGING_URL = process.env.LOGGING_URL || null;\n \n const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';\n@@ -92,6 +93,7 @@ module.exports = {\n __TEST__: NODE_ENV === 'test',\n 'process.env.DEVTOOLS_PACKAGE': `\"react-devtools-extensions\"`,\n 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.EDITOR_URL': EDITOR_URL != null ? `\"${EDITOR_URL}\"` : null,\n 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n 'process.env.LOGGING_URL': `\"${LOGGING_URL}\"`,\n 'process.env.NODE_ENV': `\"${NODE_ENV}\"`,\ndiff --git a\/packages\/react-devtools-inline\/webpack.config.js b\/packages\/react-devtools-inline\/webpack.config.js\nindex 7c2325bf70..ab7bcb8be3 100644\n--- a\/packages\/react-devtools-inline\/webpack.config.js\n+++ b\/packages\/react-devtools-inline\/webpack.config.js\n@@ -20,6 +20,8 @@ if (!NODE_ENV) {\n \n const __DEV__ = NODE_ENV === 'development';\n \n+const EDITOR_URL = process.env.EDITOR_URL || null;\n+\n const DEVTOOLS_VERSION = getVersionString();\n \n const babelOptions = {\n@@ -76,6 +78,7 @@ module.exports = {\n __TEST__: NODE_ENV === 'test',\n 'process.env.DEVTOOLS_PACKAGE': `\"react-devtools-inline\"`,\n 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.EDITOR_URL': EDITOR_URL != null ? `\"${EDITOR_URL}\"` : null,\n 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n 'process.env.NODE_ENV': `\"${NODE_ENV}\"`,\n 'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `\"${DARK_MODE_DIMMED_WARNING_COLOR}\"`,\ndiff --git a\/packages\/react-devtools-shared\/src\/constants.js b\/packages\/react-devtools-shared\/src\/constants.js\nindex 3c3aaae2fc..798bdb9d90 100644\n--- a\/packages\/react-devtools-shared\/src\/constants.js\n+++ b\/packages\/react-devtools-shared\/src\/constants.js\n@@ -32,6 +32,9 @@ export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =\n export const SESSION_STORAGE_LAST_SELECTION_KEY =\n 'React::DevTools::lastSelection';\n \n+export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL =\n+ 'React::DevTools::openInEditorUrl';\n+\n export const LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY =\n 'React::DevTools::parseHookNames';\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/ButtonIcon.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/ButtonIcon.js\nindex 8239a765f9..b384018671 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/ButtonIcon.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/ButtonIcon.js\n@@ -19,6 +19,7 @@ export type IconType =\n | 'copy'\n | 'delete'\n | 'down'\n+ | 'editor'\n | 'expanded'\n | 'export'\n | 'filter'\n@@ -72,6 +73,9 @@ export default function ButtonIcon({className = '', type}: Props) {\n case 'down':\n pathData = PATH_DOWN;\n break;\n+ case 'editor':\n+ pathData = PATH_EDITOR;\n+ break;\n case 'expanded':\n pathData = PATH_EXPANDED;\n break;\n@@ -268,3 +272,7 @@ const PATH_VIEW_DOM = `\n const PATH_VIEW_SOURCE = `\n 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\n `;\n+\n+const PATH_EDITOR = `\n+ 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\n+`;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElement.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElement.js\nindex f63da7b54a..9ebd30a6ec 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElement.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElement.js\n@@ -8,7 +8,7 @@\n *\/\n \n import * as React from 'react';\n-import {useCallback, useContext} from 'react';\n+import {useCallback, useContext, useSyncExternalStore} from 'react';\n import {TreeDispatcherContext, TreeStateContext} from '.\/TreeContext';\n import {BridgeContext, StoreContext, OptionsContext} from '..\/context';\n import Button from '..\/Button';\n@@ -20,6 +20,8 @@ import {ElementTypeSuspense} from 'react-devtools-shared\/src\/types';\n import CannotSuspendWarningMessage from '.\/CannotSuspendWarningMessage';\n import InspectedElementView from '.\/InspectedElementView';\n import {InspectedElementContext} from '.\/InspectedElementContext';\n+import {getOpenInEditorURL} from '..\/..\/..\/utils';\n+import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '..\/..\/..\/constants';\n \n import styles from '.\/InspectedElement.css';\n \n@@ -123,6 +125,21 @@ export default function InspectedElementWrapper(_: Props) {\n inspectedElement != null &&\n inspectedElement.canToggleSuspense;\n \n+ const editorURL = useSyncExternalStore(\n+ function subscribe(callback) {\n+ window.addEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);\n+ return function unsubscribe() {\n+ window.removeEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);\n+ };\n+ },\n+ function getState() {\n+ return getOpenInEditorURL();\n+ },\n+ );\n+\n+ const canOpenInEditor =\n+ editorURL && inspectedElement != null && inspectedElement.source != null;\n+\n const toggleErrored = useCallback(() => {\n if (inspectedElement == null || targetErrorBoundaryID == null) {\n return;\n@@ -198,6 +215,18 @@ export default function InspectedElementWrapper(_: Props) {\n }\n }, [bridge, dispatch, element, isSuspended, modalDialogDispatch, store]);\n \n+ const onOpenInEditor = useCallback(() => {\n+ const source = inspectedElement?.source;\n+ if (source == null || editorURL == null) {\n+ return;\n+ }\n+\n+ const url = new URL(editorURL);\n+ url.href = url.href.replace('{path}', source.fileName);\n+ url.href = url.href.replace('{line}', String(source.lineNumber));\n+ window.open(url);\n+ }, [inspectedElement, editorURL]);\n+\n if (element === null) {\n return (\n

\n@@ -223,7 +252,14 @@ export default function InspectedElementWrapper(_: Props) {\n {element.displayName}\n <\/div>\n <\/div>\n-\n+ {canOpenInEditor && (\n+ \n+ \n+ <\/Button>\n+ )}\n {canToggleError && (\n (\n+ LOCAL_STORAGE_OPEN_IN_EDITOR_URL,\n+ getDefaultOpenInEditorURL(),\n+ );\n+\n const [componentFilters, setComponentFilters] = useState<\n Array,\n >(() => [...store.componentFilters]);\n@@ -271,6 +278,19 @@ export default function ComponentsSettings(_: {||}) {\n (may be slow)<\/span>\n <\/label>\n \n+ \n+ Open in Editor URL:{' '}\n+ {\n+ setOpenInEditorURL(event.target.value);\n+ }}\n+ \/>\n+ <\/label>\n+\n

Hide components where...<\/div>\n \n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsShared.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsShared.css\nindex 3ddaf13907..9c0ee028c9 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsShared.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsShared.css\n@@ -14,6 +14,10 @@\n margin-bottom: 0;\n }\n \n+.OpenInURLSetting {\n+ margin: 0.5rem 0;\n+}\n+\n .OptionGroup {\n display: inline-flex;\n flex-direction: row;\n@@ -30,6 +34,10 @@\n margin-right: 0.5rem;\n }\n \n+.Spacer {\n+ height: 0.5rem;\n+}\n+\n .Select {\n }\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/hooks.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/hooks.js\nindex 76dad56774..1a34373fc7 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/hooks.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/hooks.js\n@@ -170,6 +170,9 @@ export function useLocalStorage(\n value instanceof Function ? (value: any)(storedValue) : value;\n setStoredValue(valueToStore);\n localStorageSetItem(key, JSON.stringify(valueToStore));\n+\n+ \/\/ Notify listeners that this setting has changed.\n+ window.dispatchEvent(new Event(key));\n } catch (error) {\n console.log(error);\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/utils.js b\/packages\/react-devtools-shared\/src\/utils.js\nindex 84c977f19d..0c50374ae3 100644\n--- a\/packages\/react-devtools-shared\/src\/utils.js\n+++ b\/packages\/react-devtools-shared\/src\/utils.js\n@@ -34,6 +34,7 @@ import {\n import {ElementTypeRoot} from 'react-devtools-shared\/src\/types';\n import {\n LOCAL_STORAGE_FILTER_PREFERENCES_KEY,\n+ LOCAL_STORAGE_OPEN_IN_EDITOR_URL,\n LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,\n LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,\n LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,\n@@ -386,6 +387,22 @@ export function setShowInlineWarningsAndErrors(value: boolean): void {\n );\n }\n \n+export function getDefaultOpenInEditorURL(): string {\n+ return typeof process.env.EDITOR_URL === 'string'\n+ ? process.env.EDITOR_URL\n+ : '';\n+}\n+\n+export function getOpenInEditorURL(): string {\n+ try {\n+ const raw = localStorageGetItem(LOCAL_STORAGE_OPEN_IN_EDITOR_URL);\n+ if (raw != null) {\n+ return JSON.parse(raw);\n+ }\n+ } catch (error) {}\n+ return getDefaultOpenInEditorURL();\n+}\n+\n export function separateDisplayNameAndHOCs(\n displayName: string | null,\n type: ElementType,\ndiff --git a\/packages\/react-devtools-shell\/webpack.config.js b\/packages\/react-devtools-shell\/webpack.config.js\nindex 19f53f5d08..18c55d1d8b 100644\n--- a\/packages\/react-devtools-shell\/webpack.config.js\n+++ b\/packages\/react-devtools-shell\/webpack.config.js\n@@ -24,6 +24,8 @@ if (!TARGET) {\n process.exit(1);\n }\n \n+const EDITOR_URL = process.env.EDITOR_URL || null;\n+\n const builtModulesDir = resolve(\n __dirname,\n '..',\n@@ -69,6 +71,7 @@ const config = {\n __PROFILE__: false,\n __TEST__: NODE_ENV === 'test',\n 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n+ 'process.env.EDITOR_URL': EDITOR_URL != null ? `\"${EDITOR_URL}\"` : null,\n 'process.env.DEVTOOLS_PACKAGE': `\"react-devtools-shell\"`,\n 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n 'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `\"${DARK_MODE_DIMMED_WARNING_COLOR}\"`,\n","body":"Co-authored-by: Brian Vaughn ","files":[{"status":"M","path":"packages\/react-devtools-core\/webpack.standalone.js"},{"status":"M","path":"packages\/react-devtools-extensions\/webpack.config.js"},{"status":"M","path":"packages\/react-devtools-inline\/webpack.config.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/constants.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/ButtonIcon.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElement.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/ComponentsSettings.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsShared.css"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/hooks.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/utils.js"},{"status":"M","path":"packages\/react-devtools-shell\/webpack.config.js"}],"commit":{"revision":"255221c86930e31c144713eb466bf0a00ab8fd7e","authoredAt":"2021-11-03T08:27:30-07:00","authorName":"EzzAk","subject":"[DevTools] Add open in editor for fb (#22649)","authorEmail":"ezz1994@gmail.com","shortRevision":"255221c869"},"parents":["00ced1e2b7610543a519329a76ad0bfd12cd1c32"]}

dillon1000/react

Files changed