devtools-tracing 1.1.1 → 1.2.0

package/patches/chrome-devtools-frontend+1.0.1533544.patch

@@ -1,1716 +0,0 @@
-diff --git a/node_modules/chrome-devtools-frontend/front_end/models/trace/handlers/helpers.ts b/node_modules/chrome-devtools-frontend/front_end/models/trace/handlers/helpers.ts
-index 62c5773..ff07f89 100644
---- a/node_modules/chrome-devtools-frontend/front_end/models/trace/handlers/helpers.ts
-+++ b/node_modules/chrome-devtools-frontend/front_end/models/trace/handlers/helpers.ts
-@@ -3,13 +3,13 @@
- // found in the LICENSE file.
- 
- import type * as Platform from '../../../core/platform/platform.js';
--import * as ThirdPartyWeb from '../../../third_party/third-party-web/third-party-web.js';
- import * as Types from '../types/types.js';
- 
- import type {TraceEventsForNetworkRequest} from './NetworkRequestsHandler.js';
- import type {HandlerData} from './types.js';
- 
--export type Entity = typeof ThirdPartyWeb.ThirdPartyWeb.entities[number]&{
-+export type Entity = {
-+  name?: string,
-   isUnrecognized?: boolean,
- };
- 
-@@ -33,7 +33,7 @@ export function getEntityForUrl(url: string, entityMappings: EntityMappings): En
-   if (cachedByUrl) {
-     return cachedByUrl;
-   }
--  const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(url) ?? makeUpEntity(entityMappings.createdEntityCache, url);
-+  const entity = makeUpEntity(entityMappings.createdEntityCache, url);
-   if (entity) {
-     entityMappings.entityByUrlCache.set(url, entity);
-   }
-@@ -105,17 +105,7 @@ export function makeUpEntity(entityCache: Map<string, Entity>, url: string): Ent
-     return;
-   }
- 
--  // NOTE: Lighthouse uses a tld database to determine the root domain, but here
--  // we are using third party web's database. Doesn't really work for the case of classifying
--  // domains 3pweb doesn't know about, so it will just give us a guess.
--  const rootDomain = ThirdPartyWeb.ThirdPartyWeb.getRootDomain(url);
--  if (!rootDomain) {
--    return;
--  }
--
--  if (entityCache.has(rootDomain)) {
--    return entityCache.get(rootDomain);
--  }
-+  const rootDomain = URL.parse(url)?.hostname || url
- 
-   const unrecognizedEntity = {
-     name: rootDomain,
-diff --git a/node_modules/chrome-devtools-frontend/front_end/panels/timeline/TimelineUIUtils.ts b/node_modules/chrome-devtools-frontend/front_end/panels/timeline/TimelineUIUtils.ts
-index 4fe7b92..9e9664b 100644
---- a/node_modules/chrome-devtools-frontend/front_end/panels/timeline/TimelineUIUtils.ts
-+++ b/node_modules/chrome-devtools-frontend/front_end/panels/timeline/TimelineUIUtils.ts
-@@ -38,32 +38,12 @@ import * as Common from '../../core/common/common.js';
- import * as i18n from '../../core/i18n/i18n.js';
- import * as Platform from '../../core/platform/platform.js';
- import * as Root from '../../core/root/root.js';
--import * as SDK from '../../core/sdk/sdk.js';
- import type * as Protocol from '../../generated/protocol.js';
--import * as TextUtils from '../../models/text_utils/text_utils.js';
- import * as Trace from '../../models/trace/trace.js';
- import * as SourceMapsResolver from '../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
--import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
--import * as Tracing from '../../services/tracing/tracing.js';
--import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
--// eslint-disable-next-line @devtools/es-modules-import
--import codeHighlighterStyles from '../../ui/components/code_highlighter/codeHighlighter.css.js';
--import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
--// eslint-disable-next-line @devtools/es-modules-import
--import imagePreviewStyles from '../../ui/legacy/components/utils/imagePreview.css.js';
--import * as LegacyComponents from '../../ui/legacy/components/utils/utils.js';
--import * as UI from '../../ui/legacy/legacy.js';
- import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
- 
--import {getDurationString} from './AppenderUtils.js';
--import * as TimelineComponents from './components/components.js';
- import * as Extensions from './extensions/extensions.js';
--import {ModificationsManager} from './ModificationsManager.js';
--import {targetForEvent} from './TargetForEvent.js';
--import * as ThirdPartyTreeView from './ThirdPartyTreeView.js';
--import {TimelinePanel} from './TimelinePanel.js';
--import {selectionFromEvent} from './TimelineSelection.js';
--import * as Utils from './utils/utils.js';
- 
- const UIStrings = {
-   /**
-@@ -487,17 +467,6 @@ let eventDispatchDesciptors: EventDispatchTypeDescriptor[];
- 
- let colorGenerator: Common.Color.Generator;
- 
--interface LinkifyLocationOptions {
--  scriptId: Protocol.Runtime.ScriptId|null;
--  url: string;
--  lineNumber: number;
--  target: SDK.Target.Target|null;
--  linkifier: LegacyComponents.Linkifier.Linkifier;
--  isFreshOrEnhanced?: boolean;
--  columnNumber?: number;
--  omitOrigin?: boolean;
--}
--
- type TimeRangeCategoryStats = Record<string, number>;
- 
- const {SamplesIntegrator} = Trace.Helpers.SamplesIntegrator;
-@@ -517,9 +486,6 @@ export class TimelineUIUtils {
-   static frameDisplayName(frame: Protocol.Runtime.CallFrame): string {
-     const maybeResolvedData = SourceMapsResolver.SourceMapsResolver.resolvedCodeLocationForCallFrame(frame);
-     const functionName = maybeResolvedData?.name || frame.functionName;
--    if (!SamplesIntegrator.isNativeRuntimeFrame(frame)) {
--      return UI.UIUtils.beautifyFunctionName(functionName);
--    }
-     const nativeGroup = SamplesIntegrator.nativeGroup(functionName);
-     switch (nativeGroup) {
-       case SamplesIntegrator.NativeGroups.COMPILE:
-@@ -654,894 +620,6 @@ export class TimelineUIUtils {
-     return frame.scriptId !== '0' && !(frame.url?.startsWith('native '));
-   }
- 
--  static async buildDetailsNodeForTraceEvent(
--      event: Trace.Types.Events.Event, target: SDK.Target.Target|null, linkifier: LegacyComponents.Linkifier.Linkifier,
--      isFreshOrEnhanced = false, parsedTrace: Trace.TraceModel.ParsedTrace): Promise<Node|null> {
--    let details: HTMLElement|HTMLSpanElement|(Element | null)|Text|null = null;
--    let detailsText;
--    // TODO(40287735): update this code with type-safe data checks.
--    // eslint-disable-next-line @typescript-eslint/no-explicit-any
--    const unsafeEventArgs = event.args as Record<string, any>;
--    // TODO(40287735): update this code with type-safe data checks.
--    // eslint-disable-next-line @typescript-eslint/no-explicit-any
--    const unsafeEventData = event.args?.data as Record<string, any>;
--
--    switch (event.name) {
--      case Trace.Types.Events.Name.PAINT_IMAGE:
--      case Trace.Types.Events.Name.DECODE_IMAGE:
--      case Trace.Types.Events.Name.DECODE_LAZY_PIXEL_REF:
--      case Trace.Types.Events.Name.XHR_READY_STATE_CHANGED:
--      case Trace.Types.Events.Name.XHR_LOAD:
--      case Trace.Types.Events.Name.RESOURCE_WILL_SEND_REQUEST:
--      case Trace.Types.Events.Name.RESOURCE_SEND_REQUEST:
--      case Trace.Types.Events.Name.RESOURCE_RECEIVE_DATA:
--      case Trace.Types.Events.Name.RESOURCE_RECEIVE_RESPONSE:
--      case Trace.Types.Events.Name.RESOURCE_FINISH: {
--        const url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace.data);
--        if (url) {
--          const options = {
--            tabStop: true,
--            showColumnNumber: false,
--            inlineFrameIndex: 0,
--          };
--          details = LegacyComponents.Linkifier.Linkifier.linkifyURL(url, options);
--        }
--        break;
--      }
--
--      case Trace.Types.Events.Name.FUNCTION_CALL: {
--        details = document.createElement('span');
--
--        // FunctionCall events have an args.data that could be a CallFrame, if all the details are present, so we check for that.
--        const callFrame = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event)?.at(0);
--        if (Trace.Types.Events.isFunctionCall(event) && callFrame) {
--          UI.UIUtils.createTextChild(
--              details,
--              TimelineUIUtils.frameDisplayName(
--                  {...callFrame, scriptId: String(callFrame.scriptId) as Protocol.Runtime.ScriptId}));
--        }
--        const location = this.linkifyLocation({
--          scriptId: unsafeEventData['scriptId'],
--          url: unsafeEventData['url'],
--          lineNumber: callFrame?.lineNumber || 0,
--          columnNumber: callFrame?.columnNumber,
--          target,
--          isFreshOrEnhanced,
--          linkifier,
--          omitOrigin: true,
--        });
--        if (location) {
--          UI.UIUtils.createTextChild(details, ' @ ');
--          details.appendChild(location);
--        }
--        break;
--      }
--
--      case Trace.Types.Events.Name.COMPILE_MODULE:
--      case Trace.Types.Events.Name.CACHE_MODULE: {
--        details = this.linkifyLocation({
--          scriptId: null,
--          url: unsafeEventArgs['fileName'],
--          lineNumber: 0,
--          columnNumber: 0,
--          target,
--          isFreshOrEnhanced,
--          linkifier,
--        });
--        break;
--      }
--
--      case Trace.Types.Events.Name.COMPILE_SCRIPT:
--      case Trace.Types.Events.Name.CACHE_SCRIPT:
--      case Trace.Types.Events.Name.EVALUATE_SCRIPT: {
--        const url = unsafeEventData['url'];
--        if (url) {
--          const {lineNumber} = Trace.Helpers.Trace.getZeroIndexedLineAndColumnForEvent(event);
--          details = this.linkifyLocation({
--            scriptId: null,
--            url,
--            lineNumber: lineNumber || 0,
--            columnNumber: 0,
--            target,
--            isFreshOrEnhanced,
--            linkifier,
--            omitOrigin: true,
--          });
--        }
--        break;
--      }
--
--      case Trace.Types.Events.Name.BACKGROUND_DESERIALIZE:
--      case Trace.Types.Events.Name.STREAMING_COMPILE_SCRIPT: {
--        const url = unsafeEventData['url'];
--        if (url) {
--          details = this.linkifyLocation({
--            scriptId: null,
--            url,
--            lineNumber: 0,
--            columnNumber: 0,
--            target,
--            isFreshOrEnhanced,
--            linkifier,
--            omitOrigin: true,
--          });
--        }
--        break;
--      }
--
--      default: {
--        /**
--         * Some events have a stack trace which is extracted by default at @see TimelineUIUtils.generateCauses
--         * thus, we prevent extracting the stack trace again here.
--         */
--        if (Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.Console) ||
--            Trace.Types.Events.isUserTiming(event) || Trace.Types.Extensions.isSyntheticExtensionEntry(event) ||
--            Trace.Types.Events.isProfileCall(event)) {
--          detailsText = null;
--        } else {
--          details = this.linkifyTopCallFrame(event, target, linkifier, isFreshOrEnhanced) ?? null;
--        }
--        break;
--      }
--    }
--
--    if (!details && detailsText) {
--      details = document.createTextNode(detailsText);
--    }
--    return details;
--  }
--
--  static linkifyLocation(linkifyOptions: LinkifyLocationOptions): Element|null {
--    const {scriptId, url, lineNumber, columnNumber, isFreshOrEnhanced, linkifier, target, omitOrigin} = linkifyOptions;
--    const options = {
--      lineNumber,
--      columnNumber,
--      showColumnNumber: true,
--      inlineFrameIndex: 0,
--      className: 'timeline-details',
--      tabStop: true,
--      omitOrigin,
--    };
--    if (isFreshOrEnhanced) {
--      return linkifier.linkifyScriptLocation(
--          target, scriptId, url as Platform.DevToolsPath.UrlString, lineNumber, options);
--    }
--    return LegacyComponents.Linkifier.Linkifier.linkifyURL(url as Platform.DevToolsPath.UrlString, options);
--  }
--
--  static linkifyTopCallFrame(
--      event: Trace.Types.Events.Event, target: SDK.Target.Target|null, linkifier: LegacyComponents.Linkifier.Linkifier,
--      isFreshOrEnhanced = false): Element|null {
--    let frame = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event)?.[0];
--    if (Trace.Types.Events.isProfileCall(event)) {
--      frame = event.callFrame;
--    }
--    if (!frame) {
--      return null;
--    }
--    const options = {
--      className: 'timeline-details',
--      tabStop: true,
--      inlineFrameIndex: 0,
--      showColumnNumber: true,
--      columnNumber: frame.columnNumber,
--      lineNumber: frame.lineNumber,
--    };
--    if (isFreshOrEnhanced) {
--      return linkifier.maybeLinkifyConsoleCallFrame(target, frame, {showColumnNumber: true, inlineFrameIndex: 0});
--    }
--    return LegacyComponents.Linkifier.Linkifier.linkifyURL(frame.url as Platform.DevToolsPath.UrlString, options);
--  }
--
--  static buildDetailsNodeForMarkerEvents(event: Trace.Types.Events.MarkerEvent): HTMLElement {
--    let link = 'https://web.dev/user-centric-performance-metrics/';
--    let name = 'page performance metrics';
--    switch (event.name) {
--      case Trace.Types.Events.Name.MARK_LCP_CANDIDATE:
--        link = 'https://web.dev/lcp/';
--        name = 'largest contentful paint';
--        break;
--      case Trace.Types.Events.Name.MARK_FCP:
--        link = 'https://web.dev/first-contentful-paint/';
--        name = 'first contentful paint';
--        break;
--      default:
--        break;
--    }
--
--    const html = UI.Fragment.html`<div>${
--        UI.XLink.XLink.create(
--            link, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more')} about ${name}.</div>`;
--    return html as HTMLElement;
--  }
--
--  static buildConsumeCacheDetails(
--      eventData: {
--        consumedCacheSize?: number,
--        cacheRejected?: boolean,
--        cacheKind?: string,
--      },
--      contentHelper: TimelineDetailsContentHelper): void {
--    if (typeof eventData.consumedCacheSize === 'number') {
--      contentHelper.appendTextRow(
--          i18nString(UIStrings.compilationCacheStatus), i18nString(UIStrings.scriptLoadedFromCache));
--      contentHelper.appendTextRow(
--          i18nString(UIStrings.compilationCacheSize), i18n.ByteUtilities.bytesToString(eventData.consumedCacheSize));
--      const cacheKind = eventData.cacheKind;
--      if (cacheKind) {
--        contentHelper.appendTextRow(i18nString(UIStrings.compilationCacheKind), cacheKind);
--      }
--    } else if ('cacheRejected' in eventData && eventData['cacheRejected']) {
--      // Version mismatch or similar.
--      contentHelper.appendTextRow(
--          i18nString(UIStrings.compilationCacheStatus), i18nString(UIStrings.failedToLoadScriptFromCache));
--    } else {
--      contentHelper.appendTextRow(
--          i18nString(UIStrings.compilationCacheStatus), i18nString(UIStrings.scriptNotEligibleToBeLoadedFromCache));
--    }
--  }
--
--  static maybeCreateLinkElement(url: string): Element|null {
--    const parsedURL = new Common.ParsedURL.ParsedURL(url);
--    if (!parsedURL.scheme) {
--      return null;
--    }
--
--    const splitResult = Common.ParsedURL.ParsedURL.splitLineAndColumn(url);
--    if (!splitResult) {
--      return null;
--    }
--    const {url: rawURL, lineNumber, columnNumber} = splitResult;
--
--    const options = {
--      lineNumber,
--      columnNumber,
--      showColumnNumber: true,
--      omitOrigin: true,
--    };
--
--    return LegacyComponents.Linkifier.Linkifier.linkifyURL(rawURL as Platform.DevToolsPath.UrlString, options);
--  }
--
--  /**
--   * Takes an input string and parses it to look for links. It does this by
--   * looking for URLs in the input string. The returned fragment will contain
--   * the same string but with any links wrapped in clickable links. The text
--   * of the link is the URL, so the visible string to the user is unchanged.
--   */
--  static parseStringForLinks(rawString: string): DocumentFragment {
--    const results = TextUtils.TextUtils.Utils.splitStringByRegexes(rawString, [URL_REGEX]);
--    const nodes = results.map(result => {
--      if (result.regexIndex === -1) {
--        return result.value;
--      }
--      return TimelineUIUtils.maybeCreateLinkElement(result.value) ?? result.value;
--    });
--
--    const frag = document.createDocumentFragment();
--    frag.append(...nodes);
--    return frag;
--  }
--
--  static async buildTraceEventDetails(
--      parsedTrace: Trace.TraceModel.ParsedTrace,
--      event: Trace.Types.Events.Event,
--      linkifier: LegacyComponents.Linkifier.Linkifier,
--      canShowPieChart: boolean,
--      entityMapper: Trace.EntityMapper.EntityMapper|null,
--      ): Promise<DocumentFragment> {
--    const maybeTarget = targetForEvent(parsedTrace, event);
--    const {duration} = Trace.Helpers.Timing.eventTimingsMicroSeconds(event);
--    const selfTime = getEventSelfTime(event, parsedTrace);
--    const relatedNodesMap = await Utils.EntryNodes.relatedDOMNodesForEvent(
--        parsedTrace,
--        event,
--    );
--    let entityAppended = false;
--
--    if (maybeTarget) {
--      // @ts-expect-error TODO(crbug.com/1011811): Remove symbol usage.
--      if (typeof event[previewElementSymbol] === 'undefined') {
--        let previewElement: (Element|null)|null = null;
--        const url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace.data);
--        if (url) {
--          previewElement = await LegacyComponents.ImagePreview.ImagePreview.build(url, false, {
--            imageAltText: LegacyComponents.ImagePreview.ImagePreview.defaultAltTextForImageURL(url),
--            precomputedFeatures: undefined,
--            align: LegacyComponents.ImagePreview.Align.START,
--          });
--        } else if (Trace.Types.Events.isPaint(event)) {
--          previewElement = await TimelineUIUtils.buildPicturePreviewContent(parsedTrace, event, maybeTarget);
--        }
--        // @ts-expect-error TODO(crbug.com/1011811): Remove symbol usage.
--        event[previewElementSymbol] = previewElement;
--      }
--    }
--
--    // This message may vary per event.name;
--    let relatedNodeLabel;
--
--    const contentHelper = new TimelineDetailsContentHelper(targetForEvent(parsedTrace, event), linkifier);
--
--    const defaultColorForEvent = this.eventColor(event);
--    const isMarker = parsedTrace && isMarkerEvent(parsedTrace, event);
--    const color = isMarker ? TimelineUIUtils.markerStyleForEvent(event).color : defaultColorForEvent;
--
--    contentHelper.addSection(TimelineUIUtils.eventTitle(event), color, event);
--
--    // TODO: as part of the removal of the old engine, produce a typesafe way
--    // to look up args and data for events.
--    // eslint-disable-next-line @typescript-eslint/no-explicit-any
--    const unsafeEventArgs = event.args as Record<string, any>;
--    // eslint-disable-next-line @typescript-eslint/no-explicit-any
--    const unsafeEventData = event.args?.data as Record<string, any>;
--    const initiator = parsedTrace.data.Initiators.eventToInitiator.get(event) ?? null;
--    const initiatorFor = parsedTrace.data.Initiators.initiatorToEvents.get(event) ?? null;
--
--    let url: Platform.DevToolsPath.UrlString|null = null;
--
--    if (parsedTrace) {
--      const warnings = TimelineComponents.DetailsView.buildWarningElementsForEvent(event, parsedTrace);
--      for (const warning of warnings) {
--        contentHelper.appendElementRow(i18nString(UIStrings.warning), warning, true);
--      }
--    }
--
--    // Add timestamp to user timings, including custom extensibility markers
--    if (Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.UserTiming) ||
--        Trace.Types.Extensions.isSyntheticExtensionEntry(event)) {
--      const adjustedEventTimeStamp = timeStampForEventAdjustedForClosestNavigationIfPossible(
--          event,
--          parsedTrace,
--      );
--      contentHelper.appendTextRow(
--          i18nString(UIStrings.timestamp), i18n.TimeUtilities.preciseMillisToString(adjustedEventTimeStamp, 1));
--    }
--
--    // Only show total time and self time for events with non-zero durations.
--    if (duration !== 0 && !Number.isNaN(duration)) {
--      const timeStr = getDurationString(duration, selfTime);
--      contentHelper.appendTextRow(i18nString(UIStrings.duration), timeStr);
--    }
--
--    if (Trace.Types.Events.isPerformanceMark(event) && event.args.data?.detail) {
--      const detailContainer = TimelineUIUtils.renderObjectJson(JSON.parse(event.args.data?.detail));
--      contentHelper.appendElementRow(i18nString(UIStrings.details), detailContainer);
--    }
--    if (Trace.Types.Events.isSyntheticUserTiming(event) && event.args?.data?.beginEvent.args.detail) {
--      const detailContainer = TimelineUIUtils.renderObjectJson(JSON.parse(event.args?.data?.beginEvent.args.detail));
--      contentHelper.appendElementRow(i18nString(UIStrings.details), detailContainer);
--    }
--
--    if (parsedTrace.data.Meta.traceIsGeneric) {
--      TimelineUIUtils.renderEventJson(event, contentHelper);
--      return contentHelper.fragment;
--    }
--
--    if (Trace.Types.Events.isV8Compile(event)) {
--      url = event.args.data?.url as Platform.DevToolsPath.UrlString;
--      if (url) {
--        const {lineNumber, columnNumber} = Trace.Helpers.Trace.getZeroIndexedLineAndColumnForEvent(event);
--        contentHelper.appendLocationRow(
--            i18nString(UIStrings.script), url, lineNumber || 0, columnNumber, undefined, true);
--        const originWithEntity = this.getOriginWithEntity(entityMapper, parsedTrace, event);
--        if (originWithEntity) {
--          contentHelper.appendElementRow(i18nString(UIStrings.origin), originWithEntity);
--        }
--        entityAppended = true;
--      }
--      const isEager = Boolean(event.args.data?.eager);
--      if (isEager) {
--        contentHelper.appendTextRow(i18nString(UIStrings.eagerCompile), true);
--      }
--
--      const isStreamed = Boolean(event.args.data?.streamed);
--      contentHelper.appendTextRow(
--          i18nString(UIStrings.streamed),
--          isStreamed + (isStreamed ? '' : `: ${event.args.data?.notStreamedReason || ''}`));
--      if (event.args.data) {
--        TimelineUIUtils.buildConsumeCacheDetails(event.args.data, contentHelper);
--      }
--    }
--
--    if (Trace.Types.Extensions.isSyntheticExtensionEntry(event)) {
--      // isSyntheticExtensionEntries can be any of: perf.measure, perf.mark or console.timeStamp.
--      const userDetail = structuredClone(event.userDetail) as Record<string, Trace.Types.Extensions.JsonValue>;
--      if (userDetail && Object.keys(userDetail).length) {
--        // E.g. console.timeStamp(name, start, end, track, trackGroup, color,
--        // {url: 'foo-extension://node/1', description: 'Node'});
--        const hasExclusiveLink = typeof userDetail === 'object' && typeof userDetail.url === 'string' &&
--            typeof userDetail.description === 'string';
--        if (hasExclusiveLink && Boolean(Root.Runtime.hostConfig.devToolsDeepLinksViaExtensibilityApi?.enabled)) {
--          const linkElement = this.maybeCreateLinkElement(String(userDetail.url));
--          if (linkElement) {
--            contentHelper.appendElementRow(String(userDetail.description), linkElement);
--            // Now remove so we don't render them in renderObjectJson.
--            delete userDetail.url;
--            delete userDetail.description;
--          }
--        }
--        if (Object.keys(userDetail).length) {
--          // E.g., performance.measure(name, {detail: {important: 42, devtools: {}}})
--          const detailContainer = TimelineUIUtils.renderObjectJson(userDetail);
--          contentHelper.appendElementRow(i18nString(UIStrings.details), detailContainer);
--        }
--      }
--
--      // E.g. performance.measure(name, {detail: {devtools: {properties: ['Key', 'Value']}}})
--      if (event.devtoolsObj.properties) {
--        for (const [key, value] of event.devtoolsObj.properties || []) {
--          const renderedValue = typeof value === 'string' ? TimelineUIUtils.parseStringForLinks(value) :
--                                                            TimelineUIUtils.renderObjectJson(value);
--          contentHelper.appendElementRow(key, renderedValue);
--        }
--      }
--    }
--
--    const isFreshOrEnhanced =
--        Boolean(parsedTrace && Tracing.FreshRecording.Tracker.instance().recordingIsFreshOrEnhanced(parsedTrace));
--
--    switch (event.name) {
--      case Trace.Types.Events.Name.GC:
--      case Trace.Types.Events.Name.MAJOR_GC:
--      case Trace.Types.Events.Name.MINOR_GC: {
--        const delta = unsafeEventArgs['usedHeapSizeBefore'] - unsafeEventArgs['usedHeapSizeAfter'];
--        contentHelper.appendTextRow(i18nString(UIStrings.collected), i18n.ByteUtilities.bytesToString(delta));
--        break;
--      }
--
--      case Trace.Types.Events.Name.PROFILE_CALL: {
--        const profileCall = event as Trace.Types.Events.SyntheticProfileCall;
--        const resolvedURL = SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(parsedTrace, profileCall);
--        if (!resolvedURL) {
--          break;
--        }
--        const callFrame = profileCall.callFrame;
--        // Render the URL with its location content.
--        contentHelper.appendLocationRow(
--            i18nString(UIStrings.source), resolvedURL, callFrame.lineNumber || 0, callFrame.columnNumber, undefined,
--            true);
--        const originWithEntity = this.getOriginWithEntity(entityMapper, parsedTrace, profileCall);
--        if (originWithEntity) {
--          contentHelper.appendElementRow(i18nString(UIStrings.origin), originWithEntity);
--        }
--        entityAppended = true;
--        break;
--      }
--      case Trace.Types.Events.Name.FUNCTION_CALL: {
--        const detailsNode = await TimelineUIUtils.buildDetailsNodeForTraceEvent(
--            event, targetForEvent(parsedTrace, event), linkifier, isFreshOrEnhanced, parsedTrace);
--        if (detailsNode) {
--          contentHelper.appendElementRow(i18nString(UIStrings.function), detailsNode);
--          const originWithEntity = this.getOriginWithEntity(entityMapper, parsedTrace, event);
--          if (originWithEntity) {
--            contentHelper.appendElementRow(i18nString(UIStrings.origin), originWithEntity);
--          }
--          entityAppended = true;
--        }
--        break;
--      }
--
--      case Trace.Types.Events.Name.TIMER_FIRE:
--      case Trace.Types.Events.Name.TIMER_INSTALL:
--      case Trace.Types.Events.Name.TIMER_REMOVE: {
--        contentHelper.appendTextRow(i18nString(UIStrings.timerId), unsafeEventData.timerId);
--
--        if (event.name === Trace.Types.Events.Name.TIMER_INSTALL) {
--          contentHelper.appendTextRow(
--              i18nString(UIStrings.timeout), i18n.TimeUtilities.millisToString(unsafeEventData['timeout']));
--          contentHelper.appendTextRow(i18nString(UIStrings.repeats), !unsafeEventData['singleShot']);
--        }
--        break;
--      }
--
--      case Trace.Types.Events.Name.SCHEDULE_POST_TASK_CALLBACK:
--      case Trace.Types.Events.Name.RUN_POST_TASK_CALLBACK: {
--        contentHelper.appendTextRow(
--            i18nString(UIStrings.delay), i18n.TimeUtilities.millisToString(unsafeEventData['delay']));
--        contentHelper.appendTextRow(i18nString(UIStrings.priority), unsafeEventData['priority']);
--        break;
--      }
--
--      case Trace.Types.Events.Name.FIRE_ANIMATION_FRAME: {
--        contentHelper.appendTextRow(i18nString(UIStrings.callbackId), unsafeEventData['id']);
--        break;
--      }
--
--      case Trace.Types.Events.Name.COMPILE_MODULE: {
--        contentHelper.appendLocationRow(i18nString(UIStrings.module), unsafeEventArgs['fileName'], 0);
--        break;
--      }
--      case Trace.Types.Events.Name.COMPILE_SCRIPT: {
--        // This case is handled above
--        break;
--      }
--
--      case Trace.Types.Events.Name.CACHE_MODULE: {
--        url = unsafeEventData && unsafeEventData['url'] as Platform.DevToolsPath.UrlString;
--        contentHelper.appendTextRow(
--            i18nString(UIStrings.compilationCacheSize),
--            i18n.ByteUtilities.bytesToString(unsafeEventData['producedCacheSize']));
--        break;
--      }
--
--      case Trace.Types.Events.Name.CACHE_SCRIPT: {
--        url = unsafeEventData && unsafeEventData['url'] as Platform.DevToolsPath.UrlString;
--        if (url) {
--          const {lineNumber, columnNumber} = Trace.Helpers.Trace.getZeroIndexedLineAndColumnForEvent(event);
--          contentHelper.appendLocationRow(
--              i18nString(UIStrings.script), url, lineNumber || 0, columnNumber, undefined, true);
--          const originWithEntity = this.getOriginWithEntity(entityMapper, parsedTrace, event);
--          if (originWithEntity) {
--            contentHelper.appendElementRow(i18nString(UIStrings.origin), originWithEntity);
--          }
--          entityAppended = true;
--        }
--        contentHelper.appendTextRow(
--            i18nString(UIStrings.compilationCacheSize),
--            i18n.ByteUtilities.bytesToString(unsafeEventData['producedCacheSize']));
--        break;
--      }
--
--      case Trace.Types.Events.Name.EVALUATE_SCRIPT: {
--        url = unsafeEventData && unsafeEventData['url'] as Platform.DevToolsPath.UrlString;
--        if (url) {
--          const {lineNumber, columnNumber} = Trace.Helpers.Trace.getZeroIndexedLineAndColumnForEvent(event);
--          contentHelper.appendLocationRow(
--              i18nString(UIStrings.script), url, lineNumber || 0, columnNumber, undefined, true);
--          const originWithEntity = this.getOriginWithEntity(entityMapper, parsedTrace, event);
--          if (originWithEntity) {
--            contentHelper.appendElementRow(i18nString(UIStrings.origin), originWithEntity);
--          }
--          entityAppended = true;
--        }
--        break;
--      }
--
--      case Trace.Types.Events.Name.WASM_STREAM_FROM_RESPONSE_CALLBACK:
--      case Trace.Types.Events.Name.WASM_COMPILED_MODULE:
--      case Trace.Types.Events.Name.WASM_CACHED_MODULE:
--      case Trace.Types.Events.Name.WASM_MODULE_CACHE_HIT:
--      case Trace.Types.Events.Name.WASM_MODULE_CACHE_INVALID: {
--        if (unsafeEventData) {
--          url = unsafeEventArgs['url'] as Platform.DevToolsPath.UrlString;
--          if (url) {
--            contentHelper.appendTextRow(i18nString(UIStrings.url), url);
--          }
--          const producedCachedSize = unsafeEventArgs['producedCachedSize'];
--          if (producedCachedSize) {
--            contentHelper.appendTextRow(i18nString(UIStrings.producedCacheSize), producedCachedSize);
--          }
--          const consumedCachedSize = unsafeEventArgs['consumedCachedSize'];
--          if (consumedCachedSize) {
--            contentHelper.appendTextRow(i18nString(UIStrings.consumedCacheSize), consumedCachedSize);
--          }
--        }
--        break;
--      }
--
--      case Trace.Types.Events.Name.PAINT:
--      case Trace.Types.Events.Name.PAINT_SETUP:
--      case Trace.Types.Events.Name.RASTERIZE:
--      case Trace.Types.Events.Name.SCROLL_LAYER: {
--        relatedNodeLabel = i18nString(UIStrings.layerRoot);
--        break;
--      }
--
--      case Trace.Types.Events.Name.PAINT_IMAGE:
--      case Trace.Types.Events.Name.DECODE_LAZY_PIXEL_REF:
--      case Trace.Types.Events.Name.DECODE_IMAGE:
--      case Trace.Types.Events.Name.DRAW_LAZY_PIXEL_REF: {
--        relatedNodeLabel = i18nString(UIStrings.ownerElement);
--        url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace.data);
--        if (url) {
--          const options = {
--            tabStop: true,
--            showColumnNumber: false,
--            inlineFrameIndex: 0,
--          };
--          contentHelper.appendElementRow(
--              i18nString(UIStrings.imageUrl), LegacyComponents.Linkifier.Linkifier.linkifyURL(url, options));
--        }
--        break;
--      }
--
--      case Trace.Types.Events.Name.PARSE_AUTHOR_STYLE_SHEET: {
--        url = unsafeEventData['styleSheetUrl'] as Platform.DevToolsPath.UrlString;
--        if (url) {
--          const options = {
--            tabStop: true,
--            showColumnNumber: false,
--            inlineFrameIndex: 0,
--          };
--          contentHelper.appendElementRow(
--              i18nString(UIStrings.stylesheetUrl), LegacyComponents.Linkifier.Linkifier.linkifyURL(url, options));
--        }
--        break;
--      }
--
--      case Trace.Types.Events.Name.RECALC_STYLE: {
--        contentHelper.appendTextRow(i18nString(UIStrings.elementsAffected), unsafeEventArgs['elementCount']);
--
--        const selectorStatsSetting =
--            Common.Settings.Settings.instance().createSetting('timeline-capture-selector-stats', false);
--        if (!selectorStatsSetting.get()) {
--          const note = document.createElement('span');
--          note.textContent = i18nString(UIStrings.sSelectorStatsInfo, {PH1: selectorStatsSetting.title()});
--          contentHelper.appendElementRow(i18nString(UIStrings.selectorStatsTitle), note);
--        }
--
--        break;
--      }
--
--      case Trace.Types.Events.Name.LAYOUT: {
--        const beginData = unsafeEventArgs['beginData'];
--        contentHelper.appendTextRow(
--            i18nString(UIStrings.nodesThatNeedLayout),
--            i18nString(UIStrings.sOfS, {PH1: beginData['dirtyObjects'], PH2: beginData['totalObjects']}));
--        relatedNodeLabel = i18nString(UIStrings.layoutRoot);
--        break;
--      }
--
--      case Trace.Types.Events.Name.CONSOLE_TIME: {
--        contentHelper.appendTextRow(i18nString(UIStrings.message), event.name);
--        break;
--      }
--
--      case Trace.Types.Events.Name.WEB_SOCKET_CREATE:
--      case Trace.Types.Events.Name.WEB_SOCKET_SEND_HANDSHAKE_REQUEST:
--      case Trace.Types.Events.Name.WEB_SOCKET_RECEIVE_HANDSHAKE_REQUEST:
--      case Trace.Types.Events.Name.WEB_SOCKET_SEND:
--      case Trace.Types.Events.Name.WEB_SOCKET_RECEIVE:
--      case Trace.Types.Events.Name.WEB_SOCKET_DESTROY: {
--        if (Trace.Types.Events.isWebSocketTraceEvent(event)) {
--          const rows = TimelineComponents.DetailsView.buildRowsForWebSocketEvent(event, parsedTrace);
--          for (const {key, value} of rows) {
--            contentHelper.appendTextRow(key, value);
--          }
--        }
--        break;
--      }
--
--      case Trace.Types.Events.Name.EMBEDDER_CALLBACK: {
--        contentHelper.appendTextRow(i18nString(UIStrings.callbackFunction), unsafeEventData['callbackName']);
--        break;
--      }
--
--      case Trace.Types.Events.Name.ANIMATION: {
--        if (!Trace.Types.Events.isSyntheticAnimation(event)) {
--          break;
--        }
--        const {displayName, nodeName} = event.args.data.beginEvent.args.data;
--        displayName && contentHelper.appendTextRow(i18nString(UIStrings.animating), displayName);
--        // If relatedNodes is empty (maybe saved trace), then print the text description of the DOM node.
--        if (!relatedNodesMap?.size && nodeName) {
--          contentHelper.appendTextRow(i18nString(UIStrings.relatedNode), nodeName);
--        }
--
--        const CLSInsight = Trace.Insights.Models.CLSCulprits;
--        const failures = CLSInsight.getNonCompositedFailure(event);
--        if (!failures.length) {
--          break;
--        }
--
--        const failureReasons = new Set(failures.map(f => f.failureReasons).flat().filter(Boolean));
--        const unsupportedProperties =
--            new Set(failures.map(f => f.unsupportedProperties).flat().filter(Boolean)) as Set<string>;
--
--        // The failureReasons can be empty when Blink added a new failure reason that is
--        // not supported by DevTools yet
--        if (failureReasons.size === 0) {
--          contentHelper.appendElementRow(
--              i18nString(UIStrings.compositingFailed), i18nString(UIStrings.compositingFailedUnknownReason), true);
--        } else {
--          for (const reason of failureReasons) {
--            let str;
--            switch (reason) {
--              case CLSInsight.AnimationFailureReasons.ACCELERATED_ANIMATIONS_DISABLED:
--                str = i18nString(UIStrings.compositingFailedAcceleratedAnimationsDisabled);
--                break;
--              case CLSInsight.AnimationFailureReasons.EFFECT_SUPPRESSED_BY_DEVTOOLS:
--                str = i18nString(UIStrings.compositingFailedEffectSuppressedByDevtools);
--                break;
--              case CLSInsight.AnimationFailureReasons.INVALID_ANIMATION_OR_EFFECT:
--                str = i18nString(UIStrings.compositingFailedInvalidAnimationOrEffect);
--                break;
--              case CLSInsight.AnimationFailureReasons.EFFECT_HAS_UNSUPPORTED_TIMING_PARAMS:
--                str = i18nString(UIStrings.compositingFailedEffectHasUnsupportedTimingParams);
--                break;
--              case CLSInsight.AnimationFailureReasons.EFFECT_HAS_NON_REPLACE_COMPOSITE_MODE:
--                str = i18nString(UIStrings.compositingFailedEffectHasNonReplaceCompositeMode);
--                break;
--              case CLSInsight.AnimationFailureReasons.TARGET_HAS_INVALID_COMPOSITING_STATE:
--                str = i18nString(UIStrings.compositingFailedTargetHasInvalidCompositingState);
--                break;
--              case CLSInsight.AnimationFailureReasons.TARGET_HAS_INCOMPATIBLE_ANIMATIONS:
--                str = i18nString(UIStrings.compositingFailedTargetHasIncompatibleAnimations);
--                break;
--              case CLSInsight.AnimationFailureReasons.TARGET_HAS_CSS_OFFSET:
--                str = i18nString(UIStrings.compositingFailedTargetHasCSSOffset);
--                break;
--              case CLSInsight.AnimationFailureReasons.ANIMATION_AFFECTS_NON_CSS_PROPERTIES:
--                str = i18nString(UIStrings.compositingFailedAnimationAffectsNonCSSProperties);
--                break;
--              case CLSInsight.AnimationFailureReasons.TRANSFORM_RELATED_PROPERTY_CANNOT_BE_ACCELERATED_ON_TARGET:
--                str = i18nString(UIStrings.compositingFailedTransformRelatedPropertyCannotBeAcceleratedOnTarget);
--                break;
--              case CLSInsight.AnimationFailureReasons.TRANSFROM_BOX_SIZE_DEPENDENT:
--                str = i18nString(UIStrings.compositingFailedTransformDependsBoxSize);
--                break;
--              case CLSInsight.AnimationFailureReasons.FILTER_RELATED_PROPERTY_MAY_MOVE_PIXELS:
--                str = i18nString(UIStrings.compositingFailedFilterRelatedPropertyMayMovePixels);
--                break;
--              case CLSInsight.AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY:
--                str = i18nString(UIStrings.compositingFailedUnsupportedCSSProperty, {
--                  propertyCount: unsupportedProperties.size,
--                  properties: new Intl.ListFormat(undefined, {style: 'short', type: 'conjunction'})
--                                  .format(unsupportedProperties),
--                });
--                break;
--              case CLSInsight.AnimationFailureReasons.MIXED_KEYFRAME_VALUE_TYPES:
--                str = i18nString(UIStrings.compositingFailedMixedKeyframeValueTypes);
--                break;
--              case CLSInsight.AnimationFailureReasons.TIMELINE_SOURCE_HAS_INVALID_COMPOSITING_STATE:
--                str = i18nString(UIStrings.compositingFailedTimelineSourceHasInvalidCompositingState);
--                break;
--              case CLSInsight.AnimationFailureReasons.ANIMATION_HAS_NO_VISIBLE_CHANGE:
--                str = i18nString(UIStrings.compositingFailedAnimationHasNoVisibleChange);
--                break;
--              case CLSInsight.AnimationFailureReasons.AFFECTS_IMPORTANT_PROPERTY:
--                str = i18nString(UIStrings.compositingFailedAffectsImportantProperty);
--                break;
--              case CLSInsight.AnimationFailureReasons.SVG_TARGET_HAS_INDEPENDENT_TRANSFORM_PROPERTY:
--                str = i18nString(UIStrings.compositingFailedSVGTargetHasIndependentTransformProperty);
--                break;
--              default:
--                // We should never actually end up here, as adding a new AnimationFailureReason
--                // should also require adding a UIString that describes it
--                str = i18nString(UIStrings.compositingFailedUnknownReason);
--                break;
--            }
--            str && contentHelper.appendElementRow(i18nString(UIStrings.compositingFailed), str, true);
--          }
--        }
--
--        break;
--      }
--
--      case Trace.Types.Events.Name.PARSE_HTML: {
--        const beginData = unsafeEventArgs['beginData'];
--        const startLine = beginData['startLine'] - 1;
--        const endLine = unsafeEventArgs['endData'] ? unsafeEventArgs['endData']['endLine'] - 1 : undefined;
--        url = beginData['url'];
--        if (url) {
--          contentHelper.appendLocationRange(i18nString(UIStrings.range), url, startLine, endLine);
--        }
--        break;
--      }
--
--      // @ts-expect-error Fall-through intended.
--      case Trace.Types.Events.Name.FIRE_IDLE_CALLBACK: {
--        contentHelper.appendTextRow(
--            i18nString(UIStrings.allottedTime),
--            i18n.TimeUtilities.millisToString(unsafeEventData['allottedMilliseconds']));
--        contentHelper.appendTextRow(i18nString(UIStrings.invokedByTimeout), unsafeEventData['timedOut']);
--      }
--
--      case Trace.Types.Events.Name.REQUEST_IDLE_CALLBACK:
--      case Trace.Types.Events.Name.CANCEL_IDLE_CALLBACK: {
--        contentHelper.appendTextRow(i18nString(UIStrings.callbackId), unsafeEventData['id']);
--
--        if (Trace.Types.Events.isRequestIdleCallback(event)) {
--          contentHelper.appendTextRow(
--              i18nString(UIStrings.requestIdleCallbackTimeout),
--              i18n.TimeUtilities.preciseMillisToString(event.args.data.timeout));
--        }
--        break;
--      }
--
--      case Trace.Types.Events.Name.EVENT_DISPATCH: {
--        contentHelper.appendTextRow(i18nString(UIStrings.type), unsafeEventData['type']);
--        break;
--      }
--
--      // @ts-expect-error Fall-through intended.
--      case Trace.Types.Events.Name.MARK_LCP_CANDIDATE: {
--        contentHelper.appendTextRow(i18nString(UIStrings.type), String(unsafeEventData['type']));
--        contentHelper.appendTextRow(i18nString(UIStrings.size), String(unsafeEventData['size']));
--      }
--
--      case Trace.Types.Events.Name.MARK_FIRST_PAINT:
--      case Trace.Types.Events.Name.MARK_FCP:
--      case Trace.Types.Events.Name.MARK_LOAD:
--      case Trace.Types.Events.Name.MARK_DOM_CONTENT: {
--        const adjustedEventTimeStamp = timeStampForEventAdjustedForClosestNavigationIfPossible(
--            event,
--            parsedTrace,
--        );
--
--        contentHelper.appendTextRow(
--            i18nString(UIStrings.timestamp), i18n.TimeUtilities.preciseMillisToString(adjustedEventTimeStamp, 1));
--
--        if (Trace.Types.Events.isMarkerEvent(event)) {
--          contentHelper.appendElementRow(
--              i18nString(UIStrings.details), TimelineUIUtils.buildDetailsNodeForMarkerEvents(event));
--        }
--
--        break;
--      }
--
--      case Trace.Types.Events.Name.EVENT_TIMING: {
--        const detailsNode = await TimelineUIUtils.buildDetailsNodeForTraceEvent(
--            event, targetForEvent(parsedTrace, event), linkifier, isFreshOrEnhanced, parsedTrace);
--        if (detailsNode) {
--          contentHelper.appendElementRow(i18nString(UIStrings.details), detailsNode);
--        }
--        if (Trace.Types.Events.isSyntheticInteraction(event)) {
--          const inputDelay = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(event.inputDelay);
--          const mainThreadTime = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(event.mainThreadHandling);
--          const presentationDelay = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(event.presentationDelay);
--          contentHelper.appendTextRow(i18nString(UIStrings.interactionID), event.interactionId);
--          contentHelper.appendTextRow(i18nString(UIStrings.inputDelay), inputDelay);
--          contentHelper.appendTextRow(i18nString(UIStrings.processingDuration), mainThreadTime);
--          contentHelper.appendTextRow(i18nString(UIStrings.presentationDelay), presentationDelay);
--        }
--        break;
--      }
--
--      default: {
--        const detailsNode = await TimelineUIUtils.buildDetailsNodeForTraceEvent(
--            event, targetForEvent(parsedTrace, event), linkifier, isFreshOrEnhanced, parsedTrace);
--        if (detailsNode) {
--          contentHelper.appendElementRow(i18nString(UIStrings.details), detailsNode);
--        }
--        break;
--      }
--    }
--    const relatedNodes = relatedNodesMap?.values() || [];
--    for (const relatedNode of relatedNodes) {
--      if (relatedNode) {
--        const nodeSpan = await Common.Linkifier.Linkifier.linkify(relatedNode);
--        contentHelper.appendElementRow(relatedNodeLabel || i18nString(UIStrings.relatedNode), nodeSpan);
--      }
--    }
--
--    // @ts-expect-error TODO(crbug.com/1011811): Remove symbol usage.
--    if (event[previewElementSymbol]) {
--      contentHelper.addSection(i18nString(UIStrings.preview));
--      // @ts-expect-error TODO(crbug.com/1011811): Remove symbol usage.
--      contentHelper.appendElementRow('', event[previewElementSymbol]);
--    }
--
--    if (!entityAppended) {
--      const originWithEntity = this.getOriginWithEntity(entityMapper, parsedTrace, event);
--      if (originWithEntity) {
--        contentHelper.appendElementRow(i18nString(UIStrings.origin), originWithEntity);
--      }
--    }
--
--    const hasStackTrace = Boolean(Trace.Helpers.Trace.getStackTraceTopCallFrameInEventPayload(event));
--    if (Trace.Types.Events.isUserTiming(event) || Trace.Types.Extensions.isSyntheticExtensionEntry(event) ||
--        Trace.Types.Events.isProfileCall(event) || initiator || initiatorFor || hasStackTrace ||
--        parsedTrace?.data.Invalidations.invalidationsForEvent.get(event)) {
--      await TimelineUIUtils.generateCauses(event, contentHelper, parsedTrace);
--    }
--
--    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE)) {
--      TimelineUIUtils.renderEventJson(event, contentHelper);
--    }
--
--    const stats: TimeRangeCategoryStats = {};
--    const showPieChart = canShowPieChart && TimelineUIUtils.aggregatedStatsForTraceEvent(stats, parsedTrace, event);
--    if (showPieChart) {
--      contentHelper.addSection(i18nString(UIStrings.aggregatedTime));
--      const pieChart = TimelineUIUtils.generatePieChart(stats, TimelineUIUtils.eventStyle(event).category, selfTime);
--      contentHelper.appendElementRow('', pieChart);
--    }
--
--    return contentHelper.fragment;
--  }
--
-   static statsForTimeRange(
-       events: Trace.Types.Events.Event[], startTime: Trace.Types.Timing.Milli,
-       endTime: Trace.Types.Timing.Milli): TimeRangeCategoryStats {
-@@ -1660,264 +738,6 @@ export class TimelineUIUtils {
-     }
-   }
- 
--  private static renderEventJson(event: Trace.Types.Events.Event, contentHelper: TimelineDetailsContentHelper): void {
--    contentHelper.addSection(i18nString(UIStrings.traceEvent));
--
--    const eventWithArgsFirst = {
--      ...{args: event.args},
--      ...event,
--    };
--    const highlightContainer = TimelineUIUtils.renderObjectJson(eventWithArgsFirst);
--    contentHelper.appendElementRow('', highlightContainer);
--  }
--
--  private static renderObjectJson(obj: Object|Trace.Types.Extensions.JsonValue): HTMLDivElement {
--    const indentLength = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get().length;
--    // Elide if the data is huge. Then remove the initial new-line for a denser UI
--    const eventStr = JSON.stringify(obj, null, indentLength).slice(0, 10_000).replace(/{\n  /, '{ ');
--
--    // Use CodeHighlighter for syntax highlighting.
--    const highlightContainer = document.createElement('div');
--    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(highlightContainer, {cssFile: codeHighlighterStyles});
--    const elem = shadowRoot.createChild('div');
--    elem.classList.add('monospace', 'source-code');
--    elem.textContent = eventStr;
--    // Highlighting is done async (shrug), but we'll return the container immediately.
--    void CodeHighlighter.CodeHighlighter.highlightNode(elem, 'text/javascript').then(() => {
--      /**
--       * Linkify any URLs within the text nodes.
--       * Use a TreeWalker to find all our text nodes
--       **/
--      function* iterateTreeWalker(walker: TreeWalker): IterableIterator<Node> {
--        while (walker.nextNode()) {
--          yield walker.currentNode;
--        }
--      }
--      const walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT);
--      // Gather all the nodes first, then we'll potentially replace them.
--      for (const node of Array.from(iterateTreeWalker(walker))) {
--        const frag = TimelineUIUtils.parseStringForLinks(node.textContent || '');
--        node.parentNode?.replaceChild(frag, node);
--      }
--    });
--
--    return highlightContainer;
--  }
--
--  static stackTraceFromCallFrames(callFrames: Protocol.Runtime.CallFrame[]|Trace.Types.Events.CallFrame[]):
--      Protocol.Runtime.StackTrace {
--    return {callFrames} as Protocol.Runtime.StackTrace;
--  }
--
--  static async generateCauses(
--      event: Trace.Types.Events.Event, contentHelper: TimelineDetailsContentHelper,
--      parsedTrace: Trace.TraceModel.ParsedTrace): Promise<void> {
--    const {startTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);
--    let initiatorStackLabel = i18nString(UIStrings.initiatorStackTrace);
--    let stackLabel = i18nString(UIStrings.functionStack);
--    const stackTraceForEvent = Trace.Extras.StackTraceForEvent.get(event, parsedTrace.data);
--    if (stackTraceForEvent?.callFrames.length || stackTraceForEvent?.description || stackTraceForEvent?.parent) {
--      contentHelper.addSection(i18nString(UIStrings.functionStack));
--      contentHelper.createChildStackTraceElement(stackTraceForEvent);
--      // TODO(andoli): also build stack trace component for other events
--      // that have a stack trace using the StackTraceForEvent helper.
--    } else {
--      const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event);
--      if (stackTrace?.length) {
--        contentHelper.addSection(stackLabel);
--        contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace));
--      }
--    }
--    switch (event.name) {
--      case Trace.Types.Events.Name.TIMER_FIRE:
--        initiatorStackLabel = i18nString(UIStrings.timerInstalled);
--        break;
--      case Trace.Types.Events.Name.FIRE_ANIMATION_FRAME:
--        initiatorStackLabel = i18nString(UIStrings.animationFrameRequested);
--        break;
--      case Trace.Types.Events.Name.FIRE_IDLE_CALLBACK:
--        initiatorStackLabel = i18nString(UIStrings.idleCallbackRequested);
--        break;
--      case Trace.Types.Events.Name.RECALC_STYLE:
--        initiatorStackLabel = i18nString(UIStrings.firstInvalidated);
--        stackLabel = i18nString(UIStrings.recalculationForced);
--        break;
--      case Trace.Types.Events.Name.LAYOUT:
--        initiatorStackLabel = i18nString(UIStrings.firstLayoutInvalidation);
--        stackLabel = i18nString(UIStrings.layoutForced);
--        break;
--    }
--
--    const initiator = parsedTrace.data.Initiators.eventToInitiator.get(event);
--    const initiatorFor = parsedTrace.data.Initiators.initiatorToEvents.get(event);
--    const invalidations = parsedTrace.data.Invalidations.invalidationsForEvent.get(event);
--
--    if (initiator) {
--      // If we have an initiator for the event, we can show its stack trace, a link to reveal the initiator,
--      // and the time since the initiator (Pending For).
--      const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(initiator);
--      if (stackTrace) {
--        contentHelper.addSection(initiatorStackLabel);
--        contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace.map(frame => {
--          return {
--            ...frame,
--            scriptId: String(frame.scriptId) as Protocol.Runtime.ScriptId,
--          };
--        })));
--      }
--
--      const link = this.createEntryLink(initiator);
--      contentHelper.appendElementRow(i18nString(UIStrings.initiatedBy), link);
--
--      const {startTime: initiatorStartTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(initiator);
--      const delay = startTime - initiatorStartTime;
--      contentHelper.appendTextRow(i18nString(UIStrings.pendingFor), i18n.TimeUtilities.preciseMillisToString(delay, 1));
--    }
--
--    if (initiatorFor) {
--      // If the event is an initiator for some entries, add links to reveal them.
--      const links = document.createElement('div');
--      initiatorFor.map((initiator, i) => {
--        links.appendChild(this.createEntryLink(initiator));
--        // Add space between each link if it's not last
--        if (i < initiatorFor.length - 1) {
--          links.append(' ');
--        }
--      });
--      contentHelper.appendElementRow(UIStrings.initiatorFor, links);
--    }
--
--    if (invalidations?.length) {
--      const totalInvalidations = parsedTrace.data.Invalidations.invalidationCountForEvent.get(event) ??
--          0;  // Won't be 0, but saves us dealing with undefined.
--      contentHelper.addSection(i18nString(UIStrings.invalidations, {PH1: totalInvalidations}));
--      await TimelineUIUtils.generateInvalidationsList(invalidations, contentHelper);
--    }
--  }
--
--  private static createEntryLink(entry: Trace.Types.Events.Event): HTMLElement {
--    const link = document.createElement('span');
--
--    const traceBoundsState = TraceBounds.TraceBounds.BoundsManager.instance().state();
--
--    if (!traceBoundsState) {
--      console.error('Tried to link to an entry without any traceBoundsState. This should never happen.');
--      return link;
--    }
--
--    // Check is the entry is outside of the current breadcrumb. If it is, don't create a link to navigate to it because there is no way to navigate outside breadcrumb without removing it. Instead, just display the name and "outside breadcrumb" text
--    // Consider entry outside breadcrumb only if it is fully outside. If a part of it is visible, we can still select it.
--    const isEntryOutsideBreadcrumb = traceBoundsState.micro.minimapTraceBounds.min > entry.ts + (entry.dur || 0) ||
--        traceBoundsState.micro.minimapTraceBounds.max < entry.ts;
--
--    // Check if it is in the hidden array
--    const isEntryHidden = ModificationsManager.activeManager()?.getEntriesFilter().entryIsInvisible(entry);
--
--    if (!isEntryOutsideBreadcrumb) {
--      link.classList.add('timeline-link');
--      UI.ARIAUtils.markAsLink(link);
--      link.tabIndex = 0;
--      link.addEventListener('click', () => {
--        TimelinePanel.instance().select(selectionFromEvent(entry));
--      });
--
--      link.addEventListener('keydown', event => {
--        if (event.key === Platform.KeyboardUtilities.ENTER_KEY) {
--          TimelinePanel.instance().select(selectionFromEvent(entry));
--          event.consume(true);
--        }
--      });
--    }
--
--    if (isEntryHidden) {
--      link.textContent = this.eventTitle(entry) + ' ' + i18nString(UIStrings.entryIsHidden);
--    } else if (isEntryOutsideBreadcrumb) {
--      link.textContent = this.eventTitle(entry) + ' ' + i18nString(UIStrings.outsideBreadcrumbRange);
--    } else {
--      link.textContent = this.eventTitle(entry);
--    }
--
--    return link;
--  }
--
--  private static async generateInvalidationsList(
--      invalidations: Trace.Types.Events.InvalidationTrackingEvent[],
--      contentHelper: TimelineDetailsContentHelper): Promise<void> {
--    const {groupedByReason, backendNodeIds} = TimelineComponents.DetailsView.generateInvalidationsList(invalidations);
--
--    let relatedNodesMap: Map<number, SDK.DOMModel.DOMNode|null>|null = null;
--    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
--    const domModel = target?.model(SDK.DOMModel.DOMModel);
--    if (domModel) {
--      relatedNodesMap = await domModel.pushNodesByBackendIdsToFrontend(backendNodeIds);
--    }
--
--    Object.keys(groupedByReason).forEach(reason => {
--      TimelineUIUtils.generateInvalidationsForReason(reason, groupedByReason[reason], relatedNodesMap, contentHelper);
--    });
--  }
--
--  private static generateInvalidationsForReason(
--      reason: string, invalidations: Trace.Types.Events.InvalidationTrackingEvent[],
--      relatedNodesMap: Map<number, SDK.DOMModel.DOMNode|null>|null, contentHelper: TimelineDetailsContentHelper): void {
--    function createLinkForInvalidationNode(invalidation: Trace.Types.Events.InvalidationTrackingEvent):
--        HTMLSpanElement {
--      const node = (invalidation.args.data.nodeId && relatedNodesMap) ?
--          relatedNodesMap.get(invalidation.args.data.nodeId) :
--          null;
--      if (node) {
--        const nodeSpan = document.createElement('span');
--        void Common.Linkifier.Linkifier.linkify(node).then(link => nodeSpan.appendChild(link));
--        return nodeSpan;
--      }
--      if (invalidation.args.data.nodeName) {
--        const nodeSpan = document.createElement('span');
--        nodeSpan.textContent = invalidation.args.data.nodeName;
--        return nodeSpan;
--      }
--      const nodeSpan = document.createElement('span');
--      UI.UIUtils.createTextChild(nodeSpan, i18nString(UIStrings.UnknownNode));
--      return nodeSpan;
--    }
--
--    const generatedItems = new Set<string>();
--
--    for (const invalidation of invalidations) {
--      const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(invalidation);
--      let scriptLink: HTMLElement|null = null;
--      const callFrame = stackTrace?.at(0);
--      if (callFrame) {
--        scriptLink = contentHelper.linkifier()?.maybeLinkifyScriptLocation(
--                         SDK.TargetManager.TargetManager.instance().rootTarget(),
--                         callFrame.scriptId as Protocol.Runtime.ScriptId,
--                         callFrame.url as Platform.DevToolsPath.UrlString,
--                         callFrame.lineNumber,
--                         ) ||
--            null;
--      }
--
--      const niceNodeLink = createLinkForInvalidationNode(invalidation);
--
--      const text = scriptLink ?
--          i18n.i18n.getFormatLocalizedString(
--              str_, UIStrings.invalidationWithCallFrame, {PH1: niceNodeLink, PH2: scriptLink}) as HTMLElement :
--          niceNodeLink;
--
--      // Sometimes we can get different Invalidation events which cause
--      // the same text for the same element for the same reason to be
--      // generated. Rather than show the user duplicates, if we have
--      // generated text that looks identical to this before, we will
--      // bail.
--      const generatedText: string = (typeof text === 'string' ? text : text.innerText);
--      if (generatedItems.has(generatedText)) {
--        continue;
--      }
--
--      generatedItems.add(generatedText);
--      contentHelper.appendElementRow(reason, text);
--    }
--  }
--
-   /** Populates the passed object then returns true/false if it makes sense to show the pie chart */
-   private static aggregatedStatsForTraceEvent(
-       total: TimeRangeCategoryStats, parsedTrace: Trace.TraceModel.ParsedTrace,
-@@ -1970,67 +790,12 @@ export class TimelineUIUtils {
-     return true;
-   }
- 
--  static async buildPicturePreviewContent(
--      parsedTrace: Trace.TraceModel.ParsedTrace, event: Trace.Types.Events.Paint,
--      target: SDK.Target.Target): Promise<Element|null> {
--    const snapshotEvent = parsedTrace.data.LayerTree.paintsToSnapshots.get(event);
--    if (!snapshotEvent) {
--      return null;
--    }
--
--    const paintProfilerModel = target.model(SDK.PaintProfiler.PaintProfilerModel);
--    if (!paintProfilerModel) {
--      return null;
--    }
--    const snapshot = await paintProfilerModel.loadSnapshot(snapshotEvent.args.snapshot.skp64);
--    if (!snapshot) {
--      return null;
--    }
--
--    const snapshotWithRect = {
--      snapshot,
--      rect: snapshotEvent.args.snapshot.params?.layer_rect,
--    };
--
--    if (!snapshotWithRect) {
--      return null;
--    }
--    const imageURLPromise = snapshotWithRect.snapshot.replay();
--    snapshotWithRect.snapshot.release();
--    const imageURL = await imageURLPromise as Platform.DevToolsPath.UrlString;
--    if (!imageURL) {
--      return null;
--    }
--    const stylesContainer = document.createElement('div');
--    const shadowRoot = stylesContainer.attachShadow({mode: 'open'});
--    shadowRoot.createChild('style').textContent = imagePreviewStyles;
--    const container = shadowRoot.createChild('div');
--    container.classList.add('image-preview-container', 'vbox', 'link');
--    const img = container.createChild('img');
--    img.src = imageURL;
--    img.alt = LegacyComponents.ImagePreview.ImagePreview.defaultAltTextForImageURL(imageURL);
--    const paintProfilerButton = container.createChild('a');
--    paintProfilerButton.textContent = i18nString(UIStrings.paintProfiler);
--    UI.ARIAUtils.markAsLink(container);
--    container.tabIndex = 0;
--    container.addEventListener('click', () => TimelinePanel.instance().select(selectionFromEvent(event)), false);
--    container.addEventListener('keydown', keyEvent => {
--      if (keyEvent.key === Platform.KeyboardUtilities.ENTER_KEY) {
--        TimelinePanel.instance().select(selectionFromEvent(event));
--        keyEvent.consume(true);
--      }
--    });
--    return stylesContainer;
--  }
--
-   static createEventDivider(event: Trace.Types.Events.Event, zeroTime: number): HTMLDivElement {
-     const eventDivider = document.createElement('div');
-     eventDivider.classList.add('resources-event-divider');
-     const {startTime: eventStartTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);
- 
-     const startTime = i18n.TimeUtilities.millisToString(eventStartTime - zeroTime);
--    UI.Tooltip.Tooltip.install(
--        eventDivider, i18nString(UIStrings.sAtS, {PH1: TimelineUIUtils.eventTitle(event), PH2: startTime}));
-     const style = TimelineUIUtils.markerStyleForEvent(event);
-     if (style.tall) {
-       eventDivider.style.backgroundColor = style.color;
-@@ -2048,157 +813,6 @@ export class TimelineUIUtils {
-     return Trace.Styles.getCategoryStyles();
-   }
- 
--  static generatePieChart(
--      aggregatedStats: TimeRangeCategoryStats, selfCategory?: Trace.Styles.TimelineCategory,
--      selfTime?: Trace.Types.Timing.Micro): Element {
--    let total = 0;
--    for (const categoryName in aggregatedStats) {
--      total += aggregatedStats[categoryName];
--    }
--
--    const element = document.createElement('div');
--    element.classList.add('timeline-details-view-pie-chart-wrapper');
--    element.classList.add('hbox');
--
--    const pieChart = new PerfUI.PieChart.PieChart();
--    const slices: Array<{
--      value: number,
--      color: string,
--      title: string,
--    }> = [];
--
--    function appendLegendRow(title: string, value: number, color: string): void {
--      if (!value) {
--        return;
--      }
--      slices.push({value, color, title});
--    }
--
--    // In case of self time, first add self, then children of the same category.
--    if (selfCategory) {
--      const selfTimeMilli = Trace.Helpers.Timing.microToMilli(selfTime || 0 as Trace.Types.Timing.Micro);
--      if (selfTime) {
--        appendLegendRow(
--            i18nString(UIStrings.sSelf, {PH1: selfCategory.title}),
--            selfTimeMilli,
--            selfCategory.getCSSValue(),
--        );
--      }
--      // Children of the same category.
--      const categoryTime = aggregatedStats[selfCategory.name];
--      const value = categoryTime - (selfTimeMilli || 0);
--      if (value > 0) {
--        appendLegendRow(
--            i18nString(UIStrings.sChildren, {PH1: selfCategory.title}),
--            value,
--            selfCategory.getCSSValue(),
--        );
--      }
--    }
--
--    // Add other categories.
--    for (const categoryName in Trace.Styles.getCategoryStyles()) {
--      const category = Trace.Styles.getCategoryStyles()[categoryName as keyof Trace.Styles.CategoryPalette];
--      if (categoryName === selfCategory?.name) {
--        // Do not add an entry for this event's self category because 2
--        // entries for it where added just before this for loop (for
--        // self and children times).
--        continue;
--      }
--      appendLegendRow(category.title, aggregatedStats[category.name], category.getCSSValue());
--    }
--
--    pieChart.data = {
--      chartName: i18nString(UIStrings.timeSpentInRendering),
--      size: 110,
--      formatter: (value: number) => i18n.TimeUtilities.preciseMillisToString(value),
--      showLegend: true,
--      total,
--      slices,
--    };
--    const pieChartContainer = element.createChild('div', 'vbox');
--    pieChartContainer.appendChild(pieChart);
--
--    return element;
--  }
--  // Generates a Summary component given a aggregated stats for categories.
--  static generateSummaryDetails(
--      aggregatedStats: Record<string, number>, rangeStart: number, rangeEnd: number,
--      selectedEvents: Trace.Types.Events.Event[],
--      thirdPartyTree: ThirdPartyTreeView.ThirdPartyTreeViewWidget): Element {
--    const element = document.createElement('div');
--    element.classList.add('timeline-details-range-summary', 'hbox');
--
--    // First, the category bar chart.
--    let total = 0;
--    let categories: TimelineComponents.TimelineSummary.CategoryData[] = [];
--    // Calculate total of all categories.
--    for (const categoryName in aggregatedStats) {
--      total += aggregatedStats[categoryName];
--    }
--
--    // Get stats values from categories.
--    for (const categoryName in Trace.Styles.getCategoryStyles()) {
--      const category = Trace.Styles.getCategoryStyles()[categoryName as keyof Trace.Styles.CategoryPalette];
--      if (category.name === Trace.Styles.EventCategory.IDLE) {
--        continue;
--      }
--      const value = aggregatedStats[category.name];
--      if (!value) {
--        continue;
--      }
--      const title = category.title;
--      const color = category.getCSSValue();
--      categories.push({value, color, title});
--    }
--
--    // Keeps the most useful categories on top.
--    categories = categories.sort((a, b) => b.value - a.value);
--    const start = Trace.Types.Timing.Milli(rangeStart);
--    const end = Trace.Types.Timing.Milli(rangeEnd);
--    const categorySummaryTable = new TimelineComponents.TimelineSummary.CategorySummary();
--    categorySummaryTable.data = {
--      rangeStart: start,
--      rangeEnd: end,
--      total,
--      categories,
--      selectedEvents,
--    };
--    element.append(categorySummaryTable);
--    // Add the 3p datagrid
--    const treeView = new ThirdPartyTreeView.ThirdPartyTreeElement();
--    treeView.treeView = thirdPartyTree;
--    UI.ARIAUtils.setLabel(treeView, i18nString(UIStrings.thirdPartyTable));
--    element.append(treeView);
--
--    return element;
--  }
--
--  static generateDetailsContentForFrame(
--      frame: Trace.Types.Events.LegacyTimelineFrame, filmStrip: Trace.Extras.FilmStrip.Data|null,
--      filmStripFrame: Trace.Extras.FilmStrip.Frame|null): DocumentFragment {
--    const contentHelper = new TimelineDetailsContentHelper(null, null);
--    contentHelper.addSection(i18nString(UIStrings.frame));
--
--    const duration = TimelineUIUtils.frameDuration(frame);
--    contentHelper.appendElementRow(i18nString(UIStrings.duration), duration);
--    if (filmStrip && filmStripFrame) {
--      const filmStripPreview = document.createElement('div');
--      filmStripPreview.classList.add('timeline-filmstrip-preview');
--      // TODO(paulirish): Adopt Util.ImageCache
--      const uri = Trace.Handlers.ModelHandlers.Screenshots.screenshotImageDataUri(filmStripFrame.screenshotEvent);
--      void UI.UIUtils.loadImage(uri).then(image => image && filmStripPreview.appendChild(image));
--      contentHelper.appendElementRow('', filmStripPreview);
--      filmStripPreview.addEventListener('click', frameClicked.bind(null, filmStrip, filmStripFrame), false);
--    }
--
--    function frameClicked(filmStrip: Trace.Extras.FilmStrip.Data, filmStripFrame: Trace.Extras.FilmStrip.Frame): void {
--      PerfUI.FilmStripView.Dialog.fromFilmStrip(filmStrip, filmStripFrame.index);
--    }
--
--    return contentHelper.fragment;
--  }
--
-   static frameDuration(frame: Trace.Types.Events.LegacyTimelineFrame): Element {
-     const offsetMilli = Trace.Helpers.Timing.microToMilli(frame.startTimeOffset);
-     const durationMilli = Trace.Helpers.Timing.microToMilli(Trace.Types.Timing.Micro(frame.endTime - frame.startTime));
-@@ -2318,27 +932,6 @@ export class TimelineUIUtils {
-     return Common.ParsedURL.schemeIs(url, 'about:') ? `"${Platform.StringUtilities.trimMiddle(frame.name, trimAt)}"` :
-                                                       frame.url.slice(0, trimAt);
-   }
--
--  static getOriginWithEntity(
--      entityMapper: Trace.EntityMapper.EntityMapper|null, parsedTrace: Trace.TraceModel.ParsedTrace,
--      event: Trace.Types.Events.Event): string|null {
--    const resolvedURL = SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(parsedTrace, event);
--    if (!resolvedURL) {
--      return null;
--    }
--    const parsedUrl = URL.parse(resolvedURL);
--    if (!parsedUrl) {
--      return null;
--    }
--
--    const entity = entityMapper?.entityForEvent(event) ?? null;
--    if (!entity) {
--      return null;
--    }
--
--    const originWithEntity = Utils.Helpers.formatOriginWithEntity(parsedUrl, entity, true);
--    return originWithEntity;
--  }
- }
- 
- export const aggregatedStatsKey = Symbol('aggregatedStats');
-@@ -2357,147 +950,6 @@ export class EventDispatchTypeDescriptor {
-   }
- }
- 
--export class TimelineDetailsContentHelper {
--  fragment: DocumentFragment;
--  #linkifier: LegacyComponents.Linkifier.Linkifier|null;
--  private target: SDK.Target.Target|null;
--  element: HTMLDivElement;
--  private tableElement: HTMLElement;
--
--  constructor(target: SDK.Target.Target|null, linkifier: LegacyComponents.Linkifier.Linkifier|null) {
--    this.fragment = document.createDocumentFragment();
--
--    this.#linkifier = linkifier;
--    this.target = target;
--
--    this.element = document.createElement('div');
--    this.element.classList.add('timeline-details-view-block');
--    this.tableElement = this.element.createChild('div', 'vbox timeline-details-chip-body');
--    this.fragment.appendChild(this.element);
--  }
--
--  addSection(title: string, swatchColor?: string, event?: Trace.Types.Events.Event): void {
--    if (!this.tableElement.hasChildNodes()) {
--      this.element.removeChildren();
--    } else {
--      this.element = document.createElement('div');
--      this.element.classList.add('timeline-details-view-block');
--      this.fragment.appendChild(this.element);
--    }
--
--    if (title) {
--      const titleElement = this.element.createChild('div', 'timeline-details-chip-title');
--      if (swatchColor) {
--        titleElement.createChild('div').style.backgroundColor = swatchColor;
--      }
--
--      const textChild = titleElement.createChild('span');
--      textChild.textContent = title;
--
--      if (event) {
--        textChild.classList.add('timeline-details-chip-title-reveal-entry');
--        textChild.addEventListener('click', function() {
--          TimelinePanel.instance().zoomEvent(event);
--        });
--      }
--    }
--
--    this.tableElement = this.element.createChild('div', 'vbox timeline-details-chip-body');
--    this.fragment.appendChild(this.element);
--  }
--
--  linkifier(): LegacyComponents.Linkifier.Linkifier|null {
--    return this.#linkifier;
--  }
--
--  appendTextRow(title: string, value: string|number|boolean): void {
--    const rowElement = this.tableElement.createChild('div', 'timeline-details-view-row');
--    rowElement.createChild('div', 'timeline-details-view-row-title').textContent = title;
--    rowElement.createChild('div', 'timeline-details-view-row-value').textContent = value.toString();
--  }
--
--  appendElementRow(title: string, content: string|Node, isWarning?: boolean, isStacked?: boolean): void {
--    const rowElement = this.tableElement.createChild('div', 'timeline-details-view-row');
--    rowElement.setAttribute('data-row-title', title);
--    if (isWarning) {
--      rowElement.classList.add('timeline-details-warning');
--    }
--    if (isStacked) {
--      rowElement.classList.add('timeline-details-stack-values');
--    }
--    const titleElement = rowElement.createChild('div', 'timeline-details-view-row-title');
--    titleElement.textContent = title;
--    const valueElement = rowElement.createChild('div', 'timeline-details-view-row-value');
--    if (content instanceof Node) {
--      valueElement.appendChild(content);
--    } else {
--      UI.UIUtils.createTextChild(valueElement, content || '');
--    }
--  }
--
--  appendLocationRow(
--      title: string, url: string, startLine: number, startColumn?: number, text?: string, omitOrigin?: boolean): void {
--    if (!this.#linkifier) {
--      return;
--    }
--
--    const options = {
--      tabStop: true,
--      columnNumber: startColumn,
--      showColumnNumber: true,
--      inlineFrameIndex: 0,
--      text,
--      omitOrigin,
--    };
--    const link = this.#linkifier.maybeLinkifyScriptLocation(
--        this.target, null, url as Platform.DevToolsPath.UrlString, startLine, options);
--    if (!link) {
--      return;
--    }
--    this.appendElementRow(title, link);
--  }
--
--  appendLocationRange(title: string, url: Platform.DevToolsPath.UrlString, startLine: number, endLine?: number): void {
--    if (!this.#linkifier || !this.target) {
--      return;
--    }
--    const locationContent = document.createElement('span');
--    const link = this.#linkifier.maybeLinkifyScriptLocation(
--        this.target, null, url, startLine, {tabStop: true, inlineFrameIndex: 0});
--    if (!link) {
--      return;
--    }
--    locationContent.appendChild(link);
--    UI.UIUtils.createTextChild(
--        locationContent, Platform.StringUtilities.sprintf(' [%s…%s]', startLine + 1, (endLine || 0) + 1 || ''));
--    this.appendElementRow(title, locationContent);
--  }
--
--  createChildStackTraceElement(stackTrace: Protocol.Runtime.StackTrace): void {
--    if (!this.#linkifier) {
--      return;
--    }
--    const resolvedStackTrace: Protocol.Runtime.StackTrace = structuredClone(stackTrace);
--    let currentResolvedStackTrace: Protocol.Runtime.StackTrace|undefined = resolvedStackTrace;
--    while (currentResolvedStackTrace) {
--      currentResolvedStackTrace.callFrames = currentResolvedStackTrace.callFrames.map(
--          callFrame => ({
--            ...callFrame,
--            functionName: SourceMapsResolver.SourceMapsResolver.resolvedCodeLocationForCallFrame(callFrame)?.name ||
--                callFrame.functionName,
--          }));
--      currentResolvedStackTrace = currentResolvedStackTrace.parent;
--    }
--    const stackTraceElement =
--        this.tableElement.createChild('div', 'timeline-details-view-row timeline-details-stack-values');
--    const callFrameContents = new LegacyComponents.JSPresentationUtils.StackTracePreviewContent(
--        undefined, this.target ?? undefined, this.#linkifier,
--        {stackTrace: resolvedStackTrace, tabStops: true, showColumnNumber: true});
--    callFrameContents.markAsRoot();
--    callFrameContents.show(stackTraceElement);
--  }
--}
--
- export const categoryBreakdownCacheSymbol = Symbol('categoryBreakdownCache');
- export interface TimelineMarkerStyle {
-   title: string;
-diff --git a/node_modules/chrome-devtools-frontend/front_end/ui/legacy/components/utils/Linkifier.ts b/node_modules/chrome-devtools-frontend/front_end/ui/legacy/components/utils/Linkifier.ts
-index 7d19eae..e073846 100644
---- a/node_modules/chrome-devtools-frontend/front_end/ui/legacy/components/utils/Linkifier.ts
-+++ b/node_modules/chrome-devtools-frontend/front_end/ui/legacy/components/utils/Linkifier.ts
-@@ -16,7 +16,6 @@ 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 IconButton from '../../../components/icon_button/icon_button.js';
--import * as VisualLogging from '../../../visual_logging/visual_logging.js';
- import * as UI from '../../legacy.js';
- 
- const UIStrings = {
-@@ -601,7 +600,6 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
-       // @ts-expect-error
-       link.href = href;
-     }
--    link.setAttribute('jslog', `${VisualLogging.link(jslogContext).track({click: true})}`);
- 
-     if (text instanceof HTMLElement) {
-       link.appendChild(text);
-diff --git a/node_modules/chrome-devtools-frontend/front_end/ui/legacy/components/utils/utils.ts b/node_modules/chrome-devtools-frontend/front_end/ui/legacy/components/utils/utils.ts
-index 2f98cde..cb95b85 100644
---- a/node_modules/chrome-devtools-frontend/front_end/ui/legacy/components/utils/utils.ts
-+++ b/node_modules/chrome-devtools-frontend/front_end/ui/legacy/components/utils/utils.ts
-@@ -2,16 +2,8 @@
- // Use of this source code is governed by a BSD-style license that can be
- // found in the LICENSE file.
- 
--import * as ImagePreview from './ImagePreview.js';
--import * as JSPresentationUtils from './JSPresentationUtils.js';
- import * as Linkifier from './Linkifier.js';
--import * as Reload from './Reload.js';
--import * as TargetDetachedDialog from './TargetDetachedDialog.js';
- 
- export {
--  ImagePreview,
--  JSPresentationUtils,
-   Linkifier,
--  Reload,
--  TargetDetachedDialog,
- };