Re-formatted the MR according to feedback

This branch is the implementation branch for the RFC
(https://gitlab.com/gitlab-org/frontend/rfcs/-/issues/51) that is
introducing the User Timing API to the product

app/assets/javascripts/performance_constants.js

+//
+// SNIPPET namespace
+//
+
+// marks
+export const SNIPPET_MARK_VIEW_APP_START = 'snippet-view-app-start';
+export const SNIPPET_MARK_BLOB_CONTENT = 'snippet-blob-content-finished';
+
+// Measures
+export const SNIPPET_MEASURE_BLOB_CONTENT = 'snippet-blob-content';
+export const SNIPPET_MEASURE_BLOB_CONTENT_WITHIN_APP = 'snippet-blob-content-within-app';

app/assets/javascripts/snippets/components/show.vue

@@ -9,6 +9,8 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import { getSnippetMixin } from '../mixins/snippets';
 import { SNIPPET_VISIBILITY_PUBLIC } from '~/snippets/constants';
 
+import { SNIPPET_MARK_VIEW_APP_START } from '~/performance_constants';
+
 export default {
   components: {
     BlobEmbeddable,
@@ -27,6 +29,9 @@ export default {
       return Boolean(this.snippet.sshUrlToRepo || this.snippet.httpUrlToRepo);
     },
   },
+  beforeCreate() {
+    performance.mark(SNIPPET_MARK_VIEW_APP_START);
+  },
 };
 </script>
 <template>

app/assets/javascripts/vue_shared/components/blob_viewers/mixins.js

+import {
+  SNIPPET_MARK_VIEW_APP_START,
+  SNIPPET_MARK_BLOB_CONTENT,
+  SNIPPET_MEASURE_BLOB_CONTENT,
+  SNIPPET_MEASURE_BLOB_CONTENT_WITHIN_APP,
+} from '~/performance_constants';
+
 export default {
   props: {
     content: {
@@ -9,4 +16,11 @@ export default {
       required: true,
     },
   },
+  mounted() {
+    window.requestAnimationFrame(() => {
+      performance.mark(SNIPPET_MARK_BLOB_CONTENT);
+      performance.measure(SNIPPET_MEASURE_BLOB_CONTENT);
+      performance.measure(SNIPPET_MEASURE_BLOB_CONTENT_WITHIN_APP, SNIPPET_MARK_VIEW_APP_START);
+    });
+  }
 };