fix[devtools]: use native clipboard api instead of clipboard-js #26539
Conversation
facebook-github-bot
added
CLA Signed
React Core Team
|
Comparing: 790ebc9...4fd7d9a Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) |
| @@ -49,12 +48,11 @@ export function copyToClipboard(value: any): void { | |||
| // On Firefox navigator.clipboard.writeText has to be called from | |||
| // the content script js code (because it requires the clipboardWrite | |||
| // permission to be allowed out of a "user handling" callback), | |||
| // clipboardCopyText is an helper injected into the page from. | |||
| // injectGlobalHook. | |||
| // clipboardCopyText is a helper injected into the page from injectGlobalHook. | |||
| if (typeof clipboardCopyText === 'function') { | |||
| clipboardCopyText(text).catch(err => {}); | |||
There was a problem hiding this comment.
Can you use this opportunity this verify if this is still needed? it has been a few years since this workaround was introduced #17740 #17681
Nothing changed for Firefox, as I understand. If we want to use clipboard.writeText, we need one of the two things:
- Asking for
"clipboardWrite"permission. Not sure if this should be each time before calling clipboard api - This api to be called only in user-initiated event callbacks, which will be won't work for us, since we are operating mostly as an extension
I can later test it on Firefox with this injection removed and in extension environment
There was a problem hiding this comment.
We still need this injection, because of the one use case when we are pressing "Copy value to clipboard" on some attributes of the inspected elements, like prop or field in state, or hook.
Everything from this explanation comment is actual.
Seems like this is the only copy operation that we do via bridge and we call clipboard api on the backend side. Since there is no user-initiated event and Firefox thinks that this is not coming from browser extension, it rejects the call.
hoxyq
force-pushed
the
fix/use-native-clipboard-api
branch
from
414ec1b
to
7b3c172
Compare
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
Outdated
Show resolved
Hide resolved
hoxyq
force-pushed
the
fix/use-native-clipboard-api
branch
from
7b3c172
to
3d1c3ae
Compare
hoxyq
force-pushed
the
fix/use-native-clipboard-api
branch
from
3d1c3ae
to
4fd7d9a
Compare
|
Did you try it on extensions? I got this error: Seems to be relevant: https://stackoverflow.com/questions/56306153/domexception-on-calling-navigator-clipboard-readtext |
Good catch, I've tested it on Firefox, looks like this error occurs only when we try to call UPD: probably need to reiterate once again on this, we should not use browsers api like clipboard from backend process |
|
Closing this in favour of #26604. Had some issues with making
However, there were no problems with this approach in Firefox. |
Fixes #26500 ## Summary - No more using `clipboard-js` from the backend side, now emitting custom `saveToClipboard` event, also adding corresponding listener in `store.js` - Not migrating to `navigator.clipboard` api yet, there were some issues with using it on Chrome, will add more details to #26539 ## How did you test this change? - Tested on Chrome, Firefox, Edge - Tested on standalone electron app: seems like context menu is not expected to work there (cannot right-click on value, the menu is not appearing), other logic (pressing on copy icon) was not changed
…#26604) Fixes facebook#26500 ## Summary - No more using `clipboard-js` from the backend side, now emitting custom `saveToClipboard` event, also adding corresponding listener in `store.js` - Not migrating to `navigator.clipboard` api yet, there were some issues with using it on Chrome, will add more details to facebook#26539 ## How did you test this change? - Tested on Chrome, Firefox, Edge - Tested on standalone electron app: seems like context menu is not expected to work there (cannot right-click on value, the menu is not appearing), other logic (pressing on copy icon) was not changed
…#26604) Fixes facebook#26500 ## Summary - No more using `clipboard-js` from the backend side, now emitting custom `saveToClipboard` event, also adding corresponding listener in `store.js` - Not migrating to `navigator.clipboard` api yet, there were some issues with using it on Chrome, will add more details to facebook#26539 ## How did you test this change? - Tested on Chrome, Firefox, Edge - Tested on standalone electron app: seems like context menu is not expected to work there (cannot right-click on value, the menu is not appearing), other logic (pressing on copy icon) was not changed
Fixes #26500
Summary
clipboard-jslibHow did you test this change?
react-devtools-inlineapp