[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.

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

@@ -4,6 +4,7 @@
  * 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';
@@ -26,10 +27,14 @@ function checkConditions(
   try {
     const url = new URL(editorURL);
 
-    let [, sourceURL, ,] = source;
+    const [, sourceURL, line] = source;
+    let filePath;
 
     // Check if sourceURL is a correct URL, which has a protocol specified
-    if (sourceURL.includes('://')) {
+    if (sourceURL.startsWith('file:///')) {
+      filePath = new URL(sourceURL).pathname;
+    } else if (sourceURL.includes('://')) {
+      // $FlowFixMe[cannot-resolve-name]
       if (!__IS_INTERNAL_VERSION__) {
         // In this case, we can't really determine the path to a file, disable a button
         return {url: null, shouldDisableButton: true};
@@ -42,20 +47,22 @@ function checkConditions(
         if (endOfSourceMapURLIndex === -1) {
           return {url: null, shouldDisableButton: true};
         } else {
-          sourceURL = sourceURL.slice(
+          filePath = sourceURL.slice(
             endOfSourceMapURLIndex + endOfSourceMapURLPattern.length,
             sourceURL.length,
           );
         }
       }
+    } else {
+      filePath = sourceURL;
     }
 
-    const lineNumberAsString = String(source.line);
+    const lineNumberAsString = String(line);
 
     url.href = url.href
-      .replace('{path}', sourceURL)
+      .replace('{path}', filePath)
       .replace('{line}', lineNumberAsString)
-      .replace('%7Bpath%7D', sourceURL)
+      .replace('%7Bpath%7D', filePath)
       .replace('%7Bline%7D', lineNumberAsString);
 
     return {url, shouldDisableButton: false};