Merge branch '11918-performance-marks' into 'master'

Set up the performance marks and measures

See merge request gitlab-org/gitlab!66359

app/assets/javascripts/design_management/components/image.vue

 <script>
 import { GlIcon } from '@gitlab/ui';
 import { throttle } from 'lodash';
+import { DESIGN_MARK_APP_START, DESIGN_MAIN_IMAGE_OUTPUT } from '~/performance/constants';
+import { performanceMarkAndMeasure } from '~/performance/utils';
 
 export default {
   components: {
@@ -39,7 +41,9 @@ export default {
     window.removeEventListener('resize', this.resizeThrottled, false);
   },
   mounted() {
+    if (!this.image) {
       this.onImgLoad();
+    }
 
     this.resizeThrottled = throttle(() => {
       // NOTE: if imageStyle is set, then baseImageSize
@@ -53,6 +57,14 @@ export default {
   methods: {
     onImgLoad() {
       requestIdleCallback(this.setBaseImageSize, { timeout: 1000 });
+      performanceMarkAndMeasure({
+        measures: [
+          {
+            name: DESIGN_MAIN_IMAGE_OUTPUT,
+            start: DESIGN_MARK_APP_START,
+          },
+        ],
+      });
     },
     onImgError() {
       this.imageError = true;

app/assets/javascripts/design_management/index.js

 import Vue from 'vue';
+import { DESIGN_MARK_APP_START, DESIGN_MEASURE_BEFORE_APP } from '~/performance/constants';
+import { performanceMarkAndMeasure } from '~/performance/utils';
 import App from './components/app.vue';
 import apolloProvider from './graphql';
 import activeDiscussionQuery from './graphql/queries/active_discussion.query.graphql';
@@ -28,6 +30,16 @@ export default () => {
       projectPath,
       issueIid,
     },
+    mounted() {
+      performanceMarkAndMeasure({
+        mark: DESIGN_MARK_APP_START,
+        measures: [
+          {
+            name: DESIGN_MEASURE_BEFORE_APP,
+          },
+        ],
+      });
+    },
     render(createElement) {
       return createElement(App);
     },

app/assets/javascripts/performance/constants.js

@@ -89,3 +89,14 @@ export const REPO_BLOB_LOAD_VIEWER_FINISH = 'blobviewer-load-viewer-finish';
 // Measures
 export const REPO_BLOB_LOAD_VIEWER = 'Repository File Viewer: loading the viewer';
 export const REPO_BLOB_SWITCH_VIEWER = 'Repository File Viewer: switching the viewer';
+
+//
+// DESIGN MANAGEMENT NAMESPACE
+//
+
+// Marks
+export const DESIGN_MARK_APP_START = 'design-app-start';
+
+// Measures
+export const DESIGN_MEASURE_BEFORE_APP = 'Design Management: Before the Vue app';
+export const DESIGN_MAIN_IMAGE_OUTPUT = 'Design Management: Single image preview';