1.4.0

This changes the HoverTip placement logic to use measurements from the actual DOM node rather than basing everything on the maximum sizes.

This avoids some counter-intuitive behaviour, most importantly situations where the label would overflow off the left side of the screen for no obvious reason.

Fixes #394
Fixes #256

.github/workflows/ci.yml

@@ -0,0 +1,43 @@
+name: Node.js CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm test
+        env:
+          CI: true
+
+      - name: Coveralls Parallel
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.github_token }}
+          flag-name: run-${{ matrix.node-version }}
+          parallel: true
+
+  finish:
+    needs: test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Coveralls Finished
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.github_token }}
+          parallel-finished: true

.gitignore

@@ -2,4 +2,5 @@ node_modules
 .cache
 dist
 .idea
-coverage
+coverage
+.vscode

.travis.yml

@@ -1,6 +0,0 @@
-language: node_js
-node_js:
-  - '10'
-  - '12'
-  - '13'
-  - 'node'

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "editor.formatOnSave": true,
-}

CHANGELOG.md

@@ -1,4 +1,79 @@
-## Unreleased
+## [1.14.0] - 2022-05-19
+
+### Added
+
+- File and line information is now displayed in hover tips [[#365](https://github.com/jlfwong/speedscope/pull/365)] (by [@sokra](https://github.com/sokra))
+- Support for stackprof object mode [[#391](https://github.com/jlfwong/speedscope/pull/391)] (by [@alexcoco](https://github.com/alexcoco))
+- Support for hash params to control view-mode [[#362](https://github.com/jlfwong/speedscope/pull/362)] (by [@djudd](https://github.com/djudd))
+- Support for profiles over 512MB now works [[#385](https://github.com/jlfwong/speedscope/pull/385)] (by [@jlfwong](https://github.com/jlfwong))
+- Support for relative URLs in profileURL hashParam [[#357](https://github.com/jlfwong/speedscope/pull/357)] (by [@danvk](https://github.com/danvk))
+
+### Fixed
+
+- Allow collapsed stacks with invalid lines for the Brenden Gregg stack format [[#336](https://github.com/jlfwong/speedscope/pull/336)] (by [@P403n1x87](https://github.com/P403n1x87))
+- Allow pasting into the search box [[#338](https://github.com/jlfwong/speedscope/pull/338)] (by [@P403n1x87](https://github.com/P403n1x87))
+- Prevent hover tips from getting unnecessarily clipped outside container bounds [[#395](https://github.com/jlfwong/speedscope/pull/395)] (by [@jlfwong](https://github.com/jlfwong))
+
+## [1.13.0] - 2021-02-14
+
+### Added
+
+- Support for importing callgrind profiles [[#331](https://github.com/jlfwong/speedscope/pull/331)]
+
+## [1.12.1] - 2020-11-12
+
+### Fixed
+
+- Fixed for retina displays [[#327](https://github.com/jlfwong/speedscope/issues/327)]
+
+## [1.12.0] - 2020-11-12
+
+### Added
+
+- Dark mode! [[#323](https://github.com/jlfwong/speedscope/pull/323)]
+
+### Fixed
+
+- Fixed incorrect highlighting when search result overlaps "…" [[#326](https://github.com/jlfwong/speedscope/pull/326)]
+
+## [1.11.1] - 2020-10-25
+
+### Fixed
+
+- Fix trace-event import for many cases where there are 'ts' collisions [[#322](https://github.com/jlfwong/speedscope/pull/322)]
+- Fix import of trace event files where B/E events' args don't match [[#321](https://github.com/jlfwong/speedscope/pull/321)]
+
+## [1.11.0] - 2020-10-13
+
+### Added
+
+- Support remapping profiles using source maps [[#317](https://github.com/jlfwong/speedscope/pull/317)]
+
+### Fixed
+
+- Fix line & column numbers in imports from Chrome & Firefox [[#318](https://github.com/jlfwong/speedscope/pull/318)]
+
+## [1.10.0] - 2020-09-29
+
+### Added
+
+- Support for importing profiles from Safari [[#300](https://github.com/jlfwong/speedscope/pull/300)] (by [@radex](https://github.com/radex))
+
+### Fixed
+
+- Fixed browser not opening on Windows when using the CLI [[#307](https://github.com/jlfwong/speedscope/pull/307)] (by [@spillerrec](https://github.com/spillerrec))
+- Fixed import of UTF-16 encoded files w/ BOM [[#314](https://github.com/jlfwong/speedscope/pull/314)]
+- Removed accidental dependency on React [[#315](https://github.com/jlfwong/speedscope/pull/315)]
+
+## [1.9.0] - 2020-08-05
+
+### Added
+
+- Provide prev/next buttons to cycle through search results, make search results more visually prominen [[#304](https://github.com/jlfwong/speedscope/pull/304)]
+
+### Fixed
+
+- Fix accumulated errors in Chrome profile imports caused by zeroed negative timeDeltas [[#305](https://github.com/jlfwong/speedscope/pull/305)] (by [@taneliang](https://github.com/taneliang))
 
 ## [1.8.0] - 2020-07-19
 

README-zh_CN.md

@@ -0,0 +1,126 @@
+简体中文 | [English](./README.md)
+# 🔬speedscope
+
+一个快速，交互式，基于网络的性能分析工具。 [FlameGraphs][1]（火焰图）的另一个替代品。它可以轻松显示数兆的配置文件并且不会使浏览器崩溃。
+
+给定原始分析数据，你就可以交互式的探索数据，了解应用程序中什么部分速度较慢，或者分配所有内存，或者对任何数据进行分析。
+
+![Example Profile](https://user-images.githubusercontent.com/150329/40900669-86eced80-6781-11e8-92c1-dc667b651e72.gif)
+
+[0]: https://en.wikipedia.org/wiki/Profiling_(computer_programming)#Statistical_profilers
+[1]: https://github.com/brendangregg/FlameGraph
+
+# 使用
+
+访问https://www.speedscope.app，上传文件或者拖拽到页面上。配置文件不会上传到任何地方——应用程序完全在浏览器中。
+
+## 命令行中使用
+
+为了方便在不联网的情况下或者在终端中使用， 你可以使用npm下载speedscope:
+
+    npm install -g speedscope
+
+调用`speedscope /path/to/profile` 就可以在默认浏览器中加载speedscope。
+
+## 独立使用
+
+如果你不想使用npm或者node下载，你也可以在这里下载独立的版本https://github.com/jlfwong/speedscope/releases.
+下载完一个版本的压缩文件之后，解压并在谷歌或者火狐浏览器中打开`index.html`文件即可。
+
+## 支持的文件格式
+
+Speedscope可以不同编程语言和环境的各种不同探查器中摄取概要文件。单击下面的链接获取从特定源导入的文档。
+
+- JavaScript
+  - [从 Chrome 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-Chrome)
+  - [从 Firefox 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-Firefox)
+  - [从 Safari 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-Safari)
+  - [从 Node.js 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-Node.js)
+- Ruby
+  - [从 stackprof 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-stackprof-(ruby))
+  - [从 rbspy 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-rbspy-(ruby))
+  - [从 ruby-prof 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-ruby-prof)
+- Python
+  - [从 py-spy 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-py-spy-(python))
+  - [pyspeedscope](https://github.com/windelbouwman/pyspeedscope)
+  - [从 Austin 导入](https://github.com/P403n1x87/austin-python#format-conversion)
+  - [从 pyinstrument 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-pyinstrument-(python))
+- PHP
+  - [从 phpspy 或者 sj-i/php-profiler 导入](https://github.com/sj-i/php-profiler/pull/101)
+- Go
+  - [从 pprof 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-pprof-(go))  
+- Rust
+  - [flamescope](https://github.com/coolreader18/flamescope)
+- Native code
+  - [从 Instruments.app 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-Instruments.app) (macOS)
+  - [从 `perf` 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-perf-(linux)) (linux)
+- [从 .NET Core 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-.NET-Core)
+- [从 GHC (Haskell) 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-Haskell)
+- [从 custom sources 导入](https://github.com/jlfwong/speedscope/wiki/Importing-from-custom-sources)
+
+极力欢迎贡献添加对其他格式的支持！查看 issues ["import source" tag](https://github.com/jlfwong/speedscope/issues?q=is%3Aissue+is%3Aopen+label%3A%22import+source%22).
+
+## 通过URL导入
+
+要通过URL加载特定的配置文件，你可以添加一个这样的hash片段 `#profileURL=[URL-encoded profile URL]&title=[URL-encoded custom title]`. 注意：托管配置文件的服务器必须配置CORS以允许来自speedscope的AJAX请求。
+
+## 页面
+
+### 🕰Time Order
+![Detail View](https://user-images.githubusercontent.com/150329/42108613-e6ef6d3a-7b8f-11e8-93d4-541b2cb93fe5.png)
+
+在 "Time Order" 页面 (默认)，调用堆栈按照它们在输入文件中出现的顺序从左到右排列，这通常是安排它们被记录的时间顺序。这个视图对于理解应用程序随时间变化的行为非常有帮助，比如 "首次从数据库获取到数据，然后为序列化准备数据，数据被序列化为JSON"。 
+
+水平轴表示每个堆栈的“权重”(最常见的是CPU时间)，垂直轴显示在运行期间处于活动状态的堆栈。如果你点击其中一个框，你将能够看到关于它的统计摘要。
+
+
+### ⬅️Left Heavy
+![Left Heavy View](https://user-images.githubusercontent.com/150329/44534434-a05f8380-a6ac-11e8-86ac-e3e05e577c52.png)
+
+在 "Left Heavy" 页面，将相同的堆栈分组在一，不管它们是否按顺序记录。然后，对堆栈进行排序，使每个父堆栈中最重的堆栈位于左侧——因此称为“左权重”。 这个视图对于理解在其他调用栈之间有成百上千个函数交错调用的情况下，时间都花费在了哪里很有用。
+
+### 🥪 Sandwich
+![Sandwich View](https://user-images.githubusercontent.com/150329/42108467-76a57baa-7b8f-11e8-815f-1df7b6ac3ede.png)
+
+Sandwich 是一个表格视图，你可以在其中找到所有函数及其相关时间的列表。您可以按自己的时间或总时间排序。
+之所以称为"Sandwich"视图，是因为如果你选择表中的某一行，就可以看到所选对象的所有调用者和被调用者的火焰图
+。
+
+
+## 导航
+
+一旦配置文件被加载，主视图就会被分成两部分:顶部区域是“迷你地图”，底部区域是“堆栈视图”。
+
+### 迷你地图导航
+
+* 在任意一个轴上滚动以进行平移
+* 单击并拖动可将视图缩小到特定范围
+
+### 堆栈视图
+
+* 在任意一个轴上滚动以进行平移
+* 缩放
+* 按住 Cmd+Scroll 进行缩放
+* 双击一帧以使视口适应
+* 点击一个框以查看关于它的摘要统计
+
+### 键盘导航
+
+* `+`: 放大
+* `-`: 缩小
+* `0`: 缩小以看到整体情况
+* `w`/`a`/`s`/`d` 或者箭头键: pan around the profile
+* `1`: 切换到 "Time Order" 视图
+* `2`: 切换到 "Left Heavy" 视图
+* `3`: 切换到 "Sandwich" 视图
+* `r`: 在火焰图中折叠递归
+* `Cmd+S`/`Ctrl+S` 保存现有文件
+* `Cmd+O`/`Ctrl+O` 打开一个新文件
+* `n`: 跳转到下一个文件/如果下一个文件存在
+* `p`: 跳转到上一个文件/如果上一个文件存在
+* `t`: 打开一个新文件/如果新文件存在
+* `Cmd+F`/`Ctrl+F`: 打开搜索。打开时，按下 `Enter` and `Shift+Enter` 查看结果
+
+## 参与贡献
+
+你想成为 speedscope 的贡献者吗? 查看 [CONTRIBUTING.md](./CONTRIBUTING.md) 关于设置开发环境的说明。

README.md

@@ -1,4 +1,5 @@
-# 🔬speedscope
+English | [简体中文](./README-zh_CN.md)
+# 🔬speedscope 
 
 A fast, interactive web-based viewer for performance profiles. An alternative viewer for [FlameGraphs][1]. Will happily display multi-megabyte profiles without crashing your browser.
 
@@ -36,6 +37,7 @@ speedscope is designed to ingest profiles from a variety of different profilers
 - JavaScript
   - [Importing from Chrome](https://github.com/jlfwong/speedscope/wiki/Importing-from-Chrome)
   - [Importing from Firefox](https://github.com/jlfwong/speedscope/wiki/Importing-from-Firefox)
+  - [Importing from Safari](https://github.com/jlfwong/speedscope/wiki/Importing-from-Safari)
   - [Importing from Node.js](https://github.com/jlfwong/speedscope/wiki/Importing-from-Node.js)
 - Ruby
   - [Importing from stackprof](https://github.com/jlfwong/speedscope/wiki/Importing-from-stackprof-(ruby))
@@ -44,6 +46,10 @@ speedscope is designed to ingest profiles from a variety of different profilers
 - Python
   - [Importing from py-spy](https://github.com/jlfwong/speedscope/wiki/Importing-from-py-spy-(python))
   - [pyspeedscope](https://github.com/windelbouwman/pyspeedscope)
+  - [Importing from Austin](https://github.com/P403n1x87/austin-python#format-conversion)
+  - [Importing from pyinstrument](https://github.com/jlfwong/speedscope/wiki/Importing-from-pyinstrument-(python))
+- PHP
+  - [Importing from phpspy or sj-i/php-profiler](https://github.com/sj-i/php-profiler/pull/101)
 - Go
   - [Importing from pprof](https://github.com/jlfwong/speedscope/wiki/Importing-from-pprof-(go))  
 - Rust
@@ -79,7 +85,7 @@ In the "Left Heavy" view, identical stacks are grouped together, regardless of w
 ### 🥪 Sandwich
 ![Sandwich View](https://user-images.githubusercontent.com/150329/42108467-76a57baa-7b8f-11e8-815f-1df7b6ac3ede.png)
 
-The Sandwich view is a table view in which you can find a list of all functions an their associated times. You can sort by self time or total time.
+The Sandwich view is a table view in which you can find a list of all functions and their associated times. You can sort by self time or total time.
 It's called "Sandwich" view because if you select one of the rows in the table, you can see flamegraphs for all the callers and callees of the selected
 row.
 
@@ -116,6 +122,7 @@ Once a profile has loaded, the main view is split into two: the top area is the
 * `n`: Go to next profile/thread if one is available
 * `p`: Go to previous profile/thread if one is available
 * `t`: Open the profile/thread selector if available
+* `Cmd+F`/`Ctrl+F`: to open search. While open, `Enter` and `Shift+Enter` cycle through results
 
 ## Contributing
 

bin/cli.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const os = require('os')
 const stream = require('stream')
 
-const opn = require('opn')
+const open = require('open')
 
 const helpString = `Usage: speedscope [filepath]
 
@@ -66,10 +66,20 @@ async function main() {
     const relPath = process.argv[2]
     const sourceBuffer = await getProfileBuffer(relPath)
     const filename = path.basename(relPath)
-    const sourceBase64 = sourceBuffer.toString('base64')
-    const jsSource = `speedscope.loadFileFromBase64(${JSON.stringify(filename)}, ${JSON.stringify(
-      sourceBase64,
-    )})`
+
+    let jsSource
+    try {
+      const sourceBase64 = sourceBuffer.toString('base64')
+      jsSource = `speedscope.loadFileFromBase64(${JSON.stringify(filename)}, ${JSON.stringify(
+        sourceBase64,
+      )})`
+    } catch(e) {
+      if (e && e.message && /Cannot create a string longer than/.exec(e.message)) {
+        jsSource = `alert("Sorry, ${filename} is too large to be loaded via command-line argument! Try dragging it into speedscope instead.")`
+      } else {
+        throw e
+      }
+    }
 
     const filePrefix = `speedscope-${+new Date()}-${process.pid}`
     const jsPath = path.join(os.tmpdir(), `${filePrefix}.js`)
@@ -89,7 +99,11 @@ async function main() {
 
   console.log('Opening', urlToOpen, 'in your default browser')
 
-  await opn(urlToOpen, {wait: false})
+  // We'd like to avoid blocking the terminal on the browsing closing,
+  // but for some reason this doesn't work at all on Windows if we
+  // don't use wait: true.
+  const wait = process.platform === "win32";
+  await open(urlToOpen, {wait})
 }
 
 main()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "speedscope",
-  "version": "1.8.0",
+  "version": "1.14.0",
   "description": "",
   "repository": "jlfwong/speedscope",
   "main": "index.js",
@@ -13,7 +13,7 @@
     "prettier": "prettier --write 'src/**/*.ts' 'src/**/*.tsx'",
     "lint": "eslint 'src/**/*.ts' 'src/**/*.tsx'",
     "jest": "./scripts/test-setup.sh && jest --runInBand",
-    "coverage": "npm run jest -- --coverage && coveralls < coverage/lcov.info",
+    "coverage": "npm run jest -- --coverage",
     "typecheck": "tsc --noEmit",
     "test": "./scripts/ci.sh",
     "serve": "parcel assets/index.html --open --no-autoinstall"
@@ -34,11 +34,10 @@
     "@types/jszip": "3.1.4",
     "@types/node": "14.0.1",
     "@types/pako": "1.0.0",
-    "@typescript-eslint/eslint-plugin": "2.33.0",
-    "@typescript-eslint/parser": "2.33.0",
+    "@typescript-eslint/eslint-plugin": "4.19.0",
+    "@typescript-eslint/parser": "4.19.0",
     "acorn": "7.2.0",
     "aphrodite": "2.1.0",
-    "coveralls": "3.0.1",
     "eslint": "6.0.0",
     "eslint-plugin-prettier": "2.6.0",
     "eslint-plugin-react-hooks": "4.0.2",
@@ -50,13 +49,12 @@
     "preact": "10.4.1",
     "prettier": "2.0.4",
     "protobufjs": "6.8.8",
-    "react-redux": "^7.2.0",
-    "redux": "^4.0.5",
+    "source-map": "0.6.1",
     "ts-jest": "24.3.0",
-    "typescript": "3.9.2",
-    "typescript-eslint-parser": "17.0.1",
+    "typescript": "4.2.3",
     "typescript-json-schema": "0.42.0",
-    "uglify-es": "3.2.2"
+    "uglify-es": "3.2.2",
+    "uint8array-json-parser": "jlfwong/uint8array-json-parser#edce51ce"
   },
   "jest": {
     "transform": {
@@ -79,7 +77,6 @@
     ]
   },
   "dependencies": {
-    "opn": "5.3.0",
-    "react": "^16.13.1"
+    "open": "7.2.0"
   }
 }

sample/profiles/callgrind/callgrind.example.log

@@ -0,0 +1,24 @@
+# callgrind format
+events: Instructions
+
+fl=file1.c
+fn=main
+16 20
+cfn=func1
+calls=1 50
+16 400
+cfi=file2.c
+cfn=func2
+calls=3 20
+16 400
+
+fn=func1
+51 100
+cfi=file2.c
+cfn=func2
+calls=2 20
+51 300
+
+fl=file2.c
+fn=func2
+20 700

sample/profiles/callgrind/callgrind.multiple-event-types.log

@@ -0,0 +1,29 @@
+version: 1
+creator: xdebug 3.0.2 (PHP 7.4.14)
+cmd: /var/www/html/index.php
+part: 1
+positions: line
+
+events: Time_(10ns) Memory_(bytes)
+
+fl=(1) file1.c
+fn=(1) main
+16 20 15000
+cfn=(2) func1
+calls=1 50
+16 400 20000
+cfi=(2) file2.c
+cfn=(3) func2
+calls=3 51
+16 400 3000
+
+fn=(2)
+51 100 4000
+cfi=(2)
+cfn=(3)
+calls=2 20
+51 300 5000
+
+fl=(2)
+fn=(3)
+20 700 6000

sample/profiles/callgrind/callgrind.name-compression.log

@@ -0,0 +1,24 @@
+# callgrind format
+events: Instructions
+
+fl=(1) file1.c
+fn=(1) main
+16 20
+cfn=(2) func1
+calls=1 50
+16 400
+cfi=(2) file2.c
+cfn=(3) func2
+calls=3 20
+16 400
+
+fn=(2)
+51 100
+cfi=(2)
+cfn=(3)
+calls=2 20
+51 300
+
+fl=(2)
+fn=(3)
+20 700

sample/profiles/source-maps/README.md

@@ -0,0 +1,4 @@
+This directory contains profiles & source-maps to test if source-map
+remapping of profiles is working correctly. See the corresponding
+"sourcemaps" directory in programs/javascript to see how these were
+generated.

sample/profiles/source-maps/esbuild/typescript-source-map-test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["gamma.ts", "beta.ts", "delta.ts", "alpha.ts", "kludge.ts", "typescript-source-map-test.ts"],
+  "sourcesContent": ["export const gamma = () => {\n  let prod = 1\n  for (let i = 1; i < 1000; i++) {\n    prod *= i\n  }\n  return prod\n}\n", "import {gamma} from './gamma'\n\nexport function beta() {\n  for (let i = 0; i < 10; i++) {\n    gamma()\n  }\n}\n", "import {gamma} from './gamma'\n\nexport const delta = function () {\n  for (let i = 0; i < 10; i++) {\n    gamma()\n  }\n}\n", "import {beta} from './beta'\nimport {delta} from './delta'\n\nexport function alpha() {\n  ;(function () {\n    for (let i = 0; i < 1000; i++) {\n      beta()\n      delta()\n    }\n  })()\n}\n", "import {alpha} from './alpha'\n\nexport class Kludge {\n  constructor() {\n    alpha()\n    console.log(this.floop)\n  }\n\n  zap() {\n    alpha()\n  }\n\n  get floop(): number {\n    alpha()\n    return 1\n  }\n}\n", "import {Kludge} from './kludge'\n\nconst k = new Kludge()\nk.zap()\n"],
+  "mappings": "MAAO,KAAM,GAAQ,KACnB,GAAI,GAAO,EACX,OAAS,GAAI,EAAG,EAAI,IAAM,IACxB,GAAQ,EAEV,MAAO,ICHF,aACL,OAAS,GAAI,EAAG,EAAI,GAAI,IACtB,ICFG,KAAM,GAAQ,WACnB,OAAS,GAAI,EAAG,EAAI,GAAI,IACtB,KCDG,aACJ,AAAC,YACA,OAAS,GAAI,EAAG,EAAI,IAAM,IACxB,IACA,QCPN,QAGE,cACE,IACA,QAAQ,IAAI,KAAK,OAGnB,MACE,OAGE,SACF,WACO,GCZX,KAAM,GAAI,GAAI,GACd,EAAE",
+  "names": []
+}

sample/profiles/source-maps/parcel/typescript-source-map-test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["gamma.ts","beta.ts","delta.ts","alpha.ts","kludge.ts","typescript-source-map-test.ts"],"names":[],"mappings":";AAAO,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,WAAA,EAAA,IAAM,EAAQ,WAEd,IADD,IAAA,EAAO,EACF,EAAI,EAAG,EAAI,IAAM,IACxB,GAAQ,EAEH,OAAA,GALF,QAAA,MAAA;;ACMN,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,KAAA,EAND,IAAA,EAAA,QAAA,WAEM,SAAU,IACT,IAAA,IAAI,EAAI,EAAG,EAAI,GAAI,KACtB,EAAA,EAAA;;ACFG,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,WAAA,EAFP,IAAA,EAAA,QAAA,WAEa,EAAQ,WACd,IAAA,IAAI,EAAI,EAAG,EAAI,GAAI,KACtB,EAAA,EAAA,UAFG,QAAA,MAAA;;ACQN,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,MAAA,EAVD,IAAA,EAAA,QAAA,UACA,EAAA,QAAA,WAEM,SAAU,KACZ,WACK,IAAA,IAAI,EAAI,EAAG,EAAI,IAAM,KACxB,EAAA,EAAA,SACA,EAAA,EAAA,SAHF;;ACFJ,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,YAAA,EAFA,IAAA,EAAA,QAAA,WAEA,EAAA,WACE,SAAA,KACE,EAAA,EAAA,SACA,QAAQ,IAAI,KAAK,OAWrB,OARE,EAAA,UAAA,IAAA,YACE,EAAA,EAAA,UAGF,OAAA,eAAI,EAAA,UAAA,QAAK,CAAT,IAAA,WAES,OADP,EAAA,EAAA,SACO,GAFA,YAAA,EAVX,cAAA,IAcA,EAdA,GAAA,QAAA,OAAA;;ACCA,aAHA,IAAA,EAAA,QAAA,YAEM,EAAI,IAAI,EAAJ,OACV,EAAE","file":"typescript-source-map-test.js","sourceRoot":"..","sourcesContent":["export const gamma = () => {\n  let prod = 1\n  for (let i = 1; i < 1000; i++) {\n    prod *= i\n  }\n  return prod\n}\n","import {gamma} from './gamma'\n\nexport function beta() {\n  for (let i = 0; i < 10; i++) {\n    gamma()\n  }\n}\n","import {gamma} from './gamma'\n\nexport const delta = function () {\n  for (let i = 0; i < 10; i++) {\n    gamma()\n  }\n}\n","import {beta} from './beta'\nimport {delta} from './delta'\n\nexport function alpha() {\n  ;(function () {\n    for (let i = 0; i < 1000; i++) {\n      beta()\n      delta()\n    }\n  })()\n}\n","import {alpha} from './alpha'\n\nexport class Kludge {\n  constructor() {\n    alpha()\n    console.log(this.floop)\n  }\n\n  zap() {\n    alpha()\n  }\n\n  get floop(): number {\n    alpha()\n    return 1\n  }\n}\n","import {Kludge} from './kludge'\n\nconst k = new Kludge()\nk.zap()\n"]}

sample/profiles/source-maps/webpack/typescript-source-map-test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://speedscope-sourcemap-test-project/./gamma.ts","webpack://speedscope-sourcemap-test-project/./beta.ts","webpack://speedscope-sourcemap-test-project/./delta.ts","webpack://speedscope-sourcemap-test-project/./alpha.ts","webpack://speedscope-sourcemap-test-project/./typescript-source-map-test.ts","webpack://speedscope-sourcemap-test-project/./kludge.ts"],"names":["gamma","prod","i","beta","delta","alpha","console","log","this","floop","zap"],"mappings":"mBAAO,IAAMA,EAAQ,WAEnB,IADA,IAAIC,EAAO,EACFC,EAAI,EAAGA,EAAI,IAAMA,IACxBD,GAAQC,EAEV,OAAOD,GCHF,SAASE,IACd,IAAK,IAAID,EAAI,EAAGA,EAAI,GAAIA,IACtBF,ICFG,IAAMI,EAAQ,WACnB,IAAK,IAAIF,EAAI,EAAGA,EAAI,GAAIA,IACtBF,KCDG,SAASK,KACb,WACC,IAAK,IAAIH,EAAI,EAAGA,EAAI,IAAMA,IACxBC,IACAC,IAHH,ICFO,ICAV,WACE,aACEC,IACAC,QAAQC,IAAIC,KAAKC,OAWrB,OARE,YAAAC,IAAA,WACEL,KAGF,sBAAI,oBAAK,C,IAAT,WAEE,OADAA,IACO,G,gCAEX,EAdA,KDCEK,O","file":"typescript-source-map-test.js","sourcesContent":["export const gamma = () => {\n  let prod = 1\n  for (let i = 1; i < 1000; i++) {\n    prod *= i\n  }\n  return prod\n}\n","import {gamma} from './gamma'\n\nexport function beta() {\n  for (let i = 0; i < 10; i++) {\n    gamma()\n  }\n}\n","import {gamma} from './gamma'\n\nexport const delta = function () {\n  for (let i = 0; i < 10; i++) {\n    gamma()\n  }\n}\n","import {beta} from './beta'\nimport {delta} from './delta'\n\nexport function alpha() {\n  ;(function () {\n    for (let i = 0; i < 1000; i++) {\n      beta()\n      delta()\n    }\n  })()\n}\n","import {Kludge} from './kludge'\n\nconst k = new Kludge()\nk.zap()\n","import {alpha} from './alpha'\n\nexport class Kludge {\n  constructor() {\n    alpha()\n    console.log(this.floop)\n  }\n\n  zap() {\n    alpha()\n  }\n\n  get floop(): number {\n    alpha()\n    return 1\n  }\n}\n"],"sourceRoot":""}

sample/profiles/stackcollapse/simple-with-invalids.txt

@@ -0,0 +1,8 @@
+# comment that gives extra info about the samples
+// some other comment
+a;b;c 1
+a;b;c 1
+a;b;d 4
+a;b;c 3
+a;b 5
+invalid line

sample/profiles/trace-event/bex-interaction.json

@@ -0,0 +1,25 @@
+[
+  { "pid": 0, "tid": 0, "ph": "B", "ts": 0, "name": "A" },
+  { "pid": 0, "tid": 0, "ph": "E", "ts": 2, "name": "A" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 0, "dur": 2, "name": "B" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 10, "dur": 2, "name": "C" },
+  { "pid": 0, "tid": 0, "ph": "B", "ts": 10, "name": "D" },
+  { "pid": 0, "tid": 0, "ph": "E", "ts": 12, "name": "D" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 20, "dur": 1, "name": "E" },
+  { "pid": 0, "tid": 0, "ph": "B", "ts": 20, "name": "F" },
+  { "pid": 0, "tid": 0, "ph": "E", "ts": 22, "name": "F" },
+
+  { "pid": 0, "tid": 0, "ph": "B", "ts": 30, "name": "G" },
+  { "pid": 0, "tid": 0, "ph": "E", "ts": 32, "name": "G" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 30, "dur": 1, "name": "H" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 41, "dur": 1, "name": "I" },
+  { "pid": 0, "tid": 0, "ph": "B", "ts": 40, "name": "J" },
+  { "pid": 0, "tid": 0, "ph": "E", "ts": 42, "name": "J" },
+
+  { "pid": 0, "tid": 0, "ph": "B", "ts": 50, "name": "K" },
+  { "pid": 0, "tid": 0, "ph": "E", "ts": 52, "name": "K" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 51, "dur": 1, "name": "L" }
+]

sample/profiles/trace-event/end-event-with-empty-stack.json

@@ -0,0 +1,5 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "alpha", "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "alpha", "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "beta", "ts": 2}
+]

sample/profiles/trace-event/end-non-top-of-stack.json

@@ -0,0 +1,6 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 1}, "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "B", "args": {"x": 2}, "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "A", "args": {"x": 2}, "ts": 10},
+  {"pid": 0, "tid": 0, "ph": "X", "name": "Z", "args": {"x": 1}, "ts": 10, "dur": 1}
+]

sample/profiles/trace-event/event-reordering-name-match.json

@@ -0,0 +1,7 @@
+[
+  {"tid": 1, "ph": "X", "pid": 0, "name": "alpha", "args": {"x": 0}, "ts": 0, "dur": 10},
+  {"tid": 1, "ph": "B", "pid": 0, "name": "beta", "args": {"x": 0}, "ts": 1},
+  {"tid": 1, "ph": "B", "pid": 0, "name": "gamma", "args": {"x": 0}, "ts": 1},
+  {"tid": 1, "ph": "E", "pid": 0, "name": "beta", "args": {"x": 1}, "ts": 2},
+  {"tid": 1, "ph": "E", "pid": 0, "name": "gamma", "args": {"x": 1}, "ts": 2}
+]

sample/profiles/trace-event/invalid-x-nesting.json

@@ -0,0 +1,4 @@
+[
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 0, "dur": 10, "name": "alpha" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 5, "dur": 10, "name": "beta" }
+]

sample/profiles/trace-event/matching-x.json

@@ -0,0 +1,7 @@
+[
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 0, "dur": 10, "name": "alpha" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 1, "dur": 1, "name": "beta" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 1, "dur": 1, "name": "gamma" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 5, "dur": 1, "name": "gamma" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 5, "dur": 1, "name": "beta" }
+]

sample/profiles/trace-event/mismatched-args.json

@@ -0,0 +1,4 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 1}, "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "A", "args": {"x": 2}, "ts": 10}
+]

sample/profiles/trace-event/mismatched-name.json

@@ -0,0 +1,4 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "alpha", "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "beta", "ts": 10}
+]

sample/profiles/trace-event/not-enough-end-events.json

@@ -0,0 +1,5 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 1}, "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 2}, "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "X", "name": "A", "args": {"x": 1}, "ts": 10, "dur": 1}
+]

sample/profiles/trace-event/only-begin-events.json

@@ -0,0 +1,5 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 1}, "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "B", "args": {"x": 2}, "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "C", "args": {"x": 2}, "ts": 2}
+]

sample/profiles/trace-event/out-of-order-unbalanced-name.json

@@ -0,0 +1,6 @@
+[
+  {"pid": 0, "tid": 0, "ph": "E", "name": "alpha", "ts": 9},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "beta", "ts": 10},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "alpha", "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "beta", "ts": 1}
+]

sample/profiles/trace-event/out-of-order.json

@@ -0,0 +1,10 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "B", "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "B", "ts": 9},
+
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "A", "ts": 10},
+
+  {"pid": 0, "tid": 0, "ph": "B", "name": "C", "ts": 2},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "C", "ts": 8}
+]

sample/profiles/trace-event/unbalanced-args.json

@@ -0,0 +1,6 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 1}, "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 2}, "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "A", "args": {"x": 1}, "ts": 9},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "A", "args": {"x": 2}, "ts": 10}
+]

sample/profiles/trace-event/unbalanced-name.json

@@ -0,0 +1,6 @@
+[
+  {"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": "E", "name": "alpha", "ts": 9},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "beta", "ts": 10}
+]

sample/profiles/trace-event/x-events-matching-end.json

@@ -0,0 +1,15 @@
+[
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 0, "dur": 20, "name": "alpha" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 1, "dur": 2, "name": "beta" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 2, "dur": 1, "name": "gamma" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 5, "dur": 2, "name": "gamma" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 6, "dur": 1, "name": "beta" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 10, "dur": 1, "name": "gamma" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 9, "dur": 2, "name": "beta" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 15, "dur": 1, "name": "beta" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 14, "dur": 2, "name": "gamma" }
+]

sample/profiles/trace-event/x-events-matching-start.json

@@ -0,0 +1,15 @@
+[
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 0, "dur": 20, "name": "alpha" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 1, "dur": 2, "name": "beta" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 1, "dur": 1, "name": "gamma" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 5, "dur": 2, "name": "gamma" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 5, "dur": 1, "name": "beta" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 9, "dur": 1, "name": "beta" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 9, "dur": 2, "name": "gamma" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 13, "dur": 1, "name": "gamma" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 13, "dur": 2, "name": "beta" }
+]

sample/profiles/trace-event/zero-duration-events.json

@@ -0,0 +1,9 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "B", "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "B", "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "C", "ts": 2},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "C", "ts": 2},
+  {"pid": 0, "tid": 0, "ph": "X", "name": "D", "ts": 3, "dur": 0},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "A", "ts": 10}
+]

sample/programs/javascript/source-maps/README.md

@@ -0,0 +1,22 @@
+## Source Map Test Project
+
+This directory contains test files used to test whether the remapping of
+performance profiles using sourcemaps work correctly.
+
+Run `npm run build` to build the artifacts, then open the appropriate files in
+the `html` directory in whatever browser you're testing.
+
+The idea is to sourcemaps generated by a variety of tools, and also to take
+profiles from a variety of browsers, and hopefully see that they all get 
+remapped as expected.
+
+This project is set up to go through three levels of source-map indirection,
+and also using multiple different build chains.
+
+1. TypeScript -> JavaScript source generation
+2. JavaScript source -> JavaScript bundling
+3. Minification
+
+Some bundlers will swap the order of steps 2 & 3, or potentially merge them,
+but it's complex yet realistic enough that this will hoepfully suss out 
+problems.

sample/programs/javascript/source-maps/alpha.ts

@@ -0,0 +1,11 @@
+import {beta} from './beta'
+import {delta} from './delta'
+
+export function alpha() {
+  ;(function () {
+    for (let i = 0; i < 1000; i++) {
+      beta()
+      delta()
+    }
+  })()
+}

sample/programs/javascript/source-maps/beta.ts

@@ -0,0 +1,7 @@
+import {gamma} from './gamma'
+
+export function beta() {
+  for (let i = 0; i < 10; i++) {
+    gamma()
+  }
+}

sample/programs/javascript/source-maps/delta.ts

@@ -0,0 +1,7 @@
+import {gamma} from './gamma'
+
+export const delta = function () {
+  for (let i = 0; i < 10; i++) {
+    gamma()
+  }
+}

sample/programs/javascript/source-maps/gamma.ts

@@ -0,0 +1,7 @@
+export const gamma = () => {
+  let prod = 1
+  for (let i = 1; i < 1000; i++) {
+    prod *= i
+  }
+  return prod
+}

sample/programs/javascript/source-maps/html/esbuild.html

@@ -0,0 +1,3 @@
+<title>ESbuild</title>
+<script src="../dist/esbuild/typescript-source-map-test.js"></script>
+<h1>ESbuild Source Map Test</h1>

sample/programs/javascript/source-maps/html/parcel.html

@@ -0,0 +1,3 @@
+<title>Parcel</title>
+<script src="../dist/parcel/typescript-source-map-test.js"></script>
+<h1>Parcel Source Map Test</h1>

sample/programs/javascript/source-maps/html/webpack.html

@@ -0,0 +1,3 @@
+<title>Webpack</title>
+<script src="../dist/webpack/typescript-source-map-test.js"></script>
+<h1>Webpack Source Map Test</h1>

sample/programs/javascript/source-maps/kludge.ts

@@ -0,0 +1,17 @@
+import {alpha} from './alpha'
+
+export class Kludge {
+  constructor() {
+    alpha()
+    console.log(this.floop)
+  }
+
+  zap() {
+    alpha()
+  }
+
+  get floop(): number {
+    alpha()
+    return 1
+  }
+}

sample/programs/javascript/source-maps/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "speedscope-sourcemap-test-project",
+  "version": "1.0.0",
+  "description": "",
+  "private": "true",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run parcel && npm run webpack && npm run esbuild",
+    "parcel": "parcel build -o parcel/typescript-source-map-test typescript-source-map-test.ts",
+    "webpack": "webpack",
+    "esbuild": "esbuild --sourcemap --minify --bundle --outdir=dist/esbuild typescript-source-map-test.ts"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "esbuild": "^0.7.14",
+    "parcel": "^1.12.4",
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.0.3",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.0.0"
+  }
+}

sample/programs/javascript/source-maps/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "sourceMap": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react"
+  }
+}

sample/programs/javascript/source-maps/typescript-source-map-test.ts

@@ -0,0 +1,4 @@
+import {Kludge} from './kludge'
+
+const k = new Kludge()
+k.zap()

sample/programs/javascript/source-maps/webpack.config.js

@@ -0,0 +1,22 @@
+const path = require('path')
+
+module.exports = {
+  entry: './typescript-source-map-test.ts',
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'typescript-source-map-test.js',
+    path: path.resolve(__dirname, 'dist', 'webpack'),
+  },
+}

sample/programs/ruby/object.rb

@@ -0,0 +1,25 @@
+require 'json'
+require 'stackprof'
+
+def a
+  for i in 0..2 do
+    b
+    c
+  end
+end
+
+def b
+  Object.new
+end
+
+def c
+  for i in 0..5
+    (1..10).to_a.sample(3).sort
+  end
+end
+
+profile = StackProf.run(mode: :object, raw: true) do
+  a
+end
+
+puts JSON.generate(profile)

src/README.md

@@ -4,10 +4,10 @@ This directory contains the bulk of speedscope's source code.
 
 ## Subdirectories
 
-* `gl/`: WebGL code. This includes e.g. the code to render flamecharts.
-* `import/`: Code to import profiles from varous profilers into speedscope. This include e.g. the code to import Chrome performance profiles.
-* `lib/`: Mostly dependency-less utilities. This includes e.g. an LRU cache implementation, basic linear algebra classes,
+- `gl/`: WebGL code. This includes e.g. the code to render flamecharts.
+- `import/`: Code to import profiles from varous profilers into speedscope. This include e.g. the code to import Chrome performance profiles.
+- `lib/`: Mostly dependency-less utilities. This includes e.g. an LRU cache implementation, basic linear algebra classes,
   and the definition of speedscope's file format.
-* `store/`: Speedscope's application state management. Implemented using [`redux`](https://redux.js.org/).
-* `typings/`: [TypeScript definition files](https://basarat.gitbooks.io/typescript/docs/types/ambient/d.ts.html)
-* `views/`: View code to generate the HTML & CSS used to construct the UI. Implemented using [`preact`](https://preactjs.com/) and [`aphrodite`](https://github.com/Khan/aphrodite). Also contains code mapping from the `redux` store to views using [`preact-redux`](https://github.com/developit/preact-redux)
+- `app-state/`: Speedscope's application state management
+- `typings/`: [TypeScript definition files](https://basarat.gitbooks.io/typescript/docs/types/ambient/d.ts.html)
+- `views/`: View code to generate the HTML & CSS used to construct the UI. Implemented using [`preact`](https://preactjs.com/) and [`aphrodite`](https://github.com/Khan/aphrodite).

src/app-state/active-profile-state.ts

@@ -0,0 +1,34 @@
+import {Profile} from '../lib/profile'
+import {getProfileToView} from './getters'
+import {flattenRecursionAtom, profileGroupAtom} from '.'
+import {FlamechartViewState, SandwichViewState} from './profile-group'
+import {useAtom} from '../lib/atom'
+
+export interface ApplicationState {}
+
+export interface ActiveProfileState {
+  profile: Profile
+  index: number
+  chronoViewState: FlamechartViewState
+  leftHeavyViewState: FlamechartViewState
+  sandwichViewState: SandwichViewState
+}
+
+export function useActiveProfileState(): ActiveProfileState | null {
+  const flattenRecursion = useAtom(flattenRecursionAtom)
+  const profileGroupState = useAtom(profileGroupAtom)
+
+  if (!profileGroupState) return null
+  if (profileGroupState.indexToView >= profileGroupState.profiles.length) return null
+
+  const index = profileGroupState.indexToView
+  const profileState = profileGroupState.profiles[index]
+  return {
+    ...profileGroupState.profiles[profileGroupState.indexToView],
+    profile: getProfileToView({
+      profile: profileState.profile,
+      flattenRecursion,
+    }),
+    index: profileGroupState.indexToView,
+  }
+}

src/app-state/color-scheme.ts

@@ -0,0 +1,95 @@
+import {Atom} from '../lib/atom'
+
+export const enum ColorScheme {
+  // Default: respect prefers-color-schema
+  SYSTEM,
+
+  // Use dark theme
+  DARK,
+
+  // use light theme
+  LIGHT,
+}
+
+const localStorageKey = 'speedscope-color-scheme'
+
+function getStoredPreference(): ColorScheme {
+  const storedPreference = window.localStorage && window.localStorage[localStorageKey]
+  if (storedPreference === 'DARK') {
+    return ColorScheme.DARK
+  } else if (storedPreference === 'LIGHT') {
+    return ColorScheme.LIGHT
+  } else {
+    return ColorScheme.SYSTEM
+  }
+}
+
+function matchMediaDarkColorScheme(): MediaQueryList {
+  return matchMedia('(prefers-color-scheme: dark)')
+}
+
+function nextColorScheme(scheme: ColorScheme): ColorScheme {
+  const systemPrefersDarkMode = matchMediaDarkColorScheme().matches
+
+  // We'll use a different cycling order for changing the color scheme depending
+  // on what the *current* system preference is. This should guarantee that when
+  // a user interacts with the color scheme toggle for the first time, it always
+  // changes the color scheme.
+  if (systemPrefersDarkMode) {
+    switch (scheme) {
+      case ColorScheme.SYSTEM: {
+        return ColorScheme.LIGHT
+      }
+      case ColorScheme.LIGHT: {
+        return ColorScheme.DARK
+      }
+      case ColorScheme.DARK: {
+        return ColorScheme.SYSTEM
+      }
+    }
+  } else {
+    switch (scheme) {
+      case ColorScheme.SYSTEM: {
+        return ColorScheme.DARK
+      }
+      case ColorScheme.DARK: {
+        return ColorScheme.LIGHT
+      }
+      case ColorScheme.LIGHT: {
+        return ColorScheme.SYSTEM
+      }
+    }
+  }
+}
+
+class ColorSchemeAtom extends Atom<ColorScheme> {
+  cycleToNextColorScheme = () => {
+    this.set(nextColorScheme(this.get()))
+  }
+}
+
+export const colorSchemeAtom = new ColorSchemeAtom(getStoredPreference(), 'colorScheme')
+
+colorSchemeAtom.subscribe(() => {
+  const value = colorSchemeAtom.get()
+
+  switch (value) {
+    case ColorScheme.DARK: {
+      window.localStorage[localStorageKey] = 'DARK'
+      break
+    }
+    case ColorScheme.LIGHT: {
+      window.localStorage[localStorageKey] = 'LIGHT'
+      break
+    }
+    case ColorScheme.SYSTEM: {
+      delete window.localStorage[localStorageKey]
+      break
+    }
+    default: {
+      const _exhaustiveCheck: never = value
+      return _exhaustiveCheck
+    }
+  }
+  return value
+})

src/app-state/getters.ts

@@ -1,9 +1,9 @@
 import {Frame, Profile} from '../lib/profile'
-import {triangle, memoizeByReference, memoizeByShallowEquality} from '../lib/utils'
+import {memoizeByReference, memoizeByShallowEquality} from '../lib/utils'
 import {RowAtlas} from '../gl/row-atlas'
 import {CanvasContext} from '../gl/canvas-context'
-import {Color} from '../lib/color'
 import {FlamechartRowAtlasKey} from '../gl/flamechart-renderer'
+import {Theme} from '../views/themes/theme'
 
 export const createGetColorBucketForFrame = memoizeByReference(
   (frameToColorBucket: Map<number | string, number>) => {
@@ -13,24 +13,27 @@ export const createGetColorBucketForFrame = memoizeByReference(
   },
 )
 
-export const createGetCSSColorForFrame = memoizeByReference(
-  (frameToColorBucket: Map<number | string, number>) => {
+export const createGetCSSColorForFrame = memoizeByShallowEquality(
+  ({
+    theme,
+    frameToColorBucket,
+  }: {
+    theme: Theme
+    frameToColorBucket: Map<number | string, number>
+  }) => {
     const getColorBucketForFrame = createGetColorBucketForFrame(frameToColorBucket)
     return (frame: Frame): string => {
       const t = getColorBucketForFrame(frame) / 255
-
-      const x = triangle(30.0 * t)
-      const H = 360.0 * (0.9 * t)
-      const C = 0.25 + 0.2 * x
-      const L = 0.8 - 0.15 * x
-      return Color.fromLumaChromaHue(L, C, H).toCSS()
+      return theme.colorForBucket(t).toCSS()
     }
   },
 )
 
-export const getCanvasContext = memoizeByReference((canvas: HTMLCanvasElement) => {
-  return new CanvasContext(canvas)
-})
+export const getCanvasContext = memoizeByShallowEquality(
+  ({theme, canvas}: {theme: Theme; canvas: HTMLCanvasElement}) => {
+    return new CanvasContext(canvas, theme)
+  },
+)
 
 export const getRowAtlas = memoizeByReference((canvasContext: CanvasContext) => {
   return new RowAtlas<FlamechartRowAtlasKey>(

src/app-state/index.ts

@@ -0,0 +1,78 @@
+import {Atom} from '../lib/atom'
+import {ViewMode} from '../lib/view-mode'
+import {getHashParams, HashParams} from '../lib/hash-params'
+import {ProfileGroupAtom} from './profile-group'
+
+// True if recursion should be flattened when viewing flamegraphs
+export const flattenRecursionAtom = new Atom<boolean>(false, 'flattenRecursion')
+
+// The query used in top-level views
+//
+// An empty string indicates that the search is open by no filter is applied.
+// searchIsActive is stored separately, because we may choose to persist the
+// query even when the search input is closed.
+export const searchIsActiveAtom = new Atom<boolean>(false, 'searchIsActive')
+export const searchQueryAtom = new Atom<string>('', 'searchQueryAtom')
+
+// Which top-level view should be displayed
+export const viewModeAtom = new Atom<ViewMode>(ViewMode.CHRONO_FLAME_CHART, 'viewMode')
+
+// The top-level profile group from which most other data will be derived
+export const profileGroupAtom = new ProfileGroupAtom(null, 'profileGroup')
+
+viewModeAtom.subscribe(() => {
+  // If we switch views, the hover information is no longer relevant
+  profileGroupAtom.clearHoverNode()
+})
+
+// Parameters defined by the URL encoded k=v pairs after the # in the URL
+const hashParams = getHashParams()
+export const hashParamsAtom = new Atom<HashParams>(hashParams, 'hashParams')
+
+// The <canvas> element used for WebGL
+export const glCanvasAtom = new Atom<HTMLCanvasElement | null>(null, 'glCanvas')
+
+// True when a file drag is currently active. Used to indicate that the
+// application is a valid drop target.
+export const dragActiveAtom = new Atom<boolean>(false, 'dragActive')
+
+// True when the application is currently in a loading state. Used to
+// display a loading progress bar.
+
+// Speedscope is usable both from a local HTML file being served
+// from a file:// URL, and via websites. In the case of file:// URLs,
+// however, XHR will be unavailable to fetching files in adjacent directories.
+const protocol = window.location.protocol
+export const canUseXHR = protocol === 'http:' || protocol === 'https:'
+const isImmediatelyLoading = canUseXHR && hashParams.profileURL != null
+export const loadingAtom = new Atom<boolean>(isImmediatelyLoading, 'loading')
+
+// True when the application is an error state, e.g. because the profile
+// imported was invalid.
+export const errorAtom = new Atom<boolean>(false, 'error')
+
+export enum SortField {
+  SYMBOL_NAME,
+  SELF,
+  TOTAL,
+}
+
+export enum SortDirection {
+  ASCENDING,
+  DESCENDING,
+}
+
+export interface SortMethod {
+  field: SortField
+  direction: SortDirection
+}
+
+// The table sorting method using for the sandwich view, specifying the column
+// to sort by, and the direction to sort that clumn.
+export const tableSortMethodAtom = new Atom<SortMethod>(
+  {
+    field: SortField.SELF,
+    direction: SortDirection.DESCENDING,
+  },
+  'tableSortMethod',
+)

src/app-state/profile-group.ts

@@ -0,0 +1,227 @@
+import {Atom} from '../lib/atom'
+import {clamp, Rect, Vec2} from '../lib/math'
+import {CallTreeNode, Frame, Profile, ProfileGroup} from '../lib/profile'
+import {objectsHaveShallowEquality} from '../lib/utils'
+
+export interface FlamechartViewState {
+  hover: {
+    node: CallTreeNode
+    event: MouseEvent
+  } | null
+  selectedNode: CallTreeNode | null
+  logicalSpaceViewportSize: Vec2
+  configSpaceViewportRect: Rect
+}
+
+export interface CallerCalleeState {
+  selectedFrame: Frame
+  invertedCallerFlamegraph: FlamechartViewState
+  calleeFlamegraph: FlamechartViewState
+}
+
+export interface SandwichViewState {
+  callerCallee: CallerCalleeState | null
+}
+
+export interface ProfileState {
+  profile: Profile
+  chronoViewState: FlamechartViewState
+  leftHeavyViewState: FlamechartViewState
+  sandwichViewState: SandwichViewState
+}
+
+export type ProfileGroupState = {
+  name: string
+
+  // The index within the list of profiles currently being viewed
+  indexToView: number
+
+  profiles: ProfileState[]
+} | null
+
+export enum FlamechartID {
+  LEFT_HEAVY = 'LEFT_HEAVY',
+  CHRONO = 'CHRONO',
+  SANDWICH_INVERTED_CALLERS = 'SANDWICH_INVERTED_CALLERS',
+  SANDWICH_CALLEES = 'SANDWICH_CALLEES',
+}
+
+let initialFlameChartViewState: FlamechartViewState = {
+  hover: null,
+  selectedNode: null,
+  configSpaceViewportRect: Rect.empty,
+  logicalSpaceViewportSize: Vec2.zero,
+}
+
+export class ProfileGroupAtom extends Atom<ProfileGroupState> {
+  set(newState: ProfileGroupState) {
+    const oldState = this.state
+    if (oldState != null && newState != null && objectsHaveShallowEquality(oldState, newState)) {
+      return
+    }
+    super.set(newState)
+  }
+
+  getActiveProfile(): ProfileState | null {
+    if (this.state == null) return null
+    return this.state.profiles[this.state?.indexToView] || null
+  }
+
+  setProfileGroup = (group: ProfileGroup) => {
+    this.set({
+      name: group.name,
+      indexToView: group.indexToView,
+      profiles: group.profiles.map(p => ({
+        profile: p,
+        chronoViewState: initialFlameChartViewState,
+        leftHeavyViewState: initialFlameChartViewState,
+        sandwichViewState: {callerCallee: null},
+      })),
+    })
+  }
+
+  setProfileIndexToView = (indexToView: number) => {
+    if (this.state == null) return
+
+    indexToView = clamp(indexToView, 0, this.state.profiles.length - 1)
+
+    this.set({
+      ...this.state,
+      indexToView,
+    })
+  }
+
+  private updateActiveProfileState(fn: (profileState: ProfileState) => ProfileState) {
+    if (this.state == null) return
+    const {indexToView, profiles} = this.state
+    this.set({
+      ...this.state,
+      profiles: profiles.map((p, i) => {
+        if (i != indexToView) return p
+        return fn(p)
+      }),
+    })
+  }
+
+  private updateActiveSandwichViewState(
+    fn: (sandwichViewState: SandwichViewState) => SandwichViewState,
+  ) {
+    this.updateActiveProfileState(p => ({
+      ...p,
+      sandwichViewState: fn(p.sandwichViewState),
+    }))
+  }
+
+  setSelectedFrame = (frame: Frame | null) => {
+    if (this.state == null) return
+
+    const profile = this.getActiveProfile()
+    if (profile == null) {
+      return
+    }
+
+    this.updateActiveSandwichViewState(sandwichViewState => {
+      if (frame == null) {
+        return {callerCallee: null}
+      }
+      return {
+        callerCallee: {
+          invertedCallerFlamegraph: initialFlameChartViewState,
+          calleeFlamegraph: initialFlameChartViewState,
+          selectedFrame: frame,
+        },
+      }
+    })
+  }
+
+  private updateFlamechartState(
+    id: FlamechartID,
+    fn: (flamechartViewState: FlamechartViewState) => FlamechartViewState,
+  ) {
+    switch (id) {
+      case FlamechartID.CHRONO: {
+        this.updateActiveProfileState(p => ({
+          ...p,
+          chronoViewState: fn(p.chronoViewState),
+        }))
+        break
+      }
+
+      case FlamechartID.LEFT_HEAVY: {
+        this.updateActiveProfileState(p => ({
+          ...p,
+          leftHeavyViewState: fn(p.leftHeavyViewState),
+        }))
+        break
+      }
+
+      case FlamechartID.SANDWICH_CALLEES: {
+        this.updateActiveSandwichViewState(s => ({
+          ...s,
+          callerCallee:
+            s.callerCallee == null
+              ? null
+              : {
+                  ...s.callerCallee,
+                  calleeFlamegraph: fn(s.callerCallee.calleeFlamegraph),
+                },
+        }))
+        break
+      }
+
+      case FlamechartID.SANDWICH_INVERTED_CALLERS: {
+        this.updateActiveSandwichViewState(s => ({
+          ...s,
+          callerCallee:
+            s.callerCallee == null
+              ? null
+              : {
+                  ...s.callerCallee,
+                  invertedCallerFlamegraph: fn(s.callerCallee.invertedCallerFlamegraph),
+                },
+        }))
+        break
+      }
+    }
+  }
+
+  setFlamechartHoveredNode(
+    id: FlamechartID,
+    hover: {node: CallTreeNode; event: MouseEvent} | null,
+  ) {
+    this.updateFlamechartState(id, f => ({
+      ...f,
+      hover,
+    }))
+  }
+
+  setSelectedNode(id: FlamechartID, selectedNode: CallTreeNode | null) {
+    this.updateFlamechartState(id, f => ({
+      ...f,
+      selectedNode,
+    }))
+  }
+
+  setConfigSpaceViewportRect(id: FlamechartID, configSpaceViewportRect: Rect) {
+    this.updateFlamechartState(id, f => ({
+      ...f,
+      configSpaceViewportRect,
+    }))
+  }
+
+  setLogicalSpaceViewportSize(id: FlamechartID, logicalSpaceViewportSize: Vec2) {
+    this.updateFlamechartState(id, f => ({
+      ...f,
+      logicalSpaceViewportSize,
+    }))
+  }
+
+  clearHoverNode() {
+    // TODO(jlfwong): This causes 4 separate observer events. This is probably
+    // fine, since I hope that Preact/React are smart about batching re-renders?
+    this.setFlamechartHoveredNode(FlamechartID.CHRONO, null)
+    this.setFlamechartHoveredNode(FlamechartID.LEFT_HEAVY, null)
+    this.setFlamechartHoveredNode(FlamechartID.SANDWICH_CALLEES, null)
+    this.setFlamechartHoveredNode(FlamechartID.SANDWICH_INVERTED_CALLERS, null)
+  }
+}

src/gl/canvas-context.ts

@@ -4,6 +4,8 @@ import {TextureRenderer} from './texture-renderer'
 import {Rect, Vec2} from '../lib/math'
 import {ViewportRectangleRenderer} from './overlay-rectangle-renderer'
 import {FlamechartColorPassRenderer} from './flamechart-color-pass-renderer'
+import {Color} from '../lib/color'
+import {Theme} from '../views/themes/theme'
 
 type FrameCallback = () => void
 
@@ -13,13 +15,19 @@ export class CanvasContext {
   public readonly textureRenderer: TextureRenderer
   public readonly viewportRectangleRenderer: ViewportRectangleRenderer
   public readonly flamechartColorPassRenderer: FlamechartColorPassRenderer
+  public readonly theme: Theme
 
-  constructor(canvas: HTMLCanvasElement) {
+  constructor(canvas: HTMLCanvasElement, theme: Theme) {
     this.gl = new WebGL.Context(canvas)
     this.rectangleBatchRenderer = new RectangleBatchRenderer(this.gl)
     this.textureRenderer = new TextureRenderer(this.gl)
-    this.viewportRectangleRenderer = new ViewportRectangleRenderer(this.gl)
-    this.flamechartColorPassRenderer = new FlamechartColorPassRenderer(this.gl)
+    this.viewportRectangleRenderer = new ViewportRectangleRenderer(this.gl, theme)
+    this.flamechartColorPassRenderer = new FlamechartColorPassRenderer(this.gl, theme)
+    this.theme = theme
+
+    // Whenever the canvas is resized, draw immediately. This prevents
+    // flickering during resizing.
+    this.gl.addAfterResizeEventHandler(this.onBeforeFrame)
 
     const webGLInfo = this.gl.getWebGLInfo()
     if (webGLInfo) {
@@ -48,7 +56,8 @@ export class CanvasContext {
   private onBeforeFrame = () => {
     this.animationFrameRequest = null
     this.gl.setViewport(0, 0, this.gl.renderTargetWidthInPixels, this.gl.renderTargetHeightInPixels)
-    this.gl.clear(new Graphics.Color(1, 1, 1, 1))
+    const color = Color.fromCSSHex(this.theme.bgPrimaryColor)
+    this.gl.clear(new Graphics.Color(color.r, color.g, color.b, color.a))
 
     for (const handler of this.beforeFrameHandlers) {
       handler()

src/gl/flamechart-color-pass-renderer.ts

@@ -1,4 +1,5 @@
 import {Vec2, Rect, AffineTransform} from '../lib/math'
+import {Theme} from '../views/themes/theme'
 import {Graphics} from './graphics'
 import {setUniformAffineTransform} from './utils'
 
@@ -20,7 +21,7 @@ const vert = `
   }
 `
 
-const frag = `
+const frag = (colorForBucket: string) => `
   precision mediump float;
 
   uniform vec2 uvSpacePixelSize;
@@ -49,13 +50,7 @@ const frag = `
     return 2.0 * abs(fract(x) - 0.5) - 1.0;
   }
 
-  vec3 colorForBucket(float t) {
-    float x = triangle(30.0 * t);
-    float H = 360.0 * (0.9 * t);
-    float C = 0.25 + 0.2 * x;
-    float L = 0.80 - 0.15 * x;
-    return hcl2rgb(H, C, L);
-  }
+  ${colorForBucket}
 
   void main() {
     vec4 here = texture2D(colorTexture, vUv);
@@ -107,7 +102,7 @@ export class FlamechartColorPassRenderer {
   private material: Graphics.Material
   private buffer: Graphics.VertexBuffer
 
-  constructor(private gl: Graphics.Context) {
+  constructor(private gl: Graphics.Context, theme: Theme) {
     const vertices = [
       {pos: [-1, 1], uv: [0, 1]},
       {pos: [1, 1], uv: [1, 1]},
@@ -124,7 +119,7 @@ export class FlamechartColorPassRenderer {
 
     this.buffer = gl.createVertexBuffer(vertexFormat.stride * vertices.length)
     this.buffer.uploadFloats(floats)
-    this.material = gl.createMaterial(vertexFormat, vert, frag)
+    this.material = gl.createMaterial(vertexFormat, vert, frag(theme.colorForBucketGLSL))
   }
 
   render(props: FlamechartColorPassRenderProps) {

src/gl/graphics.ts

@@ -83,6 +83,15 @@ export namespace Graphics {
       public alphaF: number,
     ) {}
 
+    equals(other: Color): boolean {
+      return (
+        this.redF === other.redF &&
+        this.greenF === other.greenF &&
+        this.blueF === other.blueF &&
+        this.alphaF === other.alphaF
+      )
+    }
+
     static TRANSPARENT = new Color(0, 0, 0, 0)
   }
 
@@ -160,6 +169,14 @@ export namespace Graphics {
     setUnpremultipliedBlendState() {
       this.setBlendState(BlendOperation.SOURCE_ALPHA, BlendOperation.INVERSE_SOURCE_ALPHA)
     }
+
+    protected resizeEventHandlers = new Set<() => void>()
+    addAfterResizeEventHandler(callback: () => void): void {
+      this.resizeEventHandlers.add(callback)
+    }
+    removeAfterResizeEventHandler(callback: () => void): void {
+      this.resizeEventHandlers.delete(callback)
+    }
   }
 
   export interface Material {
@@ -459,7 +476,7 @@ export namespace WebGL {
       const bounds = canvas.getBoundingClientRect()
 
       if (
-        this._width === widthInAppUnits &&
+        this._width === widthInPixels &&
         this._height === heightInPixels &&
         bounds.width === widthInAppUnits &&
         bounds.height === heightInAppUnits
@@ -476,13 +493,15 @@ export namespace WebGL {
       this.setViewport(0, 0, widthInPixels, heightInPixels)
       this._width = widthInPixels
       this._height = heightInPixels
+
+      this.resizeEventHandlers.forEach(cb => cb())
     }
 
     clear(color: Graphics.Color) {
       this._updateRenderTargetAndViewport()
       this._updateBlendState()
 
-      if (color != this._currentClearColor) {
+      if (!color.equals(this._currentClearColor)) {
         this._gl.clearColor(color.redF, color.greenF, color.blueF, color.alphaF)
         this._currentClearColor = color
       }

src/gl/overlay-rectangle-renderer.ts

@@ -1,4 +1,6 @@
+import {Color} from '../lib/color'
 import {AffineTransform, Rect} from '../lib/math'
+import {Theme} from '../views/themes/theme'
 import {Graphics} from './graphics'
 import {setUniformAffineTransform, setUniformVec2} from './utils'
 
@@ -18,53 +20,57 @@ const vert = `
   }
 `
 
-const frag = `
-  precision mediump float;
+const frag = (theme: Theme) => {
+  const {r, g, b} = Color.fromCSSHex(theme.fgSecondaryColor)
+  const rgb = `${r.toFixed(1)}, ${g.toFixed(1)}, ${b.toFixed(1)}`
+  return `
+    precision mediump float;
 
-  uniform mat3 configSpaceToPhysicalViewSpace;
-  uniform vec2 physicalSize;
-  uniform vec2 physicalOrigin;
-  uniform vec2 configSpaceViewportOrigin;
-  uniform vec2 configSpaceViewportSize;
-  uniform float framebufferHeight;
+    uniform mat3 configSpaceToPhysicalViewSpace;
+    uniform vec2 physicalSize;
+    uniform vec2 physicalOrigin;
+    uniform vec2 configSpaceViewportOrigin;
+    uniform vec2 configSpaceViewportSize;
+    uniform float framebufferHeight;
 
-  void main() {
-    vec2 origin = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportOrigin, 1.0)).xy;
-    vec2 size = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportSize, 0.0)).xy;
+    void main() {
+      vec2 origin = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportOrigin, 1.0)).xy;
+      vec2 size = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportSize, 0.0)).xy;
 
-    vec2 halfSize = physicalSize / 2.0;
+      vec2 halfSize = physicalSize / 2.0;
 
-    float borderWidth = 2.0;
+      float borderWidth = 2.0;
 
-    origin = floor(origin * halfSize) / halfSize + borderWidth * vec2(1.0, 1.0);
-    size = floor(size * halfSize) / halfSize - 2.0 * borderWidth * vec2(1.0, 1.0);
+      origin = floor(origin * halfSize) / halfSize + borderWidth * vec2(1.0, 1.0);
+      size = floor(size * halfSize) / halfSize - 2.0 * borderWidth * vec2(1.0, 1.0);
 
-    vec2 coord = gl_FragCoord.xy;
-    coord.x = coord.x - physicalOrigin.x;
-    coord.y = framebufferHeight - coord.y - physicalOrigin.y;
-    vec2 clamped = clamp(coord, origin, origin + size);
-    vec2 gap = clamped - coord;
-    float maxdist = max(abs(gap.x), abs(gap.y));
+      vec2 coord = gl_FragCoord.xy;
+      coord.x = coord.x - physicalOrigin.x;
+      coord.y = framebufferHeight - coord.y - physicalOrigin.y;
+      vec2 clamped = clamp(coord, origin, origin + size);
+      vec2 gap = clamped - coord;
+      float maxdist = max(abs(gap.x), abs(gap.y));
 
-    // TOOD(jlfwong): Could probably optimize this to use mix somehow.
-    if (maxdist == 0.0) {
-      // Inside viewport rectangle
-      gl_FragColor = vec4(0, 0, 0, 0);
-    } else if (maxdist < borderWidth) {
-      // Inside viewport rectangle at border
-      gl_FragColor = vec4(0.7, 0.7, 0.7, 0.8);
-    } else {
-      // Outside viewport rectangle
-      gl_FragColor = vec4(0.7, 0.7, 0.7, 0.5);
+      // TOOD(jlfwong): Could probably optimize this to use mix somehow.
+      if (maxdist == 0.0) {
+        // Inside viewport rectangle
+        gl_FragColor = vec4(0, 0, 0, 0);
+      } else if (maxdist < borderWidth) {
+        // Inside viewport rectangle at border
+        gl_FragColor = vec4(${rgb}, 0.8);
+      } else {
+        // Outside viewport rectangle
+        gl_FragColor = vec4(${rgb}, 0.5);
+      }
     }
-  }
-`
+  `
+}
 
 export class ViewportRectangleRenderer {
   private material: Graphics.Material
   private buffer: Graphics.VertexBuffer
 
-  constructor(private gl: Graphics.Context) {
+  constructor(private gl: Graphics.Context, theme: Theme) {
     const vertices = [
       [-1, 1],
       [1, 1],
@@ -78,7 +84,7 @@ export class ViewportRectangleRenderer {
     }
     this.buffer = gl.createVertexBuffer(vertexFormat.stride * vertices.length)
     this.buffer.upload(new Uint8Array(new Float32Array(floats).buffer))
-    this.material = gl.createMaterial(vertexFormat, vert, frag)
+    this.material = gl.createMaterial(vertexFormat, vert, frag(theme))
   }
 
   render(props: ViewportRectangleRendererProps) {

src/import/__snapshots__/bg-flamegraph.test.ts.snap

@@ -104,6 +104,168 @@ exports[`importFromBGFlameGraph with CRLF: indexToView 1`] = `0`;
 
 exports[`importFromBGFlameGraph with CRLF: profileGroup.name 1`] = `"simple-crlf.txt"`;
 
+exports[`importFromBGFlameGraph with UTF-16, Big Endian 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "a",
+      "line": undefined,
+      "name": "a",
+      "selfWeight": 0,
+      "totalWeight": 14,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "b",
+      "line": undefined,
+      "name": "b",
+      "selfWeight": 5,
+      "totalWeight": 14,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "c",
+      "line": undefined,
+      "name": "c",
+      "selfWeight": 5,
+      "totalWeight": 5,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "d",
+      "line": undefined,
+      "name": "d",
+      "selfWeight": 4,
+      "totalWeight": 4,
+    },
+  ],
+  "name": "simple-utf16-be.txt",
+  "stacks": Array [
+    "a;b;c 2",
+    "a;b;d 4",
+    "a;b;c 3",
+    "a;b 5",
+  ],
+}
+`;
+
+exports[`importFromBGFlameGraph with UTF-16, Big Endian: indexToView 1`] = `0`;
+
+exports[`importFromBGFlameGraph with UTF-16, Big Endian: profileGroup.name 1`] = `"simple-utf16-be.txt"`;
+
+exports[`importFromBGFlameGraph with UTF-16, Little Endian 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "a",
+      "line": undefined,
+      "name": "a",
+      "selfWeight": 0,
+      "totalWeight": 14,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "b",
+      "line": undefined,
+      "name": "b",
+      "selfWeight": 5,
+      "totalWeight": 14,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "c",
+      "line": undefined,
+      "name": "c",
+      "selfWeight": 5,
+      "totalWeight": 5,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "d",
+      "line": undefined,
+      "name": "d",
+      "selfWeight": 4,
+      "totalWeight": 4,
+    },
+  ],
+  "name": "simple-utf16-le.txt",
+  "stacks": Array [
+    "a;b;c 2",
+    "a;b;d 4",
+    "a;b;c 3",
+    "a;b 5",
+  ],
+}
+`;
+
+exports[`importFromBGFlameGraph with UTF-16, Little Endian: indexToView 1`] = `0`;
+
+exports[`importFromBGFlameGraph with UTF-16, Little Endian: profileGroup.name 1`] = `"simple-utf16-le.txt"`;
+
+exports[`importFromBGFlameGraph with invalid lines 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "a",
+      "line": undefined,
+      "name": "a",
+      "selfWeight": 0,
+      "totalWeight": 14,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "b",
+      "line": undefined,
+      "name": "b",
+      "selfWeight": 5,
+      "totalWeight": 14,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "c",
+      "line": undefined,
+      "name": "c",
+      "selfWeight": 5,
+      "totalWeight": 5,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "d",
+      "line": undefined,
+      "name": "d",
+      "selfWeight": 4,
+      "totalWeight": 4,
+    },
+  ],
+  "name": "simple-with-invalids.txt",
+  "stacks": Array [
+    "a;b;c 2",
+    "a;b;d 4",
+    "a;b;c 3",
+    "a;b 5",
+  ],
+}
+`;
+
+exports[`importFromBGFlameGraph with invalid lines: indexToView 1`] = `0`;
+
+exports[`importFromBGFlameGraph with invalid lines: profileGroup.name 1`] = `"simple-with-invalids.txt"`;
+
 exports[`importFromBGFlameGraph: indexToView 1`] = `0`;
 
 exports[`importFromBGFlameGraph: profileGroup.name 1`] = `"simple.txt"`;

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

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`importFromCallgrind 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:main",
+      "line": undefined,
+      "name": "main",
+      "selfWeight": 20,
+      "totalWeight": 820,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:func1",
+      "line": undefined,
+      "name": "func1",
+      "selfWeight": 100,
+      "totalWeight": 400,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file2.c",
+      "key": "file2.c:func2",
+      "line": undefined,
+      "name": "func2",
+      "selfWeight": 700,
+      "totalWeight": 700,
+    },
+  ],
+  "name": "callgrind.example.log -- Instructions",
+  "stacks": Array [
+    "main;func1;func2 300",
+    "main;func1 100",
+    "main;func2 400",
+    "main 20",
+  ],
+}
+`;
+
+exports[`importFromCallgrind multiple event types 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:main",
+      "line": undefined,
+      "name": "main",
+      "selfWeight": 200,
+      "totalWeight": 8200,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:func1",
+      "line": undefined,
+      "name": "func1",
+      "selfWeight": 1000,
+      "totalWeight": 4000,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file2.c",
+      "key": "file2.c:func2",
+      "line": undefined,
+      "name": "func2",
+      "selfWeight": 7000,
+      "totalWeight": 7000,
+    },
+  ],
+  "name": "callgrind.multiple-event-types.log -- Time",
+  "stacks": Array [
+    "main;func1;func2 3.00µs",
+    "main;func1 1.00µs",
+    "main;func2 4.00µs",
+    "main 200.00ns",
+  ],
+}
+`;
+
+exports[`importFromCallgrind multiple event types 2`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:main",
+      "line": undefined,
+      "name": "main",
+      "selfWeight": 15000,
+      "totalWeight": 38000,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:func1",
+      "line": undefined,
+      "name": "func1",
+      "selfWeight": 8888.888888888889,
+      "totalWeight": 20000,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file2.c",
+      "key": "file2.c:func2",
+      "line": undefined,
+      "name": "func2",
+      "selfWeight": 14111.111111111111,
+      "totalWeight": 14111.111111111111,
+    },
+  ],
+  "name": "callgrind.multiple-event-types.log -- Memory",
+  "stacks": Array [
+    "main;func1;func2 10.85 KB",
+    "main;func1 8.68 KB",
+    "main;func2 2.93 KB",
+    "main 14.65 KB",
+  ],
+}
+`;
+
+exports[`importFromCallgrind multiple event types: indexToView 1`] = `0`;
+
+exports[`importFromCallgrind multiple event types: profileGroup.name 1`] = `"callgrind.multiple-event-types.log"`;
+
+exports[`importFromCallgrind name compression 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:main",
+      "line": undefined,
+      "name": "main",
+      "selfWeight": 20,
+      "totalWeight": 820,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:func1",
+      "line": undefined,
+      "name": "func1",
+      "selfWeight": 100,
+      "totalWeight": 400,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file2.c",
+      "key": "file2.c:func2",
+      "line": undefined,
+      "name": "func2",
+      "selfWeight": 700,
+      "totalWeight": 700,
+    },
+  ],
+  "name": "callgrind.name-compression.log -- Instructions",
+  "stacks": Array [
+    "main;func1;func2 300",
+    "main;func1 100",
+    "main;func2 400",
+    "main 20",
+  ],
+}
+`;
+
+exports[`importFromCallgrind name compression: indexToView 1`] = `0`;
+
+exports[`importFromCallgrind name compression: profileGroup.name 1`] = `"callgrind.name-compression.log"`;
+
+exports[`importFromCallgrind: indexToView 1`] = `0`;
+
+exports[`importFromCallgrind: profileGroup.name 1`] = `"callgrind.example.log"`;

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

@@ -64,17 +64,17 @@ exports[`importFromFirefox ignore self-hosted 1`] = `
 Object {
   "frames": Array [
     Frame {
-      "col": undefined,
-      "file": "http://localhost:8000/simple.js:1",
+      "col": 15,
+      "file": "http://localhost:8000/simple.js",
       "key": "alpha (http://localhost:8000/simple.js:1:14)",
-      "line": 14,
+      "line": 1,
       "name": "alpha",
       "selfWeight": 0,
       "totalWeight": 26.983816999942064,
     },
     Frame {
-      "col": undefined,
-      "file": "http://localhost:8000/simple.js:14",
+      "col": 15,
+      "file": "http://localhost:8000/simple.js",
       "key": "delta (http://localhost:8000/simple.js:14:14)",
       "line": 14,
       "name": "delta",
@@ -82,19 +82,19 @@ Object {
       "totalWeight": 11.946324001066387,
     },
     Frame {
-      "col": undefined,
-      "file": "http://localhost:8000/simple.js:20",
+      "col": 15,
+      "file": "http://localhost:8000/simple.js",
       "key": "gamma (http://localhost:8000/simple.js:20:14)",
-      "line": 14,
+      "line": 20,
       "name": "gamma",
       "selfWeight": 26.983816999942064,
       "totalWeight": 26.983816999942064,
     },
     Frame {
-      "col": undefined,
-      "file": "http://localhost:8000/simple.js:8",
+      "col": 14,
+      "file": "http://localhost:8000/simple.js",
       "key": "beta (http://localhost:8000/simple.js:8:13)",
-      "line": 13,
+      "line": 8,
       "name": "beta",
       "selfWeight": 0,
       "totalWeight": 15.037492998875678,

src/import/__snapshots__/linux-tools-perf.test.ts.snap

@@ -1376,6 +1376,268 @@ Object {
 }
 `;
 
+exports[`importFromLinuxPerf system-wide.linux-perf.txt chunked 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": "[unknown]",
+      "key": "[unknown] ([unknown])",
+      "line": undefined,
+      "name": "??? ([unknown])",
+      "selfWeight": 0,
+      "totalWeight": 0.13823499999125488,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/lib/x86_64-linux-gnu/libc-2.27.so",
+      "key": "__libc_start_main (/lib/x86_64-linux-gnu/libc-2.27.so)",
+      "line": undefined,
+      "name": "__libc_start_main",
+      "selfWeight": 0,
+      "totalWeight": 0.13823499999125488,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/workdir/simple-terminates",
+      "key": "main (/workdir/simple-terminates)",
+      "line": undefined,
+      "name": "main",
+      "selfWeight": 0,
+      "totalWeight": 0.13823499999125488,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/workdir/simple-terminates",
+      "key": "_Z5alphav (/workdir/simple-terminates)",
+      "line": undefined,
+      "name": "_Z5alphav",
+      "selfWeight": 0.04059999997843988,
+      "totalWeight": 0.04059999997843988,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/workdir/simple-terminates",
+      "key": "_Z5deltav (/workdir/simple-terminates)",
+      "line": undefined,
+      "name": "_Z5deltav",
+      "selfWeight": 0.023244000098202378,
+      "totalWeight": 0.07264250004664063,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/workdir/simple-terminates",
+      "key": "_Z4betav (/workdir/simple-terminates)",
+      "line": undefined,
+      "name": "_Z4betav",
+      "selfWeight": 0.05354449988226406,
+      "totalWeight": 0.05447799988905899,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/workdir/simple-terminates",
+      "key": "_Z5gammav (/workdir/simple-terminates)",
+      "line": undefined,
+      "name": "_Z5gammav",
+      "selfWeight": 0.01991300002555363,
+      "totalWeight": 0.01991300002555363,
+    },
+    Frame {
+      "col": undefined,
+      "file": "[kernel.kallsyms]",
+      "key": "[unknown] ([kernel.kallsyms])",
+      "line": undefined,
+      "name": "??? ([kernel.kallsyms])",
+      "selfWeight": 0.0009335000067949295,
+      "totalWeight": 0.0009335000067949295,
+    },
+  ],
+  "name": "simple-terminat tid: 9",
+  "stacks": Array [
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 501.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.01ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.01ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 996.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.03ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 989.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 1.07ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.04ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav;??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]) 933.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.46ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.47ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 997.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 1.01ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 1.01ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 1.04ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.06ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 965.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 2.12ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 925.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.02ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 1.07ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 987.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 997.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 1000.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 997.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 997.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 999.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 999.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 999.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 921.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 1.01ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.08ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 989.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 974.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 963.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.04ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 1.04ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 991.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 922.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 1.02ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.07ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 983.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.01ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 999.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 999.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 998.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 998.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 974.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.03ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 998.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1000.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 999.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 997.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 999.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 999.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 999.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 997.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 932.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 2.09ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 986.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 998.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 954.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 991.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.05ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 1.01ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 999.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 989.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 1.01ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.01ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 998.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 1000.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 981.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.01ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 921.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 2.09ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.01ms",
+    "??? ([unknown]);__libc_start_main;main;_Z4betav 999.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5gammav 995.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z5alphav 997.50µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav 1.00ms",
+    "??? ([unknown]);__libc_start_main;main;_Z5alphav 980.00µs",
+    "??? ([unknown]);__libc_start_main;main;_Z5deltav;_Z4betav 476.00µs",
+  ],
+}
+`;
+
+exports[`importFromLinuxPerf system-wide.linux-perf.txt chunked 2`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": "[kernel.kallsyms]",
+      "key": "[unknown] ([kernel.kallsyms])",
+      "line": undefined,
+      "name": "??? ([kernel.kallsyms])",
+      "selfWeight": 0.1372890000056941,
+      "totalWeight": 0.1372890000056941,
+    },
+    Frame {
+      "col": undefined,
+      "file": "[unknown]",
+      "key": "[unknown] ([unknown])",
+      "line": undefined,
+      "name": "??? ([unknown])",
+      "selfWeight": 0.0009340000106021762,
+      "totalWeight": 0.0014475000207312405,
+    },
+  ],
+  "name": "swapper",
+  "stacks": Array [
+    "??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]) 17.00µs",
+    "??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]) 9.55ms",
+    "??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]) 487.50µs",
+    "??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]) 486.00µs",
+    "??? ([unknown]);??? ([unknown]) 446.50µs",
+    "??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]) 34.50µs",
+    "??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]) 38.00µs",
+    "??? ([kernel.kallsyms]);??? ([unknown]);??? ([unknown]);??? ([unknown]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]) 479.00µs",
+    "??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]) 6.52ms",
+    "??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]) 517.00µs",
+    "??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]) 111.12ms",
+    "??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]) 399.50µs",
+    "??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]);??? ([kernel.kallsyms]) 8.13ms",
+  ],
+}
+`;
+
+exports[`importFromLinuxPerf system-wide.linux-perf.txt chunked: indexToView 1`] = `0`;
+
+exports[`importFromLinuxPerf system-wide.linux-perf.txt chunked: profileGroup.name 1`] = `"system-wide.linux-perf.txt"`;
+
 exports[`importFromLinuxPerf system-wide.linux-perf.txt: indexToView 1`] = `0`;
 
 exports[`importFromLinuxPerf system-wide.linux-perf.txt: profileGroup.name 1`] = `"system-wide.linux-perf.txt"`;

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

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`importFromSafari 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": 13,
+      "file": "__InjectedScript_InjectedScriptSource.js",
+      "key": "injectModule:__InjectedScript_InjectedScriptSource.js:109:13",
+      "line": 109,
+      "name": "injectModule",
+      "selfWeight": 0,
+      "totalWeight": 0.001,
+    },
+    Frame {
+      "col": 10,
+      "file": "__InjectedScript_CommandLineAPIModuleSource.js",
+      "key": ":__InjectedScript_CommandLineAPIModuleSource.js:2:10",
+      "line": 2,
+      "name": "(anonymous __InjectedScript_CommandLineAPIModuleSource.js:2)",
+      "selfWeight": 0.001,
+      "totalWeight": 0.001,
+    },
+    Frame {
+      "col": 1,
+      "file": "file:///speedscope/sample/programs/javascript/simple.js",
+      "key": "(program):file:///speedscope/sample/programs/javascript/simple.js:1:1",
+      "line": 1,
+      "name": "(program)",
+      "selfWeight": 0,
+      "totalWeight": 0.03248933597933502,
+    },
+    Frame {
+      "col": 15,
+      "file": "file:///speedscope/sample/programs/javascript/simple.js",
+      "key": "alpha:file:///speedscope/sample/programs/javascript/simple.js:1:15",
+      "line": 1,
+      "name": "alpha",
+      "selfWeight": 0,
+      "totalWeight": 0.03248933597933502,
+    },
+    Frame {
+      "col": 15,
+      "file": "file:///speedscope/sample/programs/javascript/simple.js",
+      "key": "delta:file:///speedscope/sample/programs/javascript/simple.js:14:15",
+      "line": 14,
+      "name": "delta",
+      "selfWeight": 0.003094222474222382,
+      "totalWeight": 0.020112446082445484,
+    },
+    Frame {
+      "col": 15,
+      "file": "file:///speedscope/sample/programs/javascript/simple.js",
+      "key": "gamma:file:///speedscope/sample/programs/javascript/simple.js:20:15",
+      "line": 20,
+      "name": "gamma",
+      "selfWeight": 0.029395113505112636,
+      "totalWeight": 0.029395113505112636,
+    },
+    Frame {
+      "col": 14,
+      "file": "file:///speedscope/sample/programs/javascript/simple.js",
+      "key": "beta:file:///speedscope/sample/programs/javascript/simple.js:8:14",
+      "line": 8,
+      "name": "beta",
+      "selfWeight": 0,
+      "totalWeight": 0.012376889896889526,
+    },
+    Frame {
+      "col": 102,
+      "file": "",
+      "key": "firstOpenSearchURLString::4:102",
+      "line": 4,
+      "name": "firstOpenSearchURLString",
+      "selfWeight": 0.0005174240213818848,
+      "totalWeight": 0.0005174240213818848,
+    },
+  ],
+  "name": "Grabación de Control temporal 1",
+  "stacks": Array [
+    "injectModule;(anonymous __InjectedScript_CommandLineAPIModuleSource.js:2) 1.00ms",
+    " 39.93ms",
+    "(program);alpha;delta;gamma 10.83ms",
+    " 2.46ms",
+    "(program);alpha;delta 3.09ms",
+    "(program);alpha;beta;gamma 4.64ms",
+    "(program);alpha;delta;gamma 1.55ms",
+    "(program);alpha;beta;gamma 1.55ms",
+    "(program);alpha;delta;gamma 3.09ms",
+    "(program);alpha;beta;gamma 4.64ms",
+    "(program);alpha;delta;gamma 1.55ms",
+    "(program);alpha;beta;gamma 1.55ms",
+    " 253.50ms",
+    "firstOpenSearchURLString 517.42µs",
+  ],
+}
+`;
+
+exports[`importFromSafari: indexToView 1`] = `0`;
+
+exports[`importFromSafari: profileGroup.name 1`] = `"Grabación de Control temporal 1"`;

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

@@ -851,6 +851,201 @@ Object {
 }
 `;
 
+exports[`importFromStackprof object mode 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": "../../alexcoco/speedscope/sample/programs/ruby/object.rb",
+      "key": 4317728280,
+      "line": undefined,
+      "name": "<main>",
+      "selfWeight": 0,
+      "totalWeight": 103,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/Users/alex/src/github.com/alexcoco/speedscope/sample/programs/ruby/object.rb",
+      "key": 4376547240,
+      "line": undefined,
+      "name": "<main>",
+      "selfWeight": 0,
+      "totalWeight": 103,
+    },
+    Frame {
+      "col": undefined,
+      "file": "<cfunc>",
+      "key": 4379035920,
+      "line": null,
+      "name": "StackProf.run",
+      "selfWeight": 0,
+      "totalWeight": 103,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/Users/alex/src/github.com/alexcoco/speedscope/sample/programs/ruby/object.rb",
+      "key": 4317464320,
+      "line": 21,
+      "name": "block in <main>",
+      "selfWeight": 1,
+      "totalWeight": 103,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/Users/alex/src/github.com/alexcoco/speedscope/sample/programs/ruby/object.rb",
+      "key": 4379033920,
+      "line": 4,
+      "name": "Object#a",
+      "selfWeight": 2,
+      "totalWeight": 102,
+    },
+    Frame {
+      "col": undefined,
+      "file": "<cfunc>",
+      "key": 4317869400,
+      "line": null,
+      "name": "Range#each",
+      "selfWeight": 0,
+      "totalWeight": 102,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/Users/alex/src/github.com/alexcoco/speedscope/sample/programs/ruby/object.rb",
+      "key": 4379033880,
+      "line": 11,
+      "name": "Object#b",
+      "selfWeight": 1,
+      "totalWeight": 5,
+    },
+    Frame {
+      "col": undefined,
+      "file": "<cfunc>",
+      "key": 4318054440,
+      "line": null,
+      "name": "Class#new",
+      "selfWeight": 4,
+      "totalWeight": 4,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/Users/alex/src/github.com/alexcoco/speedscope/sample/programs/ruby/object.rb",
+      "key": 4379033840,
+      "line": 15,
+      "name": "Object#c",
+      "selfWeight": 2,
+      "totalWeight": 95,
+    },
+    Frame {
+      "col": undefined,
+      "file": "<cfunc>",
+      "key": 4317868920,
+      "line": null,
+      "name": "Range#to_a",
+      "selfWeight": 1,
+      "totalWeight": 37,
+    },
+    Frame {
+      "col": undefined,
+      "file": "<cfunc>",
+      "key": 4379016640,
+      "line": null,
+      "name": "Enumerable#to_a",
+      "selfWeight": 36,
+      "totalWeight": 36,
+    },
+    Frame {
+      "col": undefined,
+      "file": "<internal:array>",
+      "key": 4317563560,
+      "line": 60,
+      "name": "Array#sample",
+      "selfWeight": 20,
+      "totalWeight": 20,
+    },
+    Frame {
+      "col": undefined,
+      "file": "<cfunc>",
+      "key": 4317922760,
+      "line": null,
+      "name": "Array#sort",
+      "selfWeight": 36,
+      "totalWeight": 36,
+    },
+  ],
+  "name": "object-stackprof.json",
+  "stacks": Array [
+    "<main>;<main>;StackProf.run;block in <main> 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#b 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#b;Class#new 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 3",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#b;Class#new 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#b;Class#new 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Range#to_a;Enumerable#to_a 2",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sample 1",
+    "<main>;<main>;StackProf.run;block in <main>;Object#a;Range#each;Object#a;Object#c;Range#each;Object#c;Array#sort 2",
+  ],
+}
+`;
+
+exports[`importFromStackprof object mode: indexToView 1`] = `0`;
+
+exports[`importFromStackprof object mode: profileGroup.name 1`] = `"object-stackprof.json"`;
+
 exports[`importFromStackprof: indexToView 1`] = `0`;
 
 exports[`importFromStackprof: profileGroup.name 1`] = `"simple-stackprof.json"`;

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

@@ -1,5 +1,142 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`importTraceEvents BEX interaction 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A",
+      "line": undefined,
+      "name": "A",
+      "selfWeight": 0,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "B",
+      "line": undefined,
+      "name": "B",
+      "selfWeight": 2,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "D",
+      "line": undefined,
+      "name": "D",
+      "selfWeight": 0,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "C",
+      "line": undefined,
+      "name": "C",
+      "selfWeight": 2,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "F",
+      "line": undefined,
+      "name": "F",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "E",
+      "line": undefined,
+      "name": "E",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "G",
+      "line": undefined,
+      "name": "G",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "H",
+      "line": undefined,
+      "name": "H",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "J",
+      "line": undefined,
+      "name": "J",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "I",
+      "line": undefined,
+      "name": "I",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "K",
+      "line": undefined,
+      "name": "K",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "L",
+      "line": undefined,
+      "name": "L",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A;B 2.00µs",
+    " 8.00µs",
+    "D;C 2.00µs",
+    " 8.00µs",
+    "F;E 1.00µs",
+    "F 1.00µs",
+    " 8.00µs",
+    "G;H 1.00µs",
+    "G 1.00µs",
+    " 8.00µs",
+    "J 1.00µs",
+    "J;I 1.00µs",
+    " 8.00µs",
+    "K 1.00µs",
+    "K;L 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents BEX interaction: indexToView 1`] = `0`;
+
+exports[`importTraceEvents BEX interaction: profileGroup.name 1`] = `"bex-interaction.json"`;
+
 exports[`importTraceEvents bad E events 1`] = `
 Object {
   "frames": Array [
@@ -35,6 +172,74 @@ exports[`importTraceEvents bad E events: indexToView 1`] = `0`;
 
 exports[`importTraceEvents bad E events: profileGroup.name 1`] = `"too-many-end-events.json"`;
 
+exports[`importTraceEvents end event with empty stack 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "alpha 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents end event with empty stack: indexToView 1`] = `0`;
+
+exports[`importTraceEvents end event with empty stack: profileGroup.name 1`] = `"end-event-with-empty-stack.json"`;
+
+exports[`importTraceEvents end-non-top-of-stack 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A {\\"x\\":1}",
+      "line": undefined,
+      "name": "A {\\"x\\":1}",
+      "selfWeight": 1,
+      "totalWeight": 11,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "B {\\"x\\":2}",
+      "line": undefined,
+      "name": "B {\\"x\\":2}",
+      "selfWeight": 9,
+      "totalWeight": 10,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "Z {\\"x\\":1}",
+      "line": undefined,
+      "name": "Z {\\"x\\":1}",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A {\\"x\\":1} 1.00µs",
+    "A {\\"x\\":1};B {\\"x\\":2} 9.00µs",
+    "A {\\"x\\":1};B {\\"x\\":2};Z {\\"x\\":1} 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents end-non-top-of-stack: indexToView 1`] = `0`;
+
+exports[`importTraceEvents end-non-top-of-stack: profileGroup.name 1`] = `"end-non-top-of-stack.json"`;
+
 exports[`importTraceEvents event re-ordering 1`] = `
 Object {
   "frames": Array [
@@ -93,6 +298,176 @@ exports[`importTraceEvents event re-ordering: indexToView 1`] = `0`;
 
 exports[`importTraceEvents event re-ordering: profileGroup.name 1`] = `"must-retain-original-order.json"`;
 
+exports[`importTraceEvents event reordering name match 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha {\\"x\\":0}",
+      "line": undefined,
+      "name": "alpha {\\"x\\":0}",
+      "selfWeight": 9,
+      "totalWeight": 10,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta {\\"x\\":0}",
+      "line": undefined,
+      "name": "beta {\\"x\\":0}",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "gamma {\\"x\\":0}",
+      "line": undefined,
+      "name": "gamma {\\"x\\":0}",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "pid 0, tid 1",
+  "stacks": Array [
+    "alpha {\\"x\\":0} 1.00µs",
+    "alpha {\\"x\\":0};beta {\\"x\\":0};gamma {\\"x\\":0} 1.00µs",
+    "alpha {\\"x\\":0} 8.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents event reordering name match: indexToView 1`] = `0`;
+
+exports[`importTraceEvents event reordering name match: profileGroup.name 1`] = `"event-reordering-name-match.json"`;
+
+exports[`importTraceEvents invalid x nesting 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 5,
+      "totalWeight": 15,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta",
+      "line": undefined,
+      "name": "beta",
+      "selfWeight": 10,
+      "totalWeight": 10,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "alpha 5.00µs",
+    "alpha;beta 10.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents invalid x nesting: indexToView 1`] = `0`;
+
+exports[`importTraceEvents invalid x nesting: profileGroup.name 1`] = `"invalid-x-nesting.json"`;
+
+exports[`importTraceEvents matching x 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 8,
+      "totalWeight": 10,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta",
+      "line": undefined,
+      "name": "beta",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "gamma",
+      "line": undefined,
+      "name": "gamma",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "alpha 1.00µs",
+    "alpha;beta;gamma 1.00µs",
+    "alpha 3.00µs",
+    "alpha;gamma;beta 1.00µs",
+    "alpha 4.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents matching x: indexToView 1`] = `0`;
+
+exports[`importTraceEvents matching x: profileGroup.name 1`] = `"matching-x.json"`;
+
+exports[`importTraceEvents mismatched args 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A {\\"x\\":1}",
+      "line": undefined,
+      "name": "A {\\"x\\":1}",
+      "selfWeight": 10,
+      "totalWeight": 10,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A {\\"x\\":1} 10.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents mismatched args: indexToView 1`] = `0`;
+
+exports[`importTraceEvents mismatched args: profileGroup.name 1`] = `"mismatched-args.json"`;
+
+exports[`importTraceEvents mismatched name 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [],
+}
+`;
+
+exports[`importTraceEvents mismatched name: indexToView 1`] = `0`;
+
+exports[`importTraceEvents mismatched name: profileGroup.name 1`] = `"mismatched-name.json"`;
+
 exports[`importTraceEvents multiprocess 1`] = `
 Object {
   "frames": Array [
@@ -257,6 +632,164 @@ exports[`importTraceEvents multiprocess: indexToView 1`] = `0`;
 
 exports[`importTraceEvents multiprocess: profileGroup.name 1`] = `"multiprocess.json"`;
 
+exports[`importTraceEvents not enough end events 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A {\\"x\\":1}",
+      "line": undefined,
+      "name": "A {\\"x\\":1}",
+      "selfWeight": 2,
+      "totalWeight": 11,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A {\\"x\\":2}",
+      "line": undefined,
+      "name": "A {\\"x\\":2}",
+      "selfWeight": 9,
+      "totalWeight": 10,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A {\\"x\\":1} 1.00µs",
+    "A {\\"x\\":1};A {\\"x\\":2} 9.00µs",
+    "A {\\"x\\":1};A {\\"x\\":2};A {\\"x\\":1} 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents not enough end events: indexToView 1`] = `0`;
+
+exports[`importTraceEvents not enough end events: profileGroup.name 1`] = `"not-enough-end-events.json"`;
+
+exports[`importTraceEvents not out-of-order 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A",
+      "line": undefined,
+      "name": "A",
+      "selfWeight": 2,
+      "totalWeight": 10,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "B",
+      "line": undefined,
+      "name": "B",
+      "selfWeight": 2,
+      "totalWeight": 8,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "C",
+      "line": undefined,
+      "name": "C",
+      "selfWeight": 6,
+      "totalWeight": 6,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A 1.00µs",
+    "A;B 1.00µs",
+    "A;B;C 6.00µs",
+    "A;B 1.00µs",
+    "A 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents not out-of-order unbalanced name 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 1,
+      "totalWeight": 10,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta",
+      "line": undefined,
+      "name": "beta",
+      "selfWeight": 9,
+      "totalWeight": 9,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "alpha 1.00µs",
+    "alpha;beta 9.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents not out-of-order unbalanced name: indexToView 1`] = `0`;
+
+exports[`importTraceEvents not out-of-order unbalanced name: profileGroup.name 1`] = `"out-of-order-unbalanced-name.json"`;
+
+exports[`importTraceEvents not out-of-order: indexToView 1`] = `0`;
+
+exports[`importTraceEvents not out-of-order: profileGroup.name 1`] = `"out-of-order.json"`;
+
+exports[`importTraceEvents only begin events 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A {\\"x\\":1}",
+      "line": undefined,
+      "name": "A {\\"x\\":1}",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "B {\\"x\\":2}",
+      "line": undefined,
+      "name": "B {\\"x\\":2}",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "C {\\"x\\":2}",
+      "line": undefined,
+      "name": "C {\\"x\\":2}",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A {\\"x\\":1} 1.00µs",
+    "A {\\"x\\":1};B {\\"x\\":2} 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents only begin events: indexToView 1`] = `0`;
+
+exports[`importTraceEvents only begin events: profileGroup.name 1`] = `"only-begin-events.json"`;
+
 exports[`importTraceEvents partial json import 1`] = `
 Object {
   "frames": Array [
@@ -309,6 +842,62 @@ Object {
 }
 `;
 
+exports[`importTraceEvents partial json import chunked 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 partial json import chunked: indexToView 1`] = `0`;
+
+exports[`importTraceEvents partial json import chunked: profileGroup.name 1`] = `"simple-partial.json"`;
+
 exports[`importTraceEvents partial json import trailing comma 1`] = `
 Object {
   "frames": Array [
@@ -361,6 +950,62 @@ Object {
 }
 `;
 
+exports[`importTraceEvents partial json import trailing comma chunked 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 partial json import trailing comma chunked: indexToView 1`] = `0`;
+
+exports[`importTraceEvents partial json import trailing comma chunked: profileGroup.name 1`] = `"simple-partial-trailing-comma.json"`;
+
 exports[`importTraceEvents partial json import trailing comma: indexToView 1`] = `0`;
 
 exports[`importTraceEvents partial json import trailing comma: profileGroup.name 1`] = `"simple-partial-trailing-comma.json"`;
@@ -417,6 +1062,62 @@ Object {
 }
 `;
 
+exports[`importTraceEvents partial json import whitespace padding chunked 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 partial json import whitespace padding chunked: indexToView 1`] = `0`;
+
+exports[`importTraceEvents partial json import whitespace padding chunked: profileGroup.name 1`] = `"simple-partial-whitespace.json"`;
+
 exports[`importTraceEvents partial json import whitespace padding: indexToView 1`] = `0`;
 
 exports[`importTraceEvents partial json import whitespace padding: profileGroup.name 1`] = `"simple-partial-whitespace.json"`;
@@ -526,3 +1227,231 @@ exports[`importTraceEvents simple object: profileGroup.name 1`] = `"simple-objec
 exports[`importTraceEvents simple: indexToView 1`] = `0`;
 
 exports[`importTraceEvents simple: profileGroup.name 1`] = `"simple.json"`;
+
+exports[`importTraceEvents unbalanced args 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A {\\"x\\":1}",
+      "line": undefined,
+      "name": "A {\\"x\\":1}",
+      "selfWeight": 2,
+      "totalWeight": 10,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A {\\"x\\":2}",
+      "line": undefined,
+      "name": "A {\\"x\\":2}",
+      "selfWeight": 8,
+      "totalWeight": 8,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A {\\"x\\":1} 1.00µs",
+    "A {\\"x\\":1};A {\\"x\\":2} 8.00µs",
+    "A {\\"x\\":1} 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents unbalanced args: indexToView 1`] = `0`;
+
+exports[`importTraceEvents unbalanced args: profileGroup.name 1`] = `"unbalanced-args.json"`;
+
+exports[`importTraceEvents unbalanced name 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 1,
+      "totalWeight": 10,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta",
+      "line": undefined,
+      "name": "beta",
+      "selfWeight": 9,
+      "totalWeight": 9,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "alpha 1.00µs",
+    "alpha;beta 9.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents unbalanced name: indexToView 1`] = `0`;
+
+exports[`importTraceEvents unbalanced name: profileGroup.name 1`] = `"unbalanced-name.json"`;
+
+exports[`importTraceEvents x events matching end 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 12,
+      "totalWeight": 20,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta",
+      "line": undefined,
+      "name": "beta",
+      "selfWeight": 4,
+      "totalWeight": 6,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "gamma",
+      "line": undefined,
+      "name": "gamma",
+      "selfWeight": 4,
+      "totalWeight": 6,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "alpha 1.00µs",
+    "alpha;beta 1.00µs",
+    "alpha;beta;gamma 1.00µs",
+    "alpha 2.00µs",
+    "alpha;gamma 1.00µs",
+    "alpha;gamma;beta 1.00µs",
+    "alpha 2.00µs",
+    "alpha;beta 1.00µs",
+    "alpha;beta;gamma 1.00µs",
+    "alpha 3.00µs",
+    "alpha;gamma 1.00µs",
+    "alpha;gamma;beta 1.00µs",
+    "alpha 4.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents x events matching end: indexToView 1`] = `0`;
+
+exports[`importTraceEvents x events matching end: profileGroup.name 1`] = `"x-events-matching-end.json"`;
+
+exports[`importTraceEvents x events matching start 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 12,
+      "totalWeight": 20,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta",
+      "line": undefined,
+      "name": "beta",
+      "selfWeight": 4,
+      "totalWeight": 6,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "gamma",
+      "line": undefined,
+      "name": "gamma",
+      "selfWeight": 4,
+      "totalWeight": 6,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "alpha 1.00µs",
+    "alpha;beta;gamma 1.00µs",
+    "alpha;beta 1.00µs",
+    "alpha 2.00µs",
+    "alpha;gamma;beta 1.00µs",
+    "alpha;gamma 1.00µs",
+    "alpha 2.00µs",
+    "alpha;gamma;beta 1.00µs",
+    "alpha;gamma 1.00µs",
+    "alpha 2.00µs",
+    "alpha;beta;gamma 1.00µs",
+    "alpha;beta 1.00µs",
+    "alpha 5.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents x events matching start: indexToView 1`] = `0`;
+
+exports[`importTraceEvents x events matching start: profileGroup.name 1`] = `"x-events-matching-start.json"`;
+
+exports[`importTraceEvents zero duration events 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A",
+      "line": undefined,
+      "name": "A",
+      "selfWeight": 10,
+      "totalWeight": 10,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "B",
+      "line": undefined,
+      "name": "B",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "C",
+      "line": undefined,
+      "name": "C",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "D",
+      "line": undefined,
+      "name": "D",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A 10.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents zero duration events: indexToView 1`] = `0`;
+
+exports[`importTraceEvents zero duration events: profileGroup.name 1`] = `"zero-duration-events.json"`;

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

@@ -8,7 +8,7 @@ Object {
       "file": "bootstrap_node.js",
       "key": " bootstrap_node.js:10:10",
       "line": 10,
-      "name": "(anonymous)",
+      "name": "(anonymous bootstrap_node.js:10)",
       "selfWeight": 0,
       "totalWeight": 116424,
     },
@@ -53,7 +53,7 @@ Object {
       "file": "util.js",
       "key": " util.js:1:11",
       "line": 1,
-      "name": "(anonymous)",
+      "name": "(anonymous util.js:1)",
       "selfWeight": 0,
       "totalWeight": 29385,
     },
@@ -62,7 +62,7 @@ Object {
       "file": "internal/encoding.js",
       "key": " internal/encoding.js:1:11",
       "line": 1,
-      "name": "(anonymous)",
+      "name": "(anonymous encoding.js:1)",
       "selfWeight": 0,
       "totalWeight": 29385,
     },
@@ -107,7 +107,7 @@ Object {
       "file": "module.js",
       "key": " module.js:1:11",
       "line": 1,
-      "name": "(anonymous)",
+      "name": "(anonymous module.js:1)",
       "selfWeight": 0,
       "totalWeight": 22888,
     },
@@ -116,7 +116,7 @@ Object {
       "file": "fs.js",
       "key": " fs.js:1:11",
       "line": 1,
-      "name": "(anonymous)",
+      "name": "(anonymous fs.js:1)",
       "selfWeight": 0,
       "totalWeight": 22888,
     },
@@ -197,7 +197,7 @@ Object {
       "file": "/Users/jlfwong/code/speedscope/sample/programs/javascript/simple.js",
       "key": " /Users/jlfwong/code/speedscope/sample/programs/javascript/simple.js:1:11",
       "line": 1,
-      "name": "(anonymous)",
+      "name": "(anonymous simple.js:1)",
       "selfWeight": 0,
       "totalWeight": 64151,
     },
@@ -240,22 +240,22 @@ Object {
   ],
   "name": "simple.v8log.json",
   "stacks": Array [
-    "(anonymous);startup;setupGlobalVariables;NativeModule.require;NativeModule.compile;(anonymous);NativeModule.require;NativeModule.compile;(anonymous);(c++) v8::internal::Runtime_CreateArrayLiteral;(c++) v8::internal::JSFunction::EnsureHasInitialMap 29.38ms",
-    "(anonymous);startup;setupGlobalConsole;setupInspectorCommandLineAPI;NativeModule.require;NativeModule.compile;(anonymous);NativeModule.require;NativeModule.compile;(anonymous);(c++) v8::internal::Runtime_StoreIC_Miss;(c++) v8::internal::Map::RawCopy 22.89ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;b;d 37.52ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;c;d 1.28ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;b;d 2.55ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;c;d 1.27ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;b;d 1.28ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;c;d 1.27ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;b;d 1.29ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;c;d 1.26ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;b;d 1.31ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;c;d 2.52ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;c 1.27ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;b 3.62ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;c 1.28ms",
-    "(anonymous);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous);a;b 6.42ms",
+    "(anonymous bootstrap_node.js:10);startup;setupGlobalVariables;NativeModule.require;NativeModule.compile;(anonymous util.js:1);NativeModule.require;NativeModule.compile;(anonymous encoding.js:1);(c++) v8::internal::Runtime_CreateArrayLiteral;(c++) v8::internal::JSFunction::EnsureHasInitialMap 29.38ms",
+    "(anonymous bootstrap_node.js:10);startup;setupGlobalConsole;setupInspectorCommandLineAPI;NativeModule.require;NativeModule.compile;(anonymous module.js:1);NativeModule.require;NativeModule.compile;(anonymous fs.js:1);(c++) v8::internal::Runtime_StoreIC_Miss;(c++) v8::internal::Map::RawCopy 22.89ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;b;d 37.52ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;c;d 1.28ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;b;d 2.55ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;c;d 1.27ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;b;d 1.28ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;c;d 1.27ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;b;d 1.29ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;c;d 1.26ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;b;d 1.31ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;c;d 2.52ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;c 1.27ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;b 3.62ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;c 1.28ms",
+    "(anonymous bootstrap_node.js:10);startup;Module.runMain;Module._load;tryModuleLoad;Module.load;Module._extensions..js;Module._compile;(anonymous simple.js:1);a;b 6.42ms",
   ],
 }
 `;

src/import/bg-flamegraph.test.ts

@@ -7,3 +7,15 @@ test('importFromBGFlameGraph', async () => {
 test('importFromBGFlameGraph with CRLF', async () => {
   await checkProfileSnapshot('./sample/profiles/stackcollapse/simple-crlf.txt')
 })
+
+test('importFromBGFlameGraph with UTF-16, Little Endian', async () => {
+  await checkProfileSnapshot('./sample/profiles/stackcollapse/simple-utf16-le.txt')
+})
+
+test('importFromBGFlameGraph with UTF-16, Big Endian', async () => {
+  await checkProfileSnapshot('./sample/profiles/stackcollapse/simple-utf16-be.txt')
+})
+
+test('importFromBGFlameGraph with invalid lines', async () => {
+  await checkProfileSnapshot('./sample/profiles/stackcollapse/simple-with-invalids.txt')
+})

src/import/bg-flamegraph.ts

@@ -1,25 +1,31 @@
 // https://github.com/brendangregg/FlameGraph#2-fold-stacks
 
 import {Profile, FrameInfo, StackListProfileBuilder} from '../lib/profile'
+import {TextFileContent} from './utils'
 
 interface BGSample {
   stack: FrameInfo[]
   duration: number
 }
 
-function parseBGFoldedStacks(contents: string): BGSample[] {
+function parseBGFoldedStacks(contents: TextFileContent): BGSample[] {
   const samples: BGSample[] = []
-  contents.replace(/^(.*) (\d+)$/gm, (match: string, stack: string, n: string) => {
+  for (const line of contents.splitLines()) {
+    const match = /^(.*) (\d+)$/gm.exec(line)
+    if (!match) continue
+    const stack = match[1]
+    const n = match[2]
+
     samples.push({
       stack: stack.split(';').map(name => ({key: name, name: name})),
       duration: parseInt(n, 10),
     })
-    return match
-  })
+  }
+
   return samples
 }
 
-export function importFromBGFlameGraph(contents: string): Profile | null {
+export function importFromBGFlameGraph(contents: TextFileContent): Profile | null {
   const parsed = parseBGFoldedStacks(contents)
   const duration = parsed.reduce((prev: number, cur: BGSample) => prev + cur.duration, 0)
   const profile = new StackListProfileBuilder(duration)

src/import/callgrind.test.ts

@@ -0,0 +1,13 @@
+import {checkProfileSnapshot} from '../lib/test-utils'
+
+test('importFromCallgrind', async () => {
+  await checkProfileSnapshot('./sample/profiles/callgrind/callgrind.example.log')
+})
+
+test('importFromCallgrind name compression', async () => {
+  await checkProfileSnapshot('./sample/profiles/callgrind/callgrind.name-compression.log')
+})
+
+test('importFromCallgrind multiple event types', async () => {
+  await checkProfileSnapshot('./sample/profiles/callgrind/callgrind.multiple-event-types.log')
+})

src/import/callgrind.ts

@@ -0,0 +1,518 @@
+// https://www.valgrind.org/docs/manual/cl-format.html
+//
+// Larger example files can be found by searching on github:
+// https://github.com/search?q=cfn%3D&type=code
+//
+// Converting callgrind files into flamegraphs is challenging because callgrind
+// formatted profiles contain call graphs with weighted nodes and edges, and
+// such a weighted call graph does not uniquely define a flamegraph.
+//
+// Consider a program that looks like this:
+//
+//    // example.js
+//    function backup(read) {
+//      if (read) {
+//        read()
+//      } else {
+//        write()
+//      }
+//    }
+//
+//    function start() {
+//       backup(true)
+//    }
+//
+//    function end() {
+//       backup(false)
+//    }
+//
+//    start()
+//    end()
+//
+// Profiling this program might result in a profile that looks like the
+// following flame graph defined in Brendan Gregg's plaintext format:
+//
+//    start;backup;read 4
+//    end;backup;write 4
+//
+// When we convert this execution into a call-graph, we get the following:
+//
+//      +------------------+     +---------------+
+//      | start (self: 0)  |     | end (self: 0) |
+//      +------------------+     +---------------|
+//                   \               /
+//        (total: 4)  \             / (total: 4)
+//                     v           v
+//                 +------------------+
+//                 | backup (self: 0) |
+//                 +------------------+
+//                    /            \
+//       (total: 4)  /              \ (total: 4)
+//                  v                v
+//      +----------------+      +-----------------+
+//      | read (self: 4) |      | write (self: 4) |
+//      +----------------+      +-----------------+
+//
+// In the process of the conversion, we've lost information about the ratio of
+// time spent in read v.s. write in the start call v.s. the end call. The
+// following flame graph would yield the exact same call-graph, and therefore
+// the exact sample call-grind formatted profile:
+//
+//    start;backup;read 3
+//    start;backup;write 1
+//    end;backup;read 1
+//    end;backup;write 3
+//
+// This is unfortunate, since it means we can't produce a flamegraph that isn't
+// potentially lying about the what the actual execution behavior was. To
+// produce a flamegraph at all from the call graph representation, we have to
+// decide how much weight each sub-call should have. Given that we know the
+// total weight of each node, we'll make the incorrect assumption that every
+// invocation of a function will have the average distribution of costs among
+// the sub-function invocations. In the example given, this means we assume that
+// every invocation of backup() is assumed to spend half its time in read() and
+// half its time in write().
+//
+// So the flamegraph we'll produce from the given call-graph will actually be:
+//
+//    start;backup;read 2
+//    start;backup;write 2
+//    end;backup;read 2
+//    end;backup;write 2
+//
+// A particularly bad consequence is that the resulting flamegraph will suggest
+// that there was at some point a call stack that looked like
+// strat;backup;write, even though that never happened in the real program
+// execution.
+
+import {CallTreeProfileBuilder, Frame, FrameInfo, Profile, ProfileGroup} from '../lib/profile'
+import {getOrElse, getOrInsert, KeyedSet} from '../lib/utils'
+import {ByteFormatter, TimeFormatter} from '../lib/value-formatters'
+import {TextFileContent} from './utils'
+
+class CallGraph {
+  private frameSet = new KeyedSet<Frame>()
+  private totalWeights = new Map<Frame, number>()
+  private childrenTotalWeights = new Map<Frame, Map<Frame, number>>()
+
+  constructor(private fileName: string, private fieldName: string) {}
+
+  private getOrInsertFrame(info: FrameInfo): Frame {
+    return Frame.getOrInsert(this.frameSet, info)
+  }
+
+  private addToTotalWeight(frame: Frame, weight: number) {
+    if (!this.totalWeights.has(frame)) {
+      this.totalWeights.set(frame, weight)
+    } else {
+      this.totalWeights.set(frame, this.totalWeights.get(frame)! + weight)
+    }
+  }
+
+  addSelfWeight(frameInfo: FrameInfo, weight: number) {
+    this.addToTotalWeight(this.getOrInsertFrame(frameInfo), weight)
+  }
+
+  addChildWithTotalWeight(parentInfo: FrameInfo, childInfo: FrameInfo, weight: number) {
+    const parent = this.getOrInsertFrame(parentInfo)
+    const child = this.getOrInsertFrame(childInfo)
+
+    const childMap = getOrInsert(this.childrenTotalWeights, parent, k => new Map())
+
+    if (!childMap.has(child)) {
+      childMap.set(child, weight)
+    } else {
+      childMap.set(child, childMap.get(child) + weight)
+    }
+
+    this.addToTotalWeight(parent, weight)
+  }
+
+  toProfile(): Profile {
+    // To convert a call graph into a profile, we first need to identify what
+    // the "root weights" are. "root weights" are the total weight of each frame
+    // while at the bottom of the call-stack. The majority of functions will have
+    // zero weight while at the bottom of the call-stack, since most functions
+    // are never at the bottom of the call-stack.
+    const rootWeights = new Map<Frame, number>()
+    for (let [frame, totalWeight] of this.totalWeights) {
+      rootWeights.set(frame, totalWeight)
+    }
+    for (let [_, childMap] of this.childrenTotalWeights) {
+      for (let [child, weight] of childMap) {
+        rootWeights.set(child, getOrElse(rootWeights, child, () => weight) - weight)
+      }
+    }
+
+    let totalProfileWeight = 0
+    for (let [_, rootWeight] of rootWeights) {
+      totalProfileWeight += rootWeight
+    }
+
+    const profile = new CallTreeProfileBuilder()
+
+    let unitMultiplier = 1
+
+    // These are common field names used by Xdebug. Let's give them special
+    // treatment to more helpfully display units.
+    if (this.fieldName === 'Time_(10ns)') {
+      profile.setName(`${this.fileName} -- Time`)
+      unitMultiplier = 10
+      profile.setValueFormatter(new TimeFormatter('nanoseconds'))
+    } else if (this.fieldName == 'Memory_(bytes)') {
+      profile.setName(`${this.fileName} -- Memory`)
+      profile.setValueFormatter(new ByteFormatter())
+    } else {
+      profile.setName(`${this.fileName} -- ${this.fieldName}`)
+    }
+
+    let totalCumulative = 0
+
+    const currentStack = new Set<Frame>()
+
+    const visit = (frame: Frame, callTreeWeight: number) => {
+      if (currentStack.has(frame)) {
+        // Call-graphs are allowed to have cycles. Call-trees are not. In case
+        // we run into a cycle, we'll just avoid recursing into the same subtree
+        // more than once in a call stack. The result will be that the time
+        // spent in the recursive call will instead be attributed as self time
+        // in the parent.
+        return
+      }
+
+      // We need to calculate how much weight to give to a particular node in
+      // the call-tree based on information from the call-graph. A given node
+      // from the call-graph might correspond to several nodes in the call-tree,
+      // so we need to decide how to distribute the weight of the call-graph
+      // node to the various call-tree nodes.
+      //
+      // We assume that the weighting is evenly distributed. If a call-tree node
+      // X occurs with weights x1 and x2, and we know from the call-graph that
+      // child Y of X has a total weight y, then we assume the child Y of X has
+      // weight y*x1/(x1 + x2) for the first occurrence, and y*x2(y1 + x2) for
+      // the second occurrence.
+      //
+      // This assumption is incorrectly (sometimes wildly so), but we need to
+      // make *some* assumption, and this seems to me the sanest option.
+      //
+      // See the comment at the top of the file for an example where this
+      // assumption can yield especially misleading results.
+
+      if (callTreeWeight < 1e-4 * totalProfileWeight) {
+        // This assumption about even distribution can cause us to generate a
+        // call tree with dramatically more nodes than the call graph.
+        //
+        // Consider a function which is called 1000 times, where the result is
+        // cached. The first invocation has a complex call tree and may take
+        // 100ms. Let's say that this complex call tree has 250 nodes.
+        //
+        // Subsequent calls use the cached result, so take only 1ms, and have no
+        // children in their call trees. So we have, in total, (1 + 250) + 999
+        // nodes in the call-tree for a total of 1250 nodes.
+        //
+        // The information specific to each invocation is, however, lost in the
+        // call-graph representation.
+        //
+        // Because of the even distribution assumption we make, this means that
+        // the call-trees of each invocation will have the same shape. Each 1ms
+        // call-tree will look identical to the 100ms call-tree, just
+        // horizontally compacted. So instead of 1251 nodes, we have
+        // 1000*250=250,000 nodes in the resulting call graph.
+        //
+        // To mitigate this explosion of the # of nodes, we ignore subtrees
+        // whose weights are less than 0.01% of the total weight of the profile.
+        return
+      }
+
+      // totalWeightForFrame is the total weight for the given frame in the
+      // entire call graph.
+      const callGraphWeightForFrame = getOrElse(this.totalWeights, frame, () => 0)
+      if (callGraphWeightForFrame === 0) {
+        return
+      }
+
+      // This is the portion of the total time the given child spends within the
+      // given parent that we'll attribute to this specific path in the call
+      // tree.
+      const ratio = callTreeWeight / callGraphWeightForFrame
+
+      let selfWeightForFrame = callGraphWeightForFrame
+
+      profile.enterFrame(frame, totalCumulative * unitMultiplier)
+
+      currentStack.add(frame)
+      for (let [child, callGraphEdgeWeight] of this.childrenTotalWeights.get(frame) || []) {
+        selfWeightForFrame -= callGraphEdgeWeight
+        const childCallTreeWeight = callGraphEdgeWeight * ratio
+        visit(child, childCallTreeWeight)
+      }
+      currentStack.delete(frame)
+
+      totalCumulative += selfWeightForFrame * ratio
+      profile.leaveFrame(frame, totalCumulative * unitMultiplier)
+    }
+
+    for (let [rootFrame, rootWeight] of rootWeights) {
+      if (rootWeight <= 0) {
+        continue
+      }
+      // If we've reached here, it means that the given root frame has some
+      // weight while at the top of the call-stack.
+      visit(rootFrame, rootWeight)
+    }
+
+    return profile.build()
+  }
+}
+
+// In writing this, I initially tried to use the formal grammar described in
+// section 3.2 of https://www.valgrind.org/docs/manual/cl-format.html, but
+// stopped because most of the information isn't relevant for visualization, and
+// because there's inconsistency between the grammar and subsequence
+// descriptions.
+//
+// For example, the grammar for headers specifies all the valid header names,
+// but then the writing below that mentions there may be a "totals" or "summary"
+// header, which should be disallowed by the formal grammar.
+//
+// So, instead, I'm not going to bother with a formal parse. Since there are no
+// real recursive structures in this file format, that should be okay.
+class CallgrindParser {
+  private lines: string[]
+  private lineNum: number
+
+  private callGraphs: CallGraph[] | null = null
+  private eventsLine: string | null = null
+
+  private filename: string | null = null
+  private functionName: string | null = null
+  private calleeFilename: string | null = null
+  private calleeFunctionName: string | null = null
+
+  private savedFileNames: {[id: string]: string} = {}
+  private savedFunctionNames: {[id: string]: string} = {}
+
+  constructor(contents: TextFileContent, private importedFileName: string) {
+    this.lines = contents.splitLines()
+    this.lineNum = 0
+  }
+
+  parse(): ProfileGroup | null {
+    while (this.lineNum < this.lines.length) {
+      const line = this.lines[this.lineNum++]
+
+      if (/^\s*#/.exec(line)) {
+        // Line is a comment. Ignore it.
+        continue
+      }
+
+      if (/^\s*$/.exec(line)) {
+        // Line is empty. Ignore it.
+        continue
+      }
+
+      if (this.parseHeaderLine(line)) {
+        continue
+      }
+
+      if (this.parseAssignmentLine(line)) {
+        continue
+      }
+
+      if (this.parseCostLine(line, 'self')) {
+        continue
+      }
+
+      throw new Error(`Unrecognized line "${line}" on line ${this.lineNum}`)
+    }
+
+    if (!this.callGraphs) {
+      return null
+    }
+    return {
+      name: this.importedFileName,
+      indexToView: 0,
+      profiles: this.callGraphs.map(cg => cg.toProfile()),
+    }
+  }
+
+  private frameInfo(): FrameInfo {
+    const file = this.filename || '(unknown)'
+    const name = this.functionName || '(unknown)'
+    const key = `${file}:${name}`
+    return {key, name, file}
+  }
+
+  private calleeFrameInfo(): FrameInfo {
+    const file = this.calleeFilename || '(unknown)'
+    const name = this.calleeFunctionName || '(unknown)'
+    const key = `${file}:${name}`
+    return {key, name, file}
+  }
+
+  private parseHeaderLine(line: string): boolean {
+    const headerMatch = /^\s*(\w+):\s*(.*)+$/.exec(line)
+    if (!headerMatch) return false
+
+    if (headerMatch[1] !== 'events') {
+      // We don't care about other headers. Ignore this line.
+      return true
+    }
+
+    // Line specifies the formatting of subsequent cost lines.
+    const fields = headerMatch[2].split(' ')
+
+    if (this.callGraphs != null) {
+      throw new Error(
+        `Duplicate "events: " lines specified. First was "${this.eventsLine}", now received "${line}" on ${this.lineNum}.`,
+      )
+    }
+
+    this.callGraphs = fields.map(fieldName => {
+      return new CallGraph(this.importedFileName, fieldName)
+    })
+
+    return true
+  }
+
+  private parseAssignmentLine(line: string): boolean {
+    const assignmentMatch = /^(\w+)=\s*(.*)$/.exec(line)
+    if (!assignmentMatch) return false
+
+    const key = assignmentMatch[1]
+    const value = assignmentMatch[2]
+
+    switch (key) {
+      case 'fe':
+      case 'fi':
+      case 'fl': {
+        this.filename = this.parseNameWithCompression(value, this.savedFileNames)
+        this.calleeFilename = this.filename
+        break
+      }
+
+      case 'fn': {
+        this.functionName = this.parseNameWithCompression(value, this.savedFunctionNames)
+        break
+      }
+
+      case 'cfi':
+      case 'cfl': {
+        this.calleeFilename = this.parseNameWithCompression(value, this.savedFileNames)
+        break
+      }
+
+      case 'cfn': {
+        this.calleeFunctionName = this.parseNameWithCompression(value, this.savedFunctionNames)
+        break
+      }
+
+      case 'calls': {
+        // TODO(jlfwong): This is currently ignoring the number of calls being
+        // made. Accounting for the number of calls might be unhelpful anyway,
+        // since it'll just be copying the exact same frame over-and-over again,
+        // but that might be better than ignoring it.
+        this.parseCostLine(this.lines[this.lineNum++], 'child')
+        break
+      }
+
+      default: {
+        console.log(`Ignoring assignment to unrecognized key "${line}" on line ${this.lineNum}`)
+      }
+    }
+
+    return true
+  }
+
+  private parseNameWithCompression(name: string, saved: {[id: string]: string}): string {
+    {
+      const nameDefinitionMatch = /^\((\d+)\)\s*(.+)$/.exec(name)
+
+      if (nameDefinitionMatch) {
+        const id = nameDefinitionMatch[1]
+        const name = nameDefinitionMatch[2]
+        if (id in saved) {
+          throw new Error(
+            `Redefinition of name with id: ${id}. Original value was "${saved[id]}". Tried to redefine as "${name}" on line ${this.lineNum}.`,
+          )
+        }
+
+        saved[id] = name
+        return name
+      }
+    }
+
+    {
+      const nameUseMatch = /^\((\d+)\)$/.exec(name)
+      if (nameUseMatch) {
+        const id = nameUseMatch[1]
+        if (!(id in saved)) {
+          throw new Error(
+            `Tried to use name with id ${id} on line ${this.lineNum} before it was defined.`,
+          )
+        }
+        return saved[id]
+      }
+    }
+
+    return name
+  }
+
+  private parseCostLine(line: string, costType: 'self' | 'child'): boolean {
+    // TODO(jlfwong): Handle "Subposition compression"
+    // TODO(jlfwong): Allow hexadecimal encoding
+
+    const parts = line.split(/\s+/)
+    const nums: number[] = []
+    for (let part of parts) {
+      // As far as I can tell from the specification, the callgrind format does
+      // not accept floating point numbers.
+      const asNum = parseInt(part)
+      if (isNaN(asNum)) {
+        return false
+      }
+
+      nums.push(asNum)
+    }
+
+    if (nums.length == 0) {
+      return false
+    }
+
+    // TODO(jlfwong): Handle custom positions format w/ multiple parts
+    const numPositionFields = 1
+
+    // NOTE: We intentionally do not include the line number here because
+    // callgrind uses the line number of the function invocation, not the
+    // line number of the function definition, which conflicts with how
+    // speedscope uses line numbers.
+    //
+    // const lineNum = nums[0]
+
+    if (!this.callGraphs) {
+      throw new Error(
+        `Encountered a cost line on line ${this.lineNum} before event specification was provided.`,
+      )
+    }
+    for (let i = 0; i < this.callGraphs.length; i++) {
+      if (costType === 'self') {
+        this.callGraphs[i].addSelfWeight(this.frameInfo(), nums[numPositionFields + i])
+      } else if (costType === 'child') {
+        this.callGraphs[i].addChildWithTotalWeight(
+          this.frameInfo(),
+          this.calleeFrameInfo(),
+          nums[numPositionFields + i] || 0,
+        )
+      }
+    }
+
+    return true
+  }
+}
+
+export function importFromCallgrind(
+  contents: TextFileContent,
+  importedFileName: string,
+): ProfileGroup | null {
+  return new CallgrindParser(contents, importedFileName).parse()
+}

src/import/chrome.test.ts

@@ -1,4 +1,5 @@
 import {checkProfileSnapshot} from '../lib/test-utils'
+import {withMockedFileChunkSizeForTests} from './utils'
 
 test('importFromChromeCPUProfile', async () => {
   await checkProfileSnapshot('./sample/profiles/Chrome/65/simple.cpuprofile')
@@ -8,6 +9,12 @@ test('importFromChromeTimeline', async () => {
   await checkProfileSnapshot('./sample/profiles/Chrome/65/simple-timeline.json')
 })
 
+test('importFromChromeTimeline chunked', async () => {
+  await withMockedFileChunkSizeForTests(100, async () => {
+    await checkProfileSnapshot('./sample/profiles/Chrome/65/simple-timeline.json')
+  })
+})
+
 test('importFromChromeTimeline Chrome 69', async () => {
   await checkProfileSnapshot('./sample/profiles/Chrome/69/simple.json')
 })

src/import/chrome.ts

@@ -168,10 +168,22 @@ export function importFromChromeTimeline(events: TimelineEvent[], fileName: stri
 const callFrameToFrameInfo = new Map<CPUProfileCallFrame, FrameInfo>()
 function frameInfoForCallFrame(callFrame: CPUProfileCallFrame) {
   return getOrInsert(callFrameToFrameInfo, callFrame, callFrame => {
-    const name = callFrame.functionName || '(anonymous)'
     const file = callFrame.url
-    const line = callFrame.lineNumber
-    const col = callFrame.columnNumber
+
+    // In Chrome profiles, line numbers & column numbers are both 0-indexed.
+    //
+    // We're going to normalize these to be 1-based to avoid needing to normalize
+    // these at the presentation layer.
+    let line = callFrame.lineNumber
+    if (line != null) line++
+
+    let col = callFrame.columnNumber
+    if (col != null) col++
+
+    const name =
+      callFrame.functionName ||
+      (file ? `(anonymous ${file.split('/').pop()}:${line})` : '(anonymous)')
+
     return {
       key: `${name}:${file}:${line}:${col}`,
       name,
@@ -224,6 +236,10 @@ export function importFromChromeCPUProfile(chromeProfile: CPUProfile): Profile {
   // Ref: https://github.com/v8/v8/blob/44bd8fd7/src/inspector/js_protocol.json#L1485
   let elapsed = chromeProfile.timeDeltas[0]
 
+  // Prevents negative time deltas from causing bad data. See
+  // https://github.com/jlfwong/speedscope/pull/305 for details.
+  let lastValidElapsed = elapsed
+
   let lastNodeId = NaN
 
   // The chrome CPU profile format doesn't collapse identical samples. We'll do that
@@ -232,22 +248,26 @@ export function importFromChromeCPUProfile(chromeProfile: CPUProfile): Profile {
     const nodeId = chromeProfile.samples[i]
     if (nodeId != lastNodeId) {
       samples.push(nodeId)
-      sampleTimes.push(elapsed)
+      if (elapsed < lastValidElapsed) {
+        sampleTimes.push(lastValidElapsed)
+      } else {
+        sampleTimes.push(elapsed)
+        lastValidElapsed = elapsed
+      }
     }
 
     if (i === chromeProfile.samples.length - 1) {
       if (!isNaN(lastNodeId)) {
         samples.push(lastNodeId)
-        sampleTimes.push(elapsed)
+        if (elapsed < lastValidElapsed) {
+          sampleTimes.push(lastValidElapsed)
+        } else {
+          sampleTimes.push(elapsed)
+          lastValidElapsed = elapsed
+        }
       }
     } else {
-      let timeDelta = chromeProfile.timeDeltas[i + 1]
-      if (timeDelta < 0) {
-        // This is super noisy, but can be helpful when debugging strange data
-        // console.warn('Substituting zero for unexpected time delta:', timeDelta, 'at index', i)
-        timeDelta = 0
-      }
-
+      const timeDelta = chromeProfile.timeDeltas[i + 1]
       elapsed += timeDelta
       lastNodeId = nodeId
     }

src/import/firefox.ts

@@ -176,7 +176,7 @@ export function importFromFirefox(firefoxProfile: FirefoxProfile): Profile {
         const frameData = thread.frameTable.data[f]
         const location = thread.stringTable[frameData[0]]
 
-        const match = /(.*)\s+\((.*?):?(\d+)?\)$/.exec(location)
+        const match = /(.*)\s+\((.*?)(?::(\d+))?(?::(\d+))?\)$/.exec(location)
 
         if (!match) return null
 
@@ -193,7 +193,11 @@ export function importFromFirefox(firefoxProfile: FirefoxProfile): Profile {
           key: location,
           name: match[1]!,
           file: match[2]!,
+
+          // In Firefox profiles, line numbers are 1-based, but columns are
+          // 0-based. Let's normalize both to be 1-based.
           line: match[3] ? parseInt(match[3]) : undefined,
+          col: match[4] ? parseInt(match[4]) + 1 : undefined,
         }))
       })
       .filter(f => f != null) as FrameInfo[]

src/import/index.ts

@@ -15,11 +15,13 @@ import {importSpeedscopeProfiles} from '../lib/file-format'
 import {importFromV8ProfLog} from './v8proflog'
 import {importFromLinuxPerf} from './linux-tools-perf'
 import {importFromHaskell} from './haskell'
+import {importFromSafari} from './safari'
 import {ProfileDataSource, TextProfileDataSource, MaybeCompressedDataReader} from './utils'
 import {importAsPprofProfile} from './pprof'
 import {decodeBase64} from '../lib/utils'
 import {importFromChromeHeapProfile} from './v8heapalloc'
 import {isTraceEventFormatted, importTraceEvents} from './trace-event'
+import {importFromCallgrind} from './callgrind'
 
 export async function importProfileGroupFromText(
   fileName: string,
@@ -71,26 +73,6 @@ function toGroup(profile: Profile | null): ProfileGroup | null {
   return {name: profile.getName(), indexToView: 0, profiles: [profile]}
 }
 
-function fixUpJSON(content: string): string {
-  // This code is similar to the code from here:
-  // https://github.com/catapult-project/catapult/blob/27e047e0494df162022be6aa8a8862742a270232/tracing/tracing/extras/importer/trace_event_importer.html#L197-L208
-  //
-  //   If the event data begins with a [, then we know it should end with a ]. The
-  //   reason we check for this is because some tracing implementations cannot
-  //   guarantee that a ']' gets written to the trace file. So, we are forgiving
-  //   and if this is obviously the case, we fix it up before throwing the string
-  //   at JSON.parse.
-  //
-  content = content.trim()
-  if (content[0] === '[') {
-    content = content.replace(/,\s*$/, '')
-    if (content[content.length - 1] !== ']') {
-      content += ']'
-    }
-  }
-  return content
-}
-
 async function _importProfileGroup(dataSource: ProfileDataSource): Promise<ProfileGroup | null> {
   const fileName = await dataSource.name()
 
@@ -109,13 +91,13 @@ async function _importProfileGroup(dataSource: ProfileDataSource): Promise<Profi
   // First pass: Check known file format names to infer the file type
   if (fileName.endsWith('.speedscope.json')) {
     console.log('Importing as speedscope json file')
-    return importSpeedscopeProfiles(JSON.parse(contents))
+    return importSpeedscopeProfiles(contents.parseAsJSON())
   } 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)
+    return importFromChromeTimeline(contents.parseAsJSON(), fileName)
   } else if (fileName.endsWith('.stackprof.json')) {
     console.log('Importing as stackprof profile')
-    return toGroup(importFromStackprof(JSON.parse(contents)))
+    return toGroup(importFromStackprof(contents.parseAsJSON()))
   } else if (fileName.endsWith('.instruments.txt')) {
     console.log('Importing as Instruments.app deep copy')
     return toGroup(importFromInstrumentsDeepCopy(contents))
@@ -127,21 +109,27 @@ async function _importProfileGroup(dataSource: ProfileDataSource): Promise<Profi
     return toGroup(importFromBGFlameGraph(contents))
   } else if (fileName.endsWith('.v8log.json')) {
     console.log('Importing as --prof-process v8 log')
-    return toGroup(importFromV8ProfLog(JSON.parse(contents)))
+    return toGroup(importFromV8ProfLog(contents.parseAsJSON()))
   } else if (fileName.endsWith('.heapprofile')) {
     console.log('Importing as Chrome Heap Profile')
-    return toGroup(importFromChromeHeapProfile(JSON.parse(contents)))
+    return toGroup(importFromChromeHeapProfile(contents.parseAsJSON()))
+  } else if (fileName.endsWith('-recording.json')) {
+    console.log('Importing as Safari profile')
+    return toGroup(importFromSafari(contents.parseAsJSON()))
+  } else if (fileName.startsWith('callgrind.')) {
+    console.log('Importing as Callgrind profile')
+    return importFromCallgrind(contents, fileName)
   }
 
   // Second pass: Try to guess what file format it is based on structure
   let parsed: any
   try {
-    parsed = JSON.parse(fixUpJSON(contents))
+    parsed = contents.parseAsJSON()
   } catch (e) {}
   if (parsed) {
     if (parsed['$schema'] === 'https://www.speedscope.app/file-format-schema.json') {
       console.log('Importing as speedscope json file')
-      return importSpeedscopeProfiles(JSON.parse(contents))
+      return importSpeedscopeProfiles(parsed)
     } else if (parsed['systemHost'] && parsed['systemHost']['name'] == 'Firefox') {
       console.log('Importing as Firefox profile')
       return toGroup(importFromFirefox(parsed))
@@ -165,27 +153,32 @@ async function _importProfileGroup(dataSource: ProfileDataSource): Promise<Profi
       return toGroup(importFromV8ProfLog(parsed))
     } else if ('head' in parsed && 'selfSize' in parsed['head']) {
       console.log('Importing as Chrome Heap Profile')
-      return toGroup(importFromChromeHeapProfile(JSON.parse(contents)))
+      return toGroup(importFromChromeHeapProfile(parsed))
     } else if ('rts_arguments' in parsed && 'initial_capabilities' in parsed) {
       console.log('Importing as Haskell GHC JSON Profile')
       return importFromHaskell(parsed)
+    } else if ('recording' in parsed && 'sampleStackTraces' in parsed.recording) {
+      console.log('Importing as Safari profile')
+      return toGroup(importFromSafari(parsed))
     }
   } else {
     // Format is not JSON
 
-    // If the first line contains "Symbol Name", preceded by a tab, it's probably
-    // a deep copy from OS X Instruments.app
-    if (/^[\w \t\(\)]*\tSymbol Name/.exec(contents)) {
-      console.log('Importing as Instruments.app deep copy')
-      return toGroup(importFromInstrumentsDeepCopy(contents))
+    // If the first line is "# callgrind format", it's probably in Callgrind
+    // Profile Format.
+    if (
+      /^# callgrind format/.exec(contents.firstChunk()) ||
+      (/^events:/m.exec(contents.firstChunk()) && /^fn=/m.exec(contents.firstChunk()))
+    ) {
+      console.log('Importing as Callgrind profile')
+      return importFromCallgrind(contents, fileName)
     }
 
-    // If every line ends with a space followed by a number, it's probably
-    // the collapsed stack format.
-    const lineCount = contents.split(/\n/).length
-    if (lineCount >= 1 && lineCount === contents.split(/ \d+\r?\n/).length) {
-      console.log('Importing as collapsed stack format')
-      return toGroup(importFromBGFlameGraph(contents))
+    // If the first line contains "Symbol Name", preceded by a tab, it's probably
+    // a deep copy from OS X Instruments.app
+    if (/^[\w \t\(\)]*\tSymbol Name/.exec(contents.firstChunk())) {
+      console.log('Importing as Instruments.app deep copy')
+      return toGroup(importFromInstrumentsDeepCopy(contents))
     }
 
     const fromLinuxPerf = importFromLinuxPerf(contents)
@@ -193,6 +186,12 @@ async function _importProfileGroup(dataSource: ProfileDataSource): Promise<Profi
       console.log('Importing from linux perf script output')
       return fromLinuxPerf
     }
+
+    const fromBGFlameGraph = importFromBGFlameGraph(contents)
+    if (fromBGFlameGraph) {
+      console.log('Importing as collapsed stack format')
+      return toGroup(fromBGFlameGraph)
+    }
   }
 
   // Unrecognized format

src/import/instruments.ts

@@ -11,10 +11,10 @@ import {
 import {sortBy, getOrThrow, getOrInsert, lastOf, getOrElse, zeroPad} from '../lib/utils'
 import {ByteFormatter, TimeFormatter} from '../lib/value-formatters'
 import {FileSystemDirectoryEntry, FileSystemEntry, FileSystemFileEntry} from './file-system-entry'
-import {MaybeCompressedDataReader} from './utils'
+import {MaybeCompressedDataReader, TextFileContent} from './utils'
 
-function parseTSV<T>(contents: string): T[] {
-  const lines = contents.split('\n').map(l => l.split('\t'))
+function parseTSV<T>(contents: TextFileContent): T[] {
+  const lines = contents.splitLines().map(l => l.split('\t'))
 
   const headerLine = lines.shift()
   if (!headerLine) return []
@@ -94,7 +94,7 @@ function getWeight(deepCopyRow: any): number {
 }
 
 // Import from a deep copy made of a profile
-export function importFromInstrumentsDeepCopy(contents: string): Profile {
+export function importFromInstrumentsDeepCopy(contents: TextFileContent): Profile {
   const profile = new CallTreeProfileBuilder()
   const rows = parseTSV<PastedTimeProfileRow | PastedAllocationsProfileRow>(contents)
 
@@ -187,7 +187,7 @@ function readAsArrayBuffer(file: File): Promise<ArrayBuffer> {
   return MaybeCompressedDataReader.fromFile(file).readAsArrayBuffer()
 }
 
-function readAsText(file: File): Promise<string> {
+function readAsText(file: File): Promise<TextFileContent> {
   return MaybeCompressedDataReader.fromFile(file).readAsText()
 }
 
@@ -259,7 +259,7 @@ async function getRawSampleList(core: TraceDirectoryTree): Promise<Sample[]> {
     const schemaFile = storedir.files.get('schema.xml')
     if (!schemaFile) continue
     const schema = await readAsText(schemaFile)
-    if (!/name="time-profile"/.exec(schema)) {
+    if (!/name="time-profile"/.exec(schema.firstChunk())) {
       continue
     }
     const bulkstore = new BinReader(

src/import/linux-tools-perf.test.ts

@@ -1,4 +1,5 @@
 import {checkProfileSnapshot} from '../lib/test-utils'
+import {withMockedFileChunkSizeForTests} from './utils'
 
 describe('importFromLinuxPerf', () => {
   test('simple.linux-perf.txt', async () => {
@@ -19,4 +20,9 @@ describe('importFromLinuxPerf', () => {
   test('system-wide.linux-perf.txt', async () => {
     await checkProfileSnapshot('./sample/profiles/linux-perf/system-wide.linux-perf.txt')
   })
+  test('system-wide.linux-perf.txt chunked', async () => {
+    await withMockedFileChunkSizeForTests(100, async () => {
+      await checkProfileSnapshot('./sample/profiles/linux-perf/system-wide.linux-perf.txt')
+    })
+  })
 })

src/import/linux-tools-perf.ts

@@ -1,6 +1,7 @@
 import {StackListProfileBuilder, ProfileGroup} from '../lib/profile'
 import {itMap, getOrInsert} from '../lib/utils'
 import {TimeFormatter} from '../lib/value-formatters'
+import {TextFileContent} from './utils'
 
 // This imports the output of the "perf script" command on linux.
 //
@@ -80,11 +81,39 @@ function parseEvent(rawEvent: string): PerfEvent | null {
   return event
 }
 
-export function importFromLinuxPerf(contents: string): ProfileGroup | null {
+function splitBlocks(contents: TextFileContent): string[] {
+  // In perf files, blocks are separated by '\n\n'.  If our input was a simple
+  // string, we could use str.split('\n\n'), but since we have a TextFileContent
+  // object which may be backed by several strings, we can't easily split this
+  // way.
+  //
+  // Instead, we'll split into lines, and then re-group runs of non-empty strings.
+  const blocks: string[] = []
+  let pending: string = ''
+  for (let line of contents.splitLines()) {
+    if (line === '') {
+      if (pending.length > 0) {
+        blocks.push(pending)
+      }
+      pending = line
+    } else {
+      if (pending.length > 0) {
+        pending += '\n'
+      }
+      pending += line
+    }
+  }
+  if (pending.length > 0) {
+    blocks.push(pending)
+  }
+  return blocks
+}
+
+export function importFromLinuxPerf(contents: TextFileContent): ProfileGroup | null {
   const profiles = new Map<string, StackListProfileBuilder>()
 
   let eventType: string | null = null
-  const events = contents.split('\n\n').map(parseEvent)
+  const events = splitBlocks(contents).map(parseEvent)
 
   for (let event of events) {
     if (event == null) continue

src/import/safari.test.ts

@@ -0,0 +1,5 @@
+import {checkProfileSnapshot} from '../lib/test-utils'
+
+test('importFromSafari', async () => {
+  await checkProfileSnapshot('./sample/profiles/Safari/13.1/simple.html-recording.json')
+})

src/import/safari.ts

@@ -0,0 +1,120 @@
+import {Profile, FrameInfo, StackListProfileBuilder} from '../lib/profile'
+import {TimeFormatter} from '../lib/value-formatters'
+
+interface Record {
+  type: string
+  eventType?: string
+  startTime?: number
+  endTime?: number
+  // timeline-record-type-cpu
+  timestamp?: number
+  usage?: number
+  threads?: any[]
+  // timeline-record-type-script
+  details?: number | string | any
+  extraDetails?: null | any
+  // timeline-record-type-network
+  archiveStartTime?: number
+  entry?: any
+  // timeline-record-type-layout
+  quad?: number[]
+}
+
+interface ExprLocation {
+  line: number
+  column: number
+}
+
+interface StackFrame {
+  sourceID: string
+  name: string
+  line: number
+  column: number
+  url: string
+  expressionLocation?: ExprLocation
+}
+
+interface Sample {
+  timestamp: number
+  stackFrames: StackFrame[]
+}
+
+interface Recording {
+  displayName: string
+  startTime: number
+  endTime: number
+  discontinuities: any[]
+  instrumentTypes: string[]
+  records: Record[]
+  markers: any[]
+  memoryPressureEvents: any[]
+  sampleStackTraces: Sample[]
+  sampleDurations: number[]
+}
+
+interface Overview {
+  secondsPerPixel: number
+  scrollStartTime: number
+  selectionStartTime: number
+  selectionDuration: number
+}
+
+interface SafariProfile {
+  version: number
+  recording: Recording
+  overview: Overview
+}
+
+function makeStack(frames: StackFrame[]): FrameInfo[] {
+  return frames
+    .map(({name, url, line, column}) => ({
+      key: `${name}:${url}:${line}:${column}`,
+      file: url,
+      line,
+      col: column,
+      name: name || (url ? `(anonymous ${url.split('/').pop()}:${line})` : '(anonymous)'),
+    }))
+    .reverse()
+}
+
+export function importFromSafari(contents: SafariProfile): Profile | null {
+  if (contents.version !== 1) {
+    console.warn(`Unknown Safari profile version ${contents.version}... Might be incompatible.`)
+  }
+
+  const {recording} = contents
+  const {sampleStackTraces, sampleDurations} = recording
+
+  const count = sampleStackTraces.length
+  if (count < 1) {
+    console.warn('Empty profile')
+    return null
+  }
+
+  const profileDuration =
+    sampleStackTraces[count - 1].timestamp - sampleStackTraces[0].timestamp + sampleDurations[0]
+  const profile = new StackListProfileBuilder(profileDuration)
+
+  let previousEndTime = Number.MAX_VALUE
+
+  sampleStackTraces.forEach((sample, i) => {
+    const endTime = sample.timestamp
+    const duration = sampleDurations[i]
+    const startTime = endTime - duration
+    const idleDurationBefore = startTime - previousEndTime
+
+    // FIXME: 2ms is a lot, but Safari's timestamps and durations don't line up very well and will create
+    // phantom idle time
+    if (idleDurationBefore > 0.002) {
+      profile.appendSampleWithWeight([], idleDurationBefore)
+    }
+
+    profile.appendSampleWithWeight(makeStack(sample.stackFrames), duration)
+
+    previousEndTime = endTime
+  })
+
+  profile.setValueFormatter(new TimeFormatter('seconds'))
+  profile.setName(recording.displayName)
+  return profile.build()
+}

src/import/stackprof.test.ts

@@ -3,3 +3,7 @@ import {checkProfileSnapshot} from '../lib/test-utils'
 test('importFromStackprof', async () => {
   await checkProfileSnapshot('./sample/profiles/stackprof/simple-stackprof.json')
 })
+
+test('importFromStackprof object mode', async () => {
+  await checkProfileSnapshot('./sample/profiles/stackprof/object-stackprof.json')
+})

src/import/stackprof.ts

@@ -11,15 +11,19 @@ interface StackprofFrame {
 
 export interface StackprofProfile {
   frames: {[number: string]: StackprofFrame}
+  mode: string
   raw: number[]
   raw_timestamp_deltas: number[]
+  samples: number
 }
 
 export function importFromStackprof(stackprofProfile: StackprofProfile): Profile {
-  const duration = stackprofProfile.raw_timestamp_deltas.reduce((a, b) => a + b, 0)
-  const profile = new StackListProfileBuilder(duration)
+  const {frames, mode, raw, raw_timestamp_deltas, samples} = stackprofProfile
+  const objectMode = mode == 'object'
+
+  const size = objectMode ? samples : stackprofProfile.raw_timestamp_deltas.reduce((a, b) => a + b, 0)
+  const profile = new StackListProfileBuilder(size)
 
-  const {frames, raw, raw_timestamp_deltas} = stackprofProfile
   let sampleIndex = 0
 
   let prevStack: FrameInfo[] = []
@@ -40,15 +44,23 @@ export function importFromStackprof(stackprofProfile: StackprofProfile): Profile
     }
     const nSamples = raw[i++]
 
-    let sampleDuration = 0
-    for (let j = 0; j < nSamples; j++) {
-      sampleDuration += raw_timestamp_deltas[sampleIndex++]
+    if (objectMode) {
+      profile.appendSampleWithWeight(stack, nSamples)
+    } else {
+      let sampleDuration = 0
+      for (let j = 0; j < nSamples; j++) {
+        sampleDuration += raw_timestamp_deltas[sampleIndex++]
+      }
+
+      profile.appendSampleWithWeight(stack, sampleDuration)
     }
 
-    profile.appendSampleWithWeight(stack, sampleDuration)
     prevStack = stack
   }
 
-  profile.setValueFormatter(new TimeFormatter('microseconds'))
+  if (!objectMode) {
+    profile.setValueFormatter(new TimeFormatter('microseconds'))
+  }
+
   return profile.build()
 }

src/import/trace-event.test.ts

@@ -1,4 +1,5 @@
 import {checkProfileSnapshot} from '../lib/test-utils'
+import {withMockedFileChunkSizeForTests} from './utils'
 
 test('importTraceEvents simple', async () => {
   await checkProfileSnapshot('./sample/profiles/trace-event/simple.json')
@@ -16,14 +17,32 @@ test('importTraceEvents partial json import', async () => {
   await checkProfileSnapshot('./sample/profiles/trace-event/simple-partial.json')
 })
 
+test('importTraceEvents partial json import chunked', async () => {
+  await withMockedFileChunkSizeForTests(100, async () => {
+    await checkProfileSnapshot('./sample/profiles/trace-event/simple-partial.json')
+  })
+})
+
 test('importTraceEvents partial json import trailing comma', async () => {
   await checkProfileSnapshot('./sample/profiles/trace-event/simple-partial-trailing-comma.json')
 })
 
+test('importTraceEvents partial json import trailing comma chunked', async () => {
+  await withMockedFileChunkSizeForTests(100, async () => {
+    await checkProfileSnapshot('./sample/profiles/trace-event/simple-partial-trailing-comma.json')
+  })
+})
+
 test('importTraceEvents partial json import whitespace padding', async () => {
   await checkProfileSnapshot('./sample/profiles/trace-event/simple-partial-whitespace.json')
 })
 
+test('importTraceEvents partial json import whitespace padding chunked', async () => {
+  await withMockedFileChunkSizeForTests(100, async () => {
+    await checkProfileSnapshot('./sample/profiles/trace-event/simple-partial-whitespace.json')
+  })
+})
+
 test('importTraceEvents bad E events', async () => {
   await checkProfileSnapshot('./sample/profiles/trace-event/too-many-end-events.json')
 })
@@ -31,3 +50,71 @@ test('importTraceEvents bad E events', async () => {
 test('importTraceEvents event re-ordering', async () => {
   await checkProfileSnapshot('./sample/profiles/trace-event/must-retain-original-order.json')
 })
+
+test('importTraceEvents end-non-top-of-stack', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/end-non-top-of-stack.json')
+})
+
+test('importTraceEvents mismatched args', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/mismatched-args.json')
+})
+
+test('importTraceEvents mismatched name', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/mismatched-name.json')
+})
+
+test('importTraceEvents not enough end events', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/not-enough-end-events.json')
+})
+
+test('importTraceEvents not out-of-order unbalanced name', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/out-of-order-unbalanced-name.json')
+})
+
+test('importTraceEvents not out-of-order', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/out-of-order.json')
+})
+
+test('importTraceEvents unbalanced name', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/unbalanced-name.json')
+})
+
+test('importTraceEvents unbalanced args', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/unbalanced-args.json')
+})
+
+test('importTraceEvents end event with empty stack', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/end-event-with-empty-stack.json')
+})
+
+test('importTraceEvents only begin events', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/only-begin-events.json')
+})
+
+test('importTraceEvents zero duration events', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/zero-duration-events.json')
+})
+
+test('importTraceEvents matching x', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/matching-x.json')
+})
+
+test('importTraceEvents x events matching start', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/x-events-matching-start.json')
+})
+
+test('importTraceEvents x events matching end', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/x-events-matching-end.json')
+})
+
+test('importTraceEvents BEX interaction', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/bex-interaction.json')
+})
+
+test('importTraceEvents invalid x nesting', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/invalid-x-nesting.json')
+})
+
+test('importTraceEvents event reordering name match', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/event-reordering-name-match.json')
+})

src/import/trace-event.ts

@@ -1,5 +1,5 @@
-import {sortBy, zeroPad, lastOf} from '../lib/utils'
-import {ProfileGroup, CallTreeProfileBuilder, FrameInfo} from '../lib/profile'
+import {sortBy, zeroPad, getOrInsert, lastOf} from '../lib/utils'
+import {ProfileGroup, CallTreeProfileBuilder, FrameInfo, Profile} from '../lib/profile'
 import {TimeFormatter} from '../lib/value-formatters'
 
 // This file concerns import from the "Trace Event Format", authored by Google
@@ -64,7 +64,135 @@ interface XTraceEvent extends TraceEvent {
 
 // The trace format supports a number of event types that we ignore.
 type ImportableTraceEvent = BTraceEvent | ETraceEvent | XTraceEvent
-type DurationEvent = BTraceEvent | ETraceEvent
+
+function pidTidKey(pid: number, tid: number): string {
+  // We zero-pad the PID and TID to make sorting them by pid/tid pair later easier.
+  return `${zeroPad('' + pid, 10)}:${zeroPad('' + tid, 10)}`
+}
+
+function partitionByPidTid(events: ImportableTraceEvent[]): Map<string, ImportableTraceEvent[]> {
+  const map = new Map<string, ImportableTraceEvent[]>()
+
+  for (let ev of events) {
+    const list = getOrInsert(map, pidTidKey(ev.pid, ev.tid), () => [])
+    list.push(ev)
+  }
+
+  return map
+}
+
+function selectQueueToTakeFromNext(
+  bEventQueue: BTraceEvent[],
+  eEventQueue: ETraceEvent[],
+): 'B' | 'E' {
+  if (bEventQueue.length === 0 && eEventQueue.length === 0) {
+    throw new Error('This method should not be given both queues empty')
+  }
+  if (eEventQueue.length === 0) return 'B'
+  if (bEventQueue.length === 0) return 'E'
+
+  const bFront = bEventQueue[0]
+  const eFront = eEventQueue[0]
+
+  const bts = bFront.ts
+  const ets = eFront.ts
+
+  if (bts < ets) return 'B'
+  if (ets < bts) return 'E'
+
+  // If we got here, the 'B' event queue and the 'E' event queue have events at
+  // the front with equal timestamps.
+
+  // If the front of the 'E' queue matches the front of the 'B' queue by name,
+  // then it means we have a zero duration event. Process the 'B' queue first
+  // to ensure it opens before we try to close it.
+  //
+  // Otherwise, process the 'E' queue first.
+  return bFront.name === eFront.name ? 'B' : 'E'
+}
+
+function convertToEventQueues(events: ImportableTraceEvent[]): [BTraceEvent[], ETraceEvent[]] {
+  const beginEvents: BTraceEvent[] = []
+  const endEvents: ETraceEvent[] = []
+
+  // Rebase all of the timestamps on the lowest timestamp
+  if (events.length > 0) {
+    let firstTs = Number.MAX_SAFE_INTEGER
+    for (let ev of events) {
+      firstTs = Math.min(firstTs, ev.ts)
+    }
+    for (let ev of events) {
+      ev.ts -= firstTs
+    }
+  }
+
+  // Next, combine B, E, and X events into two timestamp ordered queues.
+  const xEvents: XTraceEvent[] = []
+  for (let ev of events) {
+    switch (ev.ph) {
+      case 'B': {
+        beginEvents.push(ev)
+        break
+      }
+
+      case 'E': {
+        endEvents.push(ev)
+        break
+      }
+
+      case 'X': {
+        xEvents.push(ev)
+        break
+      }
+
+      default: {
+        const _exhaustiveCheck: never = ev
+        return _exhaustiveCheck
+      }
+    }
+  }
+
+  function dur(x: XTraceEvent): number {
+    return x.dur ?? x.tdur ?? 0
+  }
+
+  xEvents.sort((a, b) => {
+    if (a.ts < b.ts) return -1
+    if (a.ts > b.ts) return 1
+
+    // Super weird special case: if we have two 'X' events with the same 'ts'
+    // but different 'dur' the only valid interpretation is to put the one with
+    // the longer 'dur' first, because you can't nest longer things in shorter
+    // things.
+    const aDur = dur(a)
+    const bDur = dur(b)
+    if (aDur > bDur) return -1
+    if (aDur < bDur) return 1
+
+    // Otherwise, retain the original order by relying upon a stable sort here.
+    return 0
+  })
+
+  for (let x of xEvents) {
+    const xDur = dur(x)
+    beginEvents.push({...x, ph: 'B'} as BTraceEvent)
+    endEvents.push({...x, ph: 'E', ts: x.ts + xDur} as ETraceEvent)
+  }
+
+  function compareTimestamps(a: TraceEvent, b: TraceEvent) {
+    if (a.ts < b.ts) return -1
+    if (a.ts > b.ts) return 1
+
+    // Important: if the timestamps are the same, return zero. We're going to
+    // rely upon a stable sort here.
+    return 0
+  }
+
+  beginEvents.sort(compareTimestamps)
+  endEvents.sort(compareTimestamps)
+
+  return [beginEvents, endEvents]
+}
 
 function filterIgnoredEventTypes(events: TraceEvent[]): ImportableTraceEvent[] {
   const ret: ImportableTraceEvent[] = []
@@ -79,40 +207,6 @@ function filterIgnoredEventTypes(events: TraceEvent[]): 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) {
@@ -128,8 +222,7 @@ function getThreadNamesByPidTid(events: TraceEvent[]): 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)
+      threadNameByPidTid.set(pidTidKey(ev.pid, ev.tid), ev.args.name)
     }
   }
   return threadNameByPidTid
@@ -143,66 +236,33 @@ function keyForEvent(event: TraceEvent): string {
   return name
 }
 
-type TraceEventProfileState = {profile: CallTreeProfileBuilder; eventStack: BTraceEvent[]}
+function frameInfoForEvent(event: TraceEvent): FrameInfo {
+  const key = keyForEvent(event)
+  return {
+    name: key,
+    key: key,
+  }
+}
 
 function eventListToProfileGroup(events: TraceEvent[]): ProfileGroup {
-  const stateByPidTid = new Map<string, TraceEventProfileState>()
-
   const importableEvents = filterIgnoredEventTypes(events)
-  const durationEvents = convertToDurationEvents(importableEvents)
+  const partitioned = partitionByPidTid(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
-    if (a.pid < b.pid) return -1
-    if (a.pid > b.pid) return 1
-    if (a.tid < b.tid) return -1
-    if (a.tid > b.tid) return 1
+  const profilePairs: [string, Profile][] = []
 
-    // We have to be careful with events that have the same timestamp
-    // and the same pid/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 call-stack.
-      if (a.ph === 'B' && b.ph === 'E') return 1
-      if (a.ph === 'E' && b.ph === 'B') return -1
-    }
+  partitioned.forEach(eventsForThread => {
+    if (eventsForThread.length === 0) return
 
-    // In all other cases, retain the original sort order.
-    return 0
-  })
+    const {pid, tid} = eventsForThread[0]
 
-  if (durationEvents.length > 0) {
-    const firstTs = durationEvents[0].ts
-    for (let ev of durationEvents) {
-      ev.ts -= firstTs
-    }
-  }
-
-  function getOrCreateProfileState(pid: number, tid: number): TraceEventProfileState {
-    // 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 state = stateByPidTid.get(pidTid)
-    if (state != null) return state
-    let profile = new CallTreeProfileBuilder()
-    state = {profile, eventStack: []}
+    const profile = new CallTreeProfileBuilder()
     profile.setValueFormatter(new TimeFormatter('microseconds'))
-    stateByPidTid.set(pidTid, state)
 
     const processName = processNamesByPid.get(pid)
-    const threadName = threadNamesByPidTid.get(`${pid}:${tid}`)
+    const threadName = threadNamesByPidTid.get(pidTidKey(pid, tid))
 
     if (processName != null && threadName != null) {
       profile.setName(`${processName} (pid ${pid}), ${threadName} (tid ${tid})`)
@@ -214,51 +274,154 @@ function eventListToProfileGroup(events: TraceEvent[]): ProfileGroup {
       profile.setName(`pid ${pid}, tid ${tid}`)
     }
 
-    return state
-  }
+    // The trace event format is hard to deal with because it specifically
+    // allows events to be recorded out of order, *but* event ordering is still
+    // important for events with the same timestamp. Because of this, rather
+    // than thinking about the entire event stream as a single queue of events,
+    // we're going to first construct two time-ordered lists of events:
+    //
+    // 1. ts ordered queue of 'B' events
+    // 2. ts ordered queue of 'E' events
+    //
+    // We deal with 'X' events by converting them to one entry in the 'B' event
+    // queue and one entry in the 'E' event queue.
+    //
+    // The high level goal is to deal with 'B' events in 'ts' order, breaking
+    // ties by the order the events occurred in the file, and deal with 'E'
+    // events in 'ts' order, breaking ties in whatever order causes the 'E'
+    // events to match whatever is on the top of the stack.
+    const [bEventQueue, eEventQueue] = convertToEventQueues(eventsForThread)
 
-  for (let ev of durationEvents) {
-    const {profile, eventStack} = getOrCreateProfileState(ev.pid, ev.tid)
-    const key = keyForEvent(ev)
-    const frameInfo: FrameInfo = {
-      key: key,
-      name: key,
+    const frameStack: BTraceEvent[] = []
+    const enterFrame = (b: BTraceEvent) => {
+      frameStack.push(b)
+      profile.enterFrame(frameInfoForEvent(b), b.ts)
     }
-    switch (ev.ph) {
-      case 'B':
-        eventStack.push(ev)
-        profile.enterFrame(frameInfo, ev.ts)
-        break
 
-      case 'E':
-        const lastEvent = lastOf(eventStack)
-        if (lastEvent != null && lastEvent.name === ev.name) {
-          profile.leaveFrame(frameInfo, ev.ts)
-          eventStack.pop()
-        } else {
-          console.warn(
-            'Event discarded because it did not match top-of-stack. Discarded event:',
-            ev,
-            'Top of stack:',
-            lastEvent,
-          )
+    const tryToLeaveFrame = (e: ETraceEvent) => {
+      const b = lastOf(frameStack)
+
+      if (b == null) {
+        console.warn(
+          `Tried to end frame "${
+            frameInfoForEvent(e).key
+          }", but the stack was empty. Doing nothing instead.`,
+        )
+        return
+      }
+
+      const eFrameInfo = frameInfoForEvent(e)
+      const bFrameInfo = frameInfoForEvent(b)
+
+      if (e.name !== b.name) {
+        console.warn(
+          `ts=${e.ts}: Tried to end "${eFrameInfo.key}" when "${bFrameInfo.key}" was on the top of the stack. Doing nothing instead.`,
+        )
+        return
+      }
+
+      if (eFrameInfo.key !== bFrameInfo.key) {
+        console.warn(
+          `ts=${e.ts}: Tried to end "${eFrameInfo.key}" when "${bFrameInfo.key}" was on the top of the stack. Ending ${bFrameInfo.key} instead.`,
+        )
+      }
+
+      frameStack.pop()
+      profile.leaveFrame(bFrameInfo, e.ts)
+    }
+
+    while (bEventQueue.length > 0 || eEventQueue.length > 0) {
+      const queueName = selectQueueToTakeFromNext(bEventQueue, eEventQueue)
+      switch (queueName) {
+        case 'B': {
+          enterFrame(bEventQueue.shift()!)
+          break
         }
-        break
+        case 'E': {
+          // Before we take the first event in the 'E' queue, let's first see if
+          // there are any e events that exactly match the top of the stack.
+          // We'll prioritize first by key, then by name if we can't find a key
+          // match.
+          const stackTop = lastOf(frameStack)
+          if (stackTop != null) {
+            const bFrameInfo = frameInfoForEvent(stackTop)
 
-      default:
-        const _exhaustiveCheck: never = ev
-        return _exhaustiveCheck
+            let swapped: boolean = false
+
+            for (let i = 1; i < eEventQueue.length; i++) {
+              const eEvent = eEventQueue[i]
+              if (eEvent.ts > eEventQueue[0].ts) {
+                // Only consider 'E' events with the same ts as the front of the queue.
+                break
+              }
+
+              const eFrameInfo = frameInfoForEvent(eEvent)
+              if (bFrameInfo.key === eFrameInfo.key) {
+                // We have a match! Process this one first.
+                const temp = eEventQueue[0]
+                eEventQueue[0] = eEventQueue[i]
+                eEventQueue[i] = temp
+                swapped = true
+                break
+              }
+            }
+
+            if (!swapped) {
+              // There was no key match, let's see if we can find a name match
+              for (let i = 1; i < eEventQueue.length; i++) {
+                const eEvent = eEventQueue[i]
+                if (eEvent.ts > eEventQueue[0].ts) {
+                  // Only consider 'E' events with the same ts as the front of the queue.
+                  break
+                }
+
+                if (eEvent.name === stackTop.name) {
+                  // We have a match! Process this one first.
+                  const temp = eEventQueue[0]
+                  eEventQueue[0] = eEventQueue[i]
+                  eEventQueue[i] = temp
+                  swapped = true
+                  break
+                }
+              }
+            }
+
+            // If swapped is still false at this point, it means we're about to
+            // pop a stack frame that doesn't even match by name. Bummer.
+          }
+
+          const e = eEventQueue.shift()!
+
+          tryToLeaveFrame(e)
+          break
+        }
+
+        default:
+          const _exhaustiveCheck: never = queueName
+          return _exhaustiveCheck
+      }
     }
-  }
+
+    for (let i = frameStack.length - 1; i >= 0; i--) {
+      const frame = frameInfoForEvent(frameStack[i])
+      console.warn(`Frame "${frame.key}" was still open at end of profile. Closing automatically.`)
+      profile.leaveFrame(frame, profile.getTotalWeight())
+    }
+
+    profilePairs.push([pidTidKey(pid, tid), profile.build()])
+  })
 
   // 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(stateByPidTid.entries())
   sortBy(profilePairs, p => p[0])
 
-  return {name: '', indexToView: 0, profiles: profilePairs.map(p => p[1].profile)}
+  return {
+    name: '',
+    indexToView: 0,
+    profiles: profilePairs.map(p => p[1]),
+  }
 }
 
 function isTraceEventList(maybeEventList: any): maybeEventList is TraceEvent[] {

src/import/utils.ts

@@ -1,9 +1,197 @@
 import * as pako from 'pako'
+import {JSON_parse} from 'uint8array-json-parser'
 
 export interface ProfileDataSource {
   name(): Promise<string>
   readAsArrayBuffer(): Promise<ArrayBuffer>
-  readAsText(): Promise<string>
+  readAsText(): Promise<TextFileContent>
+}
+
+export interface TextFileContent {
+  splitLines(): string[]
+  firstChunk(): string
+  parseAsJSON(): any
+}
+
+// V8 has a maximum string size. To support files whose contents exceeds that
+// size, we provide an alternate string interface for text backed by a
+// Uint8Array instead.
+//
+// We provide a simple splitLines() which returns simple strings under the
+// assumption that most extremely large text profiles will be broken into many
+// lines.  This isn't true in the general case, but will be true for most common
+// large files.
+//
+// See: https://github.com/v8/v8/blob/8b663818fc311217c2cdaaab935f020578bfb7a8/src/objects/string.h#L479-L483
+//
+// At time of writing (2021/03/27), the maximum string length in V8 is
+//  32 bit systems: 2^28 - 16 = ~268M chars
+//  64 bit systems: 2^29 - 24 = ~537M chars
+//
+// https://source.chromium.org/chromium/chromium/src/+/main:v8/include/v8-primitive.h;drc=cb88fe94d9044d860cc75c89e1bc270ab4062702;l=125
+//
+// We'll be conservative and feed in 2^27 bytes at a time (~134M chars
+// assuming utf-8 encoding)
+let TEXT_FILE_CHUNK_SIZE = 1 << 27
+
+export async function withMockedFileChunkSizeForTests(chunkSize: number, cb: () => any) {
+  const original = TEXT_FILE_CHUNK_SIZE
+  TEXT_FILE_CHUNK_SIZE = chunkSize
+  try {
+    await cb()
+  } finally {
+    TEXT_FILE_CHUNK_SIZE = original
+  }
+}
+
+function permissivelyParseJSONString(content: string) {
+  // This code is similar to the code from here:
+  // https://github.com/catapult-project/catapult/blob/27e047e0494df162022be6aa8a8862742a270232/tracing/tracing/extras/importer/trace_event_importer.html#L197-L208
+  //
+  //   If the event data begins with a [, then we know it should end with a ]. The
+  //   reason we check for this is because some tracing implementations cannot
+  //   guarantee that a ']' gets written to the trace file. So, we are forgiving
+  //   and if this is obviously the case, we fix it up before throwing the string
+  //   at JSON.parse.
+  content = content.trim()
+  if (content[0] === '[') {
+    content = content.replace(/,\s*$/, '')
+    if (content[content.length - 1] !== ']') {
+      content += ']'
+    }
+  }
+  return JSON.parse(content)
+}
+
+function permissivelyParseJSONUint8Array(byteArray: Uint8Array) {
+  let indexOfFirstNonWhitespaceChar = 0
+  for (let i = 0; i < byteArray.length; i++) {
+    if (!/\s/.exec(String.fromCharCode(byteArray[i]))) {
+      indexOfFirstNonWhitespaceChar = i
+      break
+    }
+  }
+  if (
+    byteArray[indexOfFirstNonWhitespaceChar] === '['.charCodeAt(0) &&
+    byteArray[byteArray.length - 1] !== ']'.charCodeAt(0)
+  ) {
+    // Strip trailing whitespace from the end of the array
+    let trimmedLength = byteArray.length
+    while (trimmedLength > 0 && /\s/.exec(String.fromCharCode(byteArray[trimmedLength - 1]))) {
+      trimmedLength--
+    }
+
+    // Ignore trailing comma
+    if (String.fromCharCode(byteArray[trimmedLength - 1]) === ',') {
+      trimmedLength--
+    }
+
+    if (String.fromCharCode(byteArray[trimmedLength - 1]) !== ']') {
+      // Clone the array, ignoring any whitespace & trailing comma, then append a ']'
+      //
+      // Note: We could save a tiny bit of space here by avoiding copying the
+      // leading whitespace, but it's a trivial perf boost and it complicates
+      // the code.
+      const newByteArray = new Uint8Array(trimmedLength + 1)
+      newByteArray.set(byteArray.subarray(0, trimmedLength))
+      newByteArray[trimmedLength] = ']'.charCodeAt(0)
+      byteArray = newByteArray
+    }
+  }
+  return JSON_parse(byteArray)
+}
+
+export class BufferBackedTextFileContent implements TextFileContent {
+  private chunks: string[] = []
+  private byteArray: Uint8Array
+
+  constructor(buffer: ArrayBuffer) {
+    const byteArray = (this.byteArray = new Uint8Array(buffer))
+
+    let encoding: string = 'utf-8'
+    if (byteArray.length > 2) {
+      if (byteArray[0] === 0xff && byteArray[1] === 0xfe) {
+        // UTF-16, Little Endian encoding
+        encoding = 'utf-16le'
+      } else if (byteArray[0] === 0xfe && byteArray[1] === 0xff) {
+        // UTF-16, Big Endian encoding
+        encoding = 'utf-16be'
+      }
+    }
+
+    if (typeof TextDecoder !== 'undefined') {
+      // If TextDecoder is available, we'll try to use it to decode the string.
+      const decoder = new TextDecoder(encoding)
+
+      for (let chunkNum = 0; chunkNum < buffer.byteLength / TEXT_FILE_CHUNK_SIZE; chunkNum++) {
+        const offset = chunkNum * TEXT_FILE_CHUNK_SIZE
+        const view = new Uint8Array(
+          buffer,
+          offset,
+          Math.min(buffer.byteLength - offset, TEXT_FILE_CHUNK_SIZE),
+        )
+        const chunk = decoder.decode(view, {stream: true})
+        this.chunks.push(chunk)
+      }
+    } else {
+      // JavaScript strings are UTF-16 encoded, but we're reading data from disk
+      // that we're going to blindly assume it's ASCII encoded. This codepath
+      // only exists for older browser support.
+
+      console.warn('This browser does not support TextDecoder. Decoding text as ASCII.')
+      this.chunks.push('')
+      for (let i = 0; i < byteArray.length; i++) {
+        this.chunks[this.chunks.length - 1] += String.fromCharCode(byteArray[i])
+        ;(this.chunks[this.chunks.length - 1] as any) | 0 // This forces the string to be flattened
+
+        if (this.chunks[this.chunks.length - 1].length >= TEXT_FILE_CHUNK_SIZE) {
+          this.chunks.push('')
+        }
+      }
+    }
+  }
+
+  splitLines(): string[] {
+    let parts: string[] = this.chunks[0].split('\n')
+    for (let i = 1; i < this.chunks.length; i++) {
+      const chunkParts = this.chunks[i].split('\n')
+      if (chunkParts.length === 0) continue
+      if (parts.length > 0) {
+        parts[parts.length - 1] += chunkParts.shift()
+      }
+      parts = parts.concat(chunkParts)
+    }
+    return parts
+  }
+
+  firstChunk(): string {
+    return this.chunks[0] || ''
+  }
+
+  parseAsJSON(): any {
+    // We only use the Uint8Array version of JSON.parse when necessary, because
+    // it's around 4x slower than native.
+    if (this.chunks.length === 1) {
+      return permissivelyParseJSONString(this.chunks[0])
+    }
+    return permissivelyParseJSONUint8Array(this.byteArray)
+  }
+}
+
+export class StringBackedTextFileContent implements TextFileContent {
+  constructor(private s: string) {}
+
+  splitLines(): string[] {
+    return this.s.split('\n')
+  }
+
+  firstChunk(): string {
+    return this.s
+  }
+
+  parseAsJSON(): any {
+    return permissivelyParseJSONString(this.s)
+  }
 }
 
 export class TextProfileDataSource implements ProfileDataSource {
@@ -11,16 +199,13 @@ export class TextProfileDataSource implements ProfileDataSource {
   async name() {
     return this.fileName
   }
-  async readAsArrayBuffer() {
-    // JavaScript strings are UTF-16 encoded, but if this string is
-    // constructed based on
 
-    // TODO(jlfwong): Might want to make this construct an array
-    // buffer based on the text
+  async readAsArrayBuffer() {
     return new ArrayBuffer(0)
   }
+
   async readAsText() {
-    return this.contents
+    return new StringBackedTextFileContent(this.contents)
   }
 }
 
@@ -49,22 +234,9 @@ export class MaybeCompressedDataReader implements ProfileDataSource {
     return await this.uncompressedData
   }
 
-  async readAsText(): Promise<string> {
+  async readAsText(): Promise<TextFileContent> {
     const buffer = await this.readAsArrayBuffer()
-    let ret: string = ''
-
-    if (typeof TextDecoder !== 'undefined') {
-      const decoder = new TextDecoder()
-      return decoder.decode(buffer)
-    } else {
-      // JavaScript strings are UTF-16 encoded, but we're reading data
-      // from disk that we're going to asusme is UTF-8 encoded.
-      const array = new Uint8Array(buffer)
-      for (let i = 0; i < array.length; i++) {
-        ret += String.fromCharCode(array[i])
-      }
-      return ret
-    }
+    return new BufferBackedTextFileContent(buffer)
   }
 
   static fromFile(file: File): MaybeCompressedDataReader {

src/import/v8heapalloc.ts

@@ -37,10 +37,12 @@ interface HeapProfile {
 const callFrameToFrameInfo = new Map<HeapProfileCallFrame, FrameInfo>()
 function frameInfoForCallFrame(callFrame: HeapProfileCallFrame) {
   return getOrInsert(callFrameToFrameInfo, callFrame, callFrame => {
-    const name = callFrame.functionName || '(anonymous)'
     const file = callFrame.url
     const line = callFrame.lineNumber
     const col = callFrame.columnNumber
+    const name =
+      callFrame.functionName ||
+      (file ? `(anonymous ${file.split('/').pop()}:${line})` : '(anonymous)')
     return {
       key: `${name}:${file}:${line}:${col}`,
       name,

src/import/v8proflog.ts

@@ -80,12 +80,21 @@ function codeToFrameInfo(code: Code, v8log: V8LogProfile): FrameInfo {
     case 'JS': {
       const matches = name.match(/([a-zA-Z0-9\._\-$]*) ([a-zA-Z0-9\.\-_\/$]*):(\d+):(\d+)/)
       if (matches) {
+        const file = matches[2]
+        const line = parseInt(matches[3], 10)
+        const col = parseInt(matches[4], 10)
+        const functionName =
+          matches[1].length > 0
+            ? matches[1]
+            : file
+            ? `(anonymous ${file.split('/').pop()}:${line})`
+            : '(anonymous)'
         return {
           key: name,
-          name: matches[1].length > 0 ? matches[1] : '(anonymous)',
-          file: matches[2].length > 0 ? matches[2] : '(unknown file)',
-          line: parseInt(matches[3], 10),
-          col: parseInt(matches[4], 10),
+          name: functionName,
+          file: file.length > 0 ? file : '(unknown file)',
+          line,
+          col,
         }
       }
       break

src/jest-setup.js

@@ -16,7 +16,7 @@
 // Because we're not going to use this in our actual build, it's okay for this
 // to be inefficient.
 
-(function () {
+;(function () {
   const nodeVersion = process.versions.node
   const versionParts = nodeVersion.split('.')
   const majorVersion = parseInt(versionParts[0], 10)
@@ -48,4 +48,10 @@
     this.splice(0, this.length, ...arrayWithIndices.map(x => x[0]))
     return this
   }
-})()
+})()
+;(function () {
+  // TextDecoder is a global API in browsers, but an imported API in node.
+  //
+  // Let's emulate it being a global API during tests.
+  global.TextDecoder = require('util').TextDecoder
+})()