Support load timings for non-Chromium browsers

Attempt to find the performance paint entry based on the
'first-contentful-paint' name. Returns NaN to the user
if the entry cannot be found

Changelog: other
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/81260

app/assets/javascripts/performance_bar/index.js

@@ -82,7 +82,9 @@ const initPerformanceBar = (el) => {
           let summary = {};
           if (navigationEntries.length > 0) {
             const backend = Math.round(navigationEntries[0].responseEnd);
-            const firstContentfulPaint = Math.round(paintEntries[1].startTime);
+            const firstContentfulPaint = Math.round(
+              paintEntries.find((entry) => entry.name === 'first-contentful-paint')?.startTime,
+            );
             const domContentLoaded = Math.round(navigationEntries[0].domContentLoadedEventEnd);
 
             summary = {

doc/administration/monitoring/performance/performance_bar.md

@@ -48,12 +48,13 @@ From left to right, the performance bar displays:
 - **External HTTP calls**: the time taken (in milliseconds) and the total
   number of external calls to other systems. Click to display a modal window
   with more details.
-- **Load timings** of the page: if your browser supports load timings (Chromium
-  and Chrome) several values in milliseconds, separated by slashes.
+- **Load timings** of the page: if your browser supports load timings, several
+  values in milliseconds, separated by slashes.
   Click to display a modal window with more details. The values, from left to right:
   - **Backend**: time needed for the base page to load.
   - [**First Contentful Paint**](https://web.dev/first-contentful-paint/):
-    Time until something was visible to the user.
+    Time until something was visible to the user. Displays `NaN` if your browser does not
+    support this feature.
   - [**DomContentLoaded**](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp) Event.
   - **Total number of requests** the page loaded.
 - **Memory**: the amount of memory consumed and objects allocated during the selected request.