fix[devtools]: use native clipboard api instead of clipboard-js

Author: hoxyq

packages/react-devtools-extensions/firefox/manifest.json

@@ -6,7 +6,7 @@
   "applications": {
     "gecko": {
       "id": "@react-devtools",
-      "strict_min_version": "55.0"
+      "strict_min_version": "63.0"
     }
   },
   "icons": {

packages/react-devtools-shared/package.json

@@ -17,7 +17,6 @@
     "@babel/traverse": "^7.12.5",
     "@reach/menu-button": "^0.16.1",
     "@reach/tooltip": "^0.16.0",
-    "clipboard-js": "^0.3.6",
     "compare-versions": "^5.0.3",
     "json5": "^2.1.3",
     "local-storage-fallback": "^4.1.1",

packages/react-devtools-shared/src/__tests__/setupTests.js

@@ -33,12 +33,10 @@ if (compactConsole) {
 }
 
 beforeEach(() => {
+  // Storing this mock, so it can be accessed to reset its state
+  // Used inside inspectElement-test
   global.mockClipboardCopy = jest.fn();
-
-  // Test environment doesn't support document methods like execCommand()
-  // Also once the backend components below have been required,
-  // it's too late for a test to mock the clipboard-js modules.
-  jest.mock('clipboard-js', () => ({copy: global.mockClipboardCopy}));
+  global.navigator.clipboard = {writeText: global.mockClipboardCopy};
 
   // These files should be required (and re-required) before each test,
   // rather than imported at the head of the module.

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -14,20 +14,22 @@ import {
   ElementTypeHostComponent,
   ElementTypeOtherOrUnknown,
 } from 'react-devtools-shared/src/types';
-import {getUID, utfEncodeString, printOperationsArray} from '../../utils';
 import {
   cleanForBridge,
-  copyToClipboard,
   copyWithDelete,
   copyWithRename,
   copyWithSet,
-} from '../utils';
+} from 'react-devtools-shared/src/backend/utils';
 import {
   deletePathInObject,
   getDisplayName,
   getInObject,
-  renamePathInObject,
+  serializeAndCopyToClipboard,
   setInObject,
+  renamePathInObject,
+  getUID,
+  utfEncodeString,
+  printOperationsArray,
 } from 'react-devtools-shared/src/utils';
 import {
   __DEBUG__,
@@ -704,7 +706,7 @@ export function attach(
   function copyElementPath(id: number, path: Array<string | number>): void {
     const inspectedElement = inspectElementRaw(id);
     if (inspectedElement !== null) {
-      copyToClipboard(getInObject(inspectedElement, path));
+      serializeAndCopyToClipboard(getInObject(inspectedElement, path));
     }
   }
 

packages/react-devtools-shared/src/backend/renderer.js

@@ -34,19 +34,20 @@ import {
   getInObject,
   getUID,
   renamePathInObject,
+  serializeAndCopyToClipboard,
   setInObject,
   utfEncodeString,
 } from 'react-devtools-shared/src/utils';
 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
-import {gt, gte} from 'react-devtools-shared/src/backend/utils';
 import {
   cleanForBridge,
-  copyToClipboard,
   copyWithDelete,
   copyWithRename,
   copyWithSet,
+  gt,
+  gte,
   getEffectDurations,
-} from './utils';
+} from 'react-devtools-shared/src/backend/utils';
 import {
   __DEBUG__,
   PROFILING_FLAG_BASIC_SUPPORT,
@@ -3540,7 +3541,7 @@ export function attach(
 
   function copyElementPath(id: number, path: Array<string | number>): void {
     if (isMostRecentlyInspectedElement(id)) {
-      copyToClipboard(
+      serializeAndCopyToClipboard(
         getInObject(
           ((mostRecentlyInspectedElement: any): InspectedElement),
           path,

packages/react-devtools-shared/src/backend/utils.js

@@ -8,7 +8,6 @@
  * @flow
  */
 
-import {copy} from 'clipboard-js';
 import {compareVersions} from 'compare-versions';
 import {dehydrate} from '../hydration';
 import isArray from 'shared/isArray';
@@ -41,23 +40,6 @@ export function cleanForBridge(
   }
 }
 
-export function copyToClipboard(value: any): void {
-  const safeToCopy = serializeToString(value);
-  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 copyWithDelete(
   obj: Object | Array<any>,
   path: Array<string | number>,
@@ -143,23 +125,6 @@ export function getEffectDurations(root: Object): {
   return {effectDuration, passiveEffectDuration};
 }
 
-export function serializeToString(data: any): string {
-  const cache = new Set<mixed>();
-  // Use a custom replacer function to protect against circular references.
-  return JSON.stringify(data, (key, value) => {
-    if (typeof value === 'object' && value !== null) {
-      if (cache.has(value)) {
-        return;
-      }
-      cache.add(value);
-    }
-    if (typeof value === 'bigint') {
-      return value.toString() + 'n';
-    }
-    return value;
-  });
-}
-
 // Formats an array of args with a style for console methods, using
 // the following algorithm:
 //     1. The first param is a string that contains %c

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

@@ -7,7 +7,6 @@
  * @flow
  */
 
-import {copy} from 'clipboard-js';
 import * as React from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
@@ -19,6 +18,7 @@ import {
   ElementTypeClass,
   ElementTypeFunction,
 } from 'react-devtools-shared/src/types';
+import {copyToClipboard} from 'react-devtools-shared/src/utils';
 
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
@@ -48,7 +48,7 @@ export default function InspectedElementContextTree({
 
   const isEmpty = entries === null || entries.length === 0;
 
-  const handleCopy = () => copy(serializeDataForCopy(((context: any): Object)));
+  const handleCopy = () => copyToClipboard(serializeDataForCopy(context));
 
   // We add an object with a "value" key as a wrapper around Context data
   // so that we can use the shared <KeyValue> component to display it.

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

@@ -7,7 +7,6 @@
  * @flow
  */
 
-import {copy} from 'clipboard-js';
 import * as React from 'react';
 import {useCallback, useContext, useRef, useState} from 'react';
 import {BridgeContext, StoreContext} from '../context';
@@ -28,6 +27,7 @@ import {
 } from 'react-devtools-feature-flags';
 import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 import isArray from 'react-devtools-shared/src/isArray';
+import {copyToClipboard} from 'react-devtools-shared/src/utils';
 
 import type {InspectedElement} from './types';
 import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
@@ -79,7 +79,7 @@ export function InspectedElementHooksTree({
     toggleTitle = 'Parse hook names (may be slow)';
   }
 
-  const handleCopy = () => copy(serializeHooksForCopy(hooks));
+  const handleCopy = () => copyToClipboard(serializeHooksForCopy(hooks));
 
   if (hooks === null) {
     return null;

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

@@ -7,7 +7,6 @@
  * @flow
  */
 
-import {copy} from 'clipboard-js';
 import * as React from 'react';
 import {OptionsContext} from '../context';
 import Button from '../Button';
@@ -18,6 +17,7 @@ import {alphaSortEntries, serializeDataForCopy} from '../utils';
 import Store from '../../store';
 import styles from './InspectedElementSharedStyles.css';
 import {ElementTypeClass} from 'react-devtools-shared/src/types';
+import {copyToClipboard} from 'react-devtools-shared/src/utils';
 
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
@@ -59,8 +59,7 @@ export default function InspectedElementPropsTree({
   }
 
   const isEmpty = entries === null || entries.length === 0;
-
-  const handleCopy = () => copy(serializeDataForCopy(((props: any): Object)));
+  const handleCopy = () => copyToClipboard(serializeDataForCopy(props));
 
   return (
     <div

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

@@ -7,7 +7,6 @@
  * @flow
  */
 
-import {copy} from 'clipboard-js';
 import * as React from 'react';
 import {ElementTypeHostComponent} from 'react-devtools-shared/src/types';
 import Button from '../Button';
@@ -16,6 +15,7 @@ import KeyValue from './KeyValue';
 import {alphaSortEntries, serializeDataForCopy} from '../utils';
 import Store from '../../store';
 import styles from './InspectedElementSharedStyles.css';
+import {copyToClipboard} from 'react-devtools-shared/src/utils';
 
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
@@ -50,7 +50,7 @@ export default function InspectedElementStateTree({
     entries.sort(alphaSortEntries);
   }
 
-  const handleCopy = () => copy(serializeDataForCopy(((state: any): Object)));
+  const handleCopy = () => copyToClipboard(serializeDataForCopy(state));
 
   return (
     <div className={styles.InspectedElementTree}>

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

@@ -7,7 +7,6 @@
  * @flow
  */
 
-import {copy} from 'clipboard-js';
 import * as React from 'react';
 import {Fragment, useCallback, useContext} from 'react';
 import {TreeDispatcherContext} from './TreeContext';
@@ -34,6 +33,7 @@ import {
 } from 'react-devtools-shared/src/backendAPI';
 import {enableStyleXFeatures} from 'react-devtools-feature-flags';
 import {logEvent} from 'react-devtools-shared/src/Logger';
+import {copyToClipboard} from 'react-devtools-shared/src/utils';
 
 import styles from './InspectedElementView.css';
 
@@ -260,7 +260,7 @@ type SourceProps = {
 };
 
 function Source({fileName, lineNumber}: SourceProps) {
-  const handleCopy = () => copy(`${fileName}:${lineNumber}`);
+  const handleCopy = () => copyToClipboard(`${fileName}:${lineNumber}`);
   return (
     <div className={styles.Source} data-testname="InspectedElementView-Source">
       <div className={styles.SourceHeaderRow}>

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js

@@ -10,11 +10,11 @@
 import * as React from 'react';
 import {useContext, useMemo, useRef, useState} from 'react';
 import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
-import {copy} from 'clipboard-js';
 import {
   BridgeContext,
   StoreContext,
 } from 'react-devtools-shared/src/devtools/views/context';
+import {copyToClipboard} from 'react-devtools-shared/src/utils';
 import Button from '../../Button';
 import ButtonIcon from '../../ButtonIcon';
 import {serializeDataForCopy} from '../../utils';
@@ -63,7 +63,7 @@ export default function StyleEditor({id, style}: Props): React.Node {
 
   const keys = useMemo(() => Array.from(Object.keys(style)), [style]);
 
-  const handleCopy = () => copy(serializeDataForCopy(style));
+  const handleCopy = () => copyToClipboard(serializeDataForCopy(style));
 
   return (
     <div className={styles.StyleEditor}>

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js

@@ -21,7 +21,7 @@ import {
   getSchedulingEventLabel,
 } from 'react-devtools-timeline/src/utils/formatting';
 import {stackToComponentSources} from 'react-devtools-shared/src/devtools/utils';
-import {copy} from 'clipboard-js';
+import {copyToClipboard} from 'react-devtools-shared/src/utils';
 
 import styles from './SidebarEventInfo.css';
 
@@ -58,7 +58,7 @@ function SchedulingEventInfo({eventInfo}: SchedulingEventProps) {
               <div className={styles.Row}>
                 <label className={styles.Label}>Rendered by</label>
                 <Button
-                  onClick={() => copy(componentStack)}
+                  onClick={() => copyToClipboard(componentStack)}
                   title="Copy component stack to clipboard">
                   <ButtonIcon type="copy" />
                 </Button>

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

@@ -14,8 +14,8 @@ import {StoreContext} from './context';
 import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge';
 import Button from './Button';
 import ButtonIcon from './ButtonIcon';
-import {copy} from 'clipboard-js';
 import styles from './UnsupportedBridgeProtocolDialog.css';
+import {copyToClipboard} from 'react-devtools-shared/src/utils';
 
 import type {BridgeProtocol} from 'react-devtools-shared/src/bridge';
 
@@ -82,7 +82,7 @@ function DialogContent({
         <pre className={styles.NpmCommand}>
           {upgradeInstructions}
           <Button
-            onClick={() => copy(upgradeInstructions)}
+            onClick={() => copyToClipboard(upgradeInstructions)}
             title="Copy upgrade command to clipboard">
             <ButtonIcon type="copy" />
           </Button>
@@ -99,7 +99,7 @@ function DialogContent({
         <pre className={styles.NpmCommand}>
           {downgradeInstructions}
           <Button
-            onClick={() => copy(downgradeInstructions)}
+            onClick={() => copyToClipboard(downgradeInstructions)}
             title="Copy downgrade command to clipboard">
             <ButtonIcon type="copy" />
           </Button>

packages/react-devtools-shared/src/utils.js

@@ -890,3 +890,41 @@ export const isPlainObject = (object: Object): boolean => {
   const objectParentPrototype = Object.getPrototypeOf(objectPrototype);
   return !objectParentPrototype;
 };
+
+export function serializeToString(data: any): string {
+  const cache = new Set<mixed>();
+  // Use a custom replacer function to protect against circular references.
+  return JSON.stringify(data, (key, value) => {
+    if (typeof value === 'object' && value !== null) {
+      if (cache.has(value)) {
+        return;
+      }
+      cache.add(value);
+    }
+    if (typeof value === 'bigint') {
+      return value.toString() + 'n';
+    }
+    return value;
+  });
+}
+
+export function copyToClipboard(text: string): void {
+  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 a helper injected into the page from injectGlobalHook.
+  if (typeof clipboardCopyText === 'function') {
+    clipboardCopyText(text).catch(err => {});
+  } else {
+    navigator.clipboard.writeText(text);
+  }
+}
+
+export function serializeAndCopyToClipboard(value: any): void {
+  const serializedValue = serializeToString(value);
+  const text = serializedValue === undefined ? 'undefined' : serializedValue;
+
+  copyToClipboard(text);
+}