mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Ruslan Lesiutin
d14ce51327
## 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 required `contextmenu` event listeners to the anchor-element. This component will also receive a list of `items` that will be displayed in the shown context menu. - The `ContextMenuContainer` component is also using `useImperativeHandle` hook to extend the instance of the component, so context menus can be managed imperatively via `ref`: `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, see `packages/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`. ## 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
74 lines
1.3 KiB
CSS
74 lines
1.3 KiB
CSS
.Owners {
|
|
padding: 0.25rem;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.OwnersHeader {
|
|
font-family: var(--font-family-sans);
|
|
}
|
|
|
|
.Owner {
|
|
color: var(--color-component-name);
|
|
font-family: var(--font-family-monospace);
|
|
font-size: var(--font-size-monospace-normal);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.InspectedElement {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
font-family: var(--font-family-monospace);
|
|
font-size: var(--font-size-monospace-normal);
|
|
line-height: var(--line-height-data);
|
|
}
|
|
|
|
.InspectedElementBadgesContainer:not(:empty) {
|
|
padding: 0.25rem;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.Owner {
|
|
border-radius: 0.25rem;
|
|
padding: 0.125rem 0.25rem;
|
|
background: none;
|
|
border: none;
|
|
display: block;
|
|
}
|
|
.Owner:focus {
|
|
outline: none;
|
|
background-color: var(--color-button-background-focus);
|
|
}
|
|
|
|
.NotInStore {
|
|
color: var(--color-dim);
|
|
cursor: default;
|
|
}
|
|
|
|
.OwnerButton {
|
|
cursor: pointer;
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.OwnerContent {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 1rem;
|
|
width: 100%;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.OwnerContent:hover {
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
|
|
.OwnersMetaField {
|
|
padding-left: 1.25rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|