Allow React DevTools extension to handle links across Chrome DevTools

Author: sebmarkbage

packages/react-devtools-extensions/src/main/index.js

@@ -18,7 +18,12 @@ import {
   LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
 } from 'react-devtools-shared/src/constants';
 import {logEvent} from 'react-devtools-shared/src/Logger';
-import {normalizeUrlIfValid} from 'react-devtools-shared/src/utils';
+import {
+  getAlwaysOpenInEditor,
+  getOpenInEditorURL,
+  normalizeUrlIfValid,
+} from 'react-devtools-shared/src/utils';
+import {checkConditions} from 'react-devtools-shared/src/devtools/views/Editor/utils';
 
 import {
   setBrowserSelectionFromReact,
@@ -530,3 +535,29 @@ if (__IS_FIREFOX__) {
 connectExtensionPort();
 
 mountReactDevToolsWhenReactHasLoaded();
+
+chrome.devtools.panels.setOpenResourceHandler(
+  (
+    resource,
+    lineNumber = 1,
+    // The column is a new feature so we have to specify a default if it doesn't exist
+    columnNumber = 1,
+  ) => {
+    const alwaysOpenInEditor = getAlwaysOpenInEditor();
+    const editorURL = getOpenInEditorURL();
+    if (alwaysOpenInEditor && editorURL) {
+      const location = ['', resource.url, lineNumber, columnNumber];
+      const {url, shouldDisableButton} = checkConditions(editorURL, location);
+      if (!shouldDisableButton) {
+        window.open(url);
+        return;
+      }
+    }
+    // Otherwise fallback to the built-in behavior.
+    chrome.devtools.panels.openResource(
+      resource.url,
+      lineNumber - 1,
+      columnNumber - 1,
+    );
+  },
+);