Make it possible to override the zeroAt value

Author: arai-a

locales/en-US/app.ftl

@@ -438,6 +438,10 @@ MarkerContextMenu--end-selection-at-marker-start =
     End selection at marker’s <strong>start</strong>
 MarkerContextMenu--end-selection-at-marker-end =
     End selection at marker’s <strong>end</strong>
+MarkerContextMenu--override-zero-at-marker-start =
+    Override zero at marker’s start
+MarkerContextMenu--reset-override-zero-at =
+    Reset the override for zero
 MarkerContextMenu--copy-description = Copy description
 MarkerContextMenu--copy-call-stack = Copy call stack
 MarkerContextMenu--copy-url = Copy URL

src/actions/profile-view.ts

@@ -1905,6 +1905,13 @@ export function changeMouseTimePosition(
   };
 }
 
+export function overrideZeroAt(zeroAt: Milliseconds | null): Action {
+  return {
+    type: 'OVERRIDE_ZERO_AT',
+    zeroAt,
+  };
+}
+
 export function changeTableViewOptions(
   tab: TabSlug,
   tableViewOptions: TableViewOptions

src/components/shared/MarkerContextMenu.css

@@ -31,6 +31,14 @@
   background-image: url(../../../res/img/svg/end-selection-at-marker-end.svg);
 }
 
+.markerContextMenuIconOverrideZeroAtMarkerStart {
+  background-image: url(../../../res/img/svg/start-selection-at-marker-start.svg);
+}
+
+.markerContextMenuIconResetOverrideZeroAt {
+  background-image: url(../../../res/img/svg/searchfield-cancel.svg);
+}
+
 .markerContextMenuIconCopyDescription {
   background-image: url(../../../res/img/svg/copy-dark.svg);
 }

src/components/shared/MarkerContextMenu.tsx

@@ -13,12 +13,14 @@ import {
   setContextMenuVisibility,
   updatePreviewSelection,
   selectTrackFromTid,
+  overrideZeroAt,
 } from 'firefox-profiler/actions/profile-view';
 import {
   getPreviewSelection,
   getCommittedRange,
   getProfiledThreadIds,
   getInnerWindowIDToPageMap,
+  isZeroAtOverridden,
 } from 'firefox-profiler/selectors/profile';
 import { getRightClickedMarkerInfo } from 'firefox-profiler/selectors/right-clicked-marker';
 import copy from 'copy-to-clipboard';
@@ -59,12 +61,14 @@ type StateProps = {
   readonly getMarkerLabelToCopy: (param: MarkerIndex) => string;
   readonly profiledThreadIds: Set<Tid>;
   readonly innerWindowIDToPageMap: Map<InnerWindowID, Page> | null;
+  readonly isZeroAtOverridden: boolean;
 };
 
 type DispatchProps = {
   readonly updatePreviewSelection: typeof updatePreviewSelection;
   readonly setContextMenuVisibility: typeof setContextMenuVisibility;
   readonly selectTrackFromTid: typeof selectTrackFromTid;
+  readonly overrideZeroAt: typeof overrideZeroAt;
 };
 
 type Props = ConnectedProps<OwnProps, StateProps, DispatchProps>;
@@ -141,6 +145,16 @@ class MarkerContextMenuImpl extends PureComponent<Props> {
     });
   };
 
+  overrideZeroAtMarkerStart = () => {
+    const { marker, overrideZeroAt } = this.props;
+    overrideZeroAt(marker.start);
+  };
+
+  resetZeroAt = () => {
+    const { overrideZeroAt } = this.props;
+    overrideZeroAt(null);
+  };
+
   _isZeroDurationMarker(marker: Marker | null): boolean {
     return !marker || marker.end === null;
   }
@@ -379,7 +393,8 @@ class MarkerContextMenuImpl extends PureComponent<Props> {
   };
 
   override render() {
-    const { marker, previewSelection, committedRange } = this.props;
+    const { marker, previewSelection, committedRange, isZeroAtOverridden } =
+      this.props;
     const { data } = marker;
 
     const selectionEnd = previewSelection
@@ -482,6 +497,25 @@ class MarkerContextMenuImpl extends PureComponent<Props> {
           </>
         )}
 
+        <div className="react-contextmenu-separator" />
+
+        <MenuItem onClick={this.overrideZeroAtMarkerStart}>
+          <span className="react-contextmenu-icon markerContextMenuIconOverrideZeroAtMarkerStart" />
+          <Localized id="MarkerContextMenu--override-zero-at-marker-start">
+            Override zero at marker’s start
+          </Localized>
+        </MenuItem>
+        {isZeroAtOverridden ? (
+          <MenuItem onClick={this.resetZeroAt}>
+            <span className="react-contextmenu-icon markerContextMenuIconResetOverrideZeroAt" />
+            <Localized id="MarkerContextMenu--reset-override-zero-at">
+              Reset the override for zero
+            </Localized>
+          </MenuItem>
+        ) : (
+          ''
+        )}
+
         <div className="react-contextmenu-separator" />
         <MenuItem onClick={this.copyMarkerDescription}>
           <span className="react-contextmenu-icon markerContextMenuIconCopyDescription" />
@@ -533,12 +567,14 @@ const MarkerContextMenu = explicitConnect<OwnProps, StateProps, DispatchProps>({
       getMarkerLabelToCopy: selectors.getMarkerLabelToCopyGetter(state),
       profiledThreadIds: getProfiledThreadIds(state),
       innerWindowIDToPageMap: getInnerWindowIDToPageMap(state),
+      isZeroAtOverridden: isZeroAtOverridden(state),
     };
   },
   mapDispatchToProps: {
     updatePreviewSelection,
     setContextMenuVisibility,
     selectTrackFromTid,
+    overrideZeroAt,
   },
   component: MarkerContextMenuImpl,
 });

src/reducers/profile-view.ts

@@ -824,6 +824,15 @@ const mouseTimePosition: Reducer<Milliseconds | null> = (
   }
 };
 
+const overrideZeroAt: Reducer<Milliseconds | null> = (state = null, action) => {
+  switch (action.type) {
+    case 'OVERRIDE_ZERO_AT':
+      return action.zeroAt;
+    default:
+      return state;
+  }
+};
+
 /**
  * Provide a mechanism to wrap the reducer in a special function that can reset
  * the state to the default values. This is useful when viewing multiple profiles
@@ -864,6 +873,7 @@ const profileViewReducer: Reducer<ProfileViewState> = wrapReducerInResetter(
       hoveredMarker,
       mouseTimePosition,
       perTab: tableViewOptionsPerTab,
+      overrideZeroAt,
     }),
     profile,
     globalTracks,

src/selectors/profile.ts

@@ -96,8 +96,15 @@ export const getScrollToSelectionGeneration: Selector<number> = (state) =>
   getProfileViewOptions(state).scrollToSelectionGeneration;
 export const getFocusCallTreeGeneration: Selector<number> = (state) =>
   getProfileViewOptions(state).focusCallTreeGeneration;
-export const getZeroAt: Selector<Milliseconds> = (state) =>
-  getProfileRootRange(state).start;
+export const getZeroAt: Selector<Milliseconds> = (state) => {
+  const viewOptions = getProfileViewOptions(state);
+  if (viewOptions.overrideZeroAt !== null) {
+    return viewOptions.overrideZeroAt;
+  }
+  return getProfileRootRange(state).start;
+};
+export const isZeroAtOverridden: Selector<boolean> = (state) =>
+  getProfileViewOptions(state).overrideZeroAt !== null;
 export const getProfileTimelineUnit: Selector<TimelineUnit> = (state) => {
   const { sampleUnits } = getProfile(state).meta;
   return sampleUnits ? sampleUnits.time : 'ms';

src/test/components/MarkerTable.test.tsx

@@ -239,6 +239,23 @@ describe('MarkerTable', function () {
     );
   });
 
+  it('can override the zero at timing using the context menu', () => {
+    const { getRowElement } = setup();
+
+    const startNode = ensureExists(
+      getRowElement(/setTimeout/).querySelector('.start')
+    );
+    expect(startNode).toHaveTextContent('0.153s');
+
+    fireFullContextMenu(getRowElement(/setTimeout/) as HTMLElement);
+    fireFullClick(screen.getByText('Override zero at marker’s start'));
+
+    const startNode2 = ensureExists(
+      getRowElement(/setTimeout/).querySelector('.start')
+    );
+    expect(startNode2).toHaveTextContent('0s');
+  });
+
   describe('EmptyReasons', () => {
     it('shows reasons when a profile has no non-network markers', () => {
       const { profile } = getProfileFromTextSamples('A'); // Just a simple profile without any marker.

src/test/components/__snapshots__/MarkerChart.test.tsx.snap

@@ -133,6 +133,20 @@ exports[`MarkerChart context menus displays when right clicking on a marker 1`]
   <div
     class="react-contextmenu-separator"
   />
+  <div
+    aria-disabled="false"
+    class="react-contextmenu-item"
+    role="menuitem"
+    tabindex="-1"
+  >
+    <span
+      class="react-contextmenu-icon markerContextMenuIconOverrideZeroAtMarkerStart"
+    />
+    Override zero at marker’s start
+  </div>
+  <div
+    class="react-contextmenu-separator"
+  />
   <div
     aria-disabled="false"
     class="react-contextmenu-item"

src/types/actions.ts

@@ -550,6 +550,10 @@ type UrlStateAction =
       readonly type: 'CHANGE_MOUSE_TIME_POSITION';
       readonly mouseTimePosition: Milliseconds | null;
     }
+  | {
+      readonly type: 'OVERRIDE_ZERO_AT';
+      readonly zeroAt: Milliseconds | null;
+    }
   | {
       readonly type: 'CHANGE_TABLE_VIEW_OPTIONS';
       readonly tab: TabSlug;

src/types/state.ts

@@ -103,6 +103,7 @@ export type ProfileViewState = {
     hoveredMarker: MarkerReference | null;
     mouseTimePosition: Milliseconds | null;
     perTab: TableViewOptionsPerTab;
+    overrideZeroAt: number | null;
   };
   readonly profile: Profile | null;
   globalTracks: GlobalTrack[];