Handle copy gesture for flame graph and stack chart (Fixes #3695)

src/components/app/KeyboardShortcut.js

@@ -186,6 +186,11 @@ export class KeyboardShortcut extends React.PureComponent<Props, State> {
             <Shortcut label="Move selection down" shortcut="ArrowDown" />
             <Shortcut label="Move selection left" shortcut="ArrowLeft" />
             <Shortcut label="Move selection right" shortcut="ArrowRight" />
+            <Shortcut
+              label="Copy call node label"
+              shortcut="ctrl,c"
+              macShortcut="cmd,c"
+            />
 
             <h2>Marker Table</h2>
             <Shortcut

src/components/flame-graph/FlameGraph.js

@@ -103,6 +103,14 @@ type Props = ConnectedProps<{||}, StateProps, DispatchProps>;
 class FlameGraphImpl extends React.PureComponent<Props> {
   _viewport: HTMLDivElement | null = null;
 
+  componentDidMount() {
+    document.addEventListener('copy', this._onCopy, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('copy', this._onCopy, false);
+  }
+
   _onSelectedCallNodeChange = (
     callNodeIndex: IndexIntoCallNodeTable | null
   ) => {
@@ -301,6 +309,24 @@ class FlameGraphImpl extends React.PureComponent<Props> {
     }
   };
 
+  _onCopy = (event: ClipboardEvent) => {
+    if (document.activeElement === this._viewport) {
+      event.preventDefault();
+      const {
+        callNodeInfo: { callNodeTable },
+        selectedCallNodeIndex,
+        thread,
+      } = this.props;
+      if (selectedCallNodeIndex !== null) {
+        const funcIndex = callNodeTable.func[selectedCallNodeIndex];
+        const funcName = thread.stringTable.getString(
+          thread.funcTable.name[funcIndex]
+        );
+        event.clipboardData.setData('text/plain', funcName);
+      }
+    }
+  };
+
   render() {
     const {
       thread,

src/components/stack-chart/index.js

@@ -158,10 +158,33 @@ class StackChartImpl extends React.PureComponent<Props> {
     handleCallNodeTransformShortcut(event, threadsKey, nodeIndex);
   };
 
+  _onCopy = (event: ClipboardEvent) => {
+    if (document.activeElement === this._viewport) {
+      event.preventDefault();
+      const {
+        callNodeInfo: { callNodeTable },
+        selectedCallNodeIndex,
+        thread,
+      } = this.props;
+      if (selectedCallNodeIndex !== null) {
+        const funcIndex = callNodeTable.func[selectedCallNodeIndex];
+        const funcName = thread.stringTable.getString(
+          thread.funcTable.name[funcIndex]
+        );
+        event.clipboardData.setData('text/plain', funcName);
+      }
+    }
+  };
+
   componentDidMount() {
+    document.addEventListener('copy', this._onCopy, false);
     this._focusViewport();
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('copy', this._onCopy, false);
+  }
+
   render() {
     const {
       thread,

src/test/components/__snapshots__/KeyboardShortcut.test.js.snap

@@ -225,6 +225,25 @@ exports[`app/KeyboardShortcut matches the snapshot when open 1`] = `
               ArrowRight
             </kbd>
           </div>
+          <div
+            class="appKeyboardShortcutsRow"
+          >
+            <div
+              class="appKeyboardShortcutsLabel"
+            >
+              Copy call node label
+            </div>
+            <kbd
+              class="appKeyboardShortcutsShortcut"
+            >
+              ctrl
+            </kbd>
+            <kbd
+              class="appKeyboardShortcutsShortcut"
+            >
+              c
+            </kbd>
+          </div>
           <h2>
             Marker Table
           </h2>