More customizable url when opening an external editor

extension/src/browser/extension/options/EditorGroup.tsx

@@ -47,37 +47,12 @@ export default ({ options, saveOption }: OptionsProps) => {
           id="editor"
           type="text"
           size={33}
-          maxLength={30}
-          placeholder="vscode, atom, webstorm, sublime..."
-          value={options.editor}
+          placeholder={'vscode://file/{path}:{line}:{column}'}
+          value={options.editorURL}
           disabled={options.useEditor !== EditorState.EXTERNAL}
-          onChange={(e) =>
-            saveOption('editor', e.target.value.replace(/\W/g, ''))
-          }
+          onChange={(e) => saveOption('editorURL', e.target.value)}
         />
       </div>
-      <div className="option option_type_radio">
-        <label
-          className="option__label"
-          htmlFor="editor-external"
-          style={{ marginLeft: '20px' }}
-        >
-          Absolute path to the project directory to open:
-        </label>
-        <br />
-        <textarea
-          className="option__textarea"
-          placeholder="/home/user/my-awesome-app"
-          value={options.projectPath}
-          disabled={options.useEditor !== EditorState.EXTERNAL}
-          onChange={(e) =>
-            saveOption('projectPath', e.target.value.replace('\n', ''))
-          }
-        />
-        <div className="option__hint">
-          Run `pwd` in your project root directory to get it
-        </div>
-      </div>
     </fieldset>
   );
 };

extension/src/browser/extension/options/syncOptions.ts

@@ -2,8 +2,7 @@ import { FilterState, FilterStateValue } from '../../../app/api/filters';
 
 export interface Options {
   readonly useEditor: number;
-  readonly editor: string;
-  readonly projectPath: string;
+  readonly editorURL: string;
   readonly maxAge: number;
   readonly filter: FilterStateValue;
   readonly allowlist: string;
@@ -16,8 +15,7 @@ export interface Options {
 
 interface OldOrNewOptions {
   readonly useEditor: number;
-  readonly editor: string;
-  readonly projectPath: string;
+  readonly editorURL: string;
   readonly maxAge: number;
   readonly filter:
     | FilterStateValue
@@ -77,8 +75,7 @@ const get = (callback: (options: Options) => void) => {
     chrome.storage.sync.get(
       {
         useEditor: 0,
-        editor: '',
-        projectPath: '',
+        editorURL: '',
         maxAge: 50,
         filter: FilterState.DO_NOT_FILTER,
         whitelist: '',

packages/redux-devtools-inspector-monitor-trace-tab/src/openFile.ts

@@ -55,8 +55,7 @@ function openInIframe(url: string) {
   setTimeout(() => iframe.parentNode!.removeChild(iframe), 3000);
 }
 
-function openInEditor(editor: string, path: string, stackFrame: StackFrame) {
-  const projectPath = path.replace(/\/$/, '');
+function openInEditor(editorURL: string, stackFrame: StackFrame) {
   const file =
     stackFrame._originalFileName ||
     (stackFrame as unknown as { finalFileName: string }).finalFileName ||
@@ -69,30 +68,17 @@ function openInEditor(editor: string, path: string, stackFrame: StackFrame) {
   const line = stackFrame._originalLineNumber || stackFrame.lineNumber || '0';
   const column =
     stackFrame._originalColumnNumber || stackFrame.columnNumber || '0';
-  let url;
 
-  switch (editor) {
-    case 'vscode':
-    case 'code':
-      url = `vscode://file/${projectPath}${filePath}:${line}:${column}`;
-      break;
-    case 'atom':
-      url = `atom://core/open/file?filename=${projectPath}${filePath}&line=${line}&column=${column}`;
-      break;
-    case 'webstorm':
-    case 'phpstorm':
-    case 'idea':
-      url = `${editor}://open?file=${projectPath}${filePath}&line=${line}&column=${column}`;
-      break;
-    default:
-      // sublime, emacs, macvim, textmate + custom like https://github.com/eclemens/atom-url-handler
-      url = `${editor}://open/?url=file://${projectPath}${filePath}&line=${line}&column=${column}`;
-  }
+  const url = new URL(editorURL);
+  url.href = url.href.replace('{path}', filePath);
+  url.href = url.href.replace('{line}', String(line));
+  url.href = url.href.replace('{column}', String(column));
+
   if (chrome.devtools && !isFF) {
-    if (chrome.tabs) openAndCloseTab(url);
+    if (chrome.tabs) openAndCloseTab(url.href);
     else window.open(url);
   } else {
-    openInIframe(url);
+    openInIframe(url.href);
   }
 }
 
@@ -105,16 +91,9 @@ export default function openFile(
   const storage = isFF
     ? chrome.storage.local
     : chrome.storage.sync || chrome.storage.local;
-  storage.get(
-    ['useEditor', 'editor', 'projectPath'],
-    function ({ useEditor, editor, projectPath }) {
-      if (
-        useEditor &&
-        projectPath &&
-        typeof editor === 'string' &&
-        /^\w{1,30}$/.test(editor)
-      ) {
-        openInEditor(editor.toLowerCase(), projectPath as string, stackFrame);
+  storage.get(['useEditor', 'editorURL'], function ({ useEditor, editorURL }) {
+    if (useEditor && typeof editorURL === 'string') {
+      openInEditor(editorURL, stackFrame);
     } else {
       if (
         chrome.devtools &&
@@ -136,6 +115,5 @@ export default function openFile(
         }
       }
     }
-    }
-  );
+  });
 }