Add info box mentioning how to configure devtools for link handling

Author: sebmarkbage

packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js

@@ -37,6 +37,7 @@ export type Props = {selectedSource: ?SourceSelection};
 
 function EditorPane({selectedSource}: Props) {
   const [showSettings, setShowSettings] = useState(false);
+  const [showLinkInfo, setShowLinkInfo] = useState(false);
 
   const editorURL = useSyncExternalStore(
     function subscribe(callback) {
@@ -50,6 +51,30 @@ function EditorPane({selectedSource}: Props) {
     },
   );
 
+  if (showLinkInfo) {
+    return (
+      <div className={styles.EditorPane}>
+        <div className={styles.EditorToolbar}>
+          <div style={{display: 'flex', flex: '1 1 auto'}}>
+            To enable link handling in your browser's DevTools settings, look
+            for the option Extension -> Link Handling. Select "React Developer
+            Tools".
+          </div>
+          <div className={styles.VRule} />
+          <Button
+            onClick={() =>
+              startTransition(() => {
+                setShowLinkInfo(false);
+                setShowSettings(false);
+              })
+            }>
+            <ButtonIcon type="close" />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
   let editorToolbar;
   if (showSettings) {
     editorToolbar = (
@@ -87,7 +112,13 @@ function EditorPane({selectedSource}: Props) {
       {editorToolbar}
       <div className={styles.EditorInfo}>
         {editorURL ? (
-          <CodeEditorByDefault />
+          <CodeEditorByDefault
+            onChange={alwaysOpenInEditor => {
+              if (alwaysOpenInEditor) {
+                startTransition(() => setShowLinkInfo(true));
+              }
+            }}
+          />
         ) : (
           'Configure an external editor to open local files.'
         )}

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

@@ -13,7 +13,11 @@ import {useLocalStorage} from '../hooks';
 
 import styles from './SettingsShared.css';
 
-export default function CodeEditorByDefault(_: {}): React.Node {
+export default function CodeEditorByDefault({
+  onChange,
+}: {
+  onChange?: boolean => void,
+}): React.Node {
   const [alwaysOpenInEditor, setAlwaysOpenInEditor] = useLocalStorage<boolean>(
     LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
     false,
@@ -24,9 +28,12 @@ export default function CodeEditorByDefault(_: {}): React.Node {
       <input
         type="checkbox"
         checked={alwaysOpenInEditor}
-        onChange={({currentTarget}) =>
-          setAlwaysOpenInEditor(currentTarget.checked)
-        }
+        onChange={({currentTarget}) => {
+          setAlwaysOpenInEditor(currentTarget.checked);
+          if (onChange) {
+            onChange(currentTarget.checked);
+          }
+        }}
         className={styles.SettingRowCheckbox}
       />
       Open local files directly in your code editor