chrome-devtools-frontend 1.0.1555430 → 1.0.1558690

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

@@ -4,7 +4,12 @@
  * found in the LICENSE file.
  */
 
-:host {
+.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;