fix[react-devtools] divided inspecting elements between inspecting do…

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