feat(replay): Render the replay currentTime & hoverTime inside the performance waterfall (#52890)

Render a purple vertical bar to represent the current replay time. Also,
when hovering, render another bar to represent the point in time where
the mouse cursor is.

<img width="617" alt="SCR-20230714-jazb"
src="https://github.com/getsentry/sentry/assets/187460/20602a76-b101-44a5-af5e-c5b5bb2f1c84">



We're calling `useReplayContext` on each trace row. When there is no
context provider the default values will be fetched. Mainly this include
`replay === null` which will short-circuit everything and return null
from the component.

Fixes https://github.com/getsentry/sentry/issues/51938

static/app/components/performance/waterfall/row.tsx

@@ -1,7 +1,12 @@
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import {ROW_HEIGHT} from 'sentry/components/performance/waterfall/constants';
-import {getBackgroundColor} from 'sentry/components/performance/waterfall/utils';
+import {
+  getBackgroundColor,
+  toPercent,
+} from 'sentry/components/performance/waterfall/utils';
+import {useReplayContext} from 'sentry/components/replays/replayContext';
 
 interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
   cursor?: 'pointer' | 'default';
@@ -57,3 +62,37 @@ export const RowCell = styled('div')<RowCellProps>`
   display: flex;
   align-items: center;
 `;
+
+export function RowReplayTimeIndicators() {
+  const {currentTime, currentHoverTime, replay} = useReplayContext();
+  const durationMs = replay?.getDurationMs();
+
+  if (!replay || !durationMs) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <RowIndicatorBar style={{left: toPercent(currentTime / durationMs)}} />
+      {currentHoverTime !== undefined ? (
+        <RowHoverIndicatorBar style={{left: toPercent(currentHoverTime / durationMs)}} />
+      ) : null}
+    </Fragment>
+  );
+}
+
+const RowIndicatorBar = styled('div')`
+  background: ${p => p.theme.purple300};
+  content: '';
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  width: 1px;
+  z-index: 1;
+`;
+
+const RowHoverIndicatorBar = styled(RowIndicatorBar)`
+  background: ${p => p.theme.purple200};
+`;

static/app/views/performance/traceDetails/transactionBar.tsx

@@ -19,6 +19,7 @@ import {
   Row,
   RowCell,
   RowCellContainer,
+  RowReplayTimeIndicators,
 } from 'sentry/components/performance/waterfall/row';
 import {DurationPill, RowRectangle} from 'sentry/components/performance/waterfall/rowBar';
 import {
@@ -546,6 +547,7 @@ class TransactionBar extends Component<Props, State> {
           showDetail={showDetail}
           onClick={this.toggleDisplayDetail}
         >
+          <RowReplayTimeIndicators />
           <GuideAnchor target="trace_view_guide_row_details" disabled={!hasGuideAnchor}>
             {this.renderRectangle()}
             {this.renderMeasurements()}