Re-enable context menu options in Firefox

[jasonLaster]

#17668 disabled support for "copy to clipboard" and "go to definition" context menu items in Firefox.

Use cases

• copy to clipboard (Devtools renable copy attr context menu for firefox #17740)
• jump to element node (blocked by Firefox bugs 1605597, 1609671, 1609677)
• jump to function definition (blocked by Firefox bugs 1605597, 1609671, 1609677)

[jasonLaster]

@rpl and I looked into why, jump to element did not work.

We found that highlightNativeElement failed to find the correct node to inspect on Firefox link. The likely culprit was findNativeNodesForFiberID.

When we paused on line 122 and manually overrode the node, inspect worked.

One surprising thing we found was that highlightNativeElement seemed to be called twice.

[jasonLaster]

We think the clipboard apis might not be working because they're called from the page. CC @rpl

[jasonLaster]

Luca was curious about $attribute in the inspect case.

[bvaughn]

Ah, I tried to explain the way we were using $attribute here:

The way this works currently is the frontend sends a postMessage command saying to inspect an attribute at a specific path (e.g. some-fiber-id -> props -> foo -> bar). The "renderer" (which is injected to run in the page in the same context as React itself) stores the value at the specified path in a global, window.$attribute. Then the extension itself asks the browser to inspect() it.

The extension is involved because JavaScript running in the document itself can't call inspect() since it's part of the DevTools API and not a standard JavaScript feature. In Firefox though, it seems to just silently fail when the extension calls inspect().

Does this help clear things up any? Or is some part of it unclear?

[bvaughn]

We found that highlightNativeElement failed to find the correct node to inspect on Firefox link. The likely culprit was findNativeNodesForFiberID.

This sounds...unexpected to me. Maybe it failed for a specific component, b'c that didn't have a DOM node, but in general it should work (and it should work the same for both browsers)

[rpl]

@jasonLaster For the "jump to function definition" part, I just filed on bugzilla Bug 1605597 - DevTools API inspect binding called on a function should show it in the debugger panel and attached a patch to it.

would you mind to edit the issue description and link the upstream bug there?

[rpl]

I took a deeper look into the issue with the "copy to clipboard" action from the context menu (the one disabled in #17668 because it does trigger an error when used on Firefox) and it looks that my initial guess was right:

as I mentioned in #17668 (comment) , on Firefox writing in the clipboard from outside of a "user handling" callback is possible but it requires the extension to ask for the clipboardWrite permission and also that the clipboard-related method (either document.execCommand("copy") or navigator.clipboard.writeText) is being called from the extension js code (on the contrary it does still fails if the caller is actually the webpage, because the clipboardWrite doesn't have any effect for the webpage js code) and the [copyToClipboard code is defined in packages/react-devtools-shared/src/backend/utils.js] and called from the webpage js code.

This is the expected behavior on Firefox, and so we would need to fix it on the extension side.

I've been able to workaround the issue and make it to work as expected by using the exportFunction helper from the injectGlobalHook.js content script (exportFunction usage from content script is also documented on MDN here) to inject a clipboardWriteText helper function into the webpage and then by using that helper function from copyToClipboard (if available, otherwise it uses the clipboard-js polyfill as it does right now).

@jasonLaster @bvaughn Follows the diff of the small changes I applied locally to make it work as expected on Firefox:

diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 498e04425..1918ab740 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -44,7 +44,7 @@
     "scripts": ["build/background.js"]
   },
 
-  "permissions": ["file:///*", "http://*/*", "https://*/*"],
+  "permissions": ["file:///*", "http://*/*", "https://*/*", "clipboardWrite"],
 
   "content_scripts": [
     {
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
index ea41a6c96..e60f875f3 100644
--- a/packages/react-devtools-extensions/src/injectGlobalHook.js
+++ b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -91,3 +91,18 @@ if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
 injectCode(
   ';(' + installHook.toString() + '(window))' + saveNativeValues + detectReact,
 );
+
+if (typeof exportFunction === 'function') {
+  // eslint-disable-next-line no-undef
+  exportFunction(
+    (text) => {
+      // Call clipboard.writeText from the extension content script
+      // (as it has the clipboardWrite permission) and return a Promise
+      // accessible to the webpage js code.
+      return new window.Promise((resolve, reject) =>
+        window.navigator.clipboard.writeText(text).then(resolve, reject));
+    },
+    window.wrappedJSObject.__REACT_DEVTOOLS_GLOBAL_HOOK__,
+    {defineAs: 'clipboardCopyText'}
+  );
+}
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 47355f207..b0ce3e033 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -40,7 +40,19 @@ export function cleanForBridge(
 
 export function copyToClipboard(value: any): void {
   const safeToCopy = serializeToString(value);
-  copy(safeToCopy === undefined ? 'undefined' : safeToCopy);
+  const text = safeToCopy === undefined ? 'undefined' : safeToCopy;
+  const {clipboardCopyText} = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+  // 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.
+  if (clipboardCopyText) {
+    clipboardCopyText(text).catch(err => {});
+  } else {
+    copy(text).catch(err => {});
+  }
 }
 
 export function copyWithSet(

[bvaughn]

Fantastic! Thanks @rpl!

[bvaughn]

FYI v4.4 (released today) re-enables the "copy" menu!