@samitouri / QOS-React-2 / commits / d9a5b6393a

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)

Vitali Zaidman committed Jun 13, 2024 at 15:37 UTC d9a5b6393a9329b60592e34c9e1fe091e6af5090

6 files changed +23 -10

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

@@ -280,6 +280,7 @@ function initialize(socket: WebSocket) {

280 store = new Store(bridge, {

281 checkBridgeProtocolCompatibility: true,

282 supportsTraceUpdates: true,

283 + supportsClickToInspect: true,

284 });

285

286 log('Connected');

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

+2 -1

@@ -97,7 +97,8 @@ function createBridgeAndStore() {

97 // At this time, the timeline can only parse Chrome performance profiles.

98 supportsTimeline: __IS_CHROME__,

99 supportsTraceUpdates: true,

100 - supportsNativeInspection: true,

100 + supportsInspectMatchingDOMElement: true,

101 + supportsClickToInspect: true,

102 });

103

104 if (!isProfiling) {

packages/react-devtools-fusebox/src/frontend.js

@@ -37,6 +37,7 @@ export function createStore(bridge: FrontendBridge, config?: Config): Store {

37 return new Store(bridge, {

38 checkBridgeProtocolCompatibility: true,

39 supportsTraceUpdates: true,

40 + supportsClickToInspect: true,

41 ...config,

42 });

43 }

packages/react-devtools-shared/src/devtools/store.js

+17 -7

@@ -71,7 +71,8 @@ type ErrorAndWarningTuples = Array<{id: number, index: number}>;

71 export type Config = {

72 checkBridgeProtocolCompatibility?: boolean,

73 isProfiling?: boolean,

74 - supportsNativeInspection?: boolean,

74 + supportsInspectMatchingDOMElement?: boolean,

75 + supportsClickToInspect?: boolean,

76 supportsReloadAndProfile?: boolean,

77 supportsTimeline?: boolean,

78 supportsTraceUpdates?: boolean,

@@ -172,7 +173,8 @@ export default class Store extends EventEmitter<{

173 _rootIDToRendererID: Map<number, number> = new Map();

174

175 // These options may be initially set by a configuration option when constructing the Store.

175 - _supportsNativeInspection: boolean = false;

176 + _supportsInspectMatchingDOMElement: boolean = false;

177 + _supportsClickToInspect: boolean = false;

178 _supportsReloadAndProfile: boolean = false;

179 _supportsTimeline: boolean = false;

180 _supportsTraceUpdates: boolean = false;

@@ -211,13 +213,17 @@ export default class Store extends EventEmitter<{

213 isProfiling = config.isProfiling === true;

214

215 const {

214 - supportsNativeInspection,

216 + supportsInspectMatchingDOMElement,

217 + supportsClickToInspect,

218 supportsReloadAndProfile,

219 supportsTimeline,

220 supportsTraceUpdates,

221 } = config;

219 - if (supportsNativeInspection) {

220 - this._supportsNativeInspection = true;

222 + if (supportsInspectMatchingDOMElement) {

223 + this._supportsInspectMatchingDOMElement = true;

224 + }

225 + if (supportsClickToInspect) {

226 + this._supportsClickToInspect = true;

227 }

228 if (supportsReloadAndProfile) {

229 this._supportsReloadAndProfile = true;

@@ -437,8 +443,12 @@ export default class Store extends EventEmitter<{

443 return this._rootSupportsTimelineProfiling;

444 }

445

440 - get supportsNativeInspection(): boolean {

441 - return this._supportsNativeInspection;

446 + get supportsInspectMatchingDOMElement(): boolean {

447 + return this._supportsInspectMatchingDOMElement;

448 + }

449 +

450 + get supportsClickToInspect(): boolean {

451 + return this._supportsClickToInspect;

452 }

453

454 get supportsNativeStyleEditor(): boolean {

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

+1 -1

@@ -296,7 +296,7 @@ export default function InspectedElementWrapper(_: Props): React.Node {

296 <ButtonIcon type="suspend" />

297 </Toggle>

298 )}

299 - {store.supportsNativeInspection && (

299 + {store.supportsInspectMatchingDOMElement && (

300 <Button

301 onClick={highlightElement}

302 title="Inspect the matching DOM element">

packages/react-devtools-shared/src/devtools/views/Components/Tree.js

+1 -1

@@ -361,7 +361,7 @@ export default function Tree(props: Props): React.Node {

361 <TreeFocusedContext.Provider value={treeFocused}>

362 <div className={styles.Tree} ref={treeRef}>

363 <div className={styles.SearchInput}>

364 - {store.supportsNativeInspection && (

364 + {store.supportsClickToInspect && (

365 <Fragment>

366 <InspectHostNodesToggle />

367 <div className={styles.VRule} />