1.5.0

This PR introduces support for importing JSON based profiles that are missing a terminating `]` (and possibly have an extraneous `,`).

This is similar to #202, but takes a much more targeted and simple approach.

I'm confident that this approach is sufficient because this is exactly what `chrome://tracing` does: https://github.com/catapult-project/catapult/blob/27e047e0494df162022be6aa8a8862742a270232/tracing/tracing/extras/importer/trace_event_importer.html#L197-L208

Fixes #204

CHANGELOG.md

@@ -1,12 +1,110 @@
-## [Unreleased]
+## Unreleased
 
-## [0.7.0]
+## [1.5.0] - 2019-02-17
+
+### Added
+
+* Support importing unterminated JSON in simple cases (#208) (by @jlfwong)
+
+### Fixed
+
+* Fix crash when importing from stackpro without raw_timestamp_deltas (#207) (by @jlfwong)
+* Alert instead of crash when importing a file containing no profiles (#205) (by @jlfwong)
+* Fixed import of multithreaded profiles from Chrome 66 (#206) (by @jlfwong)
+* Fixed import of instruments trace files with missing run number (#203) (by @Archerlly)
+
+## [1.4.1] - 2019-01-22
+
+### Fixed
+
+* Fix importing of Trace Event Format files with no ts field on M events [#198] (by @jlfwong)
+
+## [1.4.0] - 2019-01-22
+
+### Added
+
+* Import v8 cpu profile (old format) [#177] (by @vmarchaud)
+* Import basic "Trace Event Format" profiles [#197] (by @jlfwong)
+
+## [1.3.2] - 2018-12-03
+
+### Fixed
+
+* Fixed import of multithreaded Chrome profiles [#19] (by @jlfwong)
+
+## [1.3.1] - 2018-11-08
+
+### Fixed
+
+* Fixed a file import performance regression by using TextDecoder [#188] (by @jlfwong)
+
+## [1.3.0] - 2018-10-29
+
+### Added
+
+* Support import from Haskell GHC JSON format support [#183] (by @trishume)
+
+### Fixed
+
+* Make the wasd keymappings work on azerty keyboards [#184] (by @vrischmann)
+* Fix import of binary formats via profileURL [#179] (by @f-hj)
+
+## [1.2.0] - 2018-10-08
+
+### Added
+
+* Add import of v8 heap allocation profile [#170] (by @vmarchaud)
+
+## [1.1.0] - 2018-09-26
+
+### Added
+
+* Add go tool pprof import support [#165]
+
+## [1.0.4] - 2018-09-12
+
+### Fixed
+
+* Fix import from Chrome < 69 when there are multiple profiles [#161]
+
+## [1.0.3] - 2018-09-10
+
+### Fixed
+
+* Fix import for Chrome 69, support leading idle time before first call [#160]
+
+## [1.0.2] - 2018-09-04
+
+### Fixed
+
+* Allow optional CR before LF when probing collapsed stacks files [#154]
+* Fix import for Firefox 63 [#156]
+* Change time formatting for minutes from 1.50min to 1:30 [#153] (by @Alex-Diez)
+
+## [1.0.1] - 2018-08-23
+
+* Fixed an issue where flamegraph bounds were not always being cleared correctly, leading to visual artifacts [#150]
+
+## [1.0.0] - 2018-08-23
+
+### Fixed
+
+* Fixed rendering issues when switching between screens w/ different `devicePixelRatios` [#147]
+
+## [0.7.1] - 2018-08-20
+
+### Fixed
+
+* Removed dependency on regl in order to allow speedscope to run in strict content-security-policy environments [#140]
+* Fixed text culling bug [#143]
+
+## [0.7.0] - 2018-08-16
 
 ### Added
 
 * Added support to import from linux `perf script` [#135]
 
-## [0.6.0]
+## [0.6.0] - 2018-08-14
 
 ### Added
 

CODE_OF_CONDUCT.md

@@ -0,0 +1,73 @@
+# Contributor Covenant Code of Conduct:
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project
+and our community a harassment-free experience for everyone, regardless of
+age, body size, disability, ethnicity, gender identity and expression, level
+of experience, nationality, personal appearance, race, religion, or sexual
+identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of
+acceptable behavior and are expected to take appropriate and fair corrective
+action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an
+appointed representative at an online or offline event. Representation of a
+project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting
+[jamie.lf.wong@gmail.com](mailto:jamie.lf.wong@gmail.com). All complaints
+will be reviewed and investigated and will result in a response that is
+deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an
+incident. Further details of specific enforcement policies may be posted
+separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor-Covenant][homepage],
+version 1.4, available at
+[https://contributor-covenant.org/version/1/4][version]
+
+[homepage]: https://contributor-covenant.org
+[version]: https://contributor-covenant.org/version/1/4/

CONTRIBUTING.md

@@ -0,0 +1,70 @@
+# Contributing to speedscope
+
+Hi! This is a short guide & set of guidelines for contributing to speedscope.
+Contributors of all skill levels are welcome to submit pull requests.
+
+This project adheres to the Contributor Covenant [code of conduct](./CODE_OF_CONDUCT.md).
+All contributors are expected to uphold this code of conduct.
+
+## Setting up for development
+
+To start running speedscope locally, run the following:
+
+    git clone https://github.com/jlfwong/speedscope.git
+    cd speedscope
+    npm install
+    npm run serve
+
+This should open up a running version of speedscope in your default browser.
+
+In your terminal, you should see something like this:
+
+    $ npm run serve
+    > speedscope@0.7.1 serve /Users/jlfwong/code/speedscope
+    > parcel assets/index.html --open --no-autoinstall
+
+    Server running at http://localhost:1234
+    ✨  Built in 7.30s.
+
+Most of speedscope is written in TypeScript. If you're unfamiliar with
+TypeScript, then you can either just try to learn it as you go, then the
+[official TypeScript
+documentation](https://www.typescriptlang.org/docs/home.html) may be of use
+to you!
+
+If you're not sure where the code you want to modify lives, the [`README.md`
+in the `src/` directory](./src/README.md) might be helpful.
+
+## Code formatting
+
+All TypeScript code in speedscope is automatically formatted with
+[Prettier](https://prettier.io/). This means that while you're writing your code,
+you don't have to worry about following a formatting guide, because a program will
+format your code for you!
+
+The easiest way to use Prettier is via an editor integration. See the [Editor
+Integration](https://prettier.io/docs/en/editors.html) page from Prettier's
+documentation for help with that.
+
+If you don't want to do that, you can alternatively run the autoformatter by
+running `npm run prettier`.
+
+## Running tests
+
+All TypeScript tests are written use [Jest](https://jestjs.io/). To run the
+tests, run `npm run jest`.
+
+## Contributing new features
+
+Before contributing code to implement a new feature, please open an issue to
+discuss it first. Large pull requests that are submitted without first getting
+maintainer buy-in are unlikely to be reviewed or merged.
+
+For features that will cause a visual change, please include visual mockups of
+the change you're planning on making.
+
+## Contributing bug fixes
+
+If you discover a bug, please file an issue. If the code change required to
+fix it is small (< ~20 lines), then feel free to just open a PR to fix the
+issue without trying to get buy-in ahead of time.

README-ADMINS.md

@@ -8,6 +8,7 @@ Publishing speedscope is a multi-step process:
 2.  Prepare the release
 3.  Publish to npm
 4.  Deploy the website
+5.  Upload a release to GitHub
 
 At time of writing, deployment assumes you're running macOS. It probably
 works if you're on a linux, and almost definitely does not work on Windows.
@@ -43,7 +44,7 @@ If everything looks good, proceed to "Prepare the release".
 2.  Update CHANGELOG.md to indicate the changes that were made as part of this release
 3.  Commit the changes with the version name as the commit message, e.g. `git commit -m 0.6.0`
 4.  `git tag` the release. We use tags like `v0.6.0`, e.g. `git tag v0.6.0`
-5.  `git push`
+5.  `git push && git push --tags`
 
 ## Publish to npm
 
@@ -54,17 +55,20 @@ a matter of running `npm publish`.
 
 To verify that the publish was successful, run `npm install -g speedscope`.
 Try `speedscope`, which should open speedscope in browser.
-Try `speedscope sample/profiles/stackcollapse/simple.txt`, which should immediately load the profile
+Try `speedscope sample/profiles/stackcollapse/simple.txt`, which should immediately load the profile.
 
 ## Deploying the website
 
+This step must follow the "Publish to npm" step, since it uses assets from
+the npm publish.
+
 https://www.speedscope.app/ is hosted on GitHub pages, and is published via pushing
 to the `gh-pages` branch. The `gh-pages` branch has totally different contents than
 other branches of this repository: https://github.com/jlfwong/speedscope/tree/gh-pages.
 
-It's populated by a deploy script which is invoked by running `npm run deploy` script.
-This will do a build of the static resources, and boot a local server for you to test
-the compiled assets. Please do not skip the manual testing in this step.
+It's populated by a deploy script which is invoked by running `npm run deploy` script. This populate a directory with assets pulled from npm, and
+boot a local server for you to test the compiled assets. Please do not skip
+the manual testing in this step.
 
 If everything looks good, you should be able to hit Ctrl+C, and you should see this prompt:
 
@@ -76,3 +80,14 @@ If everything looks good, type `yes` then enter. This will commit to the `gh-pag
 
 To check if a deploy has happened, you can check https://www.speedscope.app/release.txt
 which includes the version, the date, and the commit of the deploy.
+
+## Upload a release to GitHub
+
+This step must follow the "Publish to npm" step, since it uses assets from
+the npm publish.
+
+To make a zipfile suitable for uploading to GitHub as a release, run `scripts/prepare-zip-file.sh`.
+
+Once that's done, you should have a zip file in `dist/release/`
+
+Upload that file along with changelog notes to https://github.com/jlfwong/speedscope/releases/new

README.md

@@ -1,6 +1,6 @@
 # 🔬speedscope
 
-A fast, interactive web-based viewer for [sampling profiles][0]. An alternative viewer for [FlameGraphs][1]. Will happily display multi-megabyte profiles without crashing your browser.
+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.
 
 Given raw profiling data, speedscope allows you to interactively explore the data to get insight into what's slow in your application, or allocating all the memory, or whatever data is represented in the profiling data.
 
@@ -13,6 +13,8 @@ Given raw profiling data, speedscope allows you to interactively explore the dat
 
 Visit https://www.speedscope.app, then either browse to find a profile file or drag-and-drop one onto the page. The profiles are not uploaded anywhere -- the application is totally in-browser.
 
+## Command line usage
+
 For offline use, or convenience in the terminal, you can also install speedscope
 via npm:
 
@@ -20,59 +22,33 @@ via npm:
 
 Invoking `speedscope /path/to/profile` will load speedscope in your default browser.
 
+## Self-contained directory
+
+If you don't have npm or node installed, you can also download a
+self-contained version from https://github.com/jlfwong/speedscope/releases.
+After you download the zip file from a release, simply unzip it and open the
+contained `index.html` in Chrome or Firefox.
+
 ## Supported file formats
 
-### Chrome
+speedscope is designed to ingest profiles from a variety of different profilers for different programming languages & environments. Click the links below for documentation on how to import from a specific source.
 
-Both the timeline format output by Chrome developers tools (https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#save) and the `.cpuprofile` format output are supported. The `.cpuprofile` format is useful for viewing flamecharts generated by Node.js applications:
-https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27
+- 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 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))
+  - [Importing from rbspy](https://github.com/jlfwong/speedscope/wiki/Importing-from-rbspy-(ruby))
+- Go
+  - [Importing from pprof](https://github.com/jlfwong/speedscope/wiki/Importing-from-pprof-(go))  
+- Native code
+  - [Importing from Instruments.app](https://github.com/jlfwong/speedscope/wiki/Importing-from-Instruments.app) (macOS)
+  - [Importing from `perf`](https://github.com/jlfwong/speedscope/wiki/Importing-from-perf-(linux)) (linux)
+- [Importing from GHC (Haskell)](https://github.com/jlfwong/speedscope/wiki/Importing-from-Haskell)
+- [Importing from custom sources](https://github.com/jlfwong/speedscope/wiki/Importing-from-custom-sources)
 
-### Firefox
-
-The `profile.json` file format output by Firefox can be saved and import into speedscope: https://developer.mozilla.org/en-US/docs/Tools/Performance
-
-### Node
-
-If you record profiling information like so:
-
-    node --prof /path/to/my/script.js
-
-Then this will generate one or more `isolate*.log` files. You can open
-the resulting profile in speedscope by running the following command:
-
-    node --prof-process --preprocess -j isolate*.log | speedscope -
-
-### Instruments.app
-
-You can import call trees from OSX Instruments.app into speedscope by
-selecting a row in the "Profile" view and select "Edit -> Deep Copy" from the
-menu then pasting directly into speedscope. This data contains only aggregate
-statistics, so the "Time Order" view and the "Left Heavy" view will look very
-similar.
-
-You can also import `.trace` files for time profiles by dragging them directly
-into the browser from Chrome.
-
-### `stackprof` Ruby profiler
-
-If the `raw: true` flag is set when recording a dump, the resulting json dump can be imported into speedscope.
-
-### Linux `perf`
-
-You can import profiles recorded using `perf record` and formatted using `perf script`.
-
-    perf record -a -F 999 -g -p PID > perf.data
-    perf script -i perf.data > profile.linux-perf.txt
-
-Then drop the resulting `perf.txt` into speedscope, or if you have speedscope installed
-locally, you can run:
-
-    perf record -a -F 999 -g -p PID > perf.data
-    perf script -i perf.data | speedscope -
-
-### `DTrace`
-
-If you process the output of `DTrace` first with Brendan Gregg's `stackcollapse-*.pl` scripts (https://github.com/brendangregg/FlameGraph#2-fold-stacks), the result can be imported into speedscope.
+Contributions to add support for additional formats are welcome! See issues with the ["import source" tag](https://github.com/jlfwong/speedscope/issues?q=is%3Aissue+is%3Aopen+label%3A%22import+source%22).
 
 ## Importing via URL
 
@@ -81,26 +57,25 @@ To load a specific profile by URL, you can append a hash fragment like `#profile
 ## Views
 
 ### 🕰Time Order
-
-In the "Time Order" view (the default), the stacks are ordered left-to-right in the same order as the occurred in the input file, which is usually going to be the chronological order they were recorded in. This view is most helpful for understand the behavior of an application over time, e.g. "first the data is fetched from the database, then the data is prepared for serialization, then the data is serialized to JSON". This is the only flame graph order supported by Chrome developer tools.
-
-In all flamegraph views, the horizontal axis represents the "weight" of each stack (most commonly CPU time), and the vertical axis shows you the stack active at the time of the sample.
-
-If you click on one of the frames, you'll be able to see summary statistics about it.
-
 ![Detail View](https://user-images.githubusercontent.com/150329/42108613-e6ef6d3a-7b8f-11e8-93d4-541b2cb93fe5.png)
 
+In the "Time Order" view (the default), call stacks are ordered left-to-right in the same order as they occurred in the input file, which is usually going to be the chronological order they were recorded in. This view is most helpful for understanding the behavior of an application over time, e.g. "first the data is fetched from the database, then the data is prepared for serialization, then the data is serialized to JSON". 
+
+The horizontal axis represents the "weight" of each stack (most commonly CPU time), and the vertical axis shows you the stack active at the time of the sample. If you click on one of the frames, you'll be able to see summary statistics about it.
+
+
 ### ⬅️Left Heavy
+![Left Heavy View](https://user-images.githubusercontent.com/150329/44534434-a05f8380-a6ac-11e8-86ac-e3e05e577c52.png)
 
 In the "Left Heavy" view, identical stacks are grouped together, regardless of whether they were recorded sequentially. Then, the stacks are sorted so that the heaviest stack for each parent is on the left -- hence "left heavy". This view is useful for understanding where all the time is going in situations where there are hundreds or thousands of function calls interleaved between other call stacks.
 
 ### 🥪 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.
 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.
 
-![Sandwich View](https://user-images.githubusercontent.com/150329/42108467-76a57baa-7b8f-11e8-815f-1df7b6ac3ede.png)
 
 ## Navigation
 
@@ -133,3 +108,7 @@ Once a profile has loaded, the main view is split into two: the top area is the
 * `Cmd+O`/`Ctrl+O` to open a new profile
 * `n`: Go to next profile/thread if one is available
 * `p`: Go to previous profile/thread if one is available
+
+## Contributing
+
+Do you want to contribute to speedscope? Sweeeeet. Check out [CONTRIBUTING.md](./CONTRIBUTING.md) for instructions on setting up your dev environment.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "speedscope",
-  "version": "0.7.0",
+  "version": "1.5.0",
   "description": "",
   "repository": "jlfwong/speedscope",
   "main": "index.js",
@@ -38,9 +38,9 @@
     "preact": "8.2.7",
     "preact-redux": "jlfwong/preact-redux#a56dcc4",
     "prettier": "1.12.0",
+    "protobufjs": "6.8.8",
     "quicktype": "15.0.45",
     "redux": "^4.0.0",
-    "regl": "1.3.1",
     "ts-jest": "22.4.6",
     "typescript": "2.8.1",
     "typescript-eslint-parser": "17.0.1",

sample/profiles/node/10.11.0/example.cpuprofile

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

sample/profiles/speedscope/0.0.1/simple.speedscope.json

@@ -1 +1,81 @@
-{"version":"0.0.1","$schema":"https://www.speedscope.app/file-format-schema.json","shared":{"frames":[{"name":"a"},{"name":"b"},{"name":"c"},{"name":"d"}]},"profiles":[{"type":"evented","name":"simple.txt","unit":"none","startValue":0,"endValue":14,"events":[{"type":"O","frame":0,"at":0},{"type":"O","frame":1,"at":0},{"type":"O","frame":2,"at":0},{"type":"C","frame":2,"at":2},{"type":"O","frame":3,"at":2},{"type":"C","frame":3,"at":6},{"type":"O","frame":2,"at":6},{"type":"C","frame":2,"at":9},{"type":"C","frame":1,"at":14},{"type":"C","frame":0,"at":14}]}]}
+{
+    "$schema": "https://www.speedscope.app/file-format-schema.json",
+    "profiles": [
+        {
+            "endValue": 14,
+            "events": [
+                {
+                    "at": 0,
+                    "frame": 0,
+                    "type": "O"
+                },
+                {
+                    "at": 0,
+                    "frame": 1,
+                    "type": "O"
+                },
+                {
+                    "at": 0,
+                    "frame": 2,
+                    "type": "O"
+                },
+                {
+                    "at": 2,
+                    "frame": 2,
+                    "type": "C"
+                },
+                {
+                    "at": 2,
+                    "frame": 3,
+                    "type": "O"
+                },
+                {
+                    "at": 6,
+                    "frame": 3,
+                    "type": "C"
+                },
+                {
+                    "at": 6,
+                    "frame": 2,
+                    "type": "O"
+                },
+                {
+                    "at": 9,
+                    "frame": 2,
+                    "type": "C"
+                },
+                {
+                    "at": 14,
+                    "frame": 1,
+                    "type": "C"
+                },
+                {
+                    "at": 14,
+                    "frame": 0,
+                    "type": "C"
+                }
+            ],
+            "name": "simple.txt",
+            "startValue": 0,
+            "type": "evented",
+            "unit": "none"
+        }
+    ],
+    "shared": {
+        "frames": [
+            {
+                "name": "a"
+            },
+            {
+                "name": "b"
+            },
+            {
+                "name": "c"
+            },
+            {
+                "name": "d"
+            }
+        ]
+    },
+    "version": "0.0.1"
+}

sample/profiles/stackcollapse/simple-crlf.txt

@@ -0,0 +1,5 @@
+a;b;c 1
+a;b;c 1
+a;b;d 4
+a;b;c 3
+a;b 5

sample/profiles/trace-event/multiprocess.json

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

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

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

sample/profiles/trace-event/simple-partial-trailing-comma.json

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

sample/profiles/trace-event/simple-partial-whitespace.json

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

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

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

sample/profiles/trace-event/simple.json

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

sample/programs/go/.gitignore

@@ -0,0 +1,2 @@
+simple
+server

sample/programs/go/Makefile

@@ -0,0 +1,15 @@
+.PHONY: all clean linux-perf
+
+all: simple server
+
+clean:
+	rm -f simple server
+
+simple: simple.go
+	go build $<
+
+server: server.go
+	go build $<
+
+simple.prof: simple
+	./$< -cpuprofile=$@

sample/programs/go/server.go

@@ -0,0 +1,71 @@
+package main
+
+import (
+	"log"
+	"fmt"
+	"sync"
+	"time"
+	"net/http"
+)
+
+import _ "net/http/pprof"
+
+// See https://golang.org/pkg/net/http/pprof/ for details
+
+func alpha() {
+	z := 3
+	for i := 0; i < 100000; i++ {
+		z *= 3
+	}
+}
+
+func beta() {
+	z := 3
+	for i := 0; i < 100000; i++ {
+		z *= 3
+	}
+}
+
+func delta() {
+	z := 3
+	for i := 0; i < 100000; i++ {
+		z *= 3
+	}
+	alpha()
+	beta()
+}
+
+func gamma() {
+	z := 3
+	for i := 0; i < 100000; i++ {
+		z *= 3
+	}
+}
+
+
+func main() {
+    // we need a webserver to get the pprof webserver
+    go func() {
+        log.Println(http.ListenAndServe("localhost:6060", nil))
+    }()
+    fmt.Println("hello world")
+    var wg sync.WaitGroup
+    wg.Add(1)
+    go leakyFunction(wg)
+    wg.Wait()
+}
+
+func leakyFunction(wg sync.WaitGroup) {
+    defer wg.Done()
+    s := make([]string, 3)
+    for i:= 0; i < 10000000; i++{
+        alpha()
+        beta()
+        delta()
+        gamma()
+        s = append(s, "magical pandas")
+        if (i % 100000) == 0 {
+            time.Sleep(50 * time.Millisecond)
+        }
+    }
+}

sample/programs/go/simple.go

@@ -0,0 +1,53 @@
+package main
+
+import "flag"
+import "runtime/pprof"
+import "os"
+
+var cpuprofile = flag.String("cpuprofile", "", "write cpu profile to file")
+
+func alpha() {
+	z := 3
+	for i := 0; i < 100000; i++ {
+		z *= 3
+	}
+}
+
+func beta() {
+	z := 3
+	for i := 0; i < 100000; i++ {
+		z *= 3
+	}
+}
+
+func delta() {
+	z := 3
+	for i := 0; i < 100000; i++ {
+		z *= 3
+	}
+	alpha()
+	beta()
+}
+
+func gamma() {
+	z := 3
+	for i := 0; i < 100000; i++ {
+		z *= 3
+	}
+}
+
+func main() {
+	flag.Parse()
+	if *cpuprofile != "" {
+		f, _ := os.Create(*cpuprofile)
+		pprof.StartCPUProfile(f)
+		defer pprof.StopCPUProfile()
+	}
+
+	for i := 0; i < 10000; i++ {
+		alpha()
+		beta()
+		delta()
+		gamma()
+	}
+}

sample/programs/javascript/convertToOld.js

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

sample/programs/javascript/simple.js

@@ -25,8 +25,4 @@ function gamma() {
   return prod
 }
 
-console.profile('simple')
 alpha()
-setTimeout(() => {
-  console.profileEnd('simple')
-}, 0)

sample/programs/javascript/worker.html

@@ -0,0 +1,28 @@
+<script>
+  function banana() {
+    let prod = 1
+    for (let i = 1; i < 1000; i++) {
+      prod *= i
+    }
+    return prod
+  }
+
+  function apple() {
+    for (let i = 0; i < 1000; i++) {
+      banana()
+    }
+  }
+
+  let bounces = 0
+
+  const worker = new Worker('./worker.js')
+
+  worker.onmessage = function() {
+    apple()
+    if (bounces++ < 10) {
+      worker.postMessage('ping')
+    }
+  }
+
+  worker.postMessage('ping')
+</script>

sample/programs/javascript/worker.js

@@ -0,0 +1,18 @@
+function gamma() {
+  let prod = 1
+  for (let i = 1; i < 1000; i++) {
+    prod *= i
+  }
+  return prod
+}
+
+function alpha() {
+  for (let i = 0; i < 1000; i++) {
+    gamma()
+  }
+}
+
+onmessage = function(e) {
+  alpha()
+  postMessage('pong')
+}

scripts/build-release.sh

@@ -7,6 +7,9 @@ OUTDIR=`pwd`/dist/release
 # Typecheck
 node_modules/.bin/tsc --noEmit
 
+# Run unit tests
+npm run jest
+
 # Clean out the release directory
 rm -rf "$OUTDIR"
 mkdir -p "$OUTDIR"

scripts/deploy.sh

@@ -1,26 +1,28 @@
 #!/bin/bash
 #
-# type check, do a release build, then do a shallow clone of the
-# repository into a temporary directory and copy the release build
-# artifacts into there to commit & push to the gh-pages branch
+# Do a shallow clone of the repository into a temporary directory and copy the
+# artifacts pulled from npm into the shallow clone to commit & push to the
+# gh-pages branch.
 
 set -euxo pipefail
 
-OUTDIR=`pwd`/dist/release
-echo $OUTDIR
+SRCDIR=`pwd`
+OUTDIR=`mktemp -d -t speedscope-unpacked`
 
-./scripts/build-release.sh
+# Untar the package
+pushd "$OUTDIR"
+PACKEDNAME=`npm pack speedscope | tail -n1`
+tar -xvvf "$PACKEDNAME"
 
 # Create a shallow clone of the repository
-TMPDIR=`mktemp -d -t speedscope-release`
-echo "Entering $TMPDIR"
+TMPDIR=`mktemp -d -t speedscope-deploy`
 pushd "$TMPDIR"
 git clone --depth 1 git@github.com:jlfwong/speedscope.git -b gh-pages
 
 # Copy the build artifacts into the shallow clone
 pushd speedscope
 rm -rf *
-cp -R "$OUTDIR"/* .
+cp -R "$OUTDIR"/package/dist/release/** .
 
 # Set the CNAME record
 echo www.speedscope.app > CNAME
@@ -35,17 +37,14 @@ function ctrl_c() {
   if [[ $REPLY =~ ^yes$ ]]
   then
     git add --all
-    git commit -m 'Release'
+    git commit -m "Deploy $PACKEDNAME"
     git push origin HEAD:gh-pages
-    popd
     rm -rf "$TMPDIR"
     exit 0
   else
     set +x
     echo "Aborting release."
     set -x
-
-    popd
     rm -rf "$TMPDIR"
     exit 1
   fi

scripts/prepare-zip-file.sh

@@ -0,0 +1,34 @@
+#!/bin/bash
+
+# Create a zip file containing a standalone copy of speedscope
+# based on the contents of the package published to npm
+
+set -euxo pipefail
+
+SRCDIR=`pwd`
+TMPDIR=`mktemp -d -t speedscope-test-installation`
+
+# Untar the package
+pushd "$TMPDIR"
+PACKEDNAME=`npm pack speedscope | tail -n1`
+tar -xvvf "$PACKEDNAME"
+
+# Zip the parts we care about
+ZIPNAME=`basename $PACKEDNAME .tgz`.zip
+mkdir speedscope
+mv package/dist/release/** speedscope
+cp "$SRCDIR"/LICENSE speedscope
+echo "This is a self-contained release of https://github.com/jlfwong/speedscope." > speedscope/README
+echo "To use it, open index.html in Chrome or Firefox." >> speedscope/README
+
+zip "$ZIPNAME" speedscope/**
+
+# Switch back to the repository root
+popd
+mv "$TMPDIR"/"$ZIPNAME" dist/release/"$ZIPNAME"
+
+# Clean up
+rm -rf "$TMPDIR"
+
+set +x
+echo "Created dist/release/$ZIPNAME"

src/README.md

@@ -0,0 +1,13 @@
+# Speedscope TypeScript source
+
+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,
+  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)

src/gl/canvas-context.ts

@@ -1,105 +1,40 @@
-import regl from 'regl'
-import {
-  RectangleBatchRenderer,
-  RectangleBatch,
-  RectangleBatchRendererProps,
-} from './rectangle-batch-renderer'
-import {
-  ViewportRectangleRenderer,
-  ViewportRectangleRendererProps,
-} from './overlay-rectangle-renderer'
-import {
-  TextureCachedRenderer,
-  TextureRenderer,
-  TextureRendererProps,
-} from './texture-cached-renderer'
-import {StatsPanel} from '../lib/stats'
-
-import {Vec2, Rect} from '../lib/math'
-import {
-  FlamechartColorPassRenderer,
-  FlamechartColorPassRenderProps,
-} from './flamechart-color-pass-renderer'
+import {Graphics, WebGL} from './graphics'
+import {RectangleBatchRenderer} from './rectangle-batch-renderer'
+import {TextureRenderer} from './texture-renderer'
+import {Rect, Vec2} from '../lib/math'
+import {ViewportRectangleRenderer} from './overlay-rectangle-renderer'
+import {FlamechartColorPassRenderer} from './flamechart-color-pass-renderer'
 
 type FrameCallback = () => void
 
-interface SetViewportScopeProps {
-  physicalBounds: Rect
-}
-
 export class CanvasContext {
-  public gl: regl.Instance
-  private rectangleBatchRenderer: RectangleBatchRenderer
-  private viewportRectangleRenderer: ViewportRectangleRenderer
-  private textureRenderer: TextureRenderer
-  private flamechartColorPassRenderer: FlamechartColorPassRenderer
-  private setViewportScope: regl.Command<{physicalBounds: Rect}>
-  private setScissor: regl.Command<{}>
+  public readonly gl: WebGL.Context
+  public readonly rectangleBatchRenderer: RectangleBatchRenderer
+  public readonly textureRenderer: TextureRenderer
+  public readonly viewportRectangleRenderer: ViewportRectangleRenderer
+  public readonly flamechartColorPassRenderer: FlamechartColorPassRenderer
 
   constructor(canvas: HTMLCanvasElement) {
-    this.gl = regl({
-      canvas: canvas,
-      attributes: {
-        antialias: false,
-      },
-      extensions: ['ANGLE_instanced_arrays', 'WEBGL_depth_texture'],
-      optionalExtensions: ['EXT_disjoint_timer_query'],
-      profile: true,
-    })
-
-    console.log(
-      `WebGL initialized. renderer: ${this.gl.limits.renderer}, vendor: ${
-        this.gl.limits.vendor
-      }, version: ${this.gl.limits.version}`,
-    )
-    ;(window as any)['CanvasContext'] = this
-
+    this.gl = new WebGL.Context(canvas)
     this.rectangleBatchRenderer = new RectangleBatchRenderer(this.gl)
-    this.viewportRectangleRenderer = new ViewportRectangleRenderer(this.gl)
     this.textureRenderer = new TextureRenderer(this.gl)
+    this.viewportRectangleRenderer = new ViewportRectangleRenderer(this.gl)
     this.flamechartColorPassRenderer = new FlamechartColorPassRenderer(this.gl)
-    this.setScissor = this.gl({scissor: {enable: true}})
-    this.setViewportScope = this.gl<SetViewportScopeProps>({
-      context: {
-        viewportX: (context: regl.Context, props: SetViewportScopeProps) => {
-          return props.physicalBounds.left()
-        },
-        viewportY: (context: regl.Context, props: SetViewportScopeProps) => {
-          return props.physicalBounds.top()
-        },
-      },
-      viewport: (context, props) => {
-        const {physicalBounds} = props
-        return {
-          x: physicalBounds.left(),
-          y:
-            window.devicePixelRatio * window.innerHeight -
-            physicalBounds.top() -
-            physicalBounds.height(),
-          width: physicalBounds.width(),
-          height: physicalBounds.height(),
-        }
-      },
-      scissor: (context, props) => {
-        const {physicalBounds} = props
-        return {
-          enable: true,
-          box: {
-            x: physicalBounds.left(),
-            y:
-              window.devicePixelRatio * window.innerHeight -
-              physicalBounds.top() -
-              physicalBounds.height(),
-            width: physicalBounds.width(),
-            height: physicalBounds.height(),
-          },
-        }
-      },
-    })
+
+    const webGLInfo = this.gl.getWebGLInfo()
+    if (webGLInfo) {
+      console.log(
+        `WebGL initialized. renderer: ${webGLInfo.renderer}, vendor: ${
+          webGLInfo.vendor
+        }, version: ${webGLInfo.version}`,
+      )
+    }
+    ;(window as any)['testContextLoss'] = () => {
+      this.gl.testContextLoss()
+    }
   }
 
-  private tick: regl.Tick | null = null
-  private tickNeeded: boolean = false
+  private animationFrameRequest: number | null = null
   private beforeFrameHandlers = new Set<FrameCallback>()
   addBeforeFrameHandler(callback: FrameCallback) {
     this.beforeFrameHandlers.add(callback)
@@ -108,86 +43,38 @@ export class CanvasContext {
     this.beforeFrameHandlers.delete(callback)
   }
   requestFrame() {
-    this.tickNeeded = true
-    if (!this.tick) {
-      this.tick = this.gl.frame(this.onBeforeFrame)
+    if (!this.animationFrameRequest) {
+      this.animationFrameRequest = requestAnimationFrame(this.onBeforeFrame)
     }
   }
+  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))
 
-  private perfDebug = window.location.href.indexOf('perf-debug=1') !== -1
-  private statsPanel: StatsPanel | null = this.perfDebug ? new StatsPanel() : null
-
-  private onBeforeFrame = (context: regl.Context) => {
-    this.setScissor(() => {
-      this.gl.clear({color: [0, 0, 0, 0]})
-    })
-
-    this.tickNeeded = false
-
-    this.statsPanel && this.statsPanel.begin()
     for (const handler of this.beforeFrameHandlers) {
       handler()
     }
-    this.statsPanel && this.statsPanel.end()
-
-    if (this.tick && !this.tickNeeded) {
-      if (!this.perfDebug) {
-        this.tick.cancel()
-        this.tick = null
-      }
-    }
-
-    // TODO(jlfwong): It would be really nice to have GPU
-    // stats here, but I can't figure out how to interpret
-    // the gpuTime. I suspect this is caused by executing the same
-    // program multiple times without flushing.
-    // I'll investigate this at some point and report a bug to regl.
   }
 
-  drawRectangleBatch(props: RectangleBatchRendererProps) {
-    this.rectangleBatchRenderer.render(props)
+  setViewport(physicalBounds: Rect, cb: () => void): void {
+    const {origin, size} = physicalBounds
+    let viewportBefore = this.gl.viewport
+    this.gl.setViewport(origin.x, origin.y, size.x, size.y)
+
+    cb()
+
+    let {x, y, width, height} = viewportBefore
+    this.gl.setViewport(x, y, width, height)
   }
 
-  drawTexture(props: TextureRendererProps) {
-    this.textureRenderer.render(props)
-  }
-
-  drawFlamechartColorPass(props: FlamechartColorPassRenderProps) {
-    this.flamechartColorPassRenderer.render(props)
-  }
-
-  createRectangleBatch(): RectangleBatch {
-    return new RectangleBatch(this.gl)
-  }
-
-  createTextureCachedRenderer<T>(options: {
-    render(t: T): void
-    shouldUpdate(oldProps: T, newProps: T): boolean
-  }): TextureCachedRenderer<T> {
-    return new TextureCachedRenderer(this.gl, {
-      ...options,
-      textureRenderer: this.textureRenderer,
-    })
-  }
-
-  drawViewportRectangle(props: ViewportRectangleRendererProps) {
-    this.viewportRectangleRenderer.render(props)
-  }
-
-  renderInto(el: Element, cb: (context: regl.Context) => void) {
+  renderBehind(el: Element, cb: () => void) {
     const bounds = el.getBoundingClientRect()
     const physicalBounds = new Rect(
       new Vec2(bounds.left * window.devicePixelRatio, bounds.top * window.devicePixelRatio),
       new Vec2(bounds.width * window.devicePixelRatio, bounds.height * window.devicePixelRatio),
     )
-    this.setViewportScope({physicalBounds}, cb)
-  }
 
-  setViewport(physicalBounds: Rect, cb: (context: regl.Context) => void) {
-    this.setViewportScope({physicalBounds}, cb)
-  }
-
-  getMaxTextureSize() {
-    return this.gl.limits.maxTextureSize
+    this.setViewport(physicalBounds, cb)
   }
 }

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

@@ -1,165 +1,165 @@
-import regl from 'regl'
 import {Vec2, Rect, AffineTransform} from '../lib/math'
+import {Graphics} from './graphics'
+import {setUniformAffineTransform} from './utils'
+
+const vertexFormat = new Graphics.VertexFormat()
+vertexFormat.add('position', Graphics.AttributeType.FLOAT, 2)
+vertexFormat.add('uv', Graphics.AttributeType.FLOAT, 2)
+
+const vert = `
+  uniform mat3 uvTransform;
+  uniform mat3 positionTransform;
+
+  attribute vec2 position;
+  attribute vec2 uv;
+  varying vec2 vUv;
+
+  void main() {
+    vUv = (uvTransform * vec3(uv, 1)).xy;
+    gl_Position = vec4((positionTransform * vec3(position, 1)).xy, 0, 1);
+  }
+`
+
+const frag = `
+  precision mediump float;
+
+  uniform vec2 uvSpacePixelSize;
+  uniform float renderOutlines;
+
+  varying vec2 vUv;
+  uniform sampler2D colorTexture;
+
+  // https://en.wikipedia.org/wiki/HSL_and_HSV#From_luma/chroma/hue
+  vec3 hcl2rgb(float H, float C, float L) {
+    float hPrime = H / 60.0;
+    float X = C * (1.0 - abs(mod(hPrime, 2.0) - 1.0));
+    vec3 RGB =
+      hPrime < 1.0 ? vec3(C, X, 0) :
+      hPrime < 2.0 ? vec3(X, C, 0) :
+      hPrime < 3.0 ? vec3(0, C, X) :
+      hPrime < 4.0 ? vec3(0, X, C) :
+      hPrime < 5.0 ? vec3(X, 0, C) :
+      vec3(C, 0, X);
+
+    float m = L - dot(RGB, vec3(0.30, 0.59, 0.11));
+    return RGB + vec3(m, m, m);
+  }
+
+  float triangle(float x) {
+    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);
+  }
+
+  void main() {
+    vec4 here = texture2D(colorTexture, vUv);
+
+    if (here.z == 0.0) {
+      // Background color
+      gl_FragColor = vec4(0, 0, 0, 0);
+      return;
+    }
+
+    // Sample the 4 surrounding pixels in the depth texture to determine
+    // if we should draw a boundary here or not.
+    vec4 N = texture2D(colorTexture, vUv + vec2(0, uvSpacePixelSize.y));
+    vec4 E = texture2D(colorTexture, vUv + vec2(uvSpacePixelSize.x, 0));
+    vec4 S = texture2D(colorTexture, vUv + vec2(0, -uvSpacePixelSize.y));
+    vec4 W = texture2D(colorTexture, vUv + vec2(-uvSpacePixelSize.x, 0));
+
+    // NOTE: For outline checks, we intentionally check both the right
+    // and the left to determine if we're an edge. If a rectangle is a single
+    // pixel wide, we don't want to render it as an outline, so this method
+    // of checking ensures that we don't outline single physical-space
+    // pixel width rectangles.
+    if (
+      renderOutlines > 0.0 &&
+      (
+        here.y == N.y && here.y != S.y || // Top edge
+        here.y == S.y && here.y != N.y || // Bottom edge
+        here.x == E.x && here.x != W.x || // Left edge
+        here.x == W.x && here.x != E.x
+      )
+    ) {
+      // We're on an edge! Draw transparent.
+      gl_FragColor = vec4(0, 0, 0, 0);
+    } else {
+      // Not on an edge. Draw the appropriate color.
+      gl_FragColor = vec4(colorForBucket(here.z), here.a);
+    }
+  }
+`
 
 export interface FlamechartColorPassRenderProps {
-  rectInfoTexture: regl.Texture
+  rectInfoTexture: Graphics.Texture
   renderOutlines: boolean
   srcRect: Rect
   dstRect: Rect
 }
+
 export class FlamechartColorPassRenderer {
-  private command: regl.Command<FlamechartColorPassRenderProps>
-  constructor(gl: regl.Instance) {
-    this.command = gl({
-      vert: `
-        uniform mat3 uvTransform;
-        uniform mat3 positionTransform;
+  private material: Graphics.Material
+  private buffer: Graphics.VertexBuffer
 
-        attribute vec2 position;
-        attribute vec2 uv;
-        varying vec2 vUv;
+  constructor(private gl: Graphics.Context) {
+    const vertices = [
+      {pos: [-1, 1], uv: [0, 1]},
+      {pos: [1, 1], uv: [1, 1]},
+      {pos: [-1, -1], uv: [0, 0]},
+      {pos: [1, -1], uv: [1, 0]},
+    ]
+    const floats: number[] = []
+    for (let v of vertices) {
+      floats.push(v.pos[0])
+      floats.push(v.pos[1])
+      floats.push(v.uv[0])
+      floats.push(v.uv[1])
+    }
 
-        void main() {
-          vUv = (uvTransform * vec3(uv, 1)).xy;
-          gl_Position = vec4((positionTransform * vec3(position, 1)).xy, 0, 1);
-        }
-      `,
-
-      frag: `
-        precision mediump float;
-
-        uniform vec2 uvSpacePixelSize;
-        uniform float renderOutlines;
-
-        varying vec2 vUv;
-        uniform sampler2D colorTexture;
-
-        // https://en.wikipedia.org/wiki/HSL_and_HSV#From_luma/chroma/hue
-        vec3 hcl2rgb(float H, float C, float L) {
-          float hPrime = H / 60.0;
-          float X = C * (1.0 - abs(mod(hPrime, 2.0) - 1.0));
-          vec3 RGB =
-            hPrime < 1.0 ? vec3(C, X, 0) :
-            hPrime < 2.0 ? vec3(X, C, 0) :
-            hPrime < 3.0 ? vec3(0, C, X) :
-            hPrime < 4.0 ? vec3(0, X, C) :
-            hPrime < 5.0 ? vec3(X, 0, C) :
-            vec3(C, 0, X);
-
-          float m = L - dot(RGB, vec3(0.30, 0.59, 0.11));
-          return RGB + vec3(m, m, m);
-        }
-
-        float triangle(float x) {
-          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);
-        }
-
-        void main() {
-          vec4 here = texture2D(colorTexture, vUv);
-
-          if (here.z == 0.0) {
-            // Background color
-            gl_FragColor = vec4(0, 0, 0, 0);
-            return;
-          }
-
-          // Sample the 4 surrounding pixels in the depth texture to determine
-          // if we should draw a boundary here or not.
-          vec4 N = texture2D(colorTexture, vUv + vec2(0, uvSpacePixelSize.y));
-          vec4 E = texture2D(colorTexture, vUv + vec2(uvSpacePixelSize.x, 0));
-          vec4 S = texture2D(colorTexture, vUv + vec2(0, -uvSpacePixelSize.y));
-          vec4 W = texture2D(colorTexture, vUv + vec2(-uvSpacePixelSize.x, 0));
-
-          // NOTE: For outline checks, we intentionally check both the right
-          // and the left to determine if we're an edge. If a rectangle is a single
-          // pixel wide, we don't want to render it as an outline, so this method
-          // of checking ensures that we don't outline single physical-space
-          // pixel width rectangles.
-          if (
-            renderOutlines > 0.0 &&
-            (
-              here.y == N.y && here.y != S.y || // Top edge
-              here.y == S.y && here.y != N.y || // Bottom edge
-              here.x == E.x && here.x != W.x || // Left edge
-              here.x == W.x && here.x != E.x
-            )
-          ) {
-            // We're on an edge! Draw transparent.
-            gl_FragColor = vec4(0, 0, 0, 0);
-          } else {
-            // Not on an edge. Draw the appropriate color;
-            gl_FragColor = vec4(colorForBucket(here.z), here.a);
-          }
-        }
-      `,
-
-      depth: {
-        enable: false,
-      },
-
-      attributes: {
-        // Cover full canvas with a rectangle
-        // with 2 triangles using a triangle
-        // strip.
-        //
-        // 0 +--+ 1
-        //   | /|
-        //   |/ |
-        // 2 +--+ 3
-        position: gl.buffer([[-1, 1], [1, 1], [-1, -1], [1, -1]]),
-        uv: gl.buffer([[0, 1], [1, 1], [0, 0], [1, 0]]),
-      },
-
-      count: 4,
-
-      primitive: 'triangle strip',
-
-      uniforms: {
-        colorTexture: (context, props) => props.rectInfoTexture,
-        uvTransform: (context, props) => {
-          const {srcRect, rectInfoTexture} = props
-          const physicalToUV = AffineTransform.withTranslation(new Vec2(0, 1))
-            .times(AffineTransform.withScale(new Vec2(1, -1)))
-            .times(
-              AffineTransform.betweenRects(
-                new Rect(Vec2.zero, new Vec2(rectInfoTexture.width, rectInfoTexture.height)),
-                Rect.unit,
-              ),
-            )
-          const uvRect = physicalToUV.transformRect(srcRect)
-          return AffineTransform.betweenRects(Rect.unit, uvRect).flatten()
-        },
-        renderOutlines: (context, props) => {
-          return props.renderOutlines ? 1.0 : 0.0
-        },
-        uvSpacePixelSize: (context, props) => {
-          return Vec2.unit
-            .dividedByPointwise(new Vec2(props.rectInfoTexture.width, props.rectInfoTexture.height))
-            .flatten()
-        },
-        positionTransform: (context, props) => {
-          const {dstRect} = props
-          const viewportSize = new Vec2(context.viewportWidth, context.viewportHeight)
-
-          const physicalToNDC = AffineTransform.withScale(new Vec2(1, -1)).times(
-            AffineTransform.betweenRects(new Rect(Vec2.zero, viewportSize), Rect.NDC),
-          )
-          const ndcRect = physicalToNDC.transformRect(dstRect)
-          return AffineTransform.betweenRects(Rect.NDC, ndcRect).flatten()
-        },
-      },
-    })
+    this.buffer = gl.createVertexBuffer(vertexFormat.stride * vertices.length)
+    this.buffer.uploadFloats(floats)
+    this.material = gl.createMaterial(vertexFormat, vert, frag)
   }
 
   render(props: FlamechartColorPassRenderProps) {
-    this.command(props)
+    const {srcRect, rectInfoTexture} = props
+    const physicalToUV = AffineTransform.withTranslation(new Vec2(0, 1))
+      .times(AffineTransform.withScale(new Vec2(1, -1)))
+      .times(
+        AffineTransform.betweenRects(
+          new Rect(Vec2.zero, new Vec2(rectInfoTexture.width, rectInfoTexture.height)),
+          Rect.unit,
+        ),
+      )
+    const uvRect = physicalToUV.transformRect(srcRect)
+    const uvTransform = AffineTransform.betweenRects(Rect.unit, uvRect)
+
+    const {dstRect} = props
+    const viewportSize = new Vec2(this.gl.viewport.width, this.gl.viewport.height)
+
+    const physicalToNDC = AffineTransform.withScale(new Vec2(1, -1)).times(
+      AffineTransform.betweenRects(new Rect(Vec2.zero, viewportSize), Rect.NDC),
+    )
+    const ndcRect = physicalToNDC.transformRect(dstRect)
+    const positionTransform = AffineTransform.betweenRects(Rect.NDC, ndcRect)
+
+    const uvSpacePixelSize = Vec2.unit.dividedByPointwise(
+      new Vec2(props.rectInfoTexture.width, props.rectInfoTexture.height),
+    )
+
+    this.material.setUniformSampler('colorTexture', props.rectInfoTexture, 0)
+    setUniformAffineTransform(this.material, 'uvTransform', uvTransform)
+    this.material.setUniformFloat('renderOutlines', props.renderOutlines ? 1.0 : 0.0)
+    this.material.setUniformVec2('uvSpacePixelSize', uvSpacePixelSize.x, uvSpacePixelSize.y)
+    setUniformAffineTransform(this.material, 'positionTransform', positionTransform)
+
+    this.gl.setUnpremultipliedBlendState()
+    this.gl.draw(Graphics.Primitive.TRIANGLE_STRIP, this.material, this.buffer)
   }
 }

src/gl/flamechart-renderer.ts

@@ -1,11 +1,12 @@
-import regl from 'regl'
 import {Flamechart} from '../lib/flamechart'
-import {RectangleBatch} from './rectangle-batch-renderer'
-import {CanvasContext} from './canvas-context'
+import {RectangleBatch, RectangleBatchRenderer} from './rectangle-batch-renderer'
 import {Vec2, Rect, AffineTransform} from '../lib/math'
 import {Color} from '../lib/color'
 import {KeyedSet} from '../lib/utils'
 import {RowAtlas} from './row-atlas'
+import {Graphics} from './graphics'
+import {FlamechartColorPassRenderer} from './flamechart-color-pass-renderer'
+import {renderInto} from './utils'
 
 const MAX_BATCH_SIZE = 10000
 
@@ -23,9 +24,7 @@ class RangeTreeLeafNode implements RangeTreeNode {
     private batch: RectangleBatch,
     private bounds: Rect,
     private numPrecedingRectanglesInRow: number,
-  ) {
-    batch.uploadToGPU()
-  }
+  ) {}
 
   getBatch() {
     return this.batch
@@ -127,13 +126,13 @@ export interface FlamechartRendererOptions {
 
 export class FlamechartRenderer {
   private layers: RangeTreeNode[] = []
-  private rectInfoTexture: regl.Texture
-  private framebuffer: regl.Framebuffer
 
   constructor(
-    private canvasContext: CanvasContext,
+    private gl: Graphics.Context,
     private rowAtlas: RowAtlas<FlamechartRowAtlasKey>,
     private flamechart: Flamechart,
+    private rectangleBatchRenderer: RectangleBatchRenderer,
+    private colorPassRenderer: FlamechartColorPassRenderer,
     private options: FlamechartRendererOptions = {inverted: false},
   ) {
     const nLayers = flamechart.getLayers().length
@@ -143,7 +142,7 @@ export class FlamechartRenderer {
 
       let minLeft = Infinity
       let maxRight = -Infinity
-      let batch = canvasContext.createRectangleBatch()
+      let batch = new RectangleBatch(this.gl)
 
       let rectCount = 0
 
@@ -161,7 +160,7 @@ export class FlamechartRenderer {
           )
           minLeft = Infinity
           maxRight = -Infinity
-          batch = canvasContext.createRectangleBatch()
+          batch = new RectangleBatch(this.gl)
         }
         const configSpaceBounds = new Rect(
           new Vec2(frame.start, y),
@@ -198,10 +197,47 @@ export class FlamechartRenderer {
       // range than a tree of always-height-two might make this run faster
       this.layers.push(new RangeTreeInteriorNode(leafNodes))
     }
-    this.rectInfoTexture = this.canvasContext.gl.texture({width: 1, height: 1})
-    this.framebuffer = this.canvasContext.gl.framebuffer({
-      color: [this.rectInfoTexture],
-    })
+  }
+
+  private rectInfoTexture: Graphics.Texture | null = null
+  getRectInfoTexture(width: number, height: number): Graphics.Texture {
+    if (this.rectInfoTexture) {
+      const texture = this.rectInfoTexture
+      if (texture.width != width || texture.height != height) {
+        texture.resize(width, height)
+      }
+    } else {
+      this.rectInfoTexture = this.gl.createTexture(
+        Graphics.TextureFormat.NEAREST_CLAMP,
+        width,
+        height,
+      )
+    }
+    return this.rectInfoTexture
+  }
+
+  private rectInfoRenderTarget: Graphics.RenderTarget | null = null
+  getRectInfoRenderTarget(width: number, height: number): Graphics.RenderTarget {
+    const texture = this.getRectInfoTexture(width, height)
+    if (this.rectInfoRenderTarget) {
+      if (this.rectInfoRenderTarget.texture != texture) {
+        this.rectInfoRenderTarget.texture.free()
+        this.rectInfoRenderTarget.setColor(texture)
+      }
+    }
+    if (!this.rectInfoRenderTarget) {
+      this.rectInfoRenderTarget = this.gl.createRenderTarget(texture)
+    }
+    return this.rectInfoRenderTarget
+  }
+
+  free() {
+    if (this.rectInfoRenderTarget) {
+      this.rectInfoRenderTarget.free()
+    }
+    if (this.rectInfoTexture) {
+      this.rectInfoTexture.free()
+    }
   }
 
   private atlasKeys = new KeyedSet<FlamechartRowAtlasKey>()
@@ -274,6 +310,11 @@ export class FlamechartRenderer {
       }
     }
 
+    // TODO(jlfwong): When I switched the GL backend from regl to the port from
+    // evanw/sky, rendering uncached even for massive documents seemed fast
+    // enough. It's possible that the row cache is now unnecessary, but I'll
+    // leave it around for now since it's not causing issues.
+
     const cacheCapacity = this.rowAtlas.getCapacity()
     const keysToRenderCached = atlasKeysToRender.slice(0, cacheCapacity)
     const keysToRenderUncached = atlasKeysToRender.slice(cacheCapacity)
@@ -282,24 +323,26 @@ export class FlamechartRenderer {
     this.rowAtlas.writeToAtlasIfNeeded(keysToRenderCached, (textureDstRect, key) => {
       const configSpaceBounds = this.configSpaceBoundsForKey(key)
       this.layers[key.stackDepth].forEachLeafNodeWithinBounds(configSpaceBounds, leaf => {
-        this.canvasContext.drawRectangleBatch({
+        this.rectangleBatchRenderer.render({
           batch: leaf.getBatch(),
           configSpaceSrcRect: configSpaceBounds,
           physicalSpaceDstRect: textureDstRect,
-          parityMin: key.stackDepth % 2 == 0 ? 2 : 0,
-          parityOffset: leaf.getParity(),
         })
       })
     })
 
-    this.framebuffer.resize(physicalSpaceDstRect.width(), physicalSpaceDstRect.height())
-    this.framebuffer.use(context => {
-      this.canvasContext.gl.clear({color: [0, 0, 0, 0]})
+    const renderTarget = this.getRectInfoRenderTarget(
+      physicalSpaceDstRect.width(),
+      physicalSpaceDstRect.height(),
+    )
+
+    renderInto(this.gl, renderTarget, () => {
+      this.gl.clear(new Graphics.Color(0, 0, 0, 0))
+
       const viewportRect = new Rect(
         Vec2.zero,
-        new Vec2(context.viewportWidth, context.viewportHeight),
+        new Vec2(this.gl.viewport.width, this.gl.viewport.height),
       )
-
       const configToViewport = AffineTransform.betweenRects(configSpaceSrcRect, viewportRect)
 
       // Render from the cache
@@ -313,34 +356,25 @@ export class FlamechartRenderer {
         const configSpaceBounds = this.configSpaceBoundsForKey(key)
         const physicalBounds = configToViewport.transformRect(configSpaceBounds)
         this.layers[key.stackDepth].forEachLeafNodeWithinBounds(configSpaceBounds, leaf => {
-          this.canvasContext.drawRectangleBatch({
+          this.rectangleBatchRenderer.render({
             batch: leaf.getBatch(),
-            configSpaceSrcRect,
+            configSpaceSrcRect: configSpaceBounds,
             physicalSpaceDstRect: physicalBounds,
-            parityMin: key.stackDepth % 2 == 0 ? 2 : 0,
-            parityOffset: leaf.getParity(),
           })
         })
       }
     })
 
-    this.canvasContext.drawFlamechartColorPass({
-      rectInfoTexture: this.rectInfoTexture,
-      srcRect: new Rect(
-        Vec2.zero,
-        new Vec2(this.rectInfoTexture.width, this.rectInfoTexture.height),
-      ),
+    const rectInfoTexture = this.getRectInfoTexture(
+      physicalSpaceDstRect.width(),
+      physicalSpaceDstRect.height(),
+    )
+
+    this.colorPassRenderer.render({
+      rectInfoTexture,
+      srcRect: new Rect(Vec2.zero, new Vec2(rectInfoTexture.width, rectInfoTexture.height)),
       dstRect: physicalSpaceDstRect,
       renderOutlines: props.renderOutlines,
     })
-
-    // Overlay the atlas on top of the canvas for debugging
-    /*
-    this.canvasContext.drawTexture({
-      texture: this.rowAtlas.texture,
-      srcRect: new Rect(Vec2.zero, new Vec2(this.rowAtlas.texture.width, this.rowAtlas.texture.height)),
-      dstRect: new Rect(Vec2.zero, new Vec2(800, 800))
-    })
-    */
   }
 }

src/gl/overlay-rectangle-renderer.ts

@@ -1,126 +1,103 @@
-import regl from 'regl'
 import {AffineTransform, Rect} from '../lib/math'
+import {Graphics} from './graphics'
+import {setUniformAffineTransform, setUniformVec2} from './utils'
 
 export interface ViewportRectangleRendererProps {
   configSpaceToPhysicalViewSpace: AffineTransform
   configSpaceViewportRect: Rect
 }
 
+const vertexFormat = new Graphics.VertexFormat()
+vertexFormat.add('position', Graphics.AttributeType.FLOAT, 2)
+
+const vert = `
+  attribute vec2 position;
+
+  void main() {
+    gl_Position = vec4(position, 0, 1);
+  }
+`
+
+const frag = `
+  precision mediump float;
+
+  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;
+
+    vec2 halfSize = physicalSize / 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);
+
+    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);
+    }
+  }
+`
+
 export class ViewportRectangleRenderer {
-  private command: regl.Command<ViewportRectangleRendererProps>
-  constructor(regl: regl.Instance) {
-    this.command = regl<ViewportRectangleRendererProps>({
-      vert: `
-        attribute vec2 position;
+  private material: Graphics.Material
+  private buffer: Graphics.VertexBuffer
 
-        void main() {
-          gl_Position = vec4(position, 0, 1);
-        }
-      `,
-
-      frag: `
-        precision mediump float;
-
-        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;
-
-          vec2 halfSize = physicalSize / 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);
-
-          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);
-          }
-        }
-      `,
-
-      blend: {
-        enable: true,
-        func: {
-          srcRGB: 'src alpha',
-          srcAlpha: 'one',
-          dstRGB: 'one minus src alpha',
-          dstAlpha: 'one',
-        },
-      },
-
-      depth: {
-        enable: false,
-      },
-
-      attributes: {
-        // Cover full canvas with a rectangle
-        // with 2 triangles using a triangle
-        // strip.
-        //
-        // 0 +--+ 1
-        //   | /|
-        //   |/ |
-        // 2 +--+ 3
-        position: [[-1, 1], [1, 1], [-1, -1], [1, -1]],
-      },
-
-      uniforms: {
-        configSpaceToPhysicalViewSpace: (context, props) => {
-          return props.configSpaceToPhysicalViewSpace.flatten()
-        },
-        configSpaceViewportOrigin: (context, props) => {
-          return props.configSpaceViewportRect.origin.flatten()
-        },
-        configSpaceViewportSize: (context, props) => {
-          return props.configSpaceViewportRect.size.flatten()
-        },
-        physicalSize: (context, props) => {
-          return [context.viewportWidth, context.viewportHeight]
-        },
-        physicalOrigin: (context, props) => {
-          return [context.viewportX, context.viewportY]
-        },
-        framebufferHeight: (context, props) => {
-          return context.framebufferHeight
-        },
-      },
-
-      primitive: 'triangle strip',
-
-      count: 4,
-    })
+  constructor(private gl: Graphics.Context) {
+    const vertices = [[-1, 1], [1, 1], [-1, -1], [1, -1]]
+    const floats: number[] = []
+    for (let v of vertices) {
+      floats.push(v[0])
+      floats.push(v[1])
+    }
+    this.buffer = gl.createVertexBuffer(vertexFormat.stride * vertices.length)
+    this.buffer.upload(new Uint8Array(new Float32Array(floats).buffer))
+    this.material = gl.createMaterial(vertexFormat, vert, frag)
   }
 
   render(props: ViewportRectangleRendererProps) {
-    this.command(props)
-  }
+    setUniformAffineTransform(
+      this.material,
+      'configSpaceToPhysicalViewSpace',
+      props.configSpaceToPhysicalViewSpace,
+    )
 
-  resetStats() {
-    return Object.assign(this.command.stats, {cpuTime: 0, gpuTime: 0, count: 0})
-  }
-  stats() {
-    return this.command.stats
+    // TODO(jlfwong): Pack these into a Vec4 instead
+    setUniformVec2(this.material, 'configSpaceViewportOrigin', props.configSpaceViewportRect.origin)
+    setUniformVec2(this.material, 'configSpaceViewportSize', props.configSpaceViewportRect.size)
+    // TODO(jlfwong): Pack these into a Vec4 instead
+
+    const viewport = this.gl.viewport
+    this.material.setUniformVec2('physicalOrigin', viewport.x, viewport.y)
+    this.material.setUniformVec2('physicalSize', viewport.width, viewport.height)
+
+    this.material.setUniformFloat('framebufferHeight', this.gl.renderTargetHeightInPixels)
+
+    this.gl.setBlendState(
+      Graphics.BlendOperation.SOURCE_ALPHA,
+      Graphics.BlendOperation.INVERSE_SOURCE_ALPHA,
+    )
+    this.gl.draw(Graphics.Primitive.TRIANGLE_STRIP, this.material, this.buffer)
   }
 }

src/gl/rectangle-batch-renderer.ts

@@ -1,73 +1,99 @@
-import regl from 'regl'
 import {Rect, Vec2, AffineTransform} from '../lib/math'
 import {Color} from '../lib/color'
+import {Graphics} from './graphics'
+import {setUniformAffineTransform} from './utils'
+
+const vertexFormat = new Graphics.VertexFormat()
+vertexFormat.add('configSpacePos', Graphics.AttributeType.FLOAT, 2)
+vertexFormat.add('color', Graphics.AttributeType.FLOAT, 3)
+
+const vert = `
+  uniform mat3 configSpaceToNDC;
+
+  attribute vec2 configSpacePos;
+  attribute vec3 color;
+  varying vec3 vColor;
+
+  void main() {
+    vColor = color;
+    vec2 position = (configSpaceToNDC * vec3(configSpacePos, 1)).xy;
+    gl_Position = vec4(position, 1, 1);
+  }
+`
+
+const frag = `
+  precision mediump float;
+  varying vec3 vColor;
+
+  void main() {
+    gl_FragColor = vec4(vColor.rgb, 1);
+  }
+`
 
 export class RectangleBatch {
-  private rectCapacity = 1000
-  private rectCount = 0
-
-  private configSpaceOffsets = new Float32Array(this.rectCapacity * 2)
-  private configSpaceSizes = new Float32Array(this.rectCapacity * 2)
-  private colors = new Float32Array(this.rectCapacity * 3)
-
-  constructor(private gl: regl.Instance) {}
+  private rects: Rect[] = []
+  private colors: Color[] = []
+  constructor(private gl: Graphics.Context) {}
 
   getRectCount() {
-    return this.rectCount
+    return this.rects.length
   }
 
-  private configSpaceOffsetBuffer: regl.Buffer | null = null
-  getConfigSpaceOffsetBuffer() {
-    if (!this.configSpaceOffsetBuffer)
-      this.configSpaceOffsetBuffer = this.gl.buffer(this.configSpaceOffsets)
-    return this.configSpaceOffsetBuffer
-  }
+  private buffer: Graphics.VertexBuffer | null = null
+  getBuffer(): Graphics.VertexBuffer {
+    if (this.buffer) {
+      return this.buffer
+    }
 
-  private configSpaceSizeBuffer: regl.Buffer | null = null
-  getConfigSpaceSizeBuffer() {
-    if (!this.configSpaceSizeBuffer)
-      this.configSpaceSizeBuffer = this.gl.buffer(this.configSpaceSizes)
-    return this.configSpaceSizeBuffer
-  }
+    const corners = [[0, 0], [1, 0], [0, 1], [1, 0], [0, 1], [1, 1]]
 
-  private colorBuffer: regl.Buffer | null = null
-  getColorBuffer() {
-    if (!this.colorBuffer) this.colorBuffer = this.gl.buffer(this.colors)
-    return this.colorBuffer
-  }
+    const bytes = new Uint8Array(vertexFormat.stride * corners.length * this.rects.length)
+    const floats = new Float32Array(bytes.buffer)
+    let idx = 0
 
-  uploadToGPU() {
-    this.getConfigSpaceOffsetBuffer()
-    this.getConfigSpaceSizeBuffer()
-    this.getColorBuffer()
+    for (let i = 0; i < this.rects.length; i++) {
+      const rect = this.rects[i]
+      const color = this.colors[i]
+
+      // TODO(jlfwong): In the conversion from regl to graphics.ts, I lost the
+      // ability to do instanced drawing. This is a pretty significant hit to
+      // the performance here since I need 6x the memory to allocate these
+      // things. Adding instanced drawing to graphics.ts is non-trivial, so I'm
+      // just going to try this for now.
+      for (let corner of corners) {
+        floats[idx++] = rect.origin.x + corner[0] * rect.size.x
+        floats[idx++] = rect.origin.y + corner[1] * rect.size.y
+
+        floats[idx++] = color.r
+        floats[idx++] = color.g
+        floats[idx++] = color.b
+      }
+    }
+
+    if (idx !== floats.length) {
+      throw new Error("Buffer expected to be full but wasn't")
+    }
+
+    this.buffer = this.gl.createVertexBuffer(bytes.length)
+    this.buffer.upload(bytes)
+    return this.buffer
   }
 
   addRect(rect: Rect, color: Color) {
-    const index = this.rectCount++
-    if (index >= this.rectCapacity) {
-      // Not enough capacity, time to resize! We'll double the capacity each time.
-      this.rectCapacity *= 2
-      const configSpaceOffsets = new Float32Array(this.rectCapacity * 2)
-      const configSpaceSizes = new Float32Array(this.rectCapacity * 2)
-      const colors = new Float32Array(this.rectCapacity * 3)
+    this.rects.push(rect)
+    this.colors.push(color)
 
-      configSpaceOffsets.set(this.configSpaceOffsets)
-      configSpaceSizes.set(this.configSpaceSizes)
-      colors.set(this.colors)
-
-      this.configSpaceOffsets = configSpaceOffsets
-      this.configSpaceSizes = configSpaceSizes
-      this.colors = colors
+    if (this.buffer) {
+      this.buffer.free()
+      this.buffer = null
     }
-    this.configSpaceOffsets[index * 2] = rect.origin.x
-    this.configSpaceOffsets[index * 2 + 1] = rect.origin.y
+  }
 
-    this.configSpaceSizes[index * 2] = rect.size.x
-    this.configSpaceSizes[index * 2 + 1] = rect.size.y
-
-    this.colors[index * 3] = color.r
-    this.colors[index * 3 + 1] = color.g
-    this.colors[index * 3 + 2] = color.b
+  free() {
+    if (this.buffer) {
+      this.buffer.free()
+      this.buffer = null
+    }
   }
 }
 
@@ -75,131 +101,35 @@ export interface RectangleBatchRendererProps {
   batch: RectangleBatch
   configSpaceSrcRect: Rect
   physicalSpaceDstRect: Rect
-  parityMin?: number
-  parityOffset?: number
 }
 
 export class RectangleBatchRenderer {
-  private command: regl.Command<RectangleBatchRendererProps>
-  constructor(gl: regl.Instance) {
-    // We draw the parity / 5 into the depth channel so it can be used in a
-    // post-processing step to draw boundaries between rectangles. We use 5
-    // different values (2 per row) + one for the background, so we can
-    // distingish both between adjacent rectangles on a row and between rows!
-    this.command = gl({
-      vert: `
-      uniform mat3 configSpaceToNDC;
-
-      // Non-instanced
-      attribute vec2 corner;
-
-      // Instanced
-      attribute vec2 configSpaceOffset;
-      attribute vec2 configSpaceSize;
-      attribute vec3 color;
-      attribute float index;
-
-      varying vec3 vColor;
-
-      void main() {
-        vColor = color;
-        vec2 configSpacePos = configSpaceOffset + corner * configSpaceSize;
-        vec2 position = (configSpaceToNDC * vec3(configSpacePos, 1)).xy;
-        gl_Position = vec4(position, 1, 1);
-      }
-    `,
-
-      depth: {
-        enable: false,
-      },
-
-      frag: `
-      precision mediump float;
-      varying vec3 vColor;
-      varying float vParity;
-
-      void main() {
-        gl_FragColor = vec4(vColor.rgb, 1);
-      }
-    `,
-
-      attributes: {
-        // Non-instanced attributes
-        corner: gl.buffer([[0, 0], [1, 0], [0, 1], [1, 1]]),
-
-        // Instanced attributes
-        configSpaceOffset: (context, props) => {
-          return {
-            buffer: props.batch.getConfigSpaceOffsetBuffer(),
-            offset: 0,
-            stride: 2 * 4,
-            size: 2,
-            divisor: 1,
-          }
-        },
-        configSpaceSize: (context, props) => {
-          return {
-            buffer: props.batch.getConfigSpaceSizeBuffer(),
-            offset: 0,
-            stride: 2 * 4,
-            size: 2,
-            divisor: 1,
-          }
-        },
-        color: (context, props) => {
-          return {
-            buffer: props.batch.getColorBuffer(),
-            offset: 0,
-            stride: 3 * 4,
-            size: 3,
-            divisor: 1,
-          }
-        },
-      },
-
-      uniforms: {
-        configSpaceToNDC: (context, props) => {
-          const configToPhysical = AffineTransform.betweenRects(
-            props.configSpaceSrcRect,
-            props.physicalSpaceDstRect,
-          )
-
-          const viewportSize = new Vec2(context.viewportWidth, context.viewportHeight)
-
-          const physicalToNDC = AffineTransform.withTranslation(new Vec2(-1, 1)).times(
-            AffineTransform.withScale(new Vec2(2, -2).dividedByPointwise(viewportSize)),
-          )
-
-          return physicalToNDC.times(configToPhysical).flatten()
-        },
-
-        parityOffset: (context, props) => {
-          return props.parityOffset == null ? 0 : props.parityOffset
-        },
-
-        parityMin: (context, props) => {
-          return props.parityMin == null ? 0 : 1 + props.parityMin
-        },
-      },
-
-      instances: (context, props) => {
-        return props.batch.getRectCount()
-      },
-
-      count: 4,
-
-      primitive: 'triangle strip',
-    })
+  material: Graphics.Material
+  constructor(private gl: Graphics.Context) {
+    this.material = gl.createMaterial(vertexFormat, vert, frag)
   }
 
   render(props: RectangleBatchRendererProps) {
-    this.command(props)
-  }
+    setUniformAffineTransform(
+      this.material,
+      'configSpaceToNDC',
+      (() => {
+        const configToPhysical = AffineTransform.betweenRects(
+          props.configSpaceSrcRect,
+          props.physicalSpaceDstRect,
+        )
 
-  resetStats() {
-    return Object.assign(this.command.stats, {cpuTime: 0, gpuTime: 0, count: 0})
-  }
-  stats() {
-    return this.command.stats
+        const viewportSize = new Vec2(this.gl.viewport.width, this.gl.viewport.height)
+
+        const physicalToNDC = AffineTransform.withTranslation(new Vec2(-1, 1)).times(
+          AffineTransform.withScale(new Vec2(2, -2).dividedByPointwise(viewportSize)),
+        )
+
+        return physicalToNDC.times(configToPhysical)
+      })(),
+    )
+
+    this.gl.setUnpremultipliedBlendState()
+    this.gl.draw(Graphics.Primitive.TRIANGLES, this.material, props.batch.getBuffer())
   }
 }

src/gl/row-atlas.ts

@@ -1,31 +1,34 @@
-import regl from 'regl'
 import {LRUCache} from '../lib/lru-cache'
-import {RectangleBatch} from './rectangle-batch-renderer'
-import {CanvasContext} from './canvas-context'
+import {RectangleBatch, RectangleBatchRenderer} from './rectangle-batch-renderer'
 import {Rect, Vec2} from '../lib/math'
 import {Color} from '../lib/color'
+import {Graphics} from './graphics'
+import {TextureRenderer} from './texture-renderer'
+import {renderInto} from './utils'
 
 export class RowAtlas<K> {
-  texture: regl.Texture
-  private framebuffer: regl.Framebuffer
-  private renderToFramebuffer: regl.Command<{}>
+  private texture: Graphics.Texture
+  private renderTarget: Graphics.RenderTarget
   private rowCache: LRUCache<K, number>
   private clearLineBatch: RectangleBatch
 
-  constructor(private canvasContext: CanvasContext) {
-    this.texture = canvasContext.gl.texture({
-      width: Math.min(canvasContext.getMaxTextureSize(), 4096),
-      height: Math.min(canvasContext.getMaxTextureSize(), 4096),
-      wrapS: 'clamp',
-      wrapT: 'clamp',
-    })
-    this.framebuffer = canvasContext.gl.framebuffer({color: [this.texture]})
+  constructor(
+    private gl: Graphics.Context,
+    private rectangleBatchRenderer: RectangleBatchRenderer,
+    private textureRenderer: TextureRenderer,
+  ) {
+    this.texture = gl.createTexture(Graphics.TextureFormat.NEAREST_CLAMP, 4096, 4096)
+    this.renderTarget = gl.createRenderTarget(this.texture)
     this.rowCache = new LRUCache(this.texture.height)
-    this.renderToFramebuffer = canvasContext.gl({
-      framebuffer: this.framebuffer,
-    })
-    this.clearLineBatch = canvasContext.createRectangleBatch()
+    this.clearLineBatch = new RectangleBatch(gl)
     this.clearLineBatch.addRect(Rect.unit, new Color(0, 0, 0, 0))
+
+    // All of the cached data is stored GPU-side, and we don't retain a copy of
+    // it client-side. This means when we get a context loss event, the data is
+    // totally gone. So let's clear our CPU-side cache to reflect that fact.
+    gl.addContextResetHandler(() => {
+      this.rowCache.clear()
+    })
   }
 
   has(key: K) {
@@ -53,7 +56,7 @@ export class RowAtlas<K> {
   }
 
   writeToAtlasIfNeeded(keys: K[], render: (textureDstRect: Rect, key: K) => void) {
-    this.renderToFramebuffer((context: regl.Context) => {
+    renderInto(this.gl, this.renderTarget, () => {
       for (let key of keys) {
         let row = this.rowCache.get(key)
         if (row != null) {
@@ -64,7 +67,7 @@ export class RowAtlas<K> {
         row = this.allocateLine(key)
 
         const textureRect = new Rect(new Vec2(0, row), new Vec2(this.texture.width, 1))
-        this.canvasContext.drawRectangleBatch({
+        this.rectangleBatchRenderer.render({
           batch: this.clearLineBatch,
           configSpaceSrcRect: Rect.unit,
           physicalSpaceDstRect: textureRect,
@@ -84,7 +87,7 @@ export class RowAtlas<K> {
 
     // At this point, we have the row in cache, and we can
     // paint directly from it into the framebuffer.
-    this.canvasContext.drawTexture({
+    this.textureRenderer.render({
       texture: this.texture,
       srcRect: textureRect,
       dstRect: dstRect,

src/gl/texture-cached-renderer.ts

@@ -1,183 +0,0 @@
-import regl from 'regl'
-import {Vec2, Rect, AffineTransform} from '../lib/math'
-
-export interface TextureRendererProps {
-  texture: regl.Texture
-  srcRect: Rect
-  dstRect: Rect
-}
-
-export class TextureRenderer {
-  private command: regl.Command<TextureRendererProps>
-  constructor(gl: regl.Instance) {
-    this.command = gl({
-      vert: `
-        uniform mat3 uvTransform;
-        uniform mat3 positionTransform;
-
-        attribute vec2 position;
-        attribute vec2 uv;
-        varying vec2 vUv;
-
-        void main() {
-          vUv = (uvTransform * vec3(uv, 1)).xy;
-          gl_Position = vec4((positionTransform * vec3(position, 1)).xy, 0, 1);
-        }
-      `,
-      frag: `
-        precision mediump float;
-
-        varying vec2 vUv;
-        uniform sampler2D texture;
-
-        void main() {
-          gl_FragColor = texture2D(texture, vUv);
-        }
-      `,
-
-      depth: {
-        enable: false,
-      },
-
-      attributes: {
-        // Cover full canvas with a rectangle
-        // with 2 triangles using a triangle
-        // strip.
-        //
-        // 0 +--+ 1
-        //   | /|
-        //   |/ |
-        // 2 +--+ 3
-        position: gl.buffer([[-1, 1], [1, 1], [-1, -1], [1, -1]]),
-        uv: gl.buffer([[0, 1], [1, 1], [0, 0], [1, 0]]),
-      },
-
-      uniforms: {
-        texture: (context, props) => props.texture,
-        uvTransform: (context, props) => {
-          const {srcRect, texture} = props
-          const physicalToUV = AffineTransform.withTranslation(new Vec2(0, 1))
-            .times(AffineTransform.withScale(new Vec2(1, -1)))
-            .times(
-              AffineTransform.betweenRects(
-                new Rect(Vec2.zero, new Vec2(texture.width, texture.height)),
-                Rect.unit,
-              ),
-            )
-          const uvRect = physicalToUV.transformRect(srcRect)
-          return AffineTransform.betweenRects(Rect.unit, uvRect).flatten()
-        },
-        positionTransform: (context, props) => {
-          const {dstRect} = props
-
-          const viewportSize = new Vec2(context.viewportWidth, context.viewportHeight)
-
-          const physicalToNDC = AffineTransform.withScale(new Vec2(1, -1)).times(
-            AffineTransform.betweenRects(new Rect(Vec2.zero, viewportSize), Rect.NDC),
-          )
-          const ndcRect = physicalToNDC.transformRect(dstRect)
-          return AffineTransform.betweenRects(Rect.NDC, ndcRect).flatten()
-        },
-      },
-
-      primitive: 'triangle strip',
-
-      count: 4,
-    })
-  }
-
-  render(props: TextureRendererProps) {
-    this.command(props)
-  }
-
-  resetStats() {
-    return Object.assign(this.command.stats, {cpuTime: 0, gpuTime: 0, count: 0})
-  }
-  stats() {
-    return this.command.stats
-  }
-}
-
-export interface TextureCachedRendererOptions<T> {
-  textureRenderer: TextureRenderer
-  render(t: T): void
-  shouldUpdate(oldProps: T, newProps: T): boolean
-}
-
-export class TextureCachedRenderer<T> {
-  private renderUncached: (t: T) => void
-  private shouldUpdate: (oldProps: T, newProps: T) => boolean
-  private texture: regl.Texture
-  private framebuffer: regl.Framebuffer
-  private textureRenderer: TextureRenderer
-  private withContext: regl.Command<{}>
-
-  constructor(private gl: regl.Instance, options: TextureCachedRendererOptions<T>) {
-    this.renderUncached = options.render
-    this.shouldUpdate = options.shouldUpdate
-    this.textureRenderer = options.textureRenderer
-
-    this.texture = gl.texture(1, 1)
-    this.framebuffer = gl.framebuffer({color: [this.texture]})
-    this.withContext = gl({})
-  }
-
-  private lastRenderProps: T | null = null
-
-  private dirty: boolean = false
-  setDirty() {
-    this.dirty = true
-  }
-
-  render(props: T) {
-    this.withContext((context: regl.Context) => {
-      let needsRender = false
-      if (
-        this.texture.width !== context.viewportWidth ||
-        this.texture.height !== context.viewportHeight
-      ) {
-        // TODO(jlfwong): Can probably just use this.framebuffer.resize
-        this.texture({width: context.viewportWidth, height: context.viewportHeight})
-        this.framebuffer({color: [this.texture]})
-        needsRender = true
-      } else if (this.lastRenderProps == null) {
-        needsRender = true
-      } else if (this.shouldUpdate(this.lastRenderProps, props)) {
-        needsRender = true
-      } else if (this.dirty) {
-        needsRender = true
-      }
-
-      if (needsRender) {
-        this.gl({
-          viewport: (context, props) => {
-            return {
-              x: 0,
-              y: 0,
-              width: context.viewportWidth,
-              height: context.viewportHeight,
-            }
-          },
-          framebuffer: this.framebuffer,
-        })(() => {
-          this.gl.clear({color: [0, 0, 0, 0]})
-          this.renderUncached(props)
-        })
-      }
-
-      const glViewportRect = new Rect(
-        Vec2.zero,
-        new Vec2(context.viewportWidth, context.viewportHeight),
-      )
-
-      // Render from texture
-      this.textureRenderer.render({
-        texture: this.texture,
-        srcRect: glViewportRect,
-        dstRect: glViewportRect,
-      })
-      this.lastRenderProps = props
-      this.dirty = false
-    })
-  }
-}

src/gl/texture-renderer.ts

@@ -0,0 +1,109 @@
+import {Vec2, Rect, AffineTransform} from '../lib/math'
+import {Graphics} from './graphics'
+import {setUniformAffineTransform} from './utils'
+
+export interface TextureRendererProps {
+  texture: Graphics.Texture
+  srcRect: Rect
+  dstRect: Rect
+}
+
+const vert = `
+  uniform mat3 uvTransform;
+  uniform mat3 positionTransform;
+
+  attribute vec2 position;
+  attribute vec2 uv;
+  varying vec2 vUv;
+
+  void main() {
+    vUv = (uvTransform * vec3(uv, 1)).xy;
+    gl_Position = vec4((positionTransform * vec3(position, 1)).xy, 0, 1);
+  }
+`
+
+const frag = `
+  precision mediump float;
+
+  varying vec2 vUv;
+  uniform sampler2D texture;
+
+  void main() {
+   gl_FragColor = texture2D(texture, vUv);
+  }
+`
+
+export interface TextureRendererProps {
+  texture: Graphics.Texture
+  srcRect: Rect
+  dstRect: Rect
+}
+
+export class TextureRenderer {
+  private buffer: Graphics.VertexBuffer
+  private material: Graphics.Material
+
+  constructor(private gl: Graphics.Context) {
+    const vertexFormat = new Graphics.VertexFormat()
+    vertexFormat.add('position', Graphics.AttributeType.FLOAT, 2)
+    vertexFormat.add('uv', Graphics.AttributeType.FLOAT, 2)
+
+    const vertices = [
+      {pos: [-1, 1], uv: [0, 1]},
+      {pos: [1, 1], uv: [1, 1]},
+      {pos: [-1, -1], uv: [0, 0]},
+      {pos: [1, -1], uv: [1, 0]},
+    ]
+    const floats: number[] = []
+    for (let v of vertices) {
+      floats.push(v.pos[0])
+      floats.push(v.pos[1])
+      floats.push(v.uv[0])
+      floats.push(v.uv[1])
+    }
+
+    this.buffer = gl.createVertexBuffer(vertexFormat.stride * vertices.length)
+    this.buffer.upload(new Uint8Array(new Float32Array(floats).buffer))
+    this.material = gl.createMaterial(vertexFormat, vert, frag)
+  }
+
+  render(props: TextureRendererProps) {
+    this.material.setUniformSampler('texture', props.texture, 0)
+    setUniformAffineTransform(
+      this.material,
+      'uvTransform',
+      (() => {
+        const {srcRect, texture} = props
+        const physicalToUV = AffineTransform.withTranslation(new Vec2(0, 1))
+          .times(AffineTransform.withScale(new Vec2(1, -1)))
+          .times(
+            AffineTransform.betweenRects(
+              new Rect(Vec2.zero, new Vec2(texture.width, texture.height)),
+              Rect.unit,
+            ),
+          )
+        const uvRect = physicalToUV.transformRect(srcRect)
+        return AffineTransform.betweenRects(Rect.unit, uvRect)
+      })(),
+    )
+    setUniformAffineTransform(
+      this.material,
+      'positionTransform',
+      (() => {
+        const {dstRect} = props
+
+        const {viewport} = this.gl
+        const viewportSize = new Vec2(viewport.width, viewport.height)
+
+        const physicalToNDC = AffineTransform.withScale(new Vec2(1, -1)).times(
+          AffineTransform.betweenRects(new Rect(Vec2.zero, viewportSize), Rect.NDC),
+        )
+        const ndcRect = physicalToNDC.transformRect(dstRect)
+        return AffineTransform.betweenRects(Rect.NDC, ndcRect)
+      })(),
+    )
+
+    this.gl.setUnpremultipliedBlendState()
+    this.gl.draw(Graphics.Primitive.TRIANGLE_STRIP, this.material, this.buffer)
+  }
+}

src/gl/utils.ts

@@ -0,0 +1,21 @@
+import {Graphics} from './graphics'
+import {AffineTransform, Vec2} from '../lib/math'
+
+export function setUniformAffineTransform(
+  material: Graphics.Material,
+  name: string,
+  transform: AffineTransform,
+) {
+  let {m00, m01, m02, m10, m11, m12} = transform
+  material.setUniformMat3(name, m00, m01, m02, m10, m11, m12, 0, 0, 1)
+}
+export function setUniformVec2(material: Graphics.Material, name: string, vec: Vec2) {
+  material.setUniformVec2(name, vec.x, vec.y)
+}
+
+export function renderInto(gl: Graphics.Context, target: Graphics.RenderTarget, cb: () => void) {
+  gl.setRenderTarget(target)
+  gl.setViewport(0, 0, target.texture.width, target.texture.height)
+  cb()
+  gl.setRenderTarget(null)
+}

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

@@ -50,6 +50,60 @@ Object {
 }
 `;
 
+exports[`importFromBGFlameGraph with CRLF 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-crlf.txt",
+  "stacks": Array [
+    "a;b;c 2",
+    "a;b;d 4",
+    "a;b;c 3",
+    "a;b 5",
+  ],
+}
+`;
+
+exports[`importFromBGFlameGraph with CRLF: indexToView 1`] = `0`;
+
+exports[`importFromBGFlameGraph with CRLF: profileGroup.name 1`] = `"simple-crlf.txt"`;
+
 exports[`importFromBGFlameGraph: indexToView 1`] = `0`;
 
 exports[`importFromBGFlameGraph: profileGroup.name 1`] = `"simple.txt"`;

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

@@ -42,6 +42,7 @@ Object {
   ],
   "name": "simple-firefox.json",
   "stacks": Array [
+    " 2.04ms",
     "a;b;d 989.53µs",
     "a;c;d 1.02ms",
     "a;b;d 982.04µs",
@@ -59,6 +60,71 @@ Object {
 }
 `;
 
+exports[`importFromFirefox ignore self-hosted 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": "http://localhost:8000/simple.js:1",
+      "key": "alpha (http://localhost:8000/simple.js:1:14)",
+      "line": 14,
+      "name": "alpha",
+      "selfWeight": 0,
+      "totalWeight": 26.983816999942064,
+    },
+    Frame {
+      "col": undefined,
+      "file": "http://localhost:8000/simple.js:14",
+      "key": "delta (http://localhost:8000/simple.js:14:14)",
+      "line": 14,
+      "name": "delta",
+      "selfWeight": 0,
+      "totalWeight": 11.946324001066387,
+    },
+    Frame {
+      "col": undefined,
+      "file": "http://localhost:8000/simple.js:20",
+      "key": "gamma (http://localhost:8000/simple.js:20:14)",
+      "line": 14,
+      "name": "gamma",
+      "selfWeight": 26.983816999942064,
+      "totalWeight": 26.983816999942064,
+    },
+    Frame {
+      "col": undefined,
+      "file": "http://localhost:8000/simple.js:8",
+      "key": "beta (http://localhost:8000/simple.js:8:13)",
+      "line": 13,
+      "name": "beta",
+      "selfWeight": 0,
+      "totalWeight": 15.037492998875678,
+    },
+  ],
+  "name": "simple-firefox.json",
+  "stacks": Array [
+    " 4.61ms",
+    "alpha;delta;gamma 999.57µs",
+    "alpha;beta;gamma 2.01ms",
+    "alpha;delta;gamma 1.00ms",
+    "alpha;beta;gamma 995.68µs",
+    "alpha;delta;gamma 996.27µs",
+    "alpha;beta;gamma 4.01ms",
+    "alpha;delta;gamma 2.02ms",
+    "alpha;beta;gamma 959.44µs",
+    "alpha;delta;gamma 2.01ms",
+    "alpha;beta;gamma 4.01ms",
+    "alpha;delta;gamma 959.28µs",
+    "alpha;beta;gamma 2.03ms",
+    "alpha;delta;gamma 3.96ms",
+    "alpha;beta;gamma 1.02ms",
+  ],
+}
+`;
+
+exports[`importFromFirefox ignore self-hosted: indexToView 1`] = `0`;
+
+exports[`importFromFirefox ignore self-hosted: profileGroup.name 1`] = `"simple-firefox.json"`;
+
 exports[`importFromFirefox recursion 1`] = `
 Object {
   "frames": Array [
@@ -110,6 +176,7 @@ Object {
   ],
   "name": "recursion.json",
   "stacks": Array [
+    " 1.71ms",
     "main;alpha;beta;alpha;beta;alpha;beta;alpha;delta;gamma 998.89µs",
     "main 1.19ms",
     "main;alpha;beta;alpha;delta;gamma 1.83ms",

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

@@ -0,0 +1,864 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`importFromHaskell 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 144,
+      "line": undefined,
+      "name": "MAIN.MAIN",
+      "selfWeight": 0,
+      "totalWeight": 798,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 56,
+      "line": undefined,
+      "name": "GHC.Conc.Signal.CAF",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 73,
+      "line": undefined,
+      "name": "GHC.IO.Encoding.CAF",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 75,
+      "line": undefined,
+      "name": "GHC.IO.Encoding.Iconv.CAF",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 84,
+      "line": undefined,
+      "name": "GHC.IO.Handle.FD.CAF",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 119,
+      "line": undefined,
+      "name": "Text.Printf.CAF",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 26,
+      "line": undefined,
+      "name": "Main.CAF:eta1_r6nI",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:(21,1)-(38,42)",
+      "key": 19,
+      "line": undefined,
+      "name": "Main.main",
+      "selfWeight": 0,
+      "totalWeight": 733,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:(56,1)-(57,42)",
+      "key": 4,
+      "line": undefined,
+      "name": "Main.check",
+      "selfWeight": 320,
+      "totalWeight": 320,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:31:9-29",
+      "key": 16,
+      "line": undefined,
+      "name": "Main.main.long",
+      "selfWeight": 0,
+      "totalWeight": 3,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 28,
+      "line": undefined,
+      "name": "Main.CAF:eta_r6nG",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 35,
+      "line": undefined,
+      "name": "Main.CAF:io1",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 27,
+      "line": undefined,
+      "name": "Main.CAF:lvl2_r6nH",
+      "selfWeight": 0,
+      "totalWeight": 3,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:(61,1)-(63,26)",
+      "key": 3,
+      "line": undefined,
+      "name": "Main.make",
+      "selfWeight": 406,
+      "totalWeight": 409,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:63:19-26",
+      "key": 1,
+      "line": undefined,
+      "name": "Main.make.d2",
+      "selfWeight": 2,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:63:9-16",
+      "key": 2,
+      "line": undefined,
+      "name": "Main.make.i2",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 24,
+      "line": undefined,
+      "name": "Main.CAF:lvl4_r6nL",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 22,
+      "line": undefined,
+      "name": "Main.CAF:lvl8_r6nP",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 21,
+      "line": undefined,
+      "name": "Main.CAF:main1",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 29,
+      "line": undefined,
+      "name": "Main.CAF:main11",
+      "selfWeight": 0,
+      "totalWeight": 4,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:27:9-35",
+      "key": 15,
+      "line": undefined,
+      "name": "Main.main.c",
+      "selfWeight": 0,
+      "totalWeight": 8,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 30,
+      "line": undefined,
+      "name": "Main.CAF:main12",
+      "selfWeight": 0,
+      "totalWeight": 4,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 23,
+      "line": undefined,
+      "name": "Main.CAF:main5",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 31,
+      "line": undefined,
+      "name": "Main.CAF:main7",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 25,
+      "line": undefined,
+      "name": "Main.CAF:main9",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:23:9-12",
+      "key": 33,
+      "line": undefined,
+      "name": "Main.CAF:main_maxN",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:23:9-35",
+      "key": 13,
+      "line": undefined,
+      "name": "Main.main.maxN",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:22:9",
+      "key": 34,
+      "line": undefined,
+      "name": "Main.CAF:main_n",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:22:9-14",
+      "key": 12,
+      "line": undefined,
+      "name": "Main.main.n",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:24:9-16",
+      "key": 32,
+      "line": undefined,
+      "name": "Main.CAF:main_stretchN",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:24:9-27",
+      "key": 14,
+      "line": undefined,
+      "name": "Main.main.stretchN",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:17:1-4",
+      "key": 36,
+      "line": undefined,
+      "name": "Main.CAF:minN",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:17:1-8",
+      "key": 9,
+      "line": undefined,
+      "name": "Main.minN",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 146,
+      "line": undefined,
+      "name": "GC.GC",
+      "selfWeight": 46,
+      "totalWeight": 46,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 147,
+      "line": undefined,
+      "name": "PROFILING.OVERHEAD_of",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 145,
+      "line": undefined,
+      "name": "SYSTEM.SYSTEM",
+      "selfWeight": 19,
+      "totalWeight": 19,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:35:26-54",
+      "key": 18,
+      "line": undefined,
+      "name": "Main.main.\\\\",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:19:1-56",
+      "key": 8,
+      "line": undefined,
+      "name": "Main.io",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:34:9-28",
+      "key": 17,
+      "line": undefined,
+      "name": "Main.main.vs",
+      "selfWeight": 0,
+      "totalWeight": 721,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:(42,1)-(45,38)",
+      "key": 11,
+      "line": undefined,
+      "name": "Main.depth",
+      "selfWeight": 0,
+      "totalWeight": 721,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:(49,1)-(52,31)",
+      "key": 7,
+      "line": undefined,
+      "name": "Main.sumT",
+      "selfWeight": 0,
+      "totalWeight": 721,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:51:9-31",
+      "key": 6,
+      "line": undefined,
+      "name": "Main.sumT.a",
+      "selfWeight": 3,
+      "totalWeight": 369,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:52:9-31",
+      "key": 5,
+      "line": undefined,
+      "name": "Main.sumT.b",
+      "selfWeight": 1,
+      "totalWeight": 352,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:45:9-38",
+      "key": 10,
+      "line": undefined,
+      "name": "Main.depth.n",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+  ],
+  "name": "binary-trees time",
+  "stacks": Array [
+    "MAIN.MAIN;Main.CAF:eta1_r6nI;Main.main;Main.check 1.00ms",
+    "MAIN.MAIN;Main.CAF:lvl2_r6nH;Main.main;Main.main.long;Main.make 3.00ms",
+    "MAIN.MAIN;Main.CAF:main11;Main.main;Main.main.c;Main.check 4.00ms",
+    "MAIN.MAIN;Main.CAF:main12;Main.main;Main.main.c;Main.make 4.00ms",
+    "MAIN.MAIN;GC.GC 46.00ms",
+    "MAIN.MAIN;SYSTEM.SYSTEM 19.00ms",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.a;Main.check 153.00ms",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.a;Main.make;Main.make.d2 2.00ms",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.a;Main.make;Main.make.i2 1.00ms",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.a;Main.make 210.00ms",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.a 3.00ms",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.b;Main.check 162.00ms",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.b;Main.make 189.00ms",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.b 1.00ms",
+  ],
+}
+`;
+
+exports[`importFromHaskell 2`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 144,
+      "line": undefined,
+      "name": "MAIN.MAIN",
+      "selfWeight": 648,
+      "totalWeight": 1921672664,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 56,
+      "line": undefined,
+      "name": "GHC.Conc.Signal.CAF",
+      "selfWeight": 640,
+      "totalWeight": 640,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 73,
+      "line": undefined,
+      "name": "GHC.IO.Encoding.CAF",
+      "selfWeight": 2768,
+      "totalWeight": 2768,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 75,
+      "line": undefined,
+      "name": "GHC.IO.Encoding.Iconv.CAF",
+      "selfWeight": 200,
+      "totalWeight": 200,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 84,
+      "line": undefined,
+      "name": "GHC.IO.Handle.FD.CAF",
+      "selfWeight": 34704,
+      "totalWeight": 34704,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 119,
+      "line": undefined,
+      "name": "Text.Printf.CAF",
+      "selfWeight": 528,
+      "totalWeight": 528,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 26,
+      "line": undefined,
+      "name": "Main.CAF:eta1_r6nI",
+      "selfWeight": 0,
+      "totalWeight": 2097152,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:(21,1)-(38,42)",
+      "key": 19,
+      "line": undefined,
+      "name": "Main.main",
+      "selfWeight": 32,
+      "totalWeight": 1921591544,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:(56,1)-(57,42)",
+      "key": 4,
+      "line": undefined,
+      "name": "Main.check",
+      "selfWeight": 406149056,
+      "totalWeight": 406149056,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:31:9-29",
+      "key": 16,
+      "line": undefined,
+      "name": "Main.main.long",
+      "selfWeight": 32,
+      "totalWeight": 7864112,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 28,
+      "line": undefined,
+      "name": "Main.CAF:eta_r6nG",
+      "selfWeight": 1096,
+      "totalWeight": 1096,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 35,
+      "line": undefined,
+      "name": "Main.CAF:io1",
+      "selfWeight": 1888,
+      "totalWeight": 1888,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 27,
+      "line": undefined,
+      "name": "Main.CAF:lvl2_r6nH",
+      "selfWeight": 0,
+      "totalWeight": 7864112,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:(61,1)-(63,26)",
+      "key": 3,
+      "line": undefined,
+      "name": "Main.make",
+      "selfWeight": 1512575520,
+      "totalWeight": 1512575520,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:63:19-26",
+      "key": 1,
+      "line": undefined,
+      "name": "Main.make.d2",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:63:9-16",
+      "key": 2,
+      "line": undefined,
+      "name": "Main.make.i2",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 24,
+      "line": undefined,
+      "name": "Main.CAF:lvl4_r6nL",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 22,
+      "line": undefined,
+      "name": "Main.CAF:lvl8_r6nP",
+      "selfWeight": 520,
+      "totalWeight": 520,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 21,
+      "line": undefined,
+      "name": "Main.CAF:main1",
+      "selfWeight": 16,
+      "totalWeight": 16,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 29,
+      "line": undefined,
+      "name": "Main.CAF:main11",
+      "selfWeight": 0,
+      "totalWeight": 4194304,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:27:9-35",
+      "key": 15,
+      "line": undefined,
+      "name": "Main.main.c",
+      "selfWeight": 64,
+      "totalWeight": 19922736,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 30,
+      "line": undefined,
+      "name": "Main.CAF:main12",
+      "selfWeight": 0,
+      "totalWeight": 15728432,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 23,
+      "line": undefined,
+      "name": "Main.CAF:main5",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 31,
+      "line": undefined,
+      "name": "Main.CAF:main7",
+      "selfWeight": 880,
+      "totalWeight": 880,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 25,
+      "line": undefined,
+      "name": "Main.CAF:main9",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:23:9-12",
+      "key": 33,
+      "line": undefined,
+      "name": "Main.CAF:main_maxN",
+      "selfWeight": 0,
+      "totalWeight": 32,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:23:9-35",
+      "key": 13,
+      "line": undefined,
+      "name": "Main.main.maxN",
+      "selfWeight": 32,
+      "totalWeight": 32,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:22:9",
+      "key": 34,
+      "line": undefined,
+      "name": "Main.CAF:main_n",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:22:9-14",
+      "key": 12,
+      "line": undefined,
+      "name": "Main.main.n",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:24:9-16",
+      "key": 32,
+      "line": undefined,
+      "name": "Main.CAF:main_stretchN",
+      "selfWeight": 0,
+      "totalWeight": 32,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:24:9-27",
+      "key": 14,
+      "line": undefined,
+      "name": "Main.main.stretchN",
+      "selfWeight": 32,
+      "totalWeight": 32,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:17:1-4",
+      "key": 36,
+      "line": undefined,
+      "name": "Main.CAF:minN",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:17:1-8",
+      "key": 9,
+      "line": undefined,
+      "name": "Main.minN",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 146,
+      "line": undefined,
+      "name": "GC.GC",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 147,
+      "line": undefined,
+      "name": "PROFILING.OVERHEAD_of",
+      "selfWeight": 2496,
+      "totalWeight": 2496,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": 145,
+      "line": undefined,
+      "name": "SYSTEM.SYSTEM",
+      "selfWeight": 34736,
+      "totalWeight": 34736,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:35:26-54",
+      "key": 18,
+      "line": undefined,
+      "name": "Main.main.\\\\",
+      "selfWeight": 2224,
+      "totalWeight": 46672,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:19:1-56",
+      "key": 8,
+      "line": undefined,
+      "name": "Main.io",
+      "selfWeight": 67912,
+      "totalWeight": 67912,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:34:9-28",
+      "key": 17,
+      "line": undefined,
+      "name": "Main.main.vs",
+      "selfWeight": 0,
+      "totalWeight": 1891637344,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:(42,1)-(45,38)",
+      "key": 11,
+      "line": undefined,
+      "name": "Main.depth",
+      "selfWeight": 1120,
+      "totalWeight": 1891637344,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:(49,1)-(52,31)",
+      "key": 7,
+      "line": undefined,
+      "name": "Main.sumT",
+      "selfWeight": 0,
+      "totalWeight": 1891636224,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:51:9-31",
+      "key": 6,
+      "line": undefined,
+      "name": "Main.sumT.a",
+      "selfWeight": 1397760,
+      "totalWeight": 945818112,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:52:9-31",
+      "key": 5,
+      "line": undefined,
+      "name": "Main.sumT.b",
+      "selfWeight": 1397760,
+      "totalWeight": 945818112,
+    },
+    Frame {
+      "col": undefined,
+      "file": "src/Main.hs:45:9-38",
+      "key": 10,
+      "line": undefined,
+      "name": "Main.depth.n",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+  ],
+  "name": "binary-trees allocation",
+  "stacks": Array [
+    "MAIN.MAIN;GHC.Conc.Signal.CAF 640 B",
+    "MAIN.MAIN;GHC.IO.Encoding.CAF 2.70 KB",
+    "MAIN.MAIN;GHC.IO.Encoding.Iconv.CAF 200 B",
+    "MAIN.MAIN;GHC.IO.Handle.FD.CAF 33.89 KB",
+    "MAIN.MAIN;Text.Printf.CAF 528 B",
+    "MAIN.MAIN;Main.CAF:eta1_r6nI;Main.main;Main.check 2.00 MB",
+    "MAIN.MAIN;Main.CAF:eta1_r6nI;Main.main 32 B",
+    "MAIN.MAIN;Main.CAF:eta_r6nG 1.07 KB",
+    "MAIN.MAIN;Main.CAF:io1 1.84 KB",
+    "MAIN.MAIN;Main.CAF:lvl2_r6nH;Main.main;Main.main.long;Main.make 7.50 MB",
+    "MAIN.MAIN;Main.CAF:lvl2_r6nH;Main.main;Main.main.long 32 B",
+    "MAIN.MAIN;Main.CAF:lvl8_r6nP 520 B",
+    "MAIN.MAIN;Main.CAF:main1 16 B",
+    "MAIN.MAIN;Main.CAF:main11;Main.main;Main.main.c;Main.check 4.00 MB",
+    "MAIN.MAIN;Main.CAF:main11;Main.main;Main.main.c 32 B",
+    "MAIN.MAIN;Main.CAF:main12;Main.main;Main.main.c;Main.make 15.00 MB",
+    "MAIN.MAIN;Main.CAF:main12;Main.main;Main.main.c 32 B",
+    "MAIN.MAIN;Main.CAF:main7 880 B",
+    "MAIN.MAIN;Main.CAF:main_maxN;Main.main;Main.main.maxN 32 B",
+    "MAIN.MAIN;Main.CAF:main_stretchN;Main.main;Main.main.stretchN 32 B",
+    "MAIN.MAIN;PROFILING.OVERHEAD_of 2.44 KB",
+    "MAIN.MAIN;SYSTEM.SYSTEM 33.92 KB",
+    "MAIN.MAIN;Main.main;Main.main.\\\\;Main.io 43.41 KB",
+    "MAIN.MAIN;Main.main;Main.main.\\\\ 2.17 KB",
+    "MAIN.MAIN;Main.main;Main.io 22.91 KB",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.a;Main.check 190.67 MB",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.a;Main.make 710.00 MB",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.a 1.33 MB",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.b;Main.check 190.67 MB",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.b;Main.make 710.00 MB",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth;Main.sumT;Main.sumT.b 1.33 MB",
+    "MAIN.MAIN;Main.main;Main.main.vs;Main.depth 1.09 KB",
+    "MAIN.MAIN 648 B",
+  ],
+}
+`;
+
+exports[`importFromHaskell: indexToView 1`] = `0`;
+
+exports[`importFromHaskell: profileGroup.name 1`] = `"binary-trees"`;

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

@@ -0,0 +1,249 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`importAsPprofProfile 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go",
+      "key": "runtime.main:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go:0",
+      "line": 0,
+      "name": "runtime.main",
+      "selfWeight": 0,
+      "totalWeight": 136,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/Users/jlfwong/code/speedscope/sample/programs/go/simple.go",
+      "key": "main.main:/Users/jlfwong/code/speedscope/sample/programs/go/simple.go:0",
+      "line": 0,
+      "name": "main.main",
+      "selfWeight": 0,
+      "totalWeight": 136,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/Users/jlfwong/code/speedscope/sample/programs/go/simple.go",
+      "key": "main.delta:/Users/jlfwong/code/speedscope/sample/programs/go/simple.go:0",
+      "line": 0,
+      "name": "main.delta",
+      "selfWeight": 22,
+      "totalWeight": 58,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/Users/jlfwong/code/speedscope/sample/programs/go/simple.go",
+      "key": "main.beta:/Users/jlfwong/code/speedscope/sample/programs/go/simple.go:0",
+      "line": 0,
+      "name": "main.beta",
+      "selfWeight": 39,
+      "totalWeight": 39,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/Users/jlfwong/code/speedscope/sample/programs/go/simple.go",
+      "key": "main.alpha:/Users/jlfwong/code/speedscope/sample/programs/go/simple.go:0",
+      "line": 0,
+      "name": "main.alpha",
+      "selfWeight": 48,
+      "totalWeight": 48,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/Users/jlfwong/code/speedscope/sample/programs/go/simple.go",
+      "key": "main.gamma:/Users/jlfwong/code/speedscope/sample/programs/go/simple.go:0",
+      "line": 0,
+      "name": "main.gamma",
+      "selfWeight": 27,
+      "totalWeight": 27,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/asm_amd64.s",
+      "key": "runtime.morestack:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/asm_amd64.s:0",
+      "line": 0,
+      "name": "runtime.morestack",
+      "selfWeight": 0,
+      "totalWeight": 11,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/stack.go",
+      "key": "runtime.newstack:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/stack.go:0",
+      "line": 0,
+      "name": "runtime.newstack",
+      "selfWeight": 0,
+      "totalWeight": 11,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/duff_amd64.s",
+      "key": "runtime.duffcopy:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/duff_amd64.s:0",
+      "line": 0,
+      "name": "runtime.duffcopy",
+      "selfWeight": 11,
+      "totalWeight": 11,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/time.go",
+      "key": "runtime.timerproc:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/time.go:0",
+      "line": 0,
+      "name": "runtime.timerproc",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/time.go",
+      "key": "runtime.goroutineReady:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/time.go:0",
+      "line": 0,
+      "name": "runtime.goroutineReady",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go",
+      "key": "runtime.goready:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go:0",
+      "line": 0,
+      "name": "runtime.goready",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/asm_amd64.s",
+      "key": "runtime.systemstack:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/asm_amd64.s:0",
+      "line": 0,
+      "name": "runtime.systemstack",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go",
+      "key": "runtime.goready.func1:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go:0",
+      "line": 0,
+      "name": "runtime.goready.func1",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go",
+      "key": "runtime.ready:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go:0",
+      "line": 0,
+      "name": "runtime.ready",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go",
+      "key": "runtime.wakep:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go:0",
+      "line": 0,
+      "name": "runtime.wakep",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go",
+      "key": "runtime.startm:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go:0",
+      "line": 0,
+      "name": "runtime.startm",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/lock_sema.go",
+      "key": "runtime.notewakeup:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/lock_sema.go:0",
+      "line": 0,
+      "name": "runtime.notewakeup",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/os_darwin.go",
+      "key": "runtime.semawakeup:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/os_darwin.go:0",
+      "line": 0,
+      "name": "runtime.semawakeup",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/os_darwin.go",
+      "key": "runtime.mach_semrelease:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/os_darwin.go:0",
+      "line": 0,
+      "name": "runtime.mach_semrelease",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/sys_darwin_amd64.s",
+      "key": "runtime.mach_semaphore_signal:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/sys_darwin_amd64.s:0",
+      "line": 0,
+      "name": "runtime.mach_semaphore_signal",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go",
+      "key": "runtime.mstart:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go:0",
+      "line": 0,
+      "name": "runtime.mstart",
+      "selfWeight": 0,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go",
+      "key": "runtime.mstart1:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go:0",
+      "line": 0,
+      "name": "runtime.mstart1",
+      "selfWeight": 0,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go",
+      "key": "runtime.sysmon:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/proc.go:0",
+      "line": 0,
+      "name": "runtime.sysmon",
+      "selfWeight": 0,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": "/usr/local/Cellar/go/1.10.1/libexec/src/runtime/sys_darwin_amd64.s",
+      "key": "runtime.usleep:/usr/local/Cellar/go/1.10.1/libexec/src/runtime/sys_darwin_amd64.s:0",
+      "line": 0,
+      "name": "runtime.usleep",
+      "selfWeight": 2,
+      "totalWeight": 2,
+    },
+  ],
+  "name": "simple.prof",
+  "stacks": Array [
+    "runtime.main;main.main;main.delta;main.beta 14",
+    "runtime.main;main.main;main.alpha 26",
+    "runtime.main;main.main;main.gamma 27",
+    "runtime.morestack;runtime.newstack;runtime.duffcopy 11",
+    "runtime.main;main.main;main.beta 25",
+    "runtime.main;main.main;main.delta 22",
+    "runtime.main;main.main;main.delta;main.alpha 22",
+    "runtime.timerproc;runtime.goroutineReady;runtime.goready;runtime.systemstack;runtime.goready.func1;runtime.ready;runtime.wakep;runtime.startm;runtime.notewakeup;runtime.semawakeup;runtime.mach_semrelease;runtime.mach_semaphore_signal 1",
+    "runtime.mstart;runtime.mstart1;runtime.sysmon;runtime.usleep 2",
+  ],
+}
+`;
+
+exports[`importAsPprofProfile: indexToView 1`] = `0`;
+
+exports[`importAsPprofProfile: profileGroup.name 1`] = `"simple.prof"`;

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

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

src/import/bg-flamegraph.test.ts

@@ -3,3 +3,7 @@ import {checkProfileSnapshot} from '../lib/test-utils'
 test('importFromBGFlameGraph', async () => {
   await checkProfileSnapshot('./sample/profiles/stackcollapse/simple.txt')
 })
+
+test('importFromBGFlameGraph with CRLF', async () => {
+  await checkProfileSnapshot('./sample/profiles/stackcollapse/simple-crlf.txt')
+})

src/import/chrome.test.ts

@@ -7,3 +7,19 @@ test('importFromChromeCPUProfile', async () => {
 test('importFromChromeTimeline', async () => {
   await checkProfileSnapshot('./sample/profiles/Chrome/65/simple-timeline.json')
 })
+
+test('importFromChromeTimeline Chrome 69', async () => {
+  await checkProfileSnapshot('./sample/profiles/Chrome/69/simple.json')
+})
+
+test('importFromV8Profiler Node 10', async () => {
+  await checkProfileSnapshot('./sample/profiles/node/10.11.0/example.cpuprofile')
+})
+
+test('importFromChromeTimeline Workers Chrome 66', async () => {
+  await checkProfileSnapshot('./sample/profiles/Chrome/66/worker.json')
+})
+
+test('importFromChromeTimeline Workers Chrome 70', async () => {
+  await checkProfileSnapshot('./sample/profiles/Chrome/70/worker.json')
+})

src/import/chrome.ts

@@ -1,6 +1,9 @@
-import {Profile, FrameInfo, CallTreeProfileBuilder} from '../lib/profile'
-import {getOrInsert, lastOf} from '../lib/utils'
+import {Profile, FrameInfo, CallTreeProfileBuilder, ProfileGroup} from '../lib/profile'
+import {getOrInsert, lastOf, sortBy, itForEach} from '../lib/utils'
 import {TimeFormatter} from '../lib/value-formatters'
+import {chromeTreeToNodes, OldCPUProfile} from './v8cpuFormatter'
+
+// See: https://github.com/v8/v8/blob/master/src/inspector/js_protocol.json
 
 interface TimelineEvent {
   pid: number
@@ -13,6 +16,7 @@ interface TimelineEvent {
   tdur: number
   tts: number
   args: {[key: string]: any}
+  id?: string
 }
 
 interface PositionTickInfo {
@@ -28,7 +32,7 @@ interface CPUProfileCallFrame {
   url: string
 }
 
-interface CPUProfileNode {
+export interface CPUProfileNode {
   callFrame: CPUProfileCallFrame
   hitCount: number
   id: number
@@ -37,7 +41,7 @@ interface CPUProfileNode {
   parent?: CPUProfileNode
 }
 
-interface CPUProfile {
+export interface CPUProfile {
   startTime: number
   endTime: number
   nodes: CPUProfileNode[]
@@ -45,16 +49,120 @@ interface CPUProfile {
   timeDeltas: number[]
 }
 
-export function importFromChromeTimeline(events: TimelineEvent[]): Profile {
+export function isChromeTimeline(rawProfile: any): boolean {
+  if (!Array.isArray(rawProfile)) return false
+  if (rawProfile.length < 1) return false
+  const first = rawProfile[0]
+  if (!('pid' in first && 'tid' in first && 'ph' in first && 'cat' in first)) return false
+  if (
+    !rawProfile.find(
+      e => e.name === 'CpuProfile' || e.name === 'Profile' || e.name === 'ProfileChunk',
+    )
+  )
+    return false
+  return true
+}
+
+export function importFromChromeTimeline(events: TimelineEvent[], fileName: string): ProfileGroup {
   // It seems like sometimes Chrome timeline files contain multiple CpuProfiles?
   // For now, choose the first one in the list.
+
+  const cpuProfileByID = new Map<string, CPUProfile>()
+
+  // Maps profile IDs (like "0x3") to pid/tid pairs formatted as `${pid}:${tid}`
+  const pidTidById = new Map<string, string>()
+
+  // Maps pid/tid pairs to thread names
+  const threadNameByPidTid = new Map<string, string>()
+
+  // The events aren't necessarily recorded in chronological order. Sort them so
+  // that they are.
+  sortBy(events, e => e.ts)
+
   for (let event of events) {
-    if (event.name == 'CpuProfile') {
-      const chromeProfile = event.args.data.cpuProfile as CPUProfile
-      return importFromChromeCPUProfile(chromeProfile)
+    if (event.name === 'CpuProfile') {
+      const pidTid = `${event.pid}:${event.tid}`
+      const id = event.id || pidTid
+      cpuProfileByID.set(id, event.args.data.cpuProfile as CPUProfile)
+      pidTidById.set(id, pidTid)
+    }
+
+    if (event.name === 'Profile') {
+      const pidTid = `${event.pid}:${event.tid}`
+      cpuProfileByID.set(event.id || pidTid, {
+        startTime: 0,
+        endTime: 0,
+        nodes: [],
+        samples: [],
+        timeDeltas: [],
+        ...event.args.data,
+      })
+
+      if (event.id) {
+        pidTidById.set(event.id, `${event.pid}:${event.tid}`)
+      }
+    }
+
+    if (event.name === 'thread_name') {
+      threadNameByPidTid.set(`${event.pid}:${event.tid}`, event.args.name)
+    }
+
+    if (event.name === 'ProfileChunk') {
+      const pidTid = `${event.pid}:${event.tid}`
+      const cpuProfile = cpuProfileByID.get(event.id || pidTid)
+      if (cpuProfile) {
+        const chunk = event.args.data
+        if (chunk.cpuProfile) {
+          if (chunk.cpuProfile.nodes) {
+            cpuProfile.nodes = cpuProfile.nodes.concat(chunk.cpuProfile.nodes)
+          }
+          if (chunk.cpuProfile.samples) {
+            cpuProfile.samples = cpuProfile.samples.concat(chunk.cpuProfile.samples)
+          }
+        }
+        if (chunk.timeDeltas) {
+          cpuProfile.timeDeltas = cpuProfile.timeDeltas.concat(chunk.timeDeltas)
+        }
+        if (chunk.startTime != null) {
+          cpuProfile.startTime = chunk.startTime
+        }
+        if (chunk.endTime != null) {
+          cpuProfile.endTime = chunk.endTime
+        }
+      } else {
+        console.warn(`Ignoring ProfileChunk for undeclared Profile with id ${event.id || pidTid}`)
+      }
     }
   }
-  throw new Error('Could not find CPU profile in Timeline')
+
+  if (cpuProfileByID.size > 0) {
+    const profiles: Profile[] = []
+    let indexToView = 0
+
+    itForEach(cpuProfileByID.keys(), profileId => {
+      let threadName: string | null = null
+      let pidTid = pidTidById.get(profileId)
+      if (pidTid) {
+        threadName = threadNameByPidTid.get(pidTid) || null
+        if (threadName) {
+        }
+      }
+      const profile = importFromChromeCPUProfile(cpuProfileByID.get(profileId)!)
+      if (threadName && cpuProfileByID.size > 1) {
+        profile.setName(`${fileName} - ${threadName}`)
+        if (threadName === 'CrRendererMain') {
+          indexToView = profiles.length
+        }
+      } else {
+        profile.setName(`${fileName}`)
+      }
+      profiles.push(profile)
+    })
+
+    return {name: fileName, indexToView, profiles}
+  } else {
+    throw new Error('Could not find CPU profile in Timeline')
+  }
 }
 
 const callFrameToFrameInfo = new Map<CPUProfileCallFrame, FrameInfo>()
@@ -74,7 +182,14 @@ function frameInfoForCallFrame(callFrame: CPUProfileCallFrame) {
   })
 }
 
-function shouldIgnoreFunction(functionName: string) {
+function shouldIgnoreFunction(callFrame: CPUProfileCallFrame) {
+  const {functionName, url} = callFrame
+  if (url === 'native dummy.js') {
+    // I'm not really sure what this is about, but this seems to be used
+    // as a way of avoiding edge cases in V8's implementation.
+    // See: https://github.com/v8/v8/blob/b8626ca4/tools/js2c.py#L419-L424
+    return true
+  }
   return functionName === '(root)' || functionName === '(idle)'
 }
 
@@ -90,6 +205,10 @@ export function importFromChromeCPUProfile(chromeProfile: CPUProfile): Profile {
     nodeById.set(node.id, node)
   }
   for (let node of chromeProfile.nodes) {
+    if (typeof node.parent === 'number') {
+      node.parent = nodeById.get(node.parent)
+    }
+
     if (!node.children) continue
     for (let childId of node.children) {
       const child = nodeById.get(childId)
@@ -99,9 +218,12 @@ export function importFromChromeCPUProfile(chromeProfile: CPUProfile): Profile {
   }
 
   const samples: number[] = []
-  const timeDeltas: number[] = []
+  const sampleTimes: number[] = []
+
+  // The first delta is relative to the profile startTime.
+  // Ref: https://github.com/v8/v8/blob/44bd8fd7/src/inspector/js_protocol.json#L1485
+  let elapsed = chromeProfile.timeDeltas[0]
 
-  let elapsed = 0
   let lastNodeId = NaN
 
   // The chrome CPU profile format doesn't collapse identical samples. We'll do that
@@ -110,29 +232,31 @@ export function importFromChromeCPUProfile(chromeProfile: CPUProfile): Profile {
     const nodeId = chromeProfile.samples[i]
     if (nodeId != lastNodeId) {
       samples.push(nodeId)
-      timeDeltas.push(elapsed)
-      elapsed = 0
+      sampleTimes.push(elapsed)
     }
 
-    let timeDelta = chromeProfile.timeDeltas[i]
-    if (timeDelta < 0) {
-      console.warn('Substituting zero for unexpected time delta:', timeDelta, 'at index', i)
-      timeDelta = 0
-    }
+    if (i === chromeProfile.samples.length - 1) {
+      if (!isNaN(lastNodeId)) {
+        samples.push(lastNodeId)
+        sampleTimes.push(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
+      }
 
-    elapsed += timeDelta
-    lastNodeId = nodeId
-  }
-  if (!isNaN(lastNodeId)) {
-    samples.push(lastNodeId)
-    timeDeltas.push(elapsed)
+      elapsed += timeDelta
+      lastNodeId = nodeId
+    }
   }
 
   let prevStack: CPUProfileNode[] = []
 
-  let value = 0
   for (let i = 0; i < samples.length; i++) {
-    const timeDelta = timeDeltas[i + 1] || 0
+    const value = sampleTimes[i]
     const nodeId = samples[i]
     let stackTop = nodeById.get(nodeId)
     if (!stackTop) continue
@@ -161,7 +285,7 @@ export function importFromChromeCPUProfile(chromeProfile: CPUProfile): Profile {
     const toOpen: CPUProfileNode[] = []
     for (
       let node: CPUProfileNode | null = stackTop;
-      node && node != lca && !shouldIgnoreFunction(node.callFrame.functionName);
+      node && node != lca && !shouldIgnoreFunction(node.callFrame);
       // Place Chrome internal functions on top of the previous call stack
       node = shouldPlaceOnTopOfPreviousStack(node.callFrame.functionName)
         ? lastOf(prevStack)
@@ -176,14 +300,17 @@ export function importFromChromeCPUProfile(chromeProfile: CPUProfile): Profile {
     }
 
     prevStack = prevStack.concat(toOpen)
-    value += timeDelta
   }
 
   // Close frames that are open at the end of the trace
   for (let i = prevStack.length - 1; i >= 0; i--) {
-    profile.leaveFrame(frameInfoForCallFrame(prevStack[i].callFrame), value)
+    profile.leaveFrame(frameInfoForCallFrame(prevStack[i].callFrame), lastOf(sampleTimes)!)
   }
 
   profile.setValueFormatter(new TimeFormatter('microseconds'))
   return profile.build()
 }
+
+export function importFromOldV8CPUProfile(content: OldCPUProfile): Profile {
+  return importFromChromeCPUProfile(chromeTreeToNodes(content))
+}

src/import/firefox.test.ts

@@ -7,3 +7,7 @@ test('importFromFirefox', async () => {
 test('importFromFirefox recursion', async () => {
   await checkProfileSnapshot('./sample/profiles/Firefox/61/recursion.json')
 })
+
+test('importFromFirefox ignore self-hosted', async () => {
+  await checkProfileSnapshot('./sample/profiles/Firefox/63/simple-firefox.json')
+})

src/import/firefox.ts

@@ -180,7 +180,11 @@ export function importFromFirefox(firefoxProfile: FirefoxProfile): Profile {
 
         if (!match) return null
 
-        if (match[2].startsWith('resource:') || match[2] === 'self-hosted') {
+        if (
+          match[2].startsWith('resource:') ||
+          match[2] === 'self-hosted' ||
+          match[2].startsWith('self-hosted:')
+        ) {
           // Ignore Firefox-internals stuff
           return null
         }

src/import/haskell.test.ts

@@ -0,0 +1,5 @@
+import {checkProfileSnapshot} from '../lib/test-utils'
+
+test('importFromHaskell', async () => {
+  await checkProfileSnapshot('./sample/profiles/haskell/simple.prof')
+})

src/import/haskell.ts

@@ -0,0 +1,98 @@
+import {ProfileGroup, FrameInfo, CallTreeProfileBuilder} from '../lib/profile'
+import {TimeFormatter, ByteFormatter} from '../lib/value-formatters'
+
+// See https://downloads.haskell.org/~ghc/latest/docs/html/users_guide/profiling.html#json-profile-format
+// for information on the GHC profiler JSON output format.
+
+interface CostCentre {
+  id: number
+  label: string
+  module: string
+  src_loc: string
+  is_caf: boolean
+}
+
+interface ProfileTree {
+  id: number
+  entries: number
+  alloc: number
+  ticks: number
+  children: ProfileTree[]
+}
+
+interface HaskellProfile {
+  program: string
+  arguments: string[]
+  rts_arguments: string[]
+  end_time: string
+  initial_capabilities: number
+  total_time: number
+  total_ticks: number
+  tick_interval: number
+  total_alloc: number
+  cost_centres: CostCentre[]
+  profile: ProfileTree
+}
+
+// The profiler already collapses recursion before output so using the JS stack here should be fine
+function addToProfile(
+  tree: ProfileTree,
+  startVal: number,
+  profile: CallTreeProfileBuilder,
+  infos: Map<number, FrameInfo>,
+  attribute: (tree: ProfileTree) => number,
+): number {
+  // If the expression never did anything we don't care about it
+  if (tree.ticks === 0 && tree.entries === 0 && tree.alloc === 0 && tree.children.length === 0)
+    return startVal
+
+  let curVal = startVal
+  let frameInfo = infos.get(tree.id)!
+
+  profile.enterFrame(frameInfo, curVal)
+
+  for (let child of tree.children) {
+    curVal = addToProfile(child, curVal, profile, infos, attribute)
+  }
+
+  curVal += attribute(tree)
+
+  profile.leaveFrame(frameInfo, curVal)
+
+  return curVal
+}
+
+export function importFromHaskell(haskellProfile: HaskellProfile): ProfileGroup {
+  const idToFrameInfo = new Map<number, FrameInfo>()
+  for (let centre of haskellProfile.cost_centres) {
+    const frameInfo: FrameInfo = {
+      key: centre.id,
+      name: `${centre.module}.${centre.label}`,
+    }
+
+    // Ignore things like <entire-module> and <no location info>
+    if (!centre.src_loc.startsWith('<')) {
+      // This also contains line and column information, but sometimes it contains ranges,
+      // and in varying formats, so it's a better experience just to leave it as is
+      frameInfo.file = centre.src_loc
+    }
+
+    idToFrameInfo.set(centre.id, frameInfo)
+  }
+
+  const timeProfile = new CallTreeProfileBuilder(haskellProfile.total_ticks)
+  addToProfile(haskellProfile.profile, 0, timeProfile, idToFrameInfo, tree => tree.ticks)
+  timeProfile.setValueFormatter(new TimeFormatter('milliseconds'))
+  timeProfile.setName(`${haskellProfile.program} time`)
+
+  const allocProfile = new CallTreeProfileBuilder(haskellProfile.total_ticks)
+  addToProfile(haskellProfile.profile, 0, allocProfile, idToFrameInfo, tree => tree.alloc)
+  allocProfile.setValueFormatter(new ByteFormatter())
+  allocProfile.setName(`${haskellProfile.program} allocation`)
+
+  return {
+    name: haskellProfile.program,
+    indexToView: 0,
+    profiles: [timeProfile.build(), allocProfile.build()],
+  }
+}

src/import/index.test.ts

@@ -1,8 +1,12 @@
-import {importProfileGroup} from '.'
+import {importProfileGroupFromText} from '.'
 
 test('importProfileGroup', async () => {
   // Importing garbage should return null
-  expect(await importProfileGroup('unknown', '')).toBe(null)
-  expect(await importProfileGroup('unknown', 'Hello world')).toBe(null)
-  expect(await importProfileGroup('unknown', 'Hello\n\nWorld')).toBe(null)
+  expect(await importProfileGroupFromText('unknown', '')).toBe(null)
+  expect(await importProfileGroupFromText('unknown', 'Hello world')).toBe(null)
+  expect(await importProfileGroupFromText('unknown', 'Hello\n\nWorld')).toBe(null)
+
+  // Importing from a version of stackprof which was missing raw_timestamp_deltas should return null
+  const oldStackprof = `{"version":1.2,"mode":"wall","interval":1000,"samples":0,"gc_samples":0,"missed_samples":0,"frames":{}}`
+  expect(await importProfileGroupFromText('unknown', oldStackprof)).toBe(null)
 })

src/import/index.ts

@@ -1,7 +1,12 @@
 import {Profile, ProfileGroup} from '../lib/profile'
 import {FileSystemDirectoryEntry} from './file-system-entry'
 
-import {importFromChromeCPUProfile, importFromChromeTimeline} from './chrome'
+import {
+  importFromChromeCPUProfile,
+  importFromChromeTimeline,
+  isChromeTimeline,
+  importFromOldV8CPUProfile,
+} from './chrome'
 import {importFromStackprof} from './stackprof'
 import {importFromInstrumentsDeepCopy, importFromInstrumentsTrace} from './instruments'
 import {importFromBGFlameGraph} from './bg-flamegraph'
@@ -9,12 +14,44 @@ import {importFromFirefox} from './firefox'
 import {importSpeedscopeProfiles} from '../lib/file-format'
 import {importFromV8ProfLog} from './v8proflog'
 import {importFromLinuxPerf} from './linux-tools-perf'
+import {importFromHaskell} from './haskell'
+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'
 
-export async function importProfileGroup(
+export async function importProfileGroupFromText(
   fileName: string,
   contents: string,
 ): Promise<ProfileGroup | null> {
-  const profileGroup = await _importProfileGroup(fileName, contents)
+  return await importProfileGroup(new TextProfileDataSource(fileName, contents))
+}
+
+export async function importProfileGroupFromBase64(
+  fileName: string,
+  b64contents: string,
+): Promise<ProfileGroup | null> {
+  return await importProfileGroup(
+    MaybeCompressedDataReader.fromArrayBuffer(fileName, decodeBase64(b64contents).buffer),
+  )
+}
+
+export async function importProfilesFromFile(file: File): Promise<ProfileGroup | null> {
+  return importProfileGroup(MaybeCompressedDataReader.fromFile(file))
+}
+
+export async function importProfilesFromArrayBuffer(
+  fileName: string,
+  buffer: ArrayBuffer,
+): Promise<ProfileGroup | null> {
+  return importProfileGroup(MaybeCompressedDataReader.fromArrayBuffer(fileName, buffer))
+}
+
+async function importProfileGroup(dataSource: ProfileDataSource): Promise<ProfileGroup | null> {
+  const fileName = await dataSource.name()
+
+  const profileGroup = await _importProfileGroup(dataSource)
   if (profileGroup) {
     if (!profileGroup.name) {
       profileGroup.name = fileName
@@ -34,20 +71,48 @@ function toGroup(profile: Profile | null): ProfileGroup | null {
   return {name: profile.getName(), indexToView: 0, profiles: [profile]}
 }
 
-async function _importProfileGroup(
-  fileName: string,
-  contents: string,
-): Promise<ProfileGroup | null> {
+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()
+
+  const buffer = await dataSource.readAsArrayBuffer()
+
+  {
+    const profile = importAsPprofProfile(buffer)
+    if (profile) {
+      console.log('Importing as protobuf encoded pprof file')
+      return toGroup(profile)
+    }
+  }
+
+  const contents = await dataSource.readAsText()
+
   // 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))
-  } else if (fileName.endsWith('.cpuprofile')) {
-    console.log('Importing as Chrome CPU Profile')
-    return toGroup(importFromChromeCPUProfile(JSON.parse(contents)))
   } else if (fileName.endsWith('.chrome.json') || /Profile-\d{8}T\d{6}/.exec(fileName)) {
     console.log('Importing as Chrome Timeline')
-    return toGroup(importFromChromeTimeline(JSON.parse(contents)))
+    return importFromChromeTimeline(JSON.parse(contents), fileName)
   } else if (fileName.endsWith('.stackprof.json')) {
     console.log('Importing as stackprof profile')
     return toGroup(importFromStackprof(JSON.parse(contents)))
@@ -63,12 +128,15 @@ async function _importProfileGroup(
   } else if (fileName.endsWith('.v8log.json')) {
     console.log('Importing as --prof-process v8 log')
     return toGroup(importFromV8ProfLog(JSON.parse(contents)))
+  } else if (fileName.endsWith('.heapprofile')) {
+    console.log('Importing as Chrome Heap Profile')
+    return toGroup(importFromChromeHeapProfile(JSON.parse(contents)))
   }
 
   // Second pass: Try to guess what file format it is based on structure
   let parsed: any
   try {
-    parsed = JSON.parse(contents)
+    parsed = JSON.parse(fixUpJSON(contents))
   } catch (e) {}
   if (parsed) {
     if (parsed['$schema'] === 'https://www.speedscope.app/file-format-schema.json') {
@@ -77,18 +145,30 @@ async function _importProfileGroup(
     } else if (parsed['systemHost'] && parsed['systemHost']['name'] == 'Firefox') {
       console.log('Importing as Firefox profile')
       return toGroup(importFromFirefox(parsed))
-    } else if (Array.isArray(parsed) && parsed[parsed.length - 1].name === 'CpuProfile') {
-      console.log('Importing as Chrome CPU Profile')
-      return toGroup(importFromChromeTimeline(parsed))
-    } else if ('nodes' in parsed && 'samples' in parsed && 'timeDeltas' in parsed) {
+    } else if (isChromeTimeline(parsed)) {
       console.log('Importing as Chrome Timeline')
+      return importFromChromeTimeline(parsed, fileName)
+    } else if ('nodes' in parsed && 'samples' in parsed && 'timeDeltas' in parsed) {
+      console.log('Importing as Chrome CPU Profile')
       return toGroup(importFromChromeCPUProfile(parsed))
-    } else if ('mode' in parsed && 'frames' in parsed) {
+    } else if (isTraceEventFormatted(parsed)) {
+      console.log('Importing as Trace Event Format profile')
+      return importTraceEvents(parsed)
+    } else if ('head' in parsed && 'samples' in parsed && 'timestamps' in parsed) {
+      console.log('Importing as Chrome CPU Profile (old format)')
+      return toGroup(importFromOldV8CPUProfile(parsed))
+    } else if ('mode' in parsed && 'frames' in parsed && 'raw_timestamp_deltas' in parsed) {
       console.log('Importing as stackprof profile')
       return toGroup(importFromStackprof(parsed))
     } else if ('code' in parsed && 'functions' in parsed && 'ticks' in parsed) {
       console.log('Importing as --prof-process v8 log')
       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)))
+    } else if ('rts_arguments' in parsed && 'initial_capabilities' in parsed) {
+      console.log('Importing as Haskell GHC JSON Profile')
+      return importFromHaskell(parsed)
     }
   } else {
     // Format is not JSON
@@ -103,7 +183,7 @@ async function _importProfileGroup(
     // 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+\n/).length) {
+    if (lineCount >= 1 && lineCount === contents.split(/ \d+\r?\n/).length) {
       console.log('Importing as collapsed stack format')
       return toGroup(importFromBGFlameGraph(contents))
     }

src/import/instruments.test.ts

@@ -98,4 +98,7 @@ describe('importFromInstrumentsTrace', () => {
   test('Instruments 9.3.1', async () => {
     await importFromTrace('./sample/profiles/Instruments/9.3.1/simple-time-profile.trace.zip')
   })
+  test('Instruments 10.0', async () => {
+    await importFromTrace('./sample/profiles/Instruments/10.0/simple-time-profile.trace.zip')
+  })
 })

src/import/instruments.ts

@@ -9,9 +9,9 @@ import {
   ProfileGroup,
 } from '../lib/profile'
 import {sortBy, getOrThrow, getOrInsert, lastOf, getOrElse, zeroPad} from '../lib/utils'
-import * as pako from 'pako'
 import {ByteFormatter, TimeFormatter} from '../lib/value-formatters'
 import {FileSystemDirectoryEntry, FileSystemEntry, FileSystemFileEntry} from './file-system-entry'
+import {MaybeCompressedDataReader} from './utils'
 
 function parseTSV<T>(contents: string): T[] {
   const lines = contents.split('\n').map(l => l.split('\t'))
@@ -183,56 +183,12 @@ async function extractDirectoryTree(entry: FileSystemDirectoryEntry): Promise<Tr
   return node
 }
 
-class MaybeCompressedFileReader {
-  private fileData: Promise<ArrayBuffer>
-
-  constructor(file: File) {
-    this.fileData = new Promise(resolve => {
-      const reader = new FileReader()
-      reader.addEventListener('loadend', () => {
-        if (!(reader.result instanceof ArrayBuffer)) {
-          throw new Error('Expected reader.result to be an instance of ArrayBuffer')
-        }
-        resolve(reader.result)
-      })
-      reader.readAsArrayBuffer(file)
-    })
-  }
-
-  private async getUncompressed(): Promise<ArrayBuffer> {
-    const fileData = await this.fileData
-    try {
-      const result = pako.inflate(new Uint8Array(fileData)).buffer
-      return result
-    } catch (e) {
-      return fileData
-    }
-  }
-
-  async readAsArrayBuffer(): Promise<ArrayBuffer> {
-    return await this.getUncompressed()
-  }
-
-  async readAsText(): Promise<string> {
-    const buffer = await this.getUncompressed()
-    let ret: string = ''
-
-    // JavaScript strings are UTF-16 encoded, but this data is coming
-    // from a UTF-8 encoded file.
-    const array = new Uint8Array(buffer)
-    for (let i = 0; i < array.length; i++) {
-      ret += String.fromCharCode(array[i])
-    }
-    return ret
-  }
-}
-
 function readAsArrayBuffer(file: File): Promise<ArrayBuffer> {
-  return new MaybeCompressedFileReader(file).readAsArrayBuffer()
+  return MaybeCompressedDataReader.fromFile(file).readAsArrayBuffer()
 }
 
 function readAsText(file: File): Promise<string> {
-  return new MaybeCompressedFileReader(file).readAsText()
+  return MaybeCompressedDataReader.fromFile(file).readAsText()
 }
 
 function getCoreDirForRun(tree: TraceDirectoryTree, selectedRun: number): TraceDirectoryTree {
@@ -405,7 +361,10 @@ async function readFormTemplate(tree: TraceDirectoryTree): Promise<FormTemplateD
   const archive = readInstrumentsKeyedArchive(await readAsArrayBuffer(formTemplate))
 
   const version = archive['com.apple.xray.owner.template.version']
-  const selectedRunNumber = archive['com.apple.xray.owner.template'].get('_selectedRunNumber')
+  let selectedRunNumber = 1
+  if ('com.apple.xray.owner.template' in archive) {
+    selectedRunNumber = archive['com.apple.xray.owner.template'].get('_selectedRunNumber')
+  }
   let instrument = archive['$1']
   if ('stubInfoByUUID' in archive) {
     instrument = Array.from(archive['stubInfoByUUID'].keys())[0]

src/import/pprof.test.ts

@@ -0,0 +1,5 @@
+import {checkProfileSnapshot} from '../lib/test-utils'
+
+test('importAsPprofProfile', async () => {
+  await checkProfileSnapshot('./sample/profiles/pprof/simple.prof')
+})

src/import/pprof.ts

@@ -0,0 +1,134 @@
+import {perftools} from './profile.proto.js'
+import {FrameInfo, StackListProfileBuilder, Profile} from '../lib/profile'
+import {lastOf} from '../lib/utils'
+import {TimeFormatter, ByteFormatter} from '../lib/value-formatters'
+
+interface SampleType {
+  type: string
+  unit: string
+}
+
+export function importAsPprofProfile(rawProfile: ArrayBuffer): Profile | null {
+  if (rawProfile.byteLength === 0) return null
+
+  let protoProfile: perftools.profiles.Profile
+  try {
+    protoProfile = perftools.profiles.Profile.decode(new Uint8Array(rawProfile))
+  } catch (e) {
+    return null
+  }
+
+  function i32(n: number | Long): number {
+    return typeof n === 'number' ? n : (n as Long).low
+  }
+
+  function stringVal(key: number | Long): string | null {
+    return protoProfile.stringTable[i32(key)] || null
+  }
+
+  const frameInfoByFunctionID = new Map<number, FrameInfo>()
+
+  function frameInfoForFunction(f: perftools.profiles.IFunction): FrameInfo | null {
+    const {name, filename, startLine} = f
+
+    const nameString = (name != null && stringVal(name)) || '(unknown)'
+    const fileNameString = filename != null ? stringVal(filename) : null
+    const line = startLine != null ? +startLine : null
+
+    const key = `${nameString}:${fileNameString}:${line}`
+
+    const frameInfo: FrameInfo = {
+      key,
+      name: nameString,
+    }
+
+    if (fileNameString != null) {
+      frameInfo.file = fileNameString
+    }
+
+    if (line != null) {
+      frameInfo.line = line
+    }
+
+    return frameInfo
+  }
+
+  for (let f of protoProfile.function) {
+    if (f.id) {
+      const frameInfo = frameInfoForFunction(f)
+      if (frameInfo != null) {
+        frameInfoByFunctionID.set(i32(f.id), frameInfo)
+      }
+    }
+  }
+
+  function frameInfoForLocation(location: perftools.profiles.ILocation): FrameInfo | null {
+    const {line} = location
+    if (line == null) return null
+
+    // From a comment on profile.proto:
+    //
+    //   Multiple line indicates this location has inlined functions,
+    //   where the last entry represents the caller into which the
+    //   preceding entries were inlined.
+    //
+    //   E.g., if memcpy() is inlined into printf:
+    //      line[0].function_name == "memcpy"
+    //      line[1].function_name == "printf"
+    //
+    // Let's just take the last line then
+    const lastLine = lastOf(line)
+    if (lastLine == null) return null
+
+    if (lastLine.functionId) {
+      return frameInfoByFunctionID.get(i32(lastLine.functionId)) || null
+    } else {
+      return null
+    }
+  }
+
+  const frameByLocationID = new Map<number, FrameInfo>()
+
+  for (let l of protoProfile.location) {
+    if (l.id != null) {
+      const frameInfo = frameInfoForLocation(l)
+      if (frameInfo) {
+        frameByLocationID.set(i32(l.id), frameInfo)
+      }
+    }
+  }
+
+  const sampleTypes: SampleType[] = protoProfile.sampleType.map(type => ({
+    type: (type.type && stringVal(type.type)) || 'samples',
+    unit: (type.unit && stringVal(type.unit)) || 'count',
+  }))
+
+  const sampleTypeIndex = protoProfile.defaultSampleType
+    ? +protoProfile.defaultSampleType
+    : sampleTypes.length - 1
+  const sampleType = sampleTypes[sampleTypeIndex]
+
+  const profileBuilder = new StackListProfileBuilder()
+
+  switch (sampleType.unit) {
+    case 'nanoseconds':
+    case 'microseconds':
+    case 'milliseconds':
+    case 'seconds':
+      profileBuilder.setValueFormatter(new TimeFormatter(sampleType.unit))
+      break
+
+    case 'bytes':
+      profileBuilder.setValueFormatter(new ByteFormatter())
+      break
+  }
+
+  for (let s of protoProfile.sample) {
+    const stack = s.locationId ? s.locationId.map(l => frameByLocationID.get(i32(l))) : []
+    stack.reverse()
+    const value = s.value![sampleTypeIndex]
+    profileBuilder.appendSampleWithWeight(stack.filter(f => f != null) as FrameInfo[], +value)
+  }
+
+  return profileBuilder.build()
+}

src/import/profile.proto

@@ -0,0 +1,206 @@
+// THIS FILE WAS IMPORTED FROM AN EXTERNAL SOURCE. DO NOT MODIFY THIS FILE
+// MANUALLY.
+//
+// Original from: https://github.com/google/pprof/blob/e027b50/proto/profile.proto
+//
+// This file is licensed under the Apache License 2.0
+// (https://github.com/google/pprof/blob/e027b5/LICENSE)
+
+// Profile is a common stacktrace profile format.
+//
+// Measurements represented with this format should follow the
+// following conventions:
+//
+// - Consumers should treat unset optional fields as if they had been
+//   set with their default value.
+//
+// - When possible, measurements should be stored in "unsampled" form
+//   that is most useful to humans.  There should be enough
+//   information present to determine the original sampled values.
+//
+// - On-disk, the serialized proto must be gzip-compressed.
+//
+// - The profile is represented as a set of samples, where each sample
+//   references a sequence of locations, and where each location belongs
+//   to a mapping.
+// - There is a N->1 relationship from sample.location_id entries to
+//   locations. For every sample.location_id entry there must be a
+//   unique Location with that id.
+// - There is an optional N->1 relationship from locations to
+//   mappings. For every nonzero Location.mapping_id there must be a
+//   unique Mapping with that id.
+
+syntax = "proto3";
+
+package perftools.profiles;
+
+option java_package = "com.google.perftools.profiles";
+option java_outer_classname = "ProfileProto";
+
+message Profile {
+  // A description of the samples associated with each Sample.value.
+  // For a cpu profile this might be:
+  //   [["cpu","nanoseconds"]] or [["wall","seconds"]] or [["syscall","count"]]
+  // For a heap profile, this might be:
+  //   [["allocations","count"], ["space","bytes"]],
+  // If one of the values represents the number of events represented
+  // by the sample, by convention it should be at index 0 and use
+  // sample_type.unit == "count".
+  repeated ValueType sample_type = 1;
+  // The set of samples recorded in this profile.
+  repeated Sample sample = 2;
+  // Mapping from address ranges to the image/binary/library mapped
+  // into that address range.  mapping[0] will be the main binary.
+  repeated Mapping mapping = 3;
+  // Useful program location
+  repeated Location location = 4;
+  // Functions referenced by locations
+  repeated Function function = 5;
+  // A common table for strings referenced by various messages.
+  // string_table[0] must always be "".
+  repeated string string_table = 6;
+  // frames with Function.function_name fully matching the following
+  // regexp will be dropped from the samples, along with their successors.
+  int64 drop_frames = 7; // Index into string table.
+  // frames with Function.function_name fully matching the following
+  // regexp will be kept, even if it matches drop_functions.
+  int64 keep_frames = 8; // Index into string table.
+
+  // The following fields are informational, do not affect
+  // interpretation of results.
+
+  // Time of collection (UTC) represented as nanoseconds past the epoch.
+  int64 time_nanos = 9;
+  // Duration of the profile, if a duration makes sense.
+  int64 duration_nanos = 10;
+  // The kind of events between sampled ocurrences.
+  // e.g [ "cpu","cycles" ] or [ "heap","bytes" ]
+  ValueType period_type = 11;
+  // The number of events between sampled occurrences.
+  int64 period = 12;
+  // Freeform text associated to the profile.
+  repeated int64 comment = 13; // Indices into string table.
+  // Index into the string table of the type of the preferred sample
+  // value. If unset, clients should default to the last sample value.
+  int64 default_sample_type = 14;
+}
+
+// ValueType describes the semantics and measurement units of a value.
+message ValueType {
+  int64 type = 1; // Index into string table.
+  int64 unit = 2; // Index into string table.
+}
+
+// Each Sample records values encountered in some program
+// context. The program context is typically a stack trace, perhaps
+// augmented with auxiliary information like the thread-id, some
+// indicator of a higher level request being handled etc.
+message Sample {
+  // The ids recorded here correspond to a Profile.location.id.
+  // The leaf is at location_id[0].
+  repeated uint64 location_id = 1;
+  // The type and unit of each value is defined by the corresponding
+  // entry in Profile.sample_type. All samples must have the same
+  // number of values, the same as the length of Profile.sample_type.
+  // When aggregating multiple samples into a single sample, the
+  // result has a list of values that is the elemntwise sum of the
+  // lists of the originals.
+  repeated int64 value = 2;
+  // label includes additional context for this sample. It can include
+  // things like a thread id, allocation size, etc
+  repeated Label label = 3;
+}
+
+message Label {
+  int64 key = 1; // Index into string table
+
+  // At most one of the following must be present
+  int64 str = 2; // Index into string table
+  int64 num = 3;
+
+  // Should only be present when num is present.
+  // Specifies the units of num.
+  // Use arbitrary string (for example, "requests") as a custom count unit.
+  // If no unit is specified, consumer may apply heuristic to deduce the unit.
+  // Consumers may also  interpret units like "bytes" and "kilobytes" as memory
+  // units and units like "seconds" and "nanoseconds" as time units,
+  // and apply appropriate unit conversions to these.
+  int64 num_unit = 4; // Index into string table
+}
+
+message Mapping {
+  // Unique nonzero id for the mapping.
+  uint64 id = 1;
+  // Address at which the binary (or DLL) is loaded into memory.
+  uint64 memory_start = 2;
+  // The limit of the address range occupied by this mapping.
+  uint64 memory_limit = 3;
+  // Offset in the binary that corresponds to the first mapped address.
+  uint64 file_offset = 4;
+  // The object this entry is loaded from.  This can be a filename on
+  // disk for the main binary and shared libraries, or virtual
+  // abstractions like "[vdso]".
+  int64 filename = 5; // Index into string table
+  // A string that uniquely identifies a particular program version
+  // with high probability. E.g., for binaries generated by GNU tools,
+  // it could be the contents of the .note.gnu.build-id field.
+  int64 build_id = 6; // Index into string table
+
+  // The following fields indicate the resolution of symbolic info.
+  bool has_functions = 7;
+  bool has_filenames = 8;
+  bool has_line_numbers = 9;
+  bool has_inline_frames = 10;
+}
+
+// Describes function and line table debug information.
+message Location {
+  // Unique nonzero id for the location.  A profile could use
+  // instruction addresses or any integer sequence as ids.
+  uint64 id = 1;
+  // The id of the corresponding profile.Mapping for this location.
+  // It can be unset if the mapping is unknown or not applicable for
+  // this profile type.
+  uint64 mapping_id = 2;
+  // The instruction address for this location, if available.  It
+  // should be within [Mapping.memory_start...Mapping.memory_limit]
+  // for the corresponding mapping. A non-leaf address may be in the
+  // middle of a call instruction. It is up to display tools to find
+  // the beginning of the instruction if necessary.
+  uint64 address = 3;
+  // Multiple line indicates this location has inlined functions,
+  // where the last entry represents the caller into which the
+  // preceding entries were inlined.
+  //
+  // E.g., if memcpy() is inlined into printf:
+  //    line[0].function_name == "memcpy"
+  //    line[1].function_name == "printf"
+  repeated Line line = 4;
+  // Provides an indication that multiple symbols map to this location's
+  // address, for example due to identical code folding by the linker. In that
+  // case the line information above represents one of the multiple
+  // symbols. This field must be recomputed when the symbolization state of the
+  // profile changes.
+  bool is_folded = 5;
+}
+
+message Line {
+  // The id of the corresponding profile.Function for this line.
+  uint64 function_id = 1;
+  // Line number in source code.
+  int64 line = 2;
+}
+
+message Function {
+  // Unique nonzero id for the function.
+  uint64 id = 1;
+  // Name of the function, in human-readable form if available.
+  int64 name = 2; // Index into string table
+  // Name of the function, as identified by the system.
+  // For instance, it can be a C++ mangled name.
+  int64 system_name = 3; // Index into string table
+  // Source file containing the function.
+  int64 filename = 4; // Index into string table
+  // Line number in source file.
+  int64 start_line = 5;
+}

src/import/trace-event.test.ts

@@ -0,0 +1,25 @@
+import {checkProfileSnapshot} from '../lib/test-utils'
+
+test('importTraceEvents simple', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/simple.json')
+})
+
+test('importTraceEvents simple object', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/simple-object.json')
+})
+
+test('importTraceEvents multiprocess', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/multiprocess.json')
+})
+
+test('importTraceEvents partial json import', 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 whitespace padding', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/simple-partial-whitespace.json')
+})

src/import/trace-event.ts

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

src/import/utils.ts

@@ -0,0 +1,88 @@
+import * as pako from 'pako'
+
+export interface ProfileDataSource {
+  name(): Promise<string>
+  readAsArrayBuffer(): Promise<ArrayBuffer>
+  readAsText(): Promise<string>
+}
+
+export class TextProfileDataSource implements ProfileDataSource {
+  constructor(private fileName: string, private contents: string) {}
+  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
+    return new ArrayBuffer(0)
+  }
+  async readAsText() {
+    return this.contents
+  }
+}
+
+export class MaybeCompressedDataReader implements ProfileDataSource {
+  private uncompressedData: Promise<ArrayBuffer>
+
+  constructor(
+    private namePromise: Promise<string>,
+    maybeCompressedDataPromise: Promise<ArrayBuffer>,
+  ) {
+    this.uncompressedData = maybeCompressedDataPromise.then(async (fileData: ArrayBuffer) => {
+      try {
+        const result = pako.inflate(new Uint8Array(fileData)).buffer
+        return result
+      } catch (e) {
+        return fileData
+      }
+    })
+  }
+
+  async name(): Promise<string> {
+    return await this.namePromise
+  }
+
+  async readAsArrayBuffer(): Promise<ArrayBuffer> {
+    return await this.uncompressedData
+  }
+
+  async readAsText(): Promise<string> {
+    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
+    }
+  }
+
+  static fromFile(file: File): MaybeCompressedDataReader {
+    const maybeCompressedDataPromise: Promise<ArrayBuffer> = new Promise(resolve => {
+      const reader = new FileReader()
+      reader.addEventListener('loadend', () => {
+        if (!(reader.result instanceof ArrayBuffer)) {
+          throw new Error('Expected reader.result to be an instance of ArrayBuffer')
+        }
+        resolve(reader.result)
+      })
+      reader.readAsArrayBuffer(file)
+    })
+
+    return new MaybeCompressedDataReader(Promise.resolve(file.name), maybeCompressedDataPromise)
+  }
+
+  static fromArrayBuffer(name: string, buffer: ArrayBuffer): MaybeCompressedDataReader {
+    return new MaybeCompressedDataReader(Promise.resolve(name), Promise.resolve(buffer))
+  }
+}

src/import/v8cpuFormatter.ts

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

src/import/v8heapalloc.test.ts

@@ -0,0 +1,9 @@
+import {checkProfileSnapshot} from '../lib/test-utils'
+
+test('importV8HeapAlloc from Chrome', async () => {
+  await checkProfileSnapshot('./sample/profiles/Chrome/69/Heap-20181005T144546.heapprofile')
+})
+
+test('importV8HeapAlloc from NodeJS', async () => {
+  await checkProfileSnapshot('./sample/profiles/node/10.11.0/Heap-20181003T105432.heapprofile')
+})

src/import/v8heapalloc.ts

@@ -0,0 +1,109 @@
+import {Profile, FrameInfo, StackListProfileBuilder} from '../lib/profile'
+import {getOrInsert} from '../lib/utils'
+import {ByteFormatter} from '../lib/value-formatters'
+
+/**
+ * The V8 Heap Allocation profile is a way to represent heap allocation for each
+ * javascript function. The format is a simple tree where the weight of each node
+ * represent the memory allocated by the function and all its callee.
+ * You can find more information on how to get a profile there :
+ * https://developers.google.com/web/tools/chrome-devtools/memory-problems/#allocation-profile
+ * You need to scroll down to "Investigate memory allocation by function"
+ *
+ * Note that Node.JS can retrieve this kind of profile via the Inspector protocol.
+ */
+
+interface HeapProfileCallFrame {
+  columnNumber: number
+  functionName: string
+  lineNumber: number
+  scriptId: string
+  url: string
+}
+
+interface HeapProfileNode {
+  callFrame: HeapProfileCallFrame
+  selfSize: number
+  children: HeapProfileNode[]
+  id: number
+  parent?: number
+  totalSize: number
+}
+
+interface HeapProfile {
+  head: HeapProfileNode
+}
+
+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
+    return {
+      key: `${name}:${file}:${line}:${col}`,
+      name,
+      file,
+      line,
+      col,
+    }
+  })
+}
+
+export function importFromChromeHeapProfile(chromeProfile: HeapProfile): Profile {
+  const nodeById = new Map<number, HeapProfileNode>()
+  let currentId = 0
+  const computeId = (node: HeapProfileNode, parent?: HeapProfileNode) => {
+    node.id = currentId++
+    nodeById.set(node.id, node)
+    if (parent) {
+      node.parent = parent.id
+    }
+
+    node.children.forEach(children => computeId(children, node))
+  }
+  computeId(chromeProfile.head)
+
+  // Compute the total size
+  const computeTotalSize = (node: HeapProfileNode): number => {
+    if (node.children.length === 0) return node.selfSize || 0
+    const totalChild = node.children.reduce((total: number, children) => {
+      total += computeTotalSize(children)
+      return total
+    }, node.selfSize)
+    node.totalSize = totalChild
+    return totalChild
+  }
+  const total = computeTotalSize(chromeProfile.head)
+
+  // Compute all stacks by taking each last node and going upward
+  const stacks: HeapProfileNode[][] = []
+  for (let currentNode of nodeById.values()) {
+    let stack: HeapProfileNode[] = []
+    stack.push(currentNode)
+    // While we found a parent
+    while (true) {
+      if (currentNode.parent === undefined) break
+      const parent = nodeById.get(currentNode.parent)
+      if (parent === undefined) break
+      // Push the parent at the beginning of the stack
+      stack.unshift(parent)
+      currentNode = parent
+    }
+    stacks.push(stack)
+  }
+
+  const profile = new StackListProfileBuilder(total)
+
+  for (let stack of stacks) {
+    const lastFrame = stack[stack.length - 1]
+    profile.appendSampleWithWeight(
+      stack.map(frame => frameInfoForCallFrame(frame.callFrame)),
+      lastFrame.selfSize,
+    )
+  }
+
+  profile.setValueFormatter(new ByteFormatter())
+  return profile.build()
+}

src/lib/lru-cache.ts

@@ -159,4 +159,9 @@ export class LRUCache<K, V> {
     this.map.delete(key)
     return [key, value]
   }
+
+  clear() {
+    this.list = new List<K>()
+    this.map = new Map<K, LRUCacheNode<K, V>>()
+  }
 }

src/lib/profile.ts

@@ -521,10 +521,9 @@ export class CallTreeProfileBuilder extends Profile {
   private framesInStack = new Map<Frame, number>()
   private stack: Frame[] = []
 
-  private lastValue: number | null = null
+  private lastValue: number = 0
   private addWeightsToFrames(value: number) {
-    if (this.lastValue == null) this.lastValue = value
-    const delta = value - this.lastValue!
+    const delta = value - this.lastValue
     for (let frame of this.framesInStack.keys()) {
       frame.addToTotalWeight(delta)
     }
@@ -534,7 +533,7 @@ export class CallTreeProfileBuilder extends Profile {
     }
   }
   private addWeightsToNodes(value: number, stack: CallTreeNode[]) {
-    const delta = value - this.lastValue!
+    const delta = value - this.lastValue
     for (let node of stack) {
       node.addToTotalWeight(delta)
     }
@@ -552,14 +551,15 @@ export class CallTreeProfileBuilder extends Profile {
 
     if (prevTop) {
       if (useAppendOrder) {
-        const delta = value - this.lastValue!
+        const delta = value - this.lastValue
         if (delta > 0) {
           this.samples.push(prevTop)
-          this.weights.push(value - this.lastValue!)
+          this.weights.push(value - this.lastValue)
         } else if (delta < 0) {
           throw new Error(
-            `Samples must be provided in increasing order of cumulative value. Last sample was ${this
-              .lastValue!}, this sample was ${value}`,
+            `Samples must be provided in increasing order of cumulative value. Last sample was ${
+              this.lastValue
+            }, this sample was ${value}`,
           )
         }
       }

src/lib/test-utils.ts

@@ -1,8 +1,8 @@
 import * as fs from 'fs'
 import * as path from 'path'
 import {Profile, CallTreeNode, Frame} from './profile'
-import {importProfileGroup} from '../import'
 import {exportProfileGroup, importSpeedscopeProfiles} from './file-format'
+import {importProfilesFromArrayBuffer} from '../import'
 
 interface DumpedProfile {
   name: string
@@ -47,9 +47,10 @@ export function dumpProfile(profile: Profile): any {
 }
 
 export async function checkProfileSnapshot(filepath: string) {
-  const input = fs.readFileSync(filepath, 'utf8')
+  const buffer = fs.readFileSync(filepath)
+  const arrayBuffer = buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength)
 
-  const profileGroup = await importProfileGroup(path.basename(filepath), input)
+  const profileGroup = await importProfilesFromArrayBuffer(path.basename(filepath), arrayBuffer)
   if (profileGroup) {
     expect(profileGroup.name).toMatchSnapshot('profileGroup.name')
     expect(profileGroup.indexToView).toMatchSnapshot('indexToView')
@@ -62,7 +63,7 @@ export async function checkProfileSnapshot(filepath: string) {
     return
   }
 
-  const profilesWithoutFilename = await importProfileGroup('unknown', input)
+  const profilesWithoutFilename = await importProfilesFromArrayBuffer('unknown', arrayBuffer)
   if (profilesWithoutFilename) {
     expect(profilesWithoutFilename.profiles.length).toEqual(profileGroup.profiles.length)
     profilesWithoutFilename.name = profileGroup.name

src/lib/utils.test.ts

@@ -13,8 +13,11 @@ import {
   memoizeByReference,
   memoizeByShallowEquality,
   objectsHaveShallowEquality,
+  decodeBase64,
 } from './utils'
 
+import * as jsc from 'jsverify'
+
 test('sortBy', () => {
   const ls = ['a3', 'b2', 'c1', 'd4']
   sortBy(ls, k => k.charCodeAt(1))
@@ -173,3 +176,19 @@ test('objectsHaveShallowEquality', () => {
   expect(objectsHaveShallowEquality([1], [1, 2])).toBe(false)
   expect(objectsHaveShallowEquality([1, 2], [1])).toBe(false)
 })
+
+test('decodeBase64', () => {
+  jsc.assertForall(jsc.array(jsc.uint8), byteArray => {
+    let binaryString = ''
+    for (let byte of byteArray) {
+      binaryString += String.fromCharCode(byte)
+    }
+    const b64string = btoa(binaryString)
+    const decoded = decodeBase64(b64string)
+
+    expect(Uint8Array.from(byteArray)).toEqual(decoded)
+
+    // If the above expect(...) assertion fails, we won't reach here.
+    return true
+  })
+})

src/lib/utils.ts

@@ -167,3 +167,131 @@ export function memoizeByReference<T, U>(cb: (t: T) => U): (t: T) => U {
     }
   }
 }
+
+export function lazyStatic<T>(cb: () => T): () => T {
+  let last: {result: T} | null = null
+  return () => {
+    if (last == null) {
+      last = {result: cb()}
+    }
+    return last.result
+  }
+}
+
+const base64lookupTable = lazyStatic((): Map<string, number> => {
+  const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
+  const ret = new Map<string, number>()
+  for (let i = 0; i < alphabet.length; i++) {
+    ret.set(alphabet.charAt(i), i)
+  }
+  ret.set('=', -1)
+  return ret
+})
+
+// NOTE: There are probably simpler solutions to this problem, but I have this written already, so
+// until we run into problems with this, let's just use this.
+//
+// See: https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#The_Unicode_Problem#The_Unicode_Problem
+export function decodeBase64(encoded: string): Uint8Array {
+  // Reference: https://www.rfc-editor.org/rfc/rfc4648.txt
+
+  const lookupTable = base64lookupTable()
+
+  // 3 byte groups are represented as sequneces of 4 characters.
+  //
+  // "The encoding process represents 24-bit groups of input bits as output
+  //  strings of 4 encoded characters."
+  //
+  // "Special processing is performed if fewer than 24 bits are available
+  //  at the end of the data being encoded.  A full encoding quantum is
+  //  always completed at the end of a quantity.  When fewer than 24 input
+  //  bits are available in an input group bits with value zero are added
+  //  (on the right) to form an integral number of 6-bit groups."
+
+  if (encoded.length % 4 !== 0) {
+    throw new Error(
+      `Invalid length for base64 encoded string. Expected length % 4 = 0, got length = ${
+        encoded.length
+      }`,
+    )
+  }
+
+  const quartetCount = encoded.length / 4
+  let byteCount: number
+
+  // Special processing is performed if fewer than 24 bits are available
+  // at the end of the data being encoded.  A full encoding quantum is
+  // always completed at the end of a quantity.  When fewer than 24 input
+  // bits are available in an input group, bits with value zero are added
+  // (on the right) to form an integral number of 6-bit groups.  Padding
+  // at the end of the data is performed using the '=' character.  Since
+  // all base 64 input is an integral number of octets, only the following
+  // cases can arise:
+  //
+  // (1) The final quantum of encoding input is an integral multiple of 24
+  //     bits; here, the final unit of encoded output will be an integral
+  //     multiple of 4 characters with no "=" padding.
+  //
+  // (2) The final quantum of encoding input is exactly 8 bits; here, the
+  //     final unit of encoded output will be two characters followed by
+  //     two "=" padding characters.
+  //
+  // (3) The final quantum of encoding input is exactly 16 bits; here, the
+  //     final unit of encoded output will be three characters followed by
+  //     one "=" padding character.
+  if (encoded.length >= 4) {
+    if (encoded.charAt(encoded.length - 1) === '=') {
+      if (encoded.charAt(encoded.length - 2) === '=') {
+        // Case (2)
+        byteCount = quartetCount * 3 - 2
+      } else {
+        // Case (3)
+        byteCount = quartetCount * 3 - 1
+      }
+    } else {
+      // Case (1)
+      byteCount = quartetCount * 3
+    }
+  } else {
+    // Case (1)
+    byteCount = quartetCount * 3
+  }
+
+  const bytes = new Uint8Array(byteCount)
+  let offset = 0
+
+  for (let i = 0; i < quartetCount; i++) {
+    const enc1 = encoded.charAt(i * 4 + 0)
+    const enc2 = encoded.charAt(i * 4 + 1)
+    const enc3 = encoded.charAt(i * 4 + 2)
+    const enc4 = encoded.charAt(i * 4 + 3)
+
+    const sextet1 = lookupTable.get(enc1)
+    const sextet2 = lookupTable.get(enc2)
+    const sextet3 = lookupTable.get(enc3)
+    const sextet4 = lookupTable.get(enc4)
+
+    if (sextet1 == null || sextet2 == null || sextet3 == null || sextet4 == null) {
+      throw new Error(
+        `Invalid quartet at indices ${i * 4} .. ${i * 4 + 3}: ${encoded.substring(
+          i * 4,
+          i * 4 + 3,
+        )}`,
+      )
+    }
+
+    bytes[offset++] = (sextet1 << 2) | (sextet2 >> 4)
+    if (enc3 !== '=') {
+      bytes[offset++] = ((sextet2 & 15) << 4) | (sextet3 >> 2)
+    }
+    if (enc4 !== '=') {
+      bytes[offset++] = ((sextet3 & 7) << 6) | sextet4
+    }
+  }
+
+  if (offset !== byteCount) {
+    throw new Error(`Expected to decode ${byteCount} bytes, but only decoded ${offset})`)
+  }
+
+  return bytes
+}

src/lib/value-formatters.test.ts

@@ -7,7 +7,8 @@ describe('TimeFormatter', () => {
     expect(f.format(0.04)).toEqual('40.00µs')
     expect(f.format(3)).toEqual('3.00ms')
     expect(f.format(2070)).toEqual('2.07s')
-    expect(f.format(1203123)).toEqual('20.05min')
+    expect(f.format(150000)).toEqual('2:30')
+    expect(f.format(1203123)).toEqual('20:03')
   })
 
   test('input units seconds', () => {
@@ -15,7 +16,8 @@ describe('TimeFormatter', () => {
     expect(f.format(0.00004)).toEqual('40.00µs')
     expect(f.format(0.003)).toEqual('3.00ms')
     expect(f.format(2.07)).toEqual('2.07s')
-    expect(f.format(1203.123)).toEqual('20.05min')
+    expect(f.format(150)).toEqual('2:30')
+    expect(f.format(1203.123)).toEqual('20:03')
   })
 })
 

src/lib/value-formatters.ts

@@ -1,4 +1,5 @@
 import {FileFormat} from './file-format-spec'
+import {zeroPad} from './utils'
 
 export interface ValueFormatter {
   unit: FileFormat.ValueUnit
@@ -25,7 +26,11 @@ export class TimeFormatter implements ValueFormatter {
   formatUnsigned(v: number) {
     const s = v * this.multiplier
 
-    if (s / 60 >= 1) return `${(s / 60).toFixed(2)}min`
+    if (s / 60 >= 1) {
+      const minutes = Math.floor(s / 60)
+      const seconds = Math.floor(s - minutes * 60).toString()
+      return `${minutes}:${zeroPad(seconds, 2)}`
+    }
     if (s / 1 >= 1) return `${s.toFixed(2)}s`
     if (s / 1e-3 >= 1) return `${(s / 1e-3).toFixed(2)}ms`
     if (s / 1e-6 >= 1) return `${(s / 1e-6).toFixed(2)}µs`

src/store/getters.ts

@@ -33,7 +33,11 @@ export const getCanvasContext = memoizeByReference((canvas: HTMLCanvasElement) =
 })
 
 export const getRowAtlas = memoizeByReference((canvasContext: CanvasContext) => {
-  return new RowAtlas<FlamechartRowAtlasKey>(canvasContext)
+  return new RowAtlas<FlamechartRowAtlasKey>(
+    canvasContext.gl,
+    canvasContext.rectangleBatchRenderer,
+    canvasContext.textureRenderer,
+  )
 })
 
 export const getProfileWithRecursionFlattened = memoizeByReference((profile: Profile) =>

src/store/store-test-utils.ts

@@ -1,6 +1,6 @@
 import * as fs from 'fs'
 
-import {Store, AnyAction} from '../../node_modules/redux'
+import {Store, AnyAction} from 'redux'
 import {ApplicationState, createApplicationStore} from '.'
 import {importSpeedscopeProfiles} from '../lib/file-format'
 

src/typings/regl.d.ts

@@ -1,589 +0,0 @@
-declare module 'regl' {
-  interface InitializationOptions {
-    /** A reference to a WebGL rendering context. (Default created from canvas) */
-    gl?: WebGLRenderingContext
-    /** A reference to an HTML canvas element. (Default created and appending to container) */
-    canvas?: HTMLCanvasElement | string
-    /** A container element which regl inserts a canvas into. (Default document.body) */
-    container?: HTMLElement | string
-    /** The context creation attributes passed to the WebGL context constructor. See below for defaults. */
-    attributes?: {
-      /** Boolean that indicates if the canvas contains an alpha buffer. */
-      alpha?: boolean
-      /** Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits. */
-      depth?: boolean
-      /** Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits. */
-      stencil?: boolean
-      /** Boolean that indicates whether or not to perform anti-aliasing. */
-      antialias?: boolean
-      /** Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha. */
-      premultipliedAlpha?: boolean
-      /** If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author. */
-      preserveDrawingBuffer?: boolean
-      /** Boolean that indicates if a context will be created if the system performance is low. */
-      failIfMajorPerformanceCavet?: boolean
-    }
-    /** A multiplier which is used to scale the canvas size relative to the container. (Default window.devicePixelRatio) */
-    pixelRatio?: number
-    /** A list of extensions that must be supported by WebGL context. Default [] */
-    extensions?: string[] | string
-    /** A list of extensions which are loaded opportunistically. Default [] */
-    optionalExtensions?: string[] | string
-    /** If set, turns on profiling for all commands by default. (Default false) */
-    profile?: boolean
-    /**
-     * An optional callback which accepts a pair of arguments, (err, regl) that
-     * is called after the application loads. If not specified, context creation
-     * errors throw.
-     */
-    onDone?: (err: Error, regl: regl.Instance) => void
-  }
-  function regl(options: InitializationOptions): regl.Instance
-
-  /** Create fullscreen canvas */
-  function regl(): regl.Instance
-
-  /** Build from an existing canvas */
-  function regl(canvas: HTMLCanvasElement): regl.Instance
-
-  /** Build from an existing div container */
-  function regl(container: HTMLElement): regl.Instance
-
-  /** Build from an existing WebGL context */
-  function regl(gl: WebGLRenderingContext): regl.Instance
-
-  namespace regl {
-    export type vec2 = [number, number]
-    export type vec3 = [number, number, number]
-    export type vec4 = [number, number, number, number]
-    export type mat3 = [number, number, number, number, number, number, number, number, number]
-    export type mat4 = [
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number
-    ]
-    type GlslPrimitive = number | vec2 | vec3 | vec4 | mat3 | mat4
-
-    interface Tick {
-      cancel(): void
-    }
-
-    interface Instance {
-      <P>(params: CommandOptions<P>): Command<P>
-
-      clear(args: {
-        color?: [number, number, number, number]
-        depth?: number
-        stencil?: number
-      }): void
-
-      // TODO(jlfwong): read()
-
-      buffer(args: BufferArgs): Buffer
-      texture(width: number, height: number): Texture
-      texture(args: TextureArgs): Texture
-      framebuffer(args: FramebufferOptions): Framebuffer
-      renderbuffer(args: RenderBufferOptions): RenderBuffer
-
-      limits: {
-        colorBits: [number, number, number, number]
-        depthBits: number
-        stencilBits: number
-        subpixelBits: number
-        extensions: string[]
-        maxAnistropic: number
-        maxDrawbuffers: number
-        maxColorAttachments: number
-        pointSizeDims: number
-        lineWidthDims: number
-        maxViewportDims: number
-        maxCombinedTextureUnits: number
-        maxCubeMapSize: number
-        maxTextureUnits: number
-        maxTextureSize: number
-        maxAttributes: number
-        maxVertexUniforms: number
-        maxVertexTextureUnits: number
-        maxFragmentUniforms: number
-        glsl: string
-        renderer: string
-        vendor: string
-        version: string
-      }
-
-      stats: {
-        bufferCount: number
-        elementsCount: number
-        framebufferCount: number
-        shaderCount: number
-        textureCount: number
-        cubeCount: number
-        renderbufferCount: number
-        getTotalTextureSize(): number
-        getTotalBufferSize(): number
-        getTotalRenderbufferSize(): number
-        getMaxUniformsCount(): number
-        maxTextureUnits(): number
-      }
-
-      destroy(): void
-
-      frame(callback: (context: Context) => void): Tick
-    }
-
-    type TypedArray =
-      | Int8Array
-      | Uint8Array
-      | Uint8ClampedArray
-      | Int16Array
-      | Uint16Array
-      | Int32Array
-      | Uint32Array
-      | Float32Array
-      | Float64Array
-
-    type DrawMode =
-      | 'points'
-      | 'lines'
-      | 'line strip'
-      | 'line loop'
-      | 'triangles'
-      | 'triangle strip'
-      | 'triangle fan'
-
-    interface Context {
-      tick: number
-      time: number
-      viewportWidth: number
-      viewportHeight: number
-      framebufferWidth: number
-      framebufferHeight: number
-      drawingBufferWidth: number
-      drawingBufferHeight: number
-      pixelRatio: number
-      [key: string]: any
-    }
-
-    interface BufferOptions {
-      data?: TypedArray | GlslPrimitive[]
-
-      /** If data is null or not present reserves space for the buffer	 */
-      length?: number
-
-      /** Sets array buffer usage hint	*/
-      usage?: 'static' | 'dynamic' | 'stream'
-    }
-    type BufferArgs = number | number[] | vec2[] | vec3[] | mat3[] | TypedArray | BufferOptions
-    interface Buffer {
-      (args: BufferArgs): void
-      stats: {
-        size: number
-      }
-      destroy(): void
-    }
-
-    interface ElementsOptions {
-      data?: TypedArray
-      usage?: 'static' | 'dynamic' | 'stream'
-      length?: number
-      primitive?: GlslPrimitive
-      count?: number
-    }
-    type ElementsArgs = vec3[] | ElementsOptions
-    interface Elements {
-      (args: ElementsArgs): void
-      destroy(): void
-    }
-
-    type MagFilter = 'nearest' | 'linear'
-    type MinFilter =
-      | 'nearest'
-      | 'linear'
-      | 'mipmap'
-      | 'linear mipmap linear'
-      | 'nearest mipmap linear'
-      | 'nearest mipmap nearest'
-    type WrapMode = 'repeat' | 'clamp' | 'mirror'
-    type TextureFormat =
-      | 'alpha'
-      | 'luminance'
-      | 'luminance alpha'
-      | 'rgb'
-      | 'rgba'
-      | 'rgba4'
-      | 'rgb5 a1'
-      | 'rgb565'
-      | 'srgb'
-      | 'srgba'
-      | 'depth'
-      | 'depth stencil'
-      | 'rgb s3tc dxt1'
-      | 'rgb s3tc dxt5'
-      | 'rgb atc'
-      | 'rgba atc explicit alpha'
-      | 'rgba atc interpolated alpha'
-      | 'rgb pvrtc 4bppv1'
-      | 'rgb pvrtc 2bppv1'
-      | 'rgba pvrtc 4bppv1'
-      | 'rgba pvrtc 2bppv1'
-      | 'rgb etc1'
-    type TextureType = 'uint8' | 'uint16' | 'float' | 'float32' | 'half float' | 'float16'
-    type ColorSpace = 'none' | 'browser'
-    type MipmapHint = "don't care" | 'dont care' | 'nice' | 'fast'
-
-    type TextureData =
-      | number[]
-      | number[][]
-      | TypedArray
-      | HTMLImageElement
-      | HTMLVideoElement
-      | HTMLCanvasElement
-      | CanvasRenderingContext2D
-    interface TextureOptions {
-      width?: number
-      height?: number
-      shape?: [number, number] | [number, number, number]
-      radius?: number
-
-      /** Sets magnification filter */
-      mag?: MagFilter
-      /** Sets minification filter */
-      min?: MinFilter
-      /** Sets wrap mode on S axis */
-      wrapS?: WrapMode
-      /** Sets wrap mode on T axis */
-      wrapT?: WrapMode
-      /** Sets number of anisotropic samples, requires EXT_texture_filter_anisotropic	*/
-      aniso?: number
-      format?: TextureFormat
-      type?: TextureType
-      mipmap?: MipmapHint | boolean
-      /** Flips textures vertically when uploading */
-      flipY?: boolean
-      /** Sets unpack alignment per pixel */
-      alignment?: number
-      /** Premultiply alpha when unpacking */
-      premultiplyAlpha?: boolean
-      colorSpace?: ColorSpace
-
-      copy?: boolean
-
-      data?: TextureData
-    }
-    type TextureArgs = TextureData | TextureOptions
-    interface Texture {
-      width: number
-      height: number
-
-      (args: TextureArgs): void
-      resize(width: number, height: number): void
-      destroy(): void
-      stats: {
-        size: number
-      }
-    }
-
-    // TODO(jlfwong): Cube maps
-    // TODO(jlfwong): Cubic frame buffers
-
-    interface RenderBufferOptions {
-      format?:
-        | 'rgba4'
-        | 'rgb565'
-        | 'rgb5 a1'
-        | 'depth'
-        | 'stencil'
-        | 'depth stencil'
-        | 'srgba'
-        | 'rgba16f'
-        | 'rgb16f'
-        | 'rgba32f'
-      width?: number
-      height?: number
-      shape?: [number, number]
-      radius?: number
-    }
-    interface RenderBuffer {
-      (options: RenderBufferOptions): void
-      resize(width: number, height: number): void
-      destroy(): void
-      stats: {
-        size: number
-      }
-    }
-
-    interface FramebufferOptions {
-      width?: number
-      height?: number
-      shape?: [number, number]
-      color?: RenderBuffer[] | Texture[]
-      depth?: boolean | RenderBuffer | Texture
-      stencil?: boolean | RenderBuffer | Texture
-      depthStencil?: boolean | RenderBuffer | Texture
-      colorFormat?:
-        | 'rgba'
-        | 'rgba4'
-        | 'rgb565'
-        | 'rgb5 a1'
-        | 'rgb16f'
-        | 'rgba16f'
-        | 'rgba32f'
-        | 'srgba'
-      colorType?: 'uint8' | 'half float' | 'float'
-    }
-    interface Framebuffer {
-      width: number
-      height: number
-      color?: RenderBuffer[]
-      depth?: RenderBuffer
-
-      (options: FramebufferOptions): void
-      use(cb: (context: Context) => void): void
-      resize(width: number, height: number): void
-      destroy(): void
-    }
-
-    type Uniform = number | vec2 | vec3 | mat3 | Texture
-
-    interface AttributeOptions {
-      buffer?: Buffer | BufferArgs
-      offset?: number
-      stride?: number
-      normalized?: boolean
-      size?: number
-      divisor?: number
-    }
-    type Attribute =
-      | AttributeOptions
-      | Buffer
-      | BufferArgs
-      | {constant: number | vec2 | vec3 | vec4 | mat3 | mat4}
-
-    interface Computed<P, T> {
-      (context: Context, props: P, batchId: number): T
-    }
-    type MaybeComputed<P, T> = Computed<P, T> | T
-
-    type DepthFunction =
-      | 'never'
-      | 'always'
-      | '<'
-      | 'less'
-      | '<='
-      | 'lequal'
-      | '>'
-      | 'greater'
-      | '>='
-      | 'gequal'
-      | '='
-      | 'equal'
-      | '!='
-      | 'notequal'
-    type BlendFunction =
-      | 0
-      | 'zero'
-      | 1
-      | 'one'
-      | 'src color'
-      | 'one minus src color'
-      | 'src alpha'
-      | 'one minus src alpha'
-      | 'dst color'
-      | 'one minus dst color'
-      | 'dst alpha'
-      | 'one minus dst alpha'
-      | 'constant color'
-      | 'one minus constant color'
-      | 'one minus constant alpha'
-      | 'src alpha saturate'
-    type BlendEquation = 'add' | 'subtract' | 'reverse subtract' | 'min' | 'max'
-    type StencilFunction = DepthFunction
-    type StencilOp =
-      | 'zero'
-      | 'keep'
-      | 'replace'
-      | 'invert'
-      | 'increment'
-      | 'decrement'
-      | 'increment wrap'
-      | 'decrement wrap'
-    interface CommandOptions<P> {
-      /** Source code of vertex shader */
-      vert?: string
-
-      /** Source code of fragment shader */
-      frag?: string
-
-      context?: {[contextName: string]: MaybeComputed<P, any>}
-
-      uniforms?: {[uniformName: string]: MaybeComputed<P, Uniform>}
-
-      attributes?: {[attributeName: string]: MaybeComputed<P, Attribute>}
-
-      primitive?: DrawMode
-
-      /** Number of vertices to draw */
-      count?: MaybeComputed<P, number>
-
-      /** Offset of primitives to draw */
-      offset?: MaybeComputed<P, number>
-
-      /** Number of instances to render	 */
-      instances?: MaybeComputed<P, number>
-
-      /** Element array buffer */
-      elements?: MaybeComputed<P, Elements | ElementsArgs>
-
-      framebuffer?: MaybeComputed<P, Framebuffer>
-
-      profile?: MaybeComputed<P, boolean>
-
-      depth?: MaybeComputed<
-        P,
-        {
-          enable?: boolean
-          mask?: boolean
-          func?: DepthFunction
-          range?: [number, number]
-        }
-      >
-
-      blend?: MaybeComputed<
-        P,
-        {
-          enable?: boolean
-          func?:
-            | {
-                src: BlendFunction
-                dst: BlendFunction
-              }
-            | {
-                srcRGB: BlendFunction
-                srcAlpha: BlendFunction
-                dstRGB: BlendFunction
-                dstAlpha: BlendFunction
-              }
-          equation?:
-            | BlendEquation
-            | {
-                rgb: BlendEquation
-                alpha: BlendEquation
-              }
-          color?: vec4
-        }
-      >
-
-      stencil?: MaybeComputed<
-        P,
-        {
-          enable?: boolean
-          mask?: number
-          func?: StencilFunction
-          opFront?: {fail: StencilOp; zfail: StencilOp; pass: StencilOp}
-          opBack?: {fail: StencilOp; zfail: StencilOp; pass: StencilOp}
-        }
-      >
-
-      polygonOffset?: MaybeComputed<
-        P,
-        {
-          enable?: boolean
-          offset?: {
-            factor: number
-            units: number
-          }
-        }
-      >
-
-      cull?: MaybeComputed<
-        P,
-        {
-          enable?: boolean
-          face?: 'front' | 'back'
-        }
-      >
-
-      frontFace?: MaybeComputed<P, 'cw' | 'ccw'>
-
-      dither?: MaybeComputed<P, boolean>
-
-      lineWidth?: MaybeComputed<P, number>
-
-      colorMask?: MaybeComputed<P, [boolean, boolean, boolean, boolean]>
-
-      sample?: MaybeComputed<
-        P,
-        {
-          enable?: boolean
-          alpha?: boolean
-          coverage?: {
-            value: number
-            invert: boolean
-          }
-        }
-      >
-
-      scissor?: MaybeComputed<
-        P,
-        {
-          enable?: boolean
-          box?: {
-            x: number
-            y: number
-            width: number
-            height: number
-          }
-        }
-      >
-
-      viewport?: MaybeComputed<
-        P,
-        {
-          x: number
-          y: number
-          width: number
-          height: number
-        }
-      >
-    }
-
-    function prop<P>(name: keyof P): (context: Context, props: P, batchId: number) => P[keyof P]
-    function context<P>(
-      name: keyof Context,
-    ): (context: Context, props: P, batchId: number) => Context[keyof Context]
-
-    interface Command<P> {
-      /** One shot rendering */
-      (): void
-      (p: P): void
-
-      /** Render a batch */
-      (ps: P[]): void
-
-      /** Scoped commands */
-      (cb: (context: Context) => void): void
-      (p: P, cb: (context: Context) => void): void
-
-      stats: {
-        gpuTime: number
-        cpuTime: number
-        hitCount: number
-      }
-    }
-  }
-
-  export default regl
-}

src/views/application-container.tsx

@@ -1,8 +1,9 @@
 import {createContainer, Dispatch, bindActionCreator, ActionCreator} from '../lib/typed-redux'
 import {Application, ActiveProfileState} from './application'
 import {ApplicationState} from '../store'
-import {getProfileToView} from '../store/getters'
+import {getProfileToView, getCanvasContext} from '../store/getters'
 import {actions} from '../store/actions'
+import {Graphics} from '../gl/graphics'
 
 export const ApplicationContainer = createContainer(
   Application,
@@ -26,6 +27,8 @@ export const ApplicationContainer = createContainer(
       return bindActionCreator(dispatch, actionCreator)
     }
 
+    // TODO(jlfwong): Cache this and resizeCanvas below to prevent re-renders
+    // due to changing props.
     const setters = {
       setGLCanvas: wrapActionCreator(actions.setGLCanvas),
       setLoading: wrapActionCreator(actions.setLoading),
@@ -40,6 +43,19 @@ export const ApplicationContainer = createContainer(
     return {
       activeProfileState,
       dispatch,
+      canvasContext: state.glCanvas ? getCanvasContext(state.glCanvas) : null,
+      resizeCanvas: (
+        widthInPixels: number,
+        heightInPixels: number,
+        widthInAppUnits: number,
+        heightInAppUnits: number,
+      ) => {
+        if (state.glCanvas) {
+          const gl = getCanvasContext(state.glCanvas).gl
+          gl.resize(widthInPixels, heightInPixels, widthInAppUnits, heightInAppUnits)
+          gl.clear(new Graphics.Color(1, 1, 1, 1))
+        }
+      },
       ...setters,
       ...state,
     }

src/views/application.tsx

@@ -12,12 +12,36 @@ import {StatelessComponent} from '../lib/typed-redux'
 import {LeftHeavyFlamechartView, ChronoFlamechartView} from './flamechart-view-container'
 import {SandwichViewState} from '../store/sandwich-view-state'
 import {FlamechartViewState} from '../store/flamechart-view-state'
+import {CanvasContext} from '../gl/canvas-context'
+import {Graphics} from '../gl/graphics'
 
 const importModule = import('../import')
 // Force eager loading of the module
 importModule.then(() => {})
-async function importProfiles(fileName: string, contents: string): Promise<ProfileGroup | null> {
-  return (await importModule).importProfileGroup(fileName, contents)
+
+async function importProfilesFromText(
+  fileName: string,
+  contents: string,
+): Promise<ProfileGroup | null> {
+  return (await importModule).importProfileGroupFromText(fileName, contents)
+}
+
+async function importProfilesFromBase64(
+  fileName: string,
+  contents: string,
+): Promise<ProfileGroup | null> {
+  return (await importModule).importProfileGroupFromBase64(fileName, contents)
+}
+
+async function importProfilesFromArrayBuffer(
+  fileName: string,
+  contents: ArrayBuffer,
+): Promise<ProfileGroup | null> {
+  return (await importModule).importProfilesFromArrayBuffer(fileName, contents)
+}
+
+async function importProfilesFromFile(file: File): Promise<ProfileGroup | null> {
+  return (await importModule).importProfilesFromFile(file)
 }
 async function importFromFileSystemDirectoryEntry(entry: FileSystemDirectoryEntry) {
   return (await importModule).importFromFileSystemDirectoryEntry(entry)
@@ -168,6 +192,7 @@ export class Toolbar extends StatelessComponent<ToolbarProps> {
 }
 
 interface GLCanvasProps {
+  canvasContext: CanvasContext | null
   setGLCanvas: (canvas: HTMLCanvasElement | null) => void
 }
 export class GLCanvas extends Component<GLCanvasProps, void> {
@@ -183,37 +208,66 @@ export class GLCanvas extends Component<GLCanvasProps, void> {
     this.props.setGLCanvas(this.canvas)
   }
 
-  private maybeResize() {
-    if (!this.canvas) return
-    let {width, height} = this.canvas.getBoundingClientRect()
-    width = Math.floor(width) * window.devicePixelRatio
-    height = Math.floor(height) * window.devicePixelRatio
+  private container: HTMLElement | null = null
+  private containerRef = (container?: Element) => {
+    if (container instanceof HTMLElement) {
+      this.container = container
+    } else {
+      this.container = null
+    }
+  }
 
-    // Still initializing: don't resize yet
-    if (width < 4 || height < 4) return
-    const oldWidth = this.canvas.width
-    const oldHeight = this.canvas.height
+  private maybeResize = () => {
+    if (!this.container) return
+    if (!this.props.canvasContext) return
 
-    // Already at the right size
-    if (width === oldWidth && height === oldHeight) return
+    let {width, height} = this.container.getBoundingClientRect()
 
-    this.canvas.width = width
-    this.canvas.height = height
+    const widthInAppUnits = width
+    const heightInAppUnits = height
+    const widthInPixels = width * window.devicePixelRatio
+    const heightInPixels = height * window.devicePixelRatio
+
+    this.props.canvasContext.gl.resize(
+      widthInPixels,
+      heightInPixels,
+      widthInAppUnits,
+      heightInAppUnits,
+    )
+    this.props.canvasContext.gl.clear(new Graphics.Color(1, 1, 1, 1))
   }
 
   onWindowResize = () => {
-    this.maybeResize()
-    window.addEventListener('resize', this.onWindowResize)
+    if (this.props.canvasContext) {
+      this.props.canvasContext.requestFrame()
+    }
+  }
+  componentWillReceiveProps(nextProps: GLCanvasProps) {
+    if (this.props.canvasContext !== nextProps.canvasContext) {
+      if (this.props.canvasContext) {
+        this.props.canvasContext.removeBeforeFrameHandler(this.maybeResize)
+      }
+      if (nextProps.canvasContext) {
+        nextProps.canvasContext.addBeforeFrameHandler(this.maybeResize)
+        nextProps.canvasContext.requestFrame()
+      }
+    }
   }
   componentDidMount() {
     window.addEventListener('resize', this.onWindowResize)
-    requestAnimationFrame(() => this.maybeResize())
   }
   componentWillUnmount() {
+    if (this.props.canvasContext) {
+      this.props.canvasContext.removeBeforeFrameHandler(this.maybeResize)
+    }
     window.removeEventListener('resize', this.onWindowResize)
   }
   render() {
-    return <canvas className={css(style.glCanvasView)} ref={this.ref} width={1} height={1} />
+    return (
+      <div ref={this.containerRef} className={css(style.glCanvasView)}>
+        <canvas ref={this.ref} width={1} height={1} />
+      </div>
+    )
   }
 }
 
@@ -235,6 +289,7 @@ export type ApplicationProps = ApplicationState & {
   setFlattenRecursion: (flattenRecursion: boolean) => void
   setProfileIndexToView: (profileIndex: number) => void
   activeProfileState: ActiveProfileState | null
+  canvasContext: CanvasContext | null
 }
 
 export class Application extends StatelessComponent<ApplicationProps> {
@@ -255,11 +310,15 @@ export class Application extends StatelessComponent<ApplicationProps> {
       return
     }
 
+    // TODO(jlfwong): Make these into nicer overlays
     if (profileGroup == null) {
-      // TODO(jlfwong): Make this a nicer overlay
       alert('Unrecognized format! See documentation about supported formats.')
       this.props.setLoading(false)
       return
+    } else if (profileGroup.profiles.length === 0) {
+      alert("Successfully imported profile, but it's empty!")
+      this.props.setLoading(false)
+      return
     }
 
     if (this.props.hashParams.title) {
@@ -287,16 +346,7 @@ export class Application extends StatelessComponent<ApplicationProps> {
 
   loadFromFile(file: File) {
     this.loadProfile(async () => {
-      const reader = new FileReader()
-      const loadPromise = new Promise(resolve => reader.addEventListener('loadend', resolve))
-      reader.readAsText(file)
-      await loadPromise
-
-      if (typeof reader.result !== 'string') {
-        throw new Error('Expected ArrayBuffer')
-      }
-
-      const profiles = await importProfiles(file.name, reader.result)
+      const profiles = await importProfilesFromFile(file)
       if (profiles) {
         for (let profile of profiles.profiles) {
           if (!profile.getName()) {
@@ -311,7 +361,19 @@ export class Application extends StatelessComponent<ApplicationProps> {
         // a symbol map. If that's the case, we want to parse it, and apply the symbol
         // mapping to the already loaded profile. This can be use to take an opaque
         // profile and make it readable.
-        const map = importEmscriptenSymbolMap(reader.result)
+        const reader = new FileReader()
+        const fileContentsPromise = new Promise<string>(resolve => {
+          reader.addEventListener('loadend', () => {
+            if (typeof reader.result !== 'string') {
+              throw new Error('Expected reader.result to be a string')
+            }
+            resolve(reader.result)
+          })
+        })
+        reader.readAsText(file)
+        const fileContents = await fileContentsPromise
+
+        const map = importEmscriptenSymbolMap(fileContents)
         if (map) {
           const {profile, index} = this.props.activeProfileState
           console.log('Importing as emscripten symbol map')
@@ -332,7 +394,7 @@ export class Application extends StatelessComponent<ApplicationProps> {
     this.loadProfile(async () => {
       const filename = 'perf-vertx-stacks-01-collapsed-all.txt'
       const data = await fetch(exampleProfileURL).then(resp => resp.text())
-      return await importProfiles(filename, data)
+      return await importProfilesFromText(filename, data)
     })
   }
 
@@ -430,7 +492,7 @@ export class Application extends StatelessComponent<ApplicationProps> {
 
     const pasted = (ev as ClipboardEvent).clipboardData.getData('text')
     this.loadProfile(async () => {
-      return await importProfiles('From Clipboard', pasted)
+      return await importProfilesFromText('From Clipboard', pasted)
     })
   }
 
@@ -456,12 +518,12 @@ export class Application extends StatelessComponent<ApplicationProps> {
         return
       }
       this.loadProfile(async () => {
-        const response = await fetch(this.props.hashParams.profileURL!)
+        const response: Response = await fetch(this.props.hashParams.profileURL!)
         let filename = new URL(this.props.hashParams.profileURL!).pathname
         if (filename.includes('/')) {
           filename = filename.slice(filename.lastIndexOf('/') + 1)
         }
-        return await importProfiles(filename, await response.text())
+        return await importProfilesFromArrayBuffer(filename, await response.arrayBuffer())
       })
     } else if (this.props.hashParams.localProfilePath) {
       // There isn't good cross-browser support for XHR of local files, even from
@@ -469,8 +531,7 @@ export class Application extends StatelessComponent<ApplicationProps> {
       // as a JavaScript file which will invoke a global function.
       ;(window as any)['speedscope'] = {
         loadFileFromBase64: (filename: string, base64source: string) => {
-          const source = atob(base64source)
-          this.loadProfile(() => importProfiles(filename, source))
+          this.loadProfile(() => importProfilesFromBase64(filename, base64source))
         },
       }
 
@@ -608,7 +669,7 @@ export class Application extends StatelessComponent<ApplicationProps> {
         onDragLeave={this.onDragLeave}
         className={css(style.root, this.props.dragActive && style.dragTargetRoot)}
       >
-        <GLCanvas setGLCanvas={this.props.setGLCanvas} />
+        <GLCanvas setGLCanvas={this.props.setGLCanvas} canvasContext={this.props.canvasContext} />
         <Toolbar
           saveFile={this.saveFile}
           browseForFile={this.browseForFile}

src/views/flamechart-minimap-view.tsx

@@ -6,7 +6,6 @@ import {FlamechartRenderer} from '../gl/flamechart-renderer'
 import {style} from './flamechart-style'
 import {FontFamily, FontSize, Colors, Sizes, commonStyle} from './style'
 import {CanvasContext} from '../gl/canvas-context'
-import {TextureCachedRenderer} from '../gl/texture-cached-renderer'
 import {cachedMeasureTextWidth} from '../lib/text-utils'
 
 interface FlamechartMinimapViewProps {
@@ -71,45 +70,13 @@ export class FlamechartMinimapView extends Component<FlamechartMinimapViewProps,
     return AffineTransform.withTranslation(new Vec2(-bounds.left, -bounds.top))
   }
 
-  private cachedRenderer: TextureCachedRenderer<{
-    physicalSize: Vec2
-  }> | null = null
   private renderRects() {
     if (!this.container) return
 
     // Hasn't resized yet -- no point in rendering yet
     if (this.physicalViewSize().x < 2) return
 
-    if (!this.cachedRenderer) {
-      this.cachedRenderer = this.props.canvasContext.createTextureCachedRenderer({
-        shouldUpdate(oldProps, newProps) {
-          if (!oldProps.physicalSize.equals(newProps.physicalSize)) {
-            return true
-          }
-          return false
-        },
-        render: props => {
-          this.props.flamechartRenderer.render({
-            physicalSpaceDstRect: new Rect(
-              this.minimapOrigin(),
-              this.physicalViewSize().minus(this.minimapOrigin()),
-            ),
-            configSpaceSrcRect: new Rect(new Vec2(0, 0), this.configSpaceSize()),
-            renderOutlines: false,
-          })
-        },
-      })
-    }
-
-    this.props.canvasContext.renderInto(this.container, context => {
-      // TODO(jlfwong): Switch back to the texture cached renderer once I figure out
-      // how to resize a framebuffer while another framebuffer is active. It seems
-      // to crash regl. I should submit a reduced repro case and hopefully get it fixed?
-      /*
-      this.cachedRenderer!.render({
-        physicalSize: this.physicalViewSize()
-      })
-      */
+    this.props.canvasContext.renderBehind(this.container, () => {
       this.props.flamechartRenderer.render({
         configSpaceSrcRect: new Rect(new Vec2(0, 0), this.configSpaceSize()),
         physicalSpaceDstRect: new Rect(
@@ -118,7 +85,8 @@ export class FlamechartMinimapView extends Component<FlamechartMinimapViewProps,
         ),
         renderOutlines: false,
       })
-      this.props.canvasContext.drawViewportRectangle({
+
+      this.props.canvasContext.viewportRectangleRenderer.render({
         configSpaceViewportRect: this.props.configSpaceViewportRect,
         configSpaceToPhysicalViewSpace: this.configSpaceToPhysicalViewSpace(),
       })
@@ -190,9 +158,6 @@ export class FlamechartMinimapView extends Component<FlamechartMinimapViewProps,
 
   componentWillReceiveProps(nextProps: FlamechartMinimapViewProps) {
     if (this.props.flamechart !== nextProps.flamechart) {
-      if (this.cachedRenderer) {
-        this.cachedRenderer.setDirty()
-      }
       this.renderCanvas()
     } else if (this.props.configSpaceViewportRect != nextProps.configSpaceViewportRect) {
       this.renderCanvas()
@@ -409,7 +374,7 @@ export class FlamechartMinimapView extends Component<FlamechartMinimapViewProps,
     }
   }
 
-  private onMouseLeave = (ev: MouseEvent) => {
+  private onMouseLeave = () => {
     if (this.draggingMode == null) {
       document.body.style.cursor = 'default'
     }

src/views/flamechart-pan-zoom-view.tsx

@@ -227,22 +227,24 @@ export class FlamechartPanZoomView extends Component<FlamechartPanZoomViewProps,
           )
         }
 
-        const trimmedText = trimTextMid(
-          ctx,
-          frame.node.frame.name,
-          physicalLabelBounds.width() - 2 * LABEL_PADDING_PX,
-        )
+        if (physicalLabelBounds.width() > minWidthToRender) {
+          const trimmedText = trimTextMid(
+            ctx,
+            frame.node.frame.name,
+            physicalLabelBounds.width() - 2 * LABEL_PADDING_PX,
+          )
 
-        // Note that this is specifying the position of the starting text
-        // baseline.
-        ctx.fillText(
-          trimmedText,
-          physicalLabelBounds.left() + LABEL_PADDING_PX,
-          Math.round(
-            physicalLabelBounds.bottom() -
-              (physicalViewSpaceFrameHeight - physicalViewSpaceFontSize) / 2,
-          ),
-        )
+          // Note that this is specifying the position of the starting text
+          // baseline.
+          ctx.fillText(
+            trimmedText,
+            physicalLabelBounds.left() + LABEL_PADDING_PX,
+            Math.round(
+              physicalLabelBounds.bottom() -
+                (physicalViewSpaceFrameHeight - physicalViewSpaceFontSize) / 2,
+            ),
+          )
+        }
       }
       for (let child of frame.children) {
         renderFrameLabelAndChildren(child, depth + 1)
@@ -410,7 +412,7 @@ export class FlamechartPanZoomView extends Component<FlamechartPanZoomViewProps,
 
     if (this.props.configSpaceViewportRect.isEmpty()) return
 
-    this.props.canvasContext.renderInto(this.container, context => {
+    this.props.canvasContext.renderBehind(this.container, () => {
       this.props.flamechartRenderer.render({
         physicalSpaceDstRect: this.physicalBounds(),
         configSpaceSrcRect: this.props.configSpaceViewportRect,
@@ -658,15 +660,20 @@ export class FlamechartPanZoomView extends Component<FlamechartPanZoomViewProps,
 
     if (ev.ctrlKey || ev.shiftKey || ev.metaKey) return
 
+    // NOTE: We intentionally use ev.code rather than ev.key for
+    // WASD in order to have the keys retain the same layout even
+    // if the keyboard layout is not QWERTY.
+    //
+    // See: https://github.com/jlfwong/speedscope/pull/184
     if (ev.key === '0') {
       this.zoom(new Vec2(width / 2, height / 2), 1e9)
-    } else if (ev.key === 'ArrowRight' || ev.key === 'd') {
+    } else if (ev.key === 'ArrowRight' || ev.code === 'KeyD') {
       this.pan(new Vec2(100, 0))
-    } else if (ev.key === 'ArrowLeft' || ev.key === 'a') {
+    } else if (ev.key === 'ArrowLeft' || ev.code === 'KeyA') {
       this.pan(new Vec2(-100, 0))
-    } else if (ev.key === 'ArrowUp' || ev.key === 'w') {
+    } else if (ev.key === 'ArrowUp' || ev.code === 'KeyW') {
       this.pan(new Vec2(0, -100))
-    } else if (ev.key === 'ArrowDown' || ev.key === 's') {
+    } else if (ev.key === 'ArrowDown' || ev.code === 'KeyS') {
       this.pan(new Vec2(0, 100))
     } else if (ev.key === 'Escape') {
       this.props.onNodeSelect(null)

src/views/flamechart-view-container.tsx

@@ -103,7 +103,14 @@ export const createMemoizedFlamechartRenderer = (options?: FlamechartRendererOpt
       canvasContext: CanvasContext
       flamechart: Flamechart
     }): FlamechartRenderer => {
-      return new FlamechartRenderer(canvasContext, getRowAtlas(canvasContext), flamechart, options)
+      return new FlamechartRenderer(
+        canvasContext.gl,
+        getRowAtlas(canvasContext),
+        flamechart,
+        canvasContext.rectangleBatchRenderer,
+        canvasContext.flamechartColorPassRenderer,
+        options,
+      )
     },
   )