chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/panels/settings/components/syncSection.css

@@ -8,6 +8,7 @@
   break-inside: avoid;
   display: block;
   width: 100%;
+  position: relative;
 }
 
 fieldset {
@@ -55,3 +56,56 @@ img {
 .setting-checkbox {
   display: inline-block;
 }
+
+.gdp-profile-container {
+  padding-bottom: var(--sys-size-4);
+
+  & .divider {
+    left: 0;
+    position: absolute;
+    width: 100%;
+    height: var(--sys-size-1);
+    background: var(--sys-color-divider);
+  }
+
+  & .gdp-profile-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-5);
+    font-family: "Google Sans", system-ui;
+    font-size: var(--sys-typescale-body3-size);
+    height: var(--sys-size-11);
+
+    .gdp-logo {
+      width: 34px;
+      height: fit-content;
+    }
+  }
+
+  & .gdp-profile-sign-up-content {
+    padding-top: var(--sys-size-7);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  & .gdp-profile-details-content {
+    padding-top: var(--sys-size-7);
+    font: var(--sys-typescale-body4-regular);
+
+    & .plan-details {
+      margin-top: var(--sys-size-3);
+      height: 18px;
+      display: flex;
+      align-items: center;
+    }
+
+    & .setting-container {
+      /* `<settigns-checkbox>` already provides 6px margin and we want to get rid of it here */
+      margin: calc(var(--sys-size-3) - 6px) -6px -6px;
+      display: flex;
+      align-items: center;
+      gap: var(--sys-size-2);
+    }
+  }
+}

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -71,6 +71,9 @@ export class AiCodeCompletionPlugin extends Plugin {
     this.#editor.addEventListener('keydown', this.#boundEditorKeyDown);
     this.#aiCodeCompletionSetting.addChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
     this.#onAiCodeCompletionSettingChanged();
+    if (editor.state.doc.length === 0) {
+      this.#addTeaserPluginToCompartmentImmediate(editor.editor);
+    }
   }
 
   override editorExtension(): CodeMirror.Extension {
@@ -91,8 +94,8 @@ export class AiCodeCompletionPlugin extends Plugin {
     if (this.#teaser) {
       if (update.docChanged) {
         update.view.dispatch({effects: this.#teaserCompartment.reconfigure([])});
-        this.#addTeaserPluginToCompartment(update);
-      } else if (update.selectionSet) {
+        this.#addTeaserPluginToCompartment(update.view);
+      } else if (update.selectionSet && update.state.doc.length > 0) {
         update.view.dispatch({effects: this.#teaserCompartment.reconfigure([])});
       }
     } else if (this.#aiCodeCompletion) {
@@ -171,19 +174,24 @@ export class AiCodeCompletionPlugin extends Plugin {
     }
   }
 
-  #addTeaserPluginToCompartment = Common.Debouncer.debounce((update: CodeMirror.ViewUpdate) => {
+  #addTeaserPluginToCompartment = Common.Debouncer.debounce((view: CodeMirror.EditorView) => {
     if (this.#teaserDisplayTimeout) {
       window.clearTimeout(this.#teaserDisplayTimeout);
       this.#teaserDisplayTimeout = undefined;
     }
     this.#teaserDisplayTimeout = window.setTimeout(() => {
-      if (this.#teaser) {
-        update.view.dispatch(
-            {effects: this.#teaserCompartment.reconfigure([aiCodeCompletionTeaserExtension(this.#teaser)])});
-      }
+      this.#addTeaserPluginToCompartmentImmediate(view);
     }, AiCodeCompletion.AiCodeCompletion.DELAY_BEFORE_SHOWING_RESPONSE_MS);
   }, AiCodeCompletion.AiCodeCompletion.AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS);
 
+  #addTeaserPluginToCompartmentImmediate = (view: CodeMirror.EditorView): void => {
+    if (!this.#teaser) {
+      return;
+    }
+
+    view.dispatch({effects: this.#teaserCompartment.reconfigure([aiCodeCompletionTeaserExtension(this.#teaser)])});
+  };
+
   #setupAiCodeCompletion(): void {
     if (!this.#editor) {
       return;
@@ -195,8 +203,8 @@ export class AiCodeCompletionPlugin extends Plugin {
       this.#detachAiCodeCompletionTeaser();
       this.#teaser = undefined;
     }
-    this.#aiCodeCompletion =
-        new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion({aidaClient: this.#aidaClient}, this.#editor);
+    this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
+        {aidaClient: this.#aidaClient}, this.#editor, AiCodeCompletion.AiCodeCompletion.Panel.SOURCES);
     this.#aiCodeCompletion.addEventListener(
         AiCodeCompletion.AiCodeCompletion.Events.REQUEST_TRIGGERED, this.#onAiRequestTriggered, this);
     this.#aiCodeCompletion.addEventListener(
@@ -395,6 +403,15 @@ export function aiCodeCompletionTeaserExtension(teaser: PanelCommon.AiCodeComple
     }
   }, {
     decorations: v => v.decorations,
+    eventHandlers: {
+      mousedown(event: MouseEvent): boolean {
+        // Required for mouse click to propagate to the "Don't show again" span in teaser.
+        if (event.target instanceof Node && teaser.contentElement.contains(event.target)) {
+          return true;
+        }
+        return false;
+      },
+    },
   });
   return teaserPlugin;
 }

package/front_end/panels/sources/CSSPlugin.ts

@@ -10,6 +10,7 @@ import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
@@ -103,7 +104,7 @@ function findColorsAndCurves(
     from: number,
     to: number,
     onColor: (pos: number, parsedColor: Common.Color.Color, text: string) => void,
-    onCurve: (pos: number, curve: UI.Geometry.CubicBezier, text: string) => void,
+    onCurve: (pos: number, curve: Geometry.CubicBezier, text: string) => void,
     ): void {
   let line = state.doc.lineAt(from);
   function getToken(from: number, to: number): string {
@@ -134,7 +135,7 @@ function findColorsAndCurves(
         if (parsedColor) {
           onColor(node.from, parsedColor, content);
         } else {
-          const parsedCurve = UI.Geometry.CubicBezier.parse(content);
+          const parsedCurve = Geometry.CubicBezier.parse(content);
           if (parsedCurve) {
             onCurve(node.from, parsedCurve, content);
           }
@@ -199,7 +200,7 @@ class ColorSwatchWidget extends CodeMirror.WidgetType {
 }
 
 class CurveSwatchWidget extends CodeMirror.WidgetType {
-  constructor(readonly curve: UI.Geometry.CubicBezier, readonly text: string) {
+  constructor(readonly curve: Geometry.CubicBezier, readonly text: string) {
     super();
   }
 
@@ -249,7 +250,7 @@ type ActiveTooltip = {
   type: TooltipType.CURVE,
   pos: number,
   text: string,
-  curve: UI.Geometry.CubicBezier,
+  curve: Geometry.CubicBezier,
   swatch: IconButton.Icon.Icon,
 };
 

package/front_end/panels/timeline/CountersGraph.ts

@@ -588,7 +588,7 @@ export class CounterUI {
   }
 }
 
-export class Calculator implements PerfUI.TimelineGrid.Calculator {
+export class Calculator implements Calculator {
   private minimumBoundaryInternal: number;
   private maximumBoundaryInternal: number;
   private workingArea: number;

package/front_end/panels/timeline/ExtensionTrackAppender.ts

@@ -101,8 +101,8 @@ export class ExtensionTrackAppender implements TrackAppender {
   }
 
   setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
-    info.title = Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.args.tooltipText ?
-        event.args.tooltipText :
+    info.title = Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.devtoolsObj.tooltipText ?
+        event.devtoolsObj.tooltipText :
         this.titleForEvent(event);
     info.formattedTime = getDurationString(event.dur);
   }

package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -5,9 +5,9 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
-import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
@@ -144,7 +144,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
     if (Trace.Types.Events.isSyntheticLayoutShift(event)) {
       // Screenshots are max 500x500 naturally, but on a laptop in dock-to-right, 500px tall usually doesn't fit.
       // In the future, we may investigate a way to dynamically scale this tooltip content per available space.
-      const maxSize = new UI.Geometry.Size(510, 400);
+      const maxSize = new Geometry.Size(510, 400);
       const vizElem = LayoutShiftsTrackAppender.createShiftViz(event, this.#parsedTrace, maxSize);
       if (vizElem) {
         info.additionalElements.push(vizElem);
@@ -227,7 +227,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
 
   static createShiftViz(
       event: Trace.Types.Events.SyntheticLayoutShift, parsedTrace: Trace.Handlers.Types.ParsedTrace,
-      maxSize: UI.Geometry.Size): HTMLElement|undefined {
+      maxSize: Geometry.Size): HTMLElement|undefined {
     const screenshots = event.parsedData.screenshots;
     const {viewportRect, devicePixelRatio: dpr} = parsedTrace.Meta;
     const vizContainer = document.createElement('div');

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -309,11 +309,8 @@ export class TimelineDetailsPane extends
   /**
    * Updates the UI shown in the Summary tab, and updates the UI to select the
    * summary tab.
-   * @param node this is passed as an additional piece of DOM that will be
-   *     rendered in the summary view. This is a temporary ability to allow
-   *     incremental migration to the UI Eng vision.
    */
-  private async updateSummaryAndSelectTab(node: Node|null): Promise<void> {
+  private async updateSummaryPane(): Promise<void> {
     const allTabs = this.tabbedPane.otherTabs(Tab.Details);
     for (let i = 0; i < allTabs.length; ++i) {
       if (!this.rangeDetailViews.has(allTabs[i])) {
@@ -321,7 +318,6 @@ export class TimelineDetailsPane extends
       }
     }
 
-    this.#summaryContent.node = node ?? null;
     this.#summaryContent.requestUpdate();
     await this.#summaryContent.updateComplete;
   }
@@ -365,7 +361,7 @@ export class TimelineDetailsPane extends
    */
   private scheduleUpdateContentsFromWindow(forceImmediateUpdate = false): void {
     if (!this.#parsedTrace) {
-      void this.updateSummaryAndSelectTab(null);
+      void this.updateSummaryPane();
       return;
     }
     if (forceImmediateUpdate) {
@@ -413,11 +409,12 @@ export class TimelineDetailsPane extends
       return;
     }
 
+    this.#summaryContent.selectedRange = null;
     this.#summaryContent.selectedEvent = event;
     this.#summaryContent.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
     this.#summaryContent.linkifier = this.detailsLinkifier;
     this.#summaryContent.target = targetForEvent(this.#parsedTrace, event);
-    await this.updateSummaryAndSelectTab(null);
+    await this.updateSummaryPane();
     this.appendExtraDetailsTabsForTraceEvent(event);
   }
 
@@ -546,12 +543,13 @@ export class TimelineDetailsPane extends
       return;
     }
 
-    const minBoundsMilli = Trace.Helpers.Timing.traceWindowMilliSeconds(this.#parsedTrace.Meta.traceBounds).min;
-    const aggregatedStats = TimelineUIUtils.statsForTimeRange(this.#selectedEvents, startTime, endTime);
-    const startOffset = startTime - minBoundsMilli;
-    const endOffset = endTime - minBoundsMilli;
-    const summaryDetailElem = TimelineUIUtils.generateSummaryDetails(
-        aggregatedStats, startOffset, endOffset, this.#selectedEvents, this.#thirdPartyTree);
+    this.#summaryContent.selectedEvent = null;
+    this.#summaryContent.selectedRange = {
+      events: this.#selectedEvents,
+      thirdPartyTree: this.#thirdPartyTree,
+      startTime,
+      endTime,
+    };
 
     // This is a bit of a hack as we are midway through migrating this to
     // the new UI Eng vision.
@@ -560,7 +558,7 @@ export class TimelineDetailsPane extends
     // (so the 3P Tree View is attached to the DOM) and then we tell it to
     // update.
     // This will be fixed once we migrate this component fully to the new vision (b/407751379)
-    void this.updateSummaryAndSelectTab(summaryDetailElem).then(() => {
+    void this.updateSummaryPane().then(() => {
       this.#thirdPartyTree.updateContents(this.selection || selectionFromRangeMilliSeconds(startTime, endTime));
     });
 
@@ -592,15 +590,14 @@ export enum Tab {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
+interface SelectedRange {
+  startTime: Trace.Types.Timing.Milli;
+  endTime: Trace.Types.Timing.Milli;
+  events: Trace.Types.Events.Event[];
+  thirdPartyTree: ThirdPartyTreeViewWidget;
+}
+
 interface SummaryViewInput {
-  // This is a helper to allow an incremental migration to the new UI Eng vision.
-  // Currently, this is used in two scenarios:
-  // 1. When the user selects a TimelineFrame (screenshot).
-  // 2. When no trace event is selected, and the user is looking at a range.
-  // Both of these scenarios need to be updated to use the new UI Eng Vision,
-  // and then we can remove the ability for this UI to take an arbitrary DOM
-  // Node to render.
-  node: Node|null;
   selectedEvent: Trace.Types.Events.Event|null;
   eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null;
   parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
@@ -609,6 +606,7 @@ interface SummaryViewInput {
   target: SDK.Target.Target|null;
   linkifier: Components.Linkifier.Linkifier|null;
   filmStrip: Trace.Extras.FilmStrip.Data|null;
+  selectedRange: SelectedRange|null;
 }
 
 type View = (input: SummaryViewInput, output: object, target: HTMLElement) => void;
@@ -617,8 +615,8 @@ const SUMMARY_DEFAULT_VIEW: View = (input, _output, target) => {
   render(
       html`
         <style>${detailsViewStyles}</style>
-        ${input.node ?? nothing}
         ${Directives.until(renderSelectedEventDetails(input))}
+        ${input.selectedRange ? generateRangeSummaryDetails(input) : nothing}
         <devtools-widget data-related-insight-chips .widgetConfig=${
           UI.Widget.widgetConfig(TimelineComponents.RelatedInsightChips.RelatedInsightChips, {
             activeEvent: input.selectedEvent,
@@ -631,7 +629,6 @@ const SUMMARY_DEFAULT_VIEW: View = (input, _output, target) => {
 
 class SummaryView extends UI.Widget.Widget {
   #view: View;
-  node: Node|null = null;
   selectedEvent: Trace.Types.Events.Event|null = null;
   eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
   parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
@@ -640,6 +637,7 @@ class SummaryView extends UI.Widget.Widget {
   target: SDK.Target.Target|null = null;
   linkifier: Components.Linkifier.Linkifier|null = null;
   filmStrip: Trace.Extras.FilmStrip.Data|null = null;
+  selectedRange: SelectedRange|null = null;
 
   constructor(element?: HTMLElement, view = SUMMARY_DEFAULT_VIEW) {
     super(element);
@@ -649,7 +647,6 @@ class SummaryView extends UI.Widget.Widget {
   override performUpdate(): void {
     this.#view(
         {
-          node: this.node,
           selectedEvent: this.selectedEvent,
           eventToRelatedInsightsMap: this.eventToRelatedInsightsMap,
           parsedTrace: this.parsedTrace,
@@ -657,12 +654,30 @@ class SummaryView extends UI.Widget.Widget {
           entityMapper: this.entityMapper,
           target: this.target,
           linkifier: this.linkifier,
-          filmStrip: this.filmStrip
+          filmStrip: this.filmStrip,
+          selectedRange: this.selectedRange,
         },
         {}, this.contentElement);
   }
 }
 
+function generateRangeSummaryDetails(input: SummaryViewInput): LitTemplate {
+  const {parsedTrace, selectedRange} = input;
+
+  if (!selectedRange || !parsedTrace) {
+    return nothing;
+  }
+
+  const minBoundsMilli = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.min);
+  const {events, startTime, endTime, thirdPartyTree} = selectedRange;
+  const aggregatedStats = TimelineUIUtils.statsForTimeRange(events, startTime, endTime);
+  const startOffset = startTime - minBoundsMilli;
+  const endOffset = endTime - minBoundsMilli;
+  const summaryDetailElem =
+      TimelineUIUtils.generateSummaryDetails(aggregatedStats, startOffset, endOffset, events, thirdPartyTree);
+  return html`${summaryDetailElem}`;
+}
+
 async function renderSelectedEventDetails(
     input: SummaryViewInput,
     ): Promise<LitTemplate> {

package/front_end/panels/timeline/TimelinePaintProfilerView.ts

@@ -5,6 +5,7 @@
 
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as LayerViewer from '../layer_viewer/layer_viewer.js';
@@ -257,7 +258,7 @@ export class TimelinePaintImageView extends UI.Widget.Widget {
                      .translate(clientWidth / 2, clientHeight / 2)
                      .scale(scale, scale)
                      .translate(-width / 2, -height / 2);
-    const bounds = UI.Geometry.boundsForTransformedPoints(matrix, [0, 0, 0, width, height, 0]);
+    const bounds = Geometry.boundsForTransformedPoints(matrix, [0, 0, 0, width, height, 0]);
     this.transformController.clampOffsets(
         paddingX - bounds.maxX, clientWidth - paddingX - bounds.minX, paddingY - bounds.maxY,
         clientHeight - paddingY - bounds.minY);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -392,6 +392,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private traceLoadStart!: Trace.Types.Timing.Milli|null;
 
   #traceEngineModel: Trace.TraceModel.Model;
+  #externalAIConversationData: AiAssistanceModel.ExternalPerformanceAIConversationData|null = null;
   #sourceMapsResolver: Utils.SourceMapsResolver.SourceMapsResolver|null = null;
   #entityMapper: Utils.EntityMapper.EntityMapper|null = null;
   #onSourceMapsNodeNamesResolvedBound = this.#onSourceMapsNodeNamesResolved.bind(this);
@@ -929,6 +930,40 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return this.#traceEngineModel;
   }
 
+  getOrCreateExternalAIConversationData(): AiAssistanceModel.ExternalPerformanceAIConversationData {
+    if (!this.#externalAIConversationData) {
+      const conversationHandler = AiAssistanceModel.ConversationHandler.instance();
+      const focus = Utils.AIContext.getPerformanceAgentFocusFromModel(this.model);
+      if (!focus) {
+        throw new Error('could not create performance agent focus');
+      }
+
+      const agent = conversationHandler.createAgent(AiAssistanceModel.ConversationType.PERFORMANCE_FULL);
+      const conversation = new AiAssistanceModel.Conversation(
+          AiAssistanceModel.ConversationType.PERFORMANCE_FULL,
+          [],
+          agent.id,
+          /* isReadOnly */ true,
+          /* isExternal */ true,
+      );
+
+      const selected = new AiAssistanceModel.PerformanceTraceContext(focus);
+
+      this.#externalAIConversationData = {
+        conversationHandler,
+        conversation,
+        agent,
+        selected,
+      };
+    }
+
+    return this.#externalAIConversationData;
+  }
+
+  invalidateExternalAIConversationData(): void {
+    this.#externalAIConversationData = null;
+  }
+
   /**
    * NOTE: this method only exists to enable some layout tests to be migrated to the new engine.
    * DO NOT use this method within DevTools. It is marked as deprecated so
@@ -1026,19 +1061,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return true;
   }
 
-  private shouldEnableFullAskAI(): boolean {
-    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ASK_AI_FULL_BUTTON)) {
-      return false;
-    }
-
-    if (Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
-        Root.Runtime.GenAiEnterprisePolicyValue.DISABLE) {
-      return false;
-    }
-
-    return true;
-  }
-
   private populateToolbar(): void {
     const canRecord = this.canRecord();
 
@@ -1087,13 +1109,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       }
     }
 
-    if (this.shouldEnableFullAskAI()) {
-      this.askAiButton = new UI.Toolbar.ToolbarButton('Ask AI', 'button-magic', undefined, 'timeline.ask-ai');
-      this.askAiButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#onClickAskAIButton.bind(this));
-      this.panelToolbar.appendToolbarItem(this.askAiButton);
-      this.panelToolbar.appendSeparator();
-    }
-
     // TODO(crbug.com/337909145): need to hide "Live metrics" option if !canRecord.
     this.panelToolbar.appendToolbarItem(this.#historyManager.button());
 
@@ -1140,43 +1155,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
   }
 
-  // Currently for debugging purposes only.
-  #onClickAskAIButton(): void {
-    const traceIndex = this.#activeTraceIndex();
-    if (traceIndex === null) {
-      return;
-    }
-
-    const parsedTrace = this.#traceEngineModel.parsedTrace(traceIndex);
-    if (parsedTrace === null) {
-      return;
-    }
-
-    const insights = this.#traceEngineModel.traceInsights(traceIndex);
-    if (insights === null) {
-      return;
-    }
-
-    const traceMetadata = this.#traceEngineModel.metadata(traceIndex);
-    if (traceMetadata === null) {
-      return;
-    }
-
-    const actionId = 'drjones.performance-panel-full-context';
-    if (!UI.ActionRegistry.ActionRegistry.instance().hasAction(actionId)) {
-      return;
-    }
-
-    // Currently only support a single insight set.
-    const insightSet = [...insights.values()].at(0) ?? null;
-    const context = Utils.AIContext.AgentFocus.full(parsedTrace, insightSet, traceMetadata);
-    UI.Context.Context.instance().setFlavor(Utils.AIContext.AgentFocus, context);
-
-    // Trigger the AI Assistance panel to open.
-    const action = UI.ActionRegistry.ActionRegistry.instance().getAction(actionId);
-    void action.execute();
-  }
-
   #setupNavigationSetting(): HTMLElement {
     const currentNavSetting = Common.Settings.moduleSetting('flamechart-selected-navigation').get();
     const hideTheDialogForTests: string|null = localStorage.getItem('hide-shortcuts-dialog-for-test');
@@ -1660,7 +1638,12 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       hostWindow.removeEventListener('message', onMessageHandler);
     }
     hostWindow.addEventListener('message', onMessageHandler);
-    rehydratingWindow = hostWindow.open(pathToLaunch, /* target: */ undefined, 'noopener=false,popup=true');
+
+    if (this.isDocked()) {
+      rehydratingWindow = hostWindow.open(pathToLaunch, /* target: */ '_blank', 'noopener=false,popup=false');
+    } else {
+      rehydratingWindow = hostWindow.open(pathToLaunch, /* target: */ undefined, 'noopener=false,popup=true');
+    }
   }
 
   async loadFromURL(url: Platform.DevToolsPath.UrlString): Promise<void> {
@@ -1671,6 +1654,10 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.loader = await TimelineLoader.loadFromURL(url, this);
   }
 
+  private isDocked(): boolean {
+    return UI.DockController.DockController.instance().dockSide() !== UI.DockController.DockState.UNDOCKED;
+  }
+
   private updateMiniMap(): void {
     if (this.#viewMode.mode !== 'VIEWING_TRACE') {
       this.#minimapComponent.setData(null);
@@ -3002,6 +2989,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       type: AiAssistanceModel.ExternalRequestResponseType.NOTIFICATION,
       message: 'Recording performance trace',
     };
+    TimelinePanel.instance().invalidateExternalAIConversationData();
     void VisualLogging.logFunctionCall('timeline.record-reload', 'external');
     Snackbars.Snackbar.Snackbar.show({message: i18nString(UIStrings.externalRequestReceived)});
 
@@ -3051,7 +3039,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       for (const modelName in insightsForNav.model) {
         const model = modelName as keyof Trace.Insights.Types.InsightModelsType;
         const insight = insightsForNav.model[model];
-        const formatter = new AiAssistanceModel.PerformanceInsightFormatter(parsedTrace, insight);
+        const formatter = new AiAssistanceModel.PerformanceInsightFormatter(
+            AiAssistanceModel.PERF_AGENT_UNIT_FORMATTERS, parsedTrace, insight);
         if (!formatter.insightIsSupported()) {
           // Not all Insights are integrated with "Ask AI" yet, let's avoid
           // filling up the response with those ones because there will be no
@@ -3098,6 +3087,16 @@ ${responseTextForPassedInsights}`;
       panelInstance.recordReload();
     });
   }
+
+  static async handleExternalAnalyzeRequest(prompt: string):
+      Promise<AsyncGenerator<AiAssistanceModel.ExternalRequestResponse, AiAssistanceModel.ExternalRequestResponse>> {
+    const data = TimelinePanel.instance().getOrCreateExternalAIConversationData();
+    return await data.conversationHandler.handleExternalRequest({
+      conversationType: AiAssistanceModel.ConversationType.PERFORMANCE_FULL,
+      prompt,
+      data,
+    });
+  }
 }
 
 export const enum State {