Fix double-click opening source view and context menus in butterfly wings

- Fix wrong tab slug ('calltree' → 'function-list') in _onEnterOrDoubleClick
  for SelfWing, UpperWingFlameGraph, LowerWing, and UpperWing so that
  double-clicking a call node opens the bottom box for the correct tab
- Add a contextMenuId prop to FlameGraph (defaulting to 'CallNodeContextMenu')
  so wings can specify a different context menu
- Wire up FunctionListContextMenu for UpperWingFlameGraph and SelfWing:
  right-clicking now dispatches changeRightClickedFunctionIndex so the
  FunctionListContextMenu (already rendered in Details) can respond

Author: mstange

src/components/calltree/LowerWing.tsx

@@ -202,7 +202,7 @@ class LowerWingImpl extends PureComponent<Props> {
   _onEnterOrDoubleClick = (nodeId: IndexIntoCallNodeTable) => {
     const { tree, updateBottomBoxContentsAndMaybeOpen } = this.props;
     const bottomBoxInfo = tree.getBottomBoxInfoForCallNode(nodeId);
-    updateBottomBoxContentsAndMaybeOpen('calltree', bottomBoxInfo);
+    updateBottomBoxContentsAndMaybeOpen('function-list', bottomBoxInfo);
   };
 
   maybeProcureInterestingInitialSelection() {

src/components/calltree/SelfWing.tsx

@@ -22,7 +22,10 @@ import {
   getSelectedThreadsKey,
   getInvertCallstack,
 } from 'firefox-profiler/selectors/url-state';
-import { updateBottomBoxContentsAndMaybeOpen } from 'firefox-profiler/actions/profile-view';
+import {
+  updateBottomBoxContentsAndMaybeOpen,
+  changeRightClickedFunctionIndex,
+} from 'firefox-profiler/actions/profile-view';
 
 import type {
   Thread,
@@ -69,6 +72,7 @@ type StateProps = {
 
 type DispatchProps = {
   readonly updateBottomBoxContentsAndMaybeOpen: typeof updateBottomBoxContentsAndMaybeOpen;
+  readonly changeRightClickedFunctionIndex: typeof changeRightClickedFunctionIndex;
 };
 
 type Props = ConnectedProps<{}, StateProps, DispatchProps>;
@@ -108,6 +112,11 @@ class SelfWingImpl extends React.PureComponent<Props, LocalState> {
     callNodeIndex: IndexIntoCallNodeTable | null
   ) => {
     this.setState({ rightClickedCallNodeIndex: callNodeIndex });
+    const { callNodeInfo, threadsKey, changeRightClickedFunctionIndex } =
+      this.props;
+    const funcIndex =
+      callNodeIndex !== null ? callNodeInfo.funcForNode(callNodeIndex) : null;
+    changeRightClickedFunctionIndex(threadsKey, funcIndex);
   };
 
   _onCallNodeEnterOrDoubleClick = (
@@ -118,7 +127,7 @@ class SelfWingImpl extends React.PureComponent<Props, LocalState> {
     }
     const { callTree, updateBottomBoxContentsAndMaybeOpen } = this.props;
     const bottomBoxInfo = callTree.getBottomBoxInfoForCallNode(callNodeIndex);
-    updateBottomBoxContentsAndMaybeOpen('calltree', bottomBoxInfo);
+    updateBottomBoxContentsAndMaybeOpen('function-list', bottomBoxInfo);
   };
 
   // Transforms are disabled in the SelfWing because it operates on an ephemeral
@@ -177,6 +186,7 @@ class SelfWingImpl extends React.PureComponent<Props, LocalState> {
         }
         tracedTiming={null}
         displayStackType={displayStackType}
+        contextMenuId="FunctionListContextMenu"
         onSelectedCallNodeChange={this._onSelectedCallNodeChange}
         onRightClickedCallNodeChange={this._onRightClickedCallNodeChange}
         onCallNodeEnterOrDoubleClick={this._onCallNodeEnterOrDoubleClick}
@@ -215,6 +225,7 @@ export const SelfWing = explicitConnect<{}, StateProps, DispatchProps>({
   }),
   mapDispatchToProps: {
     updateBottomBoxContentsAndMaybeOpen,
+    changeRightClickedFunctionIndex,
   },
   component: SelfWingImpl,
 });

src/components/calltree/UpperWing.tsx

@@ -204,7 +204,7 @@ class UpperWingImpl extends PureComponent<Props> {
   _onEnterOrDoubleClick = (nodeId: IndexIntoCallNodeTable) => {
     const { tree, updateBottomBoxContentsAndMaybeOpen } = this.props;
     const bottomBoxInfo = tree.getBottomBoxInfoForCallNode(nodeId);
-    updateBottomBoxContentsAndMaybeOpen('calltree', bottomBoxInfo);
+    updateBottomBoxContentsAndMaybeOpen('function-list', bottomBoxInfo);
   };
 
   maybeProcureInterestingInitialSelection() {

src/components/calltree/UpperWingFlameGraph.tsx

@@ -25,6 +25,7 @@ import {
 import {
   changeUpperWingSelectedCallNode,
   changeUpperWingRightClickedCallNode,
+  changeRightClickedFunctionIndex,
   handleCallNodeTransformShortcut,
   updateBottomBoxContentsAndMaybeOpen,
 } from 'firefox-profiler/actions/profile-view';
@@ -83,6 +84,7 @@ type StateProps = {
 type DispatchProps = {
   readonly changeUpperWingSelectedCallNode: typeof changeUpperWingSelectedCallNode;
   readonly changeUpperWingRightClickedCallNode: typeof changeUpperWingRightClickedCallNode;
+  readonly changeRightClickedFunctionIndex: typeof changeRightClickedFunctionIndex;
   readonly handleCallNodeTransformShortcut: typeof handleCallNodeTransformShortcut;
   readonly updateBottomBoxContentsAndMaybeOpen: typeof updateBottomBoxContentsAndMaybeOpen;
 };
@@ -119,12 +121,19 @@ class UpperWingFlameGraphImpl
   _onRightClickedCallNodeChange = (
     callNodeIndex: IndexIntoCallNodeTable | null
   ) => {
-    const { callNodeInfo, threadsKey, changeUpperWingRightClickedCallNode } =
-      this.props;
+    const {
+      callNodeInfo,
+      threadsKey,
+      changeUpperWingRightClickedCallNode,
+      changeRightClickedFunctionIndex,
+    } = this.props;
     changeUpperWingRightClickedCallNode(
       threadsKey,
       callNodeInfo.getCallNodePathFromIndex(callNodeIndex)
     );
+    const funcIndex =
+      callNodeIndex !== null ? callNodeInfo.funcForNode(callNodeIndex) : null;
+    changeRightClickedFunctionIndex(threadsKey, funcIndex);
   };
 
   _onCallNodeEnterOrDoubleClick = (
@@ -135,7 +144,7 @@ class UpperWingFlameGraphImpl
     }
     const { callTree, updateBottomBoxContentsAndMaybeOpen } = this.props;
     const bottomBoxInfo = callTree.getBottomBoxInfoForCallNode(callNodeIndex);
-    updateBottomBoxContentsAndMaybeOpen('calltree', bottomBoxInfo);
+    updateBottomBoxContentsAndMaybeOpen('function-list', bottomBoxInfo);
   };
 
   _onKeyboardTransformShortcut = (
@@ -198,6 +207,7 @@ class UpperWingFlameGraphImpl
         }
         tracedTiming={tracedTiming}
         displayStackType={displayStackType}
+        contextMenuId="FunctionListContextMenu"
         onSelectedCallNodeChange={this._onSelectedCallNodeChange}
         onRightClickedCallNodeChange={this._onRightClickedCallNodeChange}
         onCallNodeEnterOrDoubleClick={this._onCallNodeEnterOrDoubleClick}
@@ -247,6 +257,7 @@ export const UpperWingFlameGraph = explicitConnectWithForwardRef<
   mapDispatchToProps: {
     changeUpperWingSelectedCallNode,
     changeUpperWingRightClickedCallNode,
+    changeRightClickedFunctionIndex,
     handleCallNodeTransformShortcut,
     updateBottomBoxContentsAndMaybeOpen,
   },

src/components/flame-graph/FlameGraph.tsx

@@ -65,6 +65,7 @@ export type Props = {
   readonly ctssSampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories;
   readonly tracedTiming: CallTreeTimings | null;
   readonly displayStackType: boolean;
+  readonly contextMenuId?: string;
   readonly onSelectedCallNodeChange: (
     callNodeIndex: IndexIntoCallNodeTable | null
   ) => void;
@@ -282,6 +283,7 @@ class FlameGraphImpl
       ctssSampleCategoriesAndSubcategories,
       tracedTiming,
       displayStackType,
+      contextMenuId = 'CallNodeContextMenu',
       onSelectedCallNodeChange,
       onRightClickedCallNodeChange,
       onCallNodeEnterOrDoubleClick,
@@ -305,7 +307,7 @@ class FlameGraphImpl
     return (
       <div className="flameGraphContent" onKeyDown={this._handleKeyDown}>
         <ContextMenuTrigger
-          id="CallNodeContextMenu"
+          id={contextMenuId}
           attributes={{
             className: 'treeViewContextMenu',
           }}