chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/panels/network/EventSourceMessagesView.ts

@@ -1,20 +1,22 @@
 // Copyright 2014 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/legacy/legacy.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';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import eventSourceMessagesViewStyles from './eventSourceMessagesView.css.js';
 
+const {repeat} = Directives;
+
 const UIStrings = {
   /**
    * @description Text in Event Source Messages View of the Network panel
@@ -51,67 +53,89 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/EventSourceMessagesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface ViewInput {
+  messages: readonly SDK.NetworkRequest.EventSourceMessage[];
+  filterSetting: Common.Settings.Setting<string>;
+  onClear: () => void;
+  onFilterChanged: (event: Event) => void;
+  onRowContextMenu: (message: SDK.NetworkRequest.EventSourceMessage, event: MouseEvent) => void;
+}
+
+export type View = (input: ViewInput, output: unknown, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <style>
+      ${eventSourceMessagesViewStyles}
+    </style>
+    <div class="event-source-messages-view">
+      <devtools-toolbar>
+        <devtools-button title=${i18nString(UIStrings.clearAll)} .iconName=${'clear'}
+            @click=${input.onClear}
+            .variant=${Buttons.Button.Variant.TOOLBAR}
+            .jslogContext=${'clear'}></devtools-button>
+        <devtools-toolbar-input
+            type="filter"
+            placeholder=${i18nString(UIStrings.filterByRegex)}
+            @change=${input.onFilterChanged}
+            .value=${input.filterSetting.get()}
+            style="flex-grow: 0.4"></devtools-toolbar-input>
+      </devtools-toolbar>
+      <devtools-data-grid name=${i18nString(UIStrings.eventSource)} autoscroll striped
+        .template=${html`
+          <table>
+            <thead>
+              <tr>
+                <th id="id" weight="8" sortable>${i18nString(UIStrings.id)}</th>
+                <th id="type" weight="8" sortable>${i18nString(UIStrings.type)}</th>
+                <th id="data" weight="88">${i18nString(UIStrings.data)}</th>
+                <th id="time" weight="8" sortable sort="ascending">${i18nString(UIStrings.time)}</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${repeat(input.messages, message => message, message => {
+                const date = new Date(message.time * 1000);
+                return html`<tr @contextmenu=${(e: MouseEvent) => {
+                                e.preventDefault();
+                                input.onRowContextMenu(message, e);
+                              }}>
+                                <td>${message.eventId}</td>
+                                <td>${message.eventName}</td>
+                                <td>${message.data}</td>
+                                <td title=${date.toLocaleString()} data-value=${message.time}>${formatTime(date)}</td></tr>`;
+              })}
+            </tbody>
+          </table>
+        `}>
+      </devtools-data-grid>
+    </div>
+  `, target);
+  // clang-format on
+};
+
 export class EventSourceMessagesView extends UI.Widget.VBox {
   private readonly request: SDK.NetworkRequest.NetworkRequest;
-  private dataGrid: DataGrid.SortableDataGrid.SortableDataGrid<EventSourceMessageNode>;
-  private readonly mainToolbar: UI.Toolbar.Toolbar;
-  private readonly clearAllButton: UI.Toolbar.ToolbarButton;
-  private readonly filterTextInput: UI.Toolbar.ToolbarInput;
-  private filterRegex: RegExp|null;
+  private messageFilterSetting: Common.Settings.Setting<string>;
+  private filterRegex: RegExp|null = null;
+  #view: View;
 
-  private messageFilterSetting: Common.Settings.Setting<string> =
-      Common.Settings.Settings.instance().createSetting('network-event-source-message-filter', '');
-
-  constructor(request: SDK.NetworkRequest.NetworkRequest) {
+  constructor(request: SDK.NetworkRequest.NetworkRequest, view: View = DEFAULT_VIEW) {
     super({jslog: `${VisualLogging.pane('event-stream').track({resize: true})}`});
-    this.registerRequiredCSS(eventSourceMessagesViewStyles);
-
-    this.element.classList.add('event-source-messages-view');
+    this.#view = view;
     this.request = request;
 
-    this.mainToolbar = this.element.createChild('devtools-toolbar');
-
-    this.clearAllButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearAll), 'clear');
-    this.clearAllButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.clearMessages, this);
-    this.mainToolbar.appendToolbarItem(this.clearAllButton);
-
-    const placeholder = i18nString(UIStrings.filterByRegex);
-    this.filterTextInput = new UI.Toolbar.ToolbarFilter(placeholder, 0.4);
-    this.filterTextInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.updateFilterSetting, this);
+    this.messageFilterSetting =
+        Common.Settings.Settings.instance().createSetting('network-event-source-message-filter', '');
     const filter = this.messageFilterSetting.get();
-    this.filterRegex = null;
     this.setFilter(filter);
-    if (filter) {
-      this.filterTextInput.setValue(filter);
-    }
-    this.mainToolbar.appendToolbarItem(this.filterTextInput);
-
-    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [
-      {id: 'id', title: i18nString(UIStrings.id), sortable: true, weight: 8},
-      {id: 'type', title: i18nString(UIStrings.type), sortable: true, weight: 8},
-      {id: 'data', title: i18nString(UIStrings.data), sortable: false, weight: 88},
-      {id: 'time', title: i18nString(UIStrings.time), sortable: true, weight: 8},
-    ];
-
-    this.dataGrid = new DataGrid.SortableDataGrid.SortableDataGrid({
-      displayName: i18nString(UIStrings.eventSource),
-      columns,
-    });
-    this.dataGrid.setStriped(true);
-    this.dataGrid.setEnableAutoScrollToBottom(true);
-    this.dataGrid.setRowContextMenuCallback(this.onRowContextMenu.bind(this));
-    this.dataGrid.markColumnAsSortedBy('time', DataGrid.DataGrid.Order.Ascending);
-    this.sortItems();
-    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SORTING_CHANGED, this.sortItems, this);
-
-    this.dataGrid.setName('event-source-messages-view');
-    this.dataGrid.asWidget().show(this.element);
   }
 
   override wasShown(): void {
     super.wasShown();
-    this.refresh();
     this.request.addEventListener(SDK.NetworkRequest.Events.EVENT_SOURCE_MESSAGE_ADDED, this.messageAdded, this);
+    this.requestUpdate();
   }
 
   override willHide(): void {
@@ -124,7 +148,7 @@ export class EventSourceMessagesView extends UI.Widget.VBox {
     if (!this.messageFilter(message)) {
       return;
     }
-    this.dataGrid.insertChild(new EventSourceMessageNode(message));
+    this.requestUpdate();
   }
 
   private messageFilter(message: SDK.NetworkRequest.EventSourceMessage): boolean {
@@ -134,14 +158,15 @@ export class EventSourceMessagesView extends UI.Widget.VBox {
 
   private clearMessages(): void {
     clearMessageOffsets.set(this.request, this.request.eventSourceMessages().length);
-    this.refresh();
+    this.requestUpdate();
   }
 
-  private updateFilterSetting(): void {
-    const text = this.filterTextInput.value();
+  private onFilterChanged(event: Event): void {
+    const inputElement = event.target as UI.Toolbar.ToolbarInputElement;
+    const text = inputElement.value;
     this.messageFilterSetting.set(text);
     this.setFilter(text);
-    this.refresh();
+    this.requestUpdate();
   }
 
   private setFilter(text: string): void {
@@ -156,71 +181,37 @@ export class EventSourceMessagesView extends UI.Widget.VBox {
     }
   }
 
-  private sortItems(): void {
-    const sortColumnId = this.dataGrid.sortColumnId();
-    if (!sortColumnId) {
-      return;
-    }
-    const comparator =
-        (Comparators[sortColumnId] as
-             ((arg0: DataGrid.SortableDataGrid.SortableDataGridNode<EventSourceMessageNode>,
-               arg1: DataGrid.SortableDataGrid.SortableDataGridNode<EventSourceMessageNode>) => number) |
-         undefined);
-    if (!comparator) {
-      return;
-    }
-    this.dataGrid.sortNodes(comparator, !this.dataGrid.isSortOrderAscending());
-  }
-
-  private onRowContextMenu(
-      contextMenu: UI.ContextMenu.ContextMenu,
-      node: DataGrid.DataGrid.DataGridNode<DataGrid.ViewportDataGrid.ViewportDataGridNode<
-          DataGrid.SortableDataGrid.SortableDataGridNode<EventSourceMessageNode>>>): void {
+  private onRowContextMenu(message: SDK.NetworkRequest.EventSourceMessage, event: MouseEvent): void {
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.clipboardSection().appendItem(
         i18nString(UIStrings.copyMessage),
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText.bind(
-            Host.InspectorFrontendHost.InspectorFrontendHostInstance, node.data.data),
+            Host.InspectorFrontendHost.InspectorFrontendHostInstance, message.data),
         {jslogContext: 'copy'});
+    void contextMenu.show();
   }
 
-  refresh(): void {
-    this.dataGrid.rootNode().removeChildren();
-
+  override performUpdate(): void {
     let messages = this.request.eventSourceMessages();
     const offset = clearMessageOffsets.get(this.request) || 0;
     messages = messages.slice(offset);
     messages = messages.filter(this.messageFilter.bind(this));
-    messages.forEach(message => this.dataGrid.insertChild(new EventSourceMessageNode(message)));
-  }
-}
 
-export class EventSourceMessageNode extends DataGrid.SortableDataGrid.SortableDataGridNode<EventSourceMessageNode> {
-  readonly message: SDK.NetworkRequest.EventSourceMessage;
-
-  constructor(message: SDK.NetworkRequest.EventSourceMessage) {
-    const time = new Date(message.time * 1000);
-    const timeText = ('0' + time.getHours()).substr(-2) + ':' + ('0' + time.getMinutes()).substr(-2) + ':' +
-        ('0' + time.getSeconds()).substr(-2) + '.' + ('00' + time.getMilliseconds()).substr(-3);
-    const timeNode = document.createElement('div');
-    UI.UIUtils.createTextChild(timeNode, timeText);
-    UI.Tooltip.Tooltip.install(timeNode, time.toLocaleString());
-    super({id: message.eventId, type: message.eventName, data: message.data, time: timeNode});
-    this.message = message;
+    const input: ViewInput = {
+      messages,
+      filterSetting: this.messageFilterSetting,
+      onClear: this.clearMessages.bind(this),
+      onFilterChanged: this.onFilterChanged.bind(this),
+      onRowContextMenu: this.onRowContextMenu.bind(this),
+    };
+
+    this.#view(input, {}, this.contentElement);
   }
 }
 
-function eventSourceMessageNodeComparator(
-    fieldGetter: (arg0: SDK.NetworkRequest.EventSourceMessage) => (number | string), a: EventSourceMessageNode,
-    b: EventSourceMessageNode): number {
-  const aValue = fieldGetter(a.message);
-  const bValue = fieldGetter(b.message);
-  return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
+function formatTime(d: Date): string {
+  return ('0' + d.getHours()).substr(-2) + ':' + ('0' + d.getMinutes()).substr(-2) + ':' +
+      ('0' + d.getSeconds()).substr(-2) + '.' + ('00' + d.getMilliseconds()).substr(-3);
 }
 
-export const Comparators: Record<string, (arg0: EventSourceMessageNode, arg1: EventSourceMessageNode) => number> = {
-  id: eventSourceMessageNodeComparator.bind(null, message => message.eventId),
-  type: eventSourceMessageNodeComparator.bind(null, message => message.eventName),
-  time: eventSourceMessageNodeComparator.bind(null, message => message.time),
-};
-
 const clearMessageOffsets = new WeakMap<SDK.NetworkRequest.NetworkRequest, number>();

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -72,7 +72,7 @@ const UIStrings = {
   /**
    * @description Text in Timeline UIUtils of the Performance panel
    */
-  url: 'Url',
+  url: 'URL',
   /**
    * @description Column header in the Network log view of the Network panel
    */

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -137,7 +137,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
         NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER,
         {fillStyle: RequestTimeRangeNameToColor[NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER]});
     styleMap.set(NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_PREPARATION, {
-      fillStyle: RequestTimeRangeNameToColor[NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_PREPARATION]
+      fillStyle: RequestTimeRangeNameToColor[NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_PREPARATION],
     });
     styleMap.set(NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_RESPOND_WITH, {
       fillStyle: RequestTimeRangeNameToColor[NetworkTimeCalculator.RequestTimeRangeNames.SERVICE_WORKER_RESPOND_WITH],

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -199,7 +199,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
              onCancel: input.onCancel,
              onBeginEdit: input.onBeginEdit,
              validator: val => input.validator(condition, val),
-             lookUpRequestCount: input.lookUpRequestCount
+             lookUpRequestCount: input.lookUpRequestCount,
           })}
         </div>
       `)}
@@ -223,7 +223,7 @@ function renderItem({
   onCancel,
   onBeginEdit,
   validator,
-  lookUpRequestCount
+  lookUpRequestCount,
 }: {
   condition: SDK.NetworkManager.RequestCondition,
   editing: boolean,

package/front_end/panels/network/RequestCookiesView.ts

@@ -115,13 +115,13 @@ export const DEFAULT_VIEW: ViewFunction = (input, _output, target) => {
       ${input.requestCookies.cookies.length > 0 ? html`
         <devtools-widget ${widget(CookieTable.CookiesTable.CookiesTable, {
           cookiesData: input.requestCookies,
-          inline: true
+          inline: true,
         })} class="cookie-table cookies-panel-item"></devtools-widget>
       ` : Lit.nothing}
 
       <div class="cookies-panel-item site-has-cookies-in-other-partition ${input.siteHasCookieInOtherPartition ? '' : 'hidden'}">
         ${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.siteHasCookieInOtherPartition, {
-          PH1: html`<devtools-link href="https://developer.chrome.com/en/docs/privacy-sandbox/chips/" .jslogContext=${'learn-more'}>${i18nString(UIStrings.learnMore)}</devtools-link>`
+          PH1: html`<devtools-link href="https://developer.chrome.com/en/docs/privacy-sandbox/chips/" .jslogContext=${'learn-more'}>${i18nString(UIStrings.learnMore)}</devtools-link>`,
 })}
       </div>
 

package/front_end/panels/network/RequestHeadersView.ts

@@ -193,7 +193,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                 toReveal: input.toReveal,
               } as NetworkComponents.ResponseHeaderSection
               .ResponseHeaderSectionData}></devtools-early-hints-header-section>
-              `
+              `,
           })}
         ${renderCategory({
           name: 'response-headers',
@@ -212,7 +212,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             toReveal: input.toReveal,
           } as NetworkComponents.ResponseHeaderSection.ResponseHeaderSectionData} jslog=${
             VisualLogging.section('response-headers')}></devtools-response-header-section>
-            `
+            `,
         })}
         ${renderCategory({
           name: 'request-headers',
@@ -228,11 +228,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           <devtools-widget ${widget(NetworkComponents.RequestHeaderSection.RequestHeaderSection, {
               request: input.request,
               toReveal: input.toReveal,
-            })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>`
+            })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>`,
         })}
       `,
-      // clang-format on
-      target, {container: {attributes: {jslog: `${VisualLogging.pane('headers').track({resize: true})}`}}});
+         // clang-format on
+         target, {container: {attributes: {jslog: `${VisualLogging.pane('headers').track({resize: true})}`}}});
 };
 
 /**

package/front_end/panels/network/RequestPayloadView.ts

@@ -167,7 +167,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             @contextmenu=${copyValueContextmenu(
                 i18nString(UIStrings.copyValue),
                 () => decodeURIComponent(param.value),
-                'copy-value'
+                'copy-value',
             )}>
           ${param.name !== '' ? html`
             ${RequestPayloadView.formatParameter(param.name, 'payload-name', decodeParameters)}
@@ -175,7 +175,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           ` : RequestPayloadView.formatParameter(
               i18nString(UIStrings.empty),
               'empty-request-payload',
-              decodeParameters
+              decodeParameters,
           )}
         </li>
       `;
@@ -255,7 +255,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               {
                 decode: input.decodeQueryParameters,
                 toggleDecode: () => input.setDecodeQueryParameters(!input.decodeQueryParameters),
-              }
+              },
           )}
           @expanded=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) =>
             queryStringExpandedSetting.set(e.detail.expanded)}
@@ -287,7 +287,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               {
                 decode: input.decodeFormParameters,
                 toggleDecode: () => input.setDecodeFormParameters(!input.decodeFormParameters),
-              }
+              },
           )}
           @expanded=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => formDataExpandedSetting.set(e.detail.expanded)}
           ?open=${formDataExpandedSetting.get()}

package/front_end/panels/network/RequestTimingView.ts

@@ -457,7 +457,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
   const throttledRequestTitle = input.wasThrottled ? i18nString(UIStrings.wasThrottled, {
     PH1: typeof input.wasThrottled.conditions.title === 'string' ? input.wasThrottled.conditions.title :
-                                                                   input.wasThrottled.conditions.title()
+                                                                   input.wasThrottled.conditions.title(),
   }) :
                                                      undefined;
 
@@ -486,7 +486,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     <table
       class=${classes}
       jslog=${VisualLogging.pane('timing').track({
-        resize: true
+        resize: true,
       })}>
         <colgroup>
           <col class=labels>

package/front_end/panels/network/components/DirectSocketConnectionView.ts

@@ -290,7 +290,7 @@ export class DirectSocketConnectionView extends UI.Widget.Widget<ShadowRoot> {
       },
       onCopyRow: () => {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
-      }
+      },
     };
     this.#view(viewInput, undefined, this.contentElement);
   }

package/front_end/panels/network/eventSourceMessagesView.css

@@ -4,7 +4,16 @@
  * found in the LICENSE file.
  */
 
-.event-source-messages-view .data-grid {
-  flex: auto;
-  border: none;
+@scope to (devtools-widget > *) {
+  .event-source-messages-view {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .event-source-messages-view devtools-data-grid {
+    flex: auto;
+    border: none;
+  }
 }

package/front_end/panels/network/networkTimingTable.css

@@ -78,7 +78,7 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
 .network-timing-bar {
   position: absolute;
   min-width: 1px;
-  inset: 0 attr(data-right %) 0 attr(data-left %); /* stylelint-disable-line declaration-property-value-no-unknown */
+  inset: 0 attr(data-right %) 0 attr(data-left %);
 }
 
 .network-timing-bar-title {
@@ -218,7 +218,7 @@ td.throttled {
 }
 
 .network-timing-bar.server-timing {
-  background-color: attr(data-background type(<color>), var(--sys-color-neutral-container)); /* stylelint-disable-line declaration-property-value-no-unknown */
+  background-color: attr(data-background type(<color>), var(--sys-color-neutral-container));
 }
 
 tr.synthetic {

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -84,7 +84,7 @@ const DEFAULT_VIEW: PerformanceMonitorView = (input, output, target) => {
     <devtools-widget ${widget(ControlPane, {
       onMetricChanged: input.onMetricChanged,
       chartsInfo: input.chartsInfo,
-      metrics: input.metrics
+      metrics: input.metrics,
     })} class=${classMap({suspended: input.suspended})}></devtools-widget>
     <div class="perfmon-chart-container ${classMap({suspended: input.suspended})}">
       <canvas tabindex="-1" aria-label=${i18nString(UIStrings.graphsDisplayingARealtimeViewOf)}

package/front_end/panels/profiler/BottomUpProfileDataGrid.ts

@@ -36,7 +36,7 @@ import * as Platform from '../../core/platform/platform.js';
 import type * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
 import type * as UI from '../../ui/legacy/legacy.js';
 
-import {type Formatter, ProfileDataGridNode, ProfileDataGridTree} from './ProfileDataGrid.js';
+import {type Formatter, ProfileDataGridTree, ProfileEntry} from './ProfileDataGrid.js';
 import type {TopDownProfileDataGridTree} from './TopDownProfileDataGrid.js';
 
 export interface NodeInfo {
@@ -45,7 +45,7 @@ export interface NodeInfo {
   totalAccountedFor: boolean;
 }
 
-export class BottomUpProfileDataGridNode extends ProfileDataGridNode {
+export class BottomUpProfileEntry extends ProfileEntry {
   remainingNodeInfos: NodeInfo[]|undefined;
 
   constructor(profileNode: CPUProfile.ProfileTreeModel.ProfileNode, owningTree: TopDownProfileDataGridTree) {
@@ -53,7 +53,7 @@ export class BottomUpProfileDataGridNode extends ProfileDataGridNode {
     this.remainingNodeInfos = [];
   }
 
-  static sharedPopulate(container: BottomUpProfileDataGridNode|BottomUpProfileDataGridTree): void {
+  static sharedPopulate(container: BottomUpProfileEntry|BottomUpProfileDataGridTree): void {
     if (container.remainingNodeInfos === undefined) {
       return;
     }
@@ -64,8 +64,7 @@ export class BottomUpProfileDataGridNode extends ProfileDataGridNode {
       const nodeInfo = remainingNodeInfos[index];
       const ancestor = nodeInfo.ancestor;
       const focusNode = nodeInfo.focusNode;
-      let child: BottomUpProfileDataGridNode|(BottomUpProfileDataGridNode | null) =
-          (container.findChild(ancestor) as BottomUpProfileDataGridNode | null);
+      let child: BottomUpProfileEntry|null = (container.findChild(ancestor) as BottomUpProfileEntry | null);
 
       // If we already have this child, then merge the data together.
       if (child) {
@@ -77,7 +76,7 @@ export class BottomUpProfileDataGridNode extends ProfileDataGridNode {
           child.total += focusNode.total;
         }
       } else {
-        child = new BottomUpProfileDataGridNode(ancestor, (container.tree as TopDownProfileDataGridTree));
+        child = new BottomUpProfileEntry(ancestor, (container.tree as TopDownProfileDataGridTree));
 
         if (ancestor !== focusNode) {
           // But the actual statistics from the "root" node (bottom of the callstack).
@@ -101,16 +100,16 @@ export class BottomUpProfileDataGridNode extends ProfileDataGridNode {
     delete container.remainingNodeInfos;
   }
 
-  takePropertiesFromProfileDataGridNode(profileDataGridNode: ProfileDataGridNode): void {
+  takePropertiesFromProfileEntry(profileEntry: ProfileEntry): void {
     this.save();
-    this.self = profileDataGridNode.self;
-    this.total = profileDataGridNode.total;
+    this.self = profileEntry.self;
+    this.total = profileEntry.total;
   }
 
   /**
    * When focusing, we keep just the members of the callstack.
    */
-  keepOnlyChild(child: ProfileDataGridNode): void {
+  keepOnlyChild(child: ProfileEntry): void {
     this.save();
 
     this.removeChildren();
@@ -128,7 +127,7 @@ export class BottomUpProfileDataGridNode extends ProfileDataGridNode {
     let index = this.children.length;
 
     while (index--) {
-      (children[index] as BottomUpProfileDataGridNode).exclude(aCallUID);
+      (children[index] as BottomUpProfileEntry).exclude(aCallUID);
     }
 
     const child = this.childrenByCallUID.get(aCallUID);
@@ -146,13 +145,13 @@ export class BottomUpProfileDataGridNode extends ProfileDataGridNode {
     }
   }
 
-  override merge(child: ProfileDataGridNode, shouldAbsorb: boolean): void {
+  override merge(child: ProfileEntry, shouldAbsorb: boolean): void {
     this.self -= child.self;
     super.merge(child, shouldAbsorb);
   }
 
   override populateChildren(): void {
-    BottomUpProfileDataGridNode.sharedPopulate(this);
+    BottomUpProfileEntry.sharedPopulate(this);
   }
 
   willHaveChildren(profileNode: CPUProfile.ProfileTreeModel.ProfileNode): boolean {
@@ -231,7 +230,7 @@ export class BottomUpProfileDataGridTree extends ProfileDataGridTree {
     }
 
     // Populate the top level nodes.
-    ProfileDataGridNode.populate(this);
+    ProfileEntry.populate(this);
 
     return this;
   }
@@ -239,32 +238,33 @@ export class BottomUpProfileDataGridTree extends ProfileDataGridTree {
   /**
    * When focusing, we keep the entire callstack up to this ancestor.
    */
-  override focus(profileDataGridNode: ProfileDataGridNode): void {
+  override focus(profileDataGridNode: ProfileEntry): void {
     if (!profileDataGridNode) {
       return;
     }
 
     this.save();
 
-    let currentNode: ProfileDataGridNode = profileDataGridNode;
-    let focusNode: (ProfileDataGridNode&BottomUpProfileDataGridNode)|ProfileDataGridNode = profileDataGridNode;
+    let currentNode: ProfileEntry = profileDataGridNode;
+    let focusNode: (ProfileEntry&BottomUpProfileEntry)|ProfileEntry = profileDataGridNode;
 
-    while (currentNode.parent && (currentNode instanceof BottomUpProfileDataGridNode)) {
-      currentNode.takePropertiesFromProfileDataGridNode(profileDataGridNode);
+    while (currentNode instanceof BottomUpProfileEntry && currentNode.parent) {
+      currentNode.takePropertiesFromProfileEntry(profileDataGridNode);
 
       focusNode = currentNode;
-      currentNode = (currentNode.parent as ProfileDataGridNode);
+      currentNode = (currentNode.parent as ProfileEntry);
 
-      if (currentNode instanceof BottomUpProfileDataGridNode) {
+      if (currentNode instanceof BottomUpProfileEntry) {
         currentNode.keepOnlyChild(focusNode);
       }
     }
 
-    this.children = [focusNode];
+    this.removeChildren();
+    this.appendChild(focusNode);
     this.total = profileDataGridNode.total;
   }
 
-  override exclude(profileDataGridNode: ProfileDataGridNode): void {
+  override exclude(profileDataGridNode: ProfileEntry): void {
     if (!profileDataGridNode) {
       return;
     }
@@ -284,15 +284,11 @@ export class BottomUpProfileDataGridTree extends ProfileDataGridTree {
     const count = children.length;
 
     for (let index = 0; index < count; ++index) {
-      (children[index] as BottomUpProfileDataGridNode).exclude(excludedCallUID);
-    }
-
-    if (this.lastComparator) {
-      this.sort(this.lastComparator, true);
+      (children[index] as BottomUpProfileEntry).exclude(excludedCallUID);
     }
   }
 
   override populateChildren(): void {
-    BottomUpProfileDataGridNode.sharedPopulate(this);
+    BottomUpProfileEntry.sharedPopulate(this);
   }
 }