react
react copied to clipboard
refactor[react-devtools]: rewrite context menus
Summary
- While rolling out RDT 5.2.0 on Fusebox, we've discovered that context menus don't work well with this environment. The reason for it is the context menu state implementation - in a global context we define a map of registered context menus, basically what is shown at the moment (see deleted Contexts.js file). These maps are not invalidated on each re-initialization of DevTools frontend, since the bundle (react-devtools-fusebox module) is not reloaded, and this results into RDT throwing an error that some context menu was already registered.
- We should not keep such data in a global state, since there is no guarantee that this will be invalidated with each re-initialization of DevTools (like with browser extension, for example).
- The new implementation is based on a
ContextMenuContainer
component, which will add all requiredcontextmenu
event listeners to the anchor-element. This component will also receive a list ofitems
that will be displayed in the shown context menu. - The
ContextMenuContainer
component is also usinguseImperativeHandle
hook to extend the instance of the component, so context menus can be managed imperatively viaref
:contextMenu.current?.hide()
, for example. -
Changed: The option for copying value to clipboard is now hidden for functions. The reasons for it are:
- It is broken in the current implementation, because we call
JSON.stringify
on the value, seepackages/react-devtools-shared/src/backend/utils.js
. - I don't see any reasonable value in doing this for the user, since
Go to definition
option is available and you can inspect the real code and then copy it. - We already filter out fields from objects, if their value is a function, because the whole object is passed to
JSON.stringify
.
- It is broken in the current implementation, because we call
How did you test this change?
Works with element props and hooks:
- All context menu items work reliably for props items
- All context menu items work reliably or hooks items
https://github.com/facebook/react/assets/28902667/5e2d58b0-92fa-4624-ad1e-2bbd7f12678f
Works with timeline profiler:
- All context menu items work reliably: copying, zooming, ...
- Context menu automatically closes on the scroll event
https://github.com/facebook/react/assets/28902667/de744cd0-372a-402a-9fa0-743857048d24
Works with Fusebox:
- Produces no errors
- Copy to clipboard context menu item works reliably
https://github.com/facebook/react/assets/28902667/0288f5bf-0d44-435c-8842-6b57bc8a7a24