devtools-tracing 1.0.0 → 1.1.0

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

@@ -0,0 +1,1029 @@
+// 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);
+}