[DevTools] Allow file:/// urls to be opened in editor (#33965)
If a `file:///` path is specified as the url of a file, like after source mapping into an ESM file, then we should be able to open it in a code editor.
Sebastian Markbåge committed
Jul 23, 2025 at 10:21 UTC
3586a7f9e8ffb80ff98f41daca0e8a4070878718
1 file changed
+13
-6
packages/react-devtools-shared/src/devtools/views/Components/OpenInEditorButton.js
+13
-6
@@ -4,6 +4,7 @@
4
* This source code is licensed under the MIT license found in the
5
* LICENSE file in the root directory of this source tree.
6
*
7
+ * @flow
8
*/
9
10
import * as React from 'react';
@@ -26,10 +27,14 @@ function checkConditions(
27
try {
28
const url = new URL(editorURL);
29
29
- let [, sourceURL, ,] = source;
30
+ const [, sourceURL, line] = source;
31
+ let filePath;
32
33
// Check if sourceURL is a correct URL, which has a protocol specified
32
- if (sourceURL.includes('://')) {
34
+ if (sourceURL.startsWith('file:///')) {
35
+ filePath = new URL(sourceURL).pathname;
36
+ } else if (sourceURL.includes('://')) {
37
+ // $FlowFixMe[cannot-resolve-name]
38
if (!__IS_INTERNAL_VERSION__) {
39
// In this case, we can't really determine the path to a file, disable a button
40
return {url: null, shouldDisableButton: true};
@@ -42,20 +47,22 @@ function checkConditions(
47
if (endOfSourceMapURLIndex === -1) {
48
return {url: null, shouldDisableButton: true};
49
} else {
45
- sourceURL = sourceURL.slice(
50
+ filePath = sourceURL.slice(
51
endOfSourceMapURLIndex + endOfSourceMapURLPattern.length,
52
sourceURL.length,
53
);
54
}
55
}
56
+ } else {
57
+ filePath = sourceURL;
58
}
59
53
- const lineNumberAsString = String(source.line);
60
+ const lineNumberAsString = String(line);
61
62
url.href = url.href
56
- .replace('{path}', sourceURL)
63
+ .replace('{path}', filePath)
64
.replace('{line}', lineNumberAsString)
58
- .replace('%7Bpath%7D', sourceURL)
65
+ .replace('%7Bpath%7D', filePath)
66
.replace('%7Bline%7D', lineNumberAsString);
67
68
return {url, shouldDisableButton: false};