chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/panels/profiler/HeapProfileView.ts

@@ -1,9 +1,9 @@
 // Copyright 2016 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-imperative-dom-api */
 
 import '../../ui/components/icon_button/icon_button.js';
+import '../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -14,23 +14,24 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import type * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.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';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {BottomUpProfileDataGridTree} from './BottomUpProfileDataGrid.js';
 import {Events, HeapTimelineOverview, type IdsRangeChangedEvent, type Samples} from './HeapTimelineOverview.js';
-import {type Formatter, type ProfileDataGridNode, ProfileDataGridTree} from './ProfileDataGrid.js';
+import {type Formatter, ProfileDataGridTree, type ProfileEntry} from './ProfileDataGrid.js';
 import {ProfileFlameChart, ProfileFlameChartDataProvider} from './ProfileFlameChartDataProvider.js';
 import {ProfileEvents, type ProfileHeader, ProfileType} from './ProfileHeader.js';
+import profilesPanelStyles from './profilesPanel.css.js';
 import {TopDownProfileDataGridTree} from './TopDownProfileDataGrid.js';
 import {WritableProfileHeader} from './WritableProfileHeader.js';
 
 const {repeat, ref} = Directives;
+const {widget, widgetRef} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -186,6 +187,168 @@ export const enum ViewTypes {
   HEAVY = 'Heavy',
 }
 
+export interface ViewInput {
+  timelineOverview: HeapTimelineOverview;
+  searchable: UI.SearchableView.Searchable;
+  hasTemporaryView: boolean;
+  viewType: ViewTypes|null;
+  profileDataGridTree: ProfileDataGridTree|undefined;
+  selectedNode: ProfileEntry|null;
+  nodeFormatter: Formatter;
+  columnHeader: (columnId: string) => Common.UIString.LocalizedString;
+  searchableView: UI.SearchableView.SearchableView|undefined;
+  dataProvider: ProfileFlameChartDataProvider|undefined;
+  target: SDK.Target.Target|null;
+  onExpand: (node: ProfileEntry) => void;
+  onCollapse: (node: ProfileEntry) => void;
+  onSelect: (node: ProfileEntry) => void;
+  onDeselect: () => void;
+  onContextMenu: (event: CustomEvent<UI.ContextMenu.ContextMenu>, node: ProfileEntry) => void;
+  onSearchableViewMount: (widget: UI.SearchableView.SearchableView) => void;
+  onFlameChartEntryInvoked: (entryIndex: number) => void;
+  range?: {left: number, right: number};
+}
+
+export interface ViewOutput {
+  performSearch?: (searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards?: boolean) => void;
+  jumpToNextSearchResult?: () => void;
+  jumpToPreviousSearchResult?: () => void;
+  onSearchCanceled?: () => void;
+}
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement|DocumentFragment) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {searchableView, dataProvider} = input;
+  // clang-format off
+  render(html`
+    ${input.hasTemporaryView ? html`
+      <devtools-widget ${widget(() => input.timelineOverview)}></devtools-widget>` : nothing}
+    <devtools-widget ${widget(element => {
+        const searchableViewWidget = new UI.SearchableView.SearchableView(input.searchable, null, undefined, element);
+        searchableViewWidget.setPlaceholder(i18nString(UIStrings.findByCostMsNameOrFile));
+        return searchableViewWidget;
+      })}
+      ${widgetRef(UI.SearchableView.SearchableView, input.onSearchableViewMount)}>
+      ${input.viewType === ViewTypes.FLAME && searchableView && dataProvider ?  html`
+          <devtools-widget
+            autofocus
+            ${widget((e: HTMLElement) => new ProfileFlameChart(searchableView, dataProvider, e), {range: input.range})}
+            @EntryInvoked=${(e: CustomEvent<number>) => input.onFlameChartEntryInvoked(e.detail)}
+            ${widgetRef(ProfileFlameChart, widget => {
+              output.performSearch = widget.performSearch.bind(widget);
+              output.jumpToNextSearchResult = widget.jumpToNextSearchResult.bind(widget);
+              output.jumpToPreviousSearchResult = widget.jumpToPreviousSearchResult.bind(widget);
+              output.onSearchCanceled = widget.onSearchCanceled.bind(widget);
+            })}>
+          </devtools-widget>`
+        : input.profileDataGridTree ?  html`
+          <div class="data-grid-target vbox flex-auto">${renderDataGrid(input)}</div>`
+        : nothing}
+    </devtools-widget>`, target);
+  // clang-format on
+};
+
+function renderDataGrid(input: ViewInput): LitTemplate {
+  if (!input.profileDataGridTree) {
+    return nothing;
+  }
+
+  let highlightIndex = -1;
+  if (input.profileDataGridTree && input.profileDataGridTree.searchResults) {
+    highlightIndex = input.profileDataGridTree.searchResultIndex + 1;
+  }
+  // clang-format off
+  return html`
+    <style>${profilesPanelStyles}</style>
+    <devtools-data-grid class="flex-auto" name=${i18nString(UIStrings.profiler)} striped autofocus resize="last"
+                        highlight=${highlightIndex >= 1 ? highlightIndex : nothing}
+                        @deselect=${input.onDeselect} .template=${html`
+      <style>${profilesPanelStyles}</style>
+      <table>
+        <tr>
+          <th id="self" width="120px" fixed weight="1" sortable sort="descending">
+            ${input.columnHeader('self')}
+          </th>
+          <th id="total" width="120px" fixed weight="1" sortable>
+            ${input.columnHeader('total')}
+          </th>
+          <th id="function" weight="3" sortable disclosure>
+            ${i18nString(UIStrings.function)}
+          </th>
+        </tr>
+        ${repeat(input.profileDataGridTree.children,
+                (node: ProfileEntry) => node.callUID,
+                (node: ProfileEntry) => renderNode(node, input))}
+      </table>`}>
+    </devtools-data-grid>`;
+  // clang-format on
+}
+
+function renderNode(node: ProfileEntry, input: ViewInput): LitTemplate {
+  const onSelect = (): void => {
+    input.onSelect(node);
+  };
+  const onContextMenu = (event: CustomEvent<UI.ContextMenu.ContextMenu>): void => {
+    input.onContextMenu(event, node);
+  };
+  const onExpand = (): void => {
+    input.onExpand(node);
+  };
+  const onCollapse = (): void => {
+    input.onCollapse(node);
+  };
+
+  // clang-format off
+  return html`
+  <tr data-uid=${node.callUID} ?selected=${input.selectedNode === node} ?expanded=${node.expanded}
+      ?highlighted=${node.searchMatchedSelfColumn || node.searchMatchedTotalColumn || node.searchMatchedFunctionColumn}
+      @select=${onSelect}
+      @contextmenu=${onContextMenu}
+      @expand=${onExpand} @collapse=${onCollapse}>
+    <td data-value=${node.self} class="numeric-column ${node.searchMatchedSelfColumn ? 'highlight' : ''}"
+        aria-label=${`${input.nodeFormatter.formatValueAccessibleText(node.self, node)}, ${input.nodeFormatter.formatPercent(node.selfPercent, node)}`}>
+      <div class="profile-multiple-values">
+        <span>${input.nodeFormatter.formatValue(node.self, node)}</span>
+        <span class="percent-column">${input.nodeFormatter.formatPercent(node.selfPercent, node)}</span>
+      </div>
+    </td>
+    <td data-value=${node.total} class="numeric-column ${node.searchMatchedTotalColumn ? 'highlight' : ''}"
+        aria-label=${`${input.nodeFormatter.formatValueAccessibleText(node.total, node)}, ${input.nodeFormatter.formatPercent(node.totalPercent, node)}`}>
+      <div class="profile-multiple-values">
+        <span>${input.nodeFormatter.formatValue(node.total, node)}</span>
+        <span class="percent-column">${input.nodeFormatter.formatPercent(node.totalPercent, node)}</span>
+      </div>
+    </td>
+    <td data-value=${node.functionName} class="${node.searchMatchedFunctionColumn ? 'highlight' : ''} ${node.deoptReason ? 'not-optimized' : ''}">
+      ${node.deoptReason ? html`
+        <devtools-icon name="warning-filled" class="profile-warn-marker small"
+                        title=${i18nString(UIStrings.notOptimizedS, {PH1: node.deoptReason})}>
+        </devtools-icon>` : nothing}
+      ${node.functionName}
+      ${node.profileNode.scriptId !== '0' && node.profileNode.callFrame ? widget(Components.Linkifier.ScriptLocationLink, {
+        target: input.target ?? undefined,
+        scriptId: node.profileNode.callFrame.scriptId,
+        sourceURL: node.profileNode.callFrame.url as Platform.DevToolsPath.UrlString,
+        lineNumber: node.profileNode.callFrame.lineNumber,
+        options: {
+          columnNumber: node.profileNode.callFrame.columnNumber,
+          maxLength: maxLinkLength,
+          className: 'profile-node-file',
+        },
+      }) : nothing}
+    </td>
+    ${node.hasChildren() ? html`
+      <td><table>
+        ${node.expanded ? html`${repeat(
+            node.children,
+            child => child.callUID,
+            child => renderNode(child, input))}` : nothing}
+      </table></td>` : nothing}
+  </tr>`;
+  // clang-format on
+}
+
 export class HeapProfileView extends UI.View.SimpleView implements UI.SearchableView.Searchable {
   profileHeader: SamplingHeapProfileHeader;
   readonly profileType: SamplingHeapProfileTypeBase;
@@ -200,48 +363,44 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
   readonly timelineOverview: HeapTimelineOverview = new HeapTimelineOverview();
   profileInternal: CPUProfile.ProfileTreeModel.ProfileTreeModel|null = null;
   searchableViewInternal!: UI.SearchableView.SearchableView;
-  dataGrid: UI.Widget.Widget;
   viewSelectComboBox: HTMLSelectElement|undefined;
   focusButton: Buttons.Button.Button|undefined;
   excludeButton: Buttons.Button.Button|undefined;
   resetButton: Buttons.Button.Button|undefined;
-  #sortColumnId = 'self';
-  #sortAscending = false;
-  #selectedNode: ProfileDataGridNode|null = null;
+
+  #selectedNode: ProfileEntry|null = null;
 
   readonly linkifierInternal: Components.Linkifier.Linkifier = new Components.Linkifier.Linkifier(maxLinkLength);
-  nodeFormatter!: NodeFormatter;
+
   viewType!: Common.Settings.Setting<ViewTypes>;
   bottomUpProfileDataGridTree?: BottomUpProfileDataGridTree|null;
   topDownProfileDataGridTree?: TopDownProfileDataGridTree|null;
   currentSearchResultIndex?: number;
   dataProvider?: ProfileFlameChartDataProvider;
-  flameChart?: ProfileFlameChart;
-  visibleView?: UI.Widget.Widget;
-  searchableElement?: ProfileDataGridTree|ProfileFlameChart;
   profileDataGridTree?: ProfileDataGridTree;
 
   #isNodeSelected = false;
+  #view: View;
+  #viewOutput: ViewOutput = {};
+
   #isResetEnabled = false;
   #selectedSize: number|null = null;
   #minId: number|null = null;
   #maxId: number|null = null;
+  #range?: {left: number, right: number};
   #lastAppliedRange: {minId: number, maxId: number}|null = null;
   #lastAppliedViewType: ViewTypes|null = null;
 
-  constructor(profileHeader: SamplingHeapProfileHeader) {
+  constructor(profileHeader: SamplingHeapProfileHeader, view: View = DEFAULT_VIEW) {
     super({
       title: i18nString(UIStrings.profile),
       viewId: 'profile',
     });
-
-    this.#setupSearchableView();
-
-    this.dataGrid = new UI.Widget.VBox();
+    this.#view = view;
 
     this.profileHeader = profileHeader;
     this.profileType = profileHeader.profileType();
-    this.initialize(new NodeFormatter(this));
+    this.initialize();
     const profile = new SamplingHeapProfileModel(convertToSamplingHeapProfile(profileHeader));
     this.adjustedTotal = profile.total;
     this.setProfile(profile);
@@ -252,7 +411,6 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
   #setupTimelineOverview(): void {
     if (this.profileType.hasTemporaryView()) {
       this.timelineOverview.addEventListener(Events.IDS_RANGE_CHANGED, this.onIdsRangeChanged.bind(this));
-      this.timelineOverview.show(this.element, this.element.firstChild);
       this.timelineOverview.start();
 
       this.profileType.addEventListener(SamplingHeapProfileType.Events.STATS_UPDATE, this.onStatsUpdate, this);
@@ -264,118 +422,6 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
     }
   }
 
-  #setupSearchableView(): void {
-    this.searchableViewInternal = new UI.SearchableView.SearchableView(this, null);
-    this.searchableViewInternal.setPlaceholder(i18nString(UIStrings.findByCostMsNameOrFile));
-    this.searchableViewInternal.show(this.element);
-  }
-
-  #renderDataGrid(): void {
-    if (!this.profileDataGridTree) {
-      return;
-    }
-    const onSort = (e: CustomEvent<{columnId: string, ascending: boolean}>): void => {
-      this.#sortColumnId = e.detail.columnId;
-      this.#sortAscending = e.detail.ascending;
-      this.sortProfile();
-    };
-
-    const onDeselect = (): void => {
-      this.#selectedNode = null;
-      this.nodeSelected(false);
-    };
-
-    // clang-format off
-    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-    render(html`
-      <devtools-data-grid class="flex-auto" name=${i18nString(UIStrings.profiler)} striped autofocus resize="last"
-                          @sort=${onSort} @deselect=${onDeselect} .template=${html`
-        <table>
-          <tr>
-            <th id="self" width="120px" fixed weight="1" sortable
-                sort=${this.#sortColumnId === 'self' ? (this.#sortAscending ? 'ascending' : 'descending') : 'none'}>
-              ${this.columnHeader('self')}
-            </th>
-            <th id="total" width="120px" fixed weight="1" sortable
-                sort=${this.#sortColumnId === 'total' ? (this.#sortAscending ? 'ascending' : 'descending') : 'none'}>
-              ${this.columnHeader('total')}
-            </th>
-            <th id="function" weight="3" sortable disclosure
-                sort=${this.#sortColumnId === 'function' ? (this.#sortAscending ? 'ascending' : 'descending') : 'none'}>
-              ${i18nString(UIStrings.function)}
-            </th>
-          </tr>
-          ${repeat(this.profileDataGridTree.children,
-                   (node: ProfileDataGridNode) => node.callUID,
-                   (node: ProfileDataGridNode) => this.#renderNode(node))}
-        </table>`}>
-      </devtools-data-grid>
-    `, this.dataGrid.element);
-    // clang-format on
-  }
-
-  #renderNode(node: ProfileDataGridNode): TemplateResult {
-    const onSelect = (): void => {
-      this.#selectedNode = node;
-      this.nodeSelected(true);
-    };
-    const onContextMenu = (event: CustomEvent<UI.ContextMenu.ContextMenu>): void => {
-      this.populateContextMenu(event.detail, node);
-    };
-    const onExpand = (): void => {
-      node.expanded = true;
-      node.populate();
-      this.refresh();
-    };
-    const onCollapse = (): void => {
-      node.expanded = false;
-      this.refresh();
-    };
-
-    if (node.profileNode.scriptId !== '0' && !node.linkElement) {
-      node.linkElement = this.nodeFormatter.linkifyNode(node);
-      if (node.linkElement) {
-        (node.linkElement as HTMLElement).style.maxWidth = '75%';
-      }
-    }
-
-    // clang-format off
-    return html`
-      <tr data-uid=${node.callUID} ?selected=${this.#selectedNode === node} ?expanded=${node.expanded} @select=${onSelect}
-          @contextmenu=${onContextMenu} @expand=${onExpand} @collapse=${onCollapse}>
-        <td data-value=${node.self} class="numeric-column ${node.searchMatchedSelfColumn ? 'highlight' : ''}"
-            aria-label=${`${this.nodeFormatter.formatValueAccessibleText(node.self)}, ${this.nodeFormatter.formatPercent(node.selfPercent, node)}`}>
-          <div class="profile-multiple-values">
-            <span>${this.nodeFormatter.formatValue(node.self)}</span>
-            <span class="percent-column">${this.nodeFormatter.formatPercent(node.selfPercent, node)}</span>
-          </div>
-        </td>
-        <td data-value=${node.total} class="numeric-column ${node.searchMatchedTotalColumn ? 'highlight' : ''}"
-            aria-label=${`${this.nodeFormatter.formatValueAccessibleText(node.total)}, ${this.nodeFormatter.formatPercent(node.totalPercent, node)}`}>
-          <div class="profile-multiple-values">
-            <span>${this.nodeFormatter.formatValue(node.total)}</span>
-            <span class="percent-column">${this.nodeFormatter.formatPercent(node.totalPercent, node)}</span>
-          </div>
-        </td>
-        <td data-value=${node.functionName} class="${node.searchMatchedFunctionColumn ? 'highlight' : ''} ${node.deoptReason ? 'not-optimized' : ''}">
-          ${node.deoptReason ? html`
-            <devtools-icon name="warning-filled" class="profile-warn-marker small"
-                           title=${i18nString(UIStrings.notOptimizedS, {PH1: node.deoptReason})}>
-            </devtools-icon>` : nothing}
-          ${node.functionName}
-          ${node.linkElement ? node.linkElement : nothing}
-        </td>
-        ${node.hasChildren() ? html`
-          <td><table>
-            ${node.expanded ? html`${repeat(
-                node.children as ProfileDataGridNode[],
-                child => child.callUID,
-                child => this.#renderNode(child))}` : nothing}
-          </table></td>` : nothing}
-      </tr>`;
-    // clang-format on
-  }
-
   override async toolbarItems(): Promise<TemplateResult> {
     const currentViewType = this.viewType.get();
     const isFlame = currentViewType === ViewTypes.FLAME;
@@ -503,14 +549,15 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
   static buildPopoverTable(popoverInfo: Array<{
     title: string,
     value: string,
-  }>): Element {
-    const table = document.createElement('table');
-    for (const entry of popoverInfo) {
-      const row = table.createChild('tr');
-      row.createChild('td').textContent = entry.title;
-      row.createChild('td').textContent = entry.value;
-    }
-    return table;
+  }>): TemplateResult {
+    return html`<table>
+      ${popoverInfo.map(entry => html`
+        <tr>
+          <td>${entry.title}</td>
+          <td>${entry.value}</td>
+        </tr>
+      `)}
+    </table>`;
   }
 
   setProfile(profile: CPUProfile.ProfileTreeModel.ProfileTreeModel): void {
@@ -525,56 +572,50 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
     return this.profileInternal;
   }
 
-  initialize(nodeFormatter: NodeFormatter): void {
-    this.nodeFormatter = nodeFormatter;
-
+  initialize(): void {
     this.viewType = Common.Settings.Settings.instance().createSetting('profile-view', ViewTypes.HEAVY);
 
     this.changeView();
-    if (this.flameChart) {
-      this.flameChart.update();
-    }
-  }
-
-  override focus(): void {
-    if (this.flameChart) {
-      this.flameChart.focus();
-    } else {
-      super.focus();
-    }
   }
 
   selectRange(timeLeft: number, timeRight: number): void {
-    if (!this.flameChart) {
-      return;
-    }
-    this.flameChart.selectRange(timeLeft, timeRight);
+    this.#range = {left: timeLeft, right: timeRight};
+    this.performUpdate();
   }
 
-  getBottomUpProfileDataGridTree(): ProfileDataGridTree {
+  getBottomUpProfileDataGridTree(): ProfileDataGridTree|undefined {
+    if (!this.searchableViewInternal) {
+      return undefined;
+    }
     if (!this.bottomUpProfileDataGridTree) {
       this.bottomUpProfileDataGridTree = new BottomUpProfileDataGridTree(
-          this.nodeFormatter, this.searchableViewInternal,
+          nodeFormatter, this.searchableViewInternal,
           (this.profileInternal as CPUProfile.ProfileTreeModel.ProfileTreeModel).root, this.adjustedTotal);
     }
     return this.bottomUpProfileDataGridTree;
   }
 
-  getTopDownProfileDataGridTree(): ProfileDataGridTree {
+  getTopDownProfileDataGridTree(): ProfileDataGridTree|undefined {
+    if (!this.searchableViewInternal) {
+      return undefined;
+    }
     if (!this.topDownProfileDataGridTree) {
       this.topDownProfileDataGridTree = new TopDownProfileDataGridTree(
-          this.nodeFormatter, this.searchableViewInternal,
+          nodeFormatter, this.searchableViewInternal,
           (this.profileInternal as CPUProfile.ProfileTreeModel.ProfileTreeModel).root, this.adjustedTotal);
     }
     return this.topDownProfileDataGridTree;
   }
 
-  populateContextMenu(contextMenu: UI.ContextMenu.ContextMenu,
-                      gridNode: DataGrid.DataGrid.DataGridNode<unknown>): void {
-    const node = (gridNode as ProfileDataGridNode);
-    if (node.linkElement) {
-      contextMenu.appendApplicableItems(node.linkElement);
+  populateContextMenu(contextMenu: UI.ContextMenu.ContextMenu, node: ProfileEntry): void {
+    const heapProfilerModel = this.profileHeader.heapProfilerModel();
+    const target = heapProfilerModel ? heapProfilerModel.target() : null;
+    const tempLinkifier = new Components.Linkifier.Linkifier();
+    const linkElement = tempLinkifier.maybeLinkifyConsoleCallFrame(target, node.profileNode.callFrame);
+    if (linkElement) {
+      contextMenu.appendApplicableItems(linkElement);
     }
+    tempLinkifier.dispose();
   }
 
   override willHide(): void {
@@ -586,15 +627,15 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
     if (!this.profileDataGridTree) {
       return;
     }
-    this.#renderDataGrid();
+    this.performUpdate();
   }
 
   refreshVisibleData(): void {
-    this.#renderDataGrid();
+    this.performUpdate();
   }
 
-  searchableView(): UI.SearchableView.SearchableView {
-    return this.searchableViewInternal;
+  searchableView(): UI.SearchableView.SearchableView|null {
+    return this.searchableViewInternal || null;
   }
 
   supportsCaseSensitiveSearch(): boolean {
@@ -610,46 +651,62 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
   }
 
   onSearchCanceled(): void {
-    if (this.searchableElement) {
-      this.searchableElement.onSearchCanceled();
-      this.refresh();
+    if (this.viewType.get() === ViewTypes.FLAME) {
+      this.#viewOutput.onSearchCanceled?.();
+    } else if (this.profileDataGridTree) {
+      this.profileDataGridTree.onSearchCanceled();
     }
+    this.refresh();
   }
 
   performSearch(searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards?: boolean): void {
-    if (this.searchableElement) {
-      this.searchableElement.performSearch(searchConfig, shouldJump, jumpBackwards);
+    if (this.viewType.get() !== ViewTypes.FLAME && this.profileDataGridTree) {
+      // 1. Delegate to model to find ALL matches (including virtualized ones) using complex query logic
+      this.profileDataGridTree.performSearch(searchConfig, shouldJump, jumpBackwards);
+
+      // 2. Guarantee Deep Matches: Expand ancestors of matching nodes if deep search is on
+      if (this.profileDataGridTree.deepSearch) {
+        for (const match of this.profileDataGridTree.searchResults) {
+          let parent = match.profileNode.parent;
+          while (parent && !(parent instanceof ProfileDataGridTree)) {
+            parent.expanded = true;
+            parent = parent.parent;
+          }
+        }
+      }
+      this.refresh();
+    } else if (this.viewType.get() === ViewTypes.FLAME) {
+      this.#viewOutput.performSearch?.(searchConfig, shouldJump, jumpBackwards);
       this.refresh();
     }
   }
 
   jumpToNextSearchResult(): void {
-    if (this.searchableElement) {
-      this.searchableElement.jumpToNextSearchResult();
-      this.#syncSearchSelection();
+    if (this.viewType.get() !== ViewTypes.FLAME && this.profileDataGridTree) {
+      if (!this.profileDataGridTree.searchResults?.length) {
+        return;
+      }
+      this.profileDataGridTree.searchResultIndex =
+          (this.profileDataGridTree.searchResultIndex + 1) % this.profileDataGridTree.searchResults.length;
+      this.searchableViewInternal.updateCurrentMatchIndex(this.profileDataGridTree.searchResultIndex);
+      this.refresh();
+    } else if (this.viewType.get() === ViewTypes.FLAME) {
+      this.#viewOutput.jumpToNextSearchResult?.();
     }
   }
 
   jumpToPreviousSearchResult(): void {
-    if (this.searchableElement) {
-      this.searchableElement.jumpToPreviousSearchResult();
-      this.#syncSearchSelection();
-    }
-  }
-
-  #syncSearchSelection(): void {
-    if (this.searchableElement === this.profileDataGridTree && this.profileDataGridTree) {
-      const searchResult = this.profileDataGridTree.searchResults[this.profileDataGridTree.searchResultIndex];
-      this.#selectedNode = searchResult?.profileNode || null;
-
-      let node = this.#selectedNode;
-      while (node?.parent) {
-        node.parent.expanded = true;
-        node = node.parent as ProfileDataGridNode;
+    if (this.viewType.get() !== ViewTypes.FLAME && this.profileDataGridTree) {
+      if (!this.profileDataGridTree.searchResults?.length) {
+        return;
       }
-
-      this.nodeSelected(!!this.#selectedNode);
+      this.profileDataGridTree.searchResultIndex =
+          (this.profileDataGridTree.searchResultIndex - 1 + this.profileDataGridTree.searchResults.length) %
+          this.profileDataGridTree.searchResults.length;
+      this.searchableViewInternal.updateCurrentMatchIndex(this.profileDataGridTree.searchResultIndex);
       this.refresh();
+    } else if (this.viewType.get() === ViewTypes.FLAME) {
+      this.#viewOutput.jumpToPreviousSearchResult?.();
     }
   }
 
@@ -658,21 +715,16 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
   }
 
   ensureFlameChartCreated(): void {
-    if (this.flameChart) {
+    if (this.dataProvider || !this.searchableViewInternal) {
       return;
     }
     this.dataProvider = this.createFlameChartDataProvider();
-    this.flameChart = new ProfileFlameChart(this.searchableViewInternal, this.dataProvider);
-    this.flameChart.addEventListener(PerfUI.FlameChart.Events.ENTRY_INVOKED, event => {
-      void this.onEntryInvoked(event);
-    });
   }
 
-  async onEntryInvoked(event: Common.EventTarget.EventTargetEvent<number>): Promise<void> {
+  async onEntryInvoked(entryIndex: number): Promise<void> {
     if (!this.dataProvider) {
       return;
     }
-    const entryIndex = event.data;
     const node = this.dataProvider.entryNodes[entryIndex];
     const debuggerModel = this.profileHeader.debuggerModel;
     if (!node || !node.scriptId || !debuggerModel) {
@@ -759,52 +811,27 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
     this.refreshVisibleData();
   }
 
-  sortProfile(): void {
-    if (!this.profileDataGridTree) {
-      return;
-    }
-    const sortAscending = this.#sortAscending;
-    const sortColumnId = this.#sortColumnId;
-    const sortProperty = sortColumnId === 'function' ? 'functionName' : sortColumnId || '';
-    this.profileDataGridTree.sort(ProfileDataGridTree.propertyComparator(sortProperty, sortAscending), false);
-
-    this.refresh();
-  }
-
   override performUpdate(): void {
     const currentViewType = this.viewType ? this.viewType.get() : null;
     if (currentViewType && currentViewType !== this.#lastAppliedViewType) {
-      this.searchableViewInternal.closeSearch();
-
-      if (this.visibleView) {
-        this.visibleView.detach();
-      }
+      this.searchableViewInternal?.closeSearch();
 
       switch (currentViewType) {
         case ViewTypes.FLAME:
           this.ensureFlameChartCreated();
-          this.visibleView = this.flameChart;
-          this.searchableElement = this.flameChart;
           break;
         case ViewTypes.TREE:
           this.profileDataGridTree = this.getTopDownProfileDataGridTree();
-          this.sortProfile();
-          this.visibleView = this.dataGrid;
-          this.searchableElement = this.profileDataGridTree;
           break;
         case ViewTypes.HEAVY:
           this.profileDataGridTree = this.getBottomUpProfileDataGridTree();
-          this.sortProfile();
-          this.visibleView = this.dataGrid;
-          this.searchableElement = this.profileDataGridTree;
           break;
       }
 
-      if (this.visibleView) {
-        this.visibleView.show(this.searchableViewInternal.element);
+      const initialized = currentViewType === ViewTypes.FLAME ? !!this.dataProvider : !!this.profileDataGridTree;
+      if (initialized) {
+        this.#lastAppliedViewType = currentViewType;
       }
-
-      this.#lastAppliedViewType = currentViewType;
     }
 
     const isFlame = currentViewType === ViewTypes.FLAME;
@@ -848,6 +875,52 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
 
       this.timelineOverview.setSamples(samples);
     }
+
+    const input: ViewInput = {
+      timelineOverview: this.timelineOverview,
+      searchable: this,
+      hasTemporaryView: this.profileType.hasTemporaryView(),
+      viewType: currentViewType,
+      range: this.#range,
+      profileDataGridTree: this.profileDataGridTree,
+      selectedNode: this.#selectedNode,
+      nodeFormatter,
+      columnHeader: this.columnHeader.bind(this),
+      searchableView: this.searchableViewInternal,
+      dataProvider: this.dataProvider,
+      target: this.profileHeader.heapProfilerModel()?.target() ?? null,
+      onExpand: (node: ProfileEntry) => {
+        node.expanded = true;
+        node.populate();
+        this.refresh();
+      },
+      onCollapse: (node: ProfileEntry) => {
+        node.expanded = false;
+        this.refresh();
+      },
+      onSelect: (node: ProfileEntry) => {
+        this.#selectedNode = node;
+        this.nodeSelected(true);
+      },
+      onDeselect: () => {
+        this.#selectedNode = null;
+        this.nodeSelected(false);
+      },
+      onContextMenu: (event: CustomEvent<UI.ContextMenu.ContextMenu>, node: ProfileEntry) => {
+        this.populateContextMenu(event.detail, node);
+      },
+      onSearchableViewMount: (widget: UI.SearchableView.SearchableView) => {
+        if (this.searchableViewInternal !== widget) {
+          this.searchableViewInternal = widget;
+          this.requestUpdate();
+        }
+      },
+      onFlameChartEntryInvoked: (entryIndex: number) => {
+        void this.onEntryInvoked(entryIndex);
+      },
+    };
+
+    this.#view(input, this.#viewOutput, this.contentElement);
   }
 }
 
@@ -1219,15 +1292,10 @@ export class SamplingHeapProfileModel extends CPUProfile.ProfileTreeModel.Profil
 }
 
 export class NodeFormatter implements Formatter {
-  readonly profileView: HeapProfileView;
   readonly #formattedValueCache = new Map<number, string>();
   readonly #formattedValueAccessibleTextCache = new Map<number, string>();
   readonly #formattedPercentCache = new Map<number, string>();
 
-  constructor(profileView: HeapProfileView) {
-    this.profileView = profileView;
-  }
-
   formatValue(value: number): string {
     let result = this.#formattedValueCache.get(value);
     if (!result) {
@@ -1246,7 +1314,7 @@ export class NodeFormatter implements Formatter {
     return result;
   }
 
-  formatPercent(value: number, _node: ProfileDataGridNode): string {
+  formatPercent(value: number, _node: ProfileEntry): string {
     let result = this.#formattedPercentCache.get(value);
     if (!result) {
       result = i18nString(UIStrings.formatPercent, {PH1: value.toFixed(2)});
@@ -1254,17 +1322,10 @@ export class NodeFormatter implements Formatter {
     }
     return result;
   }
-
-  linkifyNode(node: ProfileDataGridNode): Element|null {
-    const heapProfilerModel = this.profileView.profileHeader.heapProfilerModel();
-    const target = heapProfilerModel ? heapProfilerModel.target() : null;
-    const options = {
-      className: 'profile-node-file',
-    };
-    return this.profileView.linkifier().maybeLinkifyConsoleCallFrame(target, node.profileNode.callFrame, options);
-  }
 }
 
+export const nodeFormatter = new NodeFormatter();
+
 export class HeapFlameChartDataProvider extends ProfileFlameChartDataProvider {
   readonly profile: CPUProfile.ProfileTreeModel.ProfileTreeModel;
   readonly heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null;
@@ -1329,7 +1390,7 @@ export class HeapFlameChartDataProvider extends ProfileFlameChartDataProvider {
     return this.timelineDataInternal;
   }
 
-  override preparePopoverElement(entryIndex: number): Element|null {
+  override preparePopoverElement(entryIndex: number): TemplateResult|null {
     const node = this.entryNodes[entryIndex];
     if (!node) {
       return null;