chrome-devtools-frontend 1.0.1689415 → 1.0.1690116

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -86,8 +86,12 @@ const HEADER_OVERRIDES_FILENAME = '.headers';
 
 let tabId = 0;
 
-export class TabbedEditorContainer extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) {
+const TabbedEditorContainerBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class TabbedEditorContainer extends TabbedEditorContainerBase {
   #historyManager!: EditingLocationHistoryManager;
   set historyManager(historyManager: EditingLocationHistoryManager) {
     this.#historyManager = historyManager;

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -40,9 +40,13 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/UISourceCodeFrame.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class UISourceCodeFrame extends Common.ObjectWrapper
-                                           .eventMixin<EventTypes, typeof SourceFrame.SourceFrame.SourceFrameImpl>(
-                                               SourceFrame.SourceFrame.SourceFrameImpl) {
+const UISourceCodeFrameBase:
+    Common.ObjectWrapper.EventMixin<EventTypes, typeof SourceFrame.SourceFrame.SourceFrameImpl> =
+    Common.ObjectWrapper.eventMixin(
+        SourceFrame.SourceFrame.SourceFrameImpl,
+    );
+
+export class UISourceCodeFrame extends UISourceCodeFrameBase {
   #uiSourceCode: Workspace.UISourceCode.UISourceCode;
   #muteSourceCodeEvents = false;
   #persistenceBinding: Persistence.Persistence.PersistenceBinding|null;
@@ -150,6 +154,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 
   private unloadUISourceCode(): void {
+    this.textEditor.removeAttribute('data-file-path');
     Common.EventTarget.removeEventListeners(this.#messageAndDecorationListeners);
     Common.EventTarget.removeEventListeners(this.#uiSourceCodeEventListeners);
     this.#uiSourceCode.removeWorkingCopyGetter();
@@ -158,6 +163,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 
   private initializeUISourceCode(): void {
+    this.textEditor.setAttribute('data-file-path', this.#uiSourceCode.url());
     this.#uiSourceCodeEventListeners = [
       this.#uiSourceCode.addEventListener(
           Workspace.UISourceCode.Events.WorkingCopyChanged, this.onWorkingCopyChanged, this),
@@ -333,6 +339,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 
   private onTitleChanged(): void {
+    this.textEditor.setAttribute('data-file-path', this.#uiSourceCode.url());
     this.updateLanguageMode('').then(() => this.reloadPlugins(), console.error);
   }
 

package/front_end/panels/timeline/AnimationsTrackAppender.ts

@@ -17,7 +17,7 @@ import {
 
 const UIStrings = {
   /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Header for the animations track in the timeline flame chart of the Performance panel.
    */
   animations: 'Animations',
 } as const;

package/front_end/panels/timeline/AnnotationHelpers.ts

@@ -11,44 +11,44 @@ import type {AnnotationModifiedEvent} from './ModificationsManager.js';
 
 const UIStrings = {
   /**
-   * @description text used to announce to a screen reader that they have entered the mode to edit the label
+   * @description Screen reader announcement when entering label editing mode in the Performance panel.
    */
   srEnterLabelEditMode: 'Editing the annotation label text',
   /**
-   * @description text used to announce to a screen reader that the entry label text has been updated
+   * @description Screen reader announcement when an entry label text has been updated in the Performance panel.
    * @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
+   * @description Screen reader announcement when the bounds of a time range annotation have been updated in the Performance panel.
    * @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 Accessible label for a time range overlay in the timeline flame chart.
    */
   timeRange: 'time range',
   /**
-   * @description label for a entry label overlay
+   * @description Accessible label for an entry label overlay in the timeline flame chart.
    */
   entryLabel: 'entry label',
   /**
-   * @description label for a connected entries overlay
+   * @description Accessible label for a connected entries overlay in the timeline flame chart.
    */
   entriesLink: 'connected entries',
   /**
-   * @description screen reader text to announce that an annotation has been removed
+   * @description Screen reader announcement when an annotation has been removed in the Performance panel.
    * @example {Entry Label} PH1
    */
   srAnnotationRemoved: 'The {PH1} annotation has been removed',
   /**
-   * @description screen reader text to announce that an annotation has been added
+   * @description Screen reader announcement when an annotation has been added in the Performance panel.
    * @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
+   * @description Screen reader announcement when the connected entries annotation links to two events in the Performance panel.
    * @example {Paint} PH1
    * @example {Function call} PH2
    */

package/front_end/panels/timeline/CountersGraph.ts

@@ -18,35 +18,35 @@ import type {TimelineModeViewDelegate} from './TimelinePanel.js';
 
 const UIStrings = {
   /**
-   * @description Text for a heap profile type
+   * @description Label for the JS heap counter in the counters graph of the Performance panel.
    */
   jsHeap: 'JS heap',
   /**
-   * @description Text for documents, a type of resources
+   * @description Label for the documents counter in the counters graph of the Performance panel.
    */
   documents: 'Documents',
   /**
-   * @description Text in Counters Graph of the Performance panel
+   * @description Label for the DOM nodes counter in the counters graph of the Performance panel.
    */
   nodes: 'Nodes',
   /**
-   * @description Text in Counters Graph of the Performance panel
+   * @description Label for the event listeners counter in the counters graph of the Performance panel.
    */
   listeners: 'Listeners',
   /**
-   * @description Text in Counters Graph of the Performance panel
+   * @description Label for the GPU memory counter in the counters graph of the Performance panel.
    */
   gpuMemory: 'GPU memory',
   /**
-   * @description Range text content in Counters Graph of the Performance panel
+   * @description Range text content in the counters graph of the Performance panel.
    * @example {2} PH1
    * @example {10} PH2
    */
   ss: '[{PH1} – {PH2}]',
   /**
-   * @description text shown when no counter events are found and the graph is empty
+   * @description Message displayed when no memory usage data is found in the counters graph of the Performance panel.
    */
-  noEventsFound: 'No memory usage data found within selected events.',
+  noEventsFound: 'No memory usage data found within selected events',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/CountersGraph.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -18,15 +18,15 @@ import {TimelineUIUtils} from './TimelineUIUtils.js';
 
 const UIStrings = {
   /**
-   * @description Text for the start time of an activity
+   * @description Column header for start time in the event log tree view of the Performance panel.
    */
   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 event log by duration in the Performance panel.
    */
   durationFilter: 'Duration filter',
   /**
-   * @description Text for everything
+   * @description Option in the duration filter dropdown to show all events in the event log of the Performance panel.
    */
   all: 'All',
 } as const;

package/front_end/panels/timeline/ExtensionTrackAppender.ts

@@ -18,7 +18,7 @@ import * as Extensions from './extensions/extensions.js';
 
 const UIStrings = {
   /**
-   * @description The subtitle to show (by the side of the track name).
+   * @description Subtitle shown next to the track name for an extension track in the timeline flame chart.
    */
   customTrackSubtitle: '— Custom',
 } as const;

package/front_end/panels/timeline/GPUTrackAppender.ts

@@ -16,7 +16,7 @@ import {
 
 const UIStrings = {
   /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Header for the GPU track in the timeline flame chart of the Performance panel.
    */
   gpu: 'GPU',
 } as const;

package/front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -19,7 +19,7 @@ import * as Components from './components/components.js';
 
 const UIStrings = {
   /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Header for the interactions track in the timeline flame chart of the Performance panel.
    */
   interactions: 'Interactions',
 } as const;

package/front_end/panels/timeline/IsolateSelector.ts

@@ -10,11 +10,11 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 const UIStrings = {
   /**
-   * @description Text to show an item is empty
+   * @description Placeholder text shown when a JavaScript VM isolate has no label in the Performance panel.
    */
   empty: '(empty)',
   /**
-   * @description Text in isolate selector in Performance panel
+   * @description Title for the dropdown to select a JavaScript VM instance in the Performance panel.
    */
   selectJavascriptVmInstance: 'Select JavaScript VM instance',
 } as const;

package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -24,15 +24,15 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Header for the layout shifts track in the timeline flame chart of the Performance panel.
    */
   layoutShifts: 'Layout shifts',
   /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Title for a layout shift cluster event in the timeline flame chart.
    */
   layoutShiftCluster: 'Layout shift cluster',
   /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Title for a layout shift event in the timeline flame chart.
    */
   layoutShift: 'Layout shift',
 } as const;

package/front_end/panels/timeline/NetworkTrackAppender.ts

@@ -23,7 +23,7 @@ import {InstantEventVisibleDurationMs} from './TimelineFlameChartDataProvider.js
 
 const UIStrings = {
   /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Header for the network track in the timeline flame chart of the Performance panel.
    */
   network: 'Network',
 } as const;

package/front_end/panels/timeline/StatusDialog.ts

@@ -19,26 +19,25 @@ import timelineStatusDialogStyles from './timelineStatusDialog.css.js';
 
 const UIStrings = {
   /**
-   * @description Text to download the trace file after an error
+   * @description Button label to download the trace file after an error in the status dialog.
    */
   downloadAfterError: 'Download trace',
   /**
-   * @description Text for the status of something
+   * @description Label for the status field in the status dialog.
    */
   status: 'Status',
   /**
-   * @description Text that refers to the time
+   * @description Label for the elapsed time field in the status dialog.
    */
   time: 'Time',
   /**
-   * @description Text for the description of something
+   * @description Label for the description field in the status dialog.
    */
   description: 'Description',
   /**
-   * @description Text of an item that stops the running task
+   * @description Button label to stop recording in the status dialog.
    */
   stop: 'Stop',
-
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/StatusDialog.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/timeline/ThirdPartyTreeView.ts

@@ -13,19 +13,19 @@ import * as TimelineTreeView from './TimelineTreeView.js';
 
 const UIStrings = {
   /**
-   * @description Unattributed text for an unattributed entity.
+   * @description Label for an unattributed entity in the 1st / 3rd party tree view.
    */
   unattributed: '[unattributed]',
   /**
-   * @description Title for the name of either 1st or 3rd Party entities.
+   * @description Column header for entity names in the 1st / 3rd party tree view.
    */
   firstOrThirdPartyName: '1st / 3rd party',
   /**
-   * @description Title referencing transfer size.
+   * @description Column header for the network transfer size in the 1st / 3rd party tree view.
    */
   transferSize: 'Transfer size',
   /**
-   * @description Title referencing main thread time.
+   * @description Column header for the main thread time in the 1st / 3rd party tree view.
    */
   mainThreadTime: 'Main thread time',
 } as const;

package/front_end/panels/timeline/ThreadAppender.ts

@@ -29,61 +29,59 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Text shown for an entry in the flame chart that is ignored because it matches
-   * a predefined ignore list.
+   * @description Text shown for an entry in the flame chart that matches an ignore list rule.
    * @example {/analytics\.js$} rule
    */
   onIgnoreList: 'On ignore list ({rule})',
   /**
-   * @description Refers to the "Main frame", meaning the top level frame. See https://www.w3.org/TR/html401/present/frames.html
+   * @description Header for the main thread track of a top-level frame in the timeline flame chart.
    * @example {example.com} PH1
    */
   mainS: 'Main — {PH1}',
   /**
-   * @description Refers to the main thread of execution of a program. See https://developer.mozilla.org/en-US/docs/Glossary/Main_thread
+   * @description Header for the main thread track in the timeline flame chart.
    */
   main: 'Main',
   /**
-   * @description Refers to any frame in the page. See https://www.w3.org/TR/html401/present/frames.html
+   * @description Header for a frame thread track in the timeline flame chart.
    * @example {https://example.com} PH1
    */
   frameS: 'Frame — {PH1}',
   /**
-   * @description A web worker in the page. See https://developer.mozilla.org/en-US/docs/Web/API/Worker
+   * @description Header for a dedicated worker thread track in the timeline flame chart.
    * @example {https://google.com} PH1
    */
   workerS: '`Worker` — {PH1}',
   /**
-   * @description A web worker in the page. See https://developer.mozilla.org/en-US/docs/Web/API/Worker
+   * @description Header for a named dedicated worker thread track in the timeline flame chart.
    * @example {FormatterWorker} PH1
    * @example {https://google.com} PH2
    */
   workerSS: '`Worker`: {PH1} — {PH2}',
   /**
-   * @description Label for a web worker exclusively allocated for a purpose.
+   * @description Header for an unnamed dedicated worker thread track in the timeline flame chart.
    */
   dedicatedWorker: 'Dedicated `Worker`',
   /**
-   * @description A generic name given for a thread running in the browser (sequence of programmed instructions).
-   * The placeholder is an enumeration given to the thread.
+   * @description Generic header for a thread track in the timeline flame chart.
    * @example {1} PH1
    */
   threadS: 'Thread {PH1}',
   /**
-   * @description Rasterization in computer graphics.
+   * @description Header for the rasterizer thread track in the timeline flame chart.
    */
   raster: 'Raster',
   /**
-   * @description Threads used for background tasks.
+   * @description Header for the thread pool track in the timeline flame chart.
    */
   threadPool: 'Thread pool',
   /**
-   * @description Name for a thread that rasterizes graphics in a website.
+   * @description Header for an indexed rasterizer thread track in the timeline flame chart.
    * @example {2} PH1
    */
   rasterizerThreadS: 'Rasterizer thread {PH1}',
   /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Header for an indexed thread pool worker track in the timeline flame chart.
    * @example {2} PH1
    */
   threadPoolThreadS: 'Thread pool worker {PH1}',

package/front_end/panels/timeline/TimelineController.ts

@@ -18,26 +18,23 @@ import * as RecordingMetadata from './RecordingMetadata.js';
 
 const UIStrings = {
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status text shown in the Performance panel when tracing is being initialized.
    */
   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 in the Performance panel while recording a trace.
    */
   tracing: 'Tracing…',
   /**
-   * @description Text in Timeline Controller of the Performance panel indicating that the Performance Panel cannot
-   * record a performance trace because the type of target (where possible types are page, service worker and shared
-   * worker) doesn't support it.
+   * @description Error message shown when performance trace recording is not supported for the selected target type in the Performance panel.
    */
   tracingNotSupported: 'Performance trace recording not supported for this type of target',
   /**
-   * @description Text in a status dialog shown during a performance trace of a web page. It indicates to the user what the tracing is currently waiting on.
+   * @description Status text shown in the status dialog while waiting for the page load event.
    */
   waitingForLoadEvent: 'Waiting for load event…',
   /**
-   * @description Text in a status dialog shown during a performance trace of a web page. It indicates to the user what the tracing is currently waiting on.
+   * @description Status text shown in the status dialog while waiting for the page load event and five additional seconds.
    */
   waitingForLoadEventPlus5Seconds: 'Waiting for load event (+5s)…',
 } as const;

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -42,31 +42,31 @@ import {TracingFrameLayerTree} from './TracingLayerTree.js';
 
 const UIStrings = {
   /**
-   * @description Text for the summary view
+   * @description Title for the summary tab in the details view of the Performance panel.
    */
   summary: 'Summary',
   /**
-   * @description Text in Timeline Details View of the Performance panel
+   * @description Title for the bottom-up tab in the details view of the Performance panel.
    */
   bottomup: 'Bottom-up',
   /**
-   * @description Text in Timeline Details View of the Performance panel
+   * @description Title for the call tree tab in the details view of the Performance panel.
    */
   callTree: 'Call tree',
   /**
-   * @description Text in Timeline Details View of the Performance panel
+   * @description Title for the event log tab in the details view of the Performance panel.
    */
   eventLog: 'Event log',
   /**
-   * @description Title of the paint profiler, old name of the performance pane
+   * @description Title for the paint profiler tab in the details view of the Performance panel.
    */
   paintProfiler: 'Paint profiler',
   /**
-   * @description Title of the Layers tool
+   * @description Title for the layers tab in the details view of the Performance panel.
    */
   layers: 'Layers',
   /**
-   * @description Title of the selector stats tab
+   * @description Title for the selector stats tab in the details view of the Performance panel.
    */
   selectorStats: 'Selector stats',
 } as const;
@@ -74,8 +74,12 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineDetailsView.ts
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {widget} = UI.Widget;
 
-export class TimelineDetailsPane extends
-    Common.ObjectWrapper.eventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+const TimelineDetailsPaneBase: Common.ObjectWrapper.EventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class TimelineDetailsPane extends TimelineDetailsPaneBase {
   private readonly detailsLinkifier: Components.Linkifier.Linkifier;
   private tabbedPane: UI.TabbedPane.TabbedPane;
   private readonly defaultDetailsWidget: UI.Widget.VBox;

package/front_end/panels/timeline/TimelineEventOverview.ts

@@ -14,19 +14,19 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 const UIStrings = {
   /**
-   * @description Short for Network. Label for the network requests section of the Performance panel.
+   * @description Label for the network overview strip in the Performance panel.
    */
   net: 'NET',
   /**
-   * @description Text in Timeline Event Overview of the Performance panel
+   * @description Label for the CPU overview strip in the Performance panel.
    */
   cpu: 'CPU',
   /**
-   * @description Text in Timeline Event Overview of the Performance panel
+   * @description Label for the heap memory overview strip in the Performance panel.
    */
   heap: 'HEAP',
   /**
-   * @description Heap size label text content in Timeline Event Overview of the Performance panel
+   * @description Range label for minimum and maximum heap size in the heap memory overview strip of the Performance panel.
    * @example {10 MB} PH1
    * @example {30 MB} PH2
    */

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -31,71 +31,71 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Text for rendering frames
+   * @description Header for the frames track in the timeline flame chart.
    */
   frames: 'Frames',
   /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Label for an idle frame in the frames track.
    */
   idleFrame: 'Idle frame',
   /**
-   * @description Text in Timeline Frame Chart Data Provider of the Performance panel
+   * @description Label for a dropped frame in the frames track.
    */
   droppedFrame: 'Dropped frame',
   /**
-   * @description Text in Timeline Frame Chart Data Provider of the Performance panel
+   * @description Label for a partially-presented frame in the frames track.
    */
   partiallyPresentedFrame: 'Partially-presented frame',
   /**
-   * @description Text for a rendering frame
+   * @description Label for a presented frame in the frames track.
    */
   frame: 'Frame',
   /**
-   * @description Text for Hiding a function from the Flame Chart
+   * @description Context menu item to hide a function in the timeline flame chart.
    */
   hideFunction: 'Hide function',
   /**
-   * @description Text for Hiding all children of a function from the Flame Chart
+   * @description Context menu item to hide child entries of a function in the timeline flame chart.
    */
   hideChildren: 'Hide children',
   /**
-   * @description Text for Hiding all child entries that are identical to the selected entry from the Flame Chart
+   * @description Context menu item to hide identical repeating child entries in the timeline flame chart.
    */
   hideRepeatingChildren: 'Hide repeating children',
   /**
-   * @description Text for remove script from ignore list from the Flame Chart
+   * @description Context menu item to remove a script from the ignore list in the timeline flame chart.
    */
   removeScriptFromIgnoreList: 'Remove script from ignore list',
   /**
-   * @description Text for add script to ignore list from the Flame Chart
+   * @description Context menu item to add a script to the ignore list in the timeline flame chart.
    */
   addScriptToIgnoreList: 'Add script to ignore list',
   /**
-   * @description Text for an action that shows all of the hidden children of an entry
+   * @description Context menu item to restore hidden child entries of an entry in the timeline flame chart.
    */
   resetChildren: 'Reset children',
   /**
-   * @description Text for an action that shows all of the hidden entries of the Flame Chart
+   * @description Context menu item to restore all hidden entries in the timeline flame chart.
    */
   resetTrace: 'Reset trace',
   /**
-   * @description Text of a context menu item to redirect to the AI assistance panel and to start a chat.
+   * @description Context menu item to start a chat in the AI assistance panel.
    */
   startAChat: 'Start a chat',
   /**
-   * @description Context menu item in Performance panel to label an entry.
+   * @description Context menu item to add a label annotation to an entry in the Performance panel.
    */
   labelEntry: 'Label entry',
   /**
-   * @description Context menu item in Performance panel to assess the purpose of an entry via AI.
+   * @description Context menu item to assess the purpose of an entry using AI assistance in the Performance panel.
    */
   assessThePurpose: 'Assess the purpose',
   /**
-   * @description Context menu item in Performance panel to identify time spent in a call tree via AI.
+   * @description Context menu item to identify time spent in a call tree using AI assistance in the Performance panel.
    */
   identifyTimeSpent: 'Identify time spent',
   /**
-   * @description Context menu item in Performance panel to find improvements for a call tree via AI.
+   * @description Context menu item to find performance improvements for a call tree using AI assistance in the Performance panel.
    */
   findImprovements: 'Find improvements',
 } as const;

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -49,7 +49,7 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Text in Timeline Flame Chart View of the Performance panel
+   * @description Accessible title for a timeline marker at a given timestamp in the Performance panel.
    * @example {Frame} PH1
    * @example {10ms} PH2
    */
@@ -89,8 +89,13 @@ interface FlameChartDimmer {
   outline: boolean|{main: number[] | boolean, network: number[]|boolean};
 }
 
-export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) implements PerfUI.FlameChart.FlameChartDelegate, UI.SearchableView.Searchable {
+const TimelineFlameChartViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class TimelineFlameChartView extends TimelineFlameChartViewBase implements PerfUI.FlameChart.FlameChartDelegate,
+                                                                                  UI.SearchableView.Searchable {
   private readonly delegate: TimelineModeViewDelegate;
   /**
    * Tracks the indexes of matched entries when the user searches the panel.