fix[react-devtools] divided inspecting elements between inspecting do… (#29885)

# **before**
* nav to dom element from devtools
* nav to devtools element from page
are enabled on extension and disabled on the rest of the flavors.

## extension:
* nav to dom element from devtools **enabled** and working
* nav to devtools element from page **enabled** and working
![Screenshot 2024-06-13 at 11 15
11](https://github.com/facebook/react/assets/5188459/fef78b70-d22c-4405-8871-8b0449b51937)

## inline:
* nav to dom element from devtools **disabled**
* nav to devtools element from page **disabled**

![before-inline](https://github.com/facebook/react/assets/5188459/24020dc2-baec-4d0a-84d4-45c96d653843)

## standalone:
* nav to dom element from devtools **disabled**
* nav to devtools element from page **disabled**

![before-standalone](https://github.com/facebook/react/assets/5188459/19b4cb34-9d1f-412e-baea-59ea85f99d04)

## fusebox:
* nav to dom element from devtools **disabled**
* nav to devtools element from page **disabled**

![before-fusebox](https://github.com/facebook/react/assets/5188459/1a18fda4-04b8-40f4-ae8b-e059889fca93)

# **after**
same:
* nav to dom element from devtools
* nav to devtools element from page
are enabled on extension and disabled on inline.

change:
standalone and fusebox can nav to devtools element from page

## extension:
* nav to dom element from devtools **enabled** and working
* nav to devtools element from page **enabled** and working
![Screenshot 2024-06-13 at 10 50
25](https://github.com/facebook/react/assets/5188459/f4679c72-b211-43d6-b3ea-6380e0d1edf0)

## inline:
* nav to dom element from devtools **disabled**
* nav to devtools element from page **disabled**

![after-inline](https://github.com/facebook/react/assets/5188459/fdfdd87b-9bc3-47f3-b1e0-730239f6485d)

## standalone:
* nav to dom element from devtools **disabled**
* nav to devtools element from page **enabled** and working

![after-standalone](https://github.com/facebook/react/assets/5188459/b25e3c63-a697-4b0c-8ad2-0e12ec5c3e9c)

## fusebox:
* nav to dom element from devtools **disabled**
* nav to devtools element from page **enabled** and working

![after-fusebox](https://github.com/facebook/react/assets/5188459/f14147d8-9831-4909-a164-52f892c875e5)

packages/react-devtools-core/src/standalone.js

@@ -280,6 +280,7 @@ function initialize(socket: WebSocket) {
   store = new Store(bridge, {
     checkBridgeProtocolCompatibility: true,
     supportsTraceUpdates: true,
+    supportsClickToInspect: true,
   });
 
   log('Connected');

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,
+    supportsInspectMatchingDOMElement: true,
+    supportsClickToInspect: true,
   });
 
   if (!isProfiling) {

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,
+    supportsClickToInspect: true,
     ...config,
   });
 }

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,
+  supportsInspectMatchingDOMElement?: boolean,
+  supportsClickToInspect?: 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;
+  _supportsInspectMatchingDOMElement: boolean = false;
+  _supportsClickToInspect: 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,
+        supportsInspectMatchingDOMElement,
+        supportsClickToInspect,
         supportsReloadAndProfile,
         supportsTimeline,
         supportsTraceUpdates,
       } = config;
-      if (supportsNativeInspection) {
-        this._supportsNativeInspection = true;
+      if (supportsInspectMatchingDOMElement) {
+        this._supportsInspectMatchingDOMElement = true;
+      }
+      if (supportsClickToInspect) {
+        this._supportsClickToInspect = 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 supportsInspectMatchingDOMElement(): boolean {
+    return this._supportsInspectMatchingDOMElement;
+  }
+
+  get supportsClickToInspect(): boolean {
+    return this._supportsClickToInspect;
   }
 
   get supportsNativeStyleEditor(): boolean {

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.supportsInspectMatchingDOMElement && (
           <Button
             onClick={highlightElement}
             title="Inspect the matching DOM element">

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.supportsClickToInspect && (
             <Fragment>
               <InspectHostNodesToggle />
               <div className={styles.VRule} />