chrome-devtools-frontend 1.0.1555174 → 1.0.1556696

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

@@ -9,9 +9,9 @@ import '../../../ui/components/spinners/spinners.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
-import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
+import * as GreenDev from '../../../models/greendev/greendev.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
 import * as PanelsCommon from '../../../panels/common/common.js';
@@ -265,6 +265,7 @@ export interface Props {
   inputPlaceholder: Platform.UIString.LocalizedString;
   disclaimerText: Platform.UIString.LocalizedString;
   isTextInputEmpty: boolean;
+  isArtifactsSidebarOpen: boolean;
   uploadImageInputEnabled?: boolean;
   markdownRenderer: MarkdownLitRenderer;
   additionalFloatyContext: UI.Floaty.FloatyContextSelection[];
@@ -1471,7 +1472,7 @@ function renderChatInput({
 }
 
 function renderFloatyExtraContext(contexts: UI.Floaty.FloatyContextSelection[]): Lit.LitTemplate {
-  if (!Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
+  if (!GreenDev.Prototypes.instance().isEnabled('inDevToolsFloaty')) {
     return Lit.nothing;
   }
 

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

@@ -16,7 +16,7 @@ export interface CollapsibleAssistanceContentWidgetData {
 
 export class CollapsibleAssistanceContentWidget extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
-  #isCollapsed = true;
+  #isCollapsed = false;
   #headerText = 'Details';
 
   set data(data: CollapsibleAssistanceContentWidgetData) {
@@ -42,16 +42,15 @@ export class CollapsibleAssistanceContentWidget extends HTMLElement {
           event.preventDefault();
           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',
+            iconName: this.#isCollapsed ? 'triangle-right' : 'triangle-down',
+            color: 'var(--sys-color-on-surface)',
+            width: '14px',
+            height: '14px',
             } as Buttons.Button.ButtonData}
-          >
-          </devtools-button>
-          ${this.#headerText}
+          ></devtools-button>
         </summary>
         <div class="content">
           <slot></slot>

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

@@ -11,8 +11,8 @@ const {html} = Lit;
 
 export interface PerformanceAgentFlameChartData {
   parsedTrace: Trace.TraceModel.ParsedTrace|null;
-  start: number;
-  end: number;
+  start: Trace.Types.Timing.Micro;
+  end: Trace.Types.Timing.Micro;
 }
 
 export class PerformanceAgentFlameChart extends HTMLElement implements PerfUI.FlameChart.FlameChartDelegate {
@@ -30,6 +30,8 @@ export class PerformanceAgentFlameChart extends HTMLElement implements PerfUI.Fl
     this.#flameChart = new PerfUI.FlameChart.FlameChart(this.#dataProvider, this);
     this.#flameChart.markAsRoot();
     this.#flameChart.show(this.#flameChartContainer);
+    const observer = new ResizeObserver(this.#onResize.bind(this));
+    observer.observe(this.#flameChartContainer);
   }
 
   set data(data: PerformanceAgentFlameChartData) {
@@ -59,15 +61,20 @@ export class PerformanceAgentFlameChart extends HTMLElement implements PerfUI.Fl
     }
 
     const bounds = Trace.Helpers.Timing.traceWindowMicroSecondsToMilliSeconds({
-      min: Trace.Types.Timing.Micro(start),
-      max: Trace.Types.Timing.Micro(end),
+      min: start,
+      max: end,
       range: Trace.Types.Timing.Micro(end - start),
     });
     this.#flameChart.setWindowTimes(bounds.min, bounds.max);
-    this.#flameChart.setSize(600, 200);
+    this.#flameChart.setSize(600, 300);
     this.#render();
   }
 
+  #onResize(entries: ResizeObserverEntry[]): void {
+    const container = entries[0];
+    this.#flameChart.setSize(container.contentRect.width, 600);
+  }
+
   #render(): void {
     if (!this.#parsedTrace) {
       return;
@@ -80,8 +87,8 @@ export class PerformanceAgentFlameChart extends HTMLElement implements PerfUI.Fl
 
           .container {
             display: flex;
-            width: 600px;
-            height: 200px;
+            width: 100%;
+            height: 300px;
           }
 
           .flex-auto {
@@ -100,7 +107,7 @@ export class PerformanceAgentFlameChart extends HTMLElement implements PerfUI.Fl
     Lit.render(output, this.#shadow, {host: this});
 
     this.#flameChart.update();
-    this.#flameChart.setSize(600, 200);
+    this.#flameChart.setSize(600, 300);
   }
   windowChanged(startTime: number, endTime: number, animate: boolean): void {
     this.#flameChart.setWindowTimes(startTime, endTime, animate);

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

@@ -8,9 +8,9 @@ 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 GreenDev from '../../../models/greendev/greendev.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';
@@ -48,17 +48,17 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
     // 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.type === 'html' && GreenDev.Prototypes.instance().isEnabled('inlineWidgets')) {
       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}
+        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>`;
       }
 

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

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+.artifacts-viewer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: 20px;
+  gap: 10px;
+}

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

@@ -6,8 +6,10 @@
 
 :host {
   display: block;
-  border: 1px solid var(--sys-color-outline);
-  border-radius: 8px;
+  flex-shrink: 0;
+  width: 100%;
+  border: 2px solid var(--sys-color-neutral-container);
+  border-radius: 12px;
   margin-bottom: 12px;
   overflow: hidden;
   background-color: var(--sys-color-cdt-base-container);
@@ -19,14 +21,11 @@
   user-select: none;
   display: flex;
   align-items: center;
+  background-color: var(--sys-color-surface3);
   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;