77b637d612
Add Bridge types for Fusebox ( #31274 )
...
New types used by Fusebox
https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/117
2024-10-16 16:45:24 +01:00
204a551eae
Add: reload to profile for Fusebox ( #31021 )
...
## Summary
Add reload to profile for Fusebox
Stacked on #31048 . See
https://github.com/facebook/react/pull/31021/commits/6be1977112596581f7ce4cfade572f43320ab06f
## How did you test this change?
Test E2E in [D63233256](https://www.internalfb.com/diff/D63233256 )
2024-09-26 16:39:51 +01:00
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
2024-09-09 08:12:49 -04:00
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
## inline:
* nav to dom element from devtools **disabled**
* nav to devtools element from page **disabled**
## standalone:
* nav to dom element from devtools **disabled**
* nav to devtools element from page **disabled**
## fusebox:
* nav to dom element from devtools **disabled**
* nav to devtools element from page **disabled**
# **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
## inline:
* nav to dom element from devtools **disabled**
* nav to devtools element from page **disabled**
## standalone:
* nav to dom element from devtools **disabled**
* nav to devtools element from page **enabled** and working
## fusebox:
* nav to dom element from devtools **disabled**
* nav to devtools element from page **enabled** and working
2024-06-13 15:37:51 +01:00
fd6e130b00
Default native inspections config false ( #29784 )
...
## Summary
To make the config `supportsNativeInspection` explicit, set it to
default to `false` and only allow it in the extension.
## How did you test this change?
When disabled on **React DevTools extension**
<img width="419" alt="Screenshot 2024-06-06 at 17 34 02"
src="https://github.com/facebook/react/assets/5188459/0052b645-2214-475c-8b41-4f9207ca3343 ">
When enabled on **React DevTools extension** (the chosen config)
<img width="425" alt="Screenshot 2024-06-06 at 17 34 53"
src="https://github.com/facebook/react/assets/5188459/df34ec8e-2039-4984-86c8-74feaf89bbdd ">
When enabled on **React DevTools in Fusebox**
<img width="1170" alt="Screenshot 2024-06-06 at 17 29 24"
src="https://github.com/facebook/react/assets/5188459/ae52274b-583d-463c-8482-2323d502f4c0 ">
When disabled on **React DevTools in Fusebox** (the chosen config)
<img width="1453" alt="Screenshot 2024-06-06 at 17 30 31"
src="https://github.com/facebook/react/assets/5188459/cba5b51b-c973-412d-8ad0-382a4f9bf115 ">
When enabled on **React DevTools Inline**
<img width="915" alt="Screenshot 2024-06-06 at 17 24 20"
src="https://github.com/facebook/react/assets/5188459/f0d61d99-2b75-4a87-a19e-db431be697e3 ">
When disabled on **React DevTools Inline** (the chosen config)
<img width="844" alt="Screenshot 2024-06-06 at 17 19 39"
src="https://github.com/facebook/react/assets/5188459/d3bcc8a7-535d-4656-844d-f9f89bb2b248 ">
When enabled on **React DevTools standalone**
<img width="1227" alt="Screenshot 2024-06-06 at 17 23 16"
src="https://github.com/facebook/react/assets/5188459/174fbae6-1412-4539-bbe6-e1d0e8baa7d5 ">
When disabled on **React DevTools standalone** (the chosen config)
<img width="844" alt="Screenshot 2024-06-06 at 17 19 39"
src="https://github.com/facebook/react/assets/5188459/00c46907-e3a6-4766-a1b4-dd088cac2157 ">
2024-06-06 17:48:44 +01:00
99da76f23a
fix[react-devtools] remove native inspection button when it can't be used ( #29779 )
...
## Summary
There's no native inspection available in any of the React-Native
devtools:
* **React DevTools in Fusebox**
* **React DevTools standalone**
Besides, **React DevTools Inline** can't really open the devtools and
point to the native inspector because of lack of an API to do that.
Only **React DevTools extension** can actually do that.
That's why I've disabled it for the first 3 flavours of React DevTools
mentioned above.
## How did you test this change?
Still enabled on **React DevTools extension**
<img width="1355" alt="Screenshot 2024-06-06 at 16 09 21"
src="https://github.com/facebook/react/assets/5188459/a9b658a6-eafe-443c-9298-280bb9f4ed72 ">
Disabled on **React DevTools in Fusebox**
<img width="1670" alt="Screenshot 2024-06-06 at 16 04 28"
src="https://github.com/facebook/react/assets/5188459/a2ded76f-2aaf-47ce-b581-611494ca33bd ">
Disabled on **React DevTools standalone**
<img width="1268" alt="Screenshot 2024-06-06 at 16 15 08"
src="https://github.com/facebook/react/assets/5188459/eb2f308d-32cb-43ea-921b-3503aa874d64 ">
Disabled on **React DevTools Inline**
<img width="1206" alt="Screenshot 2024-06-06 at 16 09 26"
src="https://github.com/facebook/react/assets/5188459/03da741a-66bf-4414-91f7-2f344c78a880 ">
2024-06-06 17:10:40 +01:00
6f23540c7d
cleanup[react-devtools]: remove unused supportsProfiling flag from store config ( #29193 )
...
Looks like this is unused
2024-05-28 11:07:31 +01:00
afe54bfcbf
[DevTools] Expose "view source" options to Fusebox integration ( #28973 )
...
## Summary
Exposes the APIs needed by React Native DevTools (Fusebox) to implement
the "view element source" and "view attribute source" features.
## How did you test this change?
1. `yarn build` in `react-devtools-fusebox`
2. Copy artifacts to rn-chrome-devtools-frontend
3. Write some additional glue code to implement
`viewElementSourceFunction` in our CDT fork.
4. Test the feature manually.
https://github.com/facebook/react/assets/2246565/12667018-100a-4b3f-957a-06c07f2af41a
2024-05-07 16:06:36 +01:00
e3fbb51db6
[DevTools] Enable inspected element context menu in Fusebox ( #28972 )
...
## Summary
Enables the inspected element context menu in React Native DevTools
(Fusebox).
## How did you test this change?
1. `yarn build` in `react-devtools-fusebox`
2. Copy artifacts to rn-chrome-devtools-frontend
3. Manually test the context menu
https://github.com/facebook/react/assets/2246565/b35cc20f-8d67-43b0-b863-7731e10fffac
NOTE: The serialised values sometimes expose React internals (e.g. Hook
data structures instead of just the values), but that seems to be a
problem equally on web, so I'm going for native<->web parity here.
2024-05-03 17:33:21 +01:00
8f7dd5592b
[DevTools] Check in frontend.d.ts for react-devtools-fusebox, include in build output ( #28970 )
...
## Summary
The `react-devtools-fusebox` private package is used in the React Native
DevTools (Fusebox) frontend by checking build artifacts into RN's
[fork]([`facebookexperimental/rn-chrome-devtools-frontend`](https://github.com/facebookexperimental/rn-chrome-devtools-frontend ))
of the Chrome DevTools (CDT) repo - see
https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/22 .
Currently, the CDT fork also includes a [manually written TypeScript
definition
file](https://github.com/facebookexperimental/rn-chrome-devtools-frontend/blob/1d5f8d5209ac49de97aec16732169d47bf525474/front_end/third_party/react-devtools/package/frontend.d.ts )
which describes `react-devtools-fusebox`'s API. This PR moves that file
into the React repo, next to the implementation of
`react-devtools-fusebox`, so we can update it atomically with changes to
the package.
As this is the first bit of TypeScript in this repo, the PR adds minimal
support for formatting `.d.ts` files with Prettier. It also opts out
`react-devtools-fusebox/dist/` from linting/formatting as a drive-by
fix.
For now, we'll just maintain the `.d.ts` file manually, but we could
consider leveraging
[`flow-api-translator`](https://www.npmjs.com/package/flow-api-translator )
to auto-generate it in the future.
## How did you test this change?
Build `react-devtools-fusebox`, observe that `dist/frontend.d.ts`
exists.
2024-05-03 17:32:41 +01:00
7625f0d501
feat[devtools-fusebox]: support theme option ( #28832 )
...
Support propagating theme from Chrome DevTools frontend, the field is
optional.
Next step, which is out of scope of this project and general improvement
for React DevTools: teach RDT to listen to theme changes and if the
theme preference is set to `auto` in settings, update the theme
accordingly with the browser devtools.
2024-04-12 17:26:37 +01:00
96c5846610
feat[devtools]: add package for fusebox integration ( #28553 )
...
## Summary
Stacked on https://github.com/facebook/react/pull/28552 . Review only the
[last commit at the
top](https://github.com/facebook/react/pull/28553/commits/c69952f1bf6e23252d47e0f7eb98efbbb2cc2c55 ).
These changes add new package `react-devtools-fusebox`, which is the
entrypoint for the RDT Frontend, which will be used in Chrome DevTools
panel. The main differences from other frontend shells (extension,
standalone) are:
1. This package builds scripts in ESM format, this is required by Chrome
DevTools, see webpack config:
https://github.com/facebook/react/blob/c69952f1bf6e23252d47e0f7eb98efbbb2cc2c55/packages/react-devtools-fusebox/webpack.config.frontend.js#L50-L52
2. The build includes styles in a separate `.css` file, which is
required for Chrome DevTools: styles are loaded lazily once panel is
mounted.
2024-04-12 15:29:35 +01:00
Edmond Chui
Alex Hunt
Vitali Zaidman
Ruslan Lesiutin
Moti Zilberman