Merge branch 'dmishunov-user-timing-performance-bar' into 'master'

Log user timing metrics

See merge request gitlab-org/gitlab!43266

app/assets/javascripts/performance_bar/performance_bar_log.js

 /* eslint-disable no-console */
 import { getCLS, getFID, getLCP } from 'web-vitals';
+import { PERFORMANCE_TYPE_MARK, PERFORMANCE_TYPE_MEASURE } from '~/performance_constants';
 
 const initVitalsLog = () => {
   const reportVital = data => {
@@ -16,6 +17,29 @@ const initVitalsLog = () => {
   getLCP(reportVital);
 };
 
+const logUserTimingMetrics = () => {
+  const metricsProcessor = list => {
+    const entries = list.getEntries();
+    entries.forEach(entry => {
+      const { name, entryType, startTime, duration } = entry;
+      const typeMapper = {
+        PERFORMANCE_MARK: String.fromCodePoint(0x1f3af),
+        PERFORMANCE_MEASURE: String.fromCodePoint(0x1f4d0),
+      };
+      console.group(`${typeMapper[entryType]} ${name}`);
+      if (entryType === PERFORMANCE_TYPE_MARK) {
+        console.log(`Start time: ${startTime}`);
+      } else if (entryType === PERFORMANCE_TYPE_MEASURE) {
+        console.log(`Duration: ${duration}`);
+      }
+      console.log(entry);
+      console.groupEnd();
+    });
+  };
+  const observer = new PerformanceObserver(metricsProcessor);
+  observer.observe({ entryTypes: [PERFORMANCE_TYPE_MEASURE, PERFORMANCE_TYPE_MARK] });
+};
+
 const initPerformanceBarLog = () => {
   console.log(
     `%c ${String.fromCodePoint(0x1f98a)} GitLab performance bar`,
@@ -23,6 +47,7 @@ const initPerformanceBarLog = () => {
   );
 
   initVitalsLog();
+  logUserTimingMetrics();
 };
 
 export default initPerformanceBarLog;

app/assets/javascripts/performance_constants.js

+export const PERFORMANCE_TYPE_MARK = 'mark';
+export const PERFORMANCE_TYPE_MEASURE = 'measure';
+
 //
 // SNIPPET namespace
 //

spec/frontend/environment.js

-/* eslint-disable import/no-commonjs */
+/* eslint-disable import/no-commonjs, max-classes-per-file */
 
 const path = require('path');
 const { ErrorWithStack } = require('jest-util');
@@ -58,6 +58,14 @@ class CustomEnvironment extends JSDOMEnvironment {
       measure: () => null,
       getEntriesByName: () => [],
     });
+
+    this.global.PerformanceObserver = class {
+      /* eslint-disable no-useless-constructor, no-unused-vars, no-empty-function, class-methods-use-this */
+      constructor(callback) {}
+      disconnect() {}
+      observe(element, initObject) {}
+      /* eslint-enable no-useless-constructor, no-unused-vars, no-empty-function, class-methods-use-this */
+    };
   }
 
   async teardown() {