Introduced user timing metrics to repo browser

This is to measure performance of the viewer loading in
the repo browser

app/assets/javascripts/blob/viewer/index.js

 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 import { __ } from '~/locale';
+import {
+  REPO_BLOB_LOAD_VIEWER_START,
+  REPO_BLOB_LOAD_VIEWER_FINISH,
+  REPO_BLOB_LOAD_VIEWER,
+} from '~/performance/constants';
+import { performanceMarkAndMeasure } from '~/performance/utils';
 import { fixTitle } from '~/tooltips';
 import { deprecatedCreateFlash as Flash } from '../../flash';
 import axios from '../../lib/utils/axios_utils';
@@ -130,6 +136,9 @@ export default class BlobViewer {
   }
 
   switchToViewer(name) {
+    performanceMarkAndMeasure({
+      mark: REPO_BLOB_LOAD_VIEWER_START,
+    });
     const newViewer = this.$fileHolder[0].querySelector(`.blob-viewer[data-type='${name}']`);
     if (this.activeViewer === newViewer) return;
 
@@ -163,6 +172,15 @@ export default class BlobViewer {
         handleLocationHash();
 
         this.toggleCopyButtonState();
+        performanceMarkAndMeasure({
+          mark: REPO_BLOB_LOAD_VIEWER_FINISH,
+          measures: [
+            {
+              name: REPO_BLOB_LOAD_VIEWER,
+              start: REPO_BLOB_LOAD_VIEWER_START,
+            },
+          ],
+        });
       })
       .catch(() => new Flash(__('Error loading viewer')));
   }

app/assets/javascripts/performance/constants.js

@@ -43,6 +43,7 @@ export const WEBIDE_MEASURE_FETCH_FILES = 'WebIDE: Fetch Files';
 
 //
 // MR Diffs namespace
+//
 
 // Marks
 export const MR_DIFFS_MARK_FILE_TREE_START = 'mr-diffs-mark-file-tree-start';
@@ -75,3 +76,14 @@ export const PIPELINES_DETAIL_LINKS_MEASURE_CALCULATION =
 export const PIPELINES_DETAIL_LINK_DURATION = 'pipeline_graph_link_calculation_duration_seconds';
 export const PIPELINES_DETAIL_LINKS_TOTAL = 'pipeline_graph_links_total';
 export const PIPELINES_DETAIL_LINKS_JOB_RATIO = 'pipeline_graph_links_per_job_ratio';
+
+//
+// REPO BROWSER NAMESPACE
+//
+
+// Marks
+export const REPO_BLOB_LOAD_VIEWER_START = 'blobviewer-load-viewer-start';
+export const REPO_BLOB_LOAD_VIEWER_FINISH = 'blobviewer-load-viewer-finish';
+
+// Measures
+export const REPO_BLOB_LOAD_VIEWER = 'Repository File Viewer: loading the content';