@samitouri / QOS-React / commits / 984ea11d14

[DevTools] Separate RDT Fusebox into single-panel entry points (#30708)

## Summary Separate function entry points for `react-devtools-fusebox` into `initializeComponents` and `initializeProfiler`. The motivation behind this change is to separate these tabs into top-level Chrome DevTools panels (aligned with web) in React Native. ## How did you test this change? - Build `react-devtools-fusebox` and load into local [rn-chrome-devtools-frontend](https://github.com/facebookexperimental/rn-chrome-devtools-frontend) project with updated call sites. <img width="1933" alt="image" src="https://github.com/user-attachments/assets/202d32a1-b8da-4936-b0e1-04875a30f256"> <img width="1949" alt="image" src="https://github.com/user-attachments/assets/39dbe154-989c-4f76-b103-aa19f07a3b9c"> ✅ Tabs can be separately initialised in individual Chrome DevTools panels

Alex Hunt committed Sep 9, 2024 at 13:12 UTC 984ea11d147b1bc7a5e63f576af47629937c58ee
2 files changed +23 -5
packages/react-devtools-fusebox/src/frontend.d.ts
+2 -1
@@ -50,4 +50,5 @@ export type InitializationOptions = {
50 canViewElementSourceFunction?: CanViewElementSource,
51 };
52
53 -export function initialize(node: Element | Document, options: InitializationOptions): void;
53 +export function initializeComponents(node: Element | Document, options: InitializationOptions): void;
54 +export function initializeProfiler(node: Element | Document, options: InitializationOptions): void;
packages/react-devtools-fusebox/src/frontend.js
+21 -4
@@ -19,9 +19,10 @@ import type {
19 } from 'react-devtools-shared/src/frontend/types';
20 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
21 import type {
22 + CanViewElementSource,
23 + TabID,
24 ViewAttributeSource,
25 ViewElementSource,
24 - CanViewElementSource,
26 } from 'react-devtools-shared/src/devtools/views/DevTools';
27 import type {Config} from 'react-devtools-shared/src/devtools/store';
28
@@ -51,10 +52,11 @@ type InitializationOptions = {
52 canViewElementSourceFunction?: CanViewElementSource,
53 };
54
54 -export function initialize(
55 +function initializeTab(
56 + tab: TabID,
57 contentWindow: Element | Document,
58 options: InitializationOptions,
57 -): void {
59 +) {
60 const {
61 bridge,
62 store,
@@ -70,7 +72,8 @@ export function initialize(
72 bridge={bridge}
73 browserTheme={theme}
74 store={store}
73 - showTabBar={true}
75 + showTabBar={false}
76 + overrideTab={tab}
77 warnIfLegacyBackendDetected={true}
78 enabledInspectedElementContextMenu={true}
79 viewAttributeSourceFunction={viewAttributeSourceFunction}
@@ -79,3 +82,17 @@ export function initialize(
82 />,
83 );
84 }
85 +
86 +export function initializeComponents(
87 + contentWindow: Element | Document,
88 + options: InitializationOptions,
89 +): void {
90 + initializeTab('components', contentWindow, options);
91 +}
92 +
93 +export function initializeProfiler(
94 + contentWindow: Element | Document,
95 + options: InitializationOptions,
96 +): void {
97 + initializeTab('profiler', contentWindow, options);
98 +}