chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/ai_assistance/components/PerformanceAgentFlameChart.ts

@@ -0,0 +1,126 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Trace from '../../../models/trace/trace.js';
+import * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as Lit from '../../../ui/lit/lit.js';
+import * as Timeline from '../../timeline/timeline.js';
+
+const {html} = Lit;
+
+export interface PerformanceAgentFlameChartData {
+  parsedTrace: Trace.TraceModel.ParsedTrace|null;
+  start: number;
+  end: number;
+}
+
+export class PerformanceAgentFlameChart extends HTMLElement implements PerfUI.FlameChart.FlameChartDelegate {
+  readonly #shadow = this.attachShadow({mode: 'open'});
+
+  #flameChartContainer = document.createElement('div');
+  #flameChart: PerfUI.FlameChart.FlameChart;
+  #dataProvider: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider;
+  #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
+
+  constructor() {
+    super();
+    this.#flameChartContainer.classList.add('container');
+    this.#dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
+    this.#flameChart = new PerfUI.FlameChart.FlameChart(this.#dataProvider, this);
+    this.#flameChart.markAsRoot();
+    this.#flameChart.show(this.#flameChartContainer);
+  }
+
+  set data(data: PerformanceAgentFlameChartData) {
+    if (!data.parsedTrace) {
+      return;
+    }
+    this.#parsedTrace = data.parsedTrace;
+    const entityMapper = new Trace.EntityMapper.EntityMapper(data.parsedTrace);
+    this.#dataProvider.setModel(data.parsedTrace, entityMapper);
+    this.#dataProvider.buildWithCustomTracksForTest({
+      filterTracks: trackName => trackName.startsWith('Main'),
+      expandTracks: () => true,
+    });
+
+    let start = Trace.Types.Timing.Micro(data.start);
+    let end = Trace.Types.Timing.Micro(data.end);
+
+    const minTraceTime = data.parsedTrace.data.Meta.traceBounds.min;
+    const maxTraceTime = data.parsedTrace.data.Meta.traceBounds.max;
+
+    // If the start and end are not within the trace, display the whole trace duration.
+    if (start < 0 || end < 0 || start >= end || start === end || start < minTraceTime || end > maxTraceTime) {
+      start = minTraceTime;
+      end = maxTraceTime;
+      // eslint-disable-next-line no-console
+      console.log('[GreenDev] Flamechart widget bounds reset to the whole trace duration.');
+    }
+
+    const bounds = Trace.Helpers.Timing.traceWindowMicroSecondsToMilliSeconds({
+      min: Trace.Types.Timing.Micro(start),
+      max: Trace.Types.Timing.Micro(end),
+      range: Trace.Types.Timing.Micro(end - start),
+    });
+    this.#flameChart.setWindowTimes(bounds.min, bounds.max);
+    this.#flameChart.setSize(600, 200);
+    this.#render();
+  }
+
+  #render(): void {
+    if (!this.#parsedTrace) {
+      return;
+    }
+    const output = html`
+        <style>
+          :host {
+            display: flex;
+          }
+
+          .container {
+            display: flex;
+            width: 600px;
+            height: 200px;
+          }
+
+          .flex-auto {
+            flex: auto;
+          }
+
+          .vbox {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+          }
+        </style>
+        ${this.#flameChartContainer}
+      `;
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    Lit.render(output, this.#shadow, {host: this});
+
+    this.#flameChart.update();
+    this.#flameChart.setSize(600, 200);
+  }
+  windowChanged(startTime: number, endTime: number, animate: boolean): void {
+    this.#flameChart.setWindowTimes(startTime, endTime, animate);
+  }
+
+  updateRangeSelection(startTime: number, endTime: number): void {
+    this.#flameChart.updateRangeSelection(startTime, endTime);
+  }
+
+  updateSelectedEntry(_entryIndex: number): void {
+  }
+
+  updateSelectedGroup(_flameChart: PerfUI.FlameChart.FlameChart, _group: PerfUI.FlameChart.Group|null): void {
+  }
+}
+
+customElements.define('devtools-performance-agent-flame-chart', PerformanceAgentFlameChart);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-performance-agent-flame-chart': PerformanceAgentFlameChart;
+  }
+}

package/front_end/panels/ai_assistance/components/PerformanceAgentMarkdownRenderer.ts

@@ -2,27 +2,156 @@
 // 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 * as Common from '../../../core/common/common.js';
+import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
+import * as Logs from '../../../models/logs/logs.js';
+import * as NetworkTimeCalculator from '../../../models/network_time_calculator/network_time_calculator.js';
+import * as Helpers from '../../../models/trace/helpers/helpers.js';
 import * as Trace from '../../../models/trace/trace.js';
 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 Network from '../../network/network.js';
+import * as TimelineComponents from '../../timeline/components/components.js';
+import * as Insights from '../../timeline/components/insights/insights.js';
 
 import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
+import type * as PerformanceAgentFlameChart from './PerformanceAgentFlameChart.js';
 
-const {html} = Lit;
+const {html} = Lit.StaticHtml;
 const {ref, createRef} = Lit.Directives;
+const {widgetConfig} = UI.Widget;
 
 export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
+  #insightRenderer = new Insights.InsightRenderer.InsightRenderer();
+
   constructor(
       private mainFrameId = '',
-      private lookupEvent: (key: Trace.Types.File.SerializableKey) => Trace.Types.Events.Event | null = () => null) {
+      private lookupEvent: (key: Trace.Types.File.SerializableKey) => Trace.Types.Events.Event | null = () => null,
+      private parsedTrace: Trace.TraceModel.ParsedTrace|null = null) {
     super();
   }
 
   override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
+    if (!this.parsedTrace) {
+      return null;
+    }
+
+    // NOTE: The custom tag handling below (e.g., <ai-insight>, <network-request-widget>)
+    // is part of a prototype for the GreenDev project and is only rendered when the GreenDev
+    // feature is enabled.
+    if (token.type === 'html' && Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled)) {
+      if (token.text.includes('<flame-chart-widget')) {
+        const startMatch = token.text.match(/start="?(\d+)"?/);
+        const endMatch = token.text.match(/end="?(\d+)"?/);
+          const start = startMatch ? Number(startMatch[1]) : this.parsedTrace.data.Meta.traceBounds.min;
+          const end = endMatch ? Number(endMatch[1]) : this.parsedTrace.data.Meta.traceBounds.max;
+          return html`<devtools-performance-agent-flame-chart .data=${{
+            parsedTrace: this.parsedTrace,
+            start,
+            end,
+          } as PerformanceAgentFlameChart.PerformanceAgentFlameChartData}
+          }></devtools-performance-agent-flame-chart>`;
+      }
+
+      // Flexible regex to match the tag name and a value a.
+      // match[1]: tagName (e.g., 'ai-insight', 'network-request-widget')
+      // match[2]: value (value needed to display the widget)
+      const regex = /<([a-z-]+)\s+value="([^"]+)">/;
+      const match = token.text.match(regex);
+
+      if (!match) {
+        return null;
+      }
+
+      const tagName = match[1];
+      const value = match[2];
+
+      if (tagName === 'ai-insight' && value) {
+        const componentName = value;
+
+        const insightSet = this.parsedTrace.insights?.values().next().value;
+        const insightM = insightSet?.model[componentName as Trace.Insights.Types.InsightKeys];
+
+        if (!insightM) {
+          return null;
+        }
+
+        return html`<devtools-collapsible-assistance-content-widget  .data=${{
+          headerText: `Insight - ${componentName}`
+        }
+        }>
+        ${this.#insightRenderer.renderInsightToWidgetElement(this.parsedTrace, insightSet, insightM, componentName, {
+          selected: true,
+          isAIAssistanceContext: true
+        })}
+        </devtools-collapsible-assistance-content-widget>`;
+      }
+      if (tagName === 'network-request-widget' && value) {
+        const rawTraceEvent =
+            Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents().at(Number(value));
+
+        // Rendering RequestTimingView widget only works for fresh traces where the network log is in sync.
+        // If the trace is uploaded, we need to use the synthetic events and
+        // render the network request tooltip that uses the synthetic events.
+        if (rawTraceEvent && Trace.Types.Events.isSyntheticNetworkRequest(rawTraceEvent)) {
+          const rawTraceEventId = rawTraceEvent?.args?.data?.requestId;
+          const rawTraceEventUrl = rawTraceEvent?.args?.data?.url;
+          const networkRequest = rawTraceEvent ? Logs.NetworkLog.NetworkLog.instance()
+                                                     .requestsForId(rawTraceEventId)
+                                                     .find(r => r.url() === rawTraceEventUrl) :
+                                                 null;
+
+          if (networkRequest) {
+            const calculator = new NetworkTimeCalculator.NetworkTimeCalculator(true);
+            return html`<devtools-collapsible-assistance-content-widget
+            .data=${{
+              headerText: `Network Request: ${
+                  networkRequest.url().length > 80 ? networkRequest.url().slice(0, 80) + '...' : networkRequest.url()}`
+            }
+            }>
+            <devtools-widget class="actions" .widgetConfig=${
+                UI.Widget.widgetConfig(Network.RequestTimingView.RequestTimingView, {
+                  request: networkRequest,
+                  calculator,
+                })}></devtools-widget>
+            </devtools-collapsible-assistance-content-widget>`;
+          }
+        }
+
+        const syntheticRequest =
+            Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().syntheticEventForRawEventIndex(
+                Number(value));
+
+        let networkTooltip = null;
+        if (syntheticRequest && Trace.Types.Events.isSyntheticNetworkRequest(syntheticRequest)) {
+          // clang-format off
+          networkTooltip = html`<devtools-widget .widgetConfig=${widgetConfig(TimelineComponents.NetworkRequestTooltip.NetworkRequestTooltip, {
+            networkRequest: syntheticRequest,
+          })}></devtools-widget>`;
+          // clang-format on
+        }
+
+        return html`<devtools-collapsible-assistance-content-widget
+        .data=${{
+          headerText: 'Network Request'
+        }
+        }>
+          ${networkTooltip}
+          </devtools-collapsible-assistance-content-widget>`;
+      }
+
+      return null;
+    }
+
     if (token.type === 'link' && token.href.startsWith('#')) {
       if (token.href.startsWith('#node-')) {
         const nodeId = Number(token.href.replace('#node-', '')) as Protocol.DOM.BackendNodeId;

package/front_end/panels/ai_assistance/components/chatView.css

@@ -914,3 +914,31 @@ main {
     opacity: 0%;
   }
 }
+
+.floaty {
+  margin: var(--sys-size-3) 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: var(--sys-size-4);
+
+  li {
+    border: var(--sys-size-1) solid var(--sys-color-divider);
+    padding: var(--sys-size-2) var(--sys-size-3);
+    max-width: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    .context-item {
+      max-width: 130px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-grow: 0;
+    }
+  }
+
+  .open-floaty {
+    margin-left: auto;
+  }
+}

package/front_end/panels/ai_assistance/components/collapsibleAssistanceContentWidget.css

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  display: block;
+  border: 1px solid var(--sys-color-outline);
+  border-radius: 8px;
+  margin-bottom: 12px;
+  overflow: hidden;
+  background-color: var(--sys-color-cdt-base-container);
+}
+
+.header {
+  padding: 10px 16px;
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: background-color 0.2s ease-in-out;
+}
+
+:host([open]) .header {
+  border-bottom: 1px solid var(--sys-color-outline);
+}
+
+.content {
+  background-color: var(--sys-color-surface);
+  padding: 12px 16px;
+}