[RPP] Mark LCP/INP breakdown insights failing based on score

That way these are given the appropriate scores in Lighthouse.

CLS Culprits was already doing this.

Bug: 445864761
Change-Id: I47e4ac2518955d565d201be8756c9ac4d1c2e798
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7004564
Commit-Queue: Connor Clark <[email protected]>
Auto-Submit: Connor Clark <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>

Author: Connor Clark

front_end/models/trace/insights/INPBreakdown.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Handlers from '../handlers/handlers.js';
+import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import type {SyntheticInteractionPair} from '../types/TraceEvents.js';
 import type * as Types from '../types/types.js';
@@ -67,13 +67,24 @@ export function isINPBreakdownInsight(insight: InsightModel): insight is INPBrea
 }
 
 function finalize(partialModel: PartialInsightModel<INPBreakdownInsightModel>): INPBreakdownInsightModel {
+  let state: INPBreakdownInsightModel['state'] = 'pass';
+  if (partialModel.longestInteractionEvent) {
+    const classification = Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(
+        partialModel.longestInteractionEvent.dur);
+    if (classification === Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD) {
+      state = 'informative';
+    } else {
+      state = 'fail';
+    }
+  }
+
   return {
     insightKey: InsightKeys.INP_BREAKDOWN,
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.INP,
-    state: partialModel.longestInteractionEvent ? 'informative' : 'pass',
+    state,
     ...partialModel,
   };
 }

front_end/models/trace/insights/LCPBreakdown.ts

@@ -180,13 +180,25 @@ function finalize(partialModel: PartialInsightModel<LCPBreakdownInsightModel>):
   if (partialModel.lcpRequest) {
     relatedEvents.push(partialModel.lcpRequest);
   }
+
+  let state: LCPBreakdownInsightModel['state'] = 'pass';
+  if (partialModel.lcpMs !== undefined) {
+    const classification = Handlers.ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(
+        Helpers.Timing.milliToMicro(partialModel.lcpMs));
+    if (classification === Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD) {
+      state = 'informative';
+    } else {
+      state = 'fail';
+    }
+  }
+
   return {
     insightKey: InsightKeys.LCP_BREAKDOWN,
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.LCP,
-    state: partialModel.lcpEvent || partialModel.lcpRequest ? 'informative' : 'pass',
+    state,
     ...partialModel,
     relatedEvents,
   };