RPP: improve LCP fetchpriority text

This CL updates the LCPDiscovery component to show specific text for
when fetchpriority should be applied to make it clear to the user what
we are suggesting.

Fixed: 394009056
Change-Id: I6588b3ed3b7327c94cd84f052370a3a89595adf5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6235031
Reviewed-by: Andres Olivares <[email protected]>
Commit-Queue: Andres Olivares <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>

Author: jackfranklin

front_end/models/trace/insights/LCPDiscovery.test.ts

@@ -18,6 +18,24 @@ describeWithEnvironment('LCPDiscovery', function() {
     assert.isTrue(checklist.eagerlyLoaded.value);
   });
 
+  it('uses the fetchpriority=high text when the image has fetchpriority set', async () => {
+    const {data, insights} = await processTrace(this, 'lcp-fetchpriority-high.json.gz');
+    const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
+    const insight = getInsightOrError('LCPDiscovery', insights, firstNav);
+    assert.isOk(insight.checklist);
+    assert.isTrue(insight.checklist.priorityHinted.value);
+    assert.strictEqual(insight.checklist.priorityHinted.label, 'fetchpriority=high applied');
+  });
+
+  it('uses the should apply fetchpriority=high text when the image does not fetchpriority set', async () => {
+    const {data, insights} = await processTrace(this, 'web-dev-with-commit.json.gz');
+    const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
+    const insight = getInsightOrError('LCPDiscovery', insights, firstNav);
+    assert.isOk(insight.checklist);
+    assert.isFalse(insight.checklist.priorityHinted.value);
+    assert.strictEqual(insight.checklist.priorityHinted.label, 'fetchpriority=high should be applied');
+  });
+
   it('calculates the LCP optimal time as the document request download start time', async () => {
     const {data, insights} = await processTrace(this, 'web-dev-with-commit.json.gz');
     const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());

front_end/models/trace/insights/LCPDiscovery.ts

@@ -36,6 +36,10 @@ export const UIStrings = {
    * @description Text to tell the user that a fetchpriority property value of "high" is applied to the LCP request.
    */
   fetchPriorityApplied: 'fetchpriority=high applied',
+  /**
+   * @description Text to tell the user that a fetchpriority property value of "high" should be applied to the LCP request.
+   */
+  fetchPriorityShouldBeApplied: 'fetchpriority=high should be applied',
   /**
    * @description Text to tell the user that the LCP request is discoverable in the initial document.
    */
@@ -136,12 +140,18 @@ export function generateInsight(
           Helpers.Timing.milliToMicro(docRequest.args.data.timing.receiveHeadersStart) :
       undefined;
 
+  const priorityHintFound = imageFetchPriorityHint === 'high';
+
   return finalize({
     lcpEvent,
     lcpRequest,
     earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.Micro(earliestDiscoveryTime) : undefined,
     checklist: {
-      priorityHinted: {label: i18nString(UIStrings.fetchPriorityApplied), value: imageFetchPriorityHint === 'high'},
+      priorityHinted: {
+        label: priorityHintFound ? i18nString(UIStrings.fetchPriorityApplied) :
+                                   i18nString(UIStrings.fetchPriorityShouldBeApplied),
+        value: priorityHintFound
+      },
       requestDiscoverable: {label: i18nString(UIStrings.requestDiscoverable), value: imgPreloadedOrFoundInHTML},
       eagerlyLoaded: {label: i18nString(UIStrings.lazyLoadNotApplied), value: imageLoadingAttr !== 'lazy'},
     },

front_end/panels/timeline/components/insights/Checklist.ts

@@ -92,7 +92,7 @@ export class Checklist extends HTMLElement {
           <ul>
             ${Object.values(this.#checklist).map(check => html`<li>
                 ${this.#getIcon(check)}
-                <span>${check.label}</span>
+                <span data-checklist-label>${check.label}</span>
             </li>`)}
           </ul>`,
         this.#shadow, {host: this});

front_end/panels/timeline/fixtures/traces/BUILD.gn

@@ -48,6 +48,7 @@ copy_to_gen("traces") {
     "large-layout-small-recalc.json.gz",
     "large-profile.cpuprofile.gz",
     "large-recalc-style.json.gz",
+    "lcp-fetchpriority-high.json.gz",
     "lcp-images-rasterizer.json.gz",
     "lcp-images.json.gz",
     "lcp-late-paint-event.json.gz",

front_end/panels/timeline/fixtures/traces/README.md

@@ -254,3 +254,7 @@ A trace generated from crrev.com/c/6197645 (January 2025), which changed the for
 ### dom-size-overlap
 
 Trace containing a cross-origin navigation where DOM size events from the pre-navigation page are emitted *after* the navigation event.
+
+### lcp-fetchpriority-high
+
+A page that loads an image as the LCP resource with fetchpriority=high set.