chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/timeline/ModificationsManager.ts

@@ -9,13 +9,13 @@ import * as TimelineComponents from '../../panels/timeline/components/components
 
 import * as AnnotationHelpers from './AnnotationHelpers.js';
 import {EntriesFilter} from './EntriesFilter.js';
-import {EventsSerializer} from './EventsSerializer.js';
-import type * as Overlays from './overlays/overlays.js';
+import * as Utils from './utils/utils.js';
 
 const modificationsManagerByTraceIndex: ModificationsManager[] = [];
 let activeManager: ModificationsManager|null;
 
-export type UpdateAction = 'Remove'|'Add'|'UpdateLabel'|'UpdateTimeRange'|'UpdateLinkToEntry'|'EnterLabelEditState';
+export type UpdateAction =
+    'Remove'|'Add'|'UpdateLabel'|'UpdateTimeRange'|'UpdateLinkToEntry'|'EnterLabelEditState'|'LabelBringForward';
 
 // Event dispatched after an annotation was added, removed or updated.
 // The event argument is the Overlay that needs to be created,removed
@@ -23,7 +23,8 @@ export type UpdateAction = 'Remove'|'Add'|'UpdateLabel'|'UpdateTimeRange'|'Updat
 export class AnnotationModifiedEvent extends Event {
   static readonly eventName = 'annotationmodifiedevent';
 
-  constructor(public overlay: Overlays.Overlays.TimelineOverlay, public action: UpdateAction) {
+  constructor(
+      public overlay: Trace.Types.Overlays.Overlay, public action: UpdateAction, public muteAriaNotifications = false) {
     super(AnnotationModifiedEvent.eventName);
   }
 }
@@ -41,8 +42,8 @@ export class ModificationsManager extends EventTarget {
   #timelineBreadcrumbs: TimelineComponents.Breadcrumbs.Breadcrumbs;
   #modifications: Trace.Types.File.Modifications|null = null;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace;
-  #eventsSerializer: EventsSerializer;
-  #overlayForAnnotation: Map<Trace.Types.File.Annotation, Overlays.Overlays.TimelineOverlay>;
+  #eventsSerializer: Utils.EventsSerializer.EventsSerializer;
+  #overlayForAnnotation: Map<Trace.Types.File.Annotation, Trace.Types.Overlays.Overlay>;
   readonly #annotationsHiddenSetting: Common.Settings.Setting<boolean>;
 
   /**
@@ -109,7 +110,7 @@ export class ModificationsManager extends EventTarget {
     this.#timelineBreadcrumbs = new TimelineComponents.Breadcrumbs.Breadcrumbs(traceBounds);
     this.#modifications = modifications || null;
     this.#parsedTrace = parsedTrace;
-    this.#eventsSerializer = new EventsSerializer();
+    this.#eventsSerializer = new Utils.EventsSerializer.EventsSerializer();
     // This method is also called in SidebarAnnotationsTab, but calling this multiple times doesn't recreate the setting.
     // Instead, after the second call, the cached setting is returned.
     this.#annotationsHiddenSetting = Common.Settings.Settings.instance().moduleSetting('annotations-hidden');
@@ -137,8 +138,10 @@ export class ModificationsManager extends EventTarget {
    * Stores the annotation and creates its overlay.
    * @returns the Overlay that gets created and associated with this annotation.
    */
-  createAnnotation(newAnnotation: Trace.Types.File.Annotation, loadedFromFile = false):
-      Overlays.Overlays.TimelineOverlay {
+  createAnnotation(newAnnotation: Trace.Types.File.Annotation, opts: {
+    loadedFromFile: boolean,
+    muteAriaNotifications: boolean,
+  }): Trace.Types.Overlays.Overlay {
     // If a label already exists on an entry and a user is trying to create a new one, start editing an existing label instead.
     if (newAnnotation.type === 'ENTRY_LABEL') {
       const overlay = this.#findLabelOverlayForEntry(newAnnotation.entry);
@@ -150,7 +153,7 @@ export class ModificationsManager extends EventTarget {
 
     // If the new annotation created was not loaded from the file, set the annotations visibility setting to true. That way we make sure
     // the annotations are on when a new one is created.
-    if (!loadedFromFile) {
+    if (!opts.loadedFromFile) {
       // Time range annotation could also be used to check the length of a selection in the timeline. Therefore, only set the annotations
       // hidden to true if annotations label is added. This is done in OverlaysImpl.
       if (newAnnotation.type !== 'TIME_RANGE') {
@@ -159,33 +162,10 @@ export class ModificationsManager extends EventTarget {
     }
     const newOverlay = this.#createOverlayFromAnnotation(newAnnotation);
     this.#overlayForAnnotation.set(newAnnotation, newOverlay);
-    this.dispatchEvent(new AnnotationModifiedEvent(newOverlay, 'Add'));
+    this.dispatchEvent(new AnnotationModifiedEvent(newOverlay, 'Add', opts.muteAriaNotifications));
     return newOverlay;
   }
 
-  annotationsForEntry(entry: Trace.Types.Events.Event): Trace.Types.File.Annotation[] {
-    const annotationsForEntry = [];
-
-    for (const [annotation] of this.#overlayForAnnotation.entries()) {
-      if (annotation.type === 'ENTRY_LABEL' && annotation.entry === entry) {
-        annotationsForEntry.push(annotation);
-      } else if (
-          annotation.type === 'ENTRIES_LINK' && (annotation.entryFrom === entry || annotation.entryTo === entry)) {
-        annotationsForEntry.push(annotation);
-      }
-    }
-
-    return annotationsForEntry;
-  }
-
-  // Deletes all annotations associated with an entry
-  deleteEntryAnnotations(entry: Trace.Types.Events.Event): void {
-    const annotationsForEntry = this.annotationsForEntry(entry);
-    annotationsForEntry.forEach(annotation => {
-      this.removeAnnotation(annotation);
-    });
-  }
-
   linkAnnotationBetweenEntriesExists(entryFrom: Trace.Types.Events.Event, entryTo: Trace.Types.Events.Event): boolean {
     for (const annotation of this.#overlayForAnnotation.keys()) {
       if (annotation.type === 'ENTRIES_LINK' &&
@@ -197,7 +177,7 @@ export class ModificationsManager extends EventTarget {
     return false;
   }
 
-  #findLabelOverlayForEntry(entry: Trace.Types.Events.Event): Overlays.Overlays.TimelineOverlay|null {
+  #findLabelOverlayForEntry(entry: Trace.Types.Events.Event): Trace.Types.Overlays.Overlay|null {
     for (const [annotation, overlay] of this.#overlayForAnnotation.entries()) {
       if (annotation.type === 'ENTRY_LABEL' && annotation.entry === entry) {
         return overlay;
@@ -207,8 +187,15 @@ export class ModificationsManager extends EventTarget {
     return null;
   }
 
-  #createOverlayFromAnnotation(annotation: Trace.Types.File.Annotation): Overlays.Overlays.EntryLabel
-      |Overlays.Overlays.TimeRangeLabel|Overlays.Overlays.EntriesLink {
+  bringEntryLabelForwardIfExists(entry: Trace.Types.Events.Event): void {
+    const overlay = this.#findLabelOverlayForEntry(entry);
+    if (overlay?.type === 'ENTRY_LABEL') {
+      this.dispatchEvent(new AnnotationModifiedEvent(overlay, 'LabelBringForward'));
+    }
+  }
+
+  #createOverlayFromAnnotation(annotation: Trace.Types.File.Annotation): Trace.Types.Overlays.EntryLabel
+      |Trace.Types.Overlays.TimeRangeLabel|Trace.Types.Overlays.EntriesLink {
     switch (annotation.type) {
       case 'ENTRY_LABEL':
         return {
@@ -245,7 +232,7 @@ export class ModificationsManager extends EventTarget {
     this.dispatchEvent(new AnnotationModifiedEvent(overlayToRemove, 'Remove'));
   }
 
-  removeAnnotationOverlay(removedOverlay: Overlays.Overlays.TimelineOverlay): void {
+  removeAnnotationOverlay(removedOverlay: Trace.Types.Overlays.Overlay): void {
     const annotationForRemovedOverlay = this.getAnnotationByOverlay(removedOverlay);
     if (!annotationForRemovedOverlay) {
       console.warn('Annotation for deleted Overlay does not exist', removedOverlay);
@@ -276,7 +263,7 @@ export class ModificationsManager extends EventTarget {
     }
   }
 
-  updateAnnotationOverlay(updatedOverlay: Overlays.Overlays.TimelineOverlay): void {
+  updateAnnotationOverlay(updatedOverlay: Trace.Types.Overlays.Overlay): void {
     const annotationForUpdatedOverlay = this.getAnnotationByOverlay(updatedOverlay);
     if (!annotationForUpdatedOverlay) {
       console.warn('Annotation for updated Overlay does not exist');
@@ -296,7 +283,7 @@ export class ModificationsManager extends EventTarget {
     }
   }
 
-  getAnnotationByOverlay(overlay: Overlays.Overlays.TimelineOverlay): Trace.Types.File.Annotation|null {
+  getAnnotationByOverlay(overlay: Trace.Types.Overlays.Overlay): Trace.Types.File.Annotation|null {
     for (const [annotation, currOverlay] of this.#overlayForAnnotation.entries()) {
       if (currOverlay === overlay) {
         return annotation;
@@ -305,20 +292,24 @@ export class ModificationsManager extends EventTarget {
     return null;
   }
 
+  getOverlaybyAnnotation(annotation: Trace.Types.File.Annotation): Trace.Types.Overlays.Overlay|null {
+    return this.#overlayForAnnotation.get(annotation) || null;
+  }
+
   getAnnotations(): Trace.Types.File.Annotation[] {
     return [...this.#overlayForAnnotation.keys()];
   }
 
-  getOverlays(): Overlays.Overlays.TimelineOverlay[] {
+  getOverlays(): Trace.Types.Overlays.Overlay[] {
     return [...this.#overlayForAnnotation.values()];
   }
 
-  applyAnnotationsFromCache(): void {
+  applyAnnotationsFromCache(opts: {muteAriaNotifications: boolean}): void {
     this.#modifications = this.toJSON();
     // The cache is filled by applyModificationsIfPresent, so we clear
     // it beforehand to prevent duplicate entries.
     this.#overlayForAnnotation.clear();
-    this.#applyStoredAnnotations(this.#modifications.annotations);
+    this.#applyStoredAnnotations(this.#modifications.annotations, opts);
   }
 
   /**
@@ -396,10 +387,13 @@ export class ModificationsManager extends EventTarget {
 
     this.#timelineBreadcrumbs.setInitialBreadcrumbFromLoadedModifications(this.#modifications.initialBreadcrumb);
     this.#applyEntriesFilterModifications(hiddenEntries, expandableEntries);
-    this.#applyStoredAnnotations(this.#modifications.annotations);
+    this.#applyStoredAnnotations(this.#modifications.annotations, {
+      muteAriaNotifications: false,
+    });
   }
 
-  #applyStoredAnnotations(annotations: Trace.Types.File.SerializedAnnotations): void {
+  #applyStoredAnnotations(annotations: Trace.Types.File.SerializedAnnotations, opts: {muteAriaNotifications: boolean}):
+      void {
     try {
       // Assign annotations to an empty array if they don't exist to not
       // break the traces that were saved before those annotations were implemented
@@ -411,7 +405,10 @@ export class ModificationsManager extends EventTarget {
               entry: this.#eventsSerializer.eventForKey(entryLabel.entry, this.#parsedTrace),
               label: entryLabel.label,
             },
-            true);
+            {
+              loadedFromFile: true,
+              muteAriaNotifications: opts.muteAriaNotifications,
+            });
       });
 
       const timeRanges = annotations.labelledTimeRanges ?? [];
@@ -422,7 +419,10 @@ export class ModificationsManager extends EventTarget {
               bounds: timeRange.bounds,
               label: timeRange.label,
             },
-            true);
+            {
+              loadedFromFile: true,
+              muteAriaNotifications: opts.muteAriaNotifications,
+            });
       });
 
       const linksBetweenEntries = annotations.linksBetweenEntries ?? [];
@@ -434,7 +434,10 @@ export class ModificationsManager extends EventTarget {
               entryFrom: this.#eventsSerializer.eventForKey(linkBetweenEntries.entryFrom, this.#parsedTrace),
               entryTo: this.#eventsSerializer.eventForKey(linkBetweenEntries.entryTo, this.#parsedTrace),
             },
-            true);
+            {
+              loadedFromFile: true,
+              muteAriaNotifications: opts.muteAriaNotifications,
+            });
       });
     } catch (err) {
       // This function is wrapped in a try/catch just in case we get any incoming

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 Text in Timeline Flame Chart Data Provider of the Performance panel
    */
   network: 'Network',
 } as const;
@@ -71,7 +71,7 @@ export class NetworkTrackAppender implements TrackAppender {
    * Network 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.
    */
@@ -91,7 +91,7 @@ export class NetworkTrackAppender 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({

package/front_end/panels/timeline/README.md

@@ -268,6 +268,8 @@ Note: because this approach uses `SyntheticProfileCalls`, which are built from C
 
 We allow the user to edit the visual status and order of tracks in the main flame chart. Initially when we shipped this feature it was not persisted, meaning that if you refreshed or imported another trace, your configuration was lost. This was changed in crrev.com/c/6632596 which added persisting of the track configuration into memory, and added these docs too :)
 
+As of crrev.com/c/6862799, this feature was changed to be persisted across all traces, whereas previously configuration was only applied per trace, which made it much less useful.
+
 ### How tracks get rendered
 
 Tracks on the timeline are called `Groups` in the code (`PerfUI.FlameChart.Group`). These get constructed in the data providers and pushed onto the `groups` array.
@@ -323,21 +325,11 @@ We persist the order of the groups and for each group its `hidden` and `expanded
   originalIndex: 0,
   visualIndex: 2,
   hidden: false,
-  expanded: true
+  expanded: true,
+  trackName: 'Frames',
 }
 ```
 
 When the user makes any visual change to the UI, which happens in `FlameChart.ts`, we notify the data provider of that change. It can then choose to persist this data anywhere it likes. In our case, we persist into a DevTools setting which is persisted globally (e.g. it survives restarts).
 
-Because the user can import/record multiple traces over time, we cannot just persist the array of group states, because then we would mistakenly apply it to other traces. To avoid this we persist the list of groups under a key. The key is the `min` time for each trace (e.g. the time the trace started). This is not guaranteed to be unique, but it is pretty likely to be, given that it is monotonic and microsecond precision.
-
-So, what actually gets stored into the setting is:
-
-```
-{
-  12345: [{...group state as above...}],
-  56789: [{...group state as above...}],
-}
-```
-
-When a trace is recorded / imported, we look to read any persisted configuration from disk before applying it.
+We store this as two global settings (one for the main flame chart, one for the network flame chart). This means that the user can make changes to one trace and it is applied to all future traces. This is by design - we have lots of feedback that there is a lot of noise that people want to hide.

package/front_end/panels/timeline/RecordingMetadata.ts

@@ -0,0 +1,79 @@
+// 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 * as SDK from '../../core/sdk/sdk.js';
+import type * as CrUXManager from '../../models/crux-manager/crux-manager.js';
+import * as EmulationModel from '../../models/emulation/emulation.js';
+import * as Trace from '../../models/trace/trace.js';
+
+export interface DataFromController {
+  recordingStartTime?: number;
+  cruxFieldData?: CrUXManager.PageResult[]|null;
+}
+
+/**
+ * We do not track any custom metadata for CPU Profiles.
+ */
+export function forCPUProfile(): Trace.Types.File.MetaData {
+  return {
+    dataOrigin: Trace.Types.File.DataOrigin.CPU_PROFILE,
+  };
+}
+
+/**
+ * Calculates and returns the Metadata for the last trace recording.
+ * Wrapped in a try/catch because if anything goes wrong, we don't want to
+ * break DevTools; we would rather just store no metadata.
+ */
+export async function forTrace(dataFromController: DataFromController = {}): Promise<Trace.Types.File.MetaData> {
+  try {
+    return await innerForTraceCalculate(dataFromController);
+  } catch {
+    return {};
+  }
+}
+
+async function innerForTraceCalculate({recordingStartTime, cruxFieldData}: DataFromController = {}):
+    Promise<Trace.Types.File.MetaData> {
+  const deviceModeModel = EmulationModel.DeviceModeModel.DeviceModeModel.tryInstance();
+  let emulatedDeviceTitle;
+  if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Device) {
+    emulatedDeviceTitle = deviceModeModel.device()?.title ?? undefined;
+  } else if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
+    emulatedDeviceTitle = 'Responsive';
+  }
+
+  const cpuThrottling = SDK.CPUThrottlingManager.CPUThrottlingManager.instance().cpuThrottlingRate();
+  const networkConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().isThrottling() ?
+      SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions() :
+      undefined;
+
+  let networkThrottlingConditions;
+  let networkTitle;
+  if (networkConditions) {
+    networkThrottlingConditions = {
+      download: networkConditions.download,
+      upload: networkConditions.upload,
+      latency: networkConditions.latency,
+      packetLoss: networkConditions.packetLoss,
+      packetQueueLength: networkConditions.packetQueueLength,
+      packetReordering: networkConditions.packetReordering,
+      targetLatency: networkConditions.targetLatency,
+      key: networkConditions.key,
+    };
+    networkTitle = typeof networkConditions.title === 'function' ? networkConditions.title() : networkConditions.title;
+  }
+
+  return {
+    source: 'DevTools',
+    startTime: recordingStartTime ? new Date(recordingStartTime).toJSON() : undefined,  // ISO-8601 timestamp
+    emulatedDeviceTitle,
+    cpuThrottling: cpuThrottling !== 1 ? cpuThrottling : undefined,
+    networkThrottling: networkTitle,
+    networkThrottlingConditions,
+    dataOrigin: Trace.Types.File.DataOrigin.TRACE_EVENTS,
+    cruxFieldData: cruxFieldData ?? undefined,
+    hostDPR: window.devicePixelRatio,
+  };
+}

package/front_end/panels/timeline/SaveFileFormatter.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Protocol from '../../generated/protocol.js';
 import type * as Trace from '../../models/trace/trace.js';
 /**
  * Generates a JSON representation of an array of objects with the objects
@@ -57,10 +56,3 @@ export function*
   yield* arrayOfObjectsJsonGenerator(traceEvents);
   yield '}\n';
 }
-
-/**
- * Generates a JSON representation of CPU profile.
- */
-export function cpuprofileJsonGenerator(cpuprofile: Protocol.Profiler.Profile): string {
-  return JSON.stringify(cpuprofile);
-}

package/front_end/panels/timeline/StatusDialog.ts

@@ -8,6 +8,7 @@ import '../../ui/legacy/legacy.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import type * as Buttons from '../../ui/components/buttons/buttons.js';
@@ -19,23 +20,23 @@ import timelineStatusDialogStyles from './timelineStatusDialog.css.js';
 
 const UIStrings = {
   /**
-   *@description Text to download the trace file after an error
+   * @description Text to download the trace file after an error
    */
   downloadAfterError: 'Download trace',
   /**
-   *@description Text for the status of something
+   * @description Text for the status of something
    */
   status: 'Status',
   /**
-   *@description Text that refers to the time
+   * @description Text that refers to the time
    */
   time: 'Time',
   /**
-   *@description Text for the description of something
+   * @description Text for the description of something
    */
   description: 'Description',
   /**
-   *@description Text of an item that stops the running task
+   * @description Text of an item that stops the running task
    */
   stop: 'Stop',
 
@@ -67,10 +68,12 @@ export class StatusDialog extends UI.Widget.VBox {
         buttonText?: string,
       },
       onButtonClickCallback: () => (Promise<void>| void)) {
-    super(true);
+    super({
+      jslog: `${VisualLogging.dialog('timeline-status').track({resize: true})}`,
+      useShadowDom: true,
+    });
 
     this.contentElement.classList.add('timeline-status-dialog');
-    this.contentElement.setAttribute('jslog', `${VisualLogging.dialog('timeline-status').track({resize: true})}`);
 
     const statusLine = this.contentElement.createChild('div', 'status-dialog-line status');
     statusLine.createChild('div', 'label').textContent = i18nString(UIStrings.status);
@@ -130,7 +133,8 @@ export class StatusDialog extends UI.Widget.VBox {
     const formattedTraceIter = traceJsonGenerator(this.#rawEvents, {});
     const traceAsString = Array.from(formattedTraceIter).join('');
     await Workspace.FileManager.FileManager.instance().save(
-        fileName, traceAsString, true /* forceSaveAs */, false /* isBase64 */);
+        fileName, new TextUtils.ContentData.ContentData(traceAsString, /* isBase64=*/ false, 'application/json'),
+        /* forceSaveAs=*/ true);
     Workspace.FileManager.FileManager.instance().close(fileName);
   }
 

package/front_end/panels/timeline/ThirdPartyTreeView.ts

@@ -15,19 +15,19 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   *@description Unattributed text for an unattributed entity.
+   * @description Unattributed text for an unattributed entity.
    */
   unattributed: '[unattributed]',
   /**
-   *@description Title for the name of either 1st or 3rd Party entities.
+   * @description Title for the name of either 1st or 3rd Party entities.
    */
   firstOrThirdPartyName: '1st / 3rd party',
   /**
-   *@description Title referencing transfer size.
+   * @description Title referencing transfer size.
    */
   transferSize: 'Transfer size',
   /**
-   *@description Title referencing main thread time.
+   * @description Title referencing main thread time.
    */
   mainThreadTime: 'Main thread time',
 } as const;
@@ -264,7 +264,7 @@ export class ThirdPartyTreeElement extends UI.Widget.WidgetElement<UI.Widget.Wid
   }
 
   override createWidget(): UI.Widget.Widget {
-    const containerWidget = new UI.Widget.Widget(false, undefined, this);
+    const containerWidget = new UI.Widget.Widget(this);
     containerWidget.contentElement.style.display = 'contents';
     if (this.#treeView) {
       this.#treeView.show(containerWidget.contentElement);

package/front_end/panels/timeline/ThreadAppender.ts

@@ -36,7 +36,7 @@ const UIStrings = {
   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
-   * @example{example.com} PH1
+   * @example {example.com} PH1
    */
   mainS: 'Main — {PH1}',
   /**
@@ -49,83 +49,83 @@ const UIStrings = {
    */
   frameS: 'Frame — {PH1}',
   /**
-   *@description A web worker in the page. See https://developer.mozilla.org/en-US/docs/Web/API/Worker
-   *@example {https://google.com} PH1
+   * @description A web worker in the page. See https://developer.mozilla.org/en-US/docs/Web/API/Worker
+   * @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
-   *@example {FormatterWorker} PH1
-   *@example {https://google.com} PH2
+   * @description A web worker in the page. See https://developer.mozilla.org/en-US/docs/Web/API/Worker
+   * @example {FormatterWorker} PH1
+   * @example {https://google.com} PH2
    */
   workerSS: '`Worker`: {PH1} — {PH2}',
   /**
-   *@description Label for a web worker exclusively allocated for a purpose.
+   * @description Label for a web worker exclusively allocated for a purpose.
    */
   dedicatedWorker: 'Dedicated `Worker`',
   /**
-   *@description A generic name given for a thread running in the browser (sequence of programmed instructions).
+   * @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.
-   *@example {1} PH1
+   * @example {1} PH1
    */
   threadS: 'Thread {PH1}',
   /**
-   *@description Rasterization in computer graphics.
+   * @description Rasterization in computer graphics.
    */
   raster: 'Raster',
   /**
-   *@description Threads used for background tasks.
+   * @description Threads used for background tasks.
    */
   threadPool: 'Thread pool',
   /**
-   *@description Name for a thread that rasterizes graphics in a website.
-   *@example {2} PH1
+   * @description Name for a thread that rasterizes graphics in a website.
+   * @example {2} PH1
    */
   rasterizerThreadS: 'Rasterizer thread {PH1}',
   /**
-   *@description Text in Timeline Flame Chart Data Provider of the Performance panel
-   *@example {2} PH1
+   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @example {2} PH1
    */
   threadPoolThreadS: 'Thread pool worker {PH1}',
   /**
-   *@description Title of a bidder auction worklet with known URL in the timeline flame chart of the Performance panel
-   *@example {https://google.com} PH1
+   * @description Title of a bidder auction worklet with known URL in the timeline flame chart of the Performance panel
+   * @example {https://google.com} PH1
    */
   bidderWorkletS: 'Bidder Worklet — {PH1}',
   /**
-   *@description Title of a bidder auction worklet in the timeline flame chart of the Performance panel with an unknown URL
+   * @description Title of a bidder auction worklet in the timeline flame chart of the Performance panel with an unknown URL
    */
   bidderWorklet: 'Bidder Worklet',
 
   /**
-   *@description Title of a seller auction worklet in the timeline flame chart of the Performance panel with an unknown URL
+   * @description Title of a seller auction worklet in the timeline flame chart of the Performance panel with an unknown URL
    */
   sellerWorklet: 'Seller Worklet',
 
   /**
-   *@description Title of an auction worklet in the timeline flame chart of the Performance panel with an unknown URL
+   * @description Title of an auction worklet in the timeline flame chart of the Performance panel with an unknown URL
    */
   unknownWorklet: 'Auction Worklet',
 
   /**
-   *@description Title of control thread of a service process for an auction worklet in the timeline flame chart of the Performance panel with an unknown URL
+   * @description Title of control thread of a service process for an auction worklet in the timeline flame chart of the Performance panel with an unknown URL
    */
   workletService: 'Auction Worklet service',
 
   /**
-   *@description Title of a seller auction worklet with known URL in the timeline flame chart of the Performance panel
-   *@example {https://google.com} PH1
+   * @description Title of a seller auction worklet with known URL in the timeline flame chart of the Performance panel
+   * @example {https://google.com} PH1
    */
   sellerWorkletS: 'Seller Worklet — {PH1}',
 
   /**
-   *@description Title of an auction worklet with known URL in the timeline flame chart of the Performance panel
-   *@example {https://google.com} PH1
+   * @description Title of an auction worklet with known URL in the timeline flame chart of the Performance panel
+   * @example {https://google.com} PH1
    */
   unknownWorkletS: 'Auction Worklet — {PH1}',
 
   /**
-   *@description Title of control thread of a service process for an auction worklet with known URL in the timeline flame chart of the Performance panel
+   * @description Title of control thread of a service process for an auction worklet with known URL in the timeline flame chart of the Performance panel
    * @example {https://google.com} PH1
    */
   workletServiceS: 'Auction Worklet service — {PH1}',
@@ -208,7 +208,7 @@ export class ThreadAppender implements TrackAppender {
    * this thread.
    * @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.
    */
@@ -486,9 +486,9 @@ export class ThreadAppender implements TrackAppender {
       //    URLs).
       // This means that all of the ignore listed calls are ignored (not
       // appended), except if it is the bottom call of an ignored stack.
-      // This is becaue to represent ignore listed stack frames, we add
+      // This is because to represent ignore listed stack frames, we add
       // a flame chart entry with the length and position of the bottom
-      // frame, which is distictively marked to denote an ignored listed
+      // frame, which is distinctively marked to denote an ignored listed
       // stack.
       const skipEventDueToIgnoreListing = entryIsIgnoreListed && parentIsIgnoredListed;
       if (entryIsVisible && !skipEventDueToIgnoreListing) {