Devtools renable copy attr context menu for firefox (#17740)

* Use exportFunction() to share clipboard copy with JS running in document/page context.

* Remove no-longer-used option to disable copy operation.

Author: Brian Vaughn

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": [
     {

packages/react-devtools-extensions/src/injectGlobalHook.js

@@ -97,3 +97,19 @@ if (document.contentType === 'text/html') {
       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'},
+  );
+}

packages/react-devtools-extensions/src/main.js

@@ -211,7 +211,6 @@ function createPanelIfReactLoaded() {
               browserTheme: getBrowserTheme(),
               componentsPortalContainer,
               enabledInspectedElementContextMenu: true,
-              enabledInspectedElementContextMenuCopy: isChrome,
               overrideTab,
               profilerPortalContainer,
               showTabBar: false,

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 (typeof clipboardCopyText === 'function') {
+    clipboardCopyText(text).catch(err => {});
+  } else {
+    copy(text);
+  }
 }
 
 export function copyWithSet(

packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js

@@ -303,7 +303,6 @@ function InspectedElementView({
 
   const {
     isEnabledForInspectedElement,
-    supportsCopyOperation,
     viewAttributeSourceFunction,
   } = useContext(ContextMenuContext);
 
@@ -445,14 +444,12 @@ function InspectedElementView({
         <ContextMenu id="SelectedElement">
           {data => (
             <Fragment>
-              {supportsCopyOperation && (
-                <ContextMenuItem
-                  onClick={() => copyInspectedElementPath(id, data.path)}
-                  title="Copy value to clipboard">
-                  <Icon className={styles.ContextMenuIcon} type="copy" /> Copy
-                  value to clipboard
-                </ContextMenuItem>
-              )}
+              <ContextMenuItem
+                onClick={() => copyInspectedElementPath(id, data.path)}
+                title="Copy value to clipboard">
+                <Icon className={styles.ContextMenuIcon} type="copy" /> Copy
+                value to clipboard
+              </ContextMenuItem>
               <ContextMenuItem
                 onClick={() => storeAsGlobal(id, data.path)}
                 title="Store as global variable">

packages/react-devtools-shared/src/devtools/views/DevTools.js

@@ -54,7 +54,6 @@ export type Props = {|
   canViewElementSourceFunction?: ?CanViewElementSource,
   defaultTab?: TabID,
   enabledInspectedElementContextMenu?: boolean,
-  enabledInspectedElementContextMenuCopy?: boolean,
   showTabBar?: boolean,
   store: Store,
   warnIfLegacyBackendDetected?: boolean,
@@ -97,7 +96,6 @@ export default function DevTools({
   componentsPortalContainer,
   defaultTab = 'components',
   enabledInspectedElementContextMenu = false,
-  enabledInspectedElementContextMenuCopy = false,
   overrideTab,
   profilerPortalContainer,
   showTabBar = false,
@@ -123,14 +121,9 @@ export default function DevTools({
   const contextMenu = useMemo(
     () => ({
       isEnabledForInspectedElement: enabledInspectedElementContextMenu,
-      supportsCopyOperation: enabledInspectedElementContextMenuCopy,
       viewAttributeSourceFunction: viewAttributeSourceFunction || null,
     }),
-    [
-      enabledInspectedElementContextMenu,
-      enabledInspectedElementContextMenuCopy,
-      viewAttributeSourceFunction,
-    ],
+    [enabledInspectedElementContextMenu, viewAttributeSourceFunction],
   );
 
   useEffect(

packages/react-devtools-shared/src/devtools/views/context.js

@@ -23,13 +23,11 @@ StoreContext.displayName = 'StoreContext';
 
 export type ContextMenuContextType = {|
   isEnabledForInspectedElement: boolean,
-  supportsCopyOperation: boolean,
   viewAttributeSourceFunction?: ?ViewAttributeSource,
 |};
 
 export const ContextMenuContext = createContext<ContextMenuContextType>({
   isEnabledForInspectedElement: false,
-  supportsCopyOperation: false,
   viewAttributeSourceFunction: null,
 });
 ContextMenuContext.displayName = 'ContextMenuContext';

packages/react-devtools-shell/src/devtools.js

@@ -56,7 +56,6 @@ inject('dist/app.js', () => {
         createElement(DevTools, {
           browserTheme: 'light',
           enabledInspectedElementContextMenu: true,
-          enabledInspectedElementContextMenuCopy: true,
           showTabBar: true,
           warnIfLegacyBackendDetected: true,
           warnIfUnsupportedVersionDetected: true,