From 5ae597e36bc532593909d382daf991cdee63d83e Mon Sep 17 00:00:00 2001
From: Vitali Zaidman <vzaidman@gmail.com>
Date: Thu, 13 Jun 2024 11:03:19 +0100
Subject: [PATCH] fix[react-devtools] divided inspecting elements between
 inspecting dom elements from matching dev tools elements and nav to dev tool
 elements on page click

---
 .../react-devtools-core/src/standalone.js     |  1 +
 .../src/main/index.js                         |  3 ++-
 .../react-devtools-fusebox/src/frontend.js    |  1 +
 .../src/devtools/store.js                     | 24 +++++++++++++------
 .../views/Components/InspectedElement.js      |  2 +-
 .../src/devtools/views/Components/Tree.js     |  2 +-
 6 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index e4e4ada1c31a9..7795a5bc86c3c 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -280,6 +280,7 @@ function initialize(socket: WebSocket) {
   store = new Store(bridge, {
     checkBridgeProtocolCompatibility: true,
     supportsTraceUpdates: true,
+    supportsNavToElementOnPageClick: true,
   });
 
   log('Connected');
diff --git a/packages/react-devtools-extensions/src/main/index.js b/packages/react-devtools-extensions/src/main/index.js
index e1db3d505577b..3c99a8cdf17e4 100644
--- a/packages/react-devtools-extensions/src/main/index.js
+++ b/packages/react-devtools-extensions/src/main/index.js
@@ -97,7 +97,8 @@ function createBridgeAndStore() {
     // At this time, the timeline can only parse Chrome performance profiles.
     supportsTimeline: __IS_CHROME__,
     supportsTraceUpdates: true,
-    supportsNativeInspection: true,
+    supportsNavToDomTreeElementFromDevTools: true,
+    supportsNavToElementOnPageClick: true,
   });
 
   if (!isProfiling) {
diff --git a/packages/react-devtools-fusebox/src/frontend.js b/packages/react-devtools-fusebox/src/frontend.js
index 976b8693d373e..4456e3649a157 100644
--- a/packages/react-devtools-fusebox/src/frontend.js
+++ b/packages/react-devtools-fusebox/src/frontend.js
@@ -37,6 +37,7 @@ export function createStore(bridge: FrontendBridge, config?: Config): Store {
   return new Store(bridge, {
     checkBridgeProtocolCompatibility: true,
     supportsTraceUpdates: true,
+    supportsNavToElementOnPageClick: true,
     ...config,
   });
 }
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 408151dcdbbaf..2014254b8f6f8 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -71,7 +71,8 @@ type ErrorAndWarningTuples = Array<{id: number, index: number}>;
 export type Config = {
   checkBridgeProtocolCompatibility?: boolean,
   isProfiling?: boolean,
-  supportsNativeInspection?: boolean,
+  supportsNavToDomTreeElementFromDevTools?: boolean,
+  supportsNavToElementOnPageClick?: boolean,
   supportsReloadAndProfile?: boolean,
   supportsTimeline?: boolean,
   supportsTraceUpdates?: boolean,
@@ -172,7 +173,8 @@ export default class Store extends EventEmitter<{
   _rootIDToRendererID: Map<number, number> = new Map();
 
   // These options may be initially set by a configuration option when constructing the Store.
-  _supportsNativeInspection: boolean = false;
+  _supportsNavToDomTreeElementFromDevTools: boolean = false;
+  _supportsNavToElementOnPageClick: boolean = false;
   _supportsReloadAndProfile: boolean = false;
   _supportsTimeline: boolean = false;
   _supportsTraceUpdates: boolean = false;
@@ -211,13 +213,17 @@ export default class Store extends EventEmitter<{
       isProfiling = config.isProfiling === true;
 
       const {
-        supportsNativeInspection,
+        supportsNavToDomTreeElementFromDevTools,
+        supportsNavToElementOnPageClick,
         supportsReloadAndProfile,
         supportsTimeline,
         supportsTraceUpdates,
       } = config;
-      if (supportsNativeInspection) {
-        this._supportsNativeInspection = true;
+      if (supportsNavToDomTreeElementFromDevTools) {
+        this._supportsNavToDomTreeElementFromDevTools = true;
+      }
+      if (supportsNavToElementOnPageClick) {
+        this._supportsNavToElementOnPageClick = true;
       }
       if (supportsReloadAndProfile) {
         this._supportsReloadAndProfile = true;
@@ -437,8 +443,12 @@ export default class Store extends EventEmitter<{
     return this._rootSupportsTimelineProfiling;
   }
 
-  get supportsNativeInspection(): boolean {
-    return this._supportsNativeInspection;
+  get supportsNavToDomTreeElementFromDevTools(): boolean {
+    return this._supportsNavToDomTreeElementFromDevTools;
+  }
+
+  get supportsNavToElementOnPageClick(): boolean {
+    return this._supportsNavToElementOnPageClick;
   }
 
   get supportsNativeStyleEditor(): boolean {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 8688b132cb21b..6100768f0625a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -296,7 +296,7 @@ export default function InspectedElementWrapper(_: Props): React.Node {
             <ButtonIcon type="suspend" />
           </Toggle>
         )}
-        {store.supportsNativeInspection && (
+        {store.supportsNavToDomTreeElementFromDevTools && (
           <Button
             onClick={highlightElement}
             title="Inspect the matching DOM element">
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 7e15ba05142ac..5c219873bcd16 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -361,7 +361,7 @@ export default function Tree(props: Props): React.Node {
     <TreeFocusedContext.Provider value={treeFocused}>
       <div className={styles.Tree} ref={treeRef}>
         <div className={styles.SearchInput}>
-          {store.supportsNativeInspection && (
+          {store.supportsNavToElementOnPageClick && (
             <Fragment>
               <InspectHostNodesToggle />
               <div className={styles.VRule} />