From f005309ac82a04264302e20819ebe09766698f39 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Thu, 24 Jul 2025 14:09:56 -0400
Subject: [PATCH 1/7] Extract useOpenResource helper to open a source location
 generally

---
 .../views/Components/InspectedElement.js      |  3 +-
 .../Components/InspectedElementSourcePanel.js | 22 ++-----
 .../InspectedElementViewSourceButton.js       | 45 +++-----------
 .../views/Profiler/SidebarEventInfo.js        | 18 ++----
 .../src/devtools/views/useOpenResource.js     | 60 +++++++++++++++++++
 5 files changed, 77 insertions(+), 71 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/useOpenResource.js

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 8210e12331b..0daa7f51536 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -271,8 +271,7 @@ export default function InspectedElementWrapper(_: Props): React.Node {
 
         {!hideViewSourceAction && (
           <InspectedElementViewSourceButton
-            canViewSource={inspectedElement?.canViewSource}
-            source={inspectedElement?.source}
+            source={inspectedElement ? inspectedElement.source : null}
             symbolicatedSourcePromise={symbolicatedSourcePromise}
           />
         )}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js
index 91780cdc13d..585361cedcf 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js
@@ -8,7 +8,6 @@
  */
 
 import * as React from 'react';
-import {useCallback, useContext} from 'react';
 import {copy} from 'clipboard-js';
 import {toNormalUrl} from 'jsc-safe-url';
 
@@ -17,7 +16,7 @@ import ButtonIcon from '../ButtonIcon';
 import Skeleton from './Skeleton';
 import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
 
-import ViewElementSourceContext from './ViewElementSourceContext';
+import useOpenResource from '../useOpenResource';
 
 import type {ReactFunctionLocation} from 'shared/ReactTypes';
 import styles from './InspectedElementSourcePanel.css';
@@ -91,24 +90,11 @@ function CopySourceButton({source, symbolicatedSourcePromise}: Props) {
 function FormattedSourceString({source, symbolicatedSourcePromise}: Props) {
   const symbolicatedSource = React.use(symbolicatedSourcePromise);
 
-  const {canViewElementSourceFunction, viewElementSourceFunction} = useContext(
-    ViewElementSourceContext,
+  const [linkIsEnabled, viewSource] = useOpenResource(
+    source,
+    symbolicatedSource,
   );
 
-  // In some cases (e.g. FB internal usage) the standalone shell might not be able to view the source.
-  // To detect this case, we defer to an injected helper function (if present).
-  const linkIsEnabled =
-    viewElementSourceFunction != null &&
-    source != null &&
-    (canViewElementSourceFunction == null ||
-      canViewElementSourceFunction(source, symbolicatedSource));
-
-  const viewSource = useCallback(() => {
-    if (viewElementSourceFunction != null && source != null) {
-      viewElementSourceFunction(source, symbolicatedSource);
-    }
-  }, [source, symbolicatedSource]);
-
   const [, sourceURL, line] =
     symbolicatedSource == null ? source : symbolicatedSource;
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementViewSourceButton.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementViewSourceButton.js
index 6043bb61df9..23d4cf96c82 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementViewSourceButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementViewSourceButton.js
@@ -11,79 +11,48 @@ import * as React from 'react';
 
 import ButtonIcon from '../ButtonIcon';
 import Button from '../Button';
-import ViewElementSourceContext from './ViewElementSourceContext';
 import Skeleton from './Skeleton';
 
 import type {ReactFunctionLocation} from 'shared/ReactTypes';
-import type {
-  CanViewElementSource,
-  ViewElementSource,
-} from 'react-devtools-shared/src/devtools/views/DevTools';
 
-const {useCallback, useContext} = React;
+import useOpenResource from '../useOpenResource';
 
 type Props = {
-  canViewSource: ?boolean,
-  source: ?ReactFunctionLocation,
+  source: null | ReactFunctionLocation,
   symbolicatedSourcePromise: Promise<ReactFunctionLocation | null> | null,
 };
 
 function InspectedElementViewSourceButton({
-  canViewSource,
   source,
   symbolicatedSourcePromise,
 }: Props): React.Node {
-  const {canViewElementSourceFunction, viewElementSourceFunction} = useContext(
-    ViewElementSourceContext,
-  );
-
   return (
     <React.Suspense fallback={<Skeleton height={16} width={24} />}>
       <ActualSourceButton
-        canViewSource={canViewSource}
         source={source}
         symbolicatedSourcePromise={symbolicatedSourcePromise}
-        canViewElementSourceFunction={canViewElementSourceFunction}
-        viewElementSourceFunction={viewElementSourceFunction}
       />
     </React.Suspense>
   );
 }
 
 type ActualSourceButtonProps = {
-  canViewSource: ?boolean,
-  source: ?ReactFunctionLocation,
+  source: null | ReactFunctionLocation,
   symbolicatedSourcePromise: Promise<ReactFunctionLocation | null> | null,
-  canViewElementSourceFunction: CanViewElementSource | null,
-  viewElementSourceFunction: ViewElementSource | null,
 };
 function ActualSourceButton({
-  canViewSource,
   source,
   symbolicatedSourcePromise,
-  canViewElementSourceFunction,
-  viewElementSourceFunction,
 }: ActualSourceButtonProps): React.Node {
   const symbolicatedSource =
     symbolicatedSourcePromise == null
       ? null
       : React.use(symbolicatedSourcePromise);
 
-  // In some cases (e.g. FB internal usage) the standalone shell might not be able to view the source.
-  // To detect this case, we defer to an injected helper function (if present).
-  const buttonIsEnabled =
-    !!canViewSource &&
-    viewElementSourceFunction != null &&
-    source != null &&
-    (canViewElementSourceFunction == null ||
-      canViewElementSourceFunction(source, symbolicatedSource));
-
-  const viewSource = useCallback(() => {
-    if (viewElementSourceFunction != null && source != null) {
-      viewElementSourceFunction(source, symbolicatedSource);
-    }
-  }, [source, symbolicatedSource]);
-
+  const [buttonIsEnabled, viewSource] = useOpenResource(
+    source,
+    symbolicatedSource,
+  );
   return (
     <Button
       disabled={!buttonIsEnabled}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
index b7b031a990c..77f0d13feb7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
@@ -12,7 +12,6 @@ import type {SchedulingEvent} from 'react-devtools-timeline/src/types';
 import * as React from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import ViewElementSourceContext from '../Components/ViewElementSourceContext';
 import {useContext} from 'react';
 import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
 import {
@@ -22,6 +21,7 @@ import {
 import {stackToComponentLocations} from 'react-devtools-shared/src/devtools/utils';
 import {copy} from 'clipboard-js';
 import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
+import useOpenResource from '../useOpenResource';
 
 import styles from './SidebarEventInfo.css';
 
@@ -32,9 +32,6 @@ type SchedulingEventProps = {
 };
 
 function SchedulingEventInfo({eventInfo}: SchedulingEventProps) {
-  const {canViewElementSourceFunction, viewElementSourceFunction} = useContext(
-    ViewElementSourceContext,
-  );
   const {componentName, timestamp} = eventInfo;
   const componentStack = eventInfo.componentStack || null;
 
@@ -79,15 +76,10 @@ function SchedulingEventInfo({eventInfo}: SchedulingEventProps) {
 
                     // TODO: We should support symbolication here as well, but
                     // symbolicating the whole stack can be expensive
-                    const canViewSource =
-                      canViewElementSourceFunction == null ||
-                      canViewElementSourceFunction(location, null);
-
-                    const viewSource =
-                      !canViewSource || viewElementSourceFunction == null
-                        ? () => null
-                        : () => viewElementSourceFunction(location, null);
-
+                    const [canViewSource, viewSource] = useOpenResource(
+                      location,
+                      null,
+                    );
                     return (
                       <li key={index}>
                         <Button
diff --git a/packages/react-devtools-shared/src/devtools/views/useOpenResource.js b/packages/react-devtools-shared/src/devtools/views/useOpenResource.js
new file mode 100644
index 00000000000..0d4eab38dcf
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/useOpenResource.js
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactFunctionLocation} from 'shared/ReactTypes';
+
+import {useCallback, useContext, useSyncExternalStore} from 'react';
+
+import ViewElementSourceContext from './Components/ViewElementSourceContext';
+
+import {getOpenInEditorURL} from '../../utils';
+import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '../../constants';
+
+const useOpenResource = (
+  source: null | ReactFunctionLocation,
+  symbolicatedSource: null | ReactFunctionLocation,
+): [
+  boolean, // isEnabled
+  () => void, // Open Resource
+] => {
+  const {canViewElementSourceFunction, viewElementSourceFunction} = useContext(
+    ViewElementSourceContext,
+  );
+
+  // TODO: const editorURL =
+  useSyncExternalStore(
+    function subscribe(callback) {
+      window.addEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+      return function unsubscribe() {
+        window.removeEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+      };
+    },
+    function getState() {
+      return getOpenInEditorURL();
+    },
+  );
+
+  // In some cases (e.g. FB internal usage) the standalone shell might not be able to view the source.
+  // To detect this case, we defer to an injected helper function (if present).
+  const linkIsEnabled =
+    viewElementSourceFunction != null &&
+    source != null &&
+    (canViewElementSourceFunction == null ||
+      canViewElementSourceFunction(source, symbolicatedSource));
+
+  const viewSource = useCallback(() => {
+    if (viewElementSourceFunction != null && source != null) {
+      viewElementSourceFunction(source, symbolicatedSource);
+    }
+  }, [source, symbolicatedSource]);
+
+  return [linkIsEnabled, viewSource];
+};
+
+export default useOpenResource;

From 81ec0be8dfac185873c2eb543ed5e69e1fe0b11e Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Thu, 24 Jul 2025 14:15:47 -0400
Subject: [PATCH 2/7] Add option to always open in editor

---
 .../react-devtools-shared/src/constants.js    |  2 +
 .../src/devtools/views/useOpenResource.js     | 55 ++++++++++++++-----
 packages/react-devtools-shared/src/utils.js   |  9 +++
 3 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index b0873816590..fa32ead1e93 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -37,6 +37,8 @@ export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL =
   'React::DevTools::openInEditorUrl';
 export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET =
   'React::DevTools::openInEditorUrlPreset';
+export const LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR =
+  'React::DevTools::alwaysOpenInEditor';
 export const LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY =
   'React::DevTools::parseHookNames';
 export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
diff --git a/packages/react-devtools-shared/src/devtools/views/useOpenResource.js b/packages/react-devtools-shared/src/devtools/views/useOpenResource.js
index 0d4eab38dcf..112d0a98772 100644
--- a/packages/react-devtools-shared/src/devtools/views/useOpenResource.js
+++ b/packages/react-devtools-shared/src/devtools/views/useOpenResource.js
@@ -13,8 +13,13 @@ import {useCallback, useContext, useSyncExternalStore} from 'react';
 
 import ViewElementSourceContext from './Components/ViewElementSourceContext';
 
-import {getOpenInEditorURL} from '../../utils';
-import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '../../constants';
+import {getOpenInEditorURL, getAlwaysOpenInEditor} from '../../utils';
+import {
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
+  LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
+} from '../../constants';
+
+import {checkConditions} from './Editor/utils';
 
 const useOpenResource = (
   source: null | ReactFunctionLocation,
@@ -27,32 +32,52 @@ const useOpenResource = (
     ViewElementSourceContext,
   );
 
-  // TODO: const editorURL =
-  useSyncExternalStore(
-    function subscribe(callback) {
+  const editorURL = useSyncExternalStore(
+    useCallback(function subscribe(callback) {
       window.addEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
       return function unsubscribe() {
         window.removeEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
       };
-    },
-    function getState() {
-      return getOpenInEditorURL();
-    },
+    }, []),
+    getOpenInEditorURL,
+  );
+
+  const alwaysOpenInEditor = useSyncExternalStore(
+    useCallback(function subscribe(callback) {
+      window.addEventListener(LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR, callback);
+      return function unsubscribe() {
+        window.removeEventListener(
+          LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
+          callback,
+        );
+      };
+    }, []),
+    getAlwaysOpenInEditor,
   );
 
+  // First check if this link is eligible for being open directly in the configured editor.
+  const openInEditor =
+    alwaysOpenInEditor && source !== null
+      ? checkConditions(editorURL, symbolicatedSource || source)
+      : null;
   // In some cases (e.g. FB internal usage) the standalone shell might not be able to view the source.
   // To detect this case, we defer to an injected helper function (if present).
   const linkIsEnabled =
-    viewElementSourceFunction != null &&
-    source != null &&
-    (canViewElementSourceFunction == null ||
-      canViewElementSourceFunction(source, symbolicatedSource));
+    (openInEditor !== null && !openInEditor.shouldDisableButton) ||
+    (viewElementSourceFunction != null &&
+      source != null &&
+      (canViewElementSourceFunction == null ||
+        canViewElementSourceFunction(source, symbolicatedSource)));
 
   const viewSource = useCallback(() => {
-    if (viewElementSourceFunction != null && source != null) {
+    if (openInEditor !== null && !openInEditor.shouldDisableButton) {
+      // If we have configured to always open in the code editor, we do so if we can.
+      // Otherwise, we fallback to open in the local editor if possible (e.g. non-file urls).
+      window.open(openInEditor.url);
+    } else if (viewElementSourceFunction != null && source != null) {
       viewElementSourceFunction(source, symbolicatedSource);
     }
-  }, [source, symbolicatedSource]);
+  }, [openInEditor, source, symbolicatedSource]);
 
   return [linkIsEnabled, viewSource];
 };
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 5d92a86e2e6..eb4044909eb 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -35,6 +35,7 @@ import {
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
   LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
   LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
+  LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
   SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
   SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
   SESSION_STORAGE_RECORD_TIMELINE_KEY,
@@ -400,6 +401,14 @@ export function getOpenInEditorURL(): string {
   return getDefaultOpenInEditorURL();
 }
 
+export function getAlwaysOpenInEditor(): boolean {
+  try {
+    const raw = localStorageGetItem(LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR);
+    return raw === 'true';
+  } catch (error) {}
+  return false;
+}
+
 type ParseElementDisplayNameFromBackendReturn = {
   formattedDisplayName: string | null,
   hocDisplayNames: Array<string> | null,

From b09624f8887746f94d4a5cce18e012036856d6ef Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Thu, 24 Jul 2025 14:58:47 -0400
Subject: [PATCH 3/7] Hide open in editor button if we're always opening in
 editor anyway

---
 .../views/Components/InspectedElement.js      | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 0daa7f51536..0c980f0db48 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -18,8 +18,11 @@ import Toggle from '../Toggle';
 import {ElementTypeSuspense} from 'react-devtools-shared/src/frontend/types';
 import InspectedElementView from './InspectedElementView';
 import {InspectedElementContext} from './InspectedElementContext';
-import {getOpenInEditorURL} from '../../../utils';
-import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '../../../constants';
+import {getOpenInEditorURL, getAlwaysOpenInEditor} from '../../../utils';
+import {
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
+  LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
+} from '../../../constants';
 import FetchFileWithCachingContext from './FetchFileWithCachingContext';
 import {symbolicateSourceWithCache} from 'react-devtools-shared/src/symbolicateSource';
 import OpenInEditorButton from './OpenInEditorButton';
@@ -118,18 +121,26 @@ export default function InspectedElementWrapper(_: Props): React.Node {
     inspectedElement != null &&
     inspectedElement.canToggleSuspense;
 
-  const editorURL = useSyncExternalStore(
-    function subscribe(callback) {
-      window.addEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+  const alwaysOpenInEditor = useSyncExternalStore(
+    useCallback(function subscribe(callback) {
+      window.addEventListener(LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR, callback);
       return function unsubscribe() {
-        window.removeEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+        window.removeEventListener(
+          LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
+          callback,
+        );
       };
-    },
-    function getState() {
-      return getOpenInEditorURL();
-    },
+    }, []),
+    getAlwaysOpenInEditor,
   );
 
+  const editorURL = useSyncExternalStore(function subscribe(callback) {
+    window.addEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+    return function unsubscribe() {
+      window.removeEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+    };
+  }, getOpenInEditorURL);
+
   const toggleErrored = useCallback(() => {
     if (inspectedElement == null) {
       return;
@@ -217,7 +228,8 @@ export default function InspectedElementWrapper(_: Props): React.Node {
           </div>
         </div>
 
-        {!!editorURL &&
+        {!alwaysOpenInEditor &&
+          !!editorURL &&
           inspectedElement != null &&
           inspectedElement.source != null &&
           symbolicatedSourcePromise != null && (

From bb8cda6082eed28d2f4c977044a190f2c65cc529 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Thu, 24 Jul 2025 15:30:40 -0400
Subject: [PATCH 4/7] Use external store as source of truth

This lets us update when any other hooks makes changes in the same window.
---
 .../src/devtools/views/hooks.js               | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index 68143d33156..c17032ecc72 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -13,6 +13,7 @@ import {
   useLayoutEffect,
   useReducer,
   useState,
+  useSyncExternalStore,
   useContext,
 } from 'react';
 import {
@@ -162,14 +163,24 @@ export function useLocalStorage<T>(
     }
   }, [initialValue, key]);
 
-  const [storedValue, setStoredValue] = useState<any>(getValueFromLocalStorage);
+  const storedValue = useSyncExternalStore(
+    useCallback(
+      function subscribe(callback) {
+        window.addEventListener(key, callback);
+        return function unsubscribe() {
+          window.removeEventListener(key, callback);
+        };
+      },
+      [key],
+    ),
+    getValueFromLocalStorage,
+  );
 
   const setValue = useCallback(
     (value: $FlowFixMe) => {
       try {
         const valueToStore =
           value instanceof Function ? (value: any)(storedValue) : value;
-        setStoredValue(valueToStore);
         localStorageSetItem(key, JSON.stringify(valueToStore));
 
         // Notify listeners that this setting has changed.
@@ -196,10 +207,21 @@ export function useLocalStorage<T>(
       }
     };
 
+    const onLocalChange = () => {
+      const newValue = getValueFromLocalStorage();
+      if (storedValue !== newValue) {
+        setValue(newValue);
+      }
+    };
+
     window.addEventListener('storage', onStorage);
 
+    // Also listen to changes from other components in the same window.
+    window.addEventListener(key, onLocalChange);
+
     return () => {
       window.removeEventListener('storage', onStorage);
+      window.removeEventListener(key, onLocalChange);
     };
   }, [getValueFromLocalStorage, key, storedValue, setValue]);
 

From 819129cf00479fd96648e5e6299282bde0e3ce2e Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Thu, 24 Jul 2025 15:22:07 -0400
Subject: [PATCH 5/7] Add setting panes to open local files in the code editor

---
 .../src/main/index.js                         |  2 +-
 .../src/devtools/views/Editor/EditorPane.css  | 18 +++++--
 .../src/devtools/views/Editor/EditorPane.js   | 47 ++++++++++++-------
 .../views/Settings/CodeEditorByDefault.js     | 35 ++++++++++++++
 .../views/Settings/CodeEditorOptions.js       |  2 +-
 .../views/Settings/GeneralSettings.js         | 17 +++++++
 .../src/devtools/views/hooks.js               | 12 -----
 7 files changed, 99 insertions(+), 34 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorByDefault.js

diff --git a/packages/react-devtools-extensions/src/main/index.js b/packages/react-devtools-extensions/src/main/index.js
index d7756ca991b..5bb94ea1ccd 100644
--- a/packages/react-devtools-extensions/src/main/index.js
+++ b/packages/react-devtools-extensions/src/main/index.js
@@ -326,7 +326,7 @@ function createSourcesEditorPanel() {
     editorPane = createdPane;
 
     createdPane.setPage('panel.html');
-    createdPane.setHeight('42px');
+    createdPane.setHeight('75px');
 
     createdPane.onShown.addListener(portal => {
       editorPortalContainer = portal.container;
diff --git a/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.css b/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.css
index 00fa9bc44a5..a4a4adbfa9f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.css
+++ b/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.css
@@ -1,12 +1,9 @@
 .EditorPane {
   position: relative;
-  display: flex;
-  flex-direction: row;
+  display: block;
   background-color: var(--color-background);
   color: var(--color-text);
   font-family: var(--font-family-sans);
-  align-items: center;
-  padding: 0.5rem;
 }
 
 .EditorPane, .EditorPane * {
@@ -14,6 +11,19 @@
   -webkit-font-smoothing: var(--font-smoothing);
 }
 
+.EditorToolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.EditorInfo {
+  padding: 0.5rem;
+  text-align: center;
+}
+
 .VRule {
   height: 20px;
   width: 1px;
diff --git a/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js b/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js
index 87ea39e724a..09c76e1d26e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js
+++ b/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js
@@ -22,6 +22,7 @@ import {getOpenInEditorURL} from '../../../utils';
 import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '../../../constants';
 
 import EditorSettings from './EditorSettings';
+import CodeEditorByDefault from '../Settings/CodeEditorByDefault';
 
 export type SourceSelection = {
   url: string,
@@ -49,9 +50,10 @@ function EditorPane({selectedSource}: Props) {
     },
   );
 
+  let editorToolbar;
   if (showSettings) {
-    return (
-      <div className={styles.EditorPane}>
+    editorToolbar = (
+      <div className={styles.EditorToolbar}>
         <EditorSettings />
         <div className={styles.VRule} />
         <Button onClick={() => startTransition(() => setShowSettings(false))}>
@@ -59,24 +61,37 @@ function EditorPane({selectedSource}: Props) {
         </Button>
       </div>
     );
+  } else {
+    editorToolbar = (
+      <div className={styles.EditorToolbar}>
+        <OpenInEditorButton
+          className={styles.WideButton}
+          editorURL={editorURL}
+          source={selectedSource}
+        />
+        <div className={styles.VRule} />
+        <Button
+          onClick={() => startTransition(() => setShowSettings(true))}
+          // We don't use the title here because we don't have enough space to show it.
+          // Once we expand this pane we can add it.
+          // title="Configure code editor"
+        >
+          <ButtonIcon type="settings" />
+        </Button>
+      </div>
+    );
   }
 
   return (
     <div className={styles.EditorPane}>
-      <OpenInEditorButton
-        className={styles.WideButton}
-        editorURL={editorURL}
-        source={selectedSource}
-      />
-      <div className={styles.VRule} />
-      <Button
-        onClick={() => startTransition(() => setShowSettings(true))}
-        // We don't use the title here because we don't have enough space to show it.
-        // Once we expand this pane we can add it.
-        // title="Configure code editor"
-      >
-        <ButtonIcon type="settings" />
-      </Button>
+      {editorToolbar}
+      <div className={styles.EditorInfo}>
+        {editorURL ? (
+          <CodeEditorByDefault />
+        ) : (
+          'Configure an external editor to open local files.'
+        )}
+      </div>
     </div>
   );
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorByDefault.js b/packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorByDefault.js
new file mode 100644
index 00000000000..74dba4947b2
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorByDefault.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR} from '../../../constants';
+import {useLocalStorage} from '../hooks';
+
+import styles from './SettingsShared.css';
+
+export default function CodeEditorByDefault(_: {}): React.Node {
+  const [alwaysOpenInEditor, setAlwaysOpenInEditor] = useLocalStorage<boolean>(
+    LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
+    false,
+  );
+
+  return (
+    <label className={styles.SettingRow}>
+      <input
+        type="checkbox"
+        checked={alwaysOpenInEditor}
+        onChange={({currentTarget}) =>
+          setAlwaysOpenInEditor(currentTarget.checked)
+        }
+        className={styles.SettingRowCheckbox}
+      />
+      Open local files directly in your code editor
+    </label>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorOptions.js b/packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorOptions.js
index 0eb489611b4..3c9a24ef8a5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorOptions.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/CodeEditorOptions.js
@@ -19,7 +19,7 @@ import styles from './SettingsShared.css';
 
 const vscodeFilepath = 'vscode://file/{path}:{line}';
 
-export default function ComponentsSettings({
+export default function CodeEditorOptions({
   environmentNames,
 }: {
   environmentNames: Promise<Array<string>>,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
index 8246bc85939..c6db4e89320 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
@@ -16,6 +16,7 @@ import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
 import CodeEditorOptions from './CodeEditorOptions';
 
 import styles from './SettingsShared.css';
+import CodeEditorByDefault from './CodeEditorByDefault';
 
 function getChangeLogUrl(version: ?string): string | null {
   if (!version) {
@@ -84,6 +85,22 @@ export default function GeneralSettings(_: {}): React.Node {
         </label>
       </div>
 
+      <div className={styles.SettingWrapper}>
+        <CodeEditorByDefault />
+      </div>
+
+      <div className={styles.SettingWrapper}>
+        <div className={styles.RadioLabel}>Display density</div>
+        <select
+          value={displayDensity}
+          onChange={({currentTarget}) =>
+            setDisplayDensity(currentTarget.value)
+          }>
+          <option value="compact">Compact</option>
+          <option value="comfortable">Comfortable</option>
+        </select>
+      </div>
+
       {supportsTraceUpdates && (
         <div className={styles.SettingWrapper}>
           <label className={styles.SettingRow}>
diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index c17032ecc72..5bdc93fb245 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -207,21 +207,9 @@ export function useLocalStorage<T>(
       }
     };
 
-    const onLocalChange = () => {
-      const newValue = getValueFromLocalStorage();
-      if (storedValue !== newValue) {
-        setValue(newValue);
-      }
-    };
-
     window.addEventListener('storage', onStorage);
-
-    // Also listen to changes from other components in the same window.
-    window.addEventListener(key, onLocalChange);
-
     return () => {
       window.removeEventListener('storage', onStorage);
-      window.removeEventListener(key, onLocalChange);
     };
   }, [getValueFromLocalStorage, key, storedValue, setValue]);
 

From bb74fc5b6415eb1776ef8d313d4be50d6aae470e Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Thu, 24 Jul 2025 16:19:31 -0400
Subject: [PATCH 6/7] Remove canViewSource flag

This is unnecessary. It's implied by the source field being not null.
---
 .../__tests__/__serializers__/inspectedElementSerializer.js  | 3 +--
 packages/react-devtools-shared/src/backend/fiber/renderer.js | 5 -----
 .../react-devtools-shared/src/backend/legacy/renderer.js     | 2 --
 packages/react-devtools-shared/src/backend/types.js          | 3 ---
 packages/react-devtools-shared/src/backendAPI.js             | 2 --
 packages/react-devtools-shared/src/frontend/types.js         | 3 ---
 6 files changed, 1 insertion(+), 17 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__serializers__/inspectedElementSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/inspectedElementSerializer.js
index 870ad35e4b0..55029252843 100644
--- a/packages/react-devtools-shared/src/__tests__/__serializers__/inspectedElementSerializer.js
+++ b/packages/react-devtools-shared/src/__tests__/__serializers__/inspectedElementSerializer.js
@@ -15,8 +15,7 @@ export function test(maybeInspectedElement) {
     hasOwnProperty('canEditFunctionProps') &&
     hasOwnProperty('canEditHooks') &&
     hasOwnProperty('canToggleSuspense') &&
-    hasOwnProperty('canToggleError') &&
-    hasOwnProperty('canViewSource')
+    hasOwnProperty('canToggleError')
   );
 }
 
diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index 937fe8d352f..96c7a38863b 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -4374,8 +4374,6 @@ export function attach(
           (fiber.alternate !== null &&
             forceFallbackForFibers.has(fiber.alternate))),
 
-      // Can view component source location.
-      canViewSource,
       source,
 
       // Does the component have legacy context attached to it.
@@ -4416,7 +4414,6 @@ export function attach(
   function inspectVirtualInstanceRaw(
     virtualInstance: VirtualInstance,
   ): InspectedElement | null {
-    const canViewSource = true;
     const source = getSourceForInstance(virtualInstance);
 
     const componentInfo = virtualInstance.data;
@@ -4470,8 +4467,6 @@ export function attach(
 
       canToggleSuspense: supportsTogglingSuspense && hasSuspenseBoundary,
 
-      // Can view component source location.
-      canViewSource,
       source,
 
       // Does the component have legacy context attached to it.
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index cbcc37e319e..cc097c83790 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -830,8 +830,6 @@ export function attach(
       // Suspense did not exist in legacy versions
       canToggleSuspense: false,
 
-      // Can view component source location.
-      canViewSource: type === ElementTypeClass || type === ElementTypeFunction,
       source: null,
 
       // Only legacy context exists in legacy versions.
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index c8629885097..c9d6284b2f4 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -264,9 +264,6 @@ export type InspectedElement = {
   // Is this Suspense, and can its value be overridden now?
   canToggleSuspense: boolean,
 
-  // Can view component source location.
-  canViewSource: boolean,
-
   // Does the component have legacy context attached to it.
   hasLegacyContext: boolean,
 
diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
index bbb171bce0d..20b4e99a101 100644
--- a/packages/react-devtools-shared/src/backendAPI.js
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -222,7 +222,6 @@ export function convertInspectedElementBackendToFrontend(
     canToggleError,
     isErrored,
     canToggleSuspense,
-    canViewSource,
     hasLegacyContext,
     id,
     type,
@@ -252,7 +251,6 @@ export function convertInspectedElementBackendToFrontend(
     canToggleError,
     isErrored,
     canToggleSuspense,
-    canViewSource,
     hasLegacyContext,
     id,
     key,
diff --git a/packages/react-devtools-shared/src/frontend/types.js b/packages/react-devtools-shared/src/frontend/types.js
index 2accfc0d140..3f687a03da6 100644
--- a/packages/react-devtools-shared/src/frontend/types.js
+++ b/packages/react-devtools-shared/src/frontend/types.js
@@ -227,9 +227,6 @@ export type InspectedElement = {
   // Is this Suspense, and can its value be overridden now?
   canToggleSuspense: boolean,
 
-  // Can view component source location.
-  canViewSource: boolean,
-
   // Does the component have legacy context attached to it.
   hasLegacyContext: boolean,
 

From fc515bf8302ad11bb79f8fb76db1b87ced726954 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Thu, 24 Jul 2025 16:24:14 -0400
Subject: [PATCH 7/7] Allow ReactCallSite to be passed to useOpenResource

This is basically a super set of ReactFunctionLocation but this will be
important to support stack traces.
---
 packages/react-devtools-core/src/standalone.js  | 10 +++++-----
 .../react-devtools-fusebox/src/frontend.d.ts    | 17 +++++++++++++----
 .../src/devtools/views/DevTools.js              | 10 +++++-----
 .../src/devtools/views/Editor/utils.js          |  4 ++--
 .../src/devtools/views/useOpenResource.js       |  6 +++---
 5 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 369dc43a242..f8286783a9b 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -26,7 +26,7 @@ import {
 import {localStorageSetItem} from 'react-devtools-shared/src/storage';
 
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
-import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import type {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';
 
 export type StatusTypes = 'server-connected' | 'devtools-connected' | 'error';
 export type StatusListener = (message: string, status: StatusTypes) => void;
@@ -144,8 +144,8 @@ async function fetchFileWithCaching(url: string) {
 }
 
 function canViewElementSourceFunction(
-  _source: ReactFunctionLocation,
-  symbolicatedSource: ReactFunctionLocation | null,
+  _source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
 ): boolean {
   if (symbolicatedSource == null) {
     return false;
@@ -156,8 +156,8 @@ function canViewElementSourceFunction(
 }
 
 function viewElementSourceFunction(
-  _source: ReactFunctionLocation,
-  symbolicatedSource: ReactFunctionLocation | null,
+  _source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
 ): void {
   if (symbolicatedSource == null) {
     return;
diff --git a/packages/react-devtools-fusebox/src/frontend.d.ts b/packages/react-devtools-fusebox/src/frontend.d.ts
index 5a06aec7e49..a1142178f47 100644
--- a/packages/react-devtools-fusebox/src/frontend.d.ts
+++ b/packages/react-devtools-fusebox/src/frontend.d.ts
@@ -34,17 +34,26 @@ export type ReactFunctionLocation = [
   number, // enclosing line number
   number, // enclosing column number
 ];
+export type ReactCallSite = [
+  string, // function name
+  string, // file name TODO: model nested eval locations as nested arrays
+  number, // line number
+  number, // column number
+  number, // enclosing line number
+  number, // enclosing column number
+  boolean, // async resume
+];
 export type ViewElementSource = (
-  source: ReactFunctionLocation,
-  symbolicatedSource: ReactFunctionLocation | null,
+  source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
 ) => void;
 export type ViewAttributeSource = (
   id: number,
   path: Array<string | number>,
 ) => void;
 export type CanViewElementSource = (
-  source: ReactFunctionLocation,
-  symbolicatedSource: ReactFunctionLocation | null,
+  source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
 ) => boolean;
 
 export type InitializationOptions = {
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index b84f3a11a95..0fe6293b9f2 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -51,22 +51,22 @@ import type {FetchFileWithCaching} from './Components/FetchFileWithCachingContex
 import type {HookNamesModuleLoaderFunction} from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {BrowserTheme} from 'react-devtools-shared/src/frontend/types';
-import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import type {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';
 import type {SourceSelection} from './Editor/EditorPane';
 
 export type TabID = 'components' | 'profiler';
 
 export type ViewElementSource = (
-  source: ReactFunctionLocation,
-  symbolicatedSource: ReactFunctionLocation | null,
+  source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
 ) => void;
 export type ViewAttributeSource = (
   id: number,
   path: Array<string | number>,
 ) => void;
 export type CanViewElementSource = (
-  source: ReactFunctionLocation,
-  symbolicatedSource: ReactFunctionLocation | null,
+  source: ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: ReactFunctionLocation | ReactCallSite | null,
 ) => boolean;
 
 export type Props = {
diff --git a/packages/react-devtools-shared/src/devtools/views/Editor/utils.js b/packages/react-devtools-shared/src/devtools/views/Editor/utils.js
index 89e697bd60c..b239c9d213a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Editor/utils.js
+++ b/packages/react-devtools-shared/src/devtools/views/Editor/utils.js
@@ -7,11 +7,11 @@
  * @flow
  */
 
-import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import type {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';
 
 export function checkConditions(
   editorURL: string,
-  source: ReactFunctionLocation,
+  source: ReactFunctionLocation | ReactCallSite,
 ): {url: URL | null, shouldDisableButton: boolean} {
   try {
     const url = new URL(editorURL);
diff --git a/packages/react-devtools-shared/src/devtools/views/useOpenResource.js b/packages/react-devtools-shared/src/devtools/views/useOpenResource.js
index 112d0a98772..c645efc1e5e 100644
--- a/packages/react-devtools-shared/src/devtools/views/useOpenResource.js
+++ b/packages/react-devtools-shared/src/devtools/views/useOpenResource.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactFunctionLocation} from 'shared/ReactTypes';
+import type {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';
 
 import {useCallback, useContext, useSyncExternalStore} from 'react';
 
@@ -22,8 +22,8 @@ import {
 import {checkConditions} from './Editor/utils';
 
 const useOpenResource = (
-  source: null | ReactFunctionLocation,
-  symbolicatedSource: null | ReactFunctionLocation,
+  source: null | ReactFunctionLocation | ReactCallSite,
+  symbolicatedSource: null | ReactFunctionLocation | ReactCallSite,
 ): [
   boolean, // isEnabled
   () => void, // Open Resource