[DevTools] Use the hard coded url instead of the local storage url for presets (and make VSCode default) (facebook#33995)

Stacked on facebook#33983.

Previously, the source of truth is the url stored in local storage but
that means if we change the presets then they don't take effect (e.g.
facebook#33994). This PR uses the hardcoded value instead when a preset is
selected.

This also has the benefit that if you switch between custom and vs code
in the selector, then the custom url is preserved instead of getting
reset when you checkout other options.

Currently the default is custom with empty string, which means that
there's no code editor configured at all by default. It doesn't make a
lot of sense that we have it not working by default when so many people
use VS Code. So this also makes VS Code the default if there's no
EDITOR_URL env specified.

Author: sebmarkbage

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

@@ -18,16 +18,14 @@ import Toggle from '../Toggle';
 import {ElementTypeSuspense} from 'react-devtools-shared/src/frontend/types';
 import InspectedElementView from './InspectedElementView';
 import {InspectedElementContext} from './InspectedElementContext';
-import {getOpenInEditorURL, getAlwaysOpenInEditor} from '../../../utils';
-import {
-  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
-  LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
-} from '../../../constants';
+import {getAlwaysOpenInEditor} from '../../../utils';
+import {LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR} from '../../../constants';
 import FetchFileWithCachingContext from './FetchFileWithCachingContext';
 import {symbolicateSourceWithCache} from 'react-devtools-shared/src/symbolicateSource';
 import OpenInEditorButton from './OpenInEditorButton';
 import InspectedElementViewSourceButton from './InspectedElementViewSourceButton';
 import Skeleton from './Skeleton';
+import useEditorURL from '../useEditorURL';
 
 import styles from './InspectedElement.css';
 
@@ -134,12 +132,7 @@ export default function InspectedElementWrapper(_: Props): React.Node {
     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 editorURL = useEditorURL();
 
   const toggleErrored = useCallback(() => {
     if (inspectedElement == null) {

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

@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {useSyncExternalStore, useState, startTransition} from 'react';
+import {useState, startTransition} from 'react';
 
 import portaledContent from '../portaledContent';
 
@@ -18,8 +18,7 @@ import Button from 'react-devtools-shared/src/devtools/views/Button';
 import ButtonIcon from 'react-devtools-shared/src/devtools/views/ButtonIcon';
 
 import OpenInEditorButton from './OpenInEditorButton';
-import {getOpenInEditorURL} from '../../../utils';
-import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '../../../constants';
+import useEditorURL from '../useEditorURL';
 
 import EditorSettings from './EditorSettings';
 import CodeEditorByDefault from '../Settings/CodeEditorByDefault';
@@ -39,17 +38,7 @@ function EditorPane({selectedSource}: Props) {
   const [showSettings, setShowSettings] = useState(false);
   const [showLinkInfo, setShowLinkInfo] = useState(false);
 
-  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();
-    },
-  );
+  const editorURL = useEditorURL();
 
   if (showLinkInfo) {
     return (

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

@@ -13,20 +13,21 @@ import {
   LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
 } from '../../../constants';
 import {useLocalStorage} from '../hooks';
-import {getDefaultOpenInEditorURL} from 'react-devtools-shared/src/utils';
+import {
+  getDefaultPreset,
+  getDefaultOpenInEditorURL,
+} from 'react-devtools-shared/src/utils';
 
 import styles from './SettingsShared.css';
 
-const vscodeFilepath = 'vscode://file/{path}:{line}:{column}';
-
 export default function CodeEditorOptions({
   environmentNames,
 }: {
   environmentNames: Promise<Array<string>>,
 }): React.Node {
   const [openInEditorURLPreset, setOpenInEditorURLPreset] = useLocalStorage<
     'vscode' | 'custom',
-  >(LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET, 'custom');
+  >(LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET, getDefaultPreset());
 
   const [openInEditorURL, setOpenInEditorURL] = useLocalStorage<string>(
     LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
@@ -40,11 +41,6 @@ export default function CodeEditorOptions({
         onChange={({currentTarget}) => {
           const selectedValue = currentTarget.value;
           setOpenInEditorURLPreset(selectedValue);
-          if (selectedValue === 'vscode') {
-            setOpenInEditorURL(vscodeFilepath);
-          } else if (selectedValue === 'custom') {
-            setOpenInEditorURL('');
-          }
         }}>
         <option value="vscode">VS Code</option>
         <option value="custom">Custom</option>
@@ -53,7 +49,7 @@ export default function CodeEditorOptions({
         <input
           className={styles.Input}
           type="text"
-          placeholder={process.env.EDITOR_URL ? process.env.EDITOR_URL : ''}
+          placeholder={getDefaultOpenInEditorURL()}
           value={openInEditorURL}
           onChange={event => {
             setOpenInEditorURL(event.target.value);

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

@@ -0,0 +1,39 @@
+/**
+ * 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 {useCallback, useSyncExternalStore} from 'react';
+
+import {getOpenInEditorURL} from '../../utils';
+import {
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
+} from '../../constants';
+
+const useEditorURL = (): string => {
+  const editorURL = useSyncExternalStore(
+    useCallback(function subscribe(callback) {
+      window.addEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+      window.addEventListener(
+        LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
+        callback,
+      );
+      return function unsubscribe() {
+        window.removeEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+        window.removeEventListener(
+          LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
+          callback,
+        );
+      };
+    }, []),
+    getOpenInEditorURL,
+  );
+  return editorURL;
+};
+
+export default useEditorURL;

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

@@ -13,11 +13,9 @@ import {useCallback, useContext, useSyncExternalStore} from 'react';
 
 import ViewElementSourceContext from './Components/ViewElementSourceContext';
 
-import {getOpenInEditorURL, getAlwaysOpenInEditor} from '../../utils';
-import {
-  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
-  LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
-} from '../../constants';
+import {getAlwaysOpenInEditor} from '../../utils';
+import useEditorURL from './useEditorURL';
+import {LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR} from '../../constants';
 
 import {checkConditions} from './Editor/utils';
 
@@ -32,15 +30,7 @@ const useOpenResource = (
     ViewElementSourceContext,
   );
 
-  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);
-      };
-    }, []),
-    getOpenInEditorURL,
-  );
+  const editorURL = useEditorURL();
 
   const alwaysOpenInEditor = useSyncExternalStore(
     useCallback(function subscribe(callback) {

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_OPEN_IN_EDITOR_URL_PRESET,
   LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
   SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
   SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
@@ -385,14 +386,27 @@ export function filterOutLocationComponentFilters(
   return componentFilters.filter(f => f.type !== ComponentFilterLocation);
 }
 
+const vscodeFilepath = 'vscode://file/{path}:{line}:{column}';
+
+export function getDefaultPreset(): 'custom' | 'vscode' {
+  return typeof process.env.EDITOR_URL === 'string' ? 'custom' : 'vscode';
+}
+
 export function getDefaultOpenInEditorURL(): string {
   return typeof process.env.EDITOR_URL === 'string'
     ? process.env.EDITOR_URL
-    : '';
+    : vscodeFilepath;
 }
 
 export function getOpenInEditorURL(): string {
   try {
+    const rawPreset = localStorageGetItem(
+      LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
+    );
+    switch (rawPreset) {
+      case '"vscode"':
+        return vscodeFilepath;
+    }
     const raw = localStorageGetItem(LOCAL_STORAGE_OPEN_IN_EDITOR_URL);
     if (raw != null) {
       return JSON.parse(raw);