feat(flamegraph): use sentry monospace font (#33743)

static/app/components/profiling/boundTooltip.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {useLayoutEffect, useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 import {mat3, vec2} from 'gl-matrix';
 
@@ -7,14 +7,14 @@ import {getContext, measureText, Rect} from 'sentry/utils/profiling/gl/utils';
 import {useDevicePixelRatio} from 'sentry/utils/useDevicePixelRatio';
 
 const useCachedMeasure = (string: string, font: string): Rect => {
-  const cache = React.useRef<Record<string, Rect>>({});
-  const ctx = React.useMemo(() => {
+  const cache = useRef<Record<string, Rect>>({});
+  const ctx = useMemo(() => {
     const context = getContext(document.createElement('canvas'), '2d');
     context.font = font;
     return context;
   }, []);
 
-  return React.useMemo(() => {
+  return useMemo(() => {
     if (cache.current[string]) {
       return cache.current[string];
     }
@@ -43,7 +43,7 @@ function BoundTooltip({
   cursor,
   children,
 }: BoundTooltipProps): React.ReactElement | null {
-  const tooltipRef = React.useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
   const flamegraphTheme = useFlamegraphTheme();
   const tooltipRect = useCachedMeasure(
     tooltipRef.current?.textContent ?? '',
@@ -51,7 +51,7 @@ function BoundTooltip({
   );
   const devicePixelRatio = useDevicePixelRatio();
 
-  const physicalToLogicalSpace = React.useMemo(
+  const physicalToLogicalSpace = useMemo(
     () =>
       mat3.fromScaling(
         mat3.create(),
@@ -60,9 +60,9 @@ function BoundTooltip({
     [devicePixelRatio]
   );
 
-  const [tooltipBounds, setTooltipBounds] = React.useState<Rect>(Rect.Empty());
+  const [tooltipBounds, setTooltipBounds] = useState<Rect>(Rect.Empty());
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (!children || bounds.isEmpty() || !tooltipRef.current) {
       setTooltipBounds(Rect.Empty());
       return;

static/app/utils/profiling/flamegraph/flamegraphTheme.tsx

@@ -1,3 +1,4 @@
+import {lightTheme} from '../../theme';
 import {FlamegraphFrame} from '../flamegraphFrame';
 
 import {makeColorBucketTheme, makeColorMap, makeStackToColor} from './../colors/utils';
@@ -7,7 +8,7 @@ const MONOSPACE_FONT = `ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI
 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono',
 'Courier New', monospace`;
 
-const FRAME_FONT = `"Source Code Pro", Courier, monospace`;
+const FRAME_FONT = lightTheme.text.familyMono;
 
 // Luma chroma hue settings
 export interface LCH {
@@ -118,7 +119,7 @@ export const LightFlamegraphTheme: FlamegraphTheme = {
   },
   SIZES: {
     BAR_HEIGHT: 20,
-    BAR_FONT_SIZE: 12,
+    BAR_FONT_SIZE: 11,
     BAR_PADDING: 4,
     FLAMEGRAPH_DEPTH_OFFSET: 12,
     SPANS_DEPTH_OFFSET: 4,
@@ -176,7 +177,7 @@ export const DarkFlamegraphTheme: FlamegraphTheme = {
   },
   SIZES: {
     BAR_HEIGHT: 20,
-    BAR_FONT_SIZE: 12,
+    BAR_FONT_SIZE: 11,
     BAR_PADDING: 4,
     FLAMEGRAPH_DEPTH_OFFSET: 12,
     SPANS_DEPTH_OFFSET: 4,