Merge branch 'dmishunov-snippet-user-timing' into 'master'

User timing performance marks and measurements for snippets

See merge request gitlab-org/gitlab!30234

app/assets/javascripts/blob/components/blob_edit_content.vue

 <script>
 import { initEditorLite } from '~/blob/utils';
 import { debounce } from 'lodash';
+import {
+  SNIPPET_MARK_BLOBS_CONTENT,
+  SNIPPET_MARK_EDIT_APP_START,
+  SNIPPET_MEASURE_BLOBS_CONTENT,
+  SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP,
+} from '~/performance_constants';
 
 export default {
   props: {
@@ -31,6 +37,13 @@ export default {
       blobPath: this.fileName,
       blobContent: this.value,
     });
+    window.requestAnimationFrame(() => {
+      if (!performance.getEntriesByName(SNIPPET_MARK_BLOBS_CONTENT).length) {
+        performance.mark(SNIPPET_MARK_BLOBS_CONTENT);
+        performance.measure(SNIPPET_MEASURE_BLOBS_CONTENT);
+        performance.measure(SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP, SNIPPET_MARK_EDIT_APP_START);
+      }
+    });
   },
   methods: {
     triggerFileChange: debounce(function debouncedFileChange() {

app/assets/javascripts/performance_constants.js

+//
+// SNIPPET namespace
+//
+
+// marks
+export const SNIPPET_MARK_VIEW_APP_START = 'snippet-view-app-start';
+export const SNIPPET_MARK_EDIT_APP_START = 'snippet-edit-app-start';
+export const SNIPPET_MARK_BLOBS_CONTENT = 'snippet-blobs-content-finished';
+
+// Measures
+export const SNIPPET_MEASURE_BLOBS_CONTENT = 'snippet-blobs-content';
+export const SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP = 'snippet-blobs-content-within-app';

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

@@ -21,6 +21,7 @@ import {
 import SnippetBlobEdit from './snippet_blob_edit.vue';
 import SnippetVisibilityEdit from './snippet_visibility_edit.vue';
 import SnippetDescriptionEdit from './snippet_description_edit.vue';
+import { SNIPPET_MARK_EDIT_APP_START } from '~/performance_constants';
 
 export default {
   components: {
@@ -106,6 +107,9 @@ export default {
       return `${this.isProjectSnippet ? 'project' : 'personal'}_snippet_description`;
     },
   },
+  beforeCreate() {
+    performance.mark(SNIPPET_MARK_EDIT_APP_START);
+  },
   created() {
     window.addEventListener('beforeunload', this.onBeforeUnload);
   },

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_BLOBS_CONTENT,
+  SNIPPET_MEASURE_BLOBS_CONTENT,
+  SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP,
+} from '~/performance_constants';
+
 export default {
   props: {
     content: {
@@ -9,4 +16,13 @@ export default {
       required: true,
     },
   },
+  mounted() {
+    window.requestAnimationFrame(() => {
+      if (!performance.getEntriesByName(SNIPPET_MARK_BLOBS_CONTENT).length) {
+        performance.mark(SNIPPET_MARK_BLOBS_CONTENT);
+        performance.measure(SNIPPET_MEASURE_BLOBS_CONTENT);
+        performance.measure(SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP, SNIPPET_MARK_VIEW_APP_START);
+      }
+    });
+  },
 };

spec/frontend/environment.js

@@ -52,6 +52,12 @@ class CustomEnvironment extends JSDOMEnvironment {
 
     // Expose the jsdom (created in super class) to the global so that we can call reconfigure({ url: '' }) to properly set `window.location`
     this.global.dom = this.dom;
+
+    Object.assign(this.global.performance, {
+      mark: () => null,
+      measure: () => null,
+      getEntriesByName: () => [],
+    });
   }
 
   async teardown() {