chrome-devtools-frontend/front_end/timeline/TimelineUIUtils.js

Chrome DevTools UI

/*
 * 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 Bindings from '../bindings/bindings.js';
import * as Common from '../common/common.js';
import * as Components from '../components/components.js';
import * as i18n from '../i18n/i18n.js';
import * as PerfUI from '../perf_ui/perf_ui.js';
import * as Platform from '../platform/platform.js';
import * as SDK from '../sdk/sdk.js';
import * as TimelineModel from '../timeline_model/timeline_model.js';
import * as UI from '../ui/ui.js';

import {CLSRect} from './CLSLinkifier.js';
import {TimelinePanel, TimelineSelection} from './TimelinePanel.js';

export const UIStrings = {
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {node1} PH1
  *@example {node2} PH2
  */
  sAndS: '{PH1} and {PH2}',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {node1} PH1
  *@example {node2} PH2
  */
  sAndSOther: '{PH1}, {PH2}, and 1 other',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  task: 'Task',
  /**
  *@description Text for other types of items
  */
  other: 'Other',
  /**
  *@description Text that refers to the animation of the web page
  */
  animation: 'Animation',
  /**
  *@description Text that refers to some events
  */
  event: 'Event',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  requestMainThreadFrame: 'Request Main Thread Frame',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  frameStart: 'Frame Start',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  frameStartMainThread: 'Frame Start (main thread)',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  drawFrame: 'Draw Frame',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  hitTest: 'Hit Test',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  scheduleStyleRecalculation: 'Schedule Style Recalculation',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  recalculateStyle: 'Recalculate Style',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  invalidateLayout: 'Invalidate Layout',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  layout: 'Layout',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  paintSetup: 'Paint Setup',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  paintImage: 'Paint Image',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  updateLayer: 'Update Layer',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  updateLayerTree: 'Update Layer Tree',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  paint: 'Paint',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  rasterizePaint: 'Rasterize Paint',
  /**
  *@description The action to scroll
  */
  scroll: 'Scroll',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  compositeLayers: 'Composite Layers',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  parseHtml: 'Parse HTML',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  parseStylesheet: 'Parse Stylesheet',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  installTimer: 'Install Timer',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  removeTimer: 'Remove Timer',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  timerFired: 'Timer Fired',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  xhrReadyStateChange: 'XHR Ready State Change',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  xhrLoad: 'XHR Load',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  compileScript: 'Compile Script',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  evaluateScript: 'Evaluate Script',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  compileModule: 'Compile Module',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  evaluateModule: 'Evaluate Module',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  streamingCompileTask: 'Streaming Compile Task',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  waitingForNetwork: 'Waiting for Network',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  parseAndCompile: 'Parse and Compile',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  streamingWasmResponse: 'Streaming Wasm Response',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  compiledWasmModule: 'Compiled Wasm Module',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  cachedWasmModule: 'Cached Wasm Module',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  wasmModuleCacheHit: 'Wasm Module Cache Hit',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  wasmModuleCacheInvalid: 'Wasm Module Cache Invalid',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  frameStartedLoading: 'Frame Started Loading',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  onloadEvent: 'Onload Event',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  domcontentloadedEvent: 'DOMContentLoaded Event',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  firstPaint: 'First Paint',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  firstContentfulPaint: 'First Contentful Paint',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  largestContentfulPaint: 'Largest Contentful Paint',
  /**
  *@description Text for timestamps of items
  */
  timestamp: 'Timestamp',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  consoleTime: 'Console Time',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  userTiming: 'User Timing',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  willSendRequest: 'Will Send Request',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  sendRequest: 'Send Request',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  receiveResponse: 'Receive Response',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  finishLoading: 'Finish Loading',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  receiveData: 'Receive Data',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  runMicrotasks: 'Run Microtasks',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  functionCall: 'Function Call',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  gcEvent: 'GC Event',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  majorGc: 'Major GC',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  minorGc: 'Minor GC',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  jsFrame: 'JS Frame',
  /**
  *@description Text for the request animation frame event
  */
  requestAnimationFrame: 'Request Animation Frame',
  /**
  *@description Text to cancel the animation frame
  */
  cancelAnimationFrame: 'Cancel Animation Frame',
  /**
  *@description Text for the event that an animation frame is fired
  */
  animationFrameFired: 'Animation Frame Fired',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  requestIdleCallback: 'Request Idle Callback',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  cancelIdleCallback: 'Cancel Idle Callback',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  fireIdleCallback: 'Fire Idle Callback',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  createWebsocket: 'Create WebSocket',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  sendWebsocketHandshake: 'Send WebSocket Handshake',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  receiveWebsocketHandshake: 'Receive WebSocket Handshake',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  destroyWebsocket: 'Destroy WebSocket',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  embedderCallback: 'Embedder Callback',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  imageDecode: 'Image Decode',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  imageResize: 'Image Resize',
  /**
  *@description Text in Timeline Flame Chart Data Provider of the Performance panel
  */
  gpu: 'GPU',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  inputLatency: 'Input Latency',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  domGc: 'DOM GC',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  encrypt: 'Encrypt',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  encryptReply: 'Encrypt Reply',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  decrypt: 'Decrypt',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  decryptReply: 'Decrypt Reply',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  digest: 'Digest',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  digestReply: 'Digest Reply',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  sign: 'Sign',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  signReply: 'Sign Reply',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  verify: 'Verify',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  verifyReply: 'Verify Reply',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  asyncTask: 'Async Task',
  /**
  *@description Text in Timeline for Layout Shift records
  */
  layoutShift: 'Layout Shift',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  keyCharacter: 'Key Character',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  keyDown: 'Key Down',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  keyUp: 'Key Up',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  click: 'Click',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  contextMenu: 'Context Menu',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  mouseDown: 'Mouse Down',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  mouseMove: 'Mouse Move',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  mouseUp: 'Mouse Up',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  mouseWheel: 'Mouse Wheel',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  scrollBegin: 'Scroll Begin',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  scrollEnd: 'Scroll End',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  scrollUpdate: 'Scroll Update',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  flingStart: 'Fling Start',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  flingHalt: 'Fling Halt',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  tap: 'Tap',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  tapHalt: 'Tap Halt',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  tapBegin: 'Tap Begin',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  tapDown: 'Tap Down',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  touchCancel: 'Touch Cancel',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  touchEnd: 'Touch End',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  touchMove: 'Touch Move',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  touchStart: 'Touch Start',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  pinchBegin: 'Pinch Begin',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  pinchEnd: 'Pinch End',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  pinchUpdate: 'Pinch Update',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  compile: 'Compile',
  /**
  *@description Text to parse something
  */
  parse: 'Parse',
  /**
  *@description Text with two placeholders separated by a colon
  *@example {Node removed} PH1
  *@example {div#id1} PH2
  */
  sS: '{PH1}: {PH2}',
  /**
  *@description Text for a network response
  */
  response: 'Response',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  fling: 'Fling',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  drag: 'Drag',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  uncategorized: 'Uncategorized',
  /**
  *@description Details text in Timeline UIUtils of the Performance panel
  *@example {30 MB} PH1
  */
  sCollected: '{PH1} collected',
  /**
  *@description Details text in Timeline UIUtils of the Performance panel
  *@example {https://example.com} PH1
  *@example {2} PH2
  *@example {4} PH3
  */
  sSs: '{PH1} [{PH2}…{PH3}]',
  /**
  *@description Details text in Timeline UIUtils of the Performance panel
  *@example {https://example.com} PH1
  *@example {2} PH2
  */
  sSSquareBrackets: '{PH1} [{PH2}…]',
  /**
  *@description Text that is usually a hyperlink to more documentation
  */
  learnMore: 'Learn more',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  compilationCacheStatus: 'Compilation cache status',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  scriptSavedToCache: 'script saved to cache',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  compilationCacheSize: 'Compilation cache size',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  scriptLoadedFromCache: 'script loaded from cache',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  failedToLoadScriptFromCache: 'failed to load script from cache',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  scriptNotEligible: 'script not eligible',
  /**
  *@description Text for the total time of something
  */
  totalTime: 'Total Time',
  /**
  *@description Time of a single activity, as opposed to the total time
  */
  selfTime: 'Self Time',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  collected: 'Collected',
  /**
  *@description Text for a programming function
  */
  function: 'Function',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  timerId: 'Timer ID',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  timeout: 'Timeout',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  repeats: 'Repeats',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  callbackId: 'Callback ID',
  /**
  *@description Text that refers to the resources of the web page
  */
  resource: 'Resource',
  /**
  *@description Text that refers to the network request method
  */
  requestMethod: 'Request Method',
  /**
  *@description Status code of an event
  */
  statusCode: 'Status Code',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  mimeTypeCaps: 'MIME Type',
  /**
  *@description Text to show the priority of an item
  */
  priority: 'Priority',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  encodedData: 'Encoded Data',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {2} PH1
  */
  sBytes: '{PH1} Bytes',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  decodedBody: 'Decoded Body',
  /**
  *@description Text for a module, the programming concept
  */
  module: 'Module',
  /**
  *@description Label for a group of JavaScript files
  */
  script: 'Script',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  streamed: 'Streamed',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  url: 'Url',
  /**
  * @description Text in Timeline UIUtils of the Performance panel
  */
  urlCaps: '`URL`',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  producedCacheSize: 'Produced Cache Size',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  consumedCacheSize: 'Consumed Cache Size',
  /**
  *@description Title for a group of cities
  */
  location: 'Location',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {2} PH1
  *@example {2} PH2
  */
  sSCurlyBrackets: '({PH1}, {PH2})',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  dimensions: 'Dimensions',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {2} PH1
  *@example {2} PH2
  */
  sSDimensions: '{PH1} × {PH2}',
  /**
  *@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 in Timeline UIUtils of the Performance panel
  */
  imageUrl: 'Image URL',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  stylesheetUrl: 'Stylesheet URL',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  elementsAffected: 'Elements Affected',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  nodesThatNeedLayout: 'Nodes That Need Layout',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@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 in Timeline UIUtils of the Performance panel
  */
  message: 'Message',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  websocketProtocol: 'WebSocket Protocol',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  callbackFunction: 'Callback Function',
  /**
  *@description The current state of an item
  */
  state: 'State',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  range: 'Range',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  allottedTime: 'Allotted Time',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  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 Title in Timeline for Cumulative Layout Shifts
  */
  cumulativeLayoutShifts: 'Cumulative Layout Shifts',
  /**
  *@description Warning in Timeline that CLS can cause a poor user experience
  *@example {Link to web.dev/metrics} PH1
  */
  sCanResultInPoorUserExperiences: '{PH1} can result in poor user experiences.',
  /**
  *@description Text to indicate an item is a warning
  */
  warning: 'Warning',
  /**
  *@description Title for the Timeline CLS Score
  */
  score: 'Score',
  /**
  *@description Text in Timeline for the cumulative CLS score
  */
  cumulativeScore: 'Cumulative Score',
  /**
  *@description Text in Timeline for whether input happened recently
  */
  hadRecentInput: 'Had recent input',
  /**
  *@description Text in Timeline indicating that input has happened recently
  */
  yes: 'Yes',
  /**
  *@description Text in Timeline indicating that input has not happened recently
  */
  no: 'No',
  /**
  *@description Label for Cumulative Layout records, indicating where they moved from
  */
  movedFrom: 'Moved from',
  /**
  *@description Label for Cumulative Layout records, indicating where they moved to
  */
  movedTo: 'Moved to',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  timeWaitingForMainThread: 'Time Waiting for Main Thread',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  relatedNode: 'Related Node',
  /**
  *@description Text for previewing items
  */
  preview: 'Preview',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  aggregatedTime: 'Aggregated Time',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  networkRequest: 'Network request',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  loadFromCache: 'load from cache',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  networkTransfer: 'network transfer',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {1ms} PH1
  *@example {network transfer} PH2
  *@example {1ms} PH3
  */
  SSSResourceLoading: ' ({PH1} {PH2} + {PH3} resource loading)',
  /**
  *@description Text for the duration of something
  */
  duration: 'Duration',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  mimeType: 'Mime Type',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  FromMemoryCache: ' (from memory cache)',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  FromCache: ' (from cache)',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  FromPush: ' (from push)',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  FromServiceWorker: ' (from `service worker`)',
  /**
  *@description Text for the initiator of something
  */
  initiator: 'Initiator',
  /**
  *@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 Text in Timeline UIUtils of the Performance panel
  */
  callStacks: 'Call Stacks',
  /**
  *@description Text for the execution stack trace
  */
  stackTrace: 'Stack Trace',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  invalidations: 'Invalidations',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  pendingFor: 'Pending for',
  /**
  *@description Text for revealing an item in its destination
  */
  reveal: 'Reveal',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  firstInvalidated: 'First Invalidated',
  /**
  *@description Title in Timeline UIUtils of the Performance panel
  */
  styleInvalidations: 'Style Invalidations',
  /**
  *@description Title in Timeline UIUtils of the Performance panel
  */
  layoutInvalidations: 'Layout Invalidations',
  /**
  *@description Title in Timeline UIUtils of the Performance panel
  */
  otherInvalidations: 'Other Invalidations',
  /**
  *@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 in Timeline UIUtils of the Performance panel
  */
  loading: 'Loading',
  /**
  *@description Text in Timeline for the Experience title
  */
  experience: 'Experience',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  scripting: 'Scripting',
  /**
  *@description Title of the Rendering tool
  */
  rendering: 'Rendering',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  painting: 'Painting',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  async: 'Async',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  system: 'System',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  idle: 'Idle',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {blink.console} PH1
  */
  sSelf: '{PH1} (self)',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {blink.console} PH1
  */
  sChildren: '{PH1} (children)',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  timeSpentInRendering: 'Time spent in rendering',
  /**
  *@description Text for a rendering frame
  */
  frame: 'Frame',
  /**
  *@description Text in Timeline Event Overview of the Performance panel
  */
  fps: 'FPS',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  cpuTime: 'CPU time',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  layerTree: 'Layer tree',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  show: 'Show',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {10ms} PH1
  *@example {10ms} PH2
  */
  sAtSParentheses: '{PH1} (at {PH2})',
  /**
  *@description Text that only contain a placeholder
  *@example {100ms (at 200ms)} PH1
  */
  emptyPlaceholder: '{PH1}',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  jank: 'jank',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {Took 3ms} PH1
  *@example {jank} PH2
  */
  sLongFrameTimesAreAnIndicationOf: '{PH1}. Long frame times are an indication of {PH2}',
  /**
  *@description Text in Timeline UIUtils of the Performance panel (document content loaded)
  */
  dcl: '`DCL`',
  /**
  *@description Text in Timeline UIUtils of the Performance panel (load)
  */
  load: '`L`',
  /**
  *@description Text in Timeline UIUtils of the Performance panel (first paint)
  */
  fp: '`FP`',
  /**
  *@description Text in Timeline UIUtils of the Performance panel (first contentful paint)
  */
  fcp: '`FCP`',
  /**
  *@description Text in Timeline UIUtils of the Performance panel (last contentful paint)
  */
  lcp: '`LCP`',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  forcedReflow: 'Forced reflow',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {Forced reflow} PH1
  */
  sIsALikelyPerformanceBottleneck: '{PH1} is a likely performance bottleneck.',
  /**
  *@description Span text content in Timeline UIUtils of the Performance panel
  *@example {10ms} PH1
  */
  idleCallbackExecutionExtended: 'Idle callback execution extended beyond deadline by {PH1}',
  /**
  *@description Span text content in Timeline UIUtils of the Performance panel
  *@example {10ms} PH1
  */
  handlerTookS: 'Handler took {PH1}',
  /**
  *@description Span text content in Timeline UIUtils of the Performance panel
  *@example {20ms} PH1
  */
  recurringHandlerTookS: 'Recurring handler took {PH1}',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  longTask: 'Long task',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {task} PH1
  *@example {10ms} PH2
  */
  sTookS: '{PH1} took {PH2}.',
  /**
  *@description Text that indicates something is not optimized
  */
  notOptimized: 'Not optimized',
  /**
  *@description Text that starts with a colon and includes a placeholder
  *@example {3.0} PH1
  */
  emptyPlaceholderColon: ': {PH1}',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  unknownCause: 'Unknown cause',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {Unkown reason} PH1
  *@example {node1} PH2
  */
  sForS: '{PH1} for {PH2}',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {StyleInvalidator for element} PH1
  *@example {Stack trace: function  line} PH2
  */
  sSDot: '{PH1}. {PH2}',
  /**
  *@description Text in Object Properties Section
  */
  unknown: 'unknown',
  /**
  *@description Text of a DOM element in Timeline UIUtils of the Performance panel
  */
  stackTraceColon: 'Stack trace:',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  nodes: 'Nodes:',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  */
  node: 'Node:',
  /**
  *@description Text of a DOM element in Timeline UIUtils of the Performance panel
  *@example {id2} PH1
  *@example {a, b} PH2
  */
  changedIdToSs: '(changed id to "{PH1}"{PH2})',
  /**
  *@description Text of a DOM element in Timeline UIUtils of the Performance panel
  *@example {class-name2} PH1
  *@example {a, b} PH2
  */
  changedClassToSs: '(changed class to "{PH1}"{PH2})',
  /**
  *@description Text of a DOM element in Timeline UIUtils of the Performance panel
  *@example {attribute-name} PH1
  *@example {a, b} PH2
  */
  changedAttributeToSs: '(changed attribute to "{PH1}"{PH2})',
  /**
  *@description Text of a DOM element in Timeline UIUtils of the Performance panel
  *@example {after} PH1
  *@example {a, b} PH2
  */
  changedPesudoToSs: '(changed pseudo to "{PH1}"{PH2})',
  /**
  *@description Text of a DOM element in Timeline UIUtils of the Performance panel
  *@example {part} PH1
  *@example {a, b} PH2
  */
  changedSs: '(changed "{PH1}"{PH2})',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {node1} PH1
  *@example {node2} PH2
  *@example {2} PH3
  */
  sSAndSOthers: '{PH1}, {PH2}, and {PH3} others',
  /**
  *@description Text of a DOM element in Timeline UIUtils of the Performance panel
  */
  UnknownNode: '[ unknown node ]',
  /**
  *@description Text in Timeline UIUtils of the Performance panel
  *@example {title} PH1
  */
  sDetails: '{PH1} - Details',
};
const str_ = i18n.i18n.registerUIStrings('timeline/TimelineUIUtils.js', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
/** @type {!Object.<!TimelineModel.TimelineModel.RecordType, !TimelineRecordStyle>} */
let eventStylesMap;

/** @type {!Map<!TimelineModel.TimelineIRModel.InputEvents, string>} */
let inputEventToDisplayName;

/** @type {!Map<!TimelineModel.TimelineIRModel.Phases, !{color: string, label: string}>} */
let interactionPhaseStylesMap;

/** @type {!Object.<string, !TimelineCategory>} */
let categories;

/** @type {!Array<string>} */
let eventCategories;

/** @type {!Array.<!EventDispatchTypeDescriptor>} */
let eventDispatchDesciptors;

/** @type {!Common.Color.Generator} */
let colorGenerator;

/** @type {!WeakMap<!TimelineModel.TimelineModel.NetworkRequest, !HTMLImageElement>} */
const requestPreviewElements = new WeakMap();

export class TimelineUIUtils {
  /**
   * @return {!Object.<string, !TimelineRecordStyle>}
   */
  static _initEventStyles() {
    if (eventStylesMap) {
      return eventStylesMap;
    }

    const type = TimelineModel.TimelineModel.RecordType;
    const categories = TimelineUIUtils.categories();
    const rendering = categories['rendering'];
    const scripting = categories['scripting'];
    const loading = categories['loading'];
    const experience = categories['experience'];
    const painting = categories['painting'];
    const other = categories['other'];
    const idle = categories['idle'];

    /** @type {!Object.<!TimelineModel.TimelineModel.RecordType, !TimelineRecordStyle>} */
    const eventStyles = {};
    eventStyles[type.Task] = new TimelineRecordStyle(i18nString(UIStrings.task), other);
    eventStyles[type.Program] = new TimelineRecordStyle(i18nString(UIStrings.other), other);
    eventStyles[type.Animation] = new TimelineRecordStyle(i18nString(UIStrings.animation), rendering);
    eventStyles[type.EventDispatch] = new TimelineRecordStyle(i18nString(UIStrings.event), scripting);
    eventStyles[type.RequestMainThreadFrame] =
        new TimelineRecordStyle(i18nString(UIStrings.requestMainThreadFrame), rendering, true);
    eventStyles[type.BeginFrame] = new TimelineRecordStyle(i18nString(UIStrings.frameStart), rendering, true);
    eventStyles[type.BeginMainThreadFrame] =
        new TimelineRecordStyle(i18nString(UIStrings.frameStartMainThread), rendering, true);
    eventStyles[type.DrawFrame] = new TimelineRecordStyle(i18nString(UIStrings.drawFrame), rendering, true);
    eventStyles[type.HitTest] = new TimelineRecordStyle(i18nString(UIStrings.hitTest), rendering);
    eventStyles[type.ScheduleStyleRecalculation] =
        new TimelineRecordStyle(i18nString(UIStrings.scheduleStyleRecalculation), rendering);
    eventStyles[type.RecalculateStyles] = new TimelineRecordStyle(i18nString(UIStrings.recalculateStyle), rendering);
    eventStyles[type.UpdateLayoutTree] = new TimelineRecordStyle(i18nString(UIStrings.recalculateStyle), rendering);
    eventStyles[type.InvalidateLayout] =
        new TimelineRecordStyle(i18nString(UIStrings.invalidateLayout), rendering, true);
    eventStyles[type.Layout] = new TimelineRecordStyle(i18nString(UIStrings.layout), rendering);
    eventStyles[type.PaintSetup] = new TimelineRecordStyle(i18nString(UIStrings.paintSetup), painting);
    eventStyles[type.PaintImage] = new TimelineRecordStyle(i18nString(UIStrings.paintImage), painting, true);
    eventStyles[type.UpdateLayer] = new TimelineRecordStyle(i18nString(UIStrings.updateLayer), painting, true);
    eventStyles[type.UpdateLayerTree] = new TimelineRecordStyle(i18nString(UIStrings.updateLayerTree), rendering);
    eventStyles[type.Paint] = new TimelineRecordStyle(i18nString(UIStrings.paint), painting);
    eventStyles[type.RasterTask] = new TimelineRecordStyle(i18nString(UIStrings.rasterizePaint), painting);
    eventStyles[type.ScrollLayer] = new TimelineRecordStyle(i18nString(UIStrings.scroll), rendering);
    eventStyles[type.CompositeLayers] = new TimelineRecordStyle(i18nString(UIStrings.compositeLayers), painting);
    eventStyles[type.ParseHTML] = new TimelineRecordStyle(i18nString(UIStrings.parseHtml), loading);
    eventStyles[type.ParseAuthorStyleSheet] = new TimelineRecordStyle(i18nString(UIStrings.parseStylesheet), loading);
    eventStyles[type.TimerInstall] = new TimelineRecordStyle(i18nString(UIStrings.installTimer), scripting);
    eventStyles[type.TimerRemove] = new TimelineRecordStyle(i18nString(UIStrings.removeTimer), scripting);
    eventStyles[type.TimerFire] = new TimelineRecordStyle(i18nString(UIStrings.timerFired), scripting);
    eventStyles[type.XHRReadyStateChange] =
        new TimelineRecordStyle(i18nString(UIStrings.xhrReadyStateChange), scripting);
    eventStyles[type.XHRLoad] = new TimelineRecordStyle(i18nString(UIStrings.xhrLoad), scripting);
    eventStyles[type.CompileScript] = new TimelineRecordStyle(i18nString(UIStrings.compileScript), scripting);
    eventStyles[type.EvaluateScript] = new TimelineRecordStyle(i18nString(UIStrings.evaluateScript), scripting);
    eventStyles[type.CompileModule] = new TimelineRecordStyle(i18nString(UIStrings.compileModule), scripting);
    eventStyles[type.EvaluateModule] = new TimelineRecordStyle(i18nString(UIStrings.evaluateModule), scripting);
    eventStyles[type.StreamingCompileScript] =
        new TimelineRecordStyle(i18nString(UIStrings.streamingCompileTask), other);
    eventStyles[type.StreamingCompileScriptWaiting] =
        new TimelineRecordStyle(i18nString(UIStrings.waitingForNetwork), idle);
    eventStyles[type.StreamingCompileScriptParsing] =
        new TimelineRecordStyle(i18nString(UIStrings.parseAndCompile), scripting);
    eventStyles[type.WasmStreamFromResponseCallback] =
        new TimelineRecordStyle(i18nString(UIStrings.streamingWasmResponse), scripting);
    eventStyles[type.WasmCompiledModule] = new TimelineRecordStyle(i18nString(UIStrings.compiledWasmModule), scripting);
    eventStyles[type.WasmCachedModule] = new TimelineRecordStyle(i18nString(UIStrings.cachedWasmModule), scripting);
    eventStyles[type.WasmModuleCacheHit] = new TimelineRecordStyle(i18nString(UIStrings.wasmModuleCacheHit), scripting);
    eventStyles[type.WasmModuleCacheInvalid] =
        new TimelineRecordStyle(i18nString(UIStrings.wasmModuleCacheInvalid), scripting);
    eventStyles[type.FrameStartedLoading] =
        new TimelineRecordStyle(i18nString(UIStrings.frameStartedLoading), loading, true);
    eventStyles[type.MarkLoad] = new TimelineRecordStyle(i18nString(UIStrings.onloadEvent), scripting, true);
    eventStyles[type.MarkDOMContent] =
        new TimelineRecordStyle(i18nString(UIStrings.domcontentloadedEvent), scripting, true);
    eventStyles[type.MarkFirstPaint] = new TimelineRecordStyle(i18nString(UIStrings.firstPaint), painting, true);
    eventStyles[type.MarkFCP] = new TimelineRecordStyle(i18nString(UIStrings.firstContentfulPaint), rendering, true);
    eventStyles[type.MarkLCPCandidate] =
        new TimelineRecordStyle(i18nString(UIStrings.largestContentfulPaint), rendering, true);
    eventStyles[type.TimeStamp] = new TimelineRecordStyle(i18nString(UIStrings.timestamp), scripting);
    eventStyles[type.ConsoleTime] = new TimelineRecordStyle(i18nString(UIStrings.consoleTime), scripting);
    eventStyles[type.UserTiming] = new TimelineRecordStyle(i18nString(UIStrings.userTiming), scripting);
    eventStyles[type.ResourceWillSendRequest] = new TimelineRecordStyle(i18nString(UIStrings.willSendRequest), loading);
    eventStyles[type.ResourceSendRequest] = new TimelineRecordStyle(i18nString(UIStrings.sendRequest), loading);
    eventStyles[type.ResourceReceiveResponse] = new TimelineRecordStyle(i18nString(UIStrings.receiveResponse), loading);
    eventStyles[type.ResourceFinish] = new TimelineRecordStyle(i18nString(UIStrings.finishLoading), loading);
    eventStyles[type.ResourceReceivedData] = new TimelineRecordStyle(i18nString(UIStrings.receiveData), loading);
    eventStyles[type.RunMicrotasks] = new TimelineRecordStyle(i18nString(UIStrings.runMicrotasks), scripting);
    eventStyles[type.FunctionCall] = new TimelineRecordStyle(i18nString(UIStrings.functionCall), scripting);
    eventStyles[type.GCEvent] = new TimelineRecordStyle(i18nString(UIStrings.gcEvent), scripting);
    eventStyles[type.MajorGC] = new TimelineRecordStyle(i18nString(UIStrings.majorGc), scripting);
    eventStyles[type.MinorGC] = new TimelineRecordStyle(i18nString(UIStrings.minorGc), scripting);
    eventStyles[type.JSFrame] = new TimelineRecordStyle(i18nString(UIStrings.jsFrame), scripting);
    eventStyles[type.RequestAnimationFrame] =
        new TimelineRecordStyle(i18nString(UIStrings.requestAnimationFrame), scripting);
    eventStyles[type.CancelAnimationFrame] =
        new TimelineRecordStyle(i18nString(UIStrings.cancelAnimationFrame), scripting);
    eventStyles[type.FireAnimationFrame] =
        new TimelineRecordStyle(i18nString(UIStrings.animationFrameFired), scripting);
    eventStyles[type.RequestIdleCallback] =
        new TimelineRecordStyle(i18nString(UIStrings.requestIdleCallback), scripting);
    eventStyles[type.CancelIdleCallback] = new TimelineRecordStyle(i18nString(UIStrings.cancelIdleCallback), scripting);
    eventStyles[type.FireIdleCallback] = new TimelineRecordStyle(i18nString(UIStrings.fireIdleCallback), scripting);
    eventStyles[type.WebSocketCreate] = new TimelineRecordStyle(i18nString(UIStrings.createWebsocket), scripting);
    eventStyles[type.WebSocketSendHandshakeRequest] =
        new TimelineRecordStyle(i18nString(UIStrings.sendWebsocketHandshake), scripting);
    eventStyles[type.WebSocketReceiveHandshakeResponse] =
        new TimelineRecordStyle(i18nString(UIStrings.receiveWebsocketHandshake), scripting);
    eventStyles[type.WebSocketDestroy] = new TimelineRecordStyle(i18nString(UIStrings.destroyWebsocket), scripting);
    eventStyles[type.EmbedderCallback] = new TimelineRecordStyle(i18nString(UIStrings.embedderCallback), scripting);
    eventStyles[type.DecodeImage] = new TimelineRecordStyle(i18nString(UIStrings.imageDecode), painting);
    eventStyles[type.ResizeImage] = new TimelineRecordStyle(i18nString(UIStrings.imageResize), painting);
    eventStyles[type.GPUTask] = new TimelineRecordStyle(i18nString(UIStrings.gpu), categories['gpu']);
    eventStyles[type.LatencyInfo] = new TimelineRecordStyle(i18nString(UIStrings.inputLatency), scripting);

    eventStyles[type.GCCollectGarbage] = new TimelineRecordStyle(i18nString(UIStrings.domGc), scripting);

    eventStyles[type.CryptoDoEncrypt] = new TimelineRecordStyle(i18nString(UIStrings.encrypt), scripting);
    eventStyles[type.CryptoDoEncryptReply] = new TimelineRecordStyle(i18nString(UIStrings.encryptReply), scripting);
    eventStyles[type.CryptoDoDecrypt] = new TimelineRecordStyle(i18nString(UIStrings.decrypt), scripting);
    eventStyles[type.CryptoDoDecryptReply] = new TimelineRecordStyle(i18nString(UIStrings.decryptReply), scripting);
    eventStyles[type.CryptoDoDigest] = new TimelineRecordStyle(i18nString(UIStrings.digest), scripting);
    eventStyles[type.CryptoDoDigestReply] = new TimelineRecordStyle(i18nString(UIStrings.digestReply), scripting);
    eventStyles[type.CryptoDoSign] = new TimelineRecordStyle(i18nString(UIStrings.sign), scripting);
    eventStyles[type.CryptoDoSignReply] = new TimelineRecordStyle(i18nString(UIStrings.signReply), scripting);
    eventStyles[type.CryptoDoVerify] = new TimelineRecordStyle(i18nString(UIStrings.verify), scripting);
    eventStyles[type.CryptoDoVerifyReply] = new TimelineRecordStyle(i18nString(UIStrings.verifyReply), scripting);

    eventStyles[type.AsyncTask] = new TimelineRecordStyle(i18nString(UIStrings.asyncTask), categories['async']);

    eventStyles[type.LayoutShift] = new TimelineRecordStyle(i18nString(UIStrings.layoutShift), experience);

    eventStylesMap = eventStyles;
    return eventStyles;
  }

  /** @param {!Object.<!TimelineModel.TimelineModel.RecordType, !TimelineRecordStyle>} eventStyles */
  static setEventStylesMap(eventStyles) {
    eventStylesMap = eventStyles;
  }

  /**
   * @param {!TimelineModel.TimelineIRModel.InputEvents} inputEventType
   * @return {?string}
   */
  static inputEventDisplayName(inputEventType) {
    if (!inputEventToDisplayName) {
      const inputEvent = TimelineModel.TimelineIRModel.InputEvents;

      inputEventToDisplayName = new Map([
        [inputEvent.Char, i18nString(UIStrings.keyCharacter)],
        [inputEvent.KeyDown, i18nString(UIStrings.keyDown)],
        [inputEvent.KeyDownRaw, i18nString(UIStrings.keyDown)],
        [inputEvent.KeyUp, i18nString(UIStrings.keyUp)],
        [inputEvent.Click, i18nString(UIStrings.click)],
        [inputEvent.ContextMenu, i18nString(UIStrings.contextMenu)],
        [inputEvent.MouseDown, i18nString(UIStrings.mouseDown)],
        [inputEvent.MouseMove, i18nString(UIStrings.mouseMove)],
        [inputEvent.MouseUp, i18nString(UIStrings.mouseUp)],
        [inputEvent.MouseWheel, i18nString(UIStrings.mouseWheel)],
        [inputEvent.ScrollBegin, i18nString(UIStrings.scrollBegin)],
        [inputEvent.ScrollEnd, i18nString(UIStrings.scrollEnd)],
        [inputEvent.ScrollUpdate, i18nString(UIStrings.scrollUpdate)],
        [inputEvent.FlingStart, i18nString(UIStrings.flingStart)],
        [inputEvent.FlingCancel, i18nString(UIStrings.flingHalt)],
        [inputEvent.Tap, i18nString(UIStrings.tap)],
        [inputEvent.TapCancel, i18nString(UIStrings.tapHalt)],
        [inputEvent.ShowPress, i18nString(UIStrings.tapBegin)],
        [inputEvent.TapDown, i18nString(UIStrings.tapDown)],
        [inputEvent.TouchCancel, i18nString(UIStrings.touchCancel)],
        [inputEvent.TouchEnd, i18nString(UIStrings.touchEnd)],
        [inputEvent.TouchMove, i18nString(UIStrings.touchMove)],
        [inputEvent.TouchStart, i18nString(UIStrings.touchStart)],
        [inputEvent.PinchBegin, i18nString(UIStrings.pinchBegin)],
        [inputEvent.PinchEnd, i18nString(UIStrings.pinchEnd)],
        [inputEvent.PinchUpdate, i18nString(UIStrings.pinchUpdate)]
      ]);
    }
    return inputEventToDisplayName.get(inputEventType) || null;
  }

  /**
   * @param {!Protocol.Runtime.CallFrame} frame
   * @return {string}
   */
  static frameDisplayName(frame) {
    if (!TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.isNativeRuntimeFrame(frame)) {
      return UI.UIUtils.beautifyFunctionName(frame.functionName);
    }
    const nativeGroup = TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.nativeGroup(frame.functionName);
    const groups = TimelineModel.TimelineJSProfile.TimelineJSProfileProcessor.NativeGroups;
    switch (nativeGroup) {
      case groups.Compile:
        return i18nString(UIStrings.compile);
      case groups.Parse:
        return i18nString(UIStrings.parse);
    }
    return frame.functionName;
  }

  /**
   * @param {!SDK.TracingModel.Event} traceEvent
   * @param {!RegExp} regExp
   * @return {boolean}
   */
  static testContentMatching(traceEvent, regExp) {
    const title = TimelineUIUtils.eventStyle(traceEvent).title;
    const tokens = [title];
    const url = TimelineModel.TimelineModel.TimelineData.forEvent(traceEvent).url;
    if (url) {
      tokens.push(url);
    }
    appendObjectProperties(traceEvent.args, 2);
    return regExp.test(tokens.join('|'));

    /**
     * @param {!*} object
     * @param {number} depth
     */
    function appendObjectProperties(object, depth) {
      if (!depth) {
        return;
      }
      for (const key in object) {
        const value = object[key];
        const type = typeof value;
        if (type === 'string') {
          tokens.push(value);
        } else if (type === 'number') {
          tokens.push(String(value));
        } else if (type === 'object') {
          appendObjectProperties(value, depth - 1);
        }
      }
    }
  }

  /**
   * @param {!SDK.TracingModel.Event} event
   * @return {?string}
   */
  static eventURL(event) {
    const data = event.args['data'] || event.args['beginData'];
    const url = data && data.url;
    if (url) {
      return url;
    }
    const stackTrace = data && data['stackTrace'];
    const frame = stackTrace && stackTrace.length && stackTrace[0] ||
        TimelineModel.TimelineModel.TimelineData.forEvent(event).topFrame();
    return frame && frame.url || null;
  }

  /**
   * @param {!SDK.TracingModel.Event} event
   * @return {!TimelineRecordStyle}
   */
  static eventStyle(event) {
    const eventStyles = TimelineUIUtils._initEventStyles();
    if (event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.Console) ||
        event.hasCategory(TimelineModel.TimelineModel.TimelineModelImpl.Category.UserTiming)) {
      return new TimelineRecordStyle(event.name, TimelineUIUtils.categories()['scripting']);
    }

    if (event.hasCateg