fix(replay): Allow replay player instances to be interactable/scrolla…

…ble again (#77647)

Broke in
https://github.com/getsentry/sentry/pull/76927/files#diff-e10692ee093e56669e267837b07b16ed1d800a6dc996049aea27186f5fe0b8bbR21
because that code is used by:
https://github.com/getsentry/sentry/blame/21e8cd7/static/app/components/replays/replayPlayer.tsx#L185-L193

Fixes #77608 (comment)


1. What I've done is make all the replay views "inspectable" by allowing
pointer-events. So links can be clicked inside the replay... but also
doing "Right-Click -> Inspect Element" works great again.

2. The attribute `scrolling="no"` is set, and from what I can tell was
always set on the iframe. So i'm not sure how or when that behavior
changed.

static/app/components/replays/player/replayPlayer.tsx

@@ -95,7 +95,6 @@ export default function ReplayPlayer({offsetMs, ...props}: Props) {
   return (
     <div
       {...props}
-      data-inspectable={props['data-inspectable']}
       css={[baseReplayerCss, sentryReplayerCss, props.css]}
       ref={mountPointRef}
     />

static/app/components/replays/player/styles.tsx

@@ -18,9 +18,7 @@ export const baseReplayerCss = css`
   .replayer-wrapper > iframe {
     border: none;
     background: white;
-  }
 
-  &[data-inspectable='true'] .replayer-wrapper > iframe {
     /* Set pointer-events to make it easier to right-click & inspect */
     pointer-events: initial !important;
   }

static/app/components/replays/replayPlayer.tsx

@@ -182,13 +182,10 @@ const PositionedLoadingIndicator = styled(LoadingIndicator)`
   position: absolute;
 `;
 
-// Base styles, to make the Replayer instance work
-const PlayerRoot = styled(BasePlayerRoot)`
+const SentryPlayerRoot = styled(BasePlayerRoot)`
+  /* Base styles, to make the Replayer instance work */
   ${baseReplayerCss}
-`;
-
-// Sentry-specific styles for the player.
-const SentryPlayerRoot = styled(PlayerRoot)`
+  /* Sentry-specific styles for the player */
   ${p => sentryReplayerCss(p.theme)}
 `;