Simplified performance util

- We accept only one mark instead of Array
- Got rid of unnecessary performanceMark() utility function

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

@@ -11,7 +11,7 @@ import {
   WEBIDE_MEASURE_FILE_FROM_REQUEST,
   WEBIDE_MEASURE_FILE_AFTER_INTERACTION,
 } from '~/performance_constants';
-import { performanceMeasureAfterRendering } from '~/performance_utils';
+import { performanceMarkAndMeasure } from '~/performance_utils';
 import { modalTypes } from '../constants';
 import eventHub from '../eventhub';
 import FindFile from '~/vue_shared/components/file_finder/index.vue';
@@ -26,11 +26,11 @@ import CommitEditorHeader from './commit_sidebar/editor_header.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 const markPerformance = params => {
-  performanceMeasureAfterRendering(params);
+  performanceMarkAndMeasure(params);
 };
 const markTreePerformance = () => {
   markPerformance({
-    marks: [WEBIDE_MARK_TREE_FINISH],
+    mark: WEBIDE_MARK_TREE_FINISH,
     measures: [
       {
         name: WEBIDE_MEASURE_TREE_FROM_REQUEST,
@@ -42,7 +42,7 @@ const markTreePerformance = () => {
 };
 const markEditorLoadPerformance = () => {
   markPerformance({
-    marks: [WEBIDE_MARK_FILE_FINISH],
+    mark: WEBIDE_MARK_FILE_FINISH,
     measures: [
       {
         name: WEBIDE_MEASURE_FILE_FROM_REQUEST,
@@ -54,7 +54,7 @@ const markEditorLoadPerformance = () => {
 };
 const markEditorInteractionPerformance = () => {
   markPerformance({
-    marks: [WEBIDE_MARK_FILE_FINISH],
+    mark: WEBIDE_MARK_FILE_FINISH,
     measures: [
       {
         name: WEBIDE_MEASURE_FILE_AFTER_INTERACTION,

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

@@ -7,7 +7,7 @@ import {
   WEBIDE_MEASURE_TREE_FROM_REQUEST,
   WEBIDE_MARK_FILE_CLICKED,
 } from '~/performance_constants';
-import { performanceMark } from '~/performance_utils';
+import { performanceMarkAndMeasure } from '~/performance_utils';
 import eventHub from '../eventhub';
 import IdeFileRow from './ide_file_row.vue';
 import NavDropdown from './nav_dropdown.vue';
@@ -33,7 +33,7 @@ export default {
     },
   },
   beforeCreate() {
-    performanceMark(WEBIDE_MARK_TREE_START);
+    performanceMarkAndMeasure({ mark: WEBIDE_MARK_TREE_START });
   },
   updated() {
     if (this.currentTree?.tree?.length) {
@@ -45,7 +45,7 @@ export default {
   methods: {
     ...mapActions(['toggleTreeOpen']),
     clickedFile() {
-      performanceMark(WEBIDE_MARK_FILE_CLICKED);
+      performanceMarkAndMeasure({ mark: WEBIDE_MARK_FILE_CLICKED });
     },
   },
   IdeFileRow,

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

@@ -10,7 +10,7 @@ import {
   WEBIDE_MEASURE_FILE_AFTER_INTERACTION,
   WEBIDE_MEASURE_FILE_FROM_REQUEST,
 } from '~/performance_constants';
-import { performanceMark } from '~/performance_utils';
+import { performanceMarkAndMeasure } from '~/performance_utils';
 import eventHub from '../eventhub';
 import {
   leftSidebarViews,
@@ -173,7 +173,7 @@ export default {
     },
   },
   beforeCreate() {
-    performanceMark(WEBIDE_MARK_FILE_START);
+    performanceMarkAndMeasure({ mark: WEBIDE_MARK_FILE_START });
   },
   beforeDestroy() {
     this.editor.dispose();

app/assets/javascripts/performance_utils.js

-const processMeasures = measures => {
-  measures.forEach(measure => {
-    window.requestAnimationFrame(() =>
-      performance.measure(measure.name, measure.start, measure.end),
-    );
-  });
-};
-
-export const performanceMeasureAfterRendering = ({ marks = [], measures = [] } = {}) => {
+export const performanceMarkAndMeasure = ({ mark, measures = [] } = {}) => {
   window.requestAnimationFrame(() => {
-    if (marks.length) {
-      marks.forEach(mark => {
-        if (!performance.getEntriesByName(mark).length) {
-          performance.mark(mark);
-          processMeasures(measures);
-        }
-      });
-    } else {
-      processMeasures(measures);
+    if (mark && !performance.getEntriesByName(mark).length) {
+      performance.mark(mark);
     }
-  });
-};
-export const performanceMark = mark => {
-  window.requestAnimationFrame(() => {
-    performance.mark(mark);
+    measures.forEach(measure => {
+      window.requestAnimationFrame(() =>
+        performance.measure(measure.name, measure.start, measure.end),
+      );
+    });
   });
 };