1.4.0

This PR implements basic import of profiles from the "Trace Event Format", which is used by `chrome://tracing`, but also which many other tools target as a convenient event tracing format. The spec can be found here: https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview#heading=h.xqopa5m0e28f.

The standard supports a broad set of events, some of which don't yet have any practical way to visualize them in speedscope. This PR implements support for the `B`, `E`, and `X` events, as well as gathering process and thread names via some of the `M` events.

This work was motivated by a generous donation to /dev/color by @aras-p: https://github.com/jlfwong/speedscope/issues/77#issuecomment-455077014

Fixes #77

CHANGELOG.md

@@ -1,11 +1,18 @@
 ## Unreleased
 
+## [1.4.0] - 2019-01-22
+
+### Added
+
+* Import v8 cpu profile (old format) [#177] (by @vmarchaud)
+* Import basic "Trace Event Format" profiles [#197] (by @jlfwong)
+
 ## [1.3.2] - 2018-12-03
 
-* Fixed import of multithreaded Chrome profiles [#19] (by @jlfwong)
-
 ### Fixed
 
+* Fixed import of multithreaded Chrome profiles [#19] (by @jlfwong)
+
 ## [1.3.1] - 2018-11-08
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "speedscope",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "",
   "repository": "jlfwong/speedscope",
   "main": "index.js",

sample/profiles/node/10.11.0/example.cpuprofile

@@ -0,0 +1 @@
+{"head":{"functionName":"(root)","url":"","lineNumber":-1,"bailoutReason":"","id":1,"scriptId":0,"hitCount":0,"children":[{"functionName":"","url":"","lineNumber":0,"callUID":1,"bailoutReason":"","id":2,"scriptId":0,"hitCount":0,"children":[{"functionName":"a","url":"","lineNumber":0,"callUID":2,"bailoutReason":"","id":3,"scriptId":0,"hitCount":0,"children":[{"functionName":"b","url":"","lineNumber":5,"callUID":3,"bailoutReason":"","id":4,"scriptId":0,"hitCount":0,"children":[{"functionName":"d","url":"","lineNumber":13,"callUID":4,"bailoutReason":"","id":5,"scriptId":0,"hitCount":14,"children":[]}]},{"functionName":"c","url":"","lineNumber":9,"callUID":3,"bailoutReason":"","id":6,"scriptId":0,"hitCount":0,"children":[{"functionName":"d","url":"","lineNumber":13,"callUID":6,"bailoutReason":"","id":7,"scriptId":0,"hitCount":14,"children":[]}]}]}]}]},"startTime":163140,"endTime":163140,"samples":[2,5,5,5,5,5,5,5,5,5,5,5,5,5,5,7,7,7,7,7,7,7,7,7,7,7,7,7,7],"timestamps":[163140599286,163140610861,163140611921,163140612966,163140614236,163140615507,163140616694,163140617968,163140619238,163140620258,163140621507,163140622765,163140624037,163140625303,163140626378,163140627649,163140628923,163140630191,163140631457,163140632746,163140634032,163140635304,163140636440,163140637716,163140638990,163140640255,163140641520,163140642791,163140644063,163140645206]}

sample/profiles/trace-event/multiprocess.json

@@ -0,0 +1,22 @@
+[
+  {"pid": 0, "tid": 0, "ph": "M", "name": "process_name", "args": {"name": "p0"}, "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "M", "name": "thread_name", "args": {"name": "p0t0"}, "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "X", "name": "alpha", "ts": 0, "dur": 1},
+  {"pid": 0, "tid": 1, "ph": "M", "name": "thread_name", "args": {"name": "p0t1"}, "ts": 0},
+  {"pid": 0, "tid": 1, "ph": "X", "name": "beta", "ts": 0, "dur": 1},
+
+  {"pid": 1, "tid": 0, "ph": "M", "name": "process_name", "args": {"name": "p1"}, "ts": 0},
+  {"pid": 1, "tid": 0, "ph": "M", "name": "thread_name", "args": {"name": "p1t0"}, "ts": 0},
+  {"pid": 1, "tid": 0, "ph": "X", "name": "gamma", "ts": 0, "dur": 1},
+  {"pid": 1, "tid": 1, "ph": "M", "name": "thread_name", "args": {"name": "p1t1"}, "ts": 0},
+  {"pid": 1, "tid": 1, "ph": "X", "name": "delta", "ts": 0, "dur": 1},
+
+  {"pid": 2, "tid": 0, "ph": "M", "name": "thread_name", "args": {"name": "p2t0"}, "ts": 0},
+  {"pid": 2, "tid": 0, "ph": "X", "name": "epsilon", "ts": 0, "dur": 1},
+  {"pid": 2, "tid": 1, "ph": "M", "name": "thread_name", "args": {"name": "p2t1"}, "ts": 0},
+  {"pid": 2, "tid": 1, "ph": "X", "name": "phi", "ts": 0, "dur": 1},
+
+  {"pid": 3, "tid": 0, "ph": "M", "name": "process_name", "args": {"name": "p3"}, "ts": 0},
+  {"pid": 3, "tid": 0, "ph": "X", "name": "zeta", "ts": 0, "dur": 1},
+  {"pid": 3, "tid": 1, "ph": "X", "name": "eta", "ts": 0, "dur": 1}
+]

sample/profiles/trace-event/simple-object.json

@@ -0,0 +1,9 @@
+{
+  "traceEvents": [
+    {"pid": 0, "tid": 0, "ph": "B", "name": "alpha", "ts": 0},
+    {"pid": 0, "tid": 0, "ph": "B", "name": "beta", "ts": 1},
+    {"pid": 0, "tid": 0, "ph": "X", "ts": 7, "tdur": 4},
+    {"pid": 0, "tid": 0, "ph": "E", "name": "beta", "ts": 13},
+    {"pid": 0, "tid": 0, "ph": "E", "name": "alpha", "ts": 14}
+  ]
+}

sample/profiles/trace-event/simple.json

@@ -0,0 +1,8 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "alpha", "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "beta", "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "X", "name": "gamma", "ts": 2, "dur": 5, "args": {"detail": "foobar"}},
+  {"pid": 0, "tid": 0, "ph": "X", "name": "epsilon", "ts": 7, "tdur": 4},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "beta", "ts": 13},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "alpha", "ts": 14}
+]

sample/programs/javascript/convertToOld.js

@@ -0,0 +1,60 @@
+/*
+* This script is used to reconstruct an cpu profile from chrome with an old format
+* still used in nodejs with v8-profiler
+*/
+const fs = require('fs')
+
+const data = JSON.parse(fs.readFileSync('../../profiles/Chrome/65/simple.cpuprofile').toString())
+
+const _convertTimeDeltas = (profile) => {
+  if (!profile.timeDeltas) return null
+  let lastTimeUsec = profile.startTime
+  const timestamps = new Array(profile.timeDeltas.length + 1)
+  for (let i = 0; i < profile.timeDeltas.length; ++i) {
+    timestamps[i] = lastTimeUsec
+    lastTimeUsec += profile.timeDeltas[i]
+  }
+  timestamps[profile.timeDeltas.length] = lastTimeUsec
+  return timestamps
+}
+
+const reformatNode = node => {
+  if (!node.children) node.children = []
+
+  node.children = node.children.map(childID => {
+    if (typeof childID !== 'number') return childID
+    const childNode = data.nodes.find(node => node.id === childID)
+    if (typeof childNode !== 'object') return null
+    childNode.callUID = node.id
+    return childNode
+  })
+  return {
+    functionName: node.callFrame.functionName,
+    url: node.callFrame.url,
+    lineNumber: node.callFrame.lineNumber,
+    callUID: node.callUID,
+    bailoutReason: '',
+    id: node.id,
+    scriptId: 0,
+    hitCount: node.hitCount,
+    children: node.children.map(reformatNode)
+  }
+}
+
+// reformat then only keep the root as top level node
+const nodes = data.nodes
+  .map(reformatNode)
+  .filter(node => node.functionName === '(root)')[0]
+
+// since it can be undefined, create an array so execution still works
+if (!data.timeDeltas) {
+  data.timeDeltas = []
+}
+
+fs.writeFileSync('./new.cpuprofile', JSON.stringify({
+  head: nodes,
+  startTime: Math.floor(data.startTime / 1000000),
+  endTime: Math.floor(data.endTime / 1000000),
+  samples: data.samples,
+  timestamps: _convertTimeDeltas(data)
+}))

src/import/__snapshots__/chrome.test.ts.snap

@@ -1357,3 +1357,66 @@ exports[`importFromChromeTimeline Workers Chrome 70: profileGroup.name 1`] = `"w
 exports[`importFromChromeTimeline: indexToView 1`] = `0`;
 
 exports[`importFromChromeTimeline: profileGroup.name 1`] = `"simple-timeline.json"`;
+
+exports[`importFromV8Profiler Node 10 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": 0,
+      "file": "",
+      "key": "(anonymous)::0:0",
+      "line": 0,
+      "name": "(anonymous)",
+      "selfWeight": 11575,
+      "totalWeight": 44777,
+    },
+    Frame {
+      "col": 0,
+      "file": "",
+      "key": "a::0:0",
+      "line": 0,
+      "name": "a",
+      "selfWeight": 0,
+      "totalWeight": 33202,
+    },
+    Frame {
+      "col": 0,
+      "file": "",
+      "key": "b::5:0",
+      "line": 5,
+      "name": "b",
+      "selfWeight": 0,
+      "totalWeight": 16788,
+    },
+    Frame {
+      "col": 0,
+      "file": "",
+      "key": "d::13:0",
+      "line": 13,
+      "name": "d",
+      "selfWeight": 33202,
+      "totalWeight": 33202,
+    },
+    Frame {
+      "col": 0,
+      "file": "",
+      "key": "c::9:0",
+      "line": 9,
+      "name": "c",
+      "selfWeight": 0,
+      "totalWeight": 16414,
+    },
+  ],
+  "name": "example.cpuprofile",
+  "stacks": Array [
+    " 599.29ms",
+    "(anonymous) 11.57ms",
+    "(anonymous);a;b;d 16.79ms",
+    "(anonymous);a;c;d 16.41ms",
+  ],
+}
+`;
+
+exports[`importFromV8Profiler Node 10: indexToView 1`] = `0`;
+
+exports[`importFromV8Profiler Node 10: profileGroup.name 1`] = `"example.cpuprofile"`;

src/import/__snapshots__/trace-event.test.ts.snap

@@ -0,0 +1,267 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`importTraceEvents multiprocess 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "p0 (pid 0), p0t0 (tid 0)",
+  "stacks": Array [
+    "alpha 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents multiprocess 2`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta",
+      "line": undefined,
+      "name": "beta",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "p0 (pid 0), p0t1 (tid 1)",
+  "stacks": Array [
+    "beta 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents multiprocess 3`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "gamma",
+      "line": undefined,
+      "name": "gamma",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "p1 (pid 1), p1t0 (tid 0)",
+  "stacks": Array [
+    "gamma 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents multiprocess 4`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "delta",
+      "line": undefined,
+      "name": "delta",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "p1 (pid 1), p1t1 (tid 1)",
+  "stacks": Array [
+    "delta 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents multiprocess 5`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "epsilon",
+      "line": undefined,
+      "name": "epsilon",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "p2t0 (pid 2, tid 0)",
+  "stacks": Array [
+    "epsilon 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents multiprocess 6`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "phi",
+      "line": undefined,
+      "name": "phi",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "p2t1 (pid 2, tid 1)",
+  "stacks": Array [
+    "phi 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents multiprocess 7`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "zeta",
+      "line": undefined,
+      "name": "zeta",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "p3 (pid 3, tid 0)",
+  "stacks": Array [
+    "zeta 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents multiprocess 8`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "eta",
+      "line": undefined,
+      "name": "eta",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "p3 (pid 3, tid 1)",
+  "stacks": Array [
+    "eta 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents multiprocess: indexToView 1`] = `0`;
+
+exports[`importTraceEvents multiprocess: profileGroup.name 1`] = `"multiprocess.json"`;
+
+exports[`importTraceEvents simple 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 2,
+      "totalWeight": 14,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta",
+      "line": undefined,
+      "name": "beta",
+      "selfWeight": 3,
+      "totalWeight": 12,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "gamma {\\"detail\\":\\"foobar\\"}",
+      "line": undefined,
+      "name": "gamma {\\"detail\\":\\"foobar\\"}",
+      "selfWeight": 5,
+      "totalWeight": 5,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "epsilon",
+      "line": undefined,
+      "name": "epsilon",
+      "selfWeight": 4,
+      "totalWeight": 4,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "alpha 1.00µs",
+    "alpha;beta 1.00µs",
+    "alpha;beta;gamma {\\"detail\\":\\"foobar\\"} 5.00µs",
+    "alpha;beta;epsilon 4.00µs",
+    "alpha;beta 2.00µs",
+    "alpha 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents simple object 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 2,
+      "totalWeight": 14,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta",
+      "line": undefined,
+      "name": "beta",
+      "selfWeight": 8,
+      "totalWeight": 12,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "(unnamed)",
+      "line": undefined,
+      "name": "(unnamed)",
+      "selfWeight": 4,
+      "totalWeight": 4,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "alpha 1.00µs",
+    "alpha;beta 6.00µs",
+    "alpha;beta;(unnamed) 4.00µs",
+    "alpha;beta 2.00µs",
+    "alpha 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents simple object: indexToView 1`] = `0`;
+
+exports[`importTraceEvents simple object: profileGroup.name 1`] = `"simple-object.json"`;
+
+exports[`importTraceEvents simple: indexToView 1`] = `0`;
+
+exports[`importTraceEvents simple: profileGroup.name 1`] = `"simple.json"`;

src/import/chrome.test.ts

@@ -12,6 +12,10 @@ test('importFromChromeTimeline Chrome 69', async () => {
   await checkProfileSnapshot('./sample/profiles/Chrome/69/simple.json')
 })
 
+test('importFromV8Profiler Node 10', async () => {
+  await checkProfileSnapshot('./sample/profiles/node/10.11.0/example.cpuprofile')
+})
+
 test('importFromChromeTimeline Workers Chrome 70', async () => {
   await checkProfileSnapshot('./sample/profiles/Chrome/70/worker.json')
 })

src/import/chrome.ts

@@ -1,6 +1,7 @@
 import {Profile, FrameInfo, CallTreeProfileBuilder, ProfileGroup} from '../lib/profile'
 import {getOrInsert, lastOf, sortBy, itForEach} from '../lib/utils'
 import {TimeFormatter} from '../lib/value-formatters'
+import {chromeTreeToNodes, OldCPUProfile} from './v8cpuFormatter'
 
 // See: https://github.com/v8/v8/blob/master/src/inspector/js_protocol.json
 
@@ -31,7 +32,7 @@ interface CPUProfileCallFrame {
   url: string
 }
 
-interface CPUProfileNode {
+export interface CPUProfileNode {
   callFrame: CPUProfileCallFrame
   hitCount: number
   id: number
@@ -40,7 +41,7 @@ interface CPUProfileNode {
   parent?: CPUProfileNode
 }
 
-interface CPUProfile {
+export interface CPUProfile {
   startTime: number
   endTime: number
   nodes: CPUProfileNode[]
@@ -312,3 +313,7 @@ export function importFromChromeCPUProfile(chromeProfile: CPUProfile): Profile {
   profile.setValueFormatter(new TimeFormatter('microseconds'))
   return profile.build()
 }
+
+export function importFromOldV8CPUProfile(content: OldCPUProfile): Profile {
+  return importFromChromeCPUProfile(chromeTreeToNodes(content))
+}

src/import/index.ts

@@ -1,7 +1,12 @@
 import {Profile, ProfileGroup} from '../lib/profile'
 import {FileSystemDirectoryEntry} from './file-system-entry'
 
-import {importFromChromeCPUProfile, importFromChromeTimeline, isChromeTimeline} from './chrome'
+import {
+  importFromChromeCPUProfile,
+  importFromChromeTimeline,
+  isChromeTimeline,
+  importFromOldV8CPUProfile,
+} from './chrome'
 import {importFromStackprof} from './stackprof'
 import {importFromInstrumentsDeepCopy, importFromInstrumentsTrace} from './instruments'
 import {importFromBGFlameGraph} from './bg-flamegraph'
@@ -14,6 +19,7 @@ import {ProfileDataSource, TextProfileDataSource, MaybeCompressedDataReader} fro
 import {importAsPprofProfile} from './pprof'
 import {decodeBase64} from '../lib/utils'
 import {importFromChromeHeapProfile} from './v8heapalloc'
+import {isTraceEventFormatted, importTraceEvents} from './trace-event'
 
 export async function importProfileGroupFromText(
   fileName: string,
@@ -84,9 +90,6 @@ async function _importProfileGroup(dataSource: ProfileDataSource): Promise<Profi
   if (fileName.endsWith('.speedscope.json')) {
     console.log('Importing as speedscope json file')
     return importSpeedscopeProfiles(JSON.parse(contents))
-  } else if (fileName.endsWith('.cpuprofile')) {
-    console.log('Importing as Chrome CPU Profile')
-    return toGroup(importFromChromeCPUProfile(JSON.parse(contents)))
   } else if (fileName.endsWith('.chrome.json') || /Profile-\d{8}T\d{6}/.exec(fileName)) {
     console.log('Importing as Chrome Timeline')
     return importFromChromeTimeline(JSON.parse(contents), fileName)
@@ -123,11 +126,17 @@ async function _importProfileGroup(dataSource: ProfileDataSource): Promise<Profi
       console.log('Importing as Firefox profile')
       return toGroup(importFromFirefox(parsed))
     } else if (isChromeTimeline(parsed)) {
-      console.log('Importing as Chrome CPU Profile')
+      console.log('Importing as Chrome Timeline')
       return importFromChromeTimeline(parsed, fileName)
     } else if ('nodes' in parsed && 'samples' in parsed && 'timeDeltas' in parsed) {
-      console.log('Importing as Chrome Timeline')
+      console.log('Importing as Chrome CPU Profile')
       return toGroup(importFromChromeCPUProfile(parsed))
+    } else if (isTraceEventFormatted(parsed)) {
+      console.log('Importing as Trace Event Format profile')
+      return importTraceEvents(parsed)
+    } else if ('head' in parsed && 'samples' in parsed && 'timestamps' in parsed) {
+      console.log('Importing as Chrome CPU Profile (old format)')
+      return toGroup(importFromOldV8CPUProfile(parsed))
     } else if ('mode' in parsed && 'frames' in parsed) {
       console.log('Importing as stackprof profile')
       return toGroup(importFromStackprof(parsed))

src/import/trace-event.test.ts

@@ -0,0 +1,13 @@
+import {checkProfileSnapshot} from '../lib/test-utils'
+
+test('importTraceEvents simple', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/simple.json')
+})
+
+test('importTraceEvents simple object', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/simple-object.json')
+})
+
+test('importTraceEvents multiprocess', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/multiprocess.json')
+})

src/import/trace-event.ts

@@ -0,0 +1,291 @@
+import {sortBy, zeroPad} from '../lib/utils'
+import {ProfileGroup, CallTreeProfileBuilder, FrameInfo} from '../lib/profile'
+import {TimeFormatter} from '../lib/value-formatters'
+
+// This file concerns import from the "Trace Event Format", authored by Google
+// and used for Google's own chrome://trace.
+//
+// The file format is extremely general, and we only support the parts of it
+// that logically map onto speedscope's visualization capabilities.
+// Specifically, we only support the "B", "E", and "X" event types. Everything
+// else is ignored. We do, however, support import of profiles that are
+// multi-process/multi-threaded. Each process is split into a separate profile.
+//
+// Note that Chrome Developer Tools uses this format as well, but all the
+// relevant data used in those profiles is stored in events with the name
+// "CpuProfile", "Profile", or "ProfileChunk". If we detect those, we prioritize
+// importing the profile as a Chrome Developer Tools profile. Otherwise,
+// we try to import it as a "Trace Event Format" file.
+//
+// Spec: https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview
+
+interface TraceEvent {
+  // The process ID for the process that output this event.
+  pid: number
+
+  // The thread ID for the thread that output this event.
+  tid: number
+
+  // The event type. This is a single character which changes depending on the type of event being output. The valid values are listed in the table below. We will discuss each phase type below.
+  ph: string
+
+  // The tracing clock timestamp of the event. The timestamps are provided at microsecond granularity.
+  ts: number
+
+  // The thread clock timestamp of the event. The timestamps are provided at microsecond granularity.
+  tts?: number
+
+  // The name of the event, as displayed in Trace Viewer
+  name?: string
+
+  // The event categories. This is a comma separated list of categories for the event. The categories can be used to hide events in the Trace Viewer UI.
+  cat?: string
+
+  // Any arguments provided for the event. Some of the event types have required argument fields, otherwise, you can put any information you wish in here. The arguments are displayed in Trace Viewer when you view an event in the analysis section.
+  args: any
+
+  // A fixed color name to associate with the event. If provided, cname must be one of the names listed in trace-viewer's base color scheme's reserved color names list
+  cname?: string
+}
+
+interface BTraceEvent extends TraceEvent {
+  ph: 'B'
+}
+
+interface ETraceEvent extends TraceEvent {
+  ph: 'E'
+}
+
+interface XTraceEvent extends TraceEvent {
+  ph: 'X'
+  dur?: number
+  tdur?: number
+}
+
+// The trace format supports a number of event types that we ignore.
+type ImportableTraceEvent = BTraceEvent | ETraceEvent | XTraceEvent
+type DurationEvent = BTraceEvent | ETraceEvent
+
+function filterIgnoredEventTypes(events: TraceEvent[]): ImportableTraceEvent[] {
+  const ret: ImportableTraceEvent[] = []
+  for (let ev of events) {
+    switch (ev.ph) {
+      case 'B':
+      case 'E':
+      case 'X':
+        ret.push(ev as ImportableTraceEvent)
+    }
+  }
+  return ret
+}
+
+function convertToDurationEvents(events: ImportableTraceEvent[]): DurationEvent[] {
+  const ret: DurationEvent[] = []
+  for (let ev of events) {
+    switch (ev.ph) {
+      case 'B':
+        ret.push(ev)
+        break
+
+      case 'E':
+        ret.push(ev)
+        break
+
+      case 'X':
+        let dur: number | null = null
+        if (ev.dur != null) dur = ev.dur
+        else if (ev.tdur != null) dur = ev.tdur
+
+        if (dur == null) {
+          console.warn('Found a complete event (X) with no duration. Skipping: ', ev)
+          continue
+        }
+
+        ret.push({...ev, ph: 'B'} as BTraceEvent)
+        ret.push({...ev, ph: 'E', ts: ev.ts + dur} as ETraceEvent)
+        break
+
+      default:
+        const _exhaustiveCheck: never = ev
+        return _exhaustiveCheck
+    }
+  }
+  return ret
+}
+
+function getProcessNamesByPid(events: TraceEvent[]): Map<number, string> {
+  const processNamesByPid = new Map<number, string>()
+  for (let ev of events) {
+    if (ev.ph === 'M' && ev.name === 'process_name' && ev.args && ev.args.name) {
+      processNamesByPid.set(ev.pid, ev.args.name)
+    }
+  }
+  return processNamesByPid
+}
+
+function getThreadNamesByPidTid(events: TraceEvent[]): Map<string, string> {
+  const threadNameByPidTid = new Map<string, string>()
+
+  for (let ev of events) {
+    if (ev.ph === 'M' && ev.name === 'thread_name' && ev.args && ev.args.name) {
+      const key = `${ev.pid}:${ev.tid}`
+      threadNameByPidTid.set(key, ev.args.name)
+    }
+  }
+  return threadNameByPidTid
+}
+
+function keyForEvent(event: TraceEvent): string {
+  let name = `${event.name || '(unnamed)'}`
+  if (event.args) {
+    name += ` ${JSON.stringify(event.args)}`
+  }
+  return name
+}
+
+function eventListToProfileGroup(events: TraceEvent[]): ProfileGroup {
+  const profileByPidTid = new Map<string, CallTreeProfileBuilder>()
+
+  const importableEvents = filterIgnoredEventTypes(events)
+  const durationEvents = convertToDurationEvents(importableEvents)
+
+  const processNamesByPid = getProcessNamesByPid(events)
+  const threadNamesByPidTid = getThreadNamesByPidTid(events)
+
+  durationEvents.sort((a, b) => {
+    if (a.ts < b.ts) return -1
+    if (a.ts > b.ts) return 1
+
+    // We have to be careful with events that have the same timestamp
+    if (a.pid === b.pid && a.tid === b.tid) {
+      const aKey = keyForEvent(a)
+      const bKey = keyForEvent(b)
+
+      if (aKey === bKey) {
+        // If the two elements have the same key, we need to process the begin
+        // event before the end event. This will be a zero-duration event.
+        if (a.ph === 'B' && b.ph === 'E') return -1
+        if (a.ph === 'E' && b.ph === 'B') return 1
+      } else {
+        // If the two elements have *different* keys, we want to process
+        // the end of an event before the beginning of the event to prevent
+        // out-of-order push/pops from the callstack.
+        if (a.ph === 'B' && b.ph === 'E') return 1
+        if (a.ph === 'E' && b.ph === 'B') return -1
+      }
+    }
+
+    return -1
+  })
+
+  if (durationEvents.length > 0) {
+    const firstTs = durationEvents[0].ts
+    for (let ev of durationEvents) {
+      ev.ts -= firstTs
+    }
+  }
+
+  function getOrCreateProfile(pid: number, tid: number) {
+    // We zero-pad the PID and TID to make sorting them by pid/tid pair later easier.
+    const pidTid = `${zeroPad('' + pid, 10)}:${zeroPad('' + tid, 10)}`
+
+    let profile = profileByPidTid.get(pidTid)
+    if (profile != null) return profile
+    profile = new CallTreeProfileBuilder()
+    profile.setValueFormatter(new TimeFormatter('microseconds'))
+    profileByPidTid.set(pidTid, profile)
+
+    const processName = processNamesByPid.get(pid)
+    const threadName = threadNamesByPidTid.get(`${pid}:${tid}`)
+
+    if (processName != null && threadName != null) {
+      profile.setName(`${processName} (pid ${pid}), ${threadName} (tid ${tid})`)
+    } else if (processName != null) {
+      profile.setName(`${processName} (pid ${pid}, tid ${tid})`)
+    } else if (threadName != null) {
+      profile.setName(`${threadName} (pid ${pid}, tid ${tid})`)
+    } else {
+      profile.setName(`pid ${pid}, tid ${tid}`)
+    }
+
+    return profile
+  }
+
+  for (let ev of durationEvents) {
+    const profile = getOrCreateProfile(ev.pid, ev.tid)
+    const key = keyForEvent(ev)
+    const frameInfo: FrameInfo = {
+      key: key,
+      name: key,
+    }
+    switch (ev.ph) {
+      case 'B':
+        profile.enterFrame(frameInfo, ev.ts)
+        break
+
+      case 'E':
+        profile.leaveFrame(frameInfo, ev.ts)
+        break
+
+      default:
+        const _exhaustiveCheck: never = ev
+        return _exhaustiveCheck
+    }
+  }
+
+  // For now, we just sort processes by pid & tid.
+  // TODO: The standard specifies that metadata events with the name
+  // "process_sort_index" and "thread_sort_index" can be used to influence the
+  // order, but for simplicity we'll ignore that until someone complains :)
+  const profilePairs = Array.from(profileByPidTid.entries())
+  sortBy(profilePairs, p => p[0])
+
+  return {name: '', indexToView: 0, profiles: profilePairs.map(p => p[1])}
+}
+
+function isTraceEventList(maybeEventList: any): maybeEventList is TraceEvent[] {
+  if (!Array.isArray(maybeEventList)) return false
+  if (maybeEventList.length === 0) return false
+
+  // Both ph and ts should be provided for every event. In theory, many other
+  // fields are mandatory, but without these fields, we won't usefully be able
+  // to import the data, so we'll rely upon these.
+  for (let el of maybeEventList) {
+    if (!('ph' in el) || !('ts' in el)) return false
+  }
+
+  return true
+}
+
+function isTraceEventObject(
+  maybeTraceEventObject: any,
+): maybeTraceEventObject is {traceEvents: TraceEvent[]} {
+  if (!('traceEvents' in maybeTraceEventObject)) return false
+  return isTraceEventList(maybeTraceEventObject['traceEvents'])
+}
+
+export function isTraceEventFormatted(
+  rawProfile: any,
+): rawProfile is {traceEvents: TraceEvent[]} | TraceEvent[] {
+  // We're only going to suppor the JSON formatted profiles for now.
+  // The spec also discusses support for data embedded in ftrace supported data: https://lwn.net/Articles/365835/.
+
+  // TODO(jlfwong): The spec also specifies that it's valid for the trace to not contain a terminating `]`.
+  // That complicates things a bit for us, so let's just ignore that for now until someone writes in with a
+  // bug report from real data.
+
+  return isTraceEventObject(rawProfile) || isTraceEventList(rawProfile)
+}
+
+export function importTraceEvents(
+  rawProfile: {traceEvents: TraceEvent[]} | TraceEvent[],
+): ProfileGroup {
+  if (isTraceEventObject(rawProfile)) {
+    return eventListToProfileGroup(rawProfile.traceEvents)
+  } else if (isTraceEventList(rawProfile)) {
+    return eventListToProfileGroup(rawProfile)
+  } else {
+    const _exhaustiveCheck: never = rawProfile
+    return _exhaustiveCheck
+  }
+}

src/import/v8cpuFormatter.ts

@@ -0,0 +1,71 @@
+import {CPUProfile, CPUProfileNode} from './chrome'
+
+/**
+ * This importer handles an old format used by the C++ API of V8. This format is still used by v8-profiler-node8.
+ * There are two differences between the two formats:
+ *  - Nodes are a tree in the old format and a flat array in the new format
+ *  - Weights are timestamps in the old format and deltas in the new format.
+ *
+ * For more information, see https://github.com/hyj1991/v8-profiler-node8
+ */
+
+interface OldCPUProfileNode {
+  functionName: string
+  lineNumber: number
+  scriptId: string
+  url: string
+  hitCount: number
+  bailoutReason: string
+  id: number
+  children: OldCPUProfileNode[]
+}
+
+export interface OldCPUProfile {
+  startTime: number
+  endTime: number
+  head: OldCPUProfileNode
+  samples: number[]
+  timestamps: number[]
+}
+
+function treeToArray(root: OldCPUProfileNode): CPUProfileNode[] {
+  const nodes: CPUProfileNode[] = []
+  function visit(node: OldCPUProfileNode) {
+    nodes.push({
+      id: node.id,
+      callFrame: {
+        columnNumber: 0,
+        functionName: node.functionName,
+        lineNumber: node.lineNumber,
+        scriptId: node.scriptId,
+        url: node.url,
+      },
+      hitCount: node.hitCount,
+      children: node.children.map(child => child.id),
+    })
+    node.children.forEach(visit)
+  }
+  visit(root)
+  return nodes
+}
+
+function timestampsToDeltas(timestamps: number[], startTime: number): number[] {
+  return timestamps.map((timestamp, index) => {
+    const lastTimestamp = index === 0 ? startTime * 1000000 : timestamps[index - 1]
+    return timestamp - lastTimestamp
+  })
+}
+
+/**
+ * Convert the old tree-based format to the new flat-array based format
+ */
+export function chromeTreeToNodes(content: OldCPUProfile): CPUProfile {
+  // Note that both startTime and endTime are now in microseconds
+  return {
+    samples: content.samples,
+    startTime: content.startTime * 1000000,
+    endTime: content.endTime * 1000000,
+    nodes: treeToArray(content.head),
+    timeDeltas: timestampsToDeltas(content.timestamps, content.startTime),
+  }
+}