chrome-devtools-frontend 1.0.1662289 → 1.0.1664496

package/front_end/panels/profiler/HeapProfileView.ts

@@ -3,6 +3,8 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import '../../ui/components/icon_button/icon_button.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';
@@ -12,12 +14,12 @@ 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 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, type TemplateResult} from '../../ui/lit/lit.js';
+import {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {BottomUpProfileDataGridTree} from './BottomUpProfileDataGrid.js';
@@ -28,6 +30,8 @@ import {ProfileEvents, type ProfileHeader, ProfileType} from './ProfileHeader.js
 import {TopDownProfileDataGridTree} from './TopDownProfileDataGrid.js';
 import {WritableProfileHeader} from './WritableProfileHeader.js';
 
+const {repeat, ref} = Directives;
+
 const UIStrings = {
   /**
    * @description The reported total size used in the selected time frame of the allocation sampling profile
@@ -160,11 +164,15 @@ const UIStrings = {
    * @description Text for selecting different profile views in the JS profiler tool. This option is a tree view.
    */
   treeTopDown: 'Tree (Top Down)',
+
+  /**
+   * @description Tooltip to alert developers that some parts of code in execution were not optimized.
+   * @example {Optimized too many times} PH1
+   */
+  notOptimizedS: 'Not optimized: {PH1}',
 } 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;
@@ -192,20 +200,24 @@ 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: DataGrid.DataGrid.DataGridImpl<unknown>;
+  dataGrid: UI.Widget.Widget;
   viewSelectComboBox: HTMLSelectElement|undefined;
-  focusButton!: UI.Toolbar.ToolbarButton;
-  excludeButton!: UI.Toolbar.ToolbarButton;
+  focusButton: Buttons.Button.Button|undefined;
+  excludeButton: Buttons.Button.Button|undefined;
   resetButton: Buttons.Button.Button|undefined;
+  #sortColumnId = 'self';
+  #sortAscending = false;
+  #selectedNode: ProfileDataGridNode|null = null;
+
   readonly linkifierInternal: Components.Linkifier.Linkifier = new Components.Linkifier.Linkifier(maxLinkLength);
-  nodeFormatter!: Formatter;
+  nodeFormatter!: NodeFormatter;
   viewType!: Common.Settings.Setting<ViewTypes>;
   bottomUpProfileDataGridTree?: BottomUpProfileDataGridTree|null;
   topDownProfileDataGridTree?: TopDownProfileDataGridTree|null;
   currentSearchResultIndex?: number;
   dataProvider?: ProfileFlameChartDataProvider;
   flameChart?: ProfileFlameChart;
-  visibleView?: ProfileFlameChart|DataGrid.DataGrid.DataGridWidget<unknown>;
+  visibleView?: UI.Widget.Widget;
   searchableElement?: ProfileDataGridTree|ProfileFlameChart;
   profileDataGridTree?: ProfileDataGridTree;
 
@@ -225,7 +237,7 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
 
     this.#setupSearchableView();
 
-    this.dataGrid = this.#createDataGrid();
+    this.dataGrid = new UI.Widget.VBox();
 
     this.profileHeader = profileHeader;
     this.profileType = profileHeader.profileType();
@@ -258,40 +270,110 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
     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,
-    });
+  #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 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));
+    const onDeselect = (): void => {
+      this.#selectedNode = null;
+      this.nodeSelected(false);
+    };
 
-    return dataGrid;
+    // 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> {
@@ -322,7 +404,8 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
                          disabled: !this.#isNodeSelected,
                        } as Buttons.Button.ButtonData}
                        @click=${this.focusClicked.bind(this)}
-                       ?hidden=${isFlame}>
+                       ?hidden=${isFlame}
+                       ${ref(e => { this.focusButton = e as Buttons.Button.Button; })}>
       </devtools-button>
       <devtools-button .data=${{
                          iconName: 'cross',
@@ -332,7 +415,8 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
                          disabled: !this.#isNodeSelected,
                        } as Buttons.Button.ButtonData}
                        @click=${this.excludeClicked.bind(this)}
-                       ?hidden=${isFlame}>
+                       ?hidden=${isFlame}
+                       ${ref(e => { this.excludeButton = e as Buttons.Button.Button; })}>
       </devtools-button>
       <devtools-button .data=${{
                          iconName: 'refresh',
@@ -441,7 +525,7 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
     return this.profileInternal;
   }
 
-  initialize(nodeFormatter: Formatter): void {
+  initialize(nodeFormatter: NodeFormatter): void {
     this.nodeFormatter = nodeFormatter;
 
     this.viewType = Common.Settings.Settings.instance().createSetting('profile-view', ViewTypes.HEAVY);
@@ -502,22 +586,11 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
     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]);
-    }
+    this.#renderDataGrid();
   }
 
   refreshVisibleData(): void {
-    let child: (DataGrid.DataGrid.DataGridNode<unknown>|null) = this.dataGrid.rootNode().children[0];
-    while (child) {
-      child.refresh();
-      child = child.traverseNextNode(false, null, true);
-    }
+    this.#renderDataGrid();
   }
 
   searchableView(): UI.SearchableView.SearchableView {
@@ -539,24 +612,44 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
   onSearchCanceled(): void {
     if (this.searchableElement) {
       this.searchableElement.onSearchCanceled();
+      this.refresh();
     }
   }
 
   performSearch(searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards?: boolean): void {
     if (this.searchableElement) {
       this.searchableElement.performSearch(searchConfig, shouldJump, jumpBackwards);
+      this.refresh();
     }
   }
 
   jumpToNextSearchResult(): void {
     if (this.searchableElement) {
       this.searchableElement.jumpToNextSearchResult();
+      this.#syncSearchSelection();
     }
   }
 
   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;
+      }
+
+      this.nodeSelected(!!this.#selectedNode);
+      this.refresh();
     }
   }
 
@@ -595,14 +688,17 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
     void Common.Revealer.reveal(uiLocation);
   }
 
-  changeView(): void {
+  changeView(e?: Event): void {
     if (!this.profileInternal) {
       return;
     }
 
-    if (this.viewSelectComboBox) {
-      this.viewType.set(this.viewSelectComboBox.value as ViewTypes);
+    if (e) {
+      const select = e.target as HTMLSelectElement;
+      this.viewType.set(select.value as ViewTypes);
     }
+    this.#selectedNode = null;
+    this.#isNodeSelected = false;
     this.performUpdate();
   }
 
@@ -612,7 +708,7 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
   }
 
   focusClicked(): void {
-    if (!this.dataGrid.selectedNode) {
+    if (!this.#selectedNode) {
       return;
     }
 
@@ -620,7 +716,7 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
     this.performUpdate();
     this.resetButton?.focus();
     if (this.profileDataGridTree) {
-      this.profileDataGridTree.focus((this.dataGrid.selectedNode as ProfileDataGridNode));
+      this.profileDataGridTree.focus(this.#selectedNode);
     }
     this.refresh();
     this.refreshVisibleData();
@@ -628,7 +724,7 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
   }
 
   excludeClicked(): void {
-    const selectedNode = this.dataGrid.selectedNode;
+    const selectedNode = this.#selectedNode;
 
     if (!selectedNode) {
       return;
@@ -638,10 +734,11 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
     this.performUpdate();
     this.resetButton?.focus();
 
-    selectedNode.deselect();
+    this.#selectedNode = null;
+    this.nodeSelected(false);
 
     if (this.profileDataGridTree) {
-      this.profileDataGridTree.exclude((selectedNode as ProfileDataGridNode));
+      this.profileDataGridTree.exclude(selectedNode);
     }
     this.refresh();
     this.refreshVisibleData();
@@ -651,6 +748,8 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
   resetClicked(): void {
     this.viewSelectComboBox?.focus();
     this.#isResetEnabled = false;
+    this.#selectedNode = null;
+    this.#isNodeSelected = false;
     this.performUpdate();
     if (this.profileDataGridTree) {
       this.profileDataGridTree.restore();
@@ -664,8 +763,8 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
     if (!this.profileDataGridTree) {
       return;
     }
-    const sortAscending = this.dataGrid.isSortOrderAscending();
-    const sortColumnId = this.dataGrid.sortColumnId();
+    const sortAscending = this.#sortAscending;
+    const sortColumnId = this.#sortColumnId;
     const sortProperty = sortColumnId === 'function' ? 'functionName' : sortColumnId || '';
     this.profileDataGridTree.sort(ProfileDataGridTree.propertyComparator(sortProperty, sortAscending), false);
 
@@ -690,13 +789,13 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
         case ViewTypes.TREE:
           this.profileDataGridTree = this.getTopDownProfileDataGridTree();
           this.sortProfile();
-          this.visibleView = this.dataGrid.asWidget();
+          this.visibleView = this.dataGrid;
           this.searchableElement = this.profileDataGridTree;
           break;
         case ViewTypes.HEAVY:
           this.profileDataGridTree = this.getBottomUpProfileDataGridTree();
           this.sortProfile();
-          this.visibleView = this.dataGrid.asWidget();
+          this.visibleView = this.dataGrid;
           this.searchableElement = this.profileDataGridTree;
           break;
       }
@@ -709,16 +808,17 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
     }
 
     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.focusButton) {
+      this.focusButton.hidden = isFlame;
+      this.focusButton.disabled = !this.#isNodeSelected;
+    }
+    if (this.excludeButton) {
+      this.excludeButton.hidden = isFlame;
+      this.excludeButton.disabled = !this.#isNodeSelected;
+    }
     if (this.resetButton) {
+      this.resetButton.hidden = isFlame;
       this.resetButton.disabled = !this.#isResetEnabled;
     }
 
@@ -1120,20 +1220,39 @@ 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 {
-    return i18n.ByteUtilities.bytesToString(value);
+    let result = this.#formattedValueCache.get(value);
+    if (!result) {
+      result = i18n.ByteUtilities.bytesToString(value);
+      this.#formattedValueCache.set(value, result);
+    }
+    return result;
   }
 
   formatValueAccessibleText(value: number): string {
-    return i18nString(UIStrings.sBytes, {PH1: value});
+    let result = this.#formattedValueAccessibleTextCache.get(value);
+    if (!result) {
+      result = i18nString(UIStrings.sBytes, {PH1: value});
+      this.#formattedValueAccessibleTextCache.set(value, result);
+    }
+    return result;
   }
 
   formatPercent(value: number, _node: ProfileDataGridNode): string {
-    return i18nString(UIStrings.formatPercent, {PH1: value.toFixed(2)});
+    let result = this.#formattedPercentCache.get(value);
+    if (!result) {
+      result = i18nString(UIStrings.formatPercent, {PH1: value.toFixed(2)});
+      this.#formattedPercentCache.set(value, result);
+    }
+    return result;
   }
 
   linkifyNode(node: ProfileDataGridNode): Element|null {

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -277,7 +277,7 @@ const UIStrings = {
    * @description Text of a DOM element in Heap Snapshot View of a profiler tool
    */
   stackWasNotRecordedForThisObject:
-      'Stack wasn\'t recorded for this object because it had been allocated before this profile recording started.',
+      'Stack wasn’t recorded for this object because it had been allocated before this profile recording started.',
   /**
    * @description Text in Heap Snapshot View of a profiler tool.
    * This text is on a button to undo all previous "Ignore this retainer" actions.

package/front_end/panels/profiler/ProfileDataGrid.ts

@@ -590,16 +590,20 @@ export class ProfileDataGridTree implements UI.SearchableView.Searchable {
 
     this.searchResults = [];
     const deepSearch = this.deepSearch;
-    let current: DataGrid.DataGrid.DataGridNode<unknown>|null;
-    for (current = this.children[0]; current; current = current.traverseNextNode(!deepSearch, null, !deepSearch)) {
-      const item = (current as ProfileDataGridNode | null);
-      if (!item) {
-        break;
-      }
 
-      if (matchesQuery(item)) {
-        this.searchResults.push({profileNode: item});
+    const walk = (node: ProfileDataGridNode): void => {
+      if (matchesQuery(node)) {
+        this.searchResults.push({profileNode: node});
+      }
+      if (deepSearch || node.expanded) {
+        for (const child of node.children as ProfileDataGridNode[]) {
+          walk(child);
+        }
       }
+    };
+
+    for (const child of this.children as ProfileDataGridNode[]) {
+      walk(child);
     }
     this.searchResultIndex = jumpBackwards ? 0 : this.searchResults.length - 1;
     this.searchableView.updateSearchMatchesCount(this.searchResults.length);

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -9,8 +9,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Bindings from '../../models/bindings/bindings.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';

package/front_end/panels/recorder/README.md

@@ -8,8 +8,7 @@ Recorder is a panel in DevTools that allows recording and replaying user actions
 - `images` folder contains Recorder-specific icons and images.
 - `models` folder contains the "business logic" part of Recorder wrapping DevTools SDK modules and Puppeteer to provide record/replay/import/export functionality. The name `models` is historical and, probably, a better name could be found: record/replay used to be implemented as a single SDK Model and was placed in the `models` folder in DevTools before ending up here.
 - `injected` folder holds the code that gets injected into the target page. This code is responsible for interpreting client side events and sending information about them to the `models`.
-- `RecorderPanel.ts` is a light wrapper around `RecorderController` that integrates with `UI.Panel.Panel`, a generic interface for a top-level panel.
-- `RecorderController.ts` is the main class that is responsible for rendering the panel and holds the entire panel state.
+- `RecorderController.ts` is the main component for the Recorder panel. It manages the state and renders the UI.
 
 ## How it works