AI: only show "Ask AI" button for supported Insights

Bug: 400350312
Change-Id: I7d3b1d41876e342328e4b6357d596d48636d8899
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6349183
Reviewed-by: Nancy Li <[email protected]>
Commit-Queue: Nancy Li <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>

Author: jackfranklin

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

@@ -18,7 +18,7 @@ const {html} = Lit;
 
 describeWithEnvironment('BaseInsightComponent', () => {
   const {BaseInsightComponent} = Insights.BaseInsightComponent;
-  class TestInsightComponent extends BaseInsightComponent<Trace.Insights.Types.InsightModel> {
+  class TestInsightComponentNoAISupport extends BaseInsightComponent<Trace.Insights.Types.InsightModel> {
     override internalName = 'test-insight';
     override createOverlays(): TimelineOverlay[] {
       return [];
@@ -27,11 +27,22 @@ describeWithEnvironment('BaseInsightComponent', () => {
       return html`<div>test content</div>`;
     }
   }
-  customElements.define('test-insight-component', TestInsightComponent);
+  class TestInsightComponentWithAISupport extends BaseInsightComponent<Trace.Insights.Types.InsightModel> {
+    override internalName = 'test-insight';
+    protected override hasAskAISupport = true;
+    override createOverlays(): TimelineOverlay[] {
+      return [];
+    }
+    override renderContent(): Lit.LitTemplate {
+      return html`<div>test content</div>`;
+    }
+  }
+  customElements.define('test-insight-component-no-ai-support', TestInsightComponentNoAISupport);
+  customElements.define('test-insight-component-ai-support', TestInsightComponentWithAISupport);
 
   describe('sidebar insight component rendering', () => {
     it('renders insight title even when not active', async () => {
-      const component = new TestInsightComponent();
+      const component = new TestInsightComponentNoAISupport();
       component.selected = false;
       component.model = {
         insightKey: 'LCPPhases',
@@ -57,7 +68,7 @@ describeWithEnvironment('BaseInsightComponent', () => {
     });
 
     it('renders title, description and content when toggled', async () => {
-      const component = new TestInsightComponent();
+      const component = new TestInsightComponentNoAISupport();
       component.selected = true;
       component.model = {
         insightKey: 'LCPPhases',
@@ -99,8 +110,10 @@ describeWithEnvironment('BaseInsightComponent', () => {
       state: 'fail',
       frameId: '123',
     } as const;
-    async function renderComponent(): Promise<TestInsightComponent> {
-      const component = new TestInsightComponent();
+    async function renderComponent({insightHasAISupport}: {insightHasAISupport: boolean}):
+        Promise<TestInsightComponentNoAISupport|TestInsightComponentWithAISupport> {
+      const component =
+          insightHasAISupport ? new TestInsightComponentWithAISupport() : new TestInsightComponentNoAISupport();
       component.selected = true;
       component.model = FAKE_LCP_MODEL;
       // We don't need a real trace for these tests.
@@ -111,27 +124,40 @@ describeWithEnvironment('BaseInsightComponent', () => {
       return component;
     }
 
-    it('renders the "Ask AI" button when perf insights AI is enabled', async () => {
+    it('renders the "Ask AI" button when perf insights AI is enabled and the Insight supports it', async () => {
       updateHostConfig({
         devToolsAiAssistancePerformanceAgent: {
           enabled: true,
           insightsEnabled: true,
         }
       });
-      const component = await renderComponent();
+      const component = await renderComponent({insightHasAISupport: true});
       assert.isOk(component.shadowRoot);
       const button = component.shadowRoot.querySelector('devtools-button[data-insights-ask-ai]');
       assert.isOk(button);
     });
 
+    it('does not show the button if the feature is enabled but the Insight does not support it', async () => {
+      updateHostConfig({
+        devToolsAiAssistancePerformanceAgent: {
+          enabled: true,
+          insightsEnabled: true,
+        }
+      });
+      const component = await renderComponent({insightHasAISupport: false});
+      assert.isOk(component.shadowRoot);
+      const button = component.shadowRoot.querySelector('devtools-button[data-insights-ask-ai]');
+      assert.isNull(button);
+    });
+
     it('sets the context when the user clicks the button', async () => {
       updateHostConfig({
         devToolsAiAssistancePerformanceAgent: {
           enabled: true,
           insightsEnabled: true,
         }
       });
-      const component = await renderComponent();
+      const component = await renderComponent({insightHasAISupport: true});
       assert.isOk(component.shadowRoot);
       const button = component.shadowRoot.querySelector('devtools-button[data-insights-ask-ai]');
       assert.isOk(button);
@@ -152,7 +178,7 @@ describeWithEnvironment('BaseInsightComponent', () => {
     it('clears the active context when it gets toggled shut', async () => {
       const FAKE_ACTIVE_INSIGHT = {} as unknown as Utils.InsightAIContext.ActiveInsight;
       UI.Context.Context.instance().setFlavor(Utils.InsightAIContext.ActiveInsight, FAKE_ACTIVE_INSIGHT);
-      const component = await renderComponent();
+      const component = await renderComponent({insightHasAISupport: true});
       const header = component.shadowRoot?.querySelector('header');
       assert.isOk(header);
       dispatchClickEvent(header);
@@ -166,7 +192,8 @@ describeWithEnvironment('BaseInsightComponent', () => {
           enabled: false,
         }
       });
-      const component = await renderComponent();
+      const component = await renderComponent(
+          {insightHasAISupport: true});  // The Insight supports it, but the feature is not enabled
       assert.isOk(component.shadowRoot);
       const button = component.shadowRoot.querySelector('devtools-button[data-insights-ask-ai]');
       assert.isNull(button);
@@ -179,7 +206,7 @@ describeWithEnvironment('BaseInsightComponent', () => {
           insightsEnabled: false,
         }
       });
-      const component = await renderComponent();
+      const component = await renderComponent({insightHasAISupport: true});
       assert.isOk(component.shadowRoot);
       const button = component.shadowRoot.querySelector('devtools-button[data-insights-ask-ai]');
       assert.isNull(button);

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

@@ -66,13 +66,20 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
 
   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;
+
   #selected = false;
   #model: T|null = null;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
   #fieldMetrics: Trace.Insights.Common.CrUXFieldMetricResults|null = null;
 
-  #insightsAskAiEnabled = false;
-
   get model(): T|null {
     return this.#model;
   }
@@ -315,6 +322,10 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
     void action.execute();
   }
 
+  #canShowAskAI(): boolean {
+    return this.#insightsAskAiEnabled && this.hasAskAISupport;
+  }
+
   #renderInsightContent(insightModel: T): Lit.LitTemplate {
     if (!this.#selected) {
       return Lit.nothing;
@@ -327,7 +338,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
       <div class="insight-body">
         <div class="insight-description">${md(insightModel.description)}</div>
         <div class="insight-content">${content}</div>
-        ${this.#insightsAskAiEnabled ? html`
+        ${this.#canShowAskAI() ? html`
           <div class="ask-ai-btn-wrap">
             <devtools-button class="ask-ai"
               .variant=${Buttons.Button.Variant.OUTLINED}

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

@@ -62,6 +62,7 @@ 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;
 
   #renderDiscoveryDelay(delay: Trace.Types.Timing.Micro): Element {
     const timeWrapper = document.createElement('span');

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

@@ -25,6 +25,7 @@ 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;
 
   #getPhaseData(): PhaseData[] {

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

@@ -20,6 +20,7 @@ const {html} = Lit;
 
 export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-render-blocking-requests`;
+  protected override hasAskAISupport = true;
   override internalName = 'render-blocking-requests';
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {