Track context menus should be accessible from anywhere in the track, fixes #3947. (#5562)

fqueze · web-flow · commit da1ad1719be5 · 2025-09-15T11:58:52.000+02:00
diff --git a/src/components/timeline/GlobalTrack.tsx b/src/components/timeline/GlobalTrack.tsx
@@ -63,7 +63,7 @@ type StateProps = {
   readonly globalTrack: GlobalTrack;
   readonly isSelected: boolean;
   readonly isHidden: boolean;
-  readonly titleText: string | null;
+  readonly titleText: string | undefined;
   readonly localTrackOrder: TrackIndex[];
   readonly localTracks: LocalTrack[];
   readonly pid: Pid | null;
@@ -257,20 +257,20 @@ class GlobalTrackComponent extends PureComponent<Props> {
         className="timelineTrack"
         style={style as React.CSSProperties}
       >
-        <div
-          className={classNames('timelineTrackRow timelineTrackGlobalRow', {
-            selected: isSelected,
-          })}
-          onClick={this._selectCurrentTrack}
+        <ContextMenuTrigger
+          id="TimelineTrackContextMenu"
+          renderTag="div"
+          attributes={{
+            className: classNames('timelineTrackRow timelineTrackGlobalRow', {
+              selected: isSelected,
+            }),
+            onContextMenu: this._onContextMenu,
+          }}
         >
-          <ContextMenuTrigger
-            id="TimelineTrackContextMenu"
-            renderTag="div"
-            attributes={{
-              title: titleText,
-              className: 'timelineTrackLabel timelineTrackGlobalGrippy',
-              onContextMenu: this._onContextMenu,
-            }}
+          <div
+            className="timelineTrackLabel timelineTrackGlobalGrippy"
+            title={titleText}
+            onClick={this._selectCurrentTrack}
           >
             <button type="button" className="timelineTrackNameButton">
               {trackName}
@@ -301,9 +301,14 @@ class GlobalTrackComponent extends PureComponent<Props> {
                 onClick={this._hideCurrentTrack}
               />
             </Localized>
-          </ContextMenuTrigger>
-          <div className="timelineTrackTrack">{this.renderTrack()}</div>
-        </div>
+          </div>
+          <div
+            className="timelineTrackTrack"
+            onClick={this._selectCurrentTrack}
+          >
+            {this.renderTrack()}
+          </div>
+        </ContextMenuTrigger>
         {localTracks.length > 0 && pid !== null
           ? this.renderLocalTracks(pid)
           : null}
@@ -329,7 +334,7 @@ export const TimelineGlobalTrack = explicitConnect<
     // These get assigned based on the track type.
     let threadIndex = null;
     let isSelected = false;
-    let titleText = null;
+    let titleText;
 
     let localTrackOrder = EMPTY_TRACK_ORDER;
     let localTracks = EMPTY_LOCAL_TRACKS;
diff --git a/src/components/timeline/LocalTrack.tsx b/src/components/timeline/LocalTrack.tsx
@@ -54,7 +54,7 @@ type StateProps = {
   readonly trackName: string;
   readonly isSelected: boolean;
   readonly isHidden: boolean;
-  readonly titleText: string | null;
+  readonly titleText: string | undefined;
 };
 
 type DispatchProps = {
@@ -151,21 +151,20 @@ class LocalTrackComponent extends PureComponent<Props> {
     return (
       <li className="timelineTrack timelineTrackLocal" style={style}>
         {/* This next div is used to mirror the structure of the TimelineGlobalTrack */}
-        <div
-          className={classNames('timelineTrackRow timelineTrackLocalRow', {
-            selected: isSelected,
-          })}
-          onClick={this._selectCurrentTrack}
+        <ContextMenuTrigger
+          id="TimelineTrackContextMenu"
+          renderTag="div"
+          attributes={{
+            className: classNames('timelineTrackRow timelineTrackLocalRow', {
+              selected: isSelected,
+            }),
+            onContextMenu: this._onContextMenu,
+          }}
         >
-          <ContextMenuTrigger
-            id="TimelineTrackContextMenu"
-            renderTag="div"
-            attributes={{
-              title: titleText,
-              className:
-                'timelineTrackLabel timelineTrackLocalLabel timelineTrackLocalGrippy',
-              onContextMenu: this._onContextMenu,
-            }}
+          <div
+            className="timelineTrackLabel timelineTrackLocalLabel timelineTrackLocalGrippy"
+            title={titleText}
+            onClick={this._selectCurrentTrack}
           >
             <button type="button" className="timelineTrackNameButton">
               {trackName}
@@ -178,9 +177,14 @@ class LocalTrackComponent extends PureComponent<Props> {
                 onClick={this._hideCurrentTrack}
               />
             </Localized>
-          </ContextMenuTrigger>
-          <div className="timelineTrackTrack">{this.renderTrack()}</div>
-        </div>
+          </div>
+          <div
+            className="timelineTrackTrack"
+            onClick={this._selectCurrentTrack}
+          >
+            {this.renderTrack()}
+          </div>
+        </ContextMenuTrigger>
       </li>
     );
   }
@@ -193,7 +197,7 @@ export const TimelineLocalTrack = explicitConnect<
 >({
   mapStateToProps: (state, { pid, localTrack, trackIndex }) => {
     // These get assigned based on the track type.
-    let titleText = null;
+    let titleText;
     let isSelected = false;
 
     const selectedThreadIndexes = getSelectedThreadIndexes(state);
diff --git a/src/components/timeline/Markers.tsx b/src/components/timeline/Markers.tsx
@@ -470,7 +470,10 @@ class TimelineMarkers extends React.PureComponent<Props, State> {
           isSelected ? 'selected' : null
         )}
       >
-        <ContextMenuTrigger id="MarkerContextMenu">
+        <ContextMenuTrigger
+          id="MarkerContextMenu"
+          disable={hoveredMarkerIndex === null && rightClickedMarker === null}
+        >
           <TimelineMarkersCanvas
             width={this.props.width}
             height={this.props.height}
diff --git a/src/components/timeline/TrackNetwork.tsx b/src/components/timeline/TrackNetwork.tsx
@@ -369,6 +369,9 @@ class Network extends PureComponent<Props, State> {
       >
         <ContextMenuTrigger
           id="MarkerContextMenu"
+          disable={
+            hoveredMarkerIndex === null && rightClickedMarkerIndex === null
+          }
           attributes={{
             className: 'treeViewContextMenu',
           }}
diff --git a/src/test/components/GlobalTrack.test.tsx b/src/test/components/GlobalTrack.test.tsx
@@ -139,6 +139,11 @@ describe('timeline/GlobalTrack', function () {
         container.querySelector('.timelineTrackLabel'),
         `Couldn't find the track label with selector .timelineTrackLabel`
       ) as HTMLElement;
+    const getGlobalTrackContent = () =>
+      ensureExists(
+        container.querySelector('.timelineTrackTrack'),
+        `Couldn't find the track content with selector .timelineTrackTrack`
+      ) as HTMLElement;
     const getGlobalTrackRow = () =>
       ensureExists(
         container.querySelector('.timelineTrackGlobalRow'),
@@ -155,6 +160,7 @@ describe('timeline/GlobalTrack', function () {
       trackIndex,
       threadIndex,
       getGlobalTrackLabel,
+      getGlobalTrackContent,
       getGlobalTrackRow,
     };
   }
@@ -222,7 +228,7 @@ describe('timeline/GlobalTrack', function () {
     expect(getGlobalTrackRow()).toHaveClass('selected');
   });
 
-  it('can right click a thread', () => {
+  it('can right click a thread on the label', () => {
     const { getState, getGlobalTrackLabel, threadIndex, trackReference } =
       setup();
 
@@ -231,13 +237,22 @@ describe('timeline/GlobalTrack', function () {
     expect(getFirstSelectedThreadIndex(getState())).not.toBe(threadIndex);
   });
 
-  it('can select a thread by clicking the row', () => {
-    const { getState, getGlobalTrackRow, threadIndex } = setup();
+  it('can select a thread by clicking the track content', () => {
+    const { getState, getGlobalTrackContent, threadIndex } = setup();
     expect(getFirstSelectedThreadIndex(getState())).not.toBe(threadIndex);
-    fireFullClick(getGlobalTrackRow());
+    fireFullClick(getGlobalTrackContent());
     expect(getFirstSelectedThreadIndex(getState())).toBe(threadIndex);
   });
 
+  it('can right click a thread on the track content', () => {
+    const { getState, getGlobalTrackContent, threadIndex, trackReference } =
+      setup();
+
+    fireFullContextMenu(getGlobalTrackContent());
+    expect(getRightClickedTrack(getState())).toEqual(trackReference);
+    expect(getFirstSelectedThreadIndex(getState())).not.toBe(threadIndex);
+  });
+
   it('will render a stub div if the track is hidden', () => {
     const { container, trackIndex, dispatch } = setup();
     act(() => {
diff --git a/src/test/components/LocalTrack.test.tsx b/src/test/components/LocalTrack.test.tsx
@@ -78,7 +78,7 @@ describe('timeline/LocalTrack', function () {
       expect(getLocalTrackRow()).toHaveClass('selected');
     });
 
-    it('can right click a thread', () => {
+    it('can right click a thread on the label', () => {
       const { getState, getLocalTrackLabel, threadIndex, trackReference } =
         setupThreadTrack();
 
@@ -87,13 +87,23 @@ describe('timeline/LocalTrack', function () {
       expect(getFirstSelectedThreadIndex(getState())).not.toBe(threadIndex);
     });
 
-    it('can select a thread by clicking the row', () => {
-      const { getState, getLocalTrackRow, threadIndex } = setupThreadTrack();
+    it('can select a thread by clicking the track content', () => {
+      const { getState, getLocalTrackContent, threadIndex } =
+        setupThreadTrack();
       expect(getFirstSelectedThreadIndex(getState())).not.toBe(threadIndex);
-      fireFullClick(getLocalTrackRow());
+      fireFullClick(getLocalTrackContent());
       expect(getFirstSelectedThreadIndex(getState())).toBe(threadIndex);
     });
 
+    it('can right click a thread on the track content', () => {
+      const { getState, getLocalTrackContent, threadIndex, trackReference } =
+        setupThreadTrack();
+
+      fireFullContextMenu(getLocalTrackContent());
+      expect(getRightClickedTrack(getState())).toEqual(trackReference);
+      expect(getFirstSelectedThreadIndex(getState())).not.toBe(threadIndex);
+    });
+
     it('will render a stub div if the track is hidden', () => {
       const { container, pid, trackReference, dispatch } = setupThreadTrack();
       act(() => {
@@ -203,6 +213,11 @@ function setup(
       container.querySelector('.timelineTrackLabel'),
       `Couldn't find the track label with selector .timelineTrackLabel`
     ) as HTMLElement;
+  const getLocalTrackContent = () =>
+    ensureExists(
+      container.querySelector('.timelineTrackTrack'),
+      `Couldn't find the track content with selector .timelineTrackTrack`
+    ) as HTMLElement;
   const getLocalTrackRow = () =>
     ensureExists(
       container.querySelector('.timelineTrackLocalRow'),
@@ -219,6 +234,7 @@ function setup(
     threadIndex,
     pid: PID,
     getLocalTrackLabel,
+    getLocalTrackContent,
     getLocalTrackRow,
     flushRafCalls,
   };
diff --git a/src/test/components/__snapshots__/GlobalTrack.test.tsx.snap b/src/test/components/__snapshots__/GlobalTrack.test.tsx.snap
diff --git a/src/test/components/__snapshots__/LocalTrack.test.tsx.snap b/src/test/components/__snapshots__/LocalTrack.test.tsx.snap
diff --git a/src/test/components/__snapshots__/Timeline.test.tsx.snap b/src/test/components/__snapshots__/Timeline.test.tsx.snap
