chrome-devtools-frontend 1.0.1689415 → 1.0.1690531

package/front_end/panels/profiler/profilesPanel.css

@@ -26,7 +26,6 @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
-/* Profiler Style */
 
 #profile-views {
   flex: auto;
@@ -61,7 +60,7 @@
 
 .profiles-toolbar {
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   flex-shrink: 0;
 }
 
@@ -95,8 +94,8 @@
 }
 
 .profile-warn-marker {
-  vertical-align: -1px;
-  margin-right: 2px;
+  vertical-align: calc(-1 * var(--sys-size-1));
+  margin-right: var(--sys-size-2);
 }
 
 .cpu-profile-flame-chart-overview-container {
@@ -104,17 +103,17 @@
   position: absolute;
   top: 0;
   width: 100%;
-  height: 80px;
+  height: var(--sys-size-19);
 }
 
 #cpu-profile-flame-chart-overview-container {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: hidden;
 }
 
 .cpu-profile-flame-chart-overview-canvas {
   position: absolute;
-  inset: 20px 0 0;
+  inset: var(--sys-size-9) 0 0;
 }
 
 #cpu-profile-flame-chart-overview-grid .resources-dividers-label-bar {
@@ -122,7 +121,7 @@
 }
 
 .cpu-profile-flame-chart-overview-pane {
-  flex: 0 0 80px !important; /* stylelint-disable-line declaration-no-important */
+  flex: 0 0 var(--sys-size-19) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .profile-text-view {
@@ -139,7 +138,7 @@
   justify-content: center;
   align-items: center;
   overflow: auto;
-  font-size: 16px;
+  font-size: var(--sys-typescale-body1-size);
   color: var(--sys-color-token-subtle);
   padding: 50px;
 }

package/front_end/panels/profiler/profilesSidebarTree.css

@@ -13,8 +13,8 @@
 
 /* Icon-related changes */
 li .icon {
-  width: 20px;
-  height: 20px;
+  width: var(--sys-size-9);
+  height: var(--sys-size-9);
   margin-right: var(--sys-size-6);
   flex: none;
 }
@@ -32,8 +32,8 @@ li .icon {
 }
 
 li.small .icon {
-  width: 16px;
-  height: 16px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
 }
 
 li.wait .icon {
@@ -86,13 +86,13 @@ ol.tree-outline {
   }
 
   & .selection {
-    border-radius: 0 100px 100px 0;
+    border-radius: 0 var(--sys-shape-corner-full) var(--sys-shape-corner-full) 0;
   }
 }
 
 .tree-outline .profile-launcher-view-tree-item,
 .tree-outline li.profiles-tree-section + .children > li {
-  border-radius: 0 100px 100px 0;
+  border-radius: 0 var(--sys-shape-corner-full) var(--sys-shape-corner-full) 0;
   position: relative;
 
   &.selected {
@@ -121,7 +121,7 @@ ol.tree-outline {
   }
 
   &:focus-visible {
-    box-shadow: inset 0 0 0 2px var(--sys-color-state-focus-ring);
+    box-shadow: inset 0 0 0 var(--sys-size-2) var(--sys-color-state-focus-ring);
   }
 }
 
@@ -146,17 +146,17 @@ ol.tree-outline {
 /* Generic items styling */
 
 li.wait .spinner::before {
-  --dimension: 20px;
+  --dimension: var(--sys-size-9);
 
   margin: 0;
 }
 
 li.wait.small .spinner::before {
-  --dimension: 14px;
+  --dimension: var(--sys-size-7);
   --clip-size: 9px;
-  --override-spinner-size: 2px;
+  --override-spinner-size: var(--sys-size-2);
 
-  margin: 1px;
+  margin: var(--sys-size-1);
 }
 
 li.wait.selected .spinner::before {
@@ -174,7 +174,7 @@ li.wait.selected .spinner::before {
 }
 
 li.small {
-  height: 20px;
+  height: var(--sys-size-9);
 }
 
 li .titles {
@@ -199,7 +199,7 @@ li .titles > .title-container .title.editing {
 }
 
 li.small .titles {
-  top: 2px;
+  top: var(--sys-size-2);
   line-height: normal;
 }
 

package/front_end/panels/protocol_monitor/JSONEditor.css

@@ -23,7 +23,7 @@
 
 .warning-icon {
   margin-left: -18px;
-  margin-right: 4px;
+  margin-right: var(--sys-size-3);
 }
 
 .row {
@@ -104,5 +104,5 @@ ul {
 }
 
 .protocol-monitor-sidebar-toolbar {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -177,7 +177,12 @@ export interface EventTypes {
   [Events.SUBMIT_EDITOR]: Command;
 }
 
-export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+const JSONEditorBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class JSONEditor extends JSONEditorBase {
   #metadataByCommand = new Map<string, {parameters: Parameter[], description: string, replyArgs: string[]}>();
   #typesByName = new Map<string, Parameter[]>();
   #enumsByName = new Map<string, Record<string, string>>();

package/front_end/panels/protocol_monitor/protocolMonitor.css

@@ -5,11 +5,11 @@
  */
 @scope to (devtools-widget > *) {
   .protocol-monitor-toolbar {
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   .protocol-monitor-bottom-toolbar {
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   .target-selector {

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -164,7 +164,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
   #editor?: TextEditor.TextEditor.TextEditor;
   #state?: CodeMirror.EditorState;
 
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super({
       jslog: `${VisualLogging.dialog('edit-breakpoint')}`,
       useShadowDom: true,

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -498,7 +498,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
   }
 }
 
-export const elementSymbol = Symbol('element');
+export const elementSymbol: unique symbol = Symbol('element');
 export const defaultMaxAsyncStackChainDepth = 32;
 
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -182,7 +182,8 @@ const DEFAULT_VIEW = (input: ViewInput|null, _output: undefined, target: Documen
 type View = typeof DEFAULT_VIEW;
 
 export class DebuggerPausedMessage extends UI.Widget.Widget<ShadowRoot> {
-  static override readonly INJECT = [SDK.EventBreakpointsModel.EventBreakpointsManager] as const;
+  static override readonly INJECT: readonly[typeof SDK.EventBreakpointsModel.EventBreakpointsManager] =
+      [SDK.EventBreakpointsModel.EventBreakpointsManager] as const;
 
   #viewInput: ViewInput|null = null;
   readonly #eventBreakpointsManager: SDK.EventBreakpointsModel.EventBreakpointsManager;
@@ -342,11 +343,12 @@ export class DebuggerPausedMessage extends UI.Widget.Widget<ShadowRoot> {
   }
 }
 
-export const BreakpointTypeNouns = new Map([
-  [Protocol.DOMDebugger.DOMBreakpointType.SubtreeModified, i18nLazyString(UIStrings.subtreeModifications)],
-  [Protocol.DOMDebugger.DOMBreakpointType.AttributeModified, i18nLazyString(UIStrings.attributeModifications)],
-  [Protocol.DOMDebugger.DOMBreakpointType.NodeRemoved, i18nLazyString(UIStrings.nodeRemoval)],
-]);
+export const BreakpointTypeNouns: Map<Protocol.DOMDebugger.DOMBreakpointType, () => Platform.UIString.LocalizedString> =
+    new Map([
+      [Protocol.DOMDebugger.DOMBreakpointType.SubtreeModified, i18nLazyString(UIStrings.subtreeModifications)],
+      [Protocol.DOMDebugger.DOMBreakpointType.AttributeModified, i18nLazyString(UIStrings.attributeModifications)],
+      [Protocol.DOMDebugger.DOMBreakpointType.NodeRemoved, i18nLazyString(UIStrings.nodeRemoval)],
+    ]);
 
 interface PausedDetailsAuxData {
   description?: string;

package/front_end/panels/sources/ProfilePlugin.ts

@@ -66,7 +66,8 @@ function markersFromProfileData(map: Workspace.UISourceCode.LineColumnProfileMap
 }
 
 export class PerformanceProfilePlugin extends Plugin {
-  updateEffect = CodeMirror.StateEffect.define<Workspace.UISourceCode.LineColumnProfileMap>();
+  updateEffect: CodeMirror.StateEffectType<Workspace.UISourceCode.LineColumnProfileMap> =
+      CodeMirror.StateEffect.define<Workspace.UISourceCode.LineColumnProfileMap>();
   field: CodeMirror.StateField<CodeMirror.RangeSet<CodeMirror.GutterMarker>>;
   gutter: CodeMirror.Extension;
   compartment: CodeMirror.Compartment = new CodeMirror.Compartment();

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -189,7 +189,7 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
           null;
   #view: View;
 
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target, {
       jslog: `${VisualLogging.section('sources.scope-chain')}`,
       useShadowDom: true,

package/front_end/panels/sources/SourcesView.ts

@@ -117,8 +117,13 @@ export const DEFAULT_VIEW: View = (input, output, target): void => {
   // clang-format on
 };
 
-export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
-    implements UI.SearchableView.Searchable, UI.SearchableView.Replaceable {
+const SourcesViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class SourcesView extends SourcesViewBase implements UI.SearchableView.Searchable,
+                                                            UI.SearchableView.Replaceable {
   #searchableView!: UI.SearchableView.SearchableView;
   editorContainer?: TabbedEditorContainer;
   #uiSourceCodes = new Set<Workspace.UISourceCode.UISourceCode>();

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;
@@ -25,7 +25,7 @@ export class IsolateSelector extends UI.Toolbar.ToolbarItem implements SDK.Isola
   menu: Menus.SelectMenu.SelectMenu;
   options?: Array<{index: number, isolate: SDK.IsolateManager.Isolate}>;
   items?: Menus.Menu.MenuItem[];
-  readonly itemByIsolate = new Map<SDK.IsolateManager.Isolate, Menus.Menu.MenuItem>();
+  readonly itemByIsolate: Map<SDK.IsolateManager.Isolate, Menus.Menu.MenuItem> = new Map();
   readonly #targetManager: SDK.TargetManager.TargetManager;
   readonly #isolateManager: SDK.IsolateManager.IsolateManager;
 

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;
@@ -48,7 +48,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
  * allow us to do this properly and not hack around it.
  * TODO: Delete this once the new Layout Shift UI ships out of the TIMELINE_LAYOUT_SHIFT_DETAILS experiment
  **/
-export const LAYOUT_SHIFT_SYNTHETIC_DURATION = Trace.Types.Timing.Micro(5_000);
+export const LAYOUT_SHIFT_SYNTHETIC_DURATION: Trace.Types.Timing.Micro = Trace.Types.Timing.Micro(5_000);
 
 export class LayoutShiftsTrackAppender implements TrackAppender {
   readonly appenderName: TrackAppenderName = 'LayoutShifts';

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;
@@ -37,7 +37,7 @@ export class NetworkTrackAppender implements TrackAppender {
   readonly appenderName: TrackAppenderName = 'Network';
 
   #flameChartData: PerfUI.FlameChart.FlameChartTimelineData;
-  webSocketIdToLevel = new Map<number, number>();
+  webSocketIdToLevel: Map<number, number> = new Map();
   #events: NetworkTrackEvent[] = [];
 
   #font: string;

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;