Skip to content

Commit

Permalink
[DevTools] Separate RDT Fusebox into single-panel entry points (#30708)
Browse files Browse the repository at this point in the history
## 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
  • Loading branch information
huntie authored Sep 9, 2024
1 parent a8fc4b1 commit 984ea11
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 5 deletions.
3 changes: 2 additions & 1 deletion packages/react-devtools-fusebox/src/frontend.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,5 @@ export type InitializationOptions = {
canViewElementSourceFunction?: CanViewElementSource,
};

export function initialize(node: Element | Document, options: InitializationOptions): void;
export function initializeComponents(node: Element | Document, options: InitializationOptions): void;
export function initializeProfiler(node: Element | Document, options: InitializationOptions): void;
25 changes: 21 additions & 4 deletions packages/react-devtools-fusebox/src/frontend.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@ import type {
} from 'react-devtools-shared/src/frontend/types';
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
import type {
CanViewElementSource,
TabID,
ViewAttributeSource,
ViewElementSource,
CanViewElementSource,
} from 'react-devtools-shared/src/devtools/views/DevTools';
import type {Config} from 'react-devtools-shared/src/devtools/store';

Expand Down Expand Up @@ -51,10 +52,11 @@ type InitializationOptions = {
canViewElementSourceFunction?: CanViewElementSource,
};

export function initialize(
function initializeTab(
tab: TabID,
contentWindow: Element | Document,
options: InitializationOptions,
): void {
) {
const {
bridge,
store,
Expand All @@ -70,7 +72,8 @@ export function initialize(
bridge={bridge}
browserTheme={theme}
store={store}
showTabBar={true}
showTabBar={false}
overrideTab={tab}
warnIfLegacyBackendDetected={true}
enabledInspectedElementContextMenu={true}
viewAttributeSourceFunction={viewAttributeSourceFunction}
Expand All @@ -79,3 +82,17 @@ export function initialize(
/>,
);
}

export function initializeComponents(
contentWindow: Element | Document,
options: InitializationOptions,
): void {
initializeTab('components', contentWindow, options);
}

export function initializeProfiler(
contentWindow: Element | Document,
options: InitializationOptions,
): void {
initializeTab('profiler', contentWindow, options);
}

0 comments on commit 984ea11

Please sign in to comment.