chrome-devtools-frontend 1.0.1689415 → 1.0.1690531

package/front_end/panels/timeline/TimelinePanel.ts

@@ -95,160 +95,155 @@ import type * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Text that appears when user drag and drop something (for example, a file) in Timeline Panel of the Performance panel
+   * @description Text shown on the drag-and-drop overlay in the Performance panel.
    */
   dropTimelineFileOrUrlHere: 'Drop trace file or URL here',
   /**
-   * @description Dropdown option in the performance panel for the default screenshot capture preset (500 x 500 pixels,
-   * up to 450 frames).
+   * @description Dropdown option in the Performance panel for the default screenshot capture preset (500 x 500 pixels, up to 450 frames).
    */
   screenshotPresetDefault: '500 x 500 px, up to 450 frames',
   /**
-   * @description Dropdown option in the performance panel for a screenshot capture preset that uses smaller frames so
-   * more of them fit in the per-session memory budget (250 x 250 pixels, up to 1800 frames).
+   * @description Dropdown option in the Performance panel for a screenshot capture preset that uses smaller frames so more fit in memory (250 x 250 pixels, up to 1800 frames).
    */
   screenshotPresetMedium: '250 x 250 px, up to 1800 frames',
   /**
-   * @description Dropdown option in the performance panel for a screenshot capture preset that uses higher-resolution
-   * frames at the cost of capturing fewer of them (1000 x 1000 pixels, up to 100 frames).
+   * @description Dropdown option in the Performance panel for a screenshot capture preset that uses higher-resolution frames (1000 x 1000 pixels, up to 100 frames).
    */
   screenshotPresetLarge: '1000 x 1000 px, up to 100 frames',
   /**
-   * @description Dropdown option in the performance panel for a screenshot capture preset that uses very small frames
-   * so many of them fit in the per-session memory budget (100 x 100 pixels, up to 11250 frames).
+   * @description Dropdown option in the Performance panel for a screenshot capture preset that uses very small frames (100 x 100 pixels, up to 11250 frames).
    */
   screenshotPresetTiny: '100 x 100 px, up to 11250 frames',
   /**
-   * @description Text to clear content
+   * @description Tooltip for the clear button in the Performance panel toolbar.
    */
   clear: 'Clear',
   /**
-   * @description A label for a button that fixes something.
+   * @description Adorner label for a trace event that needs attention.
    */
   fixMe: 'Fix me',
   /**
-   * @description Tooltip text that appears when hovering over the largeicon load button
+   * @description Tooltip for the load trace button in the Performance panel toolbar.
    */
   loadTrace: 'Load trace…',
   /**
-   * @description Text to take screenshots
+   * @description Label for the capture screenshots checkbox in the Performance panel settings.
    */
   captureScreenshots: 'Capture screenshots',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Label for the show memory timeline checkbox in the Performance panel toolbar.
    */
   showMemoryTimeline: 'Show memory timeline',
   /**
-   * @description Tooltip text that appears when hovering over the largeicon settings gear in show settings pane setting in timeline panel of the performance panel
+   * @description Tooltip for the capture settings button in the Performance panel toolbar.
    */
   captureSettings: 'Capture settings',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Tooltip for the checkbox that disables JavaScript sampling in the capture settings of the Performance panel.
    */
   disablesJavascriptSampling: 'Disables JavaScript sampling, reduces overhead when running against mobile devices',
   /**
-   *@description Text in Timeline Panel of the Performance panel
+   * @description Tooltip for the checkbox that captures advanced paint instrumentation in the capture settings of the Performance panel.
    */
   capturesAdvancedPaint: 'Captures advanced paint instrumentation, introduces significant performance overhead',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Tooltip for the checkbox that captures CSS selector statistics in the capture settings of the Performance panel.
    */
   capturesSelectorStats: 'Captures CSS selector statistics',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Label for the network throttling setting in the capture settings of the Performance panel.
    */
   network: 'Network:',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Label for the CPU throttling setting in the capture settings of the Performance panel.
    */
   cpu: 'CPU:',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status message indicating that CPU throttling is enabled in the Performance panel.
    */
   CpuThrottlingIsEnabled: '- CPU throttling is enabled',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status message indicating that network throttling is enabled in the Performance panel.
    */
   NetworkThrottlingIsEnabled: '- Network throttling is enabled',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status message indicating that advanced paint instrumentation is active in the Performance panel.
    */
   SignificantOverheadDueToPaint: '- Significant overhead due to paint instrumentation',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status message indicating that CSS selector statistics capture is enabled in the Performance panel.
    */
   SelectorStatsEnabled: '- Selector stats is enabled',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status message indicating that JavaScript sampling is disabled in the Performance panel.
    */
   JavascriptSamplingIsDisabled: '- JavaScript sampling is disabled',
   /**
-   *@description Text in Timeline Panel of the Performance panel
+   * @description Status text shown while stopping a timeline recording in the Performance panel.
    */
   stoppingTimeline: 'Stopping timeline…',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status label for received data during trace recording in the Performance panel.
    */
   received: 'Received',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status label for processed data during trace recording in the Performance panel.
    */
   processed: 'Processed',
   /**
-   * @description Text to close something
+   * @description Button label to close the status dialog in the Performance panel.
    */
   close: 'Close',
   /**
-   * @description Status text to indicate the recording has failed in the Performance panel
+   * @description Status text indicating that trace recording failed in the Performance panel.
    */
   recordingFailed: 'Recording failed',
   /**
-   * @description Status text to indicate that exporting the trace has failed
+   * @description Status text indicating that exporting the trace failed in the Performance panel.
    */
   exportingFailed: 'Exporting the trace failed',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status text shown while initializing trace recording in the Performance panel.
    */
   initializingTracing: 'Initializing tracing…',
   /**
-   * @description Text to indicate the progress of a trace. Informs the user that we are currently
-   * creating a performance trace.
+   * @description Status text shown while recording a trace in the Performance panel.
    */
   tracing: 'Tracing…',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Label for trace buffer usage progress in the status dialog of the Performance panel.
    */
   bufferUsage: 'Buffer usage',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status text shown while loading a trace file in the Performance panel.
    */
   loadingTrace: 'Loading trace…',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status text shown while processing a trace in the Performance panel.
    */
   processingTrace: 'Processing trace…',
   /**
-   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   * @description Status text shown while preparing a trace for download in the Performance panel.
    */
   preparingTraceForDownload: 'Preparing…',
   /**
-   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   * @description Status text shown while compressing a trace for download in the Performance panel.
    */
   compressingTraceForDownload: 'Compressing…',
   /**
-   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   * @description Status text shown while encoding a trace for download in the Performance panel.
    */
   encodingTraceForDownload: 'Encoding…',
   /**
-   * @description Tooltip description for a checkbox that toggles the visibility of data added by extensions of this panel (Performance).
+   * @description Label for the checkbox to show data added by extensions in the Performance panel.
    */
   showDataAddedByExtensions: 'Show data added by extensions of the Performance panel',
   /**
-   * @description Tooltip for the the sidebar toggle in the Performance panel. Command to open/show the sidebar.
+   * @description Tooltip for the button to show the sidebar in the Performance panel.
    */
   showSidebar: 'Show sidebar',
   /**
-   * @description Tooltip for the the sidebar toggle in the Performance panel. Command to close the sidebar.
+   * @description Tooltip for the button to hide the sidebar in the Performance panel.
    */
   hideSidebar: 'Hide sidebar',
   /**
@@ -260,49 +255,48 @@ const UIStrings = {
    */
   sidebarHidden: 'Performance sidebar hidden',
   /**
-   * @description Screen reader announcement when the user clears their selection
+   * @description Screen reader announcement when the selection is cleared in the Performance panel.
    */
   selectionCleared: 'Selection cleared',
   /**
-   * @description Screen reader announcement when the user selects a frame.
+   * @description Screen reader announcement when a frame is selected in the Performance panel.
    */
   frameSelected: 'Frame selected',
   /**
-   * @description Screen reader announcement when the user selects a trace event.
+   * @description Screen reader announcement when a trace event is selected in the Performance panel.
    * @example {Paint} PH1
    */
   eventSelected: 'Event {PH1} selected',
   /**
-   * @description Text of a hyperlink to documentation.
+   * @description Link text to open documentation in the Performance panel.
    */
   learnMore: 'Learn more',
   /**
-   * @description Tooltip text for a button that takes the user back to the default view which shows performance metrics that are live.
+   * @description Tooltip for the button to return to the live metrics page in the Performance panel.
    */
   backToLiveMetrics: 'Go back to the live metrics page',
   /**
-   * @description Description of the Timeline zoom keyboard instructions that appear in the shortcuts dialog
+   * @description Label for zoom keyboard shortcuts in the shortcuts dialog of the Performance panel.
    */
   timelineZoom: 'Zoom',
   /**
-   * @description Description of the Timeline scrolling & panning instructions that appear in the shortcuts dialog.
+   * @description Label for scroll and pan keyboard shortcuts in the shortcuts dialog of the Performance panel.
    */
-  timelineScrollPan: 'Scroll & Pan',
+  timelineScrollPan: 'Scroll & pan',
   /**
-   * @description Description for the Dim 3rd Parties checkbox tooltip describing how 3rd parties are classified.
+   * @description Tooltip describing that third-party entities are classified by the third-party-web database.
    */
   thirdPartiesByThirdPartyWeb: '3rd parties classified by third-party-web',
   /**
-   * @description Title of the shortcuts dialog shown to the user that lists keyboard shortcuts.
+   * @description Title of the shortcuts dialog listing keyboard shortcuts for the timeline flame chart.
    */
-  shortcutsDialogTitle: 'Keyboard shortcuts for flamechart',
+  shortcutsDialogTitle: 'Keyboard shortcuts for flame chart',
   /**
-   * @description Header for the confirmation dialog asking the user whether
-   * to load a CPU profile recorded by console.profile().
+   * @description Header for the confirmation dialog asking whether to load a CPU profile in the Performance panel.
    */
   loadCpuProfileHeader: 'Load CPU profile?',
   /**
-   * @description Confirmation message asking the user whether to load a CPU profile recorded by console.profile().
+   * @description Confirmation message asking whether to load a recorded CPU profile into the Performance panel.
    * @example {Profile 1} PH1
    */
   loadCpuProfileConfirmation: 'Do you want to load the recorded CPU profile "{PH1}" into the Performance panel?',
@@ -372,8 +366,12 @@ type ViewMode = {
   mode: 'STATUS_PANE_OVERLAY',
 };
 
-export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Panel.Panel>(UI.Panel.Panel)
-    implements Client, TimelineModeViewDelegate {
+const TimelinePanelBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Panel.Panel> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Panel.Panel,
+    );
+
+export class TimelinePanel extends TimelinePanelBase implements Client, TimelineModeViewDelegate {
   private readonly dropTarget: UI.DropTarget.DropTarget;
   private readonly recordingOptionUIControls: UI.Toolbar.ToolbarItem[];
   private state: State;
@@ -2562,9 +2560,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
    * run when the user switches to an existing trace, please @see
    * #setModelForActiveTrace and put your code in there.
    **/
-  async loadingComplete(
-      collectedEvents: Trace.Types.Events.Event[], exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null = null,
-      metadata: Trace.Types.File.MetaData|null): Promise<void> {
+  async loadingComplete(collectedEvents: Trace.Types.Events.Event[],
+                        exclusiveFilter: Trace.Extras.TraceFilter.TraceFilter|null|undefined = null,
+                        metadata: Trace.Types.File.MetaData|null): Promise<void> {
     this.#traceEngineModel.resetProcessor();
 
     delete this.loader;

package/front_end/panels/timeline/TimelineSelectorStatsView.ts

@@ -19,92 +19,92 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Label for selector stats data table
+   * @description Accessible name for the selector stats data grid in the Performance panel.
    */
   selectorStats: 'Selector stats',
   /**
-   * @description Column name and time unit for elapsed time spent computing a style rule
+   * @description Column header for elapsed time in the selector stats data grid.
    */
   elapsed: 'Elapsed (ms)',
   /**
-   * @description Tooltip description 'Elapsed (ms)'
+   * @description Tooltip explanation for the elapsed time column in the selector stats data grid.
    */
-  elapsedExplanation: 'Elapsed time spent matching a selector against the DOM in milliseconds.',
+  elapsedExplanation: 'Elapsed time spent matching a selector against the DOM in milliseconds',
   /**
-   * @description Column name and percentage of slow mach non-matches computing a style rule
+   * @description Column header for the percentage of slow-path non-matches in the selector stats data grid.
    */
   slowPathNonMatches: '% of slow-path non-matches',
   /**
-   * @description Tooltip description '% of slow-path non-matches'
+   * @description Tooltip explanation for the slow-path non-matches column in the selector stats data grid.
    */
   slowPathNonMatchesExplanation:
-      'The percentage of non-matching nodes (Match Attempts - Match Count) that couldn’t be quickly ruled out by the bloom filter due to high selector complexity. Lower is better.',
+      'The percentage of non-matching nodes (match attempts − match count) that couldn’t be quickly ruled out by the bloom filter due to high selector complexity. Lower is better.',
   /**
-   * @description Column name for count of elements that the engine attempted to match against a style rule
+   * @description Column header for match attempts in the selector stats data grid.
    */
   matchAttempts: 'Match attempts',
   /**
-   * @description Tooltip description 'Match attempts'
+   * @description Tooltip explanation for the match attempts column in the selector stats data grid.
    */
-  matchAttemptsExplanation: 'Count of nodes that the engine attempted to match against a style rule.',
+  matchAttemptsExplanation: 'Count of nodes that the engine attempted to match against a style rule',
   /**
-   * @description Column name for count of elements that matched a style rule
+   * @description Column header for match count in the selector stats data grid.
    */
   matchCount: 'Match count',
   /**
-   * @description Tooltip description 'Match count'
+   * @description Tooltip explanation for the match count column in the selector stats data grid.
    */
-  matchCountExplanation: 'Count of nodes that matched a style rule.',
+  matchCountExplanation: 'Count of nodes that matched a style rule',
   /**
-   * @description Column name for a style rule's CSS selector text
+   * @description Column header for the CSS selector in the selector stats data grid.
    */
   selector: 'Selector',
   /**
-   * @description Tooltip description 'Selector'
+   * @description Tooltip explanation for the selector column in the selector stats data grid.
    */
-  selectorExplanation: 'CSS selector text of a style rule.',
+  selectorExplanation: 'CSS selector text of a style rule',
   /**
-   * @description Column name for a style rule's CSS selector text
+   * @description Column header for the stylesheet link in the selector stats data grid.
    */
-  styleSheetId: 'Style Sheet',
+  styleSheetId: 'Style sheet',
   /**
-   * @description Tooltip description 'Style Sheet'
+   * @description Tooltip explanation for the style sheet column in the selector stats data grid.
    */
   styleSheetIdExplanation:
       'Links to the selector rule definition in the style sheets. Note that a selector rule could be defined in multiple places in a style sheet or defined in multiple style sheets. Selector rules from browser user-agent style sheet or dynamic style sheets don’t have a link.',
   /**
-   * @description A context menu item in data grids to copy entire table to clipboard
+   * @description Context menu item to copy the selector stats table to clipboard.
    */
   copyTable: 'Copy table',
   /**
-   * @description A cell value displayed in table when no source file can be traced via css style
+   * @description Cell value displayed when a stylesheet source file cannot be linked.
    */
   unableToLink: 'Unable to link',
   /**
-   * @description Tooltip for the cell that no source file can be traced via style sheet id
+   * @description Tooltip displayed when a stylesheet source file cannot be linked via its ID.
    * @example {style-sheet-4} PH1
    */
   unableToLinkViaStyleSheetId: 'Unable to link via {PH1}',
   /**
-   * @description Text for announcing that the entire table was copied to clipboard
+   * @description Screen reader announcement when the selector stats table is copied to clipboard.
    */
   tableCopiedToClipboard: 'Table copied to clipboard',
   /**
-   * @description Text shown as the "Selectelector" cell value for one row of the Selector Stats table, however this particular row is the totals. While normally the Selector cell is values like "div.container", the parenthesis can denote this description is not an actual selector, but a general row description.
+   * @description Row description for the aggregated totals of all selectors in the selector stats data grid.
    */
   totalForAllSelectors: '(Totals for all selectors)',
   /**
-   * @description Text for showing the location of a selector in the style sheet
+   * @description Link text showing the line and column number of a selector rule in a stylesheet.
    * @example {256} PH1
    * @example {14} PH2
    */
   lineNumber: 'Line {PH1}:{PH2}',
   /**
-   * @description Count of invalidation for a specific selector. Note that a node can be invalidated multiple times.
+   * @description Column header for invalidation count in the selector stats data grid.
    */
   invalidationCount: 'Invalidation count',
   /**
-   * @description Tooltip description 'Invalidation count'
+   * @description Tooltip explanation for the invalidation count column in the selector stats data grid.
    */
   invalidationCountExplanation:
       'Aggregated count of invalidations on nodes and subsequently had style recalculated, all of which are matched by this selector. Note that a node can be invalidated multiple times and by multiple selectors.',

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -27,97 +27,92 @@ import {TimelineUIUtils} from './TimelineUIUtils.js';
 
 const UIStrings = {
   /**
-   * @description Text for the performance of something
+   * @description Data grid name for timeline tree view tables in the Performance panel.
    */
   performance: 'Performance',
   /**
-   * @description Time of a single activity, as opposed to the total time
+   * @description Column header for self time in timeline tree views.
    */
   selfTime: 'Self time',
   /**
-   * @description Text for the total time of something
+   * @description Column header for total time in timeline tree views.
    */
   totalTime: 'Total time',
   /**
-   * @description Text in Timeline Tree View of the Performance panel
+   * @description Column header for the activity name in timeline tree views.
    */
   activity: 'Activity',
   /**
-   * @description Text of a DOM element in Timeline Tree View of the Performance panel
+   * @description Banner message shown when no tree item is selected for details in the Performance panel.
    */
-  selectItemForDetails: 'Select item for details.',
+  selectItemForDetails: 'Select item for details',
   /**
-   * @description Number followed by percent sign
+   * @description Percentage format in timeline tree views.
    * @example {20} PH1
    */
   percentPlaceholder: '{PH1} %',
   /**
-   * @description Text in Timeline Tree View of the Performance panel
+   * @description Row label for Chrome extensions overhead in timeline tree views.
    */
   chromeExtensionsOverhead: '[`Chrome` extensions overhead]',
   /**
-   * @description Text in Timeline Tree View of the Performance panel. The text is presented
-   * when developers investigate the performance of a page. 'V8 Runtime' labels the time
-   * spent in (i.e. runtime) the V8 JavaScript engine.
+   * @description Row label for V8 runtime overhead in timeline tree views.
    */
-  vRuntime: '[`V8` Runtime]',
+  vRuntime: '[`V8` runtime]',
   /**
-   * @description Text in Timeline Tree View of the Performance panel
+   * @description Row label for unattributed activity in timeline tree views.
    */
   unattributed: '[unattributed]',
   /**
-   * @description Text that refers to one or a group of webpages
+   * @description Label for the main frame page in grouping options.
    */
   page: 'Page',
   /**
-   * @description Text in Timeline Tree View of the Performance panel
+   * @description Option in the grouping dropdown for no grouping in timeline tree views.
    */
   noGrouping: 'No grouping',
   /**
-   * @description Text in Timeline Tree View of the Performance panel
+   * @description Option in the grouping dropdown to group by activity in timeline tree views.
    */
   groupByActivity: 'Group by activity',
   /**
-   * @description Text in Timeline Tree View of the Performance panel
+   * @description Option in the grouping dropdown to group by category in timeline tree views.
    */
   groupByCategory: 'Group by category',
   /**
-   * @description Text in Timeline Tree View of the Performance panel
+   * @description Option in the grouping dropdown to group by domain in timeline tree views.
    */
   groupByDomain: 'Group by domain',
   /**
-   * @description Text in Timeline Tree View of the Performance panel
+   * @description Option in the grouping dropdown to group by frame in timeline tree views.
    */
   groupByFrame: 'Group by frame',
   /**
-   * @description Text in Timeline Tree View of the Performance panel
+   * @description Option in the grouping dropdown to group by subdomain in timeline tree views.
    */
   groupBySubdomain: 'Group by subdomain',
   /**
-   * @description Text in Timeline Tree View of the Performance panel
+   * @description Option in the grouping dropdown to group by URL in timeline tree views.
    */
   groupByUrl: 'Group by URL',
   /**
-   * @description Text in Timeline Tree View of the Performance panel
+   * @description Option in the grouping dropdown to group by third parties in timeline tree views.
    */
-  groupByThirdParties: 'Group by Third Parties',
+  groupByThirdParties: 'Group by 3rd parties',
   /**
-   * @description Aria-label for grouping combo box in Timeline Details View
+   * @description Accessible label for the grouping dropdown in timeline tree views.
    */
   groupBy: 'Group by',
   /**
-   * @description Title of the sidebar pane in the Performance panel which shows the stack (call
-   * stack) where the program spent the most time (out of all the call stacks) while executing.
+   * @description Title for the heaviest stack sidebar in timeline tree views.
    */
   heaviestStack: 'Heaviest stack',
   /**
-   * @description Tooltip for the the Heaviest stack sidebar toggle in the Timeline Tree View of the
-   * Performance panel. Command to open/show the sidebar.
+   * @description Tooltip for the button to show the heaviest stack sidebar in timeline tree views.
    */
   showHeaviestStack: 'Show heaviest stack',
   /**
-   * @description Tooltip for the the Heaviest stack sidebar toggle in the Timeline Tree View of the
-   * Performance panel. Command to close/hide the sidebar.
+   * @description Tooltip for the button to hide the heaviest stack sidebar in timeline tree views.
    */
   hideHeaviestStack: 'Hide heaviest stack',
   /**
@@ -129,35 +124,35 @@ const UIStrings = {
    */
   heaviestStackHidden: 'Heaviest stack sidebar hidden',
   /**
-   * @description Data grid name for Timeline Stack data grids
+   * @description Data grid name for heaviest stack tables in the Performance panel.
    */
   timelineStack: 'Timeline stack',
   /**
-   * /*@description Text to search by matching case of the input button
+   * @description Tooltip for the match case search button in timeline tree views.
    */
   matchCase: 'Match case',
   /**
-   * @description Text for searching with regular expression button
+   * @description Tooltip for the regular expression search button in timeline tree views.
    */
   useRegularExpression: 'Use regular expression',
   /**
-   * @description Text for Match whole word button
+   * @description Tooltip for the match whole word search button in timeline tree views.
    */
   matchWholeWord: 'Match whole word',
   /**
-   * @description Text for bottom up tree button
+   * @description Tooltip for the button to switch to the bottom-up view in timeline tree views.
    */
   bottomUp: 'Bottom-up',
   /**
-   * @description Text referring to view bottom up tree
+   * @description Accessible label for the button to switch to the bottom-up view in timeline tree views.
    */
-  viewBottomUp: 'View Bottom-up',
+  viewBottomUp: 'View bottom-up',
   /**
-   * @description Text referring to a 1st party entity
+   * @description Badge text for a 1st party entity in timeline tree views.
    */
   firstParty: '1st party',
   /**
-   * @description Text referring to an entity that is an extension
+   * @description Badge text for an extension entity in timeline tree views.
    */
   extension: 'Extension',
 } as const;
@@ -167,9 +162,12 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 /**
  * For an overview, read: https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/front_end/panels/timeline/README.md#timeline-tree-views
  */
-export class TimelineTreeView extends
-    Common.ObjectWrapper.eventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
-        implements UI.SearchableView.Searchable {
+const TimelineTreeViewBase: Common.ObjectWrapper.EventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class TimelineTreeView extends TimelineTreeViewBase implements UI.SearchableView.Searchable {
   /** This is sorted by ts. */
   #selectedEvents: Trace.Types.Events.Event[]|null;
   private searchResults: Trace.Extras.TraceTree.Node[];
@@ -196,7 +194,7 @@ export class TimelineTreeView extends
   #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
   #entityMapper: Trace.EntityMapper.EntityMapper|null = null;
   #lastHighlightedEvent: HTMLElement|null = null;
-  eventToTreeNode = new WeakMap<Trace.Types.Events.Event, Trace.Extras.TraceTree.Node>();
+  eventToTreeNode: WeakMap<Trace.Types.Events.Event, Trace.Extras.TraceTree.Node> = new WeakMap();
   // Compact mode is used to render the tree view in a more compact UI,
   // suitable for AI assistance widgets. It removes sidebars and toolbars.
   #compactMode = false;
@@ -1418,8 +1416,12 @@ export class BottomUpTimelineTreeView extends AggregatedTimelineTreeView {
   }
 }
 
-export class TimelineStackView extends
-    Common.ObjectWrapper.eventMixin<TimelineStackView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+const TimelineStackViewBase: Common.ObjectWrapper.EventMixin<TimelineStackView.EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class TimelineStackView extends TimelineStackViewBase {
   private readonly treeView: TimelineTreeView;
   private readonly dataGrid: DataGrid.ViewportDataGrid.ViewportDataGrid<unknown>;