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

Re-factored user timing metrics

See merge request gitlab-org/gitlab!44021

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

 <script>
 import { debounce } from 'lodash';
 import { initEditorLite } from '~/blob/utils';
-import {
-  SNIPPET_MARK_BLOBS_CONTENT,
-  SNIPPET_MARK_EDIT_APP_START,
-  SNIPPET_MEASURE_BLOBS_CONTENT,
-  SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP,
-} from '~/performance_constants';
+import { SNIPPET_MEASURE_BLOBS_CONTENT } from '~/performance_constants';
+
+import eventHub from './eventhub';
 
 export default {
   props: {
@@ -48,13 +45,7 @@ export default {
 
     this.editor.onDidChangeModelContent(debounce(this.onFileChange.bind(this), 250));
 
-    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);
-      }
-    });
+    eventHub.$emit(SNIPPET_MEASURE_BLOBS_CONTENT);
   },
   beforeDestroy() {
     this.editor.dispose();

app/assets/javascripts/blob/components/eventhub.js

+import createEventHub from '~/helpers/event_hub_factory';
+
+export default createEventHub();

app/assets/javascripts/ide/components/ide.vue

@@ -25,49 +25,21 @@ import ErrorMessage from './error_message.vue';
 import CommitEditorHeader from './commit_sidebar/editor_header.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
-const markPerformance = params => {
-  performanceMarkAndMeasure(params);
-};
-const markTreePerformance = () => {
-  markPerformance({
-    mark: WEBIDE_MARK_TREE_FINISH,
-    measures: [
-      {
-        name: WEBIDE_MEASURE_TREE_FROM_REQUEST,
-        start: undefined,
-        end: WEBIDE_MARK_TREE_FINISH,
-      },
-    ],
-  });
-};
-const markEditorLoadPerformance = () => {
-  markPerformance({
-    mark: WEBIDE_MARK_FILE_FINISH,
-    measures: [
-      {
-        name: WEBIDE_MEASURE_FILE_FROM_REQUEST,
-        start: undefined,
-        end: WEBIDE_MARK_FILE_FINISH,
-      },
-    ],
-  });
-};
-const markEditorInteractionPerformance = () => {
-  markPerformance({
-    mark: WEBIDE_MARK_FILE_FINISH,
-    measures: [
-      {
-        name: WEBIDE_MEASURE_FILE_AFTER_INTERACTION,
-        start: WEBIDE_MARK_FILE_CLICKED,
-        end: WEBIDE_MARK_FILE_FINISH,
-      },
-    ],
-  });
-};
+import { measurePerformance } from '../utils';
 
-eventHub.$on(WEBIDE_MEASURE_TREE_FROM_REQUEST, markTreePerformance);
-eventHub.$on(WEBIDE_MEASURE_FILE_FROM_REQUEST, markEditorLoadPerformance);
-eventHub.$on(WEBIDE_MEASURE_FILE_AFTER_INTERACTION, markEditorInteractionPerformance);
+eventHub.$on(WEBIDE_MEASURE_TREE_FROM_REQUEST, () =>
+  measurePerformance(WEBIDE_MARK_TREE_FINISH, WEBIDE_MEASURE_TREE_FROM_REQUEST),
+);
+eventHub.$on(WEBIDE_MEASURE_FILE_FROM_REQUEST, () =>
+  measurePerformance(WEBIDE_MARK_FILE_FINISH, WEBIDE_MEASURE_FILE_FROM_REQUEST),
+);
+eventHub.$on(WEBIDE_MEASURE_FILE_AFTER_INTERACTION, () =>
+  measurePerformance(
+    WEBIDE_MARK_FILE_FINISH,
+    WEBIDE_MEASURE_FILE_AFTER_INTERACTION,
+    WEBIDE_MARK_FILE_CLICKED,
+  ),
+);
 
 export default {
   components: {
@@ -115,7 +87,7 @@ export default {
       document.querySelector('.navbar-gitlab').classList.add(`theme-${this.themeName}`);
   },
   beforeCreate() {
-    performance.mark(WEBIDE_MARK_APP_START);
+    performanceMarkAndMeasure({ mark: WEBIDE_MARK_APP_START });
   },
   methods: {
     ...mapActions(['toggleFileFinder']),

app/assets/javascripts/ide/components/ide_tree_list.vue

@@ -37,9 +37,7 @@ export default {
   },
   updated() {
     if (this.currentTree?.tree?.length) {
-      this.$nextTick(() => {
-        eventHub.$emit(WEBIDE_MEASURE_TREE_FROM_REQUEST);
-      });
+      eventHub.$emit(WEBIDE_MEASURE_TREE_FROM_REQUEST);
     }
   },
   methods: {

app/assets/javascripts/ide/components/repo_editor.vue

@@ -300,13 +300,11 @@ export default {
       });
 
       this.$emit('editorSetup');
-      this.$nextTick(() => {
-        if (performance.getEntriesByName(WEBIDE_MARK_FILE_CLICKED).length) {
-          eventHub.$emit(WEBIDE_MEASURE_FILE_AFTER_INTERACTION);
-        } else {
-          eventHub.$emit(WEBIDE_MEASURE_FILE_FROM_REQUEST);
-        }
-      });
+      if (performance.getEntriesByName(WEBIDE_MARK_FILE_CLICKED).length) {
+        eventHub.$emit(WEBIDE_MEASURE_FILE_AFTER_INTERACTION);
+      } else {
+        eventHub.$emit(WEBIDE_MEASURE_FILE_FROM_REQUEST);
+      }
     },
     refreshEditorDimensions() {
       if (this.showEditor) {

app/assets/javascripts/ide/utils.js

 import { languages } from 'monaco-editor';
 import { flatten, isString } from 'lodash';
 import { SIDE_LEFT, SIDE_RIGHT } from './constants';
+import { performanceMarkAndMeasure } from '~/performance_utils';
 
 const toLowerCase = x => x.toLowerCase();
 
@@ -137,3 +138,21 @@ export function readFileAsDataURL(file) {
 export function getFileEOL(content = '') {
   return content.includes('\r\n') ? 'CRLF' : 'LF';
 }
+
+export const measurePerformance = (
+  mark,
+  measureName,
+  measureStart = undefined,
+  measureEnd = mark,
+) => {
+  performanceMarkAndMeasure({
+    mark,
+    measures: [
+      {
+        name: measureName,
+        start: measureStart,
+        end: measureEnd,
+      },
+    ],
+  });
+};

app/assets/javascripts/performance_constants.js

@@ -12,7 +12,6 @@ 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';
 
 //
 // WebIDE namespace

app/assets/javascripts/performance_utils.js

@@ -4,9 +4,7 @@ export const performanceMarkAndMeasure = ({ mark, measures = [] } = {}) => {
       performance.mark(mark);
     }
     measures.forEach(measure => {
-      window.requestAnimationFrame(() =>
-        performance.measure(measure.name, measure.start, measure.end),
-      );
+      performance.measure(measure.name, measure.start, measure.end);
     });
   });
 };

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

@@ -6,7 +6,12 @@ import { __, sprintf } from '~/locale';
 import TitleField from '~/vue_shared/components/form/title.vue';
 import { redirectTo, joinPaths } from '~/lib/utils/url_utility';
 import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.vue';
-import { SNIPPET_MARK_EDIT_APP_START } from '~/performance_constants';
+import {
+  SNIPPET_MARK_EDIT_APP_START,
+  SNIPPET_MEASURE_BLOBS_CONTENT,
+} from '~/performance_constants';
+import eventHub from '~/blob/components/eventhub';
+import { performanceMarkAndMeasure } from '~/performance_utils';
 
 import UpdateSnippetMutation from '../mutations/updateSnippet.mutation.graphql';
 import CreateSnippetMutation from '../mutations/createSnippet.mutation.graphql';
@@ -17,11 +22,14 @@ import {
   SNIPPET_VISIBILITY_PRIVATE,
 } from '../constants';
 import defaultVisibilityQuery from '../queries/snippet_visibility.query.graphql';
+import { markBlobPerformance } from '../utils/blob';
 
 import SnippetBlobActionsEdit from './snippet_blob_actions_edit.vue';
 import SnippetVisibilityEdit from './snippet_visibility_edit.vue';
 import SnippetDescriptionEdit from './snippet_description_edit.vue';
 
+eventHub.$on(SNIPPET_MEASURE_BLOBS_CONTENT, markBlobPerformance);
+
 export default {
   components: {
     SnippetDescriptionEdit,
@@ -119,7 +127,7 @@ export default {
     },
   },
   beforeCreate() {
-    performance.mark(SNIPPET_MARK_EDIT_APP_START);
+    performanceMarkAndMeasure({ mark: SNIPPET_MARK_EDIT_APP_START });
   },
   created() {
     window.addEventListener('beforeunload', this.onBeforeUnload);

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

@@ -5,11 +5,18 @@ import SnippetHeader from './snippet_header.vue';
 import SnippetTitle from './snippet_title.vue';
 import SnippetBlob from './snippet_blob_view.vue';
 import CloneDropdownButton from '~/vue_shared/components/clone_dropdown.vue';
+import { SNIPPET_VISIBILITY_PUBLIC } from '~/snippets/constants';
+import {
+  SNIPPET_MARK_VIEW_APP_START,
+  SNIPPET_MEASURE_BLOBS_CONTENT,
+} from '~/performance_constants';
+import { performanceMarkAndMeasure } from '~/performance_utils';
+import eventHub from '~/blob/components/eventhub';
 
 import { getSnippetMixin } from '../mixins/snippets';
-import { SNIPPET_VISIBILITY_PUBLIC } from '~/snippets/constants';
+import { markBlobPerformance } from '../utils/blob';
 
-import { SNIPPET_MARK_VIEW_APP_START } from '~/performance_constants';
+eventHub.$on(SNIPPET_MEASURE_BLOBS_CONTENT, markBlobPerformance);
 
 export default {
   components: {
@@ -30,7 +37,7 @@ export default {
     },
   },
   beforeCreate() {
-    performance.mark(SNIPPET_MARK_VIEW_APP_START);
+    performanceMarkAndMeasure({ mark: SNIPPET_MARK_VIEW_APP_START });
   },
 };
 </script>

app/assets/javascripts/snippets/utils/blob.js

@@ -7,6 +7,8 @@ import {
   SNIPPET_LEVELS_MAP,
   SNIPPET_VISIBILITY,
 } from '../constants';
+import { performanceMarkAndMeasure } from '~/performance_utils';
+import { SNIPPET_MARK_BLOBS_CONTENT, SNIPPET_MEASURE_BLOBS_CONTENT } from '~/performance_constants';
 
 const createLocalId = () => uniqueId('blob_local_');
 
@@ -79,3 +81,16 @@ export const defaultSnippetVisibilityLevels = arr => {
   }
   return [];
 };
+
+export const markBlobPerformance = () => {
+  performanceMarkAndMeasure({
+    mark: SNIPPET_MARK_BLOBS_CONTENT,
+    measures: [
+      {
+        name: SNIPPET_MEASURE_BLOBS_CONTENT,
+        start: undefined,
+        end: SNIPPET_MARK_BLOBS_CONTENT,
+      },
+    ],
+  });
+};

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';
+import { SNIPPET_MEASURE_BLOBS_CONTENT } from '~/performance_constants';
+import eventHub from '~/blob/components/eventhub';
 
 export default {
   props: {
@@ -17,12 +13,6 @@ export default {
     },
   },
   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);
-      }
-    });
+    eventHub.$emit(SNIPPET_MEASURE_BLOBS_CONTENT);
   },
 };