chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/panels/profiler/HeapProfileView.ts

@@ -4,22 +4,29 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 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 SDK from '../../core/sdk/sdk.js';
 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 * 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, 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, ProfileDataGridNode} from './ProfileDataGrid.js';
-import {ProfileFlameChartDataProvider} from './ProfileFlameChartDataProvider.js';
+import {type Formatter, type ProfileDataGridNode, ProfileDataGridTree} from './ProfileDataGrid.js';
+import {ProfileFlameChart, ProfileFlameChartDataProvider} from './ProfileFlameChartDataProvider.js';
 import {ProfileEvents, type ProfileHeader, ProfileType} from './ProfileHeader.js';
-import {ProfileView, WritableProfileHeader} from './ProfileView.js';
+import {TopDownProfileDataGridTree} from './TopDownProfileDataGrid.js';
+import {WritableProfileHeader} from './WritableProfileHeader.js';
 
 const UIStrings = {
   /**
@@ -108,28 +115,117 @@ const UIStrings = {
    * @description Label for a checkbox in the memory panel to enable sampling heap profiler timeline.
    */
   samplingHeapProfilerTimeline: 'Sampling heap profiler timeline',
+  /**
+   * @description Text in Profile View of a profiler tool
+   */
+  profile: 'Profile',
+  /**
+   * @description Placeholder text in the search box of the JavaScript profiler tool. Users can search
+   *the results by the cost in milliseconds, the name of the function, or the file name.
+   */
+  findByCostMsNameOrFile: 'Find by cost (>50ms), name or file',
+  /**
+   * @description Text for a programming function
+   */
+  function: 'Function',
+  /**
+   * @description Title of the Profiler tool
+   */
+  profiler: 'Profiler',
+  /**
+   * @description Aria-label for profiles view combobox in memory tool
+   */
+  profileViewMode: 'Profile view mode',
+  /**
+   * @description Tooltip text that appears when hovering over the largeicon visibility button in the Profile View of a profiler tool
+   */
+  focusSelectedFunction: 'Focus selected function',
+  /**
+   * @description Tooltip text that appears when hovering over the largeicon delete button in the Profile View of a profiler tool
+   */
+  excludeSelectedFunction: 'Exclude selected function',
+  /**
+   * @description Tooltip text that appears when hovering over the largeicon refresh button in the Profile View of a profiler tool
+   */
+  restoreAllFunctions: 'Restore all functions',
+  /**
+   * @description Text in Profile View of a profiler tool
+   */
+  chart: 'Chart',
+  /**
+   * @description Text in Profile View of a profiler tool
+   */
+  heavyBottomUp: 'Heavy (Bottom Up)',
+  /**
+   * @description Text for selecting different profile views in the JS profiler tool. This option is a tree view.
+   */
+  treeTopDown: 'Tree (Top Down)',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/profiler/HeapProfileView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {ref} = Directives;
+
 function convertToSamplingHeapProfile(profileHeader: SamplingHeapProfileHeader):
     Protocol.HeapProfiler.SamplingHeapProfile {
   return (profileHeader.profile || profileHeader.protocolProfile()) as Protocol.HeapProfiler.SamplingHeapProfile;
 }
 
-export class HeapProfileView extends ProfileView implements UI.SearchableView.Searchable {
-  override profileHeader: SamplingHeapProfileHeader;
+export const maxLinkLength = 30;
+
+export const enum ViewTypes {
+  FLAME = 'Flame',
+  TREE = 'Tree',
+  HEAVY = 'Heavy',
+}
+
+export class HeapProfileView extends UI.View.SimpleView implements UI.SearchableView.Searchable {
+  profileHeader: SamplingHeapProfileHeader;
   readonly profileType: SamplingHeapProfileTypeBase;
-  override adjustedTotal: number;
-  readonly selectedSizeText: UI.Toolbar.ToolbarText;
-  timestamps: number[];
-  sizes: number[];
-  max: number[];
-  ordinals: number[];
-  totalTime: number;
-  lastOrdinal: number;
-  readonly timelineOverview: HeapTimelineOverview;
+  adjustedTotal: number;
+  selectedSizeText: HTMLElement|undefined;
+  timestamps: number[] = [];
+  sizes: number[] = [];
+  max: number[] = [];
+  ordinals: number[] = [];
+  totalTime = 0;
+  lastOrdinal = 0;
+  readonly timelineOverview: HeapTimelineOverview = new HeapTimelineOverview();
+  profileInternal: CPUProfile.ProfileTreeModel.ProfileTreeModel|null = null;
+  searchableViewInternal!: UI.SearchableView.SearchableView;
+  dataGrid: DataGrid.DataGrid.DataGridImpl<unknown>;
+  viewSelectComboBox: HTMLSelectElement|undefined;
+  focusButton!: UI.Toolbar.ToolbarButton;
+  excludeButton!: UI.Toolbar.ToolbarButton;
+  resetButton: Buttons.Button.Button|undefined;
+  readonly linkifierInternal: Components.Linkifier.Linkifier = new Components.Linkifier.Linkifier(maxLinkLength);
+  nodeFormatter!: Formatter;
+  viewType!: Common.Settings.Setting<ViewTypes>;
+  bottomUpProfileDataGridTree?: BottomUpProfileDataGridTree|null;
+  topDownProfileDataGridTree?: TopDownProfileDataGridTree|null;
+  currentSearchResultIndex?: number;
+  dataProvider?: ProfileFlameChartDataProvider;
+  flameChart?: ProfileFlameChart;
+  visibleView?: ProfileFlameChart|DataGrid.DataGrid.DataGridWidget<unknown>;
+  searchableElement?: ProfileDataGridTree|ProfileFlameChart;
+  profileDataGridTree?: ProfileDataGridTree;
+
+  #isNodeSelected = false;
+  #isResetEnabled = false;
+  #selectedSize: number|null = null;
+  #minId: number|null = null;
+  #maxId: number|null = null;
+  #lastAppliedRange: {minId: number, maxId: number}|null = null;
+  #lastAppliedViewType: ViewTypes|null = null;
+
   constructor(profileHeader: SamplingHeapProfileHeader) {
-    super();
+    super({
+      title: i18nString(UIStrings.profile),
+      viewId: 'profile',
+    });
+
+    this.#setupSearchableView();
+
+    this.dataGrid = this.#createDataGrid();
 
     this.profileHeader = profileHeader;
     this.profileType = profileHeader.profileType();
@@ -138,17 +234,10 @@ export class HeapProfileView extends ProfileView implements UI.SearchableView.Se
     this.adjustedTotal = profile.total;
     this.setProfile(profile);
 
-    this.selectedSizeText = new UI.Toolbar.ToolbarText();
-
-    this.timestamps = [];
-    this.sizes = [];
-    this.max = [];
-    this.ordinals = [];
-    this.totalTime = 0;
-    this.lastOrdinal = 0;
-
-    this.timelineOverview = new HeapTimelineOverview();
+    this.#setupTimelineOverview();
+  }
 
+  #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);
@@ -163,15 +252,113 @@ export class HeapProfileView extends ProfileView implements UI.SearchableView.Se
     }
   }
 
-  override async toolbarItems(): Promise<UI.Toolbar.ToolbarItem[]> {
-    return [...await super.toolbarItems(), this.selectedSizeText];
+  #setupSearchableView(): void {
+    this.searchableViewInternal = new UI.SearchableView.SearchableView(this, null);
+    this.searchableViewInternal.setPlaceholder(i18nString(UIStrings.findByCostMsNameOrFile));
+    this.searchableViewInternal.show(this.element);
+  }
+
+  #createDataGrid(): DataGrid.DataGrid.DataGridImpl<unknown> {
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [];
+    columns.push({
+      id: 'self',
+      title: this.columnHeader('self'),
+      width: '120px',
+      fixedWidth: true,
+      sortable: true,
+      sort: DataGrid.DataGrid.Order.Descending,
+    });
+    columns.push({
+      id: 'total',
+      title: this.columnHeader('total'),
+      width: '120px',
+      fixedWidth: true,
+      sortable: true,
+    });
+    columns.push({
+      id: 'function',
+      title: i18nString(UIStrings.function),
+      disclosure: true,
+      sortable: true,
+    });
+
+    const dataGrid = new DataGrid.DataGrid.DataGridImpl({
+      displayName: i18nString(UIStrings.profiler),
+      columns,
+    });
+    dataGrid.addEventListener(DataGrid.DataGrid.Events.SORTING_CHANGED, this.sortProfile, this);
+    dataGrid.addEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, this.nodeSelected.bind(this, true));
+    dataGrid.addEventListener(DataGrid.DataGrid.Events.DESELECTED_NODE, this.nodeSelected.bind(this, false));
+    dataGrid.setRowContextMenuCallback(this.populateContextMenu.bind(this));
+
+    return dataGrid;
+  }
+
+  override async toolbarItems(): Promise<TemplateResult> {
+    const currentViewType = this.viewType.get();
+    const isFlame = currentViewType === ViewTypes.FLAME;
+
+    // clang-format off
+    return html`
+      <select title=${i18nString(UIStrings.profileViewMode)} aria-label=${i18nString(UIStrings.profileViewMode)}
+              @change=${this.changeView.bind(this)}
+              jslog=${VisualLogging.dropDown('profile-view.selected-view').track({change: true})}
+              ${ref(e => { this.viewSelectComboBox = e as HTMLSelectElement; })}>
+        <option value=${ViewTypes.FLAME} ?selected=${currentViewType === ViewTypes.FLAME}>
+          ${i18nString(UIStrings.chart)}
+        </option>
+        <option value=${ViewTypes.HEAVY} ?selected=${currentViewType === ViewTypes.HEAVY}>
+          ${i18nString(UIStrings.heavyBottomUp)}
+        </option>
+        <option value=${ViewTypes.TREE} ?selected=${currentViewType === ViewTypes.TREE}>
+          ${i18nString(UIStrings.treeTopDown)}
+        </option>
+      </select>
+      <devtools-button .data=${{
+                         iconName: 'eye',
+                         variant: Buttons.Button.Variant.TOOLBAR,
+                         title: i18nString(UIStrings.focusSelectedFunction),
+                         jslogContext: 'profile-view.focus-selected-function',
+                         disabled: !this.#isNodeSelected,
+                       } as Buttons.Button.ButtonData}
+                       @click=${this.focusClicked.bind(this)}
+                       ?hidden=${isFlame}>
+      </devtools-button>
+      <devtools-button .data=${{
+                         iconName: 'cross',
+                         variant: Buttons.Button.Variant.TOOLBAR,
+                         title: i18nString(UIStrings.excludeSelectedFunction),
+                         jslogContext: 'profile-view.exclude-selected-function',
+                         disabled: !this.#isNodeSelected,
+                       } as Buttons.Button.ButtonData}
+                       @click=${this.excludeClicked.bind(this)}
+                       ?hidden=${isFlame}>
+      </devtools-button>
+      <devtools-button .data=${{
+                         iconName: 'refresh',
+                         variant: Buttons.Button.Variant.TOOLBAR,
+                         title: i18nString(UIStrings.restoreAllFunctions),
+                         jslogContext: 'profile-view.restore-all-functions',
+                         disabled: !this.#isResetEnabled,
+                       } as Buttons.Button.ButtonData}
+                       @click=${this.resetClicked.bind(this)}
+                       ?hidden=${isFlame}
+                       ${ref(e => {this.resetButton = e as Buttons.Button.Button; })}>
+        </devtools-button>
+      <span ${ref(e => { this.selectedSizeText = e as HTMLElement; })}>
+        ${this.#selectedSize !== null ?
+          i18nString(UIStrings.selectedSizeS, {PH1: i18n.ByteUtilities.bytesToString(this.#selectedSize)})
+          : nothing}
+      </span>`;
+    // clang-format on
   }
 
   onIdsRangeChanged(event: Common.EventTarget.EventTargetEvent<IdsRangeChangedEvent>): void {
     const {minId, maxId} = event.data;
-    this.selectedSizeText.setText(
-        i18nString(UIStrings.selectedSizeS, {PH1: i18n.ByteUtilities.bytesToString(event.data.size)}));
-    this.setSelectionRange(minId, maxId);
+    this.#selectedSize = event.data.size;
+    this.#minId = minId;
+    this.#maxId = maxId;
+    this.performUpdate();
   }
 
   setSelectionRange(minId: number, maxId: number): void {
@@ -199,8 +386,8 @@ export class HeapProfileView extends ProfileView implements UI.SearchableView.Se
     this.ordinals.push(this.lastOrdinal + 1);
     for (const sample of profile?.samples ?? []) {
       this.lastOrdinal = Math.max(this.lastOrdinal, sample.ordinal);
-      const bucket = Platform.ArrayUtilities.upperBound(
-                         this.ordinals, sample.ordinal, Platform.ArrayUtilities.DEFAULT_COMPARATOR) -
+      const bucket = Platform.ArrayUtilities.upperBound(this.ordinals, sample.ordinal,
+                                                        Platform.ArrayUtilities.DEFAULT_COMPARATOR) -
           1;
       this.sizes[bucket] += sample.size;
     }
@@ -211,18 +398,10 @@ export class HeapProfileView extends ProfileView implements UI.SearchableView.Se
       this.totalTime *= 2;
     }
 
-    const samples = ({
-      sizes: this.sizes,
-      max: this.max,
-      ids: this.ordinals,
-      timestamps: this.timestamps,
-      totalTime: this.totalTime,
-    } as Samples);
-
-    this.timelineOverview.setSamples(samples);
+    this.performUpdate();
   }
 
-  override columnHeader(columnId: string): Common.UIString.LocalizedString {
+  columnHeader(columnId: string): Common.UIString.LocalizedString {
     switch (columnId) {
       case 'self':
         return i18nString(UIStrings.selfSizeBytes);
@@ -232,9 +411,343 @@ export class HeapProfileView extends ProfileView implements UI.SearchableView.Se
     return Common.UIString.LocalizedEmptyString;
   }
 
-  override createFlameChartDataProvider(): ProfileFlameChartDataProvider {
-    return new HeapFlameChartDataProvider(
-        (this.profile() as SamplingHeapProfileModel), this.profileHeader.heapProfilerModel());
+  createFlameChartDataProvider(): ProfileFlameChartDataProvider {
+    return new HeapFlameChartDataProvider((this.profile() as SamplingHeapProfileModel),
+                                          this.profileHeader.heapProfilerModel());
+  }
+
+  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;
+  }
+
+  setProfile(profile: CPUProfile.ProfileTreeModel.ProfileTreeModel): void {
+    this.profileInternal = profile;
+    this.bottomUpProfileDataGridTree = null;
+    this.topDownProfileDataGridTree = null;
+    this.changeView();
+    this.refresh();
+  }
+
+  profile(): CPUProfile.ProfileTreeModel.ProfileTreeModel|null {
+    return this.profileInternal;
+  }
+
+  initialize(nodeFormatter: Formatter): void {
+    this.nodeFormatter = nodeFormatter;
+
+    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);
+  }
+
+  getBottomUpProfileDataGridTree(): ProfileDataGridTree {
+    if (!this.bottomUpProfileDataGridTree) {
+      this.bottomUpProfileDataGridTree = new BottomUpProfileDataGridTree(
+          this.nodeFormatter, this.searchableViewInternal,
+          (this.profileInternal as CPUProfile.ProfileTreeModel.ProfileTreeModel).root, this.adjustedTotal);
+    }
+    return this.bottomUpProfileDataGridTree;
+  }
+
+  getTopDownProfileDataGridTree(): ProfileDataGridTree {
+    if (!this.topDownProfileDataGridTree) {
+      this.topDownProfileDataGridTree = new TopDownProfileDataGridTree(
+          this.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);
+    }
+  }
+
+  override willHide(): void {
+    super.willHide();
+    this.currentSearchResultIndex = -1;
+  }
+
+  refresh(): void {
+    if (!this.profileDataGridTree) {
+      return;
+    }
+    this.dataGrid.rootNode().removeChildren();
+
+    const children = this.profileDataGridTree.children;
+    const count = children.length;
+
+    for (let index = 0; index < count; ++index) {
+      this.dataGrid.rootNode().appendChild(children[index]);
+    }
+  }
+
+  refreshVisibleData(): void {
+    let child: (DataGrid.DataGrid.DataGridNode<unknown>|null) = this.dataGrid.rootNode().children[0];
+    while (child) {
+      child.refresh();
+      child = child.traverseNextNode(false, null, true);
+    }
+  }
+
+  searchableView(): UI.SearchableView.SearchableView {
+    return this.searchableViewInternal;
+  }
+
+  supportsCaseSensitiveSearch(): boolean {
+    return true;
+  }
+
+  supportsWholeWordSearch(): boolean {
+    return false;
+  }
+
+  supportsRegexSearch(): boolean {
+    return false;
+  }
+
+  onSearchCanceled(): void {
+    if (this.searchableElement) {
+      this.searchableElement.onSearchCanceled();
+    }
+  }
+
+  performSearch(searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards?: boolean): void {
+    if (this.searchableElement) {
+      this.searchableElement.performSearch(searchConfig, shouldJump, jumpBackwards);
+    }
+  }
+
+  jumpToNextSearchResult(): void {
+    if (this.searchableElement) {
+      this.searchableElement.jumpToNextSearchResult();
+    }
+  }
+
+  jumpToPreviousSearchResult(): void {
+    if (this.searchableElement) {
+      this.searchableElement.jumpToPreviousSearchResult();
+    }
+  }
+
+  linkifier(): Components.Linkifier.Linkifier {
+    return this.linkifierInternal;
+  }
+
+  ensureFlameChartCreated(): void {
+    if (this.flameChart) {
+      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> {
+    if (!this.dataProvider) {
+      return;
+    }
+    const entryIndex = event.data;
+    const node = this.dataProvider.entryNodes[entryIndex];
+    const debuggerModel = this.profileHeader.debuggerModel;
+    if (!node || !node.scriptId || !debuggerModel) {
+      return;
+    }
+    const script = debuggerModel.scriptForId(node.scriptId);
+    if (!script) {
+      return;
+    }
+    const location = (debuggerModel.createRawLocation(script, node.lineNumber, node.columnNumber));
+    const uiLocation =
+        await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(location);
+    void Common.Revealer.reveal(uiLocation);
+  }
+
+  changeView(): void {
+    if (!this.profileInternal) {
+      return;
+    }
+
+    if (this.viewSelectComboBox) {
+      this.viewType.set(this.viewSelectComboBox.value as ViewTypes);
+    }
+    this.performUpdate();
+  }
+
+  nodeSelected(selected: boolean): void {
+    this.#isNodeSelected = selected;
+    this.performUpdate();
+  }
+
+  focusClicked(): void {
+    if (!this.dataGrid.selectedNode) {
+      return;
+    }
+
+    this.#isResetEnabled = true;
+    this.performUpdate();
+    this.resetButton?.focus();
+    if (this.profileDataGridTree) {
+      this.profileDataGridTree.focus((this.dataGrid.selectedNode as ProfileDataGridNode));
+    }
+    this.refresh();
+    this.refreshVisibleData();
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.CpuProfileNodeFocused);
+  }
+
+  excludeClicked(): void {
+    const selectedNode = this.dataGrid.selectedNode;
+
+    if (!selectedNode) {
+      return;
+    }
+
+    this.#isResetEnabled = true;
+    this.performUpdate();
+    this.resetButton?.focus();
+
+    selectedNode.deselect();
+
+    if (this.profileDataGridTree) {
+      this.profileDataGridTree.exclude((selectedNode as ProfileDataGridNode));
+    }
+    this.refresh();
+    this.refreshVisibleData();
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.CpuProfileNodeExcluded);
+  }
+
+  resetClicked(): void {
+    this.viewSelectComboBox?.focus();
+    this.#isResetEnabled = false;
+    this.performUpdate();
+    if (this.profileDataGridTree) {
+      this.profileDataGridTree.restore();
+    }
+    this.linkifierInternal.reset();
+    this.refresh();
+    this.refreshVisibleData();
+  }
+
+  sortProfile(): void {
+    if (!this.profileDataGridTree) {
+      return;
+    }
+    const sortAscending = this.dataGrid.isSortOrderAscending();
+    const sortColumnId = this.dataGrid.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();
+      }
+
+      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.asWidget();
+          this.searchableElement = this.profileDataGridTree;
+          break;
+        case ViewTypes.HEAVY:
+          this.profileDataGridTree = this.getBottomUpProfileDataGridTree();
+          this.sortProfile();
+          this.visibleView = this.dataGrid.asWidget();
+          this.searchableElement = this.profileDataGridTree;
+          break;
+      }
+
+      if (this.visibleView) {
+        this.visibleView.show(this.searchableViewInternal.element);
+      }
+
+      this.#lastAppliedViewType = currentViewType;
+    }
+
+    const isFlame = currentViewType === ViewTypes.FLAME;
+    const isTreeOrHeavy = !isFlame;
+
+    this.focusButton?.setVisible(isTreeOrHeavy);
+    this.excludeButton?.setVisible(isTreeOrHeavy);
+    this.resetButton?.classList.toggle('hidden', !isTreeOrHeavy);
+
+    this.focusButton?.setEnabled(this.#isNodeSelected);
+    this.excludeButton?.setEnabled(this.#isNodeSelected);
+
+    if (this.resetButton) {
+      this.resetButton.disabled = !this.#isResetEnabled;
+    }
+
+    if (this.#selectedSize !== null && this.selectedSizeText) {
+      this.selectedSizeText.textContent =
+          i18nString(UIStrings.selectedSizeS, {PH1: i18n.ByteUtilities.bytesToString(this.#selectedSize)});
+    }
+
+    if (this.#minId !== null && this.#maxId !== null) {
+      const rangeChanged = !this.#lastAppliedRange || this.#lastAppliedRange.minId !== this.#minId ||
+          this.#lastAppliedRange.maxId !== this.#maxId;
+
+      if (rangeChanged) {
+        this.setSelectionRange(this.#minId, this.#maxId);
+        this.#lastAppliedRange = {minId: this.#minId, maxId: this.#maxId};
+      }
+    }
+
+    if (this.sizes.length > 0) {
+      const samples = ({
+        sizes: this.sizes,
+        max: this.max,
+        ids: this.ordinals,
+        timestamps: this.timestamps,
+        totalTime: this.totalTime,
+      } as Samples);
+
+      this.timelineOverview.setSamples(samples);
+    }
   }
 }
 
@@ -637,9 +1150,8 @@ export class HeapFlameChartDataProvider extends ProfileFlameChartDataProvider {
   readonly profile: CPUProfile.ProfileTreeModel.ProfileTreeModel;
   readonly heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null;
 
-  constructor(
-      profile: CPUProfile.ProfileTreeModel.ProfileTreeModel,
-      heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null) {
+  constructor(profile: CPUProfile.ProfileTreeModel.ProfileTreeModel,
+              heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null) {
     super();
     this.profile = profile;
     this.heapProfilerModel = heapProfilerModel;
@@ -714,12 +1226,12 @@ export class HeapFlameChartDataProvider extends ProfileFlameChartDataProvider {
     pushRow(i18nString(UIStrings.selfSize), i18n.ByteUtilities.bytesToString(node.self));
     pushRow(i18nString(UIStrings.totalSize), i18n.ByteUtilities.bytesToString(node.total));
     const linkifier = new Components.Linkifier.Linkifier();
-    const link = linkifier.maybeLinkifyConsoleCallFrame(
-        this.heapProfilerModel ? this.heapProfilerModel.target() : null, node.callFrame);
+    const link = linkifier.maybeLinkifyConsoleCallFrame(this.heapProfilerModel ? this.heapProfilerModel.target() : null,
+                                                        node.callFrame);
     if (link) {
       pushRow(i18nString(UIStrings.url), link.textContent);
     }
     linkifier.dispose();
-    return ProfileView.buildPopoverTable(popoverInfo);
+    return HeapProfileView.buildPopoverTable(popoverInfo);
   }
 }