devtools-tracing 1.1.0 → 1.2.0

package/lib/front_end/panels/timeline/TimelineUIUtils.ts

@@ -1,1029 +0,0 @@
-// Copyright 2021 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
-
-/*
- * Copyright (C) 2013 Google Inc. All rights reserved.
- * Copyright (C) 2012 Intel Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-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 type * as Protocol from '../../generated/protocol.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 ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
-
-import * as Extensions from './extensions/extensions.js';
-
-const UIStrings = {
-  /**
-   * @description Text that only contain a placeholder
-   * @example {100ms (at 200ms)} PH1
-   */
-  emptyPlaceholder: '{PH1}',  // eslint-disable-line @devtools/l10n-no-locked-or-placeholder-only-phrase
-  /**
-   * @description Text for timestamps of items
-   */
-  timestamp: 'Timestamp',
-  /**
-   * @description Text shown next to the interaction event's ID in the detail view.
-   */
-  interactionID: 'ID',
-  /**
-   * @description Text shown next to the interaction event's input delay time in the detail view.
-   */
-  inputDelay: 'Input delay',
-  /**
-   * @description Text shown next to the interaction event's thread processing duration in the detail view.
-   */
-  processingDuration: 'Processing duration',
-  /**
-   * @description Text shown next to the interaction event's presentation delay time in the detail view.
-   */
-  presentationDelay: 'Presentation delay',
-  /**
-   * @description Text shown when the user has selected an event that represents script compiliation.
-   */
-  compile: 'Compile',
-  /**
-   * @description Text shown when the user selects an event that represents script parsing.
-   */
-  parse: 'Parse',
-  /**
-   * @description Text with two placeholders separated by a colon
-   * @example {Node removed} PH1
-   * @example {div#id1} PH2
-   */
-  sS: '{PH1}: {PH2}',
-  /**
-   * @description Text that is usually a hyperlink to more documentation
-   */
-  learnMore: 'Learn more',
-  /**
-   * @description Text referring to the status of the browser's compilation cache.
-   */
-  compilationCacheStatus: 'Compilation cache status',
-  /**
-   * @description Text referring to the size of the browser's compiliation cache.
-   */
-  compilationCacheSize: 'Compilation cache size',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel. "Compilation
-   * cache" refers to the code cache described at
-   * https://v8.dev/blog/code-caching-for-devs . This label is followed by the
-   * type of code cache data used, either "normal" or "full" as described in the
-   * linked article.
-   */
-  compilationCacheKind: 'Compilation cache kind',
-  /**
-   * @description Text used to inform the user that the script they are looking
-   *             at was loaded from the browser's cache.
-   */
-  scriptLoadedFromCache: 'script loaded from cache',
-  /**
-   * @description Text to inform the user that the script they are looking at
-   *             was unable to be loaded from the browser's cache.
-   */
-  failedToLoadScriptFromCache: 'failed to load script from cache',
-  /**
-   * @description Text to inform the user that the script they are looking at was not eligible to be loaded from the browser's cache.
-   */
-  scriptNotEligibleToBeLoadedFromCache: 'script not eligible',
-  /**
-   * @description Label in the summary view in the Performance panel for a number which indicates how much managed memory has been reclaimed by performing Garbage Collection
-   */
-  collected: 'Collected',
-  /**
-   * @description Text for a programming function
-   */
-  function: 'Function',
-  /**
-   * @description Text for referring to the ID of a timer.
-   */
-  timerId: 'Timer ID',
-  /**
-   * @description Text for referring to a timer that has timed-out and therefore is being removed.
-   */
-  timeout: 'Timeout',
-  /**
-   * @description Text used to refer to a positive timeout value that schedules the idle callback once elapsed, even if no idle time is available.
-   */
-  requestIdleCallbackTimeout: 'Timeout',
-  /**
-   * @description Text used to indicate that a timer is repeating (e.g. every X seconds) rather than a one off.
-   */
-  repeats: 'Repeats',
-  /**
-   * @description Text for referring to the ID of a callback function installed by an event.
-   */
-  callbackId: 'Callback ID',
-  /**
-   * @description Text for a module, the programming concept
-   */
-  module: 'Module',
-  /**
-   * @description Label for a group of JavaScript files
-   */
-  script: 'Script',
-  /**
-   * @description Text used to tell a user that a compilation trace event was streamed.
-   */
-  streamed: 'Streamed',
-  /**
-   * @description Text to indicate if a compilation event was eager.
-   */
-  eagerCompile: 'Compiling all functions eagerly',
-  /**
-   * @description Text to refer to the URL associated with a given event.
-   */
-  url: 'Url',
-  /**
-   * @description Text to indicate to the user the size of the cache (as a filesize - e.g. 5mb).
-   */
-  producedCacheSize: 'Produced cache size',
-  /**
-   * @description Text to indicate to the user the amount of the cache (as a filesize - e.g. 5mb) that has been used.
-   */
-  consumedCacheSize: 'Consumed cache size',
-  /**
-   * @description Related node label in Timeline UIUtils of the Performance panel
-   */
-  layerRoot: 'Layer root',
-  /**
-   * @description Related node label in Timeline UIUtils of the Performance panel
-   */
-  ownerElement: 'Owner element',
-  /**
-   * @description Text used to show the user the URL of the image they are viewing.
-   */
-  imageUrl: 'Image URL',
-  /**
-   * @description Text used to show the user that the URL they are viewing is loading a CSS stylesheet.
-   */
-  stylesheetUrl: 'Stylesheet URL',
-  /**
-   * @description Text used next to a number to show the user how many elements were affected.
-   */
-  elementsAffected: 'Elements affected',
-  /**
-   * @description Text used next to a number to show the user how many nodes required the browser to update and re-layout the page.
-   */
-  nodesThatNeedLayout: 'Nodes that need layout',
-  /**
-   * @description Text used to show the amount in a subset - e.g. "2 of 10".
-   * @example {2} PH1
-   * @example {10} PH2
-   */
-  sOfS: '{PH1} of {PH2}',
-  /**
-   * @description Related node label in Timeline UIUtils of the Performance panel
-   */
-  layoutRoot: 'Layout root',
-  /**
-   * @description Text used when viewing an event that can have a custom message attached.
-   */
-  message: 'Message',
-  /**
-   * @description Text used to tell the user they are viewing an event that has a function embedded in it, which is referred to as the "callback function".
-   */
-  callbackFunction: 'Callback function',
-  /**
-   * @description Text used to show the relevant range of a file - e.g. "lines 2-10".
-   */
-  range: 'Range',
-  /**
-   * @description Text used to refer to the amount of time some event or code was given to complete within.
-   */
-  allottedTime: 'Allotted time',
-  /**
-   * @description Text used to tell a user that a particular event or function was automatically run by a timeout.
-   */
-  invokedByTimeout: 'Invoked by timeout',
-  /**
-   * @description Text that refers to some types
-   */
-  type: 'Type',
-  /**
-   * @description Text for the size of something
-   */
-  size: 'Size',
-  /**
-   * @description Text for the details of something
-   */
-  details: 'Details',
-  /**
-   * @description Text to indicate an item is a warning
-   */
-  warning: 'Warning',
-  /**
-   * @description Text that indicates a particular HTML element or node is related to what the user is viewing.
-   */
-  relatedNode: 'Related node',
-  /**
-   * @description Text for previewing items
-   */
-  preview: 'Preview',
-  /**
-   * @description Text used to refer to the total time summed up across multiple events.
-   */
-  aggregatedTime: 'Aggregated time',
-  /**
-   * @description Text for the duration of something
-   */
-  duration: 'Duration',
-  /**
-   * @description Text for the stack trace of the initiator of something. The Initiator is the event or factor that directly triggered or precipitated a subsequent action.
-   */
-  initiatorStackTrace: 'Initiator stack trace',
-  /**
-   * @description Text for the event initiated by another one
-   */
-  initiatedBy: 'Initiated by',
-  /**
-   * @description Text for the event that is an initiator for another one
-   */
-  initiatorFor: 'Initiator for',
-  /**
-   * @description Text for the underlying data behing a specific flamechart selection. Trace events are the browser instrumentation that are emitted as JSON objects.
-   */
-  traceEvent: 'Trace event',
-  /**
-   * @description Call site stack label in Timeline UIUtils of the Performance panel
-   */
-  timerInstalled: 'Timer installed',
-  /**
-   * @description Call site stack label in Timeline UIUtils of the Performance panel
-   */
-  animationFrameRequested: 'Animation frame requested',
-  /**
-   * @description Call site stack label in Timeline UIUtils of the Performance panel
-   */
-  idleCallbackRequested: 'Idle callback requested',
-  /**
-   * @description Stack label in Timeline UIUtils of the Performance panel
-   */
-  recalculationForced: 'Recalculation forced',
-  /**
-   * @description Call site stack label in Timeline UIUtils of the Performance panel
-   */
-  firstLayoutInvalidation: 'First layout invalidation',
-  /**
-   * @description Stack label in Timeline UIUtils of the Performance panel
-   */
-  layoutForced: 'Layout forced',
-  /**
-   * @description Label in front of CSS property (eg `opacity`) being animated or a CSS animation name (eg `layer-4-fade-in-out`)
-   */
-  animating: 'Animating',
-  /**
-   * @description Label in front of reasons why a CSS animation wasn't composited (aka hardware accelerated)
-   */
-  compositingFailed: 'Compositing failed',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to accelerated animations being disabled. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedAcceleratedAnimationsDisabled: 'Accelerated animations disabled',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to DevTools suppressing the effect. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedEffectSuppressedByDevtools: 'Effect suppressed by DevTools ',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the animation or effect being invalid. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedInvalidAnimationOrEffect: 'Invalid animation or effect',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an effect having unsupported timing parameters. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedEffectHasUnsupportedTimingParams: 'Effect has unsupported timing parameters',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an effect having a composite mode which is not `replace`. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedEffectHasNonReplaceCompositeMode: 'Effect has composite mode other than "replace"',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the target being in an invalid compositing state. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedTargetHasInvalidCompositingState: 'Target has invalid compositing state',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to another animation on the same target being incompatible. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedTargetHasIncompatibleAnimations: 'Target has another animation which is incompatible',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the target having a CSS offset. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedTargetHasCSSOffset: 'Target has CSS offset',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the animation affecting non-CSS properties. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedAnimationAffectsNonCSSProperties: 'Animation affects non-CSS properties',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the transform-related property not being able to be animated on the target. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedTransformRelatedPropertyCannotBeAcceleratedOnTarget:
-      'Transform-related property cannot be accelerated on target',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to a `transform` property being dependent on the size of the element itself. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedTransformDependsBoxSize: 'Transform-related property depends on box size',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to a `filter` property possibly moving pixels. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedFilterRelatedPropertyMayMovePixels: 'Filter-related property may move pixels',
-  /**
-   * @description [ICU Syntax] Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the animated CSS property not being supported on the compositor. Shown in a table with a list of other potential failure reasons.
-   * @example {height, width} properties
-   */
-  compositingFailedUnsupportedCSSProperty: `{propertyCount, plural,
-    =1 {Unsupported CSS property: {properties}}
-    other {Unsupported CSS properties: {properties}}
-  }`,
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to mixing keyframe value types. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedMixedKeyframeValueTypes: 'Mixed keyframe value types',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the timeline source being in an invalid compositing state. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedTimelineSourceHasInvalidCompositingState: 'Timeline source has invalid compositing state',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the animation having no visible change. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedAnimationHasNoVisibleChange: 'Animation has no visible change',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an effect affecting an important property. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedAffectsImportantProperty: 'Effect affects a property with !important',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the SVG target having an independent transfrom property. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedSVGTargetHasIndependentTransformProperty: 'SVG target has independent transform property',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an unknown reason. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedUnknownReason: 'Unknown Reason',
-
-  /**
-   * @description Text for the execution "stack trace". It is not technically a stack trace, because it points to the beginning of each function
-   * and not to each call site, so we call it a function stack instead to avoid confusion.
-   */
-  functionStack: 'Function stack',
-  /**
-   * @description Text used to show any invalidations for a particular event that caused the browser to have to do more work to update the page.
-   * @example {2} PH1
-   */
-  invalidations: 'Invalidations ({PH1} total)',
-  /**
-   * @description Text in Timeline UIUtils of the Performance panel. Phrase is followed by a number of milliseconds.
-   * Some events or tasks might have been only started, but have not ended yet. Such events or tasks are considered
-   * "pending".
-   */
-  pendingFor: 'Pending for',
-  /**
-   * @description Noun label for a stack trace which indicates the first time some condition was invalidated.
-   */
-  firstInvalidated: 'First invalidated',
-  /**
-   * @description Title of the paint profiler, old name of the performance pane
-   */
-  paintProfiler: 'Paint profiler',
-  /**
-   * @description Text in Timeline Flame Chart View of the Performance panel
-   * @example {Frame} PH1
-   * @example {10ms} PH2
-   */
-  sAtS: '{PH1} at {PH2}',
-  /**
-   * @description Text used next to a time to indicate that the particular event took that much time itself. In context this might look like "3ms blink.console (self)"
-   * @example {blink.console} PH1
-   */
-  sSelf: '{PH1} (self)',
-  /**
-   * @description Text used next to a time to indicate that the event's children took that much time. In context this might look like "3ms blink.console (children)"
-   * @example {blink.console} PH1
-   */
-  sChildren: '{PH1} (children)',
-  /**
-   * @description Text used to show the user how much time the browser spent on rendering (drawing the page onto the screen).
-   */
-  timeSpentInRendering: 'Time spent in rendering',
-  /**
-   * @description Text for a rendering frame
-   */
-  frame: 'Frame',
-  /**
-   * @description Text used to refer to the duration of an event at a given offset - e.g. "2ms at 10ms" which can be read as "2ms starting after 10ms".
-   * @example {10ms} PH1
-   * @example {10ms} PH2
-   */
-  sAtSParentheses: '{PH1} (at {PH2})',
-  /**
-   * @description Text of a DOM element in Timeline UIUtils of the Performance panel
-   */
-  UnknownNode: '[ unknown node ]',
-  /**
-   * @description Text used to refer to a particular element and the file it was referred to in.
-   * @example {node} PH1
-   * @example {app.js} PH2
-   */
-  invalidationWithCallFrame: '{PH1} at {PH2}',
-  /**
-   * @description Text indicating that something is outside of the Performace Panel Timeline Minimap range
-   */
-  outsideBreadcrumbRange: '(outside of the breadcrumb range)',
-  /**
-   * @description Text indicating that something is hidden from the Performace Panel Timeline
-   */
-  entryIsHidden: '(entry is hidden)',
-  /**
-   * @description Title of a row in the details view for a `Recalculate Styles` event that contains more info about selector stats tracing.
-   */
-  selectorStatsTitle: 'Selector stats',
-  /**
-   * @description Info text that explains to the user how to enable selector stats tracing.
-   * @example {Setting Name} PH1
-   */
-  sSelectorStatsInfo: 'Select "{PH1}" to collect detailed CSS selector matching statistics.',
-  /**
-   * @description Label for a numeric value that was how long to wait before a function was run.
-   */
-  delay: 'Delay',
-  /**
-   * @description Label for a string that describes the priority at which a task was scheduled, like 'background' for low-priority tasks, and 'user-blocking' for high priority.
-   */
-  priority: 'Priority',
-  /**
-   * @description Label for third party table.
-   */
-  thirdPartyTable: '1st / 3rd party table',
-  /**
-   * @description Label for the a source URL.
-   */
-  source: 'Source',
-  /**
-   * @description Label for a URL origin.
-   */
-  origin: 'Origin',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineUIUtils.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-/** Look for scheme:// plus text and exclude any punctuation at the end. **/
-export const URL_REGEX = /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/)[^\s"]{2,}[^\s"'\)\}\],:;.!?]/u;
-
-let eventDispatchDesciptors: EventDispatchTypeDescriptor[];
-
-let colorGenerator: Common.Color.Generator;
-
-type TimeRangeCategoryStats = Record<string, number>;
-
-const {SamplesIntegrator} = Trace.Helpers.SamplesIntegrator;
-
-export class TimelineUIUtils {
-  /**
-   * use getGetDebugModeEnabled() to query this variable.
-   */
-  static debugModeEnabled: boolean|undefined = undefined;
-  static getGetDebugModeEnabled(): boolean {
-    if (TimelineUIUtils.debugModeEnabled === undefined) {
-      TimelineUIUtils.debugModeEnabled =
-          Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE);
-    }
-    return TimelineUIUtils.debugModeEnabled;
-  }
-  static frameDisplayName(frame: Protocol.Runtime.CallFrame): string {
-    const maybeResolvedData = SourceMapsResolver.SourceMapsResolver.resolvedCodeLocationForCallFrame(frame);
-    const functionName = maybeResolvedData?.name || frame.functionName;
-    const nativeGroup = SamplesIntegrator.nativeGroup(functionName);
-    switch (nativeGroup) {
-      case SamplesIntegrator.NativeGroups.COMPILE:
-        return i18nString(UIStrings.compile);
-      case SamplesIntegrator.NativeGroups.PARSE:
-        return i18nString(UIStrings.parse);
-    }
-    return functionName;
-  }
-
-  static testContentMatching(
-      traceEvent: Trace.Types.Events.Event, regExp: RegExp, handlerData?: Trace.Handlers.Types.HandlerData): boolean {
-    const title = TimelineUIUtils.eventStyle(traceEvent).title;
-    const tokens = [title];
-
-    if (Trace.Types.Events.isProfileCall(traceEvent)) {
-      // In the future this case will not be possible - wherever we call this
-      // function we will be able to pass in the data from the new engine. But
-      // currently this is called in a variety of places including from the
-      // legacy model which does not have a reference to the new engine's data.
-      // So if we are missing the data, we just fallback to the name from the
-      // callFrame.
-      if (!handlerData?.Samples) {
-        tokens.push(traceEvent.callFrame.functionName);
-      } else {
-        tokens.push(Trace.Handlers.ModelHandlers.Samples.getProfileCallFunctionName(handlerData.Samples, traceEvent));
-      }
-    }
-    if (handlerData) {
-      const url = Trace.Handlers.Helpers.getNonResolvedURL(traceEvent, handlerData);
-      if (url) {
-        tokens.push(url);
-      }
-    }
-    if (TimelineUIUtils.getGetDebugModeEnabled()) {
-      // When in debug mode append top level properties (like timestamp)
-      // and deeply nested properties.
-      appendObjectProperties(traceEvent as unknown as ContentObject, 4);
-    } else {
-      appendObjectProperties(traceEvent.args as ContentObject, 2);
-    }
-    const result = tokens.join('|').match(regExp);
-    return result ? result.length > 0 : false;
-
-    interface ContentObject {
-      [x: string]: number|string|ContentObject;
-    }
-    function appendObjectProperties(object: ContentObject, depth: number): void {
-      if (!depth) {
-        return;
-      }
-      for (const key in object) {
-        const value = object[key];
-        if (typeof value === 'string') {
-          tokens.push(value);
-        } else if (typeof value === 'number') {
-          tokens.push(String(value));
-        } else if (typeof value === 'object' && value !== null) {
-          appendObjectProperties(value, depth - 1);
-        }
-      }
-    }
-  }
-
-  static eventStyle(event: Trace.Types.Events.Event): Trace.Styles.TimelineRecordStyle {
-    if (Trace.Types.Events.isProfileCall(event) && event.callFrame.functionName === '(idle)') {
-      return new Trace.Styles.TimelineRecordStyle(event.name, Trace.Styles.getCategoryStyles().idle);
-    }
-
-    if (event.cat === Trace.Types.Events.Categories.Console || event.cat === Trace.Types.Events.Categories.UserTiming) {
-      return new Trace.Styles.TimelineRecordStyle(event.name, Trace.Styles.getCategoryStyles()['scripting']);
-    }
-
-    return Trace.Styles.getEventStyle(event.name as Trace.Types.Events.Name) ??
-        new Trace.Styles.TimelineRecordStyle(event.name, Trace.Styles.getCategoryStyles().other);
-  }
-
-  static eventColor(event: Trace.Types.Events.Event): string {
-    if (Trace.Types.Events.isProfileCall(event)) {
-      const frame = event.callFrame;
-      if (TimelineUIUtils.isUserFrame(frame)) {
-        // TODO(andoli): This should use the resolved (sourcemapped) URL
-        return TimelineUIUtils.colorForId(frame.url);
-      }
-    }
-    if (Trace.Types.Extensions.isSyntheticExtensionEntry(event)) {
-      return Extensions.ExtensionUI.extensionEntryColor(event);
-    }
-    const themeSupport = ThemeSupport.ThemeSupport.instance();
-    let parsedColor = themeSupport.getComputedValue(TimelineUIUtils.eventStyle(event).category.cssVariable);
-    // This event is considered idle time but still rendered as a scripting event here
-    // to connect the StreamingCompileScriptParsing events it belongs to.
-    if (event.name === Trace.Types.Events.Name.STREAMING_COMPILE_SCRIPT_WAITING) {
-      parsedColor = themeSupport.getComputedValue(Trace.Styles.getCategoryStyles().scripting.cssVariable);
-      if (!parsedColor) {
-        throw new Error('Unable to parse color from getCategoryStyles().scripting.color');
-      }
-    }
-    return parsedColor;
-  }
-
-  static eventTitle(event: Trace.Types.Events.Event): string {
-    // Profile call events do not have a args.data property, thus, we
-    // need to check for profile calls in the beginning of this
-    // function.
-    if (Trace.Types.Events.isProfileCall(event)) {
-      const maybeResolvedData = SourceMapsResolver.SourceMapsResolver.resolvedCodeLocationForEntry(event);
-      const displayName = maybeResolvedData?.name || TimelineUIUtils.frameDisplayName(event.callFrame);
-      return displayName;
-    }
-    if (event.name === 'EventTiming' && Trace.Types.Events.isSyntheticInteraction(event)) {
-      // TODO(crbug.com/365047728): replace this entire method with this call.
-      return Trace.Name.forEntry(event);
-    }
-    const title = TimelineUIUtils.eventStyle(event).title;
-    if (Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.Console)) {
-      return title;
-    }
-    if (Trace.Types.Events.isConsoleTimeStamp(event) && event.args.data) {
-      return i18nString(UIStrings.sS, {PH1: title, PH2: event.args.data.name ?? event.args.data.message});
-    }
-    if (Trace.Types.Events.isAnimation(event) && event.args.data.name) {
-      return i18nString(UIStrings.sS, {PH1: title, PH2: event.args.data.name});
-    }
-    if (Trace.Types.Events.isDispatch(event)) {
-      return i18nString(UIStrings.sS, {PH1: title, PH2: event.args.data.type});
-    }
-    return title;
-  }
-
-  static isUserFrame(frame: Protocol.Runtime.CallFrame): boolean {
-    return frame.scriptId !== '0' && !(frame.url?.startsWith('native '));
-  }
-
-  static statsForTimeRange(
-      events: Trace.Types.Events.Event[], startTime: Trace.Types.Timing.Milli,
-      endTime: Trace.Types.Timing.Milli): TimeRangeCategoryStats {
-    if (!events.length) {
-      return {idle: endTime - startTime};
-    }
-
-    buildRangeStatsCacheIfNeeded(events);
-    const aggregatedStats = subtractStats(aggregatedStatsAtTime(endTime), aggregatedStatsAtTime(startTime));
-    const aggregatedTotal = Object.values(aggregatedStats).reduce((a, b) => a + b, 0);
-    aggregatedStats['idle'] = Math.max(0, endTime - startTime - aggregatedTotal);
-    return aggregatedStats;
-
-    function aggregatedStatsAtTime(time: number): TimeRangeCategoryStats {
-      const stats: TimeRangeCategoryStats = {};
-      // @ts-expect-error TODO(crbug.com/1011811): Remove symbol usage.
-      const cache = events[categoryBreakdownCacheSymbol];
-      for (const category in cache) {
-        const categoryCache = cache[category];
-        const index =
-            Platform.ArrayUtilities.upperBound(categoryCache.time, time, Platform.ArrayUtilities.DEFAULT_COMPARATOR);
-        let value;
-        if (index === 0) {
-          value = 0;
-        } else if (index === categoryCache.time.length) {
-          value = categoryCache.value[categoryCache.value.length - 1];
-        } else {
-          const t0 = categoryCache.time[index - 1];
-          const t1 = categoryCache.time[index];
-          const v0 = categoryCache.value[index - 1];
-          const v1 = categoryCache.value[index];
-          value = v0 + (v1 - v0) * (time - t0) / (t1 - t0);
-        }
-        stats[category] = value;
-      }
-      return stats;
-    }
-
-    function subtractStats(a: TimeRangeCategoryStats, b: TimeRangeCategoryStats): TimeRangeCategoryStats {
-      const result = Object.assign({}, a);
-      for (const key in b) {
-        result[key] -= b[key];
-      }
-      return result;
-    }
-
-    function buildRangeStatsCacheIfNeeded(events: Trace.Types.Events.Event[]): void {
-      // @ts-expect-error TODO(crbug.com/1011811): Remove symbol usage.
-      if (events[categoryBreakdownCacheSymbol]) {
-        return;
-      }
-
-      // aggregatedStats is a map by categories. For each category there's an array
-      // containing sorted time points which records accumulated value of the category.
-      const aggregatedStats: Record<string, {
-        time: number[],
-        value: number[],
-      }> = {};
-      const categoryStack: string[] = [];
-      let lastTime = 0;
-      Trace.Helpers.Trace.forEachEvent(events, {
-        onStartEvent,
-        onEndEvent,
-      });
-
-      function updateCategory(category: string, time: number): void {
-        let statsArrays: {
-          time: number[],
-          value: number[],
-        } = aggregatedStats[category];
-        if (!statsArrays) {
-          statsArrays = {time: [], value: []};
-          aggregatedStats[category] = statsArrays;
-        }
-        if (statsArrays.time.length && statsArrays.time[statsArrays.time.length - 1] === time || lastTime > time) {
-          return;
-        }
-        const lastValue = statsArrays.value.length > 0 ? statsArrays.value[statsArrays.value.length - 1] : 0;
-        statsArrays.value.push(lastValue + time - lastTime);
-        statsArrays.time.push(time);
-      }
-
-      function categoryChange(from: string|null, to: string|null, time: number): void {
-        if (from) {
-          updateCategory(from, time);
-        }
-        lastTime = time;
-        if (to) {
-          updateCategory(to, time);
-        }
-      }
-
-      function onStartEvent(e: Trace.Types.Events.Event): void {
-        const {startTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(e);
-        const category = Trace.Styles.getEventStyle(e.name as Trace.Types.Events.Name)?.category.name ||
-            Trace.Styles.getCategoryStyles().other.name;
-        const parentCategory = categoryStack.length ? categoryStack[categoryStack.length - 1] : null;
-        if (category !== parentCategory) {
-          categoryChange(parentCategory || null, category, startTime);
-        }
-        categoryStack.push(category);
-      }
-
-      function onEndEvent(e: Trace.Types.Events.Event): void {
-        const {endTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(e);
-        const category = categoryStack.pop();
-        const parentCategory = categoryStack.length ? categoryStack[categoryStack.length - 1] : null;
-        if (category !== parentCategory) {
-          categoryChange(category || null, parentCategory || null, endTime || 0);
-        }
-      }
-
-      const obj = (events as Object);
-      // @ts-expect-error TODO(crbug.com/1011811): Remove symbol usage.
-      obj[categoryBreakdownCacheSymbol] = aggregatedStats;
-    }
-  }
-
-  /** 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,
-      event: Trace.Types.Events.Event): boolean {
-    const node = parsedTrace.data.Renderer.entryToNode.get(event);
-    if (!node) {
-      return false;
-    }
-
-    // If the event has no children, we cannot calculate a pie chart.
-    if (node.children.length === 0) {
-      return false;
-    }
-
-    const childNodesToVisit: Trace.Helpers.TreeHelpers.TraceEntryNode[] = [...node.children];
-
-    while (childNodesToVisit.length) {
-      // Traversal order doesn't matter, pop() is more efficient than shift().
-      const childNode = childNodesToVisit.pop();
-      if (!childNode) {
-        continue;
-      }
-      const childSelfTime = childNode.selfTime ?? 0;
-      if (childSelfTime > 0) {
-        const categoryName = TimelineUIUtils.eventStyle(childNode.entry).category.name;
-        total[categoryName] = (total[categoryName] || 0) + childSelfTime;
-      }
-
-      childNodesToVisit.push(...childNode.children);
-    }
-
-    if (Trace.Types.Events.isPhaseAsync(event.ph)) {
-      let aggregatedTotal = 0;
-      for (const categoryName in total) {
-        aggregatedTotal += total[categoryName];
-      }
-
-      const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMicroSeconds(event);
-      const deltaInMicro = (endTime - startTime) as Trace.Types.Timing.Micro;
-      total['idle'] = Math.max(0, deltaInMicro - aggregatedTotal);
-      return false;
-    }
-
-    for (const categoryName in total) {
-      const value = total[categoryName] as Trace.Types.Timing.Micro;
-      // Up until now we've kept the math all in micro integers. Finally switch these sums to milli.
-      total[categoryName] = Trace.Helpers.Timing.microToMilli(value);
-    }
-
-    return true;
-  }
-
-  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);
-    const style = TimelineUIUtils.markerStyleForEvent(event);
-    if (style.tall) {
-      eventDivider.style.backgroundColor = style.color;
-    }
-    return eventDivider;
-  }
-
-  static visibleEventsFilter(): Trace.Extras.TraceFilter.TraceFilter {
-    return new Trace.Extras.TraceFilter.VisibleEventsFilter(Trace.Styles.visibleTypes());
-  }
-
-  // Included only for layout tests.
-  // TODO(crbug.com/1386091): Fix/port layout tests and remove.
-  static categories(): Trace.Styles.CategoryPalette {
-    return Trace.Styles.getCategoryStyles();
-  }
-
-  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));
-
-    const durationText = i18nString(UIStrings.sAtSParentheses, {
-      PH1: i18n.TimeUtilities.millisToString(durationMilli, true),
-      PH2: i18n.TimeUtilities.millisToString(offsetMilli, true),
-    });
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.emptyPlaceholder, {PH1: durationText});
-  }
-
-  static quadWidth(quad: number[]): number {
-    return Math.round(Math.sqrt(Math.pow(quad[0] - quad[2], 2) + Math.pow(quad[1] - quad[3], 2)));
-  }
-
-  static quadHeight(quad: number[]): number {
-    return Math.round(Math.sqrt(Math.pow(quad[0] - quad[6], 2) + Math.pow(quad[1] - quad[7], 2)));
-  }
-
-  static eventDispatchDesciptors(): EventDispatchTypeDescriptor[] {
-    if (eventDispatchDesciptors) {
-      return eventDispatchDesciptors;
-    }
-    const lightOrange = 'hsl(40,100%,80%)';
-    const orange = 'hsl(40,100%,50%)';
-    const green = 'hsl(90,100%,40%)';
-    const purple = 'hsl(256,100%,75%)';
-    eventDispatchDesciptors = [
-      new EventDispatchTypeDescriptor(
-          1, lightOrange, ['mousemove', 'mouseenter', 'mouseleave', 'mouseout', 'mouseover']),
-      new EventDispatchTypeDescriptor(
-          1, lightOrange, ['pointerover', 'pointerout', 'pointerenter', 'pointerleave', 'pointermove']),
-      new EventDispatchTypeDescriptor(2, green, ['wheel']),
-      new EventDispatchTypeDescriptor(3, orange, ['click', 'mousedown', 'mouseup']),
-      new EventDispatchTypeDescriptor(3, orange, ['touchstart', 'touchend', 'touchmove', 'touchcancel']),
-      new EventDispatchTypeDescriptor(
-          3, orange, ['pointerdown', 'pointerup', 'pointercancel', 'gotpointercapture', 'lostpointercapture']),
-      new EventDispatchTypeDescriptor(3, purple, ['keydown', 'keyup', 'keypress']),
-    ];
-    return eventDispatchDesciptors;
-  }
-
-  static markerStyleForEvent(event: Trace.Types.Events.Event): TimelineMarkerStyle {
-    // Note: keep the colors matching that of `markerDetailsForEvent`.
-
-    const tallMarkerDashStyle = [6, 4];
-    const title = TimelineUIUtils.eventTitle(event);
-
-    if (event.name !== Trace.Types.Events.Name.NAVIGATION_START &&
-        (Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.Console) ||
-         Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.UserTiming))) {
-      return {
-        title,
-        dashStyle: tallMarkerDashStyle,
-        lineWidth: 0.5,
-        color: Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.Console) ? 'purple' : 'orange',
-        tall: false,
-        lowPriority: false,
-      };
-    }
-    let tall = false;
-    let color = 'grey';
-    switch (event.name) {
-      case Trace.Types.Events.Name.NAVIGATION_START:
-        color = 'var(--color-text-primary)';
-        tall = true;
-        break;
-      case Trace.Types.Events.Name.FRAME_STARTED_LOADING:
-        color = 'green';
-        tall = true;
-        break;
-      case Trace.Types.Events.Name.MARK_DOM_CONTENT:
-        color = 'var(--color-text-disabled)';
-        tall = true;
-        break;
-      case Trace.Types.Events.Name.MARK_LOAD:
-        color = 'var(--color-text-disabled)';
-        tall = true;
-        break;
-      case Trace.Types.Events.Name.MARK_FIRST_PAINT:
-        color = '#228847';
-        tall = true;
-        break;
-      case Trace.Types.Events.Name.MARK_FCP:
-        color = 'var(--sys-color-green-bright)';
-        tall = true;
-        break;
-      case Trace.Types.Events.Name.MARK_LCP_CANDIDATE:
-        color = 'var(--sys-color-green)';
-        tall = true;
-        break;
-      case Trace.Types.Events.Name.TIME_STAMP:
-        color = 'orange';
-        break;
-    }
-    return {
-      title,
-      dashStyle: tallMarkerDashStyle,
-      lineWidth: 0.5,
-      color,
-      tall,
-      lowPriority: false,
-    };
-  }
-
-  static colorForId(id: string): string {
-    if (!colorGenerator) {
-      colorGenerator =
-          new Common.Color.Generator({min: 30, max: 330, count: undefined}, {min: 50, max: 80, count: 3}, 85);
-      colorGenerator.setColorForID('', '#f2ecdc');
-    }
-    return colorGenerator.colorForID(id);
-  }
-
-  static displayNameForFrame(frame: Trace.Types.Events.TraceFrame, trimAt = 80): string {
-    const url = frame.url as Platform.DevToolsPath.UrlString;
-    return Common.ParsedURL.schemeIs(url, 'about:') ? `"${Platform.StringUtilities.trimMiddle(frame.name, trimAt)}"` :
-                                                      frame.url.slice(0, trimAt);
-  }
-}
-
-export const aggregatedStatsKey = Symbol('aggregatedStats');
-
-export const previewElementSymbol = Symbol('previewElement');
-
-export class EventDispatchTypeDescriptor {
-  priority: number;
-  color: string;
-  eventTypes: string[];
-
-  constructor(priority: number, color: string, eventTypes: string[]) {
-    this.priority = priority;
-    this.color = color;
-    this.eventTypes = eventTypes;
-  }
-}
-
-export const categoryBreakdownCacheSymbol = Symbol('categoryBreakdownCache');
-export interface TimelineMarkerStyle {
-  title: string;
-  color: string;
-  lineWidth: number;
-  dashStyle: number[];
-  tall: boolean;
-  lowPriority: boolean;
-}
-
-/**
- * Given a particular event, this method can adjust its timestamp by
- * substracting the timestamp of the previous navigation. This helps in cases
- * where the user has navigated multiple times in the trace, so that we can show
- * the LCP (for example) relative to the last navigation.
- **/
-export function timeStampForEventAdjustedForClosestNavigationIfPossible(
-    event: Trace.Types.Events.Event, parsedTrace: Trace.TraceModel.ParsedTrace|null): Trace.Types.Timing.Milli {
-  if (!parsedTrace) {
-    const {startTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);
-    return startTime;
-  }
-
-  const time = Trace.Helpers.Timing.timeStampForEventAdjustedByClosestNavigation(
-      event,
-      parsedTrace.data.Meta.traceBounds,
-      parsedTrace.data.Meta.navigationsByNavigationId,
-      parsedTrace.data.Meta.navigationsByFrameId,
-  );
-  return Trace.Helpers.Timing.microToMilli(time);
-}
-
-/**
- * Determines if an event is potentially a marker event. A marker event here
- * is a single moment in time that we want to highlight on the timeline, such as
- * the LCP time. This method does not filter out events: for example, it treats
- * every LCP Candidate event as a potential marker event.
- **/
-export function isMarkerEvent(parsedTrace: Trace.TraceModel.ParsedTrace, event: Trace.Types.Events.Event): boolean {
-  const {Name} = Trace.Types.Events;
-
-  if (event.name === Name.TIME_STAMP || event.name === Name.NAVIGATION_START) {
-    return true;
-  }
-
-  if (Trace.Types.Events.isFirstContentfulPaint(event) || Trace.Types.Events.isFirstPaint(event)) {
-    return event.args.frame === parsedTrace.data.Meta.mainFrameId;
-  }
-
-  if (Trace.Types.Events.isMarkDOMContent(event) || Trace.Types.Events.isMarkLoad(event) ||
-      Trace.Types.Events.isLargestContentfulPaintCandidate(event)) {
-    // isOutermostMainFrame was added in 2022, so we fallback to isMainFrame
-    // for older traces.
-    if (!event.args.data) {
-      return false;
-    }
-    const {isOutermostMainFrame, isMainFrame} = event.args.data;
-    if (typeof isOutermostMainFrame !== 'undefined') {
-      // If isOutermostMainFrame is defined we want to use that and not
-      // fallback to isMainFrame, even if isOutermostMainFrame is false. Hence
-      // this check.
-      return isOutermostMainFrame;
-    }
-    return Boolean(isMainFrame);
-  }
-
-  return false;
-}
-
-function getEventSelfTime(
-    event: Trace.Types.Events.Event, parsedTrace: Trace.TraceModel.ParsedTrace): Trace.Types.Timing.Micro {
-  const mapToUse = Trace.Types.Extensions.isSyntheticExtensionEntry(event) ?
-      parsedTrace.data.ExtensionTraceData.entryToNode :
-      parsedTrace.data.Renderer.entryToNode;
-  const selfTime = mapToUse.get(event)?.selfTime;
-  return selfTime ? selfTime : Trace.Types.Timing.Micro(0);
-}