chrome-devtools-frontend 1.0.1550444 → 1.0.1553956

package/front_end/models/stack_trace/StackTraceModel.ts

@@ -37,25 +37,12 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
 
   async createFromProtocolRuntime(stackTrace: Protocol.Runtime.StackTrace, rawFramesToUIFrames: TranslateRawFrames):
       Promise<StackTrace.StackTrace.StackTrace> {
-    const translatePromises: Array<Promise<unknown>> = [];
-
-    const fragment = this.#createFragment(stackTrace.callFrames);
-    translatePromises.push(this.#translateFragment(fragment, rawFramesToUIFrames));
-
-    const asyncFragments: AsyncFragmentImpl[] = [];
-    const debuggerModel = this.target().model(SDK.DebuggerModel.DebuggerModel);
-    if (debuggerModel) {
-      for await (const {stackTrace: asyncStackTrace, target} of debuggerModel.iterateAsyncParents(stackTrace)) {
-        const model = StackTraceModel.#modelForTarget(target);
-        const asyncFragment = model.#createFragment(asyncStackTrace.callFrames);
-        translatePromises.push(model.#translateFragment(asyncFragment, rawFramesToUIFrames));
-        asyncFragments.push(new AsyncFragmentImpl(asyncStackTrace.description ?? '', asyncFragment));
-      }
-    }
+    const [syncFragment, asyncFragments] = await Promise.all([
+      this.#createSyncFragment(stackTrace, rawFramesToUIFrames),
+      this.#createAsyncFragments(stackTrace, rawFramesToUIFrames),
+    ]);
 
-    await Promise.all(translatePromises);
-
-    return new StackTraceImpl(fragment, asyncFragments);
+    return new StackTraceImpl(syncFragment, asyncFragments);
   }
 
   /** Trigger re-translation of all fragments with the provide script in their call stack */
@@ -81,6 +68,38 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
     }
   }
 
+  async #createSyncFragment(stackTrace: Protocol.Runtime.StackTrace, rawFramesToUIFrames: TranslateRawFrames):
+      Promise<FragmentImpl> {
+    const fragment = this.#createFragment(stackTrace.callFrames);
+    await this.#translateFragment(fragment, rawFramesToUIFrames);
+    return fragment;
+  }
+
+  async #createAsyncFragments(
+      stackTraceOrPausedEvent: Protocol.Runtime.StackTrace|Protocol.Debugger.PausedEvent,
+      rawFramesToUIFrames: TranslateRawFrames): Promise<AsyncFragmentImpl[]> {
+    const asyncFragments: AsyncFragmentImpl[] = [];
+    const translatePromises: Array<Promise<unknown>> = [];
+
+    const debuggerModel = this.target().model(SDK.DebuggerModel.DebuggerModel);
+    if (debuggerModel) {
+      for await (
+          const {stackTrace: asyncStackTrace, target} of debuggerModel.iterateAsyncParents(stackTraceOrPausedEvent)) {
+        if (asyncStackTrace.callFrames.length === 0) {
+          // Skip empty async fragments, they don't add value.
+          continue;
+        }
+        const model = StackTraceModel.#modelForTarget(target);
+        const fragment = model.#createFragment(asyncStackTrace.callFrames);
+        translatePromises.push(model.#translateFragment(fragment, rawFramesToUIFrames));
+        asyncFragments.push(new AsyncFragmentImpl(asyncStackTrace.description ?? '', fragment));
+      }
+    }
+
+    await Promise.all(translatePromises);
+    return asyncFragments;
+  }
+
   #createFragment(frames: RawFrame[]): FragmentImpl {
     return FragmentImpl.getOrCreate(this.#trie.insert(frames));
   }

package/front_end/models/trace/Processor.ts

@@ -376,10 +376,10 @@ export class TraceProcessor extends EventTarget {
     const observedClsScore = Insights.Common.evaluateCLSMetricScore(observedCls);
 
     const insightToSortingRank = new Map<string, number>();
-    for (const [name, model] of Object.entries(insightSet.model)) {
-      const lcp = model.metricSavings?.LCP ?? 0;
-      const inp = model.metricSavings?.INP ?? 0;
-      const cls = model.metricSavings?.CLS ?? 0;
+    for (const [name, insight] of Object.entries(insightSet.model)) {
+      const lcp = insight.metricSavings?.LCP ?? 0;
+      const inp = insight.metricSavings?.INP ?? 0;
+      const cls = insight.metricSavings?.CLS ?? 0;
 
       const lcpPostSavings =
           observedLcp !== undefined ? Math.max(0, observedLcp - lcp) as Types.Timing.Milli : undefined;
@@ -445,13 +445,13 @@ export class TraceProcessor extends EventTarget {
       urlString = data.Meta.finalDisplayUrlByNavigationId.get('') ?? data.Meta.mainFrameURL;
     }
 
-    const insightSetModel = {} as Insights.Types.InsightSet['model'];
+    const insightSetModel = {} as Insights.Types.InsightModels;
+    const insightSetModelErrors: Insights.Types.InsightModelErrors = {};
 
     for (const [name, insight] of Object.entries(TraceProcessor.getInsightRunners())) {
-      let model: Insights.Types.InsightModel|Error;
       try {
         logger?.start(`insights:${name}`);
-        model = insight.generateInsight(data, context);
+        const model = insight.generateInsight(data, context);
         model.frameId = context.frameId;
         const navId = context.navigation?.args.data?.navigationId;
         if (navId) {
@@ -461,12 +461,12 @@ export class TraceProcessor extends EventTarget {
           // @ts-expect-error: model is a union of all possible insight model types.
           return insight.createOverlays(model);
         };
+        Object.assign(insightSetModel, {[name]: model});
       } catch (err) {
-        model = err;
+        Object.assign(insightSetModelErrors, {[name]: err});
       } finally {
         logger?.end(`insights:${name}`);
       }
-      Object.assign(insightSetModel, {[name]: model});
     }
 
     // We may choose to exclude the insightSet if it's trivial. Trivial means:
@@ -477,13 +477,11 @@ export class TraceProcessor extends EventTarget {
     // Generally, these cases are the short time ranges before a page reload starts.
     const isNavigation = id === Types.Events.NO_NAVIGATION;
     const trivialThreshold = Helpers.Timing.milliToMicro(Types.Timing.Milli(5000));
-    const everyInsightPasses = Object.values(insightSetModel)
-                                   .filter(model => !(model instanceof Error))
-                                   .every(model => model.state === 'pass');
+    const everyInsightPasses = Object.values(insightSetModel).every(model => model && model.state === 'pass');
 
-    const noLcp = !insightSetModel.LCPBreakdown.lcpEvent;
-    const noInp = !insightSetModel.INPBreakdown.longestInteractionEvent;
-    const noLayoutShifts = insightSetModel.CLSCulprits.shifts?.size === 0;
+    const noLcp = !insightSetModel.LCPBreakdown?.lcpEvent;
+    const noInp = !insightSetModel.INPBreakdown?.longestInteractionEvent;
+    const noLayoutShifts = insightSetModel.CLSCulprits?.shifts?.size === 0;
     const shouldExclude = isNavigation && context.bounds.range < trivialThreshold && everyInsightPasses && noLcp &&
         noInp && noLayoutShifts;
     if (shouldExclude) {
@@ -506,6 +504,7 @@ export class TraceProcessor extends EventTarget {
       frameId: context.frameId,
       bounds: context.bounds,
       model: insightSetModel,
+      modelErrors: insightSetModelErrors,
     };
     this.#insights.set(insightSet.id, insightSet);
     this.sortInsightSet(insightSet, context.options.metadata ?? null);

package/front_end/models/trace/insights/Common.ts

@@ -22,14 +22,8 @@ import {
 const GRAPH_SAVINGS_PRECISION = 50;
 
 export function getInsight<InsightName extends keyof InsightModels>(
-    insightName: InsightName, insightSet: InsightSet): InsightModels[InsightName]|null {
-  const insight = insightSet.model[insightName];
-  if (insight instanceof Error) {
-    return null;
-  }
-
-  // For some reason typescript won't narrow the type by removing Error, so do it manually.
-  return insight;
+    insightName: InsightName, insightSet: InsightSet): InsightModels[InsightName] {
+  return insightSet.model[insightName];
 }
 
 export function getLCP(insightSet: InsightSet):

package/front_end/models/trace/insights/types.ts

@@ -116,15 +116,25 @@ export interface InsightSet {
   url: URL;
   frameId: string;
   bounds: Types.Timing.TraceWindowMicro;
+  /** Contains results for all non-errored insights. */
   model: InsightModels;
+  /** Contains errors for all insights that had an internal error. */
+  modelErrors: InsightModelErrors;
   navigation?: Types.Events.NavigationStart;
 }
 
 /**
- * Contains insights for a specific insight set.
+ * Contains insights for a specific insight set. If missing, it error'd.
  */
 export type InsightModels = {
-  [I in keyof InsightModelsType]: ReturnType<InsightModelsType[I]['generateInsight']>;
+  [I in keyof InsightModelsType]?: ReturnType<InsightModelsType[I]['generateInsight']>;
+};
+
+/**
+ * Contains an internal error for each insight in a specific insight set.
+ */
+export type InsightModelErrors = {
+  [I in keyof InsightModelsType]?: Error;
 };
 
 /**

package/front_end/models/trace/types/TraceEvents.ts

@@ -85,6 +85,9 @@ export interface Event {
   tdur?: Micro;
   dur?: Micro;
 }
+export function objectIsEvent(obj: object): obj is Event {
+  return 'cat' in obj && 'name' in obj && 'ts' in obj;
+}
 
 export interface Args {
   data?: ArgsData;
@@ -954,7 +957,7 @@ export interface TraceImpactedNode {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
-type LayoutShiftData = ArgsData&{
+export type LayoutShiftData = ArgsData&{
   // These keys come from the trace data, so we have to use underscores.
   /* eslint-disable @typescript-eslint/naming-convention */
   cumulative_score: number,

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../ui/legacy/legacy.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -15,6 +15,7 @@ import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js'
 import * as Badges from '../../models/badges/badges.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
@@ -276,7 +277,7 @@ function getMarkdownRenderer(
     if (!context.external) {
       const focus = context.getItem();
       return new PerformanceAgentMarkdownRenderer(
-          focus.parsedTrace.data.Meta.mainFrameId, focus.lookupEvent.bind(focus));
+          focus.parsedTrace.data.Meta.mainFrameId, focus.lookupEvent.bind(focus), focus.parsedTrace);
     }
   } else if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE) {
     // Handle historical conversations (can't linkify anything).
@@ -364,12 +365,12 @@ function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
            : Lit.nothing}
       </devtools-toolbar>
       <devtools-toolbar class="freestyler-right-toolbar" role="presentation">
-        <x-link
-          class="toolbar-feedback-link devtools-link"
+        <devtools-link
+          class="toolbar-feedback-link"
           title=${i18nString(UIStrings.sendFeedback)}
           href=${AI_ASSISTANCE_SEND_FEEDBACK}
-          jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('freestyler.send-feedback')}
-        >${i18nString(UIStrings.sendFeedback)}</x-link>
+          jslogcontext=${'freestyler.send-feedback'}
+        >${i18nString(UIStrings.sendFeedback)}</devtools-link>
         <div class="toolbar-divider"></div>
         <devtools-button
           title=${i18nString(UIStrings.help)}
@@ -505,6 +506,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #isTextInputEmpty = true;
   #timelinePanelInstance: TimelinePanel.TimelinePanel.TimelinePanel|null = null;
   #runAbortController = new AbortController();
+  #additionalContextItemsFromFloaty: UI.Floaty.FloatyContextSelection[] = [];
 
   constructor(private view: View = defaultView, {aidaClient, aidaAvailability, syncInfo}: {
     aidaClient: Host.AidaClient.AidaClient,
@@ -549,6 +551,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return {
         state: ViewState.CHAT_VIEW,
         props: {
+          additionalFloatyContext: this.#additionalContextItemsFromFloaty,
           blockedByCrossOrigin: this.#blockedByCrossOrigin,
           isLoading: this.#isLoading,
           messages: this.#messages,
@@ -649,6 +652,15 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
   }
 
+  #bindFloatyListener(): void {
+    const additionalContexts = UI.Context.Context.instance().flavor(UI.Floaty.FloatyFlavor);
+    if (!additionalContexts) {
+      return;
+    }
+    this.#additionalContextItemsFromFloaty = additionalContexts.selectedContexts;
+    this.requestUpdate();
+  }
+
   #getDefaultConversationType(): AiAssistanceModel.AiHistoryStorage.ConversationType|undefined {
     const {hostConfig} = Root.Runtime;
     const viewManager = UI.ViewManager.ViewManager.instance();
@@ -765,6 +777,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#selectDefaultAgentIfNeeded();
 
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistancePanelOpened);
+
+    if (Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
+      UI.Context.Context.instance().addFlavorChangeListener(UI.Floaty.FloatyFlavor, this.#bindFloatyListener, this);
+      this.#bindFloatyListener();
+    }
   }
 
   override willHide(): void {
@@ -1236,6 +1253,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #handleNewChatRequest(): void {
     this.#updateConversationState();
     UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.newChatCreated));
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      Annotations.AnnotationRepository.instance().deleteAllAnnotations();
+    }
   }
 
   async #handleTakeScreenshot(): Promise<void> {
@@ -1409,6 +1430,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             text, {
               signal,
               selected: context,
+              extraContext: this.#additionalContextItemsFromFloaty,
             },
             multimodalInput),
     );

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
+import type * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as AiAssistance from './ai_assistance.js';
@@ -29,11 +29,6 @@ const UIStrings = {
    * the settings tab.
    */
   enableAiAssistance: 'Enable AI assistance',
-  /**
-   * @description Text of a tooltip to redirect to the AI assistance panel with
-   * the current element as context
-   */
-  askAi: 'Ask AI',
   /**
    * @description Text of a context menu item to redirect to the AI assistance panel with
    * the current context
@@ -104,21 +99,12 @@ function isAnyFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
       isPerformanceAgentFeatureAvailable(config) || isFileAgentFeatureAvailable(config);
 }
 
-function titleForAiAssistanceActions(): Platform.UIString.LocalizedString {
-  if (Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled ||
-      Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
-    return i18nLazyString(UIStrings.debugWithAi)();
-  }
-  return i18nLazyString(UIStrings.askAi)();
-}
-
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.DRAWER_VIEW,
   id: 'freestyler',
   commandPrompt: i18nLazyString(UIStrings.showAiAssistance),
   title: i18nLazyString(UIStrings.aiAssistance),
   order: 10,
-  featurePromotionId: 'ai-assistance',
   persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
   hasToolbar: false,
   condition: config => isAnyFeatureAvailable(config) && !isPolicyRestricted(config),
@@ -160,7 +146,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: titleForAiAssistanceActions,
+  title: i18nLazyString(UIStrings.debugWithAi),
   configurableBindings: false,
   featurePromotionId: 'ai-assistance',
   async loadActionDelegate() {
@@ -176,7 +162,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: titleForAiAssistanceActions,
+  title: i18nLazyString(UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -192,7 +178,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: titleForAiAssistanceActions,
+  title: i18nLazyString(UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -208,7 +194,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: titleForAiAssistanceActions,
+  title: i18nLazyString(UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -224,7 +210,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: titleForAiAssistanceActions,
+  title: i18nLazyString(UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -240,7 +226,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: titleForAiAssistanceActions,
+  title: i18nLazyString(UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -256,7 +242,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: titleForAiAssistanceActions,
+  title: i18nLazyString(UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -271,7 +257,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: titleForAiAssistanceActions,
+  title: i18nLazyString(UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -5,6 +5,7 @@
 export * from './AiAssistancePanel.js';
 export * from './components/ChatView.js';
 export * from './components/MarkdownRendererWithCodeBlock.js';
+export * from './components/PerformanceAgentFlameChart.js';
 export * from './SelectWorkspaceDialog.js';
 export * as UserActionRow from './components/UserActionRow.js';
 export * as ExploreWidget from './components/ExploreWidget.js';

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

@@ -8,9 +8,11 @@ import '../../../ui/components/spinners/spinners.js';
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.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 Trace from '../../../models/trace/trace.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
 import * as PanelsCommon from '../../../panels/common/common.js';
 import * as PanelUtils from '../../../panels/utils/utils.js';
@@ -265,6 +267,7 @@ export interface Props {
   isTextInputEmpty: boolean;
   uploadImageInputEnabled?: boolean;
   markdownRenderer: MarkdownLitRenderer;
+  additionalFloatyContext: UI.Floaty.FloatyContextSelection[];
 }
 
 export class ChatView extends HTMLElement {
@@ -517,7 +520,8 @@ export class ChatView extends HTMLElement {
         onTakeScreenshot: this.#props.onTakeScreenshot,
         onRemoveImageInput: this.#props.onRemoveImageInput,
         onTextInputChange: this.#props.onTextInputChange,
-        onImageUpload: this.#handleImageUpload
+        onImageUpload: this.#handleImageUpload,
+        additionalFloatyContext: this.#props.additionalFloatyContext,
       });
     };
 
@@ -1347,6 +1351,7 @@ function renderChatInput({
   isTextInputEmpty,
   uploadImageInputEnabled,
   disclaimerText,
+  additionalFloatyContext,
   onContextClick,
   onInspectElementClick,
   onSubmit,
@@ -1365,6 +1370,7 @@ function renderChatInput({
   selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null,
   inspectElementToggled: boolean,
   isTextInputEmpty: boolean,
+  additionalFloatyContext: UI.Floaty.FloatyContextSelection[],
   disclaimerText: string,
   onContextClick: () => void,
   onInspectElementClick: () => void,
@@ -1389,6 +1395,7 @@ function renderChatInput({
 
   // clang-format off
   return html` <form class="input-form" @submit=${onSubmit}>
+  ${renderFloatyExtraContext(additionalFloatyContext)}
     <div class=${chatInputContainerCls}>
       ${renderImageInput({
         multimodalInputEnabled,
@@ -1463,6 +1470,75 @@ function renderChatInput({
   // clang-format on
 }
 
+function renderFloatyExtraContext(contexts: UI.Floaty.FloatyContextSelection[]): Lit.LitTemplate {
+  if (!Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
+    return Lit.nothing;
+  }
+
+  // clang-format off
+  return html`
+  <ul class="floaty">
+    ${contexts.map(c => {
+      function onDelete(e: MouseEvent): void {
+        e.preventDefault();
+        UI.Floaty.onFloatyContextDelete(c);
+      }
+
+      return html`<li>
+        <span class="context-item">
+          ${renderFloatyContext(c)}
+        </span>
+        <devtools-button
+          class="floaty-delete-button"
+          @click=${onDelete}
+          .data=${{
+            variant: Buttons.Button.Variant.ICON,
+            iconName: 'cross',
+            title: 'Delete',
+            size: Buttons.Button.Size.SMALL,
+          } as Buttons.Button.ButtonData}
+        ></devtools-button>
+      </li>`;
+    })}
+    <li class="open-floaty">
+      <devtools-button
+        class="floaty-add-button"
+        @click=${UI.Floaty.onFloatyOpen}
+        .data=${{
+          variant: Buttons.Button.Variant.ICON,
+          iconName: 'select-element',
+          title: 'Open context picker',
+          size: Buttons.Button.Size.SMALL,
+        } as Buttons.Button.ButtonData}
+      ></devtools-button>
+    </li>
+  </ul>
+  `;
+  // clang-format on
+}
+
+function renderFloatyContext(context: UI.Floaty.FloatyContextSelection): Lit.TemplateResult {
+  if (context instanceof SDK.NetworkRequest.NetworkRequest) {
+    return html`${context.url()}`;
+  }
+
+  if (context instanceof SDK.DOMModel.DOMNode) {
+    return html`<devtools-widget .widgetConfig=${
+        UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: context})}>`;
+  }
+
+  if ('insight' in context) {
+    return html`${context.insight.title}`;
+  }
+
+  if ('event' in context && 'traceStartTime' in context) {
+    const time = Trace.Types.Timing.Micro(context.event.ts - context.traceStartTime);
+    return html`${context.event.name} @ ${i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(time)}`;
+  }
+
+  Platform.assertNever(context, 'Unsupported context');
+}
+
 function renderMainContents({
   messages,
   isLoading,

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

@@ -0,0 +1,71 @@
+// 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.
+
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as Lit from '../../../ui/lit/lit.js';
+
+import styles from './collapsibleAssistanceContentWidget.css.js';
+
+const {render, html} = Lit;
+
+export interface CollapsibleAssistanceContentWidgetData {
+  headerText: string;
+}
+
+export class CollapsibleAssistanceContentWidget extends HTMLElement {
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #isCollapsed = true;
+  #headerText = 'Details';
+
+  set data(data: CollapsibleAssistanceContentWidgetData) {
+    this.#headerText = data.headerText;
+    this.#render();
+  }
+
+  connectedCallback(): void {
+    this.#render();
+  }
+
+  #toggleCollapse(): void {
+    this.#isCollapsed = !this.#isCollapsed;
+    this.#render();
+  }
+
+  #render(): void {
+    // clang-format off
+    const output = html`
+      <style>${styles}</style>
+      <details ?open=${!this.#isCollapsed}>
+        <summary class="header" @click=${(event: Event) => {
+          event.preventDefault();
+          this.#toggleCollapse();
+        }}>
+          <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>
+          ${this.#headerText}
+        </summary>
+        <div class="content">
+          <slot></slot>
+        </div>
+      </details>
+    `;
+    render(output, this.#shadow, {host: this});
+  }
+}
+
+customElements.define('devtools-collapsible-assistance-content-widget', CollapsibleAssistanceContentWidget);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-collapsible-assistance-content-widget': CollapsibleAssistanceContentWidget;
+  }
+}