Add latest changes from gitlab-org/gitlab@master

2 files changed, 32 insertions, 0 deletions

diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index d29099b872a..f29b5f42d8f 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -5,6 +5,8 @@ import axios from '~/lib/utils/axios_utils';
 import PerformanceBarService from './services/performance_bar_service';
 import PerformanceBarStore from './stores/performance_bar_store';
 
+import initPerformanceBarLog from './performance_bar_log';
+
 const initPerformanceBar = el => {
   const performanceBarData = el.dataset;
 
@@ -128,4 +130,6 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 });
 
+initPerformanceBarLog();
+
 export default initPerformanceBar;
diff --git a/app/assets/javascripts/performance_bar/performance_bar_log.js b/app/assets/javascripts/performance_bar/performance_bar_log.js
new file mode 100644
index 00000000000..638c544f2e1
--- /dev/null
+++ b/app/assets/javascripts/performance_bar/performance_bar_log.js
@@ -0,0 +1,28 @@
+/* eslint-disable no-console */
+import { getCLS, getFID, getLCP } from 'web-vitals';
+
+const initVitalsLog = () => {
+  const reportVital = data => {
+    console.log(`${String.fromCodePoint(0x1f4c8)} ${data.name} : `, data);
+  };
+
+  console.log(
+    `${String.fromCodePoint(
+      0x1f4d1,
+    )} To get the final web vital numbers reported you maybe need to switch away and back to the tab`,
+  );
+  getCLS(reportVital);
+  getFID(reportVital);
+  getLCP(reportVital);
+};
+
+const initPerformanceBarLog = () => {
+  console.log(
+    `%c ${String.fromCodePoint(0x1f98a)} GitLab performance bar`,
+    'width:100%;background-color: #292961; color: #FFFFFF; font-size:24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; padding: 10px;display:block;padding-right: 100px;',
+  );
+
+  initVitalsLog();
+};
+
+export default initPerformanceBarLog;