Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

3 files changed, 108 insertions, 0 deletions

diff --git a/app/assets/javascripts/performance/constants.js b/app/assets/javascripts/performance/constants.js
new file mode 100644
index 00000000000..816eb9b3a66
--- /dev/null
+++ b/app/assets/javascripts/performance/constants.js
@@ -0,0 +1,45 @@
+export const PERFORMANCE_TYPE_MARK = 'mark';
+export const PERFORMANCE_TYPE_MEASURE = 'measure';
+
+//
+// SNIPPET namespace
+//
+
+// Marks
+export const SNIPPET_MARK_VIEW_APP_START = 'snippet-view-app-start';
+export const SNIPPET_MARK_EDIT_APP_START = 'snippet-edit-app-start';
+export const SNIPPET_MARK_BLOBS_CONTENT = 'snippet-blobs-content-finished';
+
+// Measures
+export const SNIPPET_MEASURE_BLOBS_CONTENT = 'snippet-blobs-content';
+
+//
+// WebIDE namespace
+//
+
+// Marks
+export const WEBIDE_MARK_APP_START = 'webide-app-start';
+export const WEBIDE_MARK_TREE_START = 'webide-tree-start';
+export const WEBIDE_MARK_TREE_FINISH = 'webide-tree-finished';
+export const WEBIDE_MARK_FILE_START = 'webide-file-start';
+export const WEBIDE_MARK_FILE_CLICKED = 'webide-file-clicked';
+export const WEBIDE_MARK_FILE_FINISH = 'webide-file-finished';
+
+// Measures
+export const WEBIDE_MEASURE_TREE_FROM_REQUEST = 'webide-tree-loading-from-request';
+export const WEBIDE_MEASURE_FILE_FROM_REQUEST = 'webide-file-loading-from-request';
+export const WEBIDE_MEASURE_FILE_AFTER_INTERACTION = 'webide-file-loading-after-interaction';
+
+//
+// MR Diffs namespace
+
+// Marks
+export const MR_DIFFS_MARK_FILE_TREE_START = 'mr-diffs-mark-file-tree-start';
+export const MR_DIFFS_MARK_FILE_TREE_END = 'mr-diffs-mark-file-tree-end';
+export const MR_DIFFS_MARK_DIFF_FILES_START = 'mr-diffs-mark-diff-files-start';
+export const MR_DIFFS_MARK_FIRST_DIFF_FILE_SHOWN = 'mr-diffs-mark-first-diff-file-shown';
+export const MR_DIFFS_MARK_DIFF_FILES_END = 'mr-diffs-mark-diff-files-end';
+
+// Measures
+export const MR_DIFFS_MEASURE_FILE_TREE_DONE = 'mr-diffs-measure-file-tree-done';
+export const MR_DIFFS_MEASURE_DIFF_FILES_DONE = 'mr-diffs-measure-diff-files-done';
diff --git a/app/assets/javascripts/performance/utils.js b/app/assets/javascripts/performance/utils.js
new file mode 100644
index 00000000000..1c87ee2086e
--- /dev/null
+++ b/app/assets/javascripts/performance/utils.js
@@ -0,0 +1,10 @@
+export const performanceMarkAndMeasure = ({ mark, measures = [] } = {}) => {
+  window.requestAnimationFrame(() => {
+    if (mark && !performance.getEntriesByName(mark).length) {
+      performance.mark(mark);
+    }
+    measures.forEach(measure => {
+      performance.measure(measure.name, measure.start, measure.end);
+    });
+  });
+};
diff --git a/app/assets/javascripts/performance/vue_performance_plugin.js b/app/assets/javascripts/performance/vue_performance_plugin.js
new file mode 100644
index 00000000000..7329b83b1d1
--- /dev/null
+++ b/app/assets/javascripts/performance/vue_performance_plugin.js
@@ -0,0 +1,53 @@
+const ComponentPerformancePlugin = {
+  install(Vue, options) {
+    Vue.mixin({
+      beforeCreate() {
+        /** Make sure the component you want to measure has `name` option defined
+         * and it matches the one you pass as the plugin option. Example:
+         *
+         * my_component.vue:
+         *
+         * ```
+         * export default {
+         *   name: 'MyComponent'
+         *   ...
+         * }
+         * ```
+         *
+         * index.js (where you initialize your Vue app containing <my-component>):
+         *
+         * ```
+         * Vue.use(PerformancePlugin, {
+         *   components: [
+         *     'MyComponent',
+         *   ]
+         * });
+         * ```
+         */
+        const componentName = this.$options.name;
+        if (options?.components?.indexOf(componentName) !== -1) {
+          const tagName = `<${componentName}>`;
+          if (!performance.getEntriesByName(`${tagName}-start`).length) {
+            performance.mark(`${tagName}-start`);
+          }
+        }
+      },
+      mounted() {
+        const componentName = this.$options.name;
+        if (options?.components?.indexOf(componentName) !== -1) {
+          this.$nextTick(() => {
+            window.requestAnimationFrame(() => {
+              const tagName = `<${componentName}>`;
+              if (!performance.getEntriesByName(`${tagName}-end`).length) {
+                performance.mark(`${tagName}-end`);
+                performance.measure(`${tagName}`, `${tagName}-start`);
+              }
+            });
+          });
+        }
+      },
+    });
+  },
+};
+
+export default ComponentPerformancePlugin;