chrome-devtools-frontend 1.0.1526630 → 1.0.1528866

package/front_end/panels/timeline/TimelinePaintProfilerView.ts

@@ -8,11 +8,15 @@ 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 Lit from '../../ui/lit/lit.js';
 import * as LayerViewer from '../layer_viewer/layer_viewer.js';
 
 import timelinePaintProfilerStyles from './timelinePaintProfiler.css.js';
 import {TracingFrameLayerTree} from './TracingLayerTree.js';
 
+const {html, render} = Lit;
+const {createRef, ref} = Lit.Directives;
+
 export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
   private readonly logAndImageSplitWidget: UI.SplitWidget.SplitWidget;
   private readonly imageView: TimelinePaintImageView;
@@ -27,14 +31,12 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
 
   constructor(parsedTrace: Trace.TraceModel.ParsedTrace) {
     super(false, false);
-    this.element.classList.add('timeline-paint-profiler-view');
     this.setSidebarSize(60);
     this.setResizable(false);
 
     this.#parsedTrace = parsedTrace;
 
-    this.logAndImageSplitWidget = new UI.SplitWidget.SplitWidget(true, false);
-    this.logAndImageSplitWidget.element.classList.add('timeline-paint-profiler-log-split');
+    this.logAndImageSplitWidget = new UI.SplitWidget.SplitWidget(true, false, 'timeline-paint-profiler-log-split');
     this.setMainWidget(this.logAndImageSplitWidget);
     this.imageView = new TimelinePaintImageView();
     this.logAndImageSplitWidget.setMainWidget(this.imageView);
@@ -204,53 +206,112 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
   }
 }
 
+export interface TimelinePaintImageViewInput {
+  maskElementHidden: boolean;
+  imageContainerHidden: boolean;
+  imageURL: string;
+  imageContainerWebKitTransform: string;
+  maskElementStyle: {
+    width?: string,
+    height?: string,
+    borderLeftWidth?: string,
+    borderTopWidth?: string,
+    borderRightWidth?: string,
+    borderBottomWidth?: string,
+  };
+}
+
+export const DEFAULT_VIEW = (input: TimelinePaintImageViewInput, output: undefined, target: HTMLElement): {
+  imageElementNaturalHeight: number,
+  imageElementNaturalWidth: number,
+} => {
+  const imageElementRef = createRef<HTMLImageElement>();
+  // clang-format off
+  render(html`
+  <div class="paint-profiler-image-view fill">
+    <div class="paint-profiler-image-container" style="-webkit-transform: ${input.imageContainerWebKitTransform}">
+      <img src=${input.imageURL} display=${input.imageContainerHidden ? 'none' : 'block'} ${ref(imageElementRef)}>
+      <div style=${Lit.Directives.styleMap({
+        display: input.maskElementHidden ? 'none' : 'block',
+        ...input.maskElementStyle,})}>
+      </div>
+    </div>
+  </div>`,
+ target);
+  // clang-format on
+
+  // The elements are guaranteed to exist after render completes
+  // because they are not conditionally rendered within the template.
+  const imageElement = imageElementRef.value;
+
+  if (!imageElement?.naturalHeight || !imageElement.naturalWidth) {
+    throw new Error('ImageElement were not found in the TimelinePaintImageView.');
+  }
+
+  return {imageElementNaturalHeight: imageElement.naturalHeight, imageElementNaturalWidth: imageElement.naturalWidth};
+};
 export class TimelinePaintImageView extends UI.Widget.Widget {
-  private imageContainer: HTMLElement;
-  private imageElement: HTMLImageElement;
-  private readonly maskElement: HTMLElement;
   private transformController: LayerViewer.TransformController.TransformController;
   private maskRectangle?: Protocol.DOM.Rect|null;
-  constructor() {
-    super({useShadowDom: true});
-    this.registerRequiredCSS(timelinePaintProfilerStyles);
 
-    this.contentElement.classList.add('fill', 'paint-profiler-image-view');
-    this.imageContainer = this.contentElement.createChild('div', 'paint-profiler-image-container');
-    this.imageElement = this.imageContainer.createChild('img');
-    this.maskElement = this.imageContainer.createChild('div');
-    this.imageElement.addEventListener('load', this.updateImagePosition.bind(this), false);
+  #inputData: TimelinePaintImageViewInput = {
+    maskElementHidden: true,
+    imageContainerHidden: true,
+    imageURL: '',
+    imageContainerWebKitTransform: '',
+    maskElementStyle: {},
+  };
+
+  #view: typeof DEFAULT_VIEW;
+  #imageElementDimensions?: {
+    naturalHeight: number,
+    naturalWidth: number,
+  };
+
+  constructor(view = DEFAULT_VIEW) {
+    super();
+    this.registerRequiredCSS(timelinePaintProfilerStyles);
+    this.#view = view;
     this.transformController = new LayerViewer.TransformController.TransformController((this.contentElement), true);
     this.transformController.addEventListener(
         LayerViewer.TransformController.Events.TRANSFORM_CHANGED, this.updateImagePosition, this);
   }
 
   override onResize(): void {
-    if (this.imageElement.src) {
-      this.updateImagePosition();
-    }
+    this.requestUpdate();
+    this.updateImagePosition();
   }
 
   private updateImagePosition(): void {
-    const width = this.imageElement.naturalWidth;
-    const height = this.imageElement.naturalHeight;
+    if (!this.#imageElementDimensions) {
+      return;
+    }
+
+    const width = this.#imageElementDimensions.naturalWidth;
+    const height = this.#imageElementDimensions.naturalHeight;
     const clientWidth = this.contentElement.clientWidth;
     const clientHeight = this.contentElement.clientHeight;
 
     const paddingFraction = 0.1;
     const paddingX = clientWidth * paddingFraction;
-    const paddingY = clientHeight * paddingFraction;
-    const scaleX = (clientWidth - paddingX) / width;
-    const scaleY = (clientHeight - paddingY) / height;
-    const scale = Math.min(scaleX, scaleY);
+    const scale = clientHeight / height;
 
+    const oldMaskStyle = JSON.stringify(this.#inputData.maskElementStyle);
+    let newMaskStyle = {};
     if (this.maskRectangle) {
-      const style = this.maskElement.style;
-      style.width = width + 'px';
-      style.height = height + 'px';
-      style.borderLeftWidth = this.maskRectangle.x + 'px';
-      style.borderTopWidth = this.maskRectangle.y + 'px';
-      style.borderRightWidth = (width - this.maskRectangle.x - this.maskRectangle.width) + 'px';
-      style.borderBottomWidth = (height - this.maskRectangle.y - this.maskRectangle.height) + 'px';
+      newMaskStyle = {
+        width: width + 'px',
+        height: height + 'px',
+        borderLeftWidth: this.maskRectangle.x + 'px',
+        borderTopWidth: this.maskRectangle.y + 'px',
+        borderRightWidth: (width - this.maskRectangle.x - this.maskRectangle.width) + 'px',
+        borderBottomWidth: (height - this.maskRectangle.y - this.maskRectangle.height) + 'px',
+      };
+    }
+    this.#inputData.maskElementStyle = newMaskStyle;
+
+    if (!this.transformController) {
+      return;
     }
     this.transformController.setScaleConstraints(0.5, 10 / scale);
     let matrix = new WebKitCSSMatrix()
@@ -259,24 +320,40 @@ export class TimelinePaintImageView extends UI.Widget.Widget {
                      .scale(scale, scale)
                      .translate(-width / 2, -height / 2);
     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);
+    this.transformController.clampOffsets(paddingX - bounds.maxX, clientWidth - paddingX - bounds.minX, 0, 0);
     matrix = new WebKitCSSMatrix()
                  .translate(this.transformController.offsetX(), this.transformController.offsetY())
                  .multiply(matrix);
-    this.imageContainer.style.webkitTransform = matrix.toString();
+
+    const oldTransform = this.#inputData.imageContainerWebKitTransform;
+    const newTransform = matrix.toString();
+    this.#inputData.imageContainerWebKitTransform = newTransform;
+
+    if (oldTransform !== newTransform || oldMaskStyle !== JSON.stringify(newMaskStyle)) {
+      this.requestUpdate();
+    }
   }
 
   showImage(imageURL?: string): void {
-    this.imageContainer.classList.toggle('hidden', !imageURL);
+    this.#inputData.imageContainerHidden = !imageURL;
     if (imageURL) {
-      this.imageElement.src = imageURL;
+      this.#inputData.imageURL = imageURL;
     }
+    this.requestUpdate();
   }
 
   setMask(maskRectangle: Protocol.DOM.Rect|null): void {
     this.maskRectangle = maskRectangle;
-    this.maskElement.classList.toggle('hidden', !maskRectangle);
+
+    this.#inputData.maskElementHidden = !maskRectangle;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const {imageElementNaturalHeight, imageElementNaturalWidth} =
+        this.#view(this.#inputData, undefined, this.contentElement);
+    this.#imageElementDimensions = {naturalHeight: imageElementNaturalHeight, naturalWidth: imageElementNaturalWidth};
+    // Image can only be updated to correctly fit the component when the component has loaded.
+    this.updateImagePosition();
   }
 }

package/front_end/panels/timeline/TimelinePanel.ts

@@ -306,7 +306,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelinePanel.ts', UIS
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let timelinePanelInstance: TimelinePanel|undefined;
-let isNode: boolean;
 
 /**
  * Represents the states that the timeline panel can be in.
@@ -350,6 +349,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   #viewMode: ViewMode = {mode: 'LANDING_PAGE'};
   readonly #dimThirdPartiesSetting: Common.Settings.Setting<boolean>|null = null;
   #thirdPartyCheckbox: UI.Toolbar.ToolbarSettingCheckbox|null = null;
+  #isNode = Root.Runtime.Runtime.isNode();
 
   #onAnnotationModifiedEventBound = this.#onAnnotationModifiedEvent.bind(this);
 
@@ -395,7 +395,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;
+  #externalAIConversationData: AiAssistanceModel.ConversationHandler.ExternalPerformanceAIConversationData|null = null;
   #sourceMapsResolver: SourceMapsResolver.SourceMapsResolver|null = null;
   #entityMapper: Trace.EntityMapper.EntityMapper|null = null;
   #onSourceMapsNodeNamesResolvedBound = this.#onSourceMapsNodeNamesResolved.bind(this);
@@ -462,7 +462,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.toggleRecordAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.toggle-recording');
     this.recordReloadAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.record-reload');
 
-    this.#historyManager = new TimelineHistoryManager(this.#minimapComponent, isNode);
+    this.#historyManager = new TimelineHistoryManager(this.#minimapComponent, this.#isNode);
 
     this.traceLoadStart = null;
 
@@ -477,7 +477,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.captureSelectorStatsSetting.setTitle(i18nString(UIStrings.enableSelectorStats));
 
     this.showScreenshotsSetting =
-        Common.Settings.Settings.instance().createSetting('timeline-show-screenshots', isNode ? false : true);
+        Common.Settings.Settings.instance().createSetting('timeline-show-screenshots', !this.#isNode);
     this.showScreenshotsSetting.setTitle(i18nString(UIStrings.screenshots));
     this.showScreenshotsSetting.addChangeListener(this.updateMiniMap, this);
 
@@ -503,7 +503,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.panelToolbar.wrappable = true;
     this.panelRightToolbar = timelineToolbarContainer.createChild('devtools-toolbar');
     this.panelRightToolbar.role = 'presentation';
-    if (!isNode && this.canRecord()) {
+    if (!this.#isNode && this.canRecord()) {
       this.createSettingsPane();
       this.updateShowSettingsToolbarButton();
     }
@@ -698,11 +698,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   static instance(opts: {
     forceNew: boolean|null,
-    isNode: boolean,
     traceModel?: Trace.TraceModel.Model,
-  }|undefined = {forceNew: null, isNode: false}): TimelinePanel {
-    const {forceNew, isNode: isNodeMode} = opts;
-    isNode = isNodeMode;
+  }|undefined = {forceNew: null}): TimelinePanel {
+    const {forceNew} = opts;
 
     if (!timelinePanelInstance || forceNew) {
       timelinePanelInstance = new TimelinePanel(opts.traceModel);
@@ -751,6 +749,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   override willHide(): void {
+    super.willHide();
     UI.Context.Context.instance().setFlavor(TimelinePanel, null);
     this.#historyManager.cancelIfShowing();
 
@@ -937,24 +936,24 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return this.#traceEngineModel;
   }
 
-  getOrCreateExternalAIConversationData(): AiAssistanceModel.ExternalPerformanceAIConversationData {
+  getOrCreateExternalAIConversationData(): AiAssistanceModel.ConversationHandler.ExternalPerformanceAIConversationData {
     if (!this.#externalAIConversationData) {
-      const conversationHandler = AiAssistanceModel.ConversationHandler.instance();
-      const focus = AiAssistanceModel.getPerformanceAgentFocusFromModel(this.model);
+      const conversationHandler = AiAssistanceModel.ConversationHandler.ConversationHandler.instance();
+      const focus = AiAssistanceModel.AIContext.getPerformanceAgentFocusFromModel(this.model);
       if (!focus) {
         throw new Error('could not create performance agent focus');
       }
 
-      const agent = conversationHandler.createAgent(AiAssistanceModel.ConversationType.PERFORMANCE);
-      const conversation = new AiAssistanceModel.Conversation(
-          AiAssistanceModel.ConversationType.PERFORMANCE,
+      const agent = conversationHandler.createAgent(AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE);
+      const conversation = new AiAssistanceModel.AiHistoryStorage.Conversation(
+          AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE,
           [],
           agent.id,
           /* isReadOnly */ true,
           /* isExternal */ true,
       );
 
-      const selected = new AiAssistanceModel.PerformanceTraceContext(focus);
+      const selected = new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(focus);
       selected.external = true;
 
       this.#externalAIConversationData = {
@@ -1060,32 +1059,17 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   /**
-   * Returns false if DevTools is in a standalone context where tracing/recording are NOT available.
-   *
-   * This includes scenarios like:
-   * - viewing an enhanced trace
-   * - viewing a trace in trace.cafe
-   * - other devtools_app.html scenarios without valid `ws=` param.
-   *   - See also the `isHostedMode` comment in `InspectorFrontendHost.ts`
-   *
-   * Possible signals to find a no-record (NR) context:
-   * - `primaryPageTarget()?.sessionId` is empty in NR, but populated when viewing an enhanced trace.
-   * - `primaryPageTarget.#capabilitiesMask` There's a tracing capability but the advertised capabilities are quite unreliable.
-   * - `primaryPageTarget.targets().length === 1` Mostly correct for NC but its 2 when viewing an enhanced trace.
-   * - `primaryPageTarget.router().connection()` Perhaps StubConnection or RehydratingConnection but MainConnection is incorrectly used sometimes. (eg devtools://devtools/bundled/devtools_app.html)
-   * - `resourceTreeModel?.mainFrame === null`. Correct for NR, HOWEVER  Node.js canRecord despite no main frame.
-   * - `rootTarget.type !== 'tab'` Has potential but it lies. (It's "browser" for Node despite a node type)
-   *
-   * The best signal, for now, is this combo (`isNode || hasMainFrame`), which is both well-maintained and correct in all known cases:
+   * Returns false if DevTools is in a standalone context where tracing/recording are
+   * NOT available.
    */
   private canRecord(): boolean {
-    return SDK.TargetManager.TargetManager.instance().hasFakeConnection() === false;
+    return !Root.Runtime.Runtime.isTraceApp();
   }
 
   private populateToolbar(): void {
     const canRecord = this.canRecord();
 
-    if (canRecord || isNode) {
+    if (canRecord || this.#isNode) {
       this.panelToolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButton(this.toggleRecordAction));
     }
     if (canRecord) {
@@ -1118,7 +1102,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (canRecord) {
       this.panelToolbar.appendSeparator();
 
-      if (!isNode) {
+      if (!this.#isNode) {
         this.homeButton = new UI.Toolbar.ToolbarButton(
             i18nString(UIStrings.backToLiveMetrics), 'home', undefined, 'timeline.back-to-live-metrics');
         this.homeButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
@@ -1135,7 +1119,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     // View
     this.panelToolbar.appendSeparator();
-    if (!isNode) {
+    if (!this.#isNode) {
       this.showScreenshotsToolbarCheckbox =
           this.createSettingCheckbox(this.showScreenshotsSetting, i18nString(UIStrings.captureScreenshots));
       this.panelToolbar.appendToolbarItem(this.showScreenshotsToolbarCheckbox);
@@ -1163,14 +1147,14 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
 
     // Isolate selector
-    if (isNode) {
+    if (this.#isNode) {
       const isolateSelector = new IsolateSelector();
       this.panelToolbar.appendSeparator();
       this.panelToolbar.appendToolbarItem(isolateSelector);
     }
 
     // Settings
-    if (!isNode && canRecord) {
+    if (!this.#isNode && canRecord) {
       this.panelRightToolbar.appendSeparator();
       this.panelRightToolbar.appendToolbarItem(this.showSettingsPaneButton);
     }
@@ -1653,9 +1637,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     let pathToLaunch: string|null = null;
     const url = new URL(window.location.href);
     const pathToEntrypoint = url.pathname.slice(0, url.pathname.lastIndexOf('/'));
-    url.pathname = `${pathToEntrypoint}/rehydrated_devtools_app.html`;
-    // The standalone devtools shouldn't retain any existing query params.
-    url.search = '';
+    url.pathname = `${pathToEntrypoint}/trace_app.html`;
     pathToLaunch = url.toString();
 
     // Clarifying the window the code is referring to
@@ -1728,7 +1710,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   private updateSettingsPaneVisibility(): void {
-    if (isNode || !this.canRecord()) {
+    if (this.#isNode || !this.canRecord()) {
       return;
     }
     if (this.showSettingsPaneSetting.get()) {
@@ -1926,7 +1908,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.setState(State.START_PENDING);
     this.showRecordingStarted();
 
-    if (isNode) {
+    if (this.#isNode) {
       await this.#startCPUProfilingRecording();
     } else {
       await this.#startTraceRecording();
@@ -2033,7 +2015,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       return;
     }
 
-    this.recordReloadAction.setEnabled(isNode ? false : this.state === State.IDLE);
+    this.recordReloadAction.setEnabled(this.#isNode ? false : this.state === State.IDLE);
     this.homeButton?.setEnabled(this.state === State.IDLE && this.#hasActiveTrace());
   }
 
@@ -2065,7 +2047,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.flameChart.getNetworkDataProvider().reset();
     this.flameChart.reset();
     this.#changeView({mode: 'LANDING_PAGE'});
-    UI.Context.Context.instance().setFlavor(AiAssistanceModel.AgentFocus, null);
+    UI.Context.Context.instance().setFlavor(AiAssistanceModel.AIContext.AgentFocus, null);
   }
 
   #hasActiveTrace(): boolean {
@@ -2251,7 +2233,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     if (parsedTrace.metadata.dataOrigin !== Trace.Types.File.DataOrigin.CPU_PROFILE) {
       UI.Context.Context.instance().setFlavor(
-          AiAssistanceModel.AgentFocus, AiAssistanceModel.AgentFocus.fromParsedTrace(parsedTrace));
+          AiAssistanceModel.AIContext.AgentFocus, AiAssistanceModel.AIContext.AgentFocus.fromParsedTrace(parsedTrace));
     }
   }
 
@@ -2428,7 +2410,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
 
     const liveMetrics = new TimelineComponents.LiveMetricsView.LiveMetricsView();
-    liveMetrics.isNode = isNode;
     this.landingPage = LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.Widget, liveMetrics);
     this.landingPage.element.classList.add('timeline-landing-page', 'fill');
     this.landingPage.contentElement.classList.add('fill');
@@ -3032,10 +3013,10 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   static async *
-      handleExternalRecordRequest():
-          AsyncGenerator<AiAssistanceModel.ExternalRequestResponse, AiAssistanceModel.ExternalRequestResponse> {
+      handleExternalRecordRequest(): AsyncGenerator<
+          AiAssistanceModel.AiAgent.ExternalRequestResponse, AiAssistanceModel.AiAgent.ExternalRequestResponse> {
     yield {
-      type: AiAssistanceModel.ExternalRequestResponseType.NOTIFICATION,
+      type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.NOTIFICATION,
       message: 'Recording performance trace',
     };
     TimelinePanel.instance().invalidateExternalAIConversationData();
@@ -3048,10 +3029,10 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     await UI.ViewManager.ViewManager.instance().showView('timeline');
 
     function onRecordingCompleted(eventData: EventTypes[Events.RECORDING_COMPLETED]):
-        AiAssistanceModel.ExternalRequestResponse {
+        AiAssistanceModel.AiAgent.ExternalRequestResponse {
       if ('errorText' in eventData) {
         return {
-          type: AiAssistanceModel.ExternalRequestResponseType.ERROR,
+          type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
           message: `Error running the trace: ${eventData.errorText}`,
         };
       }
@@ -3059,7 +3040,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       const parsedTrace = panelInstance.model.parsedTrace(eventData.traceIndex);
       if (!parsedTrace || !parsedTrace.insights || parsedTrace.insights.size === 0) {
         return {
-          type: AiAssistanceModel.ExternalRequestResponseType.ERROR,
+          type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
           message: 'The trace was loaded successfully but no Insights were detected.',
         };
       }
@@ -3067,7 +3048,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       const navigationId = Array.from(parsedTrace.insights.keys()).find(k => k !== 'NO_NAVIGATION');
       if (!navigationId) {
         return {
-          type: AiAssistanceModel.ExternalRequestResponseType.ERROR,
+          type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
           message: 'The trace was loaded successfully but no navigation was detected.',
         };
       }
@@ -3075,7 +3056,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       const insightsForNav = parsedTrace.insights.get(navigationId);
       if (!insightsForNav) {
         return {
-          type: AiAssistanceModel.ExternalRequestResponseType.ERROR,
+          type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
           message: 'The trace was loaded successfully but no Insights were detected.',
         };
       }
@@ -3089,8 +3070,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 focus = AiAssistanceModel.AgentFocus.fromParsedTrace(parsedTrace);
-        const formatter = new AiAssistanceModel.PerformanceInsightFormatter(focus, insight);
+        const focus = AiAssistanceModel.AIContext.AgentFocus.fromParsedTrace(parsedTrace);
+        const formatter = new AiAssistanceModel.PerformanceInsightFormatter.PerformanceInsightFormatter(focus, 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
@@ -3121,7 +3102,7 @@ These insights are passing, which means they are not considered to highlight con
 ${responseTextForPassedInsights}`;
 
       return {
-        type: AiAssistanceModel.ExternalRequestResponseType.ANSWER,
+        type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ANSWER,
         message: finalText,
         devToolsLogs: [],
       };
@@ -3138,11 +3119,11 @@ ${responseTextForPassedInsights}`;
     });
   }
 
-  static async handleExternalAnalyzeRequest(prompt: string):
-      Promise<AsyncGenerator<AiAssistanceModel.ExternalRequestResponse, AiAssistanceModel.ExternalRequestResponse>> {
+  static async handleExternalAnalyzeRequest(prompt: string): Promise<AsyncGenerator<
+      AiAssistanceModel.AiAgent.ExternalRequestResponse, AiAssistanceModel.AiAgent.ExternalRequestResponse>> {
     const data = TimelinePanel.instance().getOrCreateExternalAIConversationData();
     return await data.conversationHandler.handleExternalRequest({
-      conversationType: AiAssistanceModel.ConversationType.PERFORMANCE,
+      conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE,
       prompt,
       data,
     });

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -601,6 +601,7 @@ export class TimelineTreeView extends
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, this.#onDataGridSelectionChange, this);
     this.dataGrid.addEventListener(DataGrid.DataGrid.Events.DESELECTED_NODE, this.#onDataGridDeselection, this);
   }

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -13,6 +13,7 @@ import './MetricCard.js';
 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 * as SDK from '../../../core/sdk/sdk.js';
 import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import * as EmulationModel from '../../../models/emulation/emulation.js';
@@ -296,7 +297,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
   readonly #shadow = this.attachShadow({mode: 'open'});
 
-  #isNode = false;
+  isNode = Root.Runtime.Runtime.isNode();
 
   #lcpValue?: LiveMetrics.LcpValue;
   #clsValue?: LiveMetrics.ClsValue;
@@ -323,11 +324,6 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     this.#recordReloadAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.record-reload');
   }
 
-  set isNode(isNode: boolean) {
-    this.#isNode = isNode;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
   #onMetricStatus(event: {data: LiveMetrics.StatusEvent}): void {
     this.#lcpValue = event.data.lcp;
     this.#clsValue = event.data.cls;
@@ -385,7 +381,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   }
 
   async #refreshFieldDataForCurrentPage(): Promise<void> {
-    if (!this.#isNode) {
+    if (!this.isNode) {
       await this.#cruxManager.refresh();
     }
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
@@ -1082,7 +1078,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   }
 
   #render = (): void => {
-    if (this.#isNode) {
+    if (this.isNode) {
       Lit.render(this.#renderNodeView(), this.#shadow, {host: this});
       return;
     }

package/front_end/panels/timeline/components/Sidebar.ts

@@ -93,6 +93,7 @@ export class SidebarWidget extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.#tabbedPane.show(this.element);
     this.#updateAnnotationsCountBadge();
 
@@ -114,6 +115,7 @@ export class SidebarWidget extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     const currentlyActiveInsight = this.#insightsView.getActiveInsight();
     this.#insightToRestoreOnOpen = currentlyActiveInsight;
 

package/front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -434,7 +434,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
         return html``;
       }
 
-      const agentFocus = AIAssistance.AgentFocus.fromInsight(this.#data.parsedTrace, model);
+      const agentFocus = AIAssistance.AIContext.AgentFocus.fromInsight(this.#data.parsedTrace, model);
       // clang-format off
       return html`<div>
         <${componentClass.litTagName}