[GreenDev] Add reveal button and reveal insight and network request

AlinaVarkki · Devtools-frontend LUCI CQ · commit 90661618ead0 · 2026-01-12T13:35:10.000-08:00
A reveal function for synthetic events and flamechart will be in the follow up cl. Bug: 466073596 Change-Id: I91618186a6193f8a2f6b3293d8d07c5fcce3f2ee Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7362009 Commit-Queue: Alina Varkki <alinavarkki@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
diff --git a/front_end/panels/ai_assistance/components/ArtifactsViewer.ts b/front_end/panels/ai_assistance/components/ArtifactsViewer.ts
@@ -5,14 +5,17 @@
 import './CollapsibleAssistanceContentWidget.js';
 import './PerformanceAgentFlameChart.js';
 
+import * as Common from '../../../core/common/common.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Logs from '../../../models/logs/logs.js';
 import * as NetworkTimeCalculator from '../../../models/network_time_calculator/network_time_calculator.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as NetworkForward from '../../network/forward/forward.js';
 import * as Network from '../../network/network.js';
 import * as Insights from '../../timeline/components/insights/insights.js';
+import * as Timeline from '../../timeline/timeline.js';
 
 import artifactsViewerStyles from './artifactsViewer.css.js';
 import type * as PerformanceAgentFlameChart from './PerformanceAgentFlameChart.js';
@@ -39,7 +42,14 @@ export function renderArtifact(
       }
 
       return html`
-        <devtools-collapsible-assistance-content-widget .data=${{headerText: `Insight - ${componentName}`}}>
+        <devtools-collapsible-assistance-content-widget .data=${{
+          headerText: `Insight - ${componentName}`,
+          onReveal: () => {
+            void UI.InspectorView.InspectorView.instance().showPanel('timeline').then(() => {
+              Timeline.TimelinePanel.TimelinePanel.instance().revealInsight(insightModel);
+            });
+          },
+        }}>
           ${insightRenderer.renderInsightToWidgetElement(parsedTrace, insightSet, insightModel, componentName, {
             selected: true,
             isAIAssistanceContext: true,
@@ -59,8 +69,16 @@ export function renderArtifact(
         }
         return html`
         <devtools-collapsible-assistance-content-widget
-          .data=${{headerText: `Network Request: ${
-              sdkRequest.url().length > 80 ? sdkRequest.url().slice(0, 80) + '...' : sdkRequest.url()}`}}>
+          .data=${{
+            headerText: `Network Request: ${
+              sdkRequest.url().length > 80 ? sdkRequest.url().slice(0, 80) + '...' : sdkRequest.url()}`,
+            onReveal: () => {
+              void UI.InspectorView.InspectorView.instance().showPanel('network').then(() => {
+                void Common.Revealer.reveal(NetworkForward.UIRequestLocation.UIRequestLocation.tab(
+                    sdkRequest, NetworkForward.UIRequestLocation.UIRequestTabs.TIMING));
+              });
+            },
+          }}>
           <devtools-widget class="actions" .widgetConfig=${UI.Widget.widgetConfig(Network.RequestTimingView.RequestTimingView, {
             request: sdkRequest,
             calculator,
@@ -71,7 +89,13 @@ export function renderArtifact(
     }
     case 'flamechart': {
       return html`
-        <devtools-collapsible-assistance-content-widget .data=${{headerText: `Flamechart`}}>
+        <devtools-collapsible-assistance-content-widget .data=${{
+          headerText: `Flamechart`,
+          onReveal: () => {
+            // eslint-disable-next-line no-console
+            console.log('Reveal flamechart', artifact.start, artifact.end);
+          },
+        }}>
           <devtools-performance-agent-flame-chart .data=${{
             parsedTrace,
             start: artifact.start,
diff --git a/front_end/panels/ai_assistance/components/CollapsibleAssistanceContentWidget.ts b/front_end/panels/ai_assistance/components/CollapsibleAssistanceContentWidget.ts
@@ -12,15 +12,18 @@ const {render, html} = Lit;
 
 export interface CollapsibleAssistanceContentWidgetData {
   headerText: string;
+  onReveal?: () => void;
 }
 
 export class CollapsibleAssistanceContentWidget extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #isCollapsed = false;
   #headerText = 'Details';
+  #onReveal?: () => void;
 
   set data(data: CollapsibleAssistanceContentWidgetData) {
     this.#headerText = data.headerText;
+    this.#onReveal = data.onReveal;
     this.#render();
   }
 
@@ -43,14 +46,30 @@ export class CollapsibleAssistanceContentWidget extends HTMLElement {
           this.#toggleCollapse();
         }}>
           ${this.#headerText}
-          <devtools-button .data=${{
-            variant: Buttons.Button.Variant.ICON,
-            iconName: this.#isCollapsed ? 'triangle-right' : 'triangle-down',
-            color: 'var(--sys-color-on-surface)',
-            width: '14px',
-            height: '14px',
-            } as Buttons.Button.ButtonData}
-          ></devtools-button>
+          <div>
+            <devtools-button .data=${{
+              variant: Buttons.Button.Variant.ICON,
+              iconName: 'select-element',
+              color: 'var(--sys-color-on-surface)',
+              width: '14px',
+              height: '14px',
+              title: 'reveal',
+              } as Buttons.Button.ButtonData}
+              @click=${(event: Event) => {
+                event.stopPropagation();
+                this.#onReveal?.();
+              }}
+            ></devtools-button>
+            <devtools-button .data=${{
+              variant: Buttons.Button.Variant.ICON,
+              iconName: this.#isCollapsed ? 'triangle-right' : 'triangle-down',
+              color: 'var(--sys-color-on-surface)',
+              width: '14px',
+              height: '14px',
+              title: 'expand',
+              } as Buttons.Button.ButtonData}
+            ></devtools-button>
+          </div>
         </summary>
         <div class="content">
           <slot></slot>
diff --git a/front_end/panels/ai_assistance/components/PerformanceAgentMarkdownRenderer.ts b/front_end/panels/ai_assistance/components/PerformanceAgentMarkdownRenderer.ts
@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './CollapsibleAssistanceContentWidget.js';
 import '../../../models/trace/insights/insights.js';
 import '../../../panels/timeline/components/components.js';
 import './PerformanceAgentFlameChart.js';
+import './CollapsibleAssistanceContentWidget.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as SDK from '../../../core/sdk/sdk.js';
@@ -19,9 +19,11 @@ import type * as Marked from '../../../third_party/marked/marked.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as PanelsCommon from '../../common/common.js';
+import * as NetworkForward from '../../network/forward/forward.js';
 import * as Network from '../../network/network.js';
 import * as TimelineComponents from '../../timeline/components/components.js';
 import * as Insights from '../../timeline/components/insights/insights.js';
+import * as Timeline from '../../timeline/timeline.js';
 
 import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
 import type * as PerformanceAgentFlameChart from './PerformanceAgentFlameChart.js';
@@ -86,7 +88,11 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
         }
 
         return html`<devtools-collapsible-assistance-content-widget  .data=${{
-          headerText: `Insight - ${componentName}`
+          headerText: `Insight - ${componentName}`, onReveal: () => {
+            void UI.InspectorView.InspectorView.instance().showPanel('timeline').then(() => {
+              Timeline.TimelinePanel.TimelinePanel.instance().revealInsight(insightM);
+            });
+          },
         }
         }>
         ${this.#insightRenderer.renderInsightToWidgetElement(this.parsedTrace, insightSet, insightM, componentName, {
@@ -115,7 +121,13 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
             return html`<devtools-collapsible-assistance-content-widget
             .data=${{
               headerText: `Network Request: ${
-                  networkRequest.url().length > 80 ? networkRequest.url().slice(0, 80) + '...' : networkRequest.url()}`
+                  networkRequest.url().length > 80 ? networkRequest.url().slice(0, 80) + '...' : networkRequest.url()}`,
+                  onReveal: () => {
+                    void UI.InspectorView.InspectorView.instance().showPanel('network').then(() => {
+                      void Common.Revealer.reveal(NetworkForward.UIRequestLocation.UIRequestLocation.tab(
+                          networkRequest, NetworkForward.UIRequestLocation.UIRequestTabs.TIMING));
+                    });
+                  },
             }
             }>
             <devtools-widget class="actions" .widgetConfig=${
@@ -142,7 +154,10 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
 
         return html`<devtools-collapsible-assistance-content-widget
         .data=${{
-          headerText: 'Network Request'
+          headerText: 'Network Request', onReveal: () => {
+            // eslint-disable-next-line no-console
+            console.log('Reveal network request', value);
+          },
         }
         }>
           ${networkTooltip}
