[RPP Observations] Add warning if page was hidden during load

Bug: 364902432
Change-Id: Iaffc9eedecd802664381160dbce0e1395984e3c4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6239030
Reviewed-by: Connor Clark <[email protected]>
Commit-Queue: Adam Raine <[email protected]>

Author: Adam Raine

front_end/models/live-metrics/LiveMetrics.ts

@@ -18,6 +18,10 @@ const UIStrings = {
    */
   lcpEmulationWarning:
       'Simulating a new device after the page loads can affect LCP. Reload the page after simulating a new device for accurate LCP data.',
+  /**
+   * @description Warning text indicating that the Largest Contentful Paint (LCP) performance metric was affected by the page loading in the background.
+   */
+  lcpVisibilityWarning: 'LCP value may be inflated because the page started loading in the background.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/live-metrics/LiveMetrics.ts', UIStrings);
@@ -277,6 +281,10 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
           warnings.push(i18nString(UIStrings.lcpEmulationWarning));
         }
 
+        if (webVitalsEvent.startedHidden) {
+          warnings.push(i18nString(UIStrings.lcpVisibilityWarning));
+        }
+
         this.#lcpValue = lcpEvent;
         break;
       }

front_end/models/live-metrics/web-vitals-injected/spec/spec.ts

@@ -35,6 +35,7 @@ export interface InpPhases {
 export interface LcpChangeEvent extends MetricChangeEvent {
   name: 'LCP';
   phases: LcpPhases;
+  startedHidden: boolean;
   nodeIndex?: number;
 }
 

front_end/models/live-metrics/web-vitals-injected/web-vitals-injected.ts

@@ -121,23 +121,44 @@ function limitScripts(loafs: Spec.PerformanceLongAnimationFrameTimingJSON[]):
   });
 }
 
+function isPrerendered(): boolean {
+  if (document.prerendering) {
+    return true;
+  }
+
+  const firstNavStart = self.performance.getEntriesByType?.('navigation')[0]?.activationStart;
+  return firstNavStart !== undefined && firstNavStart > 0;
+}
+
+let startedHidden: boolean|null = null;
+
 function initialize(): void {
   sendEventToDevTools({name: 'reset'});
 
+  new PerformanceObserver(list => {
+    for (const entry of list.getEntries()) {
+      if (startedHidden === null && !isPrerendered()) {
+        startedHidden = entry.name === 'hidden';
+      }
+    }
+  }).observe({type: 'visibility-state', buffered: true});
+
   // We want to treat bfcache navigations like a standard navigations, so emit
   // a reset event when bfcache is restored.
   //
   // Metric functions will also re-emit their values using this listener's callback.
   // To ensure this event is fired before those values are emitted, register this
   // callback before any others.
   WebVitals.onBFCacheRestore(() => {
+    startedHidden = false;
     sendEventToDevTools({name: 'reset'});
   });
 
   onLCP(metric => {
     const event: Spec.LcpChangeEvent = {
       name: 'LCP',
       value: metric.value,
+      startedHidden: Boolean(startedHidden),
       phases: {
         timeToFirstByte: metric.attribution.timeToFirstByte,
         resourceLoadDelay: metric.attribution.resourceLoadDelay,