feat(timing-issues): add ttid and ttfd to the performance homepage (#45957)

- This adds both ttid & ttfd to the performance homepage
- Not elevating this higher yet since adoption of these metrics will be
low to start, will revisit and move them up after
- Closes #45956


![image](https://user-images.githubusercontent.com/4205004/225745713-91103741-031f-4c0c-a6e5-87e957585fdd.png)

static/app/views/performance/data.tsx

@@ -67,6 +67,8 @@ export enum PERFORMANCE_TERM {
   MOST_ISSUES = 'mostIssues',
   MOST_ERRORS = 'mostErrors',
   SLOW_HTTP_SPANS = 'slowHTTPSpans',
+  TIME_TO_FULL_DISPLAY = 'timeToFullDisplay',
+  TIME_TO_INITIAL_DISPLAY = 'timeToInitialDisplay',
 }
 
 export type TooltipOption = SelectValue<string> & {
@@ -380,6 +382,12 @@ export const PERFORMANCE_TERMS: Record<PERFORMANCE_TERM, TermFormatter> = {
     t(
       'The percentage of the transaction duration in which the application is in a stalled state.'
     ),
+  timeToFullDisplay: () =>
+    t(
+      'The time between application launch and complete display of all resources and views'
+    ),
+  timeToInitialDisplay: () =>
+    t('The time it takes for an application to produce its first frame'),
 };
 
 export function getTermHelp(
@@ -544,6 +552,9 @@ function generateMobilePerformanceEventView(
     'p75(measurements.frames_slow_rate)',
     'p75(measurements.frames_frozen_rate)',
   ];
+  if (organization.features.includes('mobile-vitals')) {
+    fields.push('p75(measurements.time_to_initial_display)');
+  }
 
   // At this point, all projects are mobile projects.
   // If in addition to that, all projects are react-native projects,

static/app/views/performance/landing/views/mobileView.tsx

@@ -11,9 +11,26 @@ import {PerformanceWidgetSetting} from '../widgets/widgetDefinitions';
 import {BasePerformanceViewProps} from './types';
 
 export function MobileView(props: BasePerformanceViewProps) {
-  const columnTitles = checkIsReactNative(props.eventView)
+  let columnTitles = checkIsReactNative(props.eventView)
     ? REACT_NATIVE_COLUMN_TITLES
     : MOBILE_COLUMN_TITLES;
+  const {organization} = props;
+  const allowedCharts = [
+    PerformanceWidgetSetting.TPM_AREA,
+    PerformanceWidgetSetting.COLD_STARTUP_AREA,
+    PerformanceWidgetSetting.WARM_STARTUP_AREA,
+    PerformanceWidgetSetting.SLOW_FRAMES_AREA,
+    PerformanceWidgetSetting.FROZEN_FRAMES_AREA,
+  ];
+  if (organization.features.includes('mobile-vitals')) {
+    columnTitles = [...columnTitles.slice(0, 5), 'ttid', ...columnTitles.slice(5, 0)];
+    allowedCharts.push(
+      ...[
+        PerformanceWidgetSetting.TIME_TO_INITIAL_DISPLAY,
+        PerformanceWidgetSetting.TIME_TO_FULL_DISPLAY,
+      ]
+    );
+  }
   return (
     <PerformanceDisplayProvider value={{performanceType: PROJECT_PERFORMANCE_TYPE.ANY}}>
       <div>
@@ -26,16 +43,7 @@ export function MobileView(props: BasePerformanceViewProps) {
             PerformanceWidgetSetting.MOST_REGRESSED,
           ]}
         />
-        <TripleChartRow
-          {...props}
-          allowedCharts={[
-            PerformanceWidgetSetting.TPM_AREA,
-            PerformanceWidgetSetting.COLD_STARTUP_AREA,
-            PerformanceWidgetSetting.WARM_STARTUP_AREA,
-            PerformanceWidgetSetting.SLOW_FRAMES_AREA,
-            PerformanceWidgetSetting.FROZEN_FRAMES_AREA,
-          ]}
-        />
+        <TripleChartRow {...props} allowedCharts={allowedCharts} />
         <Table
           {...props}
           columnTitles={columnTitles}

static/app/views/performance/landing/widgets/widgetDefinitions.tsx

@@ -56,6 +56,8 @@ export enum PerformanceWidgetSetting {
   MOST_SLOW_FRAMES = 'most_slow_frames',
   MOST_FROZEN_FRAMES = 'most_frozen_frames',
   SPAN_OPERATIONS = 'span_operations',
+  TIME_TO_INITIAL_DISPLAY = 'time_to_initial_display',
+  TIME_TO_FULL_DISPLAY = 'time_to_full_display',
 }
 
 const WIDGET_PALETTE = CHART_PALETTE[5];
@@ -282,6 +284,22 @@ export const WIDGET_DEFINITIONS: ({
     dataType: GenericPerformanceWidgetDataType.line_list,
     chartColor: WIDGET_PALETTE[0],
   },
+  [PerformanceWidgetSetting.TIME_TO_INITIAL_DISPLAY]: {
+    title: t('Time to Initial Display'),
+    titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.TIME_TO_INITIAL_DISPLAY),
+    fields: ['p75(measurements.time_to_initial_display)'],
+    dataType: GenericPerformanceWidgetDataType.area,
+    chartColor: WIDGET_PALETTE[4],
+    allowsOpenInDiscover: true,
+  },
+  [PerformanceWidgetSetting.TIME_TO_FULL_DISPLAY]: {
+    title: t('Time to Full Display'),
+    titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.TIME_TO_FULL_DISPLAY),
+    fields: ['p75(measurements.time_to_full_display)'],
+    dataType: GenericPerformanceWidgetDataType.area,
+    chartColor: WIDGET_PALETTE[4],
+    allowsOpenInDiscover: true,
+  },
   [PerformanceWidgetSetting.MOST_SLOW_FRAMES]: {
     title: t('Most Slow Frames'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.SLOW_FRAMES),