RPP: let an Insight conditionally hide/show the AI button

Insights already can determine if they do or don't support the "Ask AI"
flow, but for some insights we want to make this conditional based on
the actual trace data. For example, this CL fixes a case where the INP
insight can be used for "Ask AI" but if the trace has no interaction,
this is nonsensical and does not lead to good results.

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

Author: jackfranklin

front_end/panels/timeline/components/insights/BUILD.gn

@@ -83,6 +83,7 @@ ts_library("unittests") {
   sources = [
     "BaseInsightComponent.test.ts",
     "CLSCulprits.test.ts",
+    "InteractionToNextPaint.test.ts",
     "Table.test.ts",
   ]
 

front_end/panels/timeline/components/insights/BaseInsightComponent.test.ts

@@ -21,6 +21,11 @@ describeWithEnvironment('BaseInsightComponent', () => {
   const {BaseInsightComponent} = Insights.BaseInsightComponent;
   class TestInsightComponentNoAISupport extends BaseInsightComponent<Trace.Insights.Types.InsightModel> {
     override internalName = 'test-insight';
+
+    override hasAskAiSupport() {
+      return false;
+    }
+
     override createOverlays(): TimelineOverlay[] {
       return [];
     }
@@ -30,7 +35,9 @@ describeWithEnvironment('BaseInsightComponent', () => {
   }
   class TestInsightComponentWithAISupport extends BaseInsightComponent<Trace.Insights.Types.InsightModel> {
     override internalName = 'test-insight';
-    protected override hasAskAISupport = true;
+    override hasAskAiSupport() {
+      return true;
+    }
     override createOverlays(): TimelineOverlay[] {
       return [];
     }

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

@@ -64,14 +64,8 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
   // So we can use the TypeScript BaseInsight class without getting warnings
   // about litTagName. Every child should overwrite this.
   static readonly litTagName = Lit.StaticHtml.literal``;
-
   protected readonly shadow = this.attachShadow({mode: 'open'});
 
-  // Flipped to true for Insights that have support for the "Ask AI" Insights
-  // experience. The "Ask AI" button will only be shown for an Insight if this
-  // is true and if the feature has been enabled by the user and they meet the
-  // requirements to use AI.
-  protected readonly hasAskAISupport: boolean = false;
   // This flag tracks if the Insights AI feature is enabled within Chrome for
   // the active user.
   #insightsAskAiEnabled = false;
@@ -84,7 +78,6 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
   get model(): T|null {
     return this.#model;
   }
-
   protected data: BaseInsightData = {
     bounds: null,
     insightSetKey: null,
@@ -101,6 +94,14 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
+  // Insights that do support the AI feature can override this to return true.
+  // The "Ask AI" button will only be shown for an Insight if this
+  // is true and if the feature has been enabled by the user and they meet the
+  // requirements to use AI.
+  protected hasAskAiSupport(): boolean {
+    return false;
+  }
+
   connectedCallback(): void {
     this.shadow.adoptedStyleSheets.push(baseInsightComponentStyles);
     this.setAttribute('jslog', `${VisualLogging.section(`timeline.insights.${this.internalName}`)}`);
@@ -327,7 +328,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
     const aiDisabledByEnterprisePolicy = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.DISABLE;
 
-    return !aiDisabledByEnterprisePolicy && this.#insightsAskAiEnabled && this.hasAskAISupport;
+    return !aiDisabledByEnterprisePolicy && this.#insightsAskAiEnabled && this.hasAskAiSupport();
   }
 
   #renderInsightContent(insightModel: T): Lit.LitTemplate {

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

@@ -18,7 +18,10 @@ const {html} = Lit;
 export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-document-latency`;
   override internalName = 'document-latency';
-  protected override hasAskAISupport = true;
+
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     if (!this.model?.data?.documentRequest) {

front_end/panels/timeline/components/insights/InteractionToNextPaint.test.ts

@@ -0,0 +1,71 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {
+  renderElementIntoDOM,
+} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment, updateHostConfig} from '../../../../testing/EnvironmentHelpers.js';
+import {getInsightOrError} from '../../../../testing/InsightHelpers.js';
+import {TraceLoader} from '../../../../testing/TraceLoader.js';
+import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
+
+import * as Insights from './insights.js';
+
+describeWithEnvironment('Interaction to next paint component', () => {
+  beforeEach(() => {
+    // Ensure the environment is setup for AI being supported so we can
+    // test the presence of the button being conditional on the insight
+    // having a longest interaction event.
+    updateHostConfig({
+      devToolsAiAssistancePerformanceAgent: {
+        enabled: true,
+        insightsEnabled: true,
+      }
+    });
+  });
+
+  it('enables "Ask AI" if the page has an interaction', async function() {
+    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'one-second-interaction.json.gz');
+    assert.isOk(insights);
+    const firstInsightSet = insights.values().next()?.value;
+    assert.isOk(firstInsightSet);
+    const [firstNav] = parsedTrace.Meta.mainFrameNavigations;
+    const interactionInsight = getInsightOrError('InteractionToNextPaint', insights, firstNav);
+    assert.isDefined(interactionInsight.longestInteractionEvent);
+
+    const component = new Insights.InteractionToNextPaint.InteractionToNextPaint();
+    component.model = interactionInsight;
+    component.insightSetKey = firstInsightSet.id;
+    component.bounds = parsedTrace.Meta.traceBounds;
+    component.selected = true;
+    renderElementIntoDOM(component);
+    await RenderCoordinator.done();
+    assert.isOk(component.shadowRoot);
+
+    const button = component.shadowRoot.querySelector('devtools-button[data-insights-ask-ai]');
+    assert.instanceOf(button, HTMLElement);
+  });
+
+  it('disables "Ask AI" if the page has no interaction', async function() {
+    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'unsized-images.json.gz');
+    assert.isOk(insights);
+    const firstInsightSet = insights.values().next()?.value;
+    assert.isOk(firstInsightSet);
+    const [firstNav] = parsedTrace.Meta.mainFrameNavigations;
+    const interactionInsight = getInsightOrError('InteractionToNextPaint', insights, firstNav);
+    assert.isUndefined(interactionInsight.longestInteractionEvent);
+
+    const component = new Insights.InteractionToNextPaint.InteractionToNextPaint();
+    component.model = interactionInsight;
+    component.insightSetKey = firstInsightSet.id;
+    component.bounds = parsedTrace.Meta.traceBounds;
+    component.selected = true;
+    renderElementIntoDOM(component);
+    await RenderCoordinator.done();
+    assert.isOk(component.shadowRoot);
+
+    const button = component.shadowRoot.querySelector('devtools-button[data-insights-ask-ai]');
+    assert.isNull(button);
+  });
+});

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

@@ -20,7 +20,10 @@ const {html} = Lit;
 export class InteractionToNextPaint extends BaseInsightComponent<INPInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-inp`;
   override internalName = 'inp';
-  protected override hasAskAISupport = true;
+
+  protected override hasAskAiSupport(): boolean {
+    return this.model?.longestInteractionEvent !== undefined;
+  }
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     if (!this.model) {

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

@@ -63,7 +63,10 @@ function getImageData(model: LCPDiscoveryInsightModel): LCPImageDiscoveryData|nu
 export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-lcp-discovery`;
   override internalName = 'lcp-discovery';
-  protected override hasAskAISupport = true;
+
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
 
   #renderDiscoveryDelay(delay: Trace.Types.Timing.Micro): Element {
     const timeWrapper = document.createElement('span');

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

@@ -25,9 +25,12 @@ interface PhaseData {
 export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-lcp-by-phases`;
   override internalName = 'lcp-by-phase';
-  protected override hasAskAISupport = true;
   #overlay: Overlays.Overlays.TimespanBreakdown|null = null;
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
   #getPhaseData(): PhaseData[] {
     if (!this.model) {
       return [];

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

@@ -36,9 +36,12 @@ export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightMo
     };
   }
 
-  protected override hasAskAISupport = true;
   override internalName = 'render-blocking-requests';
 
+  protected override hasAskAiSupport(): boolean {
+    return !!this.model;
+  }
+
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     if (!this.model) {
       return [];