chrome-devtools-frontend 1.0.1605219 → 1.0.1606789

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -8,7 +8,6 @@ import * as Common from '../../core/common/common.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 type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
@@ -45,8 +44,7 @@ import {
   ProfileHeader,
   ProfileType,
 } from './ProfileHeader.js';
-import {ProfileSidebarTreeElement} from './ProfileSidebarTreeElement.js';
-import {instance} from './ProfileTypeRegistry.js';
+import type {ProfileTypeRegistry} from './ProfileTypeRegistry.js';
 
 const UIStrings = {
   /**
@@ -271,7 +269,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const moduleUIstr_ = i18n.i18n.registerUIStrings('panels/profiler/ModuleUIStrings.ts', ModuleUIStrings.UIStrings);
 const moduleI18nString = i18n.i18n.getLocalizedString.bind(undefined, moduleUIstr_);
 export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayDelegate, UI.SearchableView.Searchable {
-  searchResults: number[];
+  searchResults: number[] = [];
   profile: HeapProfileHeader;
   readonly linkifier: Components.Linkifier.Linkifier;
   readonly parentDataDisplayDelegate: DataDisplayDelegate;
@@ -310,6 +308,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   trackingOverviewGrid?: HeapTimelineOverview;
   currentSearchResultIndex = -1;
   currentSearch?: HeapSnapshotModel.HeapSnapshotModel.SearchConfig;
+  #registry: ProfileTypeRegistry;
 
   get currentQuery(): string|undefined {
     return this.currentSearch?.query;
@@ -320,13 +319,17 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     }
   }
 
-  constructor(dataDisplayDelegate: DataDisplayDelegate, profile: HeapProfileHeader) {
+  constructor(
+      dataDisplayDelegate: DataDisplayDelegate,
+      profile: HeapProfileHeader,
+      registry: ProfileTypeRegistry,
+  ) {
     super({
       title: i18nString(UIStrings.heapSnapshot),
       viewId: 'heap-snapshot',
     });
 
-    this.searchResults = [];
+    this.#registry = registry;
 
     this.element.classList.add('heap-snapshot-view');
     this.profile = profile;
@@ -340,7 +343,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     if (isHeapTimeline) {
       this.createOverview();
     }
-    const hasAllocationStacks = instance.trackingHeapSnapshotProfileType.recordAllocationStacksSetting().get();
+    const hasAllocationStacks = registry.trackingHeapSnapshotProfileType.recordAllocationStacksSetting().get();
 
     this.parentDataDisplayDelegate = dataDisplayDelegate;
 
@@ -425,7 +428,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     this.perspectives = [];
     this.comparisonPerspective = new ComparisonPerspective();
     this.perspectives.push(new SummaryPerspective());
-    if (profile.profileType() !== instance.trackingHeapSnapshotProfileType) {
+    if (profile.profileType() !== this.#registry.trackingHeapSnapshotProfileType) {
       this.perspectives.push(this.comparisonPerspective);
     }
     this.perspectives.push(new ContainmentPerspective());
@@ -621,7 +624,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
 
   override async toolbarItems(): Promise<UI.Toolbar.ToolbarItem[]> {
     const result: UI.Toolbar.ToolbarItem[] = [this.perspectiveSelect, this.classNameFilter];
-    if (this.profile.profileType() !== instance.trackingHeapSnapshotProfileType) {
+    if (this.profile.profileType() !== this.#registry.trackingHeapSnapshotProfileType) {
       result.push(this.baseSelect, this.filterSelect);
     }
     result.push(this.selectedSizeText);
@@ -828,7 +831,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
 
   inspectedObjectChanged(
       event: Common.EventTarget.EventTargetEvent<DataGrid.DataGrid.DataGridNode<HeapSnapshotGridNode>>): void {
-    const selectedNode = (event.data as HeapSnapshotGridNode);
+    const selectedNode = event.data;
     const heapProfilerModel = this.profile.heapProfilerModel();
     if (heapProfilerModel && selectedNode instanceof HeapSnapshotGenericObjectNode) {
       void heapProfilerModel.addInspectedHeapObject(
@@ -1335,12 +1338,10 @@ export class HeapSnapshotProfileType extends
   }
 
   override customContent(): Element|null {
-    const showOptionToExposeInternalsInHeapSnapshot = Root.Runtime.experiments.isEnabled(
-        Root.ExperimentNames.ExperimentName.SHOW_OPTION_TO_EXPOSE_INTERNALS_IN_HEAP_SNAPSHOT);
     const exposeInternalsInHeapSnapshotCheckbox =
         SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
     this.customContentInternal = exposeInternalsInHeapSnapshotCheckbox;
-    return showOptionToExposeInternalsInHeapSnapshot ? exposeInternalsInHeapSnapshotCheckbox : null;
+    return exposeInternalsInHeapSnapshotCheckbox;
   }
 
   override setCustomContentEnabled(enable: boolean): void {
@@ -1680,14 +1681,6 @@ export class HeapProfileHeader extends ProfileHeader {
     return await this.snapshotProxy.getLocation(nodeIndex);
   }
 
-  override createSidebarTreeElement(dataDisplayDelegate: DataDisplayDelegate): ProfileSidebarTreeElement {
-    return new ProfileSidebarTreeElement(dataDisplayDelegate, this, 'heap-snapshot-sidebar-tree-item');
-  }
-
-  override createView(dataDisplayDelegate: DataDisplayDelegate): HeapSnapshotView {
-    return new HeapSnapshotView(dataDisplayDelegate, this);
-  }
-
   prepareToLoad(): void {
     console.assert(!this.receiver, 'Already loading');
     this.setupWorker();
@@ -1813,9 +1806,7 @@ export class HeapProfileHeader extends ProfileHeader {
         return;
       }
       if (this.tempFile) {
-        const error = (await this.tempFile.copyToOutputStream(fileOutputStream, this.onChunkTransferred.bind(this)) as {
-          message: string,
-        } | null);
+        const error = await this.tempFile.copyToOutputStream(fileOutputStream, this.onChunkTransferred.bind(this));
         if (error) {
           Common.Console.Console.instance().error('Failed to read heap snapshot from temp file: ' + error.message);
         }
@@ -1845,15 +1836,11 @@ export class HeapProfileHeader extends ProfileHeader {
     this.setupWorker();
     const reader = new Bindings.FileUtils.ChunkedFileReader(file, 10000000);
     const success = await reader.read((this.receiver as Common.StringOutputStream.OutputStream));
-    if (!success) {
-      const error = (reader.error() as {
-        message: string,
-      } | null);
-      if (error) {
-        this.updateStatus(error.message);
-      }
+    const error = reader.error();
+    if (!success && error) {
+      this.updateStatus(error.message);
     }
-    return success ? null : reader.error();
+    return success ? null : error;
   }
 
   override profileType(): HeapSnapshotProfileType {

package/front_end/panels/profiler/ProfileHeader.ts

@@ -34,17 +34,6 @@ export class ProfileHeader extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     this.dispatchEventToListeners(Events.UPDATE_STATUS, new StatusUpdate(subtitle, wait));
   }
 
-  /**
-   * Must be implemented by subclasses.
-   */
-  createSidebarTreeElement(_dataDisplayDelegate: DataDisplayDelegate): UI.TreeOutline.TreeElement {
-    throw new Error('Not implemented.');
-  }
-
-  createView(_dataDisplayDelegate: DataDisplayDelegate): UI.Widget.Widget {
-    throw new Error('Not implemented.');
-  }
-
   removeTempFile(): void {
     if (this.tempFile) {
       this.tempFile.remove();
@@ -167,10 +156,7 @@ export class ProfileType extends Common.ObjectWrapper.ObjectWrapper<ProfileEvent
   }
 
   getProfiles(): ProfileHeader[] {
-    function isFinished(this: ProfileType, profile: ProfileHeader): boolean {
-      return this.#profileBeingRecorded !== profile;
-    }
-    return this.profiles.filter(isFinished.bind(this));
+    return this.profiles.filter(profile => this.#profileBeingRecorded !== profile);
   }
 
   customContent(): Element|null {

package/front_end/panels/profiler/ProfileTypeRegistry.ts

@@ -2,21 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {DetachedElementsProfileType} from './HeapDetachedElementsView.js';
-import {SamplingHeapProfileType} from './HeapProfileView.js';
-import {HeapSnapshotProfileType, TrackingHeapSnapshotProfileType} from './HeapSnapshotView.js';
+import type {DetachedElementsProfileType} from './HeapDetachedElementsView.js';
+import type {SamplingHeapProfileType} from './HeapProfileView.js';
+import type {HeapSnapshotProfileType, TrackingHeapSnapshotProfileType} from './HeapSnapshotView.js';
 
-export class ProfileTypeRegistry {
+export interface ProfileTypeRegistry {
   heapSnapshotProfileType: HeapSnapshotProfileType;
   samplingHeapProfileType: SamplingHeapProfileType;
   trackingHeapSnapshotProfileType: TrackingHeapSnapshotProfileType;
   detachedElementProfileType: DetachedElementsProfileType;
-  constructor() {
-    this.heapSnapshotProfileType = new HeapSnapshotProfileType();
-    this.samplingHeapProfileType = new SamplingHeapProfileType();
-    this.trackingHeapSnapshotProfileType = new TrackingHeapSnapshotProfileType();
-    this.detachedElementProfileType = new DetachedElementsProfileType();
-  }
 }
-
-export const instance = new ProfileTypeRegistry();

package/front_end/panels/profiler/ProfileView.ts

@@ -19,8 +19,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {BottomUpProfileDataGridTree} from './BottomUpProfileDataGrid.js';
 import {type Formatter, type ProfileDataGridNode, ProfileDataGridTree} from './ProfileDataGrid.js';
 import {ProfileFlameChart, type ProfileFlameChartDataProvider} from './ProfileFlameChartDataProvider.js';
-import {type DataDisplayDelegate, ProfileHeader, type ProfileType} from './ProfileHeader.js';
-import {ProfileSidebarTreeElement} from './ProfileSidebarTreeElement.js';
+import {ProfileHeader, type ProfileType} from './ProfileHeader.js';
 import {TopDownProfileDataGridTree} from './TopDownProfileDataGrid.js';
 
 const UIStrings = {
@@ -547,10 +546,6 @@ export class WritableProfileHeader extends ProfileHeader implements Common.Strin
     this.removeTempFile();
   }
 
-  override createSidebarTreeElement(panel: DataDisplayDelegate): ProfileSidebarTreeElement {
-    return new ProfileSidebarTreeElement(panel, this, 'profile-sidebar-tree-item');
-  }
-
   override canSaveToFile(): boolean {
     return !this.fromFile();
   }

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -39,7 +39,19 @@ import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import {
+  DetachedElementsProfileHeader,
+  DetachedElementsProfileType,
+  DetachedElementsProfileView
+} from './HeapDetachedElementsView.js';
 import heapProfilerStyles from './heapProfiler.css.js';
+import {HeapProfileView, SamplingHeapProfileHeader, SamplingHeapProfileType} from './HeapProfileView.js';
+import {
+  HeapProfileHeader,
+  HeapSnapshotProfileType,
+  HeapSnapshotView,
+  TrackingHeapSnapshotProfileType
+} from './HeapSnapshotView.js';
 import {
   type DataDisplayDelegate,
   ProfileEvents as ProfileTypeEvents,
@@ -50,6 +62,8 @@ import {Events as ProfileLauncherEvents, ProfileLauncherView} from './ProfileLau
 import {ProfileSidebarTreeElement} from './ProfileSidebarTreeElement.js';
 import profilesPanelStyles from './profilesPanel.css.js';
 import profilesSidebarTreeStyles from './profilesSidebarTree.css.js';
+import type {ProfileTypeRegistry} from './ProfileTypeRegistry.js';
+import {WritableProfileHeader} from './ProfileView.js';
 
 const UIStrings = {
   /**
@@ -82,8 +96,35 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/profiler/ProfilesPanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+function createSidebarTreeElement(
+    profiler: ProfileHeader, dataDisplayDelegate: DataDisplayDelegate): ProfileSidebarTreeElement {
+  if (profiler instanceof HeapProfileHeader) {
+    return new ProfileSidebarTreeElement(dataDisplayDelegate, profiler, 'heap-snapshot-sidebar-tree-item');
+  }
+  if (profiler instanceof WritableProfileHeader) {
+    return new ProfileSidebarTreeElement(dataDisplayDelegate, profiler, 'profile-sidebar-tree-item');
+  }
+
+  throw new Error('Not implemented.');
+}
+
+function createView(profiler: ProfileHeader, dataDisplayDelegate: DataDisplayDelegate, registry: ProfileTypeRegistry):
+    UI.View.SimpleView {
+  if (profiler instanceof HeapProfileHeader) {
+    return new HeapSnapshotView(dataDisplayDelegate, profiler, registry);
+  }
+  if (profiler instanceof SamplingHeapProfileHeader) {
+    return new HeapProfileView(profiler);
+  }
+  if (profiler instanceof DetachedElementsProfileHeader) {
+    return new DetachedElementsProfileView(dataDisplayDelegate, profiler);
+  }
+
+  throw new Error('Not implemented.');
+}
+
 export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisplayDelegate {
-  readonly profileTypes: ProfileType[];
   profilesItemTreeElement: ProfilesSidebarTreeElement;
   sidebarTree: UI.TreeOutline.TreeOutlineInShadow;
   profileViews: HTMLDivElement;
@@ -102,9 +143,18 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp
   typeIdToSidebarSection: Record<string, ProfileTypeSidebarSection>;
   fileSelectorElement!: HTMLInputElement;
   selectedProfileType?: ProfileType;
-  constructor(name: string, profileTypes: ProfileType[], recordingActionId: string) {
+  static registry: ProfileTypeRegistry = {
+    heapSnapshotProfileType: new HeapSnapshotProfileType(),
+    samplingHeapProfileType: new SamplingHeapProfileType(),
+    trackingHeapSnapshotProfileType: new TrackingHeapSnapshotProfileType(),
+    detachedElementProfileType: new DetachedElementsProfileType(),
+  };
+
+  constructor(
+      name: string,
+      recordingActionId: string,
+  ) {
     super(name);
-    this.profileTypes = profileTypes;
     this.registerRequiredCSS(objectValueStyles, profilesPanelStyles, heapProfilerStyles);
 
     const mainContainer = new UI.Widget.VBox();
@@ -179,6 +229,10 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp
         SDK.HeapProfilerModel.HeapProfilerModel, this.updateProfileTypeSpecificUI, this);
   }
 
+  get profileTypes(): ProfileType[] {
+    return Object.values(ProfilesPanel.registry);
+  }
+
   onKeyDown(event: KeyboardEvent): void {
     let handled = false;
     if (event.key === 'ArrowDown' && !event.altKey) {
@@ -437,7 +491,7 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp
     if (index !== -1) {
       return this.profileToView[index].view;
     }
-    const view = profile.createView(this);
+    const view = createView(profile, this, ProfilesPanel.registry);
     view.element.classList.add('profile-view');
     this.profileToView.push({profile, view});
     return view;
@@ -490,9 +544,8 @@ export class ProfileTypeSidebarSection extends UI.TreeOutline.TreeElement {
   addProfileHeader(profile: ProfileHeader): void {
     this.hidden = false;
     const profileType = profile.profileType();
-    let sidebarParent: (ProfileGroupSidebarTreeElement|null)|this = this;
-    const profileTreeElement =
-        (profile.createSidebarTreeElement(this.dataDisplayDelegate) as ProfileSidebarTreeElement);
+    let sidebarParent: ProfileGroupSidebarTreeElement|null|this = this;
+    const profileTreeElement = createSidebarTreeElement(profile, this.dataDisplayDelegate);
     this.profileTreeElements.push(profileTreeElement);
 
     if (!profile.fromFile() && profileType.profileBeingRecorded() !== profile) {

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -675,28 +675,33 @@ type InfoWidgetView = (input: InfoWidgetViewInput, output: undefined, target: HT
 
 const INFO_WIDGET_VIEW: InfoWidgetView = (input, _output, target) => {
   // clang-format off
-  render(widget(UI.TabbedPane.TabbedPane, {
-    tabs: [
-      {
-        id: 'request',
-        title: i18nString(UIStrings.request),
-        view: input.type === undefined ?
-            new UI.EmptyWidget.EmptyWidget(
-                i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectAMessageToView)) :
-            SourceFrame.JSONView.JSONView.createViewSync(input.request || null),
-        enabled: input.type === 'sent',
-        selected: input.selectedTab === 'request',
-      },
-      {
-        id: 'response',
-        title: i18nString(UIStrings.response),
-        view: input.type === undefined ?
-            new UI.EmptyWidget.EmptyWidget(
-                i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectAMessageToView)) :
-            SourceFrame.JSONView.JSONView.createViewSync(input.response || null),
-        selected: input.selectedTab === 'response',
-      }
-    ]}), target);
+  render(html`
+    <devtools-tabbed-pane>${input.type === undefined ? html`
+      <devtools-widget
+          id="request" title=${i18nString(UIStrings.request)}
+          ?selected=${input.selectedTab === 'request'} disabled
+          ${widget(UI.EmptyWidget.EmptyWidget, {
+              header: i18nString(UIStrings.noMessageSelected),
+              text: i18nString(UIStrings.selectAMessageToView)})}>
+      </devtools-widget>
+      <devtools-widget
+          id="response" title=${i18nString(UIStrings.response)}
+          ?selected=${input.selectedTab === 'response'}
+          ${widget(UI.EmptyWidget.EmptyWidget, {
+              header: i18nString(UIStrings.noMessageSelected),
+              text: i18nString(UIStrings.selectAMessageToView)})}>
+      </devtools-widget>`: html`
+      <devtools-widget
+          id="request" title=${i18nString(UIStrings.request)}
+          ?selected=${input.selectedTab === 'request'} ?disabled=${input.type !== 'sent'}
+          ${widget(SourceFrame.JSONView.SearchableJsonView, {jsonObject: input.request})}>
+      </devtools-widget>
+      <devtools-widget
+          id="response" title=${i18nString(UIStrings.response)}
+          ?selected=${input.selectedTab === 'response'}
+          ${widget(SourceFrame.JSONView.SearchableJsonView, {jsonObject: input.response})}>
+      </devtools-widget>`}
+    </devtools-tabbed-pane>`, target);
   // clang-format on
 };
 

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -106,7 +106,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
   }
 
   override showDetailsForNode(node: Trace.Extras.TraceTree.Node): boolean {
-    const parsedTrace = this.parsedTrace();
+    const parsedTrace = this.parsedTrace;
     if (!parsedTrace) {
       return false;
     }

package/front_end/panels/timeline/ThirdPartyTreeView.ts

@@ -76,7 +76,7 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
   }
 
   override buildTree(): Trace.Extras.TraceTree.Node {
-    const parsedTrace = this.parsedTrace();
+    const parsedTrace = this.parsedTrace;
     const entityMapper = this.entityMapper();
 
     if (!parsedTrace || !entityMapper) {
@@ -96,7 +96,7 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
     const filter = new Trace.Extras.TraceFilter.VisibleEventsFilter(
         Trace.Styles.visibleTypes().concat([Trace.Types.Events.Name.SYNTHETIC_NETWORK_REQUEST]));
 
-    const node = new Trace.Extras.TraceTree.BottomUpRootNode(this.selectedEvents(), {
+    const node = new Trace.Extras.TraceTree.BottomUpRootNode(this.selectedEvents, {
       textFilter: this.textFilter(),
       filters: [filter],
       startTime: this.startTime,

package/front_end/panels/timeline/TimelinePanel.ts

@@ -54,7 +54,6 @@ import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
-import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import {Link} from '../../ui/kit/kit.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
@@ -311,10 +310,6 @@ const UIStrings = {
    * @description Title of the shortcuts dialog shown to the user that lists keyboard shortcuts.
    */
   shortcutsDialogTitle: 'Keyboard shortcuts for flamechart',
-  /**
-   * @description Notification shown to the user whenever DevTools receives an external request.
-   */
-  externalRequestReceived: '`DevTools` received an external request',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelinePanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -407,7 +402,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private traceLoadStart!: Trace.Types.Timing.Milli|null;
 
   #traceEngineModel: Trace.TraceModel.Model;
-  #externalAIConversationData: AiAssistanceModel.ConversationHandler.ExternalPerformanceAIConversationData|null = null;
   #sourceMapsResolver: SourceMapsResolver.SourceMapsResolver|null = null;
   #entityMapper: Trace.EntityMapper.EntityMapper|null = null;
   #onSourceMapsNodeNamesResolvedBound = this.#onSourceMapsNodeNamesResolved.bind(this);
@@ -976,39 +970,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return this.#traceEngineModel;
   }
 
-  getOrCreateExternalAIConversationData(): AiAssistanceModel.ConversationHandler.ExternalPerformanceAIConversationData {
-    if (!this.#externalAIConversationData) {
-      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 conversation = new AiAssistanceModel.AiConversation.AiConversation({
-        type: AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE,
-        data: [],
-        isReadOnly: true,
-        aidaClient: conversationHandler.aidaClient,
-        isExternal: true,
-      });
-
-      const selected = new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(focus);
-      selected.external = true;
-
-      this.#externalAIConversationData = {
-        conversationHandler,
-        conversation,
-        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
@@ -3102,120 +3063,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return trace;
   }
 
-  static async *
-      handleExternalRecordRequest(): AsyncGenerator<
-          AiAssistanceModel.AiAgent.ExternalRequestResponse, AiAssistanceModel.AiAgent.ExternalRequestResponse> {
-    yield {
-      type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.NOTIFICATION,
-      message: 'Recording performance trace',
-    };
-    TimelinePanel.instance().invalidateExternalAIConversationData();
-    void VisualLogging.logFunctionCall('timeline.record-reload', 'external');
-    Snackbars.Snackbar.Snackbar.show({message: i18nString(UIStrings.externalRequestReceived)});
-
-    const panelInstance = TimelinePanel.instance();
-    // Given how the current UX works, it's nice to show the user the Perf
-    // Panel so they see what's happening
-    await UI.ViewManager.ViewManager.instance().showView('timeline');
-
-    function onRecordingCompleted(eventData: EventTypes[Events.RECORDING_COMPLETED]):
-        AiAssistanceModel.AiAgent.ExternalRequestResponse {
-      if ('errorText' in eventData) {
-        return {
-          type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
-          message: `Error running the trace: ${eventData.errorText}`,
-        };
-      }
-
-      const parsedTrace = panelInstance.model.parsedTrace(eventData.traceIndex);
-      if (!parsedTrace || !parsedTrace.insights || parsedTrace.insights.size === 0) {
-        return {
-          type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
-          message: 'The trace was loaded successfully but no Insights were detected.',
-        };
-      }
-
-      const insightSetId = Array.from(parsedTrace.insights.keys()).find(k => k !== 'NO_NAVIGATION');
-      if (!insightSetId) {
-        return {
-          type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
-          message: 'The trace was loaded successfully but no navigation was detected.',
-        };
-      }
-
-      const insightsForNav = parsedTrace.insights.get(insightSetId);
-      if (!insightsForNav) {
-        return {
-          type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ERROR,
-          message: 'The trace was loaded successfully but no Insights were detected.',
-        };
-      }
-
-      let responseTextForNonPassedInsights = '';
-      // We still return info on the passed insights, but we put it at the
-      // bottom of the response under a heading.
-      let responseTextForPassedInsights = '';
-
-      // TODO(b/442392194): use PerformanceTraceFormatter summary instead.
-      for (const insight of Object.values(insightsForNav.model)) {
-        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
-          // useful information.
-          continue;
-        }
-
-        const formatted = formatter.formatInsight({headingLevel: 3});
-
-        if (insight.state === 'pass') {
-          responseTextForPassedInsights += `${formatted}\n\n`;
-          continue;
-        } else {
-          responseTextForNonPassedInsights += `${formatted}\n\n`;
-        }
-      }
-
-      const finalText = `# Trace recording results
-
-## Non-passing insights:
-
-These insights highlight potential problems and opportunities to improve performance.
-${responseTextForNonPassedInsights}
-
-## Passing insights:
-
-These insights are passing, which means they are not considered to highlight considerable performance problems.
-${responseTextForPassedInsights}`;
-
-      return {
-        type: AiAssistanceModel.AiAgent.ExternalRequestResponseType.ANSWER,
-        message: finalText,
-        devToolsLogs: [],
-      };
-    }
-
-    return await new Promise(resolve => {
-      function listener(e: Common.EventTarget.EventTargetEvent<EventTypes[Events.RECORDING_COMPLETED]>): void {
-        resolve(onRecordingCompleted(e.data));
-        panelInstance.removeEventListener(Events.RECORDING_COMPLETED, listener);
-      }
-      panelInstance.addEventListener(Events.RECORDING_COMPLETED, listener);
-
-      panelInstance.recordReload();
-    });
-  }
-
-  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.AiHistoryStorage.ConversationType.PERFORMANCE,
-      prompt,
-      data,
-    });
-  }
 }
 
 export const enum State {
@@ -3291,6 +3138,17 @@ export class TimeRangeRevealer implements Common.Revealer.Revealer<Utils.Helpers
   }
 }
 
+export class BottomUpProfileRevealer implements Common.Revealer.Revealer<Utils.Helpers.RevealableBottomUpProfile> {
+  async reveal(revealable: Utils.Helpers.RevealableBottomUpProfile): Promise<void> {
+    await UI.ViewManager.ViewManager.instance().showView('timeline');
+    const panel = TimelinePanel.instance();
+    TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(
+        revealable.bounds, {ignoreMiniMapBounds: true, shouldAnimate: true});
+    panel.select(null);
+    panel.getFlameChart().selectDetailsViewTab(Tab.BottomUp, null);
+  }
+}
+
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(context: UI.Context.Context, actionId: string): boolean {
     const panel = context.flavor(TimelinePanel);