feat: use and initialize RDT Frontend in RDT panel by hoxyq · Pull Request #23 · react/react-native-devtools-frontend

hoxyq · 2024-03-14T10:15:27Z

Summary

Stacked on #22.

Last PR in this series of PRs. Uses react-devtools-fusebox as a dependency to initialize React DevTools Frontend.

Loader is rendered while React DevTools is initialized:

While we create global bindng and perform some initial Runtime.evaluate calls, this can be throttled by current performance problems with initial load of source maps

Potential improvements, will probably add later:

Adding catch block in case if initialization failed, for displaying error message
Removing worker CSP patch, and moving in to entrypoints build script, so only rn_fusebox is updated

Test plan

Demo:

Screen.Recording.2024-04-12.at.18.24.50.mov

Upstreaming plan

This commit should be sent as a patch to the upstream devtools-frontend repo. I've reviewed the contribution guide.
This commit is React Native-specific and cannot be upstreamed.

motiz88

Shipittttt

motiz88 · 2024-04-15T18:27:13Z

+ ReactDevTools.initialize(this.contentElement, {
+ bridge: this.bridge,
+ store: this.store,
+ theme: usingDarkTheme ? 'dark' : 'light',


Nits - can be filed as followup tasks IMO:
Is this reactive to theme changes?
Does CDT allow the user to override the theme? Will this honour that setting?

Is this reactive to theme changes?
Nope, it doesn't, unfortunately. I am keeping this in T185412086, because we can reuse it for browser extension.
Does CDT allow the user to override the theme? Will this honour that setting?
Yes, I've specified using dark theme in my Chrome and my Fusebox window is opened in dark mode across different reloads.

motiz88 · 2024-04-15T18:29:32Z

 }
 </style>
-<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">
+<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob: ; object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">


I wish this was more self-documenting. Might be worth an explanatory comment as part of the file.

I thought about moving this to build_entrypoints script, so only rn_fusebox.html entrypoint gets this.
Will add this tomorrow and add an explanatory comment, basically RDT frontend is using workers API for file uploads.

hoxyq · 2024-03-14T10:15:27Z

Summary

Stacked on #22.

Last PR in this series of PRs. Uses react-devtools-fusebox as a dependency to initialize React DevTools Frontend.

Loader is rendered while React DevTools is initialized:

While we create global bindng and perform some initial Runtime.evaluate calls, this can be throttled by current performance problems with initial load of source maps

Potential improvements, will probably add later:

Adding catch block in case if initialization failed, for displaying error message
Removing worker CSP patch, and moving in to entrypoints build script, so only rn_fusebox is updated

Test plan

Demo:

Screen.Recording.2024-04-12.at.18.24.50.mov

Upstreaming plan

This commit should be sent as a patch to the upstream devtools-frontend repo. I've reviewed the contribution guide.
This commit is React Native-specific and cannot be upstreamed.

motiz88

Shipittttt

motiz88 · 2024-04-15T18:27:13Z

+ ReactDevTools.initialize(this.contentElement, {
+ bridge: this.bridge,
+ store: this.store,
+ theme: usingDarkTheme ? 'dark' : 'light',


Nits - can be filed as followup tasks IMO:
Is this reactive to theme changes?
Does CDT allow the user to override the theme? Will this honour that setting?

Is this reactive to theme changes?
Nope, it doesn't, unfortunately. I am keeping this in T185412086, because we can reuse it for browser extension.
Does CDT allow the user to override the theme? Will this honour that setting?
Yes, I've specified using dark theme in my Chrome and my Fusebox window is opened in dark mode across different reloads.

motiz88 · 2024-04-15T18:29:32Z

 }
 </style>
-<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">
+<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob: ; object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">


I wish this was more self-documenting. Might be worth an explanatory comment as part of the file.

I thought about moving this to build_entrypoints script, so only rn_fusebox.html entrypoint gets this.
Will add this tomorrow and add an explanatory comment, basically RDT frontend is using workers API for file uploads.

hoxyq · 2024-03-14T10:15:27Z

Summary

Stacked on #22.

Last PR in this series of PRs. Uses react-devtools-fusebox as a dependency to initialize React DevTools Frontend.

Loader is rendered while React DevTools is initialized:

While we create global bindng and perform some initial Runtime.evaluate calls, this can be throttled by current performance problems with initial load of source maps

Potential improvements, will probably add later:

Adding catch block in case if initialization failed, for displaying error message
Removing worker CSP patch, and moving in to entrypoints build script, so only rn_fusebox is updated

Test plan

Demo:

Screen.Recording.2024-04-12.at.18.24.50.mov

Upstreaming plan

This commit should be sent as a patch to the upstream devtools-frontend repo. I've reviewed the contribution guide.
This commit is React Native-specific and cannot be upstreamed.

motiz88

Shipittttt

motiz88 · 2024-04-15T18:27:13Z

+ ReactDevTools.initialize(this.contentElement, {
+ bridge: this.bridge,
+ store: this.store,
+ theme: usingDarkTheme ? 'dark' : 'light',


Nits - can be filed as followup tasks IMO:
Is this reactive to theme changes?
Does CDT allow the user to override the theme? Will this honour that setting?

Is this reactive to theme changes?
Nope, it doesn't, unfortunately. I am keeping this in T185412086, because we can reuse it for browser extension.
Does CDT allow the user to override the theme? Will this honour that setting?
Yes, I've specified using dark theme in my Chrome and my Fusebox window is opened in dark mode across different reloads.

motiz88 · 2024-04-15T18:29:32Z

 }
 </style>
-<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">
+<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob: ; object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">


I wish this was more self-documenting. Might be worth an explanatory comment as part of the file.

I thought about moving this to build_entrypoints script, so only rn_fusebox.html entrypoint gets this.
Will add this tomorrow and add an explanatory comment, basically RDT frontend is using workers API for file uploads.

hoxyq · 2024-03-14T10:15:27Z

Summary

Stacked on #22.

Last PR in this series of PRs. Uses react-devtools-fusebox as a dependency to initialize React DevTools Frontend.

Loader is rendered while React DevTools is initialized:

While we create global bindng and perform some initial Runtime.evaluate calls, this can be throttled by current performance problems with initial load of source maps

Potential improvements, will probably add later:

Adding catch block in case if initialization failed, for displaying error message
Removing worker CSP patch, and moving in to entrypoints build script, so only rn_fusebox is updated

Test plan

Demo:

Screen.Recording.2024-04-12.at.18.24.50.mov

Upstreaming plan

This commit should be sent as a patch to the upstream devtools-frontend repo. I've reviewed the contribution guide.
This commit is React Native-specific and cannot be upstreamed.

motiz88

Shipittttt

motiz88 · 2024-04-15T18:27:13Z

+ ReactDevTools.initialize(this.contentElement, {
+ bridge: this.bridge,
+ store: this.store,
+ theme: usingDarkTheme ? 'dark' : 'light',


Nits - can be filed as followup tasks IMO:
Is this reactive to theme changes?
Does CDT allow the user to override the theme? Will this honour that setting?

Is this reactive to theme changes?
Nope, it doesn't, unfortunately. I am keeping this in T185412086, because we can reuse it for browser extension.
Does CDT allow the user to override the theme? Will this honour that setting?
Yes, I've specified using dark theme in my Chrome and my Fusebox window is opened in dark mode across different reloads.

motiz88 · 2024-04-15T18:29:32Z

 }
 </style>
-<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">
+<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob: ; object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">


I wish this was more self-documenting. Might be worth an explanatory comment as part of the file.

I thought about moving this to build_entrypoints script, so only rn_fusebox.html entrypoint gets this.
Will add this tomorrow and add an explanatory comment, basically RDT frontend is using workers API for file uploads.

hoxyq · 2024-03-14T10:15:27Z

Summary

Stacked on #22.

Last PR in this series of PRs. Uses react-devtools-fusebox as a dependency to initialize React DevTools Frontend.

Loader is rendered while React DevTools is initialized:

While we create global bindng and perform some initial Runtime.evaluate calls, this can be throttled by current performance problems with initial load of source maps

Potential improvements, will probably add later:

Adding catch block in case if initialization failed, for displaying error message
Removing worker CSP patch, and moving in to entrypoints build script, so only rn_fusebox is updated

Test plan

Demo:

Screen.Recording.2024-04-12.at.18.24.50.mov

Upstreaming plan

This commit should be sent as a patch to the upstream devtools-frontend repo. I've reviewed the contribution guide.
This commit is React Native-specific and cannot be upstreamed.

motiz88

Shipittttt

motiz88 · 2024-04-15T18:27:13Z

+ ReactDevTools.initialize(this.contentElement, {
+ bridge: this.bridge,
+ store: this.store,
+ theme: usingDarkTheme ? 'dark' : 'light',


Nits - can be filed as followup tasks IMO:
Is this reactive to theme changes?
Does CDT allow the user to override the theme? Will this honour that setting?

Is this reactive to theme changes?
Nope, it doesn't, unfortunately. I am keeping this in T185412086, because we can reuse it for browser extension.
Does CDT allow the user to override the theme? Will this honour that setting?
Yes, I've specified using dark theme in my Chrome and my Fusebox window is opened in dark mode across different reloads.

motiz88 · 2024-04-15T18:29:32Z

 }
 </style>
-<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">
+<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob: ; object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">


I wish this was more self-documenting. Might be worth an explanatory comment as part of the file.

I thought about moving this to build_entrypoints script, so only rn_fusebox.html entrypoint gets this.
Will add this tomorrow and add an explanatory comment, basically RDT frontend is using workers API for file uploads.

hoxyq · 2024-03-14T10:15:27Z

Summary

Stacked on #22.

Last PR in this series of PRs. Uses react-devtools-fusebox as a dependency to initialize React DevTools Frontend.

Loader is rendered while React DevTools is initialized:

While we create global bindng and perform some initial Runtime.evaluate calls, this can be throttled by current performance problems with initial load of source maps

Potential improvements, will probably add later:

Adding catch block in case if initialization failed, for displaying error message
Removing worker CSP patch, and moving in to entrypoints build script, so only rn_fusebox is updated

Test plan

Demo:

Screen.Recording.2024-04-12.at.18.24.50.mov

Upstreaming plan

This commit should be sent as a patch to the upstream devtools-frontend repo. I've reviewed the contribution guide.
This commit is React Native-specific and cannot be upstreamed.

motiz88

Shipittttt

motiz88 · 2024-04-15T18:27:13Z

+ ReactDevTools.initialize(this.contentElement, {
+ bridge: this.bridge,
+ store: this.store,
+ theme: usingDarkTheme ? 'dark' : 'light',


Nits - can be filed as followup tasks IMO:
Is this reactive to theme changes?
Does CDT allow the user to override the theme? Will this honour that setting?

Is this reactive to theme changes?
Nope, it doesn't, unfortunately. I am keeping this in T185412086, because we can reuse it for browser extension.
Does CDT allow the user to override the theme? Will this honour that setting?
Yes, I've specified using dark theme in my Chrome and my Fusebox window is opened in dark mode across different reloads.

motiz88 · 2024-04-15T18:29:32Z

 }
 </style>
-<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">
+<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob: ; object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">


I wish this was more self-documenting. Might be worth an explanatory comment as part of the file.

I thought about moving this to build_entrypoints script, so only rn_fusebox.html entrypoint gets this.
Will add this tomorrow and add an explanatory comment, basically RDT frontend is using workers API for file uploads.

hoxyq · 2024-03-14T10:15:27Z

Summary

Stacked on #22.

Last PR in this series of PRs. Uses react-devtools-fusebox as a dependency to initialize React DevTools Frontend.

Loader is rendered while React DevTools is initialized:

While we create global bindng and perform some initial Runtime.evaluate calls, this can be throttled by current performance problems with initial load of source maps

Potential improvements, will probably add later:

Adding catch block in case if initialization failed, for displaying error message
Removing worker CSP patch, and moving in to entrypoints build script, so only rn_fusebox is updated

Test plan

Demo:

Screen.Recording.2024-04-12.at.18.24.50.mov

Upstreaming plan

This commit should be sent as a patch to the upstream devtools-frontend repo. I've reviewed the contribution guide.
This commit is React Native-specific and cannot be upstreamed.

motiz88

Shipittttt

motiz88 · 2024-04-15T18:27:13Z

+ ReactDevTools.initialize(this.contentElement, {
+ bridge: this.bridge,
+ store: this.store,
+ theme: usingDarkTheme ? 'dark' : 'light',


Nits - can be filed as followup tasks IMO:
Is this reactive to theme changes?
Does CDT allow the user to override the theme? Will this honour that setting?

Is this reactive to theme changes?
Nope, it doesn't, unfortunately. I am keeping this in T185412086, because we can reuse it for browser extension.
Does CDT allow the user to override the theme? Will this honour that setting?
Yes, I've specified using dark theme in my Chrome and my Fusebox window is opened in dark mode across different reloads.

motiz88 · 2024-04-15T18:29:32Z

 }
 </style>
-<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">
+<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob: ; object-src 'none'; script-src 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">


I wish this was more self-documenting. Might be worth an explanatory comment as part of the file.

I thought about moving this to build_entrypoints script, so only rn_fusebox.html entrypoint gets this.
Will add this tomorrow and add an explanatory comment, basically RDT frontend is using workers API for file uploads.

facebook-github-bot added the cla signed label Mar 14, 2024

hoxyq mentioned this pull request Apr 15, 2024
feat: add react-devtools-fusebox as third party dependency #22
Merged
2 tasks

hoxyq force-pushed the react-devtools/initialize-react-devtools-frontend branch from 1976b59 to a19a4baCompare April 15, 2024 08:01

hoxyq changed the title ~~[WIP] feat: use and initialize RDT Frontend in RDT panel~~feat: use and initialize RDT Frontend in RDT panelApr 15, 2024

hoxyq requested review from EdmondChuiHW, huntie, motiz88 and robhogan April 15, 2024 08:06

hoxyq force-pushed the react-devtools/initialize-react-devtools-frontend branch 2 times, most recently from f8ecde2 to da012d6Compare April 15, 2024 08:08

hoxyq marked this pull request as ready for review April 15, 2024 08:10

hoxyq force-pushed the react-devtools/initialize-react-devtools-frontend branch 2 times, most recently from 243b4e7 to a28a2f2Compare April 15, 2024 14:51

motiz88 approved these changes Apr 15, 2024
View reviewed changes

feat: use and initialize RDT Frontend in RDT panel
2cc2cc3

hoxyq force-pushed the react-devtools/initialize-react-devtools-frontend branch from a28a2f2 to 2cc2cc3Compare April 15, 2024 20:28

hoxyq merged commit 9222797 into react:mainApr 15, 2024

hoxyq deleted the react-devtools/initialize-react-devtools-frontend branch April 15, 2024 20:57