chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -6081,10 +6081,6 @@ export const NativeFunctions = [
     signatures: [["url","?options"]],
     receivers: ["Navigation"]
   },
-  {
-    name: "AnimationTrigger",
-    signatures: [["?options"]]
-  },
   {
     name: "addAnimation",
     signatures: [["animation"]]
@@ -6109,6 +6105,10 @@ export const NativeFunctions = [
     name: "ScrollTimeline",
     signatures: [["?options"]]
   },
+  {
+    name: "TimelineTrigger",
+    signatures: [["?options"]]
+  },
   {
     name: "ViewTimeline",
     signatures: [["?options"]]

package/front_end/models/network_time_calculator/Calculator.ts

@@ -0,0 +1,14 @@
+// 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.
+
+// The TimelineGrid is used in the Performance panel and Memory panel -> Allocating sampling, so the value can be either
+// milliseconds or bytes
+export interface Calculator {
+  computePosition(value: number): number;
+  formatValue(value: number, precision?: number): string;
+  minimumBoundary(): number;
+  zeroTime(): number;
+  maximumBoundary(): number;
+  boundarySpan(): number;
+}

package/front_end/{panels/network → models/network_time_calculator}/NetworkTimeCalculator.ts

@@ -35,7 +35,8 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
-import type * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
+
+import type {Calculator} from './Calculator.js';
 
 const UIStrings = {
   /**
@@ -66,7 +67,7 @@ const UIStrings = {
    */
   sFromCache: '{PH1} (from cache)',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkTimeCalculator.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('models/network_time_calculator/NetworkTimeCalculator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface Label {
@@ -88,8 +89,7 @@ export class NetworkTimeBoundary {
   }
 }
 
-export class NetworkTimeCalculator extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
-    PerfUI.TimelineGrid.Calculator {
+export class NetworkTimeCalculator extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements Calculator {
   #minimumBoundary = -1;
   #maximumBoundary = -1;
   readonly #boundaryChangedEventThrottler = new Common.Throttler.Throttler(0);

package/front_end/models/network_time_calculator/network_time_calculator.ts

@@ -0,0 +1,6 @@
+// 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.
+
+export * from './Calculator.js';
+export * from './NetworkTimeCalculator.js';

package/front_end/models/persistence/EditFileSystemView.ts

@@ -32,7 +32,11 @@ import '../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import {Directives, html, render} from '../../ui/lit/lit.js';
 
 import editFileSystemViewStyles from './editFileSystemView.css.js';

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -7,6 +7,8 @@ import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Breakpoints from '../breakpoints/breakpoints.js';
 import * as TextUtils from '../text_utils/text_utils.js';

package/front_end/models/persistence/PersistenceActions.ts

@@ -7,6 +7,8 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Bindings from '../bindings/bindings.js';
 import * as TextUtils from '../text_utils/text_utils.js';

package/front_end/models/persistence/PersistenceUtils.ts

@@ -8,6 +8,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Workspace from '../workspace/workspace.js';
 

package/front_end/models/persistence/WorkspaceSettingsTab.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/buttons/buttons.js';
 import '../../ui/components/cards/cards.js';
@@ -9,7 +11,11 @@ import '../../ui/components/cards/cards.js';
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 

package/front_end/models/persistence/persistence-meta.ts

@@ -6,6 +6,8 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+// TODO(crbug.com/442509324): remove UI dependency
+// eslint-disable-next-line rulesdir/no-imports-in-directory
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Persistence from './persistence.js';

package/front_end/models/stack_trace/StackTrace.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import type * as Common from '../../core/common/common.js';
+import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Workspace from '../workspace/workspace.js';
 
 export interface StackTrace extends Common.EventTarget.EventTarget<EventTypes> {
@@ -24,8 +25,25 @@ export interface Frame {
   readonly name?: string;
   readonly line: number;
   readonly column: number;
+
+  readonly missingDebugInfo?: MissingDebugInfo;
 }
 
+export const enum MissingDebugInfoType {
+  /** No debug information at all for the call frame */
+  NO_INFO = 'NO_INFO',
+
+  /** Some debug information available, but it references files with debug information we were not able to retrieve */
+  PARTIAL_INFO = 'PARTIAL_INFO',
+}
+
+export type MissingDebugInfo = {
+  type: MissingDebugInfoType.NO_INFO,
+}|{
+  type: MissingDebugInfoType.PARTIAL_INFO,
+  missingDebugFiles: SDK.DebuggerModel.MissingDebugFiles[],
+};
+
 export const enum Events {
   UPDATED = 'UPDATED',
 }

package/front_end/models/stack_trace/StackTraceImpl.ts

@@ -70,13 +70,16 @@ export class FrameImpl implements StackTrace.StackTrace.Frame {
   readonly line: number;
   readonly column: number;
 
+  readonly missingDebugInfo?: StackTrace.StackTrace.MissingDebugInfo;
+
   constructor(
       url: string|undefined, uiSourceCode: Workspace.UISourceCode.UISourceCode|undefined, name: string|undefined,
-      line: number, column: number) {
+      line: number, column: number, missingDebugInfo?: StackTrace.StackTrace.MissingDebugInfo) {
     this.url = url;
     this.uiSourceCode = uiSourceCode;
     this.name = name;
     this.line = line;
     this.column = column;
+    this.missingDebugInfo = missingDebugInfo;
   }
 }

package/front_end/models/stack_trace/StackTraceModel.ts

@@ -15,8 +15,8 @@ import {type FrameNode, type RawFrame, Trie} from './Trie.js';
  *
  * Any implementation must return an array with the same length as `frames`.
  */
-export type TranslateRawFrames = (frames: readonly RawFrame[], target: SDK.Target.Target) =>
-    Promise<Array<Array<Pick<StackTrace.StackTrace.Frame, 'url'|'uiSourceCode'|'name'|'line'|'column'>>>>;
+export type TranslateRawFrames = (frames: readonly RawFrame[], target: SDK.Target.Target) => Promise<
+    Array<Array<Pick<StackTrace.StackTrace.Frame, 'url'|'uiSourceCode'|'name'|'line'|'column'|'missingDebugInfo'>>>>;
 
 /**
  * The {@link StackTraceModel} is a thin wrapper around a fragment trie.
@@ -93,7 +93,8 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
     let i = 0;
     for (const node of fragment.node.getCallStack()) {
       node.frames = uiFrames[i++].map(
-          frame => new FrameImpl(frame.url, frame.uiSourceCode, frame.name, frame.line, frame.column));
+          frame => new FrameImpl(
+              frame.url, frame.uiSourceCode, frame.name, frame.line, frame.column, frame.missingDebugInfo));
     }
   }
 

package/front_end/models/trace/ModelImpl.ts

@@ -118,7 +118,8 @@ export class Model extends EventTarget {
         metadata,
         resolveSourceMap: config?.resolveSourceMap,
       };
-      if (window.location.href.includes('devtools/bundled') || window.location.search.includes('debugFrontend')) {
+      if (!parseConfig.logger &&
+          (window.location.href.includes('devtools/bundled') || window.location.search.includes('debugFrontend'))) {
         // Someone is debugging DevTools, enable the logger.
         const times: Record<string, number> = {};
         parseConfig.logger = {

package/front_end/models/trace/Processor.ts

@@ -234,39 +234,12 @@ export class TraceProcessor extends EventTarget {
       this.dispatchEvent(new TraceParseProgressEvent({percent}));
     }
 
-    // Handlers that depend on other handlers do so via .data(), which used to always
-    // return a shallow clone of its internal data structures. However, that pattern
-    // easily results in egregious amounts of allocation. Now .data() does not do any
-    // cloning, and it happens here instead so that users of the trace processor may
-    // still assume that the parsed data is theirs.
-    // See: crbug/41484172
-    const shallowClone = (value: unknown, recurse = true): unknown => {
-      if (value instanceof Map) {
-        return new Map(value);
-      }
-      if (value instanceof Set) {
-        return new Set(value);
-      }
-      if (Array.isArray(value)) {
-        return [...value];
-      }
-      if (typeof value === 'object' && value && recurse) {
-        const obj: Record<string, unknown> = {};
-        for (const [key, v] of Object.entries(value)) {
-          obj[key] = shallowClone(v, false);
-        }
-        return obj;
-      }
-      return value;
-    };
-
-    options.logger?.start('parse:clone');
+    options.logger?.start('parse:handler.data()');
     const parsedTrace = {};
     for (const [name, handler] of Object.entries(this.#traceHandlers)) {
-      const data = shallowClone(handler.data());
-      Object.assign(parsedTrace, {[name]: data});
+      Object.assign(parsedTrace, {[name]: handler.data()});
     }
-    options.logger?.end('parse:clone');
+    options.logger?.end('parse:handler.data()');
 
     this.dispatchEvent(new TraceParseProgressEvent({percent: ProgressPhase.CLONE}));
 

package/front_end/models/trace/handlers/AnimationFramesHandler.ts

@@ -16,24 +16,23 @@ function threadKey(data: Types.Events.Event): string {
 }
 // Track all the start + end events. We key them by the PID+TID so we don't
 // accidentally pair across different threads.
-const animationFrameStarts = new Map<string, Types.Events.AnimationFrameAsyncStart[]>();
-const animationFrameEnds = new Map<string, Types.Events.AnimationFrameAsyncEnd[]>();
+let animationFrameStarts = new Map<string, Types.Events.AnimationFrameAsyncStart[]>();
+let animationFrameEnds = new Map<string, Types.Events.AnimationFrameAsyncEnd[]>();
 // Store all the AnimationFrame::Presentation events. Key them by their ID for
 // easy look-up later on when we associate one to the AnimationFrame event.
-const animationFramePresentations = new Map<string, Types.Events.AnimationFramePresentation>();
+let animationFramePresentations = new Map<string, Types.Events.AnimationFramePresentation>();
 
 // The final list of animation frames that we return.
-const animationFrames: Types.Events.SyntheticAnimationFramePair[] = [];
+let animationFrames: Types.Events.SyntheticAnimationFramePair[] = [];
 
-const presentationForFrame =
-    new Map<Types.Events.SyntheticAnimationFramePair, Types.Events.AnimationFramePresentation>();
+let presentationForFrame = new Map<Types.Events.SyntheticAnimationFramePair, Types.Events.AnimationFramePresentation>();
 
 export function reset(): void {
-  animationFrameStarts.clear();
-  animationFrameEnds.clear();
-  animationFrames.length = 0;
-  presentationForFrame.clear();
-  animationFramePresentations.clear();
+  animationFrameStarts = new Map();
+  animationFrameEnds = new Map();
+  animationFrames = [];
+  presentationForFrame = new Map();
+  animationFramePresentations = new Map();
   isEnabled = false;
 }
 

package/front_end/models/trace/handlers/AnimationHandler.ts

@@ -5,16 +5,16 @@
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-const animations: Types.Events.Animation[] = [];
-const animationsSyntheticEvents: Types.Events.SyntheticAnimationPair[] = [];
+let animations: Types.Events.Animation[] = [];
+let animationsSyntheticEvents: Types.Events.SyntheticAnimationPair[] = [];
 
 export interface AnimationData {
   animations: readonly Types.Events.SyntheticAnimationPair[];
 }
 
 export function reset(): void {
-  animations.length = 0;
-  animationsSyntheticEvents.length = 0;
+  animations = [];
+  animationsSyntheticEvents = [];
 }
 
 export function handleEvent(event: Types.Events.Event): void {

package/front_end/models/trace/handlers/AsyncJSCallsHandler.ts

@@ -8,20 +8,19 @@ import * as Types from '../types/types.js';
 import {data as flowsHandlerData} from './FlowsHandler.js';
 import {data as rendererHandlerData} from './RendererHandler.js';
 
-const schedulerToRunEntryPoints = new Map<Types.Events.Event, Types.Events.Event[]>();
+let schedulerToRunEntryPoints = new Map<Types.Events.Event, Types.Events.Event[]>();
 
-const taskScheduleForTaskRunEvent =
-    new Map<Types.Events.DebuggerAsyncTaskRun, Types.Events.DebuggerAsyncTaskScheduled>();
-const asyncCallToScheduler =
+let taskScheduleForTaskRunEvent = new Map<Types.Events.DebuggerAsyncTaskRun, Types.Events.DebuggerAsyncTaskScheduled>();
+let asyncCallToScheduler =
     new Map<Types.Events.SyntheticProfileCall, {taskName: string, scheduler: Types.Events.Event}>();
 
-const runEntryPointToScheduler = new Map<Types.Events.Event, {taskName: string, scheduler: Types.Events.Event}>();
+let runEntryPointToScheduler = new Map<Types.Events.Event, {taskName: string, scheduler: Types.Events.Event}>();
 
 export function reset(): void {
-  schedulerToRunEntryPoints.clear();
-  asyncCallToScheduler.clear();
-  taskScheduleForTaskRunEvent.clear();
-  runEntryPointToScheduler.clear();
+  schedulerToRunEntryPoints = new Map();
+  asyncCallToScheduler = new Map();
+  taskScheduleForTaskRunEvent = new Map();
+  runEntryPointToScheduler = new Map();
 }
 
 export function handleEvent(_: Types.Events.Event): void {

package/front_end/models/trace/handlers/AuctionWorkletsHandler.ts

@@ -31,11 +31,11 @@ import * as Types from '../types/types.js';
  * args.data.target property, which is a string ID shared by both
  * events.
  */
-const runningInProcessEvents = new Map<Types.Events.ProcessID, Types.Events.AuctionWorkletRunningInProcess>();
-const doneWithProcessEvents = new Map<Types.Events.ProcessID, Types.Events.AuctionWorkletDoneWithProcess>();
+let runningInProcessEvents = new Map<Types.Events.ProcessID, Types.Events.AuctionWorkletRunningInProcess>();
+let doneWithProcessEvents = new Map<Types.Events.ProcessID, Types.Events.AuctionWorkletDoneWithProcess>();
 
 // Keyed by the PID defined in  `args.data.pid` on AuctionWorklet trace events..
-const createdSyntheticEvents = new Map<Types.Events.ProcessID, Types.Events.SyntheticAuctionWorklet>();
+let createdSyntheticEvents = new Map<Types.Events.ProcessID, Types.Events.SyntheticAuctionWorklet>();
 
 // Each AuctonWorklet takes over a process and has 2 threads (that we care
 // about and want to show as tracks):
@@ -44,15 +44,15 @@ const createdSyntheticEvents = new Map<Types.Events.ProcessID, Types.Events.Synt
 //    either a "Seller" or a "Bidder"
 // To detect these we look for the metadata thread_name events. We key these by
 // PID so that we can easily look them up later without having to loop through.
-const utilityThreads = new Map<Types.Events.ProcessID, Types.Events.ThreadName>();
-const v8HelperThreads = new Map<Types.Events.ProcessID, Types.Events.ThreadName>();
+let utilityThreads = new Map<Types.Events.ProcessID, Types.Events.ThreadName>();
+let v8HelperThreads = new Map<Types.Events.ProcessID, Types.Events.ThreadName>();
 
 export function reset(): void {
-  runningInProcessEvents.clear();
-  doneWithProcessEvents.clear();
-  createdSyntheticEvents.clear();
-  utilityThreads.clear();
-  v8HelperThreads.clear();
+  runningInProcessEvents = new Map();
+  doneWithProcessEvents = new Map();
+  createdSyntheticEvents = new Map();
+  utilityThreads = new Map();
+  v8HelperThreads = new Map();
 }
 
 export function handleEvent(event: Types.Events.Event): void {

package/front_end/models/trace/handlers/DOMStatsHandler.ts

@@ -9,10 +9,10 @@ export interface DOMStatsData {
   domStatsByFrameId: Map<string, Types.Events.DOMStats[]>;
 }
 
-const domStatsByFrameId: DOMStatsData['domStatsByFrameId'] = new Map();
+let domStatsByFrameId: DOMStatsData['domStatsByFrameId'] = new Map();
 
 export function reset(): void {
-  domStatsByFrameId.clear();
+  domStatsByFrameId = new Map();
 }
 
 export function handleEvent(event: Types.Events.Event): void {

package/front_end/models/trace/handlers/ExtensionTraceDataHandler.ts

@@ -8,13 +8,13 @@ import * as Types from '../types/types.js';
 import type {HandlerName} from './types.js';
 import {data as userTimingsData} from './UserTimingsHandler.js';
 
-const extensionTrackEntries: Types.Extensions.SyntheticExtensionTrackEntry[] = [];
-const extensionTrackData: Types.Extensions.ExtensionTrackData[] = [];
-const extensionMarkers: Types.Extensions.SyntheticExtensionMarker[] = [];
-const entryToNode = new Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>();
-const timeStampByName = new Map<string, Types.Events.ConsoleTimeStamp>();
+let extensionTrackEntries: Types.Extensions.SyntheticExtensionTrackEntry[] = [];
+let extensionTrackData: Types.Extensions.ExtensionTrackData[] = [];
+let extensionMarkers: Types.Extensions.SyntheticExtensionMarker[] = [];
+let entryToNode = new Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>();
+let timeStampByName = new Map<string, Types.Events.ConsoleTimeStamp>();
 
-const syntheticConsoleEntriesForTimingsTrack: Types.Events.SyntheticConsoleTimeStamp[] = [];
+let syntheticConsoleEntriesForTimingsTrack: Types.Events.SyntheticConsoleTimeStamp[] = [];
 
 export interface ExtensionTraceData {
   extensionTrackData: readonly Types.Extensions.ExtensionTrackData[];
@@ -29,12 +29,12 @@ export function handleEvent(_event: Types.Events.Event): void {
 }
 
 export function reset(): void {
-  extensionTrackEntries.length = 0;
-  syntheticConsoleEntriesForTimingsTrack.length = 0;
-  extensionTrackData.length = 0;
-  extensionMarkers.length = 0;
-  entryToNode.clear();
-  timeStampByName.clear();
+  extensionTrackEntries = [];
+  syntheticConsoleEntriesForTimingsTrack = [];
+  extensionTrackData = [];
+  extensionMarkers = [];
+  entryToNode = new Map();
+  timeStampByName = new Map();
 }
 
 export async function finalize(): Promise<void> {
@@ -87,7 +87,7 @@ export function extractConsoleAPIExtensionEntries(): void {
     }
     const timeStampName = String(currentTimeStamp.args.data.name ?? currentTimeStamp.args.data.message);
     timeStampByName.set(timeStampName, currentTimeStamp);
-    const extensionData = extensionDataInConsoleTimeStamp(currentTimeStamp);
+    const {devtoolsObj: extensionData, userDetail} = extensionDataInConsoleTimeStamp(currentTimeStamp);
     const start = currentTimeStamp.args.data.start;
     const end = currentTimeStamp.args.data.end;
     if (!extensionData && !start && !end) {
@@ -111,7 +111,8 @@ export function extractConsoleAPIExtensionEntries(): void {
         ...currentTimeStamp,
         name: timeStampName,
         cat: 'devtools.extension',
-        args: extensionData,
+        devtoolsObj: extensionData,
+        userDetail,
         rawSourceEvent: currentTimeStamp,
         dur: Types.Timing.Micro(entryEndTime - entryStartTime),
         ts: entryStartTime,
@@ -175,26 +176,27 @@ export function extractConsoleAPIExtensionEntries(): void {
 export function extractPerformanceAPIExtensionEntries(
     timings: Array<Types.Events.SyntheticUserTimingPair|Types.Events.PerformanceMark>): void {
   for (const timing of timings) {
-    const extensionPayload = extensionDataInPerformanceTiming(timing);
-    if (!extensionPayload) {
+    const {devtoolsObj, userDetail} = extensionDataInPerformanceTiming(timing);
+    if (!devtoolsObj) {
       // Not an extension user timing.
       continue;
     }
 
     const extensionSyntheticEntry = {
       name: timing.name,
-      ph: Types.Extensions.isExtensionPayloadMarker(extensionPayload) ? Types.Events.Phase.INSTANT :
-                                                                        Types.Events.Phase.COMPLETE,
+      ph: Types.Extensions.isExtensionPayloadMarker(devtoolsObj) ? Types.Events.Phase.INSTANT :
+                                                                   Types.Events.Phase.COMPLETE,
       pid: timing.pid,
       tid: timing.tid,
       ts: timing.ts,
       dur: timing.dur as Types.Timing.Micro,
       cat: 'devtools.extension',
-      args: extensionPayload,
+      devtoolsObj,
+      userDetail,
       rawSourceEvent: Types.Events.isSyntheticUserTiming(timing) ? timing.rawSourceEvent : timing,
     };
 
-    if (Types.Extensions.isExtensionPayloadMarker(extensionPayload)) {
+    if (Types.Extensions.isExtensionPayloadMarker(devtoolsObj)) {
       const extensionMarker =
           Helpers.SyntheticEvents.SyntheticEventsManager
               .registerSyntheticEvent<Types.Extensions.SyntheticExtensionMarker>(
@@ -203,7 +205,7 @@ export function extractPerformanceAPIExtensionEntries(
       continue;
     }
 
-    if (Types.Extensions.isExtensionPayloadTrackEntry(extensionSyntheticEntry.args)) {
+    if (Types.Extensions.isExtensionEntryObj(extensionSyntheticEntry.devtoolsObj)) {
       const extensionTrackEntry =
           Helpers.SyntheticEvents.SyntheticEventsManager
               .registerSyntheticEvent<Types.Extensions.SyntheticExtensionTrackEntry>(
@@ -214,26 +216,33 @@ export function extractPerformanceAPIExtensionEntries(
   }
 }
 
-function extensionPayloadForConsoleApi(timing: Types.Events.ConsoleTimeStamp):
-    Types.Extensions.ExtensionTrackEntryPayloadDeeplink|null {
-  if (!timing.args.data || !('devtools' in timing.args.data)) {
-    return null;
-  }
-
-  return Helpers.Trace.parseDevtoolsDetails(
-             `{"additionalContext": ${timing.args.data.devtools} }`, 'additionalContext') as
-      Types.Extensions.ExtensionTrackEntryPayloadDeeplink;
-}
-
+/**
+ * Parses out the data in a performance.measure / mark call into two parts:
+ * 1. devtoolsObj: this is the data required to be passed by the user for the
+ *    event to be used to create a custom track in the performance panel.
+ * 2. userDetail: this is arbitrary data the user has attached to the event
+ *    that we show in the summary drawer.
+ */
 export function extensionDataInPerformanceTiming(
-    timing: Types.Events.SyntheticUserTimingPair|Types.Events.PerformanceMark): Types.Extensions.ExtensionDataPayload|
-    null {
+    timing: Types.Events.SyntheticUserTimingPair|Types.Events.PerformanceMark):
+    {devtoolsObj: Types.Extensions.DevToolsObj|null, userDetail: Types.Extensions.JsonValue|null} {
   const timingDetail =
       Types.Events.isPerformanceMark(timing) ? timing.args.data?.detail : timing.args.data.beginEvent.args.detail;
   if (!timingDetail) {
-    return null;
+    return {devtoolsObj: null, userDetail: null};
   }
-  return Helpers.Trace.parseDevtoolsDetails(timingDetail, 'devtools') as Types.Extensions.ExtensionDataPayload;
+  const devtoolsObj = Helpers.Trace.parseDevtoolsDetails(timingDetail, 'devtools') as Types.Extensions.DevToolsObj;
+
+  let userDetail = null;
+  try {
+    userDetail = JSON.parse(timingDetail);
+    delete userDetail.devtools;
+  } catch {
+    // Nothing to do here, we still want to return the `devtools` part to make
+    // this a custom event, even if the user detail failed to parse.
+  }
+
+  return {devtoolsObj, userDetail};
 }
 
 /**
@@ -257,31 +266,30 @@ export function extensionDataInPerformanceTiming(
  *         valid extension data for a track entry, or `null` otherwise.
  */
 export function extensionDataInConsoleTimeStamp(timeStamp: Types.Events.ConsoleTimeStamp):
-    Types.Extensions.ExtensionTrackEntryPayload|null {
-  if (!timeStamp.args.data) {
-    return null;
-  }
-  const trackName = timeStamp.args.data.track;
-  if (trackName === '' || trackName === undefined) {
-    return null;
+    {devtoolsObj: Types.Extensions.DevToolsObjEntry|null, userDetail: Types.Extensions.JsonValue|null} {
+  if (!timeStamp.args.data || !timeStamp.args.data.track) {
+    return {devtoolsObj: null, userDetail: null};
   }
 
-  let additionalContext: Types.Extensions.ExtensionTrackEntryPayloadDeeplink|undefined;
-  const payload = extensionPayloadForConsoleApi(timeStamp);
-  if (payload) {
-    additionalContext = payload;
+  let userDetail = null;
+  try {
+    // While it's in the trace as 'devtools', it's just the 7th argument to console.timeStamp(), stringified.
+    // If no data, fall back to falsy empty string.
+    userDetail = JSON.parse(timeStamp.args.data?.devtools || '""') as Types.Extensions.JsonValue;
+  } catch {
   }
 
-  return {
+  const devtoolsObj: Types.Extensions.DevToolsObjEntry = {
     // the color is defaulted to primary if it's value isn't one from
     // the defined palette (see ExtensionUI::extensionEntryColor) so
     // we don't need to check the value is valid here.
-    color: String(timeStamp.args.data.color) as Types.Extensions.ExtensionTrackEntryPayload['color'],
-    track: String(trackName),
+    color: String(timeStamp.args.data.color) as Types.Extensions.DevToolsObjEntry['color'],
+    track: String(timeStamp.args.data.track),
     dataType: 'track-entry',
     trackGroup: timeStamp.args.data.trackGroup !== undefined ? String(timeStamp.args.data.trackGroup) : undefined,
-    additionalContext
   };
+
+  return {devtoolsObj, userDetail};
 }
 
 export function data(): ExtensionTraceData {