chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/timeline/AnnotationHelpers.test.ts

@@ -7,7 +7,6 @@ import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {microsecondsTraceWindow} from '../../testing/TraceHelpers.js';
 
-import type * as Overlays from './overlays/overlays.js';
 import * as Timeline from './timeline.js';
 
 const {
@@ -119,35 +118,42 @@ describe('AnnotationHelpers', () => {
     } as unknown as Trace.Types.Events.Event;
 
     it('returns text for an annotation being removed', () => {
-      const overlay: Overlays.Overlays.EntryLabel = {type: 'ENTRY_LABEL', entry: FAKE_ENTRY_1, label: 'Hello world'};
+      const overlay: Trace.Types.Overlays.EntryLabel = {type: 'ENTRY_LABEL', entry: FAKE_ENTRY_1, label: 'Hello world'};
       const event = new Timeline.ModificationsManager.AnnotationModifiedEvent(overlay, 'Remove');
       const text = ariaAnnouncementForModifiedEvent(event);
       assert.strictEqual(text, 'The entry label annotation has been removed');
     });
 
     it('returns text for entering the edit state on a label', () => {
-      const overlay: Overlays.Overlays.EntryLabel = {type: 'ENTRY_LABEL', entry: FAKE_ENTRY_1, label: 'Hello world'};
+      const overlay: Trace.Types.Overlays.EntryLabel = {type: 'ENTRY_LABEL', entry: FAKE_ENTRY_1, label: 'Hello world'};
       const event = new Timeline.ModificationsManager.AnnotationModifiedEvent(overlay, 'EnterLabelEditState');
       const text = ariaAnnouncementForModifiedEvent(event);
       assert.strictEqual(text, 'Editing the annotation label text');
     });
 
     it('returns text for an annotation being added', async () => {
-      const overlay: Overlays.Overlays.EntryLabel = {type: 'ENTRY_LABEL', entry: FAKE_ENTRY_1, label: 'Hello world'};
+      const overlay: Trace.Types.Overlays.EntryLabel = {type: 'ENTRY_LABEL', entry: FAKE_ENTRY_1, label: 'Hello world'};
       const event = new Timeline.ModificationsManager.AnnotationModifiedEvent(overlay, 'Add');
       const text = ariaAnnouncementForModifiedEvent(event);
       assert.strictEqual(text, 'The entry label annotation has been added');
     });
 
+    it('does not return text if the aria notifcations are muted', async () => {
+      const overlay: Trace.Types.Overlays.EntryLabel = {type: 'ENTRY_LABEL', entry: FAKE_ENTRY_1, label: 'Hello world'};
+      const event = new Timeline.ModificationsManager.AnnotationModifiedEvent(overlay, 'Add', true);
+      const text = ariaAnnouncementForModifiedEvent(event);
+      assert.isNull(text);
+    });
+
     it('does not return an announcement for new empty labels', async () => {
-      const overlay: Overlays.Overlays.EntryLabel = {type: 'ENTRY_LABEL', entry: FAKE_ENTRY_1, label: ''};
+      const overlay: Trace.Types.Overlays.EntryLabel = {type: 'ENTRY_LABEL', entry: FAKE_ENTRY_1, label: ''};
       const event = new Timeline.ModificationsManager.AnnotationModifiedEvent(overlay, 'Add');
       const text = ariaAnnouncementForModifiedEvent(event);
       assert.isNull(text);
     });
 
     it('returns text for an annotation having its label updated', async () => {
-      const overlay: Overlays.Overlays.EntryLabel = {type: 'ENTRY_LABEL', entry: FAKE_ENTRY_1, label: 'Hello world'};
+      const overlay: Trace.Types.Overlays.EntryLabel = {type: 'ENTRY_LABEL', entry: FAKE_ENTRY_1, label: 'Hello world'};
       const event = new Timeline.ModificationsManager.AnnotationModifiedEvent(overlay, 'UpdateLabel');
       const text = ariaAnnouncementForModifiedEvent(event);
       assert.strictEqual(text, 'Label updated to Hello world');
@@ -158,7 +164,7 @@ describe('AnnotationHelpers', () => {
           .resetWithNewBounds(
               microsecondsTraceWindow(0, 10_000),
           );
-      const timeRange: Overlays.Overlays.TimeRangeLabel = {
+      const timeRange: Trace.Types.Overlays.TimeRangeLabel = {
         type: 'TIME_RANGE',
         bounds: microsecondsTraceWindow(0, 5_000),
         label: 'hello',
@@ -170,7 +176,7 @@ describe('AnnotationHelpers', () => {
     });
 
     it('returns text when an entries link has its entries connected', async () => {
-      const link: Overlays.Overlays.EntriesLink = {
+      const link: Trace.Types.Overlays.EntriesLink = {
         type: 'ENTRIES_LINK',
         state: Trace.Types.File.EntriesLinkState.CONNECTED,
         entryFrom: FAKE_ENTRY_1,

package/front_end/panels/timeline/AnnotationHelpers.ts

@@ -8,51 +8,50 @@ import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 
 import type {AnnotationModifiedEvent} from './ModificationsManager.js';
-import type * as Overlays from './overlays/overlays.js';
 import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   *@description text used to announce to a screen reader that they have entered the mode to edit the label
+   * @description text used to announce to a screen reader that they have entered the mode to edit the label
    */
   srEnterLabelEditMode: 'Editing the annotation label text',
   /**
-   *@description text used to announce to a screen reader that the entry label text has been updated
-   *@example {Hello world} PH1
+   * @description text used to announce to a screen reader that the entry label text has been updated
+   * @example {Hello world} PH1
    */
   srLabelTextUpdated: 'Label updated to {PH1}',
   /**
-   *@description text used to announce to a screen reader that the bounds of a time range annotation have been upodated
-   *@example {13ms} PH1
-   *@example {20ms} PH2
+   * @description text used to announce to a screen reader that the bounds of a time range annotation have been upodated
+   * @example {13ms} PH1
+   * @example {20ms} PH2
    */
   srTimeRangeBoundsUpdated: 'Time range updated, starting at {PH1} and ending at {PH2}',
   /**
-   *@description label for a time range overlay
+   * @description label for a time range overlay
    */
   timeRange: 'time range',
   /**
-   *@description label for a entry label overlay
+   * @description label for a entry label overlay
    */
   entryLabel: 'entry label',
   /**
-   *@description label for a connected entries overlay
+   * @description label for a connected entries overlay
    */
   entriesLink: 'connected entries',
   /**
-   *@description screen reader text to announce that an annotation has been removed
-   *@example {Entry Label} PH1
+   * @description screen reader text to announce that an annotation has been removed
+   * @example {Entry Label} PH1
    */
   srAnnotationRemoved: 'The {PH1} annotation has been removed',
   /**
-   *@description screen reader text to announce that an annotation has been added
-   *@example {Entry Label} PH1
+   * @description screen reader text to announce that an annotation has been added
+   * @example {Entry Label} PH1
    */
   srAnnotationAdded: 'The {PH1} annotation has been added',
   /**
-   *@description screen reader text to announce the two events that the connected entries annotation links to
-   *@example {Paint} PH1
-   *@example {Function call} PH2
+   * @description screen reader text to announce the two events that the connected entries annotation links to
+   * @example {Paint} PH1
+   * @example {Function call} PH2
    */
   srEntriesLinked: 'The connected entries annotation now links from {PH1} to {PH2}',
 
@@ -136,27 +135,27 @@ export function getAnnotationWindow(
   return annotationWindow;
 }
 
-export function isTimeRangeLabel(overlay: Overlays.Overlays.TimelineOverlay):
-    overlay is Overlays.Overlays.TimeRangeLabel {
+export function isTimeRangeLabel(overlay: Trace.Types.Overlays.Overlay):
+    overlay is Trace.Types.Overlays.TimeRangeLabel {
   return overlay.type === 'TIME_RANGE';
 }
 
-export function isEntriesLink(overlay: Overlays.Overlays.TimelineOverlay): overlay is Overlays.Overlays.EntriesLink {
+export function isEntriesLink(overlay: Trace.Types.Overlays.Overlay): overlay is Trace.Types.Overlays.EntriesLink {
   return overlay.type === 'ENTRIES_LINK';
 }
 
-export function isEntryLabel(overlay: Overlays.Overlays.TimelineOverlay): overlay is Overlays.Overlays.EntryLabel {
+export function isEntryLabel(overlay: Trace.Types.Overlays.Overlay): overlay is Trace.Types.Overlays.EntryLabel {
   return overlay.type === 'ENTRY_LABEL';
 }
 
-function labelForOverlay(overlay: Overlays.Overlays.TimelineOverlay): string|null {
+function labelForOverlay(overlay: Trace.Types.Overlays.Overlay): string|null {
   if (isTimeRangeLabel(overlay) || isEntryLabel(overlay)) {
     return overlay.label;
   }
   return null;
 }
 
-export function ariaDescriptionForOverlay(overlay: Overlays.Overlays.TimelineOverlay): string|null {
+export function ariaDescriptionForOverlay(overlay: Trace.Types.Overlays.Overlay): string|null {
   if (isTimeRangeLabel(overlay)) {
     return i18nString(UIStrings.timeRange);
   }
@@ -173,6 +172,9 @@ export function ariaDescriptionForOverlay(overlay: Overlays.Overlays.TimelineOve
 }
 
 export function ariaAnnouncementForModifiedEvent(event: AnnotationModifiedEvent): string|null {
+  if (event.muteAriaNotifications) {
+    return null;
+  }
   const {overlay, action} = event;
   switch (action) {
     case 'Remove': {
@@ -228,6 +230,9 @@ export function ariaAnnouncementForModifiedEvent(event: AnnotationModifiedEvent)
     case 'EnterLabelEditState': {
       return (i18nString(UIStrings.srEnterLabelEditMode));
     }
+    case 'LabelBringForward': {
+      break;
+    }
     default:
       Platform.assertNever(action, 'Unsupported action for AnnotationModifiedEvent');
   }

package/front_end/panels/timeline/AppenderUtils.ts

@@ -14,8 +14,8 @@ const UIStrings = {
    * @description Text in the Performance panel to show how long was spent in a particular part of the code.
    * The first placeholder is the total time taken for this node and all children, the second is the self time
    * (time taken in this node, without children included).
-   *@example {10ms} PH1
-   *@example {10ms} PH2
+   * @example {10ms} PH1
+   * @example {10ms} PH2
    */
   sSelfS: '{PH1} (self {PH2})',
 } as const;

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -111,7 +111,7 @@ export interface TrackAppender {
    * Appends into the flame chart data the data corresponding to a track.
    * @param level the horizontal level of the flame chart events where the
    * track's events will start being appended.
-   * @param expanded wether the track should be rendered expanded.
+   * @param expanded whether the track should be rendered expanded.
    * @returns the first available level to append more data after having
    * appended the track's events.
    */
@@ -574,19 +574,6 @@ export class CompatibilityTracksAppender {
     return result;
   }
 
-  /**
-   * Sets the visible tracks internally
-   * @param visibleTracks set with the names of the visible track
-   * appenders. If undefined, all tracks are set to be visible.
-   */
-  setVisibleTracks(visibleTracks?: Set<TrackAppenderName>): void {
-    if (!visibleTracks) {
-      this.#visibleTrackNames = new Set([...TrackNames]);
-      return;
-    }
-    this.#visibleTrackNames = visibleTracks;
-  }
-
   getDrawOverride(event: Trace.Types.Events.Event, level: number): DrawOverride|undefined {
     const track = this.#trackForLevel.get(level);
     if (!track) {

package/front_end/panels/timeline/CountersGraph.test.ts

@@ -0,0 +1,80 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Trace from '../../models/trace/trace.js';
+import {raf, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import {getMainThread} from '../../testing/TraceHelpers.js';
+import {TraceLoader} from '../../testing/TraceLoader.js';
+
+import * as Timeline from './timeline.js';
+
+class FakeTimelineModeViewDelegate implements Timeline.TimelinePanel.TimelineModeViewDelegate {
+  element = document.createElement('div');
+  select(_selection: Timeline.TimelineSelection.TimelineSelection|null): void {
+  }
+  set3PCheckboxDisabled(_disabled: boolean): void {
+  }
+  selectEntryAtTime(_events: Trace.Types.Events.Event[]|null, _time: number): void {
+  }
+  highlightEvent(_event: Trace.Types.Events.Event|null): void {
+  }
+}
+
+async function renderCountersGraphForMainThread(context: Mocha.Context): Promise<{
+  countersGraph: Timeline.CountersGraph.CountersGraph,
+  parsedTrace: Trace.Handlers.Types.ParsedTrace,
+}> {
+  const timelineModeViewDelegate = new FakeTimelineModeViewDelegate();
+  const {parsedTrace} = await TraceLoader.traceEngine(context, 'web-dev-with-commit.json.gz');
+  const countersGraph = new Timeline.CountersGraph.CountersGraph(timelineModeViewDelegate);
+  renderElementIntoDOM(countersGraph);
+
+  const mainThread = getMainThread(parsedTrace.Renderer);
+  countersGraph.setModel(parsedTrace, mainThread.entries);
+  await raf();
+  return {countersGraph, parsedTrace};
+}
+
+describeWithEnvironment('CountersGraph', () => {
+  it('shows the counters and the ranges in the toolbar', async function() {
+    const {countersGraph} = await renderCountersGraphForMainThread(this);
+    const checkboxes = countersGraph.element.querySelectorAll('devtools-checkbox');
+    const userVisibleLabels = Array.from(checkboxes, checkbox => checkbox.getLabelText());
+    assert.deepEqual(userVisibleLabels, [
+      'JS heap [1.5 MB – 1.5 MB]',
+      'Documents [4 – 4]',
+      'Nodes [54 – 54]',
+      'Listeners [8 – 8]',
+      'GPU memory',
+    ]);
+
+    const ariaLabels = Array.from(checkboxes, checkbox => checkbox.getAttribute('aria-label'));
+    assert.deepEqual(ariaLabels, [
+      'JS heap [1.5 MB – 1.5 MB]',
+      'Documents [4 – 4]',
+      'Nodes [54 – 54]',
+      'Listeners [8 – 8]',
+      'GPU memory',
+    ]);
+  });
+
+  it('clears the ranges when the counter graph is reset', async function() {
+    const {countersGraph, parsedTrace} = await renderCountersGraphForMainThread(this);
+    const checkboxes = countersGraph.element.querySelectorAll('devtools-checkbox');
+    // Setting the model to have an empty set of events is enough to reset the existing view
+    countersGraph.setModel(parsedTrace, []);
+    await raf();
+    const userVisibleLabels = Array.from(checkboxes, checkbox => checkbox.getLabelText());
+
+    // No ranges after the label
+    assert.deepEqual(userVisibleLabels, [
+      'JS heap',
+      'Documents',
+      'Nodes',
+      'Listeners',
+      'GPU memory',
+    ]);
+  });
+});

package/front_end/panels/timeline/CountersGraph.ts

@@ -44,29 +44,29 @@ import type {TimelineModeViewDelegate} from './TimelinePanel.js';
 
 const UIStrings = {
   /**
-   *@description Text for a heap profile type
+   * @description Text for a heap profile type
    */
   jsHeap: 'JS heap',
   /**
-   *@description Text for documents, a type of resources
+   * @description Text for documents, a type of resources
    */
   documents: 'Documents',
   /**
-   *@description Text in Counters Graph of the Performance panel
+   * @description Text in Counters Graph of the Performance panel
    */
   nodes: 'Nodes',
   /**
-   *@description Text in Counters Graph of the Performance panel
+   * @description Text in Counters Graph of the Performance panel
    */
   listeners: 'Listeners',
   /**
-   *@description Text in Counters Graph of the Performance panel
+   * @description Text in Counters Graph of the Performance panel
    */
   gpuMemory: 'GPU memory',
   /**
-   *@description Range text content in Counters Graph of the Performance panel
-   *@example {2} PH1
-   *@example {10} PH2
+   * @description Range text content in Counters Graph of the Performance panel
+   * @example {2} PH1
+   * @example {10} PH2
    */
   ss: '[{PH1} – {PH2}]',
   /**
@@ -416,15 +416,14 @@ export class CounterUI {
   counter: Counter;
   private readonly formatter: (arg0: number) => string;
   private readonly setting: Common.Settings.Setting<boolean>;
-  private filter: UI.Toolbar.ToolbarSettingCheckbox;
-  private range: HTMLElement;
-  private value: HTMLElement;
+  private readonly filter: UI.Toolbar.ToolbarSettingCheckbox;
+  private readonly value: HTMLElement;
   graphColor: string;
   limitColor: string|null|undefined;
   graphYValues: number[];
   private readonly verticalPadding: number;
-  private currentValueLabel: string;
-  private marker: HTMLElement;
+  private readonly counterName: Common.UIString.LocalizedString;
+  private readonly marker: HTMLElement;
 
   constructor(
       countersPane: CountersGraph, title: Common.UIString.LocalizedString, settingsKey: string, graphColor: string,
@@ -447,7 +446,6 @@ export class CounterUI {
     }
     this.filter.element.addEventListener('click', this.toggleCounterGraph.bind(this));
     countersPane.toolbar.appendToolbarItem(this.filter);
-    this.range = this.filter.element.createChild('span', 'range');
 
     this.value = (countersPane.currentValuesBar as HTMLElement).createChild('span', 'memory-counter-value');
     this.value.style.color = graphColor;
@@ -458,20 +456,31 @@ export class CounterUI {
     this.graphYValues = [];
     this.verticalPadding = 10;
 
-    this.currentValueLabel = title;
+    this.counterName = title;
     this.marker = countersPane.canvasContainer.createChild('div', 'memory-counter-marker');
     this.marker.style.backgroundColor = graphColor;
     this.clearCurrentValueAndMarker();
   }
 
+  /**
+   * Updates both the user visible text and the title & aria-label for the
+   * checkbox label shown in the toolbar
+   */
+  #updateFilterLabel(text: Common.UIString.LocalizedString): void {
+    this.filter.setLabelText(text);
+    this.filter.setTitle(text);
+  }
+
   reset(): void {
-    this.range.textContent = '';
+    this.#updateFilterLabel(this.counterName);
   }
 
   setRange(minValue: number, maxValue: number): void {
     const min = this.formatter(minValue);
     const max = this.formatter(maxValue);
-    this.range.textContent = i18nString(UIStrings.ss, {PH1: min, PH2: max});
+    const rangeText = i18nString(UIStrings.ss, {PH1: min, PH2: max});
+    const newLabelText = `${this.counterName} ${rangeText}` as Common.UIString.LocalizedString;
+    this.#updateFilterLabel(newLabelText);
   }
 
   private toggleCounterGraph(): void {
@@ -492,7 +501,7 @@ export class CounterUI {
     }
     const index = this.recordIndexAt(x);
     const value = Platform.NumberUtilities.withThousandsSeparator(this.counter.values[index]);
-    this.value.textContent = `${this.currentValueLabel}: ${value}`;
+    this.value.textContent = `${this.counterName}: ${value}`;
     const y = this.graphYValues[index] / window.devicePixelRatio;
     this.marker.style.left = x + 'px';
     this.marker.style.top = y + 'px';

package/front_end/panels/timeline/EntriesFilter.test.ts

@@ -2,10 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// Copyright 2023222 The Chromium Author2s. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
 import * as Trace from '../../models/trace/trace.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {getMainThread} from '../../testing/TraceHelpers.js';
@@ -34,7 +30,8 @@ describeWithEnvironment('EntriesFilter', function() {
   it('supports the user merging an entry into its parent', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'basic-stack.json.gz');
     const mainThread = getMainThread(parsedTrace.Renderer);
-    /** This stack looks roughly like so (with some events omitted):
+    /**
+     * This stack looks roughly like so (with some events omitted):
      * ======== basicStackOne ============
      * =========== basicTwo ==============
      * =========== basicThree ============
@@ -75,7 +72,8 @@ describeWithEnvironment('EntriesFilter', function() {
   it('adds the parent of the merged entry into the expandableEntries array', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'basic-stack.json.gz');
     const mainThread = getMainThread(parsedTrace.Renderer);
-    /** This stack looks roughly like so (with some events omitted):
+    /**
+     * This stack looks roughly like so (with some events omitted):
      * ======== basicStackOne ============
      * =========== basicTwo ==============
      * =========== basicThree ============
@@ -120,7 +118,8 @@ describeWithEnvironment('EntriesFilter', function() {
   it('adds the collapsed entry into the expandableEntries array', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'basic-stack.json.gz');
     const mainThread = getMainThread(parsedTrace.Renderer);
-    /** This stack looks roughly like so (with some events omitted):
+    /**
+     * This stack looks roughly like so (with some events omitted):
      * ======== basicStackOne ============
      * =========== basicTwo ==============
      * =========== basicThree ============
@@ -156,7 +155,8 @@ describeWithEnvironment('EntriesFilter', function() {
      async function() {
        const {parsedTrace} = await TraceLoader.traceEngine(this, 'two-functions-recursion.json.gz');
        const mainThread = getMainThread(parsedTrace.Renderer);
-       /** This stack looks roughly like so (with some events omitted):
+       /**
+        * This stack looks roughly like so (with some events omitted):
         * ======== onclick ============
         * =========== foo =============
         *               ==== foo2 =====
@@ -238,7 +238,8 @@ describeWithEnvironment('EntriesFilter', function() {
   it('supports collapsing an entry', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'basic-stack.json.gz');
     const mainThread = getMainThread(parsedTrace.Renderer);
-    /** This stack looks roughly like so (with some events omitted):
+    /**
+     * This stack looks roughly like so (with some events omitted):
      * ======== basicStackOne ============
      * =========== basicTwo ==============
      * =========== basicThree ============
@@ -291,7 +292,8 @@ describeWithEnvironment('EntriesFilter', function() {
   it('supports collapsing all repeating entries among descendants', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'two-functions-recursion.json.gz');
     const mainThread = getMainThread(parsedTrace.Renderer);
-    /** This stack looks roughly like so (with some events omitted):
+    /**
+     * This stack looks roughly like so (with some events omitted):
      * ======== onclick ============
      * =========== foo =============
      *               ==== foo2 =====
@@ -364,7 +366,8 @@ describeWithEnvironment('EntriesFilter', function() {
   it('supports undo all filter actions by applying context menu undo action', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'basic-stack.json.gz');
     const mainThread = getMainThread(parsedTrace.Renderer);
-    /** This stack looks roughly like so (with some events omitted):
+    /**
+     * This stack looks roughly like so (with some events omitted):
      * ======== basicStackOne ============
      * =========== basicTwo ==============
      * =========== basicThree ============
@@ -457,7 +460,8 @@ describeWithEnvironment('EntriesFilter', function() {
   it('supports resetting children of the closest expandable parent when a hidden entry is provided', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'basic-stack.json.gz');
     const mainThread = getMainThread(parsedTrace.Renderer);
-    /** This stack looks roughly like so (with some events omitted):
+    /**
+     * This stack looks roughly like so (with some events omitted):
      * ======== basicStackOne ============
      * =========== basicTwo ==============
      * =========== basicThree ============
@@ -523,7 +527,8 @@ describeWithEnvironment('EntriesFilter', function() {
   it('supports resetting all hidden children of a selected entry', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'two-functions-recursion.json.gz');
     const mainThread = getMainThread(parsedTrace.Renderer);
-    /** This stack looks roughly like so (with some events omitted):
+    /**
+     * This stack looks roughly like so (with some events omitted):
      * ======== onclick ============
      * =========== foo =============
      *               ==== foo2 =====
@@ -629,7 +634,8 @@ describeWithEnvironment('EntriesFilter', function() {
   it('correctly returns the amount of hidden children of a node', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'two-functions-recursion.json.gz');
     const mainThread = getMainThread(parsedTrace.Renderer);
-    /** This stack looks roughly like so (with some erlier events omitted):
+    /**
+     * This stack looks roughly like so (with some erlier events omitted):
      * ======== onclick ============
      * =========== foo =============
      *               ==== foo2 =====
@@ -670,7 +676,8 @@ describeWithEnvironment('EntriesFilter', function() {
   it('correctly assigns a visible parent to expandable entries if the direct parent is not visible', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'basic-stack.json.gz');
     const mainThread = getMainThread(parsedTrace.Renderer);
-    /** This stack looks roughly like so (with some events omitted):
+    /**
+     * This stack looks roughly like so (with some events omitted):
      * ======== Task ===============
      * ======== (anonymous) ========                  << entry with an invisible in the timeline direct parent. We need to make sure that we correctly add Task to the expandable entries
      * ======== RegisterFrameID ====

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -19,15 +19,15 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   *@description Text for the start time of an activity
+   * @description Text for the start time of an activity
    */
   startTime: 'Start time',
   /**
-   *@description Screen reader label for a select box that filters the Performance panel Event Log by duration.
+   * @description Screen reader label for a select box that filters the Performance panel Event Log by duration.
    */
   durationFilter: 'Duration filter',
   /**
-   *@description Text for everything
+   * @description Text for everything
    */
   all: 'All',
 } as const;
@@ -73,29 +73,8 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     }
   }
 
-  private findNodeWithEvent(event: Trace.Types.Events.Event): Trace.Extras.TraceTree.Node|null {
-    if (event.name === Trace.Types.Events.Name.RUN_TASK) {
-      // No node is ever created for the top level RunTask event, so
-      // bail out preemptively
-      return null;
-    }
-    const iterators = [this.currentTree.children().values()];
-    while (iterators.length) {
-      const {done, value: child} = iterators[iterators.length - 1].next();
-      if (done) {
-        iterators.pop();
-        continue;
-      }
-      if (child.event === event) {
-        return child;
-      }
-      iterators.push(child.children().values());
-    }
-    return null;
-  }
-
   private selectEvent(event: Trace.Types.Events.Event, expand?: boolean): void {
-    const node = this.findNodeWithEvent(event);
+    const node = this.eventToTreeNode.get(event);
     if (!node) {
       return;
     }

package/front_end/panels/timeline/ExtensionTrackAppender.ts

@@ -17,14 +17,9 @@ import * as Extensions from './extensions/extensions.js';
 
 const UIStrings = {
   /**
-   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description The subtitle to show (by the side of the track name).
    */
-  customTrackDescription: 'This is a custom track added by a third party.',
-  /**
-   * @description The name of a track, which is a horizontal division of the timeline, synonym with "swimlane".
-   * @example {A track name} PH1
-   */
-  customTrackName: '{PH1} — Custom track',
+  customTrackSubtitle: '— Custom',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/ExtensionTrackAppender.ts', UIStrings);
@@ -59,13 +54,13 @@ export class ExtensionTrackAppender implements TrackAppender {
    */
   #appendTopLevelHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
     const style = buildGroupStyle({shareHeaderLine: false, collapsible: true});
-    const headerTitle = i18nString(UIStrings.customTrackName, {PH1: this.#extensionTopLevelTrack.name});
+    const headerTitle = this.#extensionTopLevelTrack.name;
     const jsLogContext = this.#extensionTopLevelTrack.name === '🅰️ Angular' ? VisualLoggingTrackName.ANGULAR_TRACK :
                                                                              VisualLoggingTrackName.EXTENSION;
     const group = buildTrackHeader(
         jsLogContext, currentLevel, headerTitle, style,
         /* selectable= */ true, expanded);
-    group.description = i18nString(UIStrings.customTrackDescription);
+    group.subtitle = i18nString(UIStrings.customTrackSubtitle);
     this.#compatibilityBuilder.registerTrackForGroup(group, this);
   }
 

package/front_end/panels/timeline/GPUTrackAppender.ts

@@ -15,7 +15,7 @@ import {
 
 const UIStrings = {
   /**
-   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
    */
   gpu: 'GPU',
 } as const;
@@ -39,7 +39,7 @@ export class GPUTrackAppender implements TrackAppender {
    * GPU track.
    * @param trackStartLevel the horizontal level of the flame chart events where
    * the track's events will start being appended.
-   * @param expanded wether the track should be rendered expanded.
+   * @param expanded whether the track should be rendered expanded.
    * @returns the first available level to append more data after having
    * appended the track's events.
    */
@@ -60,7 +60,7 @@ export class GPUTrackAppender implements TrackAppender {
    * in the future).
    * @param currentLevel the flame chart level at which the header is
    * appended.
-   * @param expanded wether the track should be rendered expanded.
+   * @param expanded whether the track should be rendered expanded.
    */
   #appendTrackHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
     const style = buildGroupStyle({collapsible: false});