chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

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/{models/trace/extras/Metadata.test.ts → panels/timeline/RecordingMetadata.test.ts}

@@ -1,34 +1,43 @@
-// Copyright 2023 The Chromium Authors. All rights reserved.
+
+// 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 {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
-import * as Trace from '../trace.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Trace from '../../models/trace/trace.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+
+import * as Timeline from './timeline.js';
 
-describeWithEnvironment('Trace Metadata', () => {
-  it('returns the associated metadata', async () => {
+describeWithEnvironment('RecordingMetadata', () => {
+  it('for a CPU profile it just returns the origin', async () => {
+    const result = Timeline.RecordingMetadata.forCPUProfile();
+    assert.deepEqual(result, {dataOrigin: Trace.Types.File.DataOrigin.CPU_PROFILE});
+  });
+
+  it('returns the associated metadata for a chrome trace', async () => {
     const cpuThrottlingManager = SDK.CPUThrottlingManager.CPUThrottlingManager.instance({forceNew: true});
     sinon.stub(cpuThrottlingManager, 'hasPrimaryPageTargetSet').returns(true);
-    sinon.stub(cpuThrottlingManager, 'getHardwareConcurrency').returns(Promise.resolve(1));
     sinon.stub(cpuThrottlingManager, 'cpuThrottlingRate').returns(2);
     const networkManager = SDK.NetworkManager.MultitargetNetworkManager.instance({forceNew: true});
     sinon.stub(networkManager, 'isThrottling').returns(true);
     sinon.stub(networkManager, 'networkConditions').returns({
       title: 'Slow 3G',
+      key: SDK.NetworkManager.PredefinedThrottlingConditionKey.SPEED_3G,
       download: 1,
       upload: 2,
       latency: 3,
     });
-    const metadata = await Trace.Extras.Metadata.forNewRecording(/* isCpuProfile= */ false);
+    const metadata = await Timeline.RecordingMetadata.forTrace({recordingStartTime: 1234});
     assert.deepEqual(metadata, {
       source: 'DevTools',
-      startTime: undefined,
+      startTime: new Date(1234).toJSON(),
       cpuThrottling: 2,
       networkThrottling: 'Slow 3G',
       networkThrottlingConditions: {
         download: 1,
         latency: 3,
+        key: SDK.NetworkManager.PredefinedThrottlingConditionKey.SPEED_3G,
         upload: 2,
         packetLoss: undefined,
         packetQueueLength: undefined,
@@ -38,49 +47,71 @@ describeWithEnvironment('Trace Metadata', () => {
       cruxFieldData: undefined,
       dataOrigin: Trace.Types.File.DataOrigin.TRACE_EVENTS,
       emulatedDeviceTitle: undefined,
-      hardwareConcurrency: 1,
+      hostDPR: 1,
     });
   });
 
-  it('calls the title function if the network condition title is a function', async () => {
+  it('does not store network conditions if the user has not throttled them', async () => {
     const cpuThrottlingManager = SDK.CPUThrottlingManager.CPUThrottlingManager.instance({forceNew: true});
     sinon.stub(cpuThrottlingManager, 'hasPrimaryPageTargetSet').returns(true);
-    sinon.stub(cpuThrottlingManager, 'getHardwareConcurrency').returns(Promise.resolve(1));
     sinon.stub(cpuThrottlingManager, 'cpuThrottlingRate').returns(2);
     const networkManager = SDK.NetworkManager.MultitargetNetworkManager.instance({forceNew: true});
+    sinon.stub(networkManager, 'isThrottling').returns(false);
+    const metadata = await Timeline.RecordingMetadata.forTrace({recordingStartTime: 1234});
+    assert.deepEqual(metadata, {
+      source: 'DevTools',
+      startTime: new Date(1234).toJSON(),
+      cpuThrottling: 2,
+      networkThrottling: undefined,
+      networkThrottlingConditions: undefined,
+      cruxFieldData: undefined,
+      dataOrigin: Trace.Types.File.DataOrigin.TRACE_EVENTS,
+      emulatedDeviceTitle: undefined,
+      hostDPR: 1,
+    });
+  });
+
+  it('does not store cpu throttling if there is no throttling', async () => {
+    const cpuThrottlingManager = SDK.CPUThrottlingManager.CPUThrottlingManager.instance({forceNew: true});
+    sinon.stub(cpuThrottlingManager, 'hasPrimaryPageTargetSet').returns(true);
+    // 1 is the equivalent of no throttling
+    sinon.stub(cpuThrottlingManager, 'cpuThrottlingRate').returns(1);
+    const networkManager = SDK.NetworkManager.MultitargetNetworkManager.instance({forceNew: true});
     sinon.stub(networkManager, 'isThrottling').returns(true);
     sinon.stub(networkManager, 'networkConditions').returns({
-      title: () => 'Slow 3G',
+      title: 'Slow 3G',
       download: 1,
-      upload: 1,
-      latency: 1,
+      upload: 2,
+      latency: 3,
+      key: SDK.NetworkManager.PredefinedThrottlingConditionKey.SPEED_3G,
     });
-    const metadata = await Trace.Extras.Metadata.forNewRecording(/* isCpuProfile= */ false);
+    const metadata = await Timeline.RecordingMetadata.forTrace({recordingStartTime: 1234});
     assert.deepEqual(metadata, {
       source: 'DevTools',
-      startTime: undefined,
-      cpuThrottling: 2,
+      startTime: new Date(1234).toJSON(),
+      cpuThrottling: undefined,
       networkThrottling: 'Slow 3G',
       networkThrottlingConditions: {
         download: 1,
-        latency: 1,
-        upload: 1,
+        latency: 3,
+        key: SDK.NetworkManager.PredefinedThrottlingConditionKey.SPEED_3G,
+        upload: 2,
         packetLoss: undefined,
         packetQueueLength: undefined,
         packetReordering: undefined,
         targetLatency: undefined,
       },
-      emulatedDeviceTitle: undefined,
       cruxFieldData: undefined,
       dataOrigin: Trace.Types.File.DataOrigin.TRACE_EVENTS,
-      hardwareConcurrency: 1,
+      emulatedDeviceTitle: undefined,
+      hostDPR: 1,
     });
   });
 
-  it('does not return hardware concurrency if the manager has no target', async () => {
+  it('calls the title function if the network condition title is a function', async () => {
     const cpuThrottlingManager = SDK.CPUThrottlingManager.CPUThrottlingManager.instance({forceNew: true});
-    sinon.stub(cpuThrottlingManager, 'hasPrimaryPageTargetSet').returns(false);
-    const getHardwareConcurrencyStub = sinon.stub(cpuThrottlingManager, 'getHardwareConcurrency');
+    sinon.stub(cpuThrottlingManager, 'hasPrimaryPageTargetSet').returns(true);
+    sinon.stub(cpuThrottlingManager, 'getHardwareConcurrency').returns(Promise.resolve(1));
     sinon.stub(cpuThrottlingManager, 'cpuThrottlingRate').returns(2);
     const networkManager = SDK.NetworkManager.MultitargetNetworkManager.instance({forceNew: true});
     sinon.stub(networkManager, 'isThrottling').returns(true);
@@ -88,9 +119,10 @@ describeWithEnvironment('Trace Metadata', () => {
       title: () => 'Slow 3G',
       download: 1,
       upload: 1,
+      key: SDK.NetworkManager.PredefinedThrottlingConditionKey.SPEED_3G,
       latency: 1,
     });
-    const metadata = await Trace.Extras.Metadata.forNewRecording(/* isCpuProfile= */ false);
+    const metadata = await Timeline.RecordingMetadata.forTrace();
     assert.deepEqual(metadata, {
       source: 'DevTools',
       startTime: undefined,
@@ -98,6 +130,7 @@ describeWithEnvironment('Trace Metadata', () => {
       networkThrottling: 'Slow 3G',
       networkThrottlingConditions: {
         download: 1,
+        key: SDK.NetworkManager.PredefinedThrottlingConditionKey.SPEED_3G,
         latency: 1,
         upload: 1,
         packetLoss: undefined,
@@ -105,11 +138,10 @@ describeWithEnvironment('Trace Metadata', () => {
         packetReordering: undefined,
         targetLatency: undefined,
       },
+      emulatedDeviceTitle: undefined,
+      hostDPR: 1,
       cruxFieldData: undefined,
       dataOrigin: Trace.Types.File.DataOrigin.TRACE_EVENTS,
-      emulatedDeviceTitle: undefined,
-      hardwareConcurrency: undefined,
     });
-    sinon.assert.callCount(getHardwareConcurrencyStub, 0);
   });
 });

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.test.ts

@@ -41,7 +41,6 @@ describe('SaveFileFormatter', () => {
         modifications: undefined,  // Undefined values are removed within JSON.stringify
         networkThrottling: '4',
         cpuThrottling: 1,
-        hardwareConcurrency: 1,
         enhancedTraceVersion: 1,
       };
       const formatted = Array.from(Timeline.SaveFileFormatter.traceJsonGenerator(events, metadata)).join('');
@@ -51,8 +50,7 @@ describe('SaveFileFormatter', () => {
   "source": "DevTools",
   "startTime": "1234",
   "networkThrottling": "4",
-  "cpuThrottling": 1,
-  "hardwareConcurrency": 1
+  "cpuThrottling": 1
 },
 "traceEvents": [
   {"name":"event_one","tid":0,"pid":0,"ts":0,"cat":"test","ph":"M"},

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);
   }