fix[react-devtools] divided inspecting elements between inspecting dom elements from matching dev tools elements and nav to dev tool elements on page click

Author: vzaidman

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} />