1.13.0

Update a few remaining references to amster (#333 )
Fixes #332
2021-02-14 23:36:12 -08:00 · 2021-02-14 23:31:33 -08:00 · 2021-02-14 23:14:58 -08:00 · 2020-11-12 02:35:59 -08:00 · 2020-11-12 02:34:19 -08:00 · 2020-11-12 01:57:41 -08:00
120 changed files with 23701 additions and 1773 deletions
@@ -0,0 +1,43 @@
+name: Node.js CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm test
+        env:
+          CI: true
+
+      - name: Coveralls Parallel
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.github_token }}
+          flag-name: run-${{ matrix.node-version }}
+          parallel: true
+
+  finish:
+    needs: test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Coveralls Finished
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.github_token }}
+          parallel-finished: true
@@ -1,6 +0,0 @@
-language: node_js
-node_js:
-  - '10'
-  - '12'
-  - '13'
-  - 'node'
@@ -1,4 +1,63 @@
-## Unreleased
+## [1.13.0] - 2021-02-14
+
+### Added
+
+- Support for importing callgrind profiles [[#331](https://github.com/jlfwong/speedscope/pull/331)]
+
+## [1.12.1] - 2020-11-12
+
+### Fixed
+
+- Fixed for retina displays [[#327](https://github.com/jlfwong/speedscope/issues/327)]
+
+## [1.12.0] - 2020-11-12
+
+### Added
+
+- Dark mode! [[#323](https://github.com/jlfwong/speedscope/pull/323)]
+
+### Fixed
+
+- Fixed incorrect highlighting when search result overlaps "…" [[#326](https://github.com/jlfwong/speedscope/pull/326)]
+
+## [1.11.1] - 2020-10-25
+
+### Fixed
+
+- Fix trace-event import for many cases where there are 'ts' collisions [[#322](https://github.com/jlfwong/speedscope/pull/322)]
+- Fix import of trace event files where B/E events' args don't match [[#321](https://github.com/jlfwong/speedscope/pull/321)]
+
+## [1.11.0] - 2020-10-13
+
+### Added
+
+- Support remapping profiles using source maps [[#317](https://github.com/jlfwong/speedscope/pull/317)]
+
+### Fixed
+
+- Fix line & column numbers in imports from Chrome & Firefox [[#318](https://github.com/jlfwong/speedscope/pull/318)]
+
+## [1.10.0] - 2020-09-29
+
+### Added
+
+- Support for importing profiles from Safari [[#300](https://github.com/jlfwong/speedscope/pull/300)] (by [@radex](https://github.com/radex))
+
+### Fixed
+
+- Fixed browser not opening on Windows when using the CLI [[#307](https://github.com/jlfwong/speedscope/pull/307)] (by [@spillerrec](https://github.com/spillerrec))
+- Fixed import of UTF-16 encoded files w/ BOM [[#314](https://github.com/jlfwong/speedscope/pull/314)]
+- Removed accidental dependency on React [[#315](https://github.com/jlfwong/speedscope/pull/315)]
+
+## [1.9.0] - 2020-08-05
+
+### Added
+
+- Provide prev/next buttons to cycle through search results, make search results more visually prominen [[#304](https://github.com/jlfwong/speedscope/pull/304)]
+
+### Fixed
+
+- Fix accumulated errors in Chrome profile imports caused by zeroed negative timeDeltas [[#305](https://github.com/jlfwong/speedscope/pull/305)] (by [@taneliang](https://github.com/taneliang))

 ## [1.8.0] - 2020-07-19

@@ -36,6 +36,7 @@ speedscope is designed to ingest profiles from a variety of different profilers
 - JavaScript
  - [Importing from Chrome](https://github.com/jlfwong/speedscope/wiki/Importing-from-Chrome)
  - [Importing from Firefox](https://github.com/jlfwong/speedscope/wiki/Importing-from-Firefox)
+  - [Importing from Safari](https://github.com/jlfwong/speedscope/wiki/Importing-from-Safari)
  - [Importing from Node.js](https://github.com/jlfwong/speedscope/wiki/Importing-from-Node.js)
 - Ruby
  - [Importing from stackprof](https://github.com/jlfwong/speedscope/wiki/Importing-from-stackprof-(ruby))
@@ -44,6 +45,7 @@ speedscope is designed to ingest profiles from a variety of different profilers
 - Python
  - [Importing from py-spy](https://github.com/jlfwong/speedscope/wiki/Importing-from-py-spy-(python))
  - [pyspeedscope](https://github.com/windelbouwman/pyspeedscope)
+  - [Importing from Austin](https://github.com/P403n1x87/austin-python#format-conversion)
 - Go
  - [Importing from pprof](https://github.com/jlfwong/speedscope/wiki/Importing-from-pprof-(go))  
 - Rust
@@ -116,6 +118,7 @@ Once a profile has loaded, the main view is split into two: the top area is the
 * `n`: Go to next profile/thread if one is available
 * `p`: Go to previous profile/thread if one is available
 * `t`: Open the profile/thread selector if available
+* `Cmd+F`/`Ctrl+F`: to open search. While open, `Enter` and `Shift+Enter` cycle through results

 ## Contributing

@@ -4,7 +4,7 @@ const fs = require('fs')
 const os = require('os')
 const stream = require('stream')

-const opn = require('opn')
+const open = require('open')

 const helpString = `Usage: speedscope [filepath]

@@ -89,7 +89,11 @@ async function main() {

  console.log('Opening', urlToOpen, 'in your default browser')

-  await opn(urlToOpen, {wait: false})
+  // We'd like to avoid blocking the terminal on the browsing closing,
+  // but for some reason this doesn't work at all on Windows if we
+  // don't use wait: true.
+  const wait = process.platform === "win32";
+  await open(urlToOpen, {wait})
 }

 main()
@@ -1,6 +1,6 @@
 {
  "name": "speedscope",
-  "version": "1.5.3",
+  "version": "1.11.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -1432,6 +1432,12 @@
          "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
        }
      }
    },
@@ -1457,6 +1463,12 @@
          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
        }
      }
    },
@@ -1518,6 +1530,12 @@
          "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
        }
      }
    },
@@ -3423,27 +3441,6 @@
        "parse-json": "^4.0.0"
      }
    },
-    "coveralls": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/coveralls/-/coveralls-3.0.1.tgz",
-      "integrity": "sha512-FAzXwiDOYLGDWH+zgoIA+8GbWv50hlx+kpEJyvzLKOdnIBv9uWoVl4DhqGgyUHpiRjAlF8KYZSipWXYtllWH6Q==",
-      "dev": true,
-      "requires": {
-        "js-yaml": "^3.6.1",
-        "lcov-parse": "^0.0.10",
-        "log-driver": "^1.2.5",
-        "minimist": "^1.2.0",
-        "request": "^2.79.0"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "dev": true
-        }
-      }
-    },
    "create-ecdh": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz",
@@ -3653,6 +3650,14 @@
      "requires": {
        "mdn-data": "2.0.4",
        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
      }
    },
    "css-what": {
@@ -3761,6 +3766,14 @@
          "requires": {
            "mdn-data": "2.0.6",
            "source-map": "^0.6.1"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
          }
        },
        "mdn-data": {
@@ -4194,6 +4207,13 @@
          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=",
          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
        }
      }
    },
@@ -5793,15 +5813,6 @@
        "minimalistic-crypto-utils": "^1.0.1"
      }
    },
-    "hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dev": true,
-      "requires": {
-        "react-is": "^16.7.0"
-      }
-    },
    "hosted-git-info": {
      "version": "2.8.5",
      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
@@ -5882,6 +5893,14 @@
            "commander": "^2.20.0",
            "source-map": "~0.6.1",
            "source-map-support": "~0.5.12"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
          }
        }
      }
@@ -6249,6 +6268,11 @@
      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
      "dev": true
    },
+    "is-docker": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.1.1.tgz",
+      "integrity": "sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw=="
+    },
    "is-extendable": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -6397,7 +6421,8 @@
    "is-wsl": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
+      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
+      "dev": true
    },
    "isarray": {
      "version": "1.0.0",
@@ -6518,6 +6543,12 @@
          "requires": {
            "glob": "^7.1.3"
          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
        }
      }
    },
@@ -6876,6 +6907,14 @@
          "requires": {
            "buffer-from": "^1.0.0",
            "source-map": "^0.6.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
          }
        },
        "supports-color": {
@@ -7020,6 +7059,12 @@
          "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
        }
      }
    },
@@ -7076,7 +7121,8 @@
    "js-tokens": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
+      "dev": true
    },
    "js-yaml": {
      "version": "3.13.1",
@@ -7283,12 +7329,6 @@
      "integrity": "sha1-iAy4qrJWAmOC4C9T7AiWgqdMW2o=",
      "dev": true
    },
-    "lcov-parse": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/lcov-parse/-/lcov-parse-0.0.10.tgz",
-      "integrity": "sha1-GwuP+ayceIklBYK3C3ExXZ2m2aM=",
-      "dev": true
-    },
    "left-pad": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
@@ -7395,12 +7435,6 @@
      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
      "dev": true
    },
-    "log-driver": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/log-driver/-/log-driver-1.2.7.tgz",
-      "integrity": "sha512-U7KCmLdqsGHBLeWqYlFA0V0Sl6P08EE1ZrmA9cxjUE0WVqT9qnyVDPz1kzpFEP0jdJuFnasWIfSd7fsaNXkpbg==",
-      "dev": true
-    },
    "log-symbols": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
@@ -7420,6 +7454,7 @@
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
      "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
+      "dev": true,
      "requires": {
        "js-tokens": "^3.0.0"
      }
@@ -7885,7 +7920,8 @@
    "object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
    },
    "object-copy": {
      "version": "0.1.0",
@@ -8139,10 +8175,30 @@
        "mimic-fn": "^1.0.0"
      }
    },
+    "open": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.2.0.tgz",
+      "integrity": "sha512-4HeyhxCvBTI5uBePsAdi55C5fmqnWZ2e2MlmvWi5KW5tdH5rxoiv/aMtbeVxKZc3eWkT1GymMnLG8XC4Rq4TDQ==",
+      "requires": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "dependencies": {
+        "is-wsl": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+          "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+          "requires": {
+            "is-docker": "^2.0.0"
+          }
+        }
+      }
+    },
    "opn": {
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz",
      "integrity": "sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==",
+      "dev": true,
      "requires": {
        "is-wsl": "^1.1.0"
      }
@@ -8310,6 +8366,12 @@
          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==",
          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
        }
      }
    },
@@ -8568,6 +8630,12 @@
            }
          }
        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
        "supports-color": {
          "version": "6.1.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
@@ -8795,6 +8863,14 @@
            "chalk": "^2.4.1",
            "source-map": "^0.6.1",
            "supports-color": "^5.4.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
          }
        },
        "supports-color": {
@@ -8847,6 +8923,14 @@
            "chalk": "^2.4.1",
            "source-map": "^0.6.1",
            "supports-color": "^5.4.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
          }
        },
        "supports-color": {
@@ -8899,6 +8983,14 @@
            "chalk": "^2.4.1",
            "source-map": "^0.6.1",
            "supports-color": "^5.4.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
          }
        },
        "supports-color": {
@@ -8951,6 +9043,14 @@
            "chalk": "^2.4.1",
            "source-map": "^0.6.1",
            "supports-color": "^5.4.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
          }
        },
        "supports-color": {
@@ -9244,26 +9344,6 @@
        "sisteransi": "^1.0.3"
      }
    },
-    "prop-types": {
-      "version": "15.7.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "requires": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.8.1"
-      },
-      "dependencies": {
-        "loose-envify": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-          "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-          "requires": {
-            "js-tokens": "^3.0.0 || ^4.0.0"
-          }
-        }
-      }
-    },
    "protobufjs": {
      "version": "6.8.8",
      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.8.8.tgz",
@@ -9512,44 +9592,11 @@
      "integrity": "sha1-CMbgSgFo9utiHCKrbLEVG9n0pk0=",
      "dev": true
    },
-    "react": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
-      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
-      }
-    },
    "react-is": {
      "version": "16.12.0",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
-      "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
-    },
-    "react-redux": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz",
-      "integrity": "sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "hoist-non-react-statics": "^3.3.0",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.9.0"
-      },
-      "dependencies": {
-        "loose-envify": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-          "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-          "dev": true,
-          "requires": {
-            "js-tokens": "^3.0.0 || ^4.0.0"
-          }
-        }
-      }
+      "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==",
+      "dev": true
    },
    "read-pkg": {
      "version": "3.0.0",
@@ -10315,6 +10362,14 @@
      "requires": {
        "buffer-from": "^1.0.0",
        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
      }
    },
    "source-map-url": {
@@ -10418,6 +10473,15 @@
            "esutils": "^2.0.2",
            "optionator": "^0.8.1",
            "source-map": "~0.6.1"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true,
+              "optional": true
+            }
          }
        }
      }
@@ -11183,6 +11247,14 @@
        "commander": "^2.19.0",
        "source-map": "~0.6.1",
        "source-map-support": "~0.5.10"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
      }
    },
    "test-exclude": {
@@ -11616,6 +11688,12 @@
          "resolved": "https://registry.npmjs.org/commander/-/commander-2.12.2.tgz",
          "integrity": "sha512-BFnaq5ZOGcDN7FlrtBT4xxkgIToalIIxwjxLWVJ8bGTpe1LroqMiqQXdA7ygc7CRvaYS+9zfPGFnJqFSayx+AA==",
          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
        }
      }
    },
@@ -11671,6 +11749,15 @@
            "esutils": "^2.0.2",
            "optionator": "^0.8.1",
            "source-map": "~0.6.1"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true,
+              "optional": true
+            }
          }
        },
        "extend": {
@@ -1,6 +1,6 @@
 {
  "name": "speedscope",
-  "version": "1.8.0",
+  "version": "1.13.0",
  "description": "",
  "repository": "jlfwong/speedscope",
  "main": "index.js",
@@ -13,7 +13,7 @@
    "prettier": "prettier --write 'src/**/*.ts' 'src/**/*.tsx'",
    "lint": "eslint 'src/**/*.ts' 'src/**/*.tsx'",
    "jest": "./scripts/test-setup.sh && jest --runInBand",
-    "coverage": "npm run jest -- --coverage && coveralls < coverage/lcov.info",
+    "coverage": "npm run jest -- --coverage",
    "typecheck": "tsc --noEmit",
    "test": "./scripts/ci.sh",
    "serve": "parcel assets/index.html --open --no-autoinstall"
@@ -38,7 +38,6 @@
    "@typescript-eslint/parser": "2.33.0",
    "acorn": "7.2.0",
    "aphrodite": "2.1.0",
-    "coveralls": "3.0.1",
    "eslint": "6.0.0",
    "eslint-plugin-prettier": "2.6.0",
    "eslint-plugin-react-hooks": "4.0.2",
@@ -50,8 +49,8 @@
    "preact": "10.4.1",
    "prettier": "2.0.4",
    "protobufjs": "6.8.8",
-    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
+    "source-map": "0.6.1",
    "ts-jest": "24.3.0",
    "typescript": "3.9.2",
    "typescript-eslint-parser": "17.0.1",
@@ -79,7 +78,6 @@
    ]
  },
  "dependencies": {
-    "opn": "5.3.0",
-    "react": "^16.13.1"
+    "open": "7.2.0"
  }
 }
@@ -0,0 +1,24 @@
+# callgrind format
+events: Instructions
+
+fl=file1.c
+fn=main
+16 20
+cfn=func1
+calls=1 50
+16 400
+cfi=file2.c
+cfn=func2
+calls=3 20
+16 400
+
+fn=func1
+51 100
+cfi=file2.c
+cfn=func2
+calls=2 20
+51 300
+
+fl=file2.c
+fn=func2
+20 700
@@ -0,0 +1,29 @@
+version: 1
+creator: xdebug 3.0.2 (PHP 7.4.14)
+cmd: /var/www/html/index.php
+part: 1
+positions: line
+
+events: Time_(10ns) Memory_(bytes)
+
+fl=(1) file1.c
+fn=(1) main
+16 20 15000
+cfn=(2) func1
+calls=1 50
+16 400 20000
+cfi=(2) file2.c
+cfn=(3) func2
+calls=3 51
+16 400 3000
+
+fn=(2)
+51 100 4000
+cfi=(2)
+cfn=(3)
+calls=2 20
+51 300 5000
+
+fl=(2)
+fn=(3)
+20 700 6000
@@ -0,0 +1,24 @@
+# callgrind format
+events: Instructions
+
+fl=(1) file1.c
+fn=(1) main
+16 20
+cfn=(2) func1
+calls=1 50
+16 400
+cfi=(2) file2.c
+cfn=(3) func2
+calls=3 20
+16 400
+
+fn=(2)
+51 100
+cfi=(2)
+cfn=(3)
+calls=2 20
+51 300
+
+fl=(2)
+fn=(3)
+20 700
@@ -0,0 +1,4 @@
+This directory contains profiles & source-maps to test if source-map
+remapping of profiles is working correctly. See the corresponding
+"sourcemaps" directory in programs/javascript to see how these were
+generated.
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["gamma.ts", "beta.ts", "delta.ts", "alpha.ts", "kludge.ts", "typescript-source-map-test.ts"],
+  "sourcesContent": ["export const gamma = () => {\n  let prod = 1\n  for (let i = 1; i < 1000; i++) {\n    prod *= i\n  }\n  return prod\n}\n", "import {gamma} from './gamma'\n\nexport function beta() {\n  for (let i = 0; i < 10; i++) {\n    gamma()\n  }\n}\n", "import {gamma} from './gamma'\n\nexport const delta = function () {\n  for (let i = 0; i < 10; i++) {\n    gamma()\n  }\n}\n", "import {beta} from './beta'\nimport {delta} from './delta'\n\nexport function alpha() {\n  ;(function () {\n    for (let i = 0; i < 1000; i++) {\n      beta()\n      delta()\n    }\n  })()\n}\n", "import {alpha} from './alpha'\n\nexport class Kludge {\n  constructor() {\n    alpha()\n    console.log(this.floop)\n  }\n\n  zap() {\n    alpha()\n  }\n\n  get floop(): number {\n    alpha()\n    return 1\n  }\n}\n", "import {Kludge} from './kludge'\n\nconst k = new Kludge()\nk.zap()\n"],
+  "mappings": "MAAO,KAAM,GAAQ,KACnB,GAAI,GAAO,EACX,OAAS,GAAI,EAAG,EAAI,IAAM,IACxB,GAAQ,EAEV,MAAO,ICHF,aACL,OAAS,GAAI,EAAG,EAAI,GAAI,IACtB,ICFG,KAAM,GAAQ,WACnB,OAAS,GAAI,EAAG,EAAI,GAAI,IACtB,KCDG,aACJ,AAAC,YACA,OAAS,GAAI,EAAG,EAAI,IAAM,IACxB,IACA,QCPN,QAGE,cACE,IACA,QAAQ,IAAI,KAAK,OAGnB,MACE,OAGE,SACF,WACO,GCZX,KAAM,GAAI,GAAI,GACd,EAAE",
+  "names": []
+}
@@ -0,0 +1 @@
+{"version":3,"sources":["gamma.ts","beta.ts","delta.ts","alpha.ts","kludge.ts","typescript-source-map-test.ts"],"names":[],"mappings":";AAAO,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,WAAA,EAAA,IAAM,EAAQ,WAEd,IADD,IAAA,EAAO,EACF,EAAI,EAAG,EAAI,IAAM,IACxB,GAAQ,EAEH,OAAA,GALF,QAAA,MAAA;;ACMN,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,KAAA,EAND,IAAA,EAAA,QAAA,WAEM,SAAU,IACT,IAAA,IAAI,EAAI,EAAG,EAAI,GAAI,KACtB,EAAA,EAAA;;ACFG,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,WAAA,EAFP,IAAA,EAAA,QAAA,WAEa,EAAQ,WACd,IAAA,IAAI,EAAI,EAAG,EAAI,GAAI,KACtB,EAAA,EAAA,UAFG,QAAA,MAAA;;ACQN,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,MAAA,EAVD,IAAA,EAAA,QAAA,UACA,EAAA,QAAA,WAEM,SAAU,KACZ,WACK,IAAA,IAAI,EAAI,EAAG,EAAI,IAAM,KACxB,EAAA,EAAA,SACA,EAAA,EAAA,SAHF;;ACFJ,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,YAAA,EAFA,IAAA,EAAA,QAAA,WAEA,EAAA,WACE,SAAA,KACE,EAAA,EAAA,SACA,QAAQ,IAAI,KAAK,OAWrB,OARE,EAAA,UAAA,IAAA,YACE,EAAA,EAAA,UAGF,OAAA,eAAI,EAAA,UAAA,QAAK,CAAT,IAAA,WAES,OADP,EAAA,EAAA,SACO,GAFA,YAAA,EAVX,cAAA,IAcA,EAdA,GAAA,QAAA,OAAA;;ACCA,aAHA,IAAA,EAAA,QAAA,YAEM,EAAI,IAAI,EAAJ,OACV,EAAE","file":"typescript-source-map-test.js","sourceRoot":"..","sourcesContent":["export const gamma = () => {\n  let prod = 1\n  for (let i = 1; i < 1000; i++) {\n    prod *= i\n  }\n  return prod\n}\n","import {gamma} from './gamma'\n\nexport function beta() {\n  for (let i = 0; i < 10; i++) {\n    gamma()\n  }\n}\n","import {gamma} from './gamma'\n\nexport const delta = function () {\n  for (let i = 0; i < 10; i++) {\n    gamma()\n  }\n}\n","import {beta} from './beta'\nimport {delta} from './delta'\n\nexport function alpha() {\n  ;(function () {\n    for (let i = 0; i < 1000; i++) {\n      beta()\n      delta()\n    }\n  })()\n}\n","import {alpha} from './alpha'\n\nexport class Kludge {\n  constructor() {\n    alpha()\n    console.log(this.floop)\n  }\n\n  zap() {\n    alpha()\n  }\n\n  get floop(): number {\n    alpha()\n    return 1\n  }\n}\n","import {Kludge} from './kludge'\n\nconst k = new Kludge()\nk.zap()\n"]}
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://speedscope-sourcemap-test-project/./gamma.ts","webpack://speedscope-sourcemap-test-project/./beta.ts","webpack://speedscope-sourcemap-test-project/./delta.ts","webpack://speedscope-sourcemap-test-project/./alpha.ts","webpack://speedscope-sourcemap-test-project/./typescript-source-map-test.ts","webpack://speedscope-sourcemap-test-project/./kludge.ts"],"names":["gamma","prod","i","beta","delta","alpha","console","log","this","floop","zap"],"mappings":"mBAAO,IAAMA,EAAQ,WAEnB,IADA,IAAIC,EAAO,EACFC,EAAI,EAAGA,EAAI,IAAMA,IACxBD,GAAQC,EAEV,OAAOD,GCHF,SAASE,IACd,IAAK,IAAID,EAAI,EAAGA,EAAI,GAAIA,IACtBF,ICFG,IAAMI,EAAQ,WACnB,IAAK,IAAIF,EAAI,EAAGA,EAAI,GAAIA,IACtBF,KCDG,SAASK,KACb,WACC,IAAK,IAAIH,EAAI,EAAGA,EAAI,IAAMA,IACxBC,IACAC,IAHH,ICFO,ICAV,WACE,aACEC,IACAC,QAAQC,IAAIC,KAAKC,OAWrB,OARE,YAAAC,IAAA,WACEL,KAGF,sBAAI,oBAAK,C,IAAT,WAEE,OADAA,IACO,G,gCAEX,EAdA,KDCEK,O","file":"typescript-source-map-test.js","sourcesContent":["export const gamma = () => {\n  let prod = 1\n  for (let i = 1; i < 1000; i++) {\n    prod *= i\n  }\n  return prod\n}\n","import {gamma} from './gamma'\n\nexport function beta() {\n  for (let i = 0; i < 10; i++) {\n    gamma()\n  }\n}\n","import {gamma} from './gamma'\n\nexport const delta = function () {\n  for (let i = 0; i < 10; i++) {\n    gamma()\n  }\n}\n","import {beta} from './beta'\nimport {delta} from './delta'\n\nexport function alpha() {\n  ;(function () {\n    for (let i = 0; i < 1000; i++) {\n      beta()\n      delta()\n    }\n  })()\n}\n","import {Kludge} from './kludge'\n\nconst k = new Kludge()\nk.zap()\n","import {alpha} from './alpha'\n\nexport class Kludge {\n  constructor() {\n    alpha()\n    console.log(this.floop)\n  }\n\n  zap() {\n    alpha()\n  }\n\n  get floop(): number {\n    alpha()\n    return 1\n  }\n}\n"],"sourceRoot":""}
@@ -0,0 +1,25 @@
+[
+  { "pid": 0, "tid": 0, "ph": "B", "ts": 0, "name": "A" },
+  { "pid": 0, "tid": 0, "ph": "E", "ts": 2, "name": "A" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 0, "dur": 2, "name": "B" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 10, "dur": 2, "name": "C" },
+  { "pid": 0, "tid": 0, "ph": "B", "ts": 10, "name": "D" },
+  { "pid": 0, "tid": 0, "ph": "E", "ts": 12, "name": "D" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 20, "dur": 1, "name": "E" },
+  { "pid": 0, "tid": 0, "ph": "B", "ts": 20, "name": "F" },
+  { "pid": 0, "tid": 0, "ph": "E", "ts": 22, "name": "F" },
+
+  { "pid": 0, "tid": 0, "ph": "B", "ts": 30, "name": "G" },
+  { "pid": 0, "tid": 0, "ph": "E", "ts": 32, "name": "G" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 30, "dur": 1, "name": "H" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 41, "dur": 1, "name": "I" },
+  { "pid": 0, "tid": 0, "ph": "B", "ts": 40, "name": "J" },
+  { "pid": 0, "tid": 0, "ph": "E", "ts": 42, "name": "J" },
+
+  { "pid": 0, "tid": 0, "ph": "B", "ts": 50, "name": "K" },
+  { "pid": 0, "tid": 0, "ph": "E", "ts": 52, "name": "K" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 51, "dur": 1, "name": "L" }
+]
@@ -0,0 +1,5 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "alpha", "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "alpha", "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "beta", "ts": 2}
+]
@@ -0,0 +1,6 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 1}, "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "B", "args": {"x": 2}, "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "A", "args": {"x": 2}, "ts": 10},
+  {"pid": 0, "tid": 0, "ph": "X", "name": "Z", "args": {"x": 1}, "ts": 10, "dur": 1}
+]
@@ -0,0 +1,7 @@
+[
+  {"tid": 1, "ph": "X", "pid": 0, "name": "alpha", "args": {"x": 0}, "ts": 0, "dur": 10},
+  {"tid": 1, "ph": "B", "pid": 0, "name": "beta", "args": {"x": 0}, "ts": 1},
+  {"tid": 1, "ph": "B", "pid": 0, "name": "gamma", "args": {"x": 0}, "ts": 1},
+  {"tid": 1, "ph": "E", "pid": 0, "name": "beta", "args": {"x": 1}, "ts": 2},
+  {"tid": 1, "ph": "E", "pid": 0, "name": "gamma", "args": {"x": 1}, "ts": 2}
+]
@@ -0,0 +1,4 @@
+[
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 0, "dur": 10, "name": "alpha" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 5, "dur": 10, "name": "beta" }
+]
@@ -0,0 +1,7 @@
+[
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 0, "dur": 10, "name": "alpha" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 1, "dur": 1, "name": "beta" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 1, "dur": 1, "name": "gamma" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 5, "dur": 1, "name": "gamma" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 5, "dur": 1, "name": "beta" }
+]
@@ -0,0 +1,4 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 1}, "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "A", "args": {"x": 2}, "ts": 10}
+]
@@ -0,0 +1,4 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "alpha", "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "beta", "ts": 10}
+]
@@ -0,0 +1,5 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 1}, "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 2}, "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "X", "name": "A", "args": {"x": 1}, "ts": 10, "dur": 1}
+]
@@ -0,0 +1,5 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 1}, "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "B", "args": {"x": 2}, "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "C", "args": {"x": 2}, "ts": 2}
+]
@@ -0,0 +1,6 @@
+[
+  {"pid": 0, "tid": 0, "ph": "E", "name": "alpha", "ts": 9},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "beta", "ts": 10},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "alpha", "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "beta", "ts": 1}
+]
@@ -0,0 +1,10 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "B", "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "B", "ts": 9},
+
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "A", "ts": 10},
+
+  {"pid": 0, "tid": 0, "ph": "B", "name": "C", "ts": 2},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "C", "ts": 8}
+]
@@ -0,0 +1,6 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 1}, "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "args": {"x": 2}, "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "A", "args": {"x": 1}, "ts": 9},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "A", "args": {"x": 2}, "ts": 10}
+]
@@ -0,0 +1,6 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "alpha", "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "beta", "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "alpha", "ts": 9},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "beta", "ts": 10}
+]
@@ -0,0 +1,15 @@
+[
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 0, "dur": 20, "name": "alpha" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 1, "dur": 2, "name": "beta" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 2, "dur": 1, "name": "gamma" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 5, "dur": 2, "name": "gamma" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 6, "dur": 1, "name": "beta" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 10, "dur": 1, "name": "gamma" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 9, "dur": 2, "name": "beta" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 15, "dur": 1, "name": "beta" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 14, "dur": 2, "name": "gamma" }
+]
@@ -0,0 +1,15 @@
+[
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 0, "dur": 20, "name": "alpha" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 1, "dur": 2, "name": "beta" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 1, "dur": 1, "name": "gamma" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 5, "dur": 2, "name": "gamma" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 5, "dur": 1, "name": "beta" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 9, "dur": 1, "name": "beta" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 9, "dur": 2, "name": "gamma" },
+
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 13, "dur": 1, "name": "gamma" },
+  { "pid": 0, "tid": 0, "ph": "X", "ts": 13, "dur": 2, "name": "beta" }
+]
@@ -0,0 +1,9 @@
+[
+  {"pid": 0, "tid": 0, "ph": "B", "name": "A", "ts": 0},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "B", "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "B", "ts": 1},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "C", "ts": 2},
+  {"pid": 0, "tid": 0, "ph": "B", "name": "C", "ts": 2},
+  {"pid": 0, "tid": 0, "ph": "X", "name": "D", "ts": 3, "dur": 0},
+  {"pid": 0, "tid": 0, "ph": "E", "name": "A", "ts": 10}
+]
@@ -0,0 +1,22 @@
+## Source Map Test Project
+
+This directory contains test files used to test whether the remapping of
+performance profiles using sourcemaps work correctly.
+
+Run `npm run build` to build the artifacts, then open the appropriate files in
+the `html` directory in whatever browser you're testing.
+
+The idea is to sourcemaps generated by a variety of tools, and also to take
+profiles from a variety of browsers, and hopefully see that they all get 
+remapped as expected.
+
+This project is set up to go through three levels of source-map indirection,
+and also using multiple different build chains.
+
+1. TypeScript -> JavaScript source generation
+2. JavaScript source -> JavaScript bundling
+3. Minification
+
+Some bundlers will swap the order of steps 2 & 3, or potentially merge them,
+but it's complex yet realistic enough that this will hoepfully suss out 
+problems.
@@ -0,0 +1,11 @@
+import {beta} from './beta'
+import {delta} from './delta'
+
+export function alpha() {
+  ;(function () {
+    for (let i = 0; i < 1000; i++) {
+      beta()
+      delta()
+    }
+  })()
+}
@@ -0,0 +1,7 @@
+import {gamma} from './gamma'
+
+export function beta() {
+  for (let i = 0; i < 10; i++) {
+    gamma()
+  }
+}
@@ -0,0 +1,7 @@
+import {gamma} from './gamma'
+
+export const delta = function () {
+  for (let i = 0; i < 10; i++) {
+    gamma()
+  }
+}
@@ -0,0 +1,7 @@
+export const gamma = () => {
+  let prod = 1
+  for (let i = 1; i < 1000; i++) {
+    prod *= i
+  }
+  return prod
+}
@@ -0,0 +1,3 @@
+<title>ESbuild</title>
+<script src="../dist/esbuild/typescript-source-map-test.js"></script>
+<h1>ESbuild Source Map Test</h1>
@@ -0,0 +1,3 @@
+<title>Parcel</title>
+<script src="../dist/parcel/typescript-source-map-test.js"></script>
+<h1>Parcel Source Map Test</h1>
@@ -0,0 +1,3 @@
+<title>Webpack</title>
+<script src="../dist/webpack/typescript-source-map-test.js"></script>
+<h1>Webpack Source Map Test</h1>
@@ -0,0 +1,17 @@
+import {alpha} from './alpha'
+
+export class Kludge {
+  constructor() {
+    alpha()
+    console.log(this.floop)
+  }
+
+  zap() {
+    alpha()
+  }
+
+  get floop(): number {
+    alpha()
+    return 1
+  }
+}
@@ -0,0 +1,23 @@
+{
+  "name": "speedscope-sourcemap-test-project",
+  "version": "1.0.0",
+  "description": "",
+  "private": "true",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run parcel && npm run webpack && npm run esbuild",
+    "parcel": "parcel build -o parcel/typescript-source-map-test typescript-source-map-test.ts",
+    "webpack": "webpack",
+    "esbuild": "esbuild --sourcemap --minify --bundle --outdir=dist/esbuild typescript-source-map-test.ts"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "esbuild": "^0.7.14",
+    "parcel": "^1.12.4",
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.0.3",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.0.0"
+  }
+}
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "sourceMap": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react"
+  }
+}
@@ -0,0 +1,4 @@
+import {Kludge} from './kludge'
+
+const k = new Kludge()
+k.zap()
@@ -0,0 +1,22 @@
+const path = require('path')
+
+module.exports = {
+  entry: './typescript-source-map-test.ts',
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'typescript-source-map-test.js',
+    path: path.resolve(__dirname, 'dist', 'webpack'),
+  },
+}
@@ -4,6 +4,8 @@ import {TextureRenderer} from './texture-renderer'
 import {Rect, Vec2} from '../lib/math'
 import {ViewportRectangleRenderer} from './overlay-rectangle-renderer'
 import {FlamechartColorPassRenderer} from './flamechart-color-pass-renderer'
+import {Color} from '../lib/color'
+import {Theme} from '../views/themes/theme'

 type FrameCallback = () => void

@@ -13,13 +15,19 @@ export class CanvasContext {
  public readonly textureRenderer: TextureRenderer
  public readonly viewportRectangleRenderer: ViewportRectangleRenderer
  public readonly flamechartColorPassRenderer: FlamechartColorPassRenderer
+  public readonly theme: Theme

-  constructor(canvas: HTMLCanvasElement) {
+  constructor(canvas: HTMLCanvasElement, theme: Theme) {
    this.gl = new WebGL.Context(canvas)
    this.rectangleBatchRenderer = new RectangleBatchRenderer(this.gl)
    this.textureRenderer = new TextureRenderer(this.gl)
-    this.viewportRectangleRenderer = new ViewportRectangleRenderer(this.gl)
-    this.flamechartColorPassRenderer = new FlamechartColorPassRenderer(this.gl)
+    this.viewportRectangleRenderer = new ViewportRectangleRenderer(this.gl, theme)
+    this.flamechartColorPassRenderer = new FlamechartColorPassRenderer(this.gl, theme)
+    this.theme = theme
+
+    // Whenever the canvas is resized, draw immediately. This prevents
+    // flickering during resizing.
+    this.gl.addAfterResizeEventHandler(this.onBeforeFrame)

    const webGLInfo = this.gl.getWebGLInfo()
    if (webGLInfo) {
@@ -48,7 +56,8 @@ export class CanvasContext {
  private onBeforeFrame = () => {
    this.animationFrameRequest = null
    this.gl.setViewport(0, 0, this.gl.renderTargetWidthInPixels, this.gl.renderTargetHeightInPixels)
-    this.gl.clear(new Graphics.Color(1, 1, 1, 1))
+    const color = Color.fromCSSHex(this.theme.bgPrimaryColor)
+    this.gl.clear(new Graphics.Color(color.r, color.g, color.b, color.a))

    for (const handler of this.beforeFrameHandlers) {
      handler()
@@ -1,4 +1,5 @@
 import {Vec2, Rect, AffineTransform} from '../lib/math'
+import {Theme} from '../views/themes/theme'
 import {Graphics} from './graphics'
 import {setUniformAffineTransform} from './utils'

@@ -20,7 +21,7 @@ const vert = `
  }
 `

-const frag = `
+const frag = (colorForBucket: string) => `
  precision mediump float;

  uniform vec2 uvSpacePixelSize;
@@ -49,13 +50,7 @@ const frag = `
    return 2.0 * abs(fract(x) - 0.5) - 1.0;
  }

-  vec3 colorForBucket(float t) {
-    float x = triangle(30.0 * t);
-    float H = 360.0 * (0.9 * t);
-    float C = 0.25 + 0.2 * x;
-    float L = 0.80 - 0.15 * x;
-    return hcl2rgb(H, C, L);
-  }
+  ${colorForBucket}

  void main() {
    vec4 here = texture2D(colorTexture, vUv);
@@ -107,7 +102,7 @@ export class FlamechartColorPassRenderer {
  private material: Graphics.Material
  private buffer: Graphics.VertexBuffer

-  constructor(private gl: Graphics.Context) {
+  constructor(private gl: Graphics.Context, theme: Theme) {
    const vertices = [
      {pos: [-1, 1], uv: [0, 1]},
      {pos: [1, 1], uv: [1, 1]},
@@ -124,7 +119,7 @@ export class FlamechartColorPassRenderer {

    this.buffer = gl.createVertexBuffer(vertexFormat.stride * vertices.length)
    this.buffer.uploadFloats(floats)
-    this.material = gl.createMaterial(vertexFormat, vert, frag)
+    this.material = gl.createMaterial(vertexFormat, vert, frag(theme.colorForBucketGLSL))
  }

  render(props: FlamechartColorPassRenderProps) {
@@ -83,6 +83,15 @@ export namespace Graphics {
      public alphaF: number,
    ) {}

+    equals(other: Color): boolean {
+      return (
+        this.redF === other.redF &&
+        this.greenF === other.greenF &&
+        this.blueF === other.blueF &&
+        this.alphaF === other.alphaF
+      )
+    }
+
    static TRANSPARENT = new Color(0, 0, 0, 0)
  }

@@ -160,6 +169,14 @@ export namespace Graphics {
    setUnpremultipliedBlendState() {
      this.setBlendState(BlendOperation.SOURCE_ALPHA, BlendOperation.INVERSE_SOURCE_ALPHA)
    }
+
+    protected resizeEventHandlers = new Set<() => void>()
+    addAfterResizeEventHandler(callback: () => void): void {
+      this.resizeEventHandlers.add(callback)
+    }
+    removeAfterResizeEventHandler(callback: () => void): void {
+      this.resizeEventHandlers.delete(callback)
+    }
  }

  export interface Material {
@@ -459,7 +476,7 @@ export namespace WebGL {
      const bounds = canvas.getBoundingClientRect()

      if (
-        this._width === widthInAppUnits &&
+        this._width === widthInPixels &&
        this._height === heightInPixels &&
        bounds.width === widthInAppUnits &&
        bounds.height === heightInAppUnits
@@ -476,13 +493,15 @@ export namespace WebGL {
      this.setViewport(0, 0, widthInPixels, heightInPixels)
      this._width = widthInPixels
      this._height = heightInPixels
+
+      this.resizeEventHandlers.forEach(cb => cb())
    }

    clear(color: Graphics.Color) {
      this._updateRenderTargetAndViewport()
      this._updateBlendState()

-      if (color != this._currentClearColor) {
+      if (!color.equals(this._currentClearColor)) {
        this._gl.clearColor(color.redF, color.greenF, color.blueF, color.alphaF)
        this._currentClearColor = color
      }
@@ -1,4 +1,6 @@
+import {Color} from '../lib/color'
 import {AffineTransform, Rect} from '../lib/math'
+import {Theme} from '../views/themes/theme'
 import {Graphics} from './graphics'
 import {setUniformAffineTransform, setUniformVec2} from './utils'

@@ -18,53 +20,57 @@ const vert = `
  }
 `

-const frag = `
-  precision mediump float;
+const frag = (theme: Theme) => {
+  const {r, g, b} = Color.fromCSSHex(theme.fgSecondaryColor)
+  const rgb = `${r.toFixed(1)}, ${g.toFixed(1)}, ${b.toFixed(1)}`
+  return `
+    precision mediump float;

-  uniform mat3 configSpaceToPhysicalViewSpace;
-  uniform vec2 physicalSize;
-  uniform vec2 physicalOrigin;
-  uniform vec2 configSpaceViewportOrigin;
-  uniform vec2 configSpaceViewportSize;
-  uniform float framebufferHeight;
+    uniform mat3 configSpaceToPhysicalViewSpace;
+    uniform vec2 physicalSize;
+    uniform vec2 physicalOrigin;
+    uniform vec2 configSpaceViewportOrigin;
+    uniform vec2 configSpaceViewportSize;
+    uniform float framebufferHeight;

-  void main() {
-    vec2 origin = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportOrigin, 1.0)).xy;
-    vec2 size = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportSize, 0.0)).xy;
+    void main() {
+      vec2 origin = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportOrigin, 1.0)).xy;
+      vec2 size = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportSize, 0.0)).xy;

-    vec2 halfSize = physicalSize / 2.0;
+      vec2 halfSize = physicalSize / 2.0;

-    float borderWidth = 2.0;
+      float borderWidth = 2.0;

-    origin = floor(origin * halfSize) / halfSize + borderWidth * vec2(1.0, 1.0);
-    size = floor(size * halfSize) / halfSize - 2.0 * borderWidth * vec2(1.0, 1.0);
+      origin = floor(origin * halfSize) / halfSize + borderWidth * vec2(1.0, 1.0);
+      size = floor(size * halfSize) / halfSize - 2.0 * borderWidth * vec2(1.0, 1.0);

-    vec2 coord = gl_FragCoord.xy;
-    coord.x = coord.x - physicalOrigin.x;
-    coord.y = framebufferHeight - coord.y - physicalOrigin.y;
-    vec2 clamped = clamp(coord, origin, origin + size);
-    vec2 gap = clamped - coord;
-    float maxdist = max(abs(gap.x), abs(gap.y));
+      vec2 coord = gl_FragCoord.xy;
+      coord.x = coord.x - physicalOrigin.x;
+      coord.y = framebufferHeight - coord.y - physicalOrigin.y;
+      vec2 clamped = clamp(coord, origin, origin + size);
+      vec2 gap = clamped - coord;
+      float maxdist = max(abs(gap.x), abs(gap.y));

-    // TOOD(jlfwong): Could probably optimize this to use mix somehow.
-    if (maxdist == 0.0) {
-      // Inside viewport rectangle
-      gl_FragColor = vec4(0, 0, 0, 0);
-    } else if (maxdist < borderWidth) {
-      // Inside viewport rectangle at border
-      gl_FragColor = vec4(0.7, 0.7, 0.7, 0.8);
-    } else {
-      // Outside viewport rectangle
-      gl_FragColor = vec4(0.7, 0.7, 0.7, 0.5);
+      // TOOD(jlfwong): Could probably optimize this to use mix somehow.
+      if (maxdist == 0.0) {
+        // Inside viewport rectangle
+        gl_FragColor = vec4(0, 0, 0, 0);
+      } else if (maxdist < borderWidth) {
+        // Inside viewport rectangle at border
+        gl_FragColor = vec4(${rgb}, 0.8);
+      } else {
+        // Outside viewport rectangle
+        gl_FragColor = vec4(${rgb}, 0.5);
+      }
    }
-  }
-`
+  `
+}

 export class ViewportRectangleRenderer {
  private material: Graphics.Material
  private buffer: Graphics.VertexBuffer

-  constructor(private gl: Graphics.Context) {
+  constructor(private gl: Graphics.Context, theme: Theme) {
    const vertices = [
      [-1, 1],
      [1, 1],
@@ -78,7 +84,7 @@ export class ViewportRectangleRenderer {
    }
    this.buffer = gl.createVertexBuffer(vertexFormat.stride * vertices.length)
    this.buffer.upload(new Uint8Array(new Float32Array(floats).buffer))
-    this.material = gl.createMaterial(vertexFormat, vert, frag)
+    this.material = gl.createMaterial(vertexFormat, vert, frag(theme))
  }

  render(props: ViewportRectangleRendererProps) {
@@ -104,6 +104,114 @@ exports[`importFromBGFlameGraph with CRLF: indexToView 1`] = `0`;

 exports[`importFromBGFlameGraph with CRLF: profileGroup.name 1`] = `"simple-crlf.txt"`;

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

 exports[`importFromBGFlameGraph: profileGroup.name 1`] = `"simple.txt"`;
@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`importFromCallgrind 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:main",
+      "line": undefined,
+      "name": "main",
+      "selfWeight": 20,
+      "totalWeight": 820,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:func1",
+      "line": undefined,
+      "name": "func1",
+      "selfWeight": 100,
+      "totalWeight": 400,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file2.c",
+      "key": "file2.c:func2",
+      "line": undefined,
+      "name": "func2",
+      "selfWeight": 700,
+      "totalWeight": 700,
+    },
+  ],
+  "name": "callgrind.example.log -- Instructions",
+  "stacks": Array [
+    "main;func1;func2 300",
+    "main;func1 100",
+    "main;func2 400",
+    "main 20",
+  ],
+}
+`;
+
+exports[`importFromCallgrind multiple event types 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:main",
+      "line": undefined,
+      "name": "main",
+      "selfWeight": 200,
+      "totalWeight": 8200,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:func1",
+      "line": undefined,
+      "name": "func1",
+      "selfWeight": 1000,
+      "totalWeight": 4000,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file2.c",
+      "key": "file2.c:func2",
+      "line": undefined,
+      "name": "func2",
+      "selfWeight": 7000,
+      "totalWeight": 7000,
+    },
+  ],
+  "name": "callgrind.multiple-event-types.log -- Time",
+  "stacks": Array [
+    "main;func1;func2 3.00µs",
+    "main;func1 1.00µs",
+    "main;func2 4.00µs",
+    "main 200.00ns",
+  ],
+}
+`;
+
+exports[`importFromCallgrind multiple event types 2`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:main",
+      "line": undefined,
+      "name": "main",
+      "selfWeight": 15000,
+      "totalWeight": 38000,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:func1",
+      "line": undefined,
+      "name": "func1",
+      "selfWeight": 8888.888888888889,
+      "totalWeight": 20000,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file2.c",
+      "key": "file2.c:func2",
+      "line": undefined,
+      "name": "func2",
+      "selfWeight": 14111.111111111111,
+      "totalWeight": 14111.111111111111,
+    },
+  ],
+  "name": "callgrind.multiple-event-types.log -- Memory",
+  "stacks": Array [
+    "main;func1;func2 10.85 KB",
+    "main;func1 8.68 KB",
+    "main;func2 2.93 KB",
+    "main 14.65 KB",
+  ],
+}
+`;
+
+exports[`importFromCallgrind multiple event types: indexToView 1`] = `0`;
+
+exports[`importFromCallgrind multiple event types: profileGroup.name 1`] = `"callgrind.multiple-event-types.log"`;
+
+exports[`importFromCallgrind name compression 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:main",
+      "line": undefined,
+      "name": "main",
+      "selfWeight": 20,
+      "totalWeight": 820,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file1.c",
+      "key": "file1.c:func1",
+      "line": undefined,
+      "name": "func1",
+      "selfWeight": 100,
+      "totalWeight": 400,
+    },
+    Frame {
+      "col": undefined,
+      "file": "file2.c",
+      "key": "file2.c:func2",
+      "line": undefined,
+      "name": "func2",
+      "selfWeight": 700,
+      "totalWeight": 700,
+    },
+  ],
+  "name": "callgrind.name-compression.log -- Instructions",
+  "stacks": Array [
+    "main;func1;func2 300",
+    "main;func1 100",
+    "main;func2 400",
+    "main 20",
+  ],
+}
+`;
+
+exports[`importFromCallgrind name compression: indexToView 1`] = `0`;
+
+exports[`importFromCallgrind name compression: profileGroup.name 1`] = `"callgrind.name-compression.log"`;
+
+exports[`importFromCallgrind: indexToView 1`] = `0`;
+
+exports[`importFromCallgrind: profileGroup.name 1`] = `"callgrind.example.log"`;
@@ -64,17 +64,17 @@ exports[`importFromFirefox ignore self-hosted 1`] = `
 Object {
  "frames": Array [
    Frame {
-      "col": undefined,
-      "file": "http://localhost:8000/simple.js:1",
+      "col": 15,
+      "file": "http://localhost:8000/simple.js",
      "key": "alpha (http://localhost:8000/simple.js:1:14)",
-      "line": 14,
+      "line": 1,
      "name": "alpha",
      "selfWeight": 0,
      "totalWeight": 26.983816999942064,
    },
    Frame {
-      "col": undefined,
-      "file": "http://localhost:8000/simple.js:14",
+      "col": 15,
+      "file": "http://localhost:8000/simple.js",
      "key": "delta (http://localhost:8000/simple.js:14:14)",
      "line": 14,
      "name": "delta",
@@ -82,19 +82,19 @@ Object {
      "totalWeight": 11.946324001066387,
    },
    Frame {
-      "col": undefined,
-      "file": "http://localhost:8000/simple.js:20",
+      "col": 15,
+      "file": "http://localhost:8000/simple.js",
      "key": "gamma (http://localhost:8000/simple.js:20:14)",
-      "line": 14,
+      "line": 20,
      "name": "gamma",
      "selfWeight": 26.983816999942064,
      "totalWeight": 26.983816999942064,
    },
    Frame {
-      "col": undefined,
-      "file": "http://localhost:8000/simple.js:8",
+      "col": 14,
+      "file": "http://localhost:8000/simple.js",
      "key": "beta (http://localhost:8000/simple.js:8:13)",
-      "line": 13,
+      "line": 8,
      "name": "beta",
      "selfWeight": 0,
      "totalWeight": 15.037492998875678,
@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`importFromSafari 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": 13,
+      "file": "__InjectedScript_InjectedScriptSource.js",
+      "key": "injectModule:__InjectedScript_InjectedScriptSource.js:109:13",
+      "line": 109,
+      "name": "injectModule",
+      "selfWeight": 0,
+      "totalWeight": 0.001,
+    },
+    Frame {
+      "col": 10,
+      "file": "__InjectedScript_CommandLineAPIModuleSource.js",
+      "key": ":__InjectedScript_CommandLineAPIModuleSource.js:2:10",
+      "line": 2,
+      "name": "(anonymous)",
+      "selfWeight": 0.001,
+      "totalWeight": 0.001,
+    },
+    Frame {
+      "col": 1,
+      "file": "file:///speedscope/sample/programs/javascript/simple.js",
+      "key": "(program):file:///speedscope/sample/programs/javascript/simple.js:1:1",
+      "line": 1,
+      "name": "(program)",
+      "selfWeight": 0,
+      "totalWeight": 0.03248933597933502,
+    },
+    Frame {
+      "col": 15,
+      "file": "file:///speedscope/sample/programs/javascript/simple.js",
+      "key": "alpha:file:///speedscope/sample/programs/javascript/simple.js:1:15",
+      "line": 1,
+      "name": "alpha",
+      "selfWeight": 0,
+      "totalWeight": 0.03248933597933502,
+    },
+    Frame {
+      "col": 15,
+      "file": "file:///speedscope/sample/programs/javascript/simple.js",
+      "key": "delta:file:///speedscope/sample/programs/javascript/simple.js:14:15",
+      "line": 14,
+      "name": "delta",
+      "selfWeight": 0.003094222474222382,
+      "totalWeight": 0.020112446082445484,
+    },
+    Frame {
+      "col": 15,
+      "file": "file:///speedscope/sample/programs/javascript/simple.js",
+      "key": "gamma:file:///speedscope/sample/programs/javascript/simple.js:20:15",
+      "line": 20,
+      "name": "gamma",
+      "selfWeight": 0.029395113505112636,
+      "totalWeight": 0.029395113505112636,
+    },
+    Frame {
+      "col": 14,
+      "file": "file:///speedscope/sample/programs/javascript/simple.js",
+      "key": "beta:file:///speedscope/sample/programs/javascript/simple.js:8:14",
+      "line": 8,
+      "name": "beta",
+      "selfWeight": 0,
+      "totalWeight": 0.012376889896889526,
+    },
+    Frame {
+      "col": 102,
+      "file": "",
+      "key": "firstOpenSearchURLString::4:102",
+      "line": 4,
+      "name": "firstOpenSearchURLString",
+      "selfWeight": 0.0005174240213818848,
+      "totalWeight": 0.0005174240213818848,
+    },
+  ],
+  "name": "Grabación de Control temporal 1",
+  "stacks": Array [
+    "injectModule;(anonymous) 1.00ms",
+    " 39.93ms",
+    "(program);alpha;delta;gamma 10.83ms",
+    " 2.46ms",
+    "(program);alpha;delta 3.09ms",
+    "(program);alpha;beta;gamma 4.64ms",
+    "(program);alpha;delta;gamma 1.55ms",
+    "(program);alpha;beta;gamma 1.55ms",
+    "(program);alpha;delta;gamma 3.09ms",
+    "(program);alpha;beta;gamma 4.64ms",
+    "(program);alpha;delta;gamma 1.55ms",
+    "(program);alpha;beta;gamma 1.55ms",
+    " 253.50ms",
+    "firstOpenSearchURLString 517.42µs",
+  ],
+}
+`;
+
+exports[`importFromSafari: indexToView 1`] = `0`;
+
+exports[`importFromSafari: profileGroup.name 1`] = `"Grabación de Control temporal 1"`;
@@ -1,5 +1,142 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`importTraceEvents BEX interaction 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A",
+      "line": undefined,
+      "name": "A",
+      "selfWeight": 0,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "B",
+      "line": undefined,
+      "name": "B",
+      "selfWeight": 2,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "D",
+      "line": undefined,
+      "name": "D",
+      "selfWeight": 0,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "C",
+      "line": undefined,
+      "name": "C",
+      "selfWeight": 2,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "F",
+      "line": undefined,
+      "name": "F",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "E",
+      "line": undefined,
+      "name": "E",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "G",
+      "line": undefined,
+      "name": "G",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "H",
+      "line": undefined,
+      "name": "H",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "J",
+      "line": undefined,
+      "name": "J",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "I",
+      "line": undefined,
+      "name": "I",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "K",
+      "line": undefined,
+      "name": "K",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "L",
+      "line": undefined,
+      "name": "L",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A;B 2.00µs",
+    " 8.00µs",
+    "D;C 2.00µs",
+    " 8.00µs",
+    "F;E 1.00µs",
+    "F 1.00µs",
+    " 8.00µs",
+    "G;H 1.00µs",
+    "G 1.00µs",
+    " 8.00µs",
+    "J 1.00µs",
+    "J;I 1.00µs",
+    " 8.00µs",
+    "K 1.00µs",
+    "K;L 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents BEX interaction: indexToView 1`] = `0`;
+
+exports[`importTraceEvents BEX interaction: profileGroup.name 1`] = `"bex-interaction.json"`;
+
 exports[`importTraceEvents bad E events 1`] = `
 Object {
  "frames": Array [
@@ -35,6 +172,74 @@ exports[`importTraceEvents bad E events: indexToView 1`] = `0`;

 exports[`importTraceEvents bad E events: profileGroup.name 1`] = `"too-many-end-events.json"`;

+exports[`importTraceEvents end event with empty stack 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "alpha 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents end event with empty stack: indexToView 1`] = `0`;
+
+exports[`importTraceEvents end event with empty stack: profileGroup.name 1`] = `"end-event-with-empty-stack.json"`;
+
+exports[`importTraceEvents end-non-top-of-stack 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A {\\"x\\":1}",
+      "line": undefined,
+      "name": "A {\\"x\\":1}",
+      "selfWeight": 1,
+      "totalWeight": 11,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "B {\\"x\\":2}",
+      "line": undefined,
+      "name": "B {\\"x\\":2}",
+      "selfWeight": 9,
+      "totalWeight": 10,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "Z {\\"x\\":1}",
+      "line": undefined,
+      "name": "Z {\\"x\\":1}",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A {\\"x\\":1} 1.00µs",
+    "A {\\"x\\":1};B {\\"x\\":2} 9.00µs",
+    "A {\\"x\\":1};B {\\"x\\":2};Z {\\"x\\":1} 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents end-non-top-of-stack: indexToView 1`] = `0`;
+
+exports[`importTraceEvents end-non-top-of-stack: profileGroup.name 1`] = `"end-non-top-of-stack.json"`;
+
 exports[`importTraceEvents event re-ordering 1`] = `
 Object {
  "frames": Array [
@@ -93,6 +298,176 @@ exports[`importTraceEvents event re-ordering: indexToView 1`] = `0`;

 exports[`importTraceEvents event re-ordering: profileGroup.name 1`] = `"must-retain-original-order.json"`;

+exports[`importTraceEvents event reordering name match 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha {\\"x\\":0}",
+      "line": undefined,
+      "name": "alpha {\\"x\\":0}",
+      "selfWeight": 9,
+      "totalWeight": 10,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta {\\"x\\":0}",
+      "line": undefined,
+      "name": "beta {\\"x\\":0}",
+      "selfWeight": 0,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "gamma {\\"x\\":0}",
+      "line": undefined,
+      "name": "gamma {\\"x\\":0}",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+  ],
+  "name": "pid 0, tid 1",
+  "stacks": Array [
+    "alpha {\\"x\\":0} 1.00µs",
+    "alpha {\\"x\\":0};beta {\\"x\\":0};gamma {\\"x\\":0} 1.00µs",
+    "alpha {\\"x\\":0} 8.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents event reordering name match: indexToView 1`] = `0`;
+
+exports[`importTraceEvents event reordering name match: profileGroup.name 1`] = `"event-reordering-name-match.json"`;
+
+exports[`importTraceEvents invalid x nesting 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 5,
+      "totalWeight": 15,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta",
+      "line": undefined,
+      "name": "beta",
+      "selfWeight": 10,
+      "totalWeight": 10,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "alpha 5.00µs",
+    "alpha;beta 10.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents invalid x nesting: indexToView 1`] = `0`;
+
+exports[`importTraceEvents invalid x nesting: profileGroup.name 1`] = `"invalid-x-nesting.json"`;
+
+exports[`importTraceEvents matching x 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 8,
+      "totalWeight": 10,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta",
+      "line": undefined,
+      "name": "beta",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "gamma",
+      "line": undefined,
+      "name": "gamma",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "alpha 1.00µs",
+    "alpha;beta;gamma 1.00µs",
+    "alpha 3.00µs",
+    "alpha;gamma;beta 1.00µs",
+    "alpha 4.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents matching x: indexToView 1`] = `0`;
+
+exports[`importTraceEvents matching x: profileGroup.name 1`] = `"matching-x.json"`;
+
+exports[`importTraceEvents mismatched args 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A {\\"x\\":1}",
+      "line": undefined,
+      "name": "A {\\"x\\":1}",
+      "selfWeight": 10,
+      "totalWeight": 10,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A {\\"x\\":1} 10.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents mismatched args: indexToView 1`] = `0`;
+
+exports[`importTraceEvents mismatched args: profileGroup.name 1`] = `"mismatched-args.json"`;
+
+exports[`importTraceEvents mismatched name 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [],
+}
+`;
+
+exports[`importTraceEvents mismatched name: indexToView 1`] = `0`;
+
+exports[`importTraceEvents mismatched name: profileGroup.name 1`] = `"mismatched-name.json"`;
+
 exports[`importTraceEvents multiprocess 1`] = `
 Object {
  "frames": Array [
@@ -257,6 +632,164 @@ exports[`importTraceEvents multiprocess: indexToView 1`] = `0`;

 exports[`importTraceEvents multiprocess: profileGroup.name 1`] = `"multiprocess.json"`;

+exports[`importTraceEvents not enough end events 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A {\\"x\\":1}",
+      "line": undefined,
+      "name": "A {\\"x\\":1}",
+      "selfWeight": 2,
+      "totalWeight": 11,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A {\\"x\\":2}",
+      "line": undefined,
+      "name": "A {\\"x\\":2}",
+      "selfWeight": 9,
+      "totalWeight": 10,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A {\\"x\\":1} 1.00µs",
+    "A {\\"x\\":1};A {\\"x\\":2} 9.00µs",
+    "A {\\"x\\":1};A {\\"x\\":2};A {\\"x\\":1} 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents not enough end events: indexToView 1`] = `0`;
+
+exports[`importTraceEvents not enough end events: profileGroup.name 1`] = `"not-enough-end-events.json"`;
+
+exports[`importTraceEvents not out-of-order 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A",
+      "line": undefined,
+      "name": "A",
+      "selfWeight": 2,
+      "totalWeight": 10,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "B",
+      "line": undefined,
+      "name": "B",
+      "selfWeight": 2,
+      "totalWeight": 8,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "C",
+      "line": undefined,
+      "name": "C",
+      "selfWeight": 6,
+      "totalWeight": 6,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A 1.00µs",
+    "A;B 1.00µs",
+    "A;B;C 6.00µs",
+    "A;B 1.00µs",
+    "A 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents not out-of-order unbalanced name 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "alpha",
+      "line": undefined,
+      "name": "alpha",
+      "selfWeight": 1,
+      "totalWeight": 10,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "beta",
+      "line": undefined,
+      "name": "beta",
+      "selfWeight": 9,
+      "totalWeight": 9,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "alpha 1.00µs",
+    "alpha;beta 9.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents not out-of-order unbalanced name: indexToView 1`] = `0`;
+
+exports[`importTraceEvents not out-of-order unbalanced name: profileGroup.name 1`] = `"out-of-order-unbalanced-name.json"`;
+
+exports[`importTraceEvents not out-of-order: indexToView 1`] = `0`;
+
+exports[`importTraceEvents not out-of-order: profileGroup.name 1`] = `"out-of-order.json"`;
+
+exports[`importTraceEvents only begin events 1`] = `
+Object {
+  "frames": Array [
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "A {\\"x\\":1}",
+      "line": undefined,
+      "name": "A {\\"x\\":1}",
+      "selfWeight": 1,
+      "totalWeight": 2,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "B {\\"x\\":2}",
+      "line": undefined,
+      "name": "B {\\"x\\":2}",
+      "selfWeight": 1,
+      "totalWeight": 1,
+    },
+    Frame {
+      "col": undefined,
+      "file": undefined,
+      "key": "C {\\"x\\":2}",
+      "line": undefined,
+      "name": "C {\\"x\\":2}",
+      "selfWeight": 0,
+      "totalWeight": 0,
+    },
+  ],
+  "name": "pid 0, tid 0",
+  "stacks": Array [
+    "A {\\"x\\":1} 1.00µs",
+    "A {\\"x\\":1};B {\\"x\\":2} 1.00µs",
+  ],
+}
+`;
+
+exports[`importTraceEvents only begin events: indexToView 1`] = `0`;
+
+exports[`importTraceEvents only begin events: profileGroup.name 1`] = `"only-begin-events.json"`;
+
 exports[`importTraceEvents partial json import 1`] = `
 Object {
  "frames": Array [
@@ -526,3 +1059,231 @@ exports[`importTraceEvents simple object: profileGroup.name 1`] = `"simple-objec
 exports[`importTraceEvents simple: indexToView 1`] = `0`;

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

+  // Prevents negative time deltas from causing bad data. See
+  // https://github.com/jlfwong/speedscope/pull/305 for details.
+  let lastValidElapsed = elapsed
+
  let lastNodeId = NaN

  // The chrome CPU profile format doesn't collapse identical samples. We'll do that
@@ -232,22 +245,26 @@ export function importFromChromeCPUProfile(chromeProfile: CPUProfile): Profile {
    const nodeId = chromeProfile.samples[i]
    if (nodeId != lastNodeId) {
      samples.push(nodeId)
-      sampleTimes.push(elapsed)
+      if (elapsed < lastValidElapsed) {
+        sampleTimes.push(lastValidElapsed)
+      } else {
+        sampleTimes.push(elapsed)
+        lastValidElapsed = elapsed
+      }
    }

    if (i === chromeProfile.samples.length - 1) {
      if (!isNaN(lastNodeId)) {
        samples.push(lastNodeId)
-        sampleTimes.push(elapsed)
+        if (elapsed < lastValidElapsed) {
+          sampleTimes.push(lastValidElapsed)
+        } else {
+          sampleTimes.push(elapsed)
+          lastValidElapsed = elapsed
+        }
      }
    } else {
-      let timeDelta = chromeProfile.timeDeltas[i + 1]
-      if (timeDelta < 0) {
-        // This is super noisy, but can be helpful when debugging strange data
-        // console.warn('Substituting zero for unexpected time delta:', timeDelta, 'at index', i)
-        timeDelta = 0
-      }
-
+      const timeDelta = chromeProfile.timeDeltas[i + 1]
      elapsed += timeDelta
      lastNodeId = nodeId
    }
@@ -176,7 +176,7 @@ export function importFromFirefox(firefoxProfile: FirefoxProfile): Profile {
        const frameData = thread.frameTable.data[f]
        const location = thread.stringTable[frameData[0]]

-        const match = /(.*)\s+\((.*?):?(\d+)?\)$/.exec(location)
+        const match = /(.*)\s+\((.*?)(?::(\d+))?(?::(\d+))?\)$/.exec(location)

        if (!match) return null

@@ -193,7 +193,11 @@ export function importFromFirefox(firefoxProfile: FirefoxProfile): Profile {
          key: location,
          name: match[1]!,
          file: match[2]!,
+
+          // In Firefox profiles, line numbers are 1-based, but columns are
+          // 0-based. Let's normalize both to be 1-based.
          line: match[3] ? parseInt(match[3]) : undefined,
+          col: match[4] ? parseInt(match[4]) + 1 : undefined,
        }))
      })
      .filter(f => f != null) as FrameInfo[]
@@ -15,11 +15,13 @@ import {importSpeedscopeProfiles} from '../lib/file-format'
 import {importFromV8ProfLog} from './v8proflog'
 import {importFromLinuxPerf} from './linux-tools-perf'
 import {importFromHaskell} from './haskell'
+import {importFromSafari} from './safari'
 import {ProfileDataSource, TextProfileDataSource, MaybeCompressedDataReader} from './utils'
 import {importAsPprofProfile} from './pprof'
 import {decodeBase64} from '../lib/utils'
 import {importFromChromeHeapProfile} from './v8heapalloc'
 import {isTraceEventFormatted, importTraceEvents} from './trace-event'
+import {importFromCallgrind} from './callgrind'

 export async function importProfileGroupFromText(
  fileName: string,
@@ -131,6 +133,12 @@ async function _importProfileGroup(dataSource: ProfileDataSource): Promise<Profi
  } else if (fileName.endsWith('.heapprofile')) {
    console.log('Importing as Chrome Heap Profile')
    return toGroup(importFromChromeHeapProfile(JSON.parse(contents)))
+  } else if (fileName.endsWith('-recording.json')) {
+    console.log('Importing as Safari profile')
+    return toGroup(importFromSafari(JSON.parse(contents)))
+  } else if (fileName.startsWith('callgrind.')) {
+    console.log('Importing as Callgrind profile')
+    return importFromCallgrind(contents, fileName)
  }

  // Second pass: Try to guess what file format it is based on structure
@@ -169,10 +177,23 @@ async function _importProfileGroup(dataSource: ProfileDataSource): Promise<Profi
    } else if ('rts_arguments' in parsed && 'initial_capabilities' in parsed) {
      console.log('Importing as Haskell GHC JSON Profile')
      return importFromHaskell(parsed)
+    } else if ('recording' in parsed && 'sampleStackTraces' in parsed.recording) {
+      console.log('Importing as Safari profile')
+      return toGroup(importFromSafari(JSON.parse(contents)))
    }
  } else {
    // Format is not JSON

+    // If the first line is "# callgrind format", it's probably in Callgrind
+    // Profile Format.
+    if (
+      /^# callgrind format/.exec(contents) ||
+      (/^events:/m.exec(contents) && /^fn=/m.exec(contents))
+    ) {
+      console.log('Importing as Callgrind profile')
+      return importFromCallgrind(contents, fileName)
+    }
+
    // If the first line contains "Symbol Name", preceded by a tab, it's probably
    // a deep copy from OS X Instruments.app
    if (/^[\w \t\(\)]*\tSymbol Name/.exec(contents)) {
@@ -0,0 +1,5 @@
+import {checkProfileSnapshot} from '../lib/test-utils'
+
+test('importFromSafari', async () => {
+  await checkProfileSnapshot('./sample/profiles/Safari/13.1/simple.html-recording.json')
+})
@@ -0,0 +1,120 @@
+import {Profile, FrameInfo, StackListProfileBuilder} from '../lib/profile'
+import {TimeFormatter} from '../lib/value-formatters'
+
+interface Record {
+  type: string
+  eventType?: string
+  startTime?: number
+  endTime?: number
+  // timeline-record-type-cpu
+  timestamp?: number
+  usage?: number
+  threads?: any[]
+  // timeline-record-type-script
+  details?: number | string | any
+  extraDetails?: null | any
+  // timeline-record-type-network
+  archiveStartTime?: number
+  entry?: any
+  // timeline-record-type-layout
+  quad?: number[]
+}
+
+interface ExprLocation {
+  line: number
+  column: number
+}
+
+interface StackFrame {
+  sourceID: string
+  name: string
+  line: number
+  column: number
+  url: string
+  expressionLocation?: ExprLocation
+}
+
+interface Sample {
+  timestamp: number
+  stackFrames: StackFrame[]
+}
+
+interface Recording {
+  displayName: string
+  startTime: number
+  endTime: number
+  discontinuities: any[]
+  instrumentTypes: string[]
+  records: Record[]
+  markers: any[]
+  memoryPressureEvents: any[]
+  sampleStackTraces: Sample[]
+  sampleDurations: number[]
+}
+
+interface Overview {
+  secondsPerPixel: number
+  scrollStartTime: number
+  selectionStartTime: number
+  selectionDuration: number
+}
+
+interface SafariProfile {
+  version: number
+  recording: Recording
+  overview: Overview
+}
+
+function makeStack(frames: StackFrame[]): FrameInfo[] {
+  return frames
+    .map(({name, url, line, column}) => ({
+      key: `${name}:${url}:${line}:${column}`,
+      file: url,
+      line,
+      col: column,
+      name: name || '(anonymous)',
+    }))
+    .reverse()
+}
+
+export function importFromSafari(contents: SafariProfile): Profile | null {
+  if (contents.version !== 1) {
+    console.warn(`Unknown Safari profile version ${contents.version}... Might be incompatible.`)
+  }
+
+  const {recording} = contents
+  const {sampleStackTraces, sampleDurations} = recording
+
+  const count = sampleStackTraces.length
+  if (count < 1) {
+    console.warn('Empty profile')
+    return null
+  }
+
+  const profileDuration =
+    sampleStackTraces[count - 1].timestamp - sampleStackTraces[0].timestamp + sampleDurations[0]
+  const profile = new StackListProfileBuilder(profileDuration)
+
+  let previousEndTime = Number.MAX_VALUE
+
+  sampleStackTraces.forEach((sample, i) => {
+    const endTime = sample.timestamp
+    const duration = sampleDurations[i]
+    const startTime = endTime - duration
+    const idleDurationBefore = startTime - previousEndTime
+
+    // FIXME: 2ms is a lot, but Safari's timestamps and durations don't line up very well and will create
+    // phantom idle time
+    if (idleDurationBefore > 0.002) {
+      profile.appendSampleWithWeight([], idleDurationBefore)
+    }
+
+    profile.appendSampleWithWeight(makeStack(sample.stackFrames), duration)
+
+    previousEndTime = endTime
+  })
+
+  profile.setValueFormatter(new TimeFormatter('seconds'))
+  profile.setName(recording.displayName)
+  return profile.build()
+}
@@ -31,3 +31,71 @@ test('importTraceEvents bad E events', async () => {
 test('importTraceEvents event re-ordering', async () => {
  await checkProfileSnapshot('./sample/profiles/trace-event/must-retain-original-order.json')
 })
+
+test('importTraceEvents end-non-top-of-stack', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/end-non-top-of-stack.json')
+})
+
+test('importTraceEvents mismatched args', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/mismatched-args.json')
+})
+
+test('importTraceEvents mismatched name', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/mismatched-name.json')
+})
+
+test('importTraceEvents not enough end events', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/not-enough-end-events.json')
+})
+
+test('importTraceEvents not out-of-order unbalanced name', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/out-of-order-unbalanced-name.json')
+})
+
+test('importTraceEvents not out-of-order', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/out-of-order.json')
+})
+
+test('importTraceEvents unbalanced name', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/unbalanced-name.json')
+})
+
+test('importTraceEvents unbalanced args', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/unbalanced-args.json')
+})
+
+test('importTraceEvents end event with empty stack', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/end-event-with-empty-stack.json')
+})
+
+test('importTraceEvents only begin events', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/only-begin-events.json')
+})
+
+test('importTraceEvents zero duration events', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/zero-duration-events.json')
+})
+
+test('importTraceEvents matching x', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/matching-x.json')
+})
+
+test('importTraceEvents x events matching start', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/x-events-matching-start.json')
+})
+
+test('importTraceEvents x events matching end', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/x-events-matching-end.json')
+})
+
+test('importTraceEvents BEX interaction', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/bex-interaction.json')
+})
+
+test('importTraceEvents invalid x nesting', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/invalid-x-nesting.json')
+})
+
+test('importTraceEvents event reordering name match', async () => {
+  await checkProfileSnapshot('./sample/profiles/trace-event/event-reordering-name-match.json')
+})
@@ -1,5 +1,5 @@
-import {sortBy, zeroPad, lastOf} from '../lib/utils'
-import {ProfileGroup, CallTreeProfileBuilder, FrameInfo} from '../lib/profile'
+import {sortBy, zeroPad, getOrInsert, lastOf} from '../lib/utils'
+import {ProfileGroup, CallTreeProfileBuilder, FrameInfo, Profile} from '../lib/profile'
 import {TimeFormatter} from '../lib/value-formatters'

 // This file concerns import from the "Trace Event Format", authored by Google
@@ -64,7 +64,135 @@ interface XTraceEvent extends TraceEvent {

 // The trace format supports a number of event types that we ignore.
 type ImportableTraceEvent = BTraceEvent | ETraceEvent | XTraceEvent
-type DurationEvent = BTraceEvent | ETraceEvent
+
+function pidTidKey(pid: number, tid: number): string {
+  // We zero-pad the PID and TID to make sorting them by pid/tid pair later easier.
+  return `${zeroPad('' + pid, 10)}:${zeroPad('' + tid, 10)}`
+}
+
+function partitionByPidTid(events: ImportableTraceEvent[]): Map<string, ImportableTraceEvent[]> {
+  const map = new Map<string, ImportableTraceEvent[]>()
+
+  for (let ev of events) {
+    const list = getOrInsert(map, pidTidKey(ev.pid, ev.tid), () => [])
+    list.push(ev)
+  }
+
+  return map
+}
+
+function selectQueueToTakeFromNext(
+  bEventQueue: BTraceEvent[],
+  eEventQueue: ETraceEvent[],
+): 'B' | 'E' {
+  if (bEventQueue.length === 0 && eEventQueue.length === 0) {
+    throw new Error('This method should not be given both queues empty')
+  }
+  if (eEventQueue.length === 0) return 'B'
+  if (bEventQueue.length === 0) return 'E'
+
+  const bFront = bEventQueue[0]
+  const eFront = eEventQueue[0]
+
+  const bts = bFront.ts
+  const ets = eFront.ts
+
+  if (bts < ets) return 'B'
+  if (ets < bts) return 'E'
+
+  // If we got here, the 'B' event queue and the 'E' event queue have events at
+  // the front with equal timestamps.
+
+  // If the front of the 'E' queue matches the front of the 'B' queue by name,
+  // then it means we have a zero duration event. Process the 'B' queue first
+  // to ensure it opens before we try to close it.
+  //
+  // Otherwise, process the 'E' queue first.
+  return bFront.name === eFront.name ? 'B' : 'E'
+}
+
+function convertToEventQueues(events: ImportableTraceEvent[]): [BTraceEvent[], ETraceEvent[]] {
+  const beginEvents: BTraceEvent[] = []
+  const endEvents: ETraceEvent[] = []
+
+  // Rebase all of the timestamps on the lowest timestamp
+  if (events.length > 0) {
+    let firstTs = Number.MAX_SAFE_INTEGER
+    for (let ev of events) {
+      firstTs = Math.min(firstTs, ev.ts)
+    }
+    for (let ev of events) {
+      ev.ts -= firstTs
+    }
+  }
+
+  // Next, combine B, E, and X events into two timestamp ordered queues.
+  const xEvents: XTraceEvent[] = []
+  for (let ev of events) {
+    switch (ev.ph) {
+      case 'B': {
+        beginEvents.push(ev)
+        break
+      }
+
+      case 'E': {
+        endEvents.push(ev)
+        break
+      }
+
+      case 'X': {
+        xEvents.push(ev)
+        break
+      }
+
+      default: {
+        const _exhaustiveCheck: never = ev
+        return _exhaustiveCheck
+      }
+    }
+  }
+
+  function dur(x: XTraceEvent): number {
+    return x.dur ?? x.tdur ?? 0
+  }
+
+  xEvents.sort((a, b) => {
+    if (a.ts < b.ts) return -1
+    if (a.ts > b.ts) return 1
+
+    // Super weird special case: if we have two 'X' events with the same 'ts'
+    // but different 'dur' the only valid interpretation is to put the one with
+    // the longer 'dur' first, because you can't nest longer things in shorter
+    // things.
+    const aDur = dur(a)
+    const bDur = dur(b)
+    if (aDur > bDur) return -1
+    if (aDur < bDur) return 1
+
+    // Otherwise, retain the original order by relying upon a stable sort here.
+    return 0
+  })
+
+  for (let x of xEvents) {
+    const xDur = dur(x)
+    beginEvents.push({...x, ph: 'B'} as BTraceEvent)
+    endEvents.push({...x, ph: 'E', ts: x.ts + xDur} as ETraceEvent)
+  }
+
+  function compareTimestamps(a: TraceEvent, b: TraceEvent) {
+    if (a.ts < b.ts) return -1
+    if (a.ts > b.ts) return 1
+
+    // Important: if the timestamps are the same, return zero. We're going to
+    // rely upon a stable sort here.
+    return 0
+  }
+
+  beginEvents.sort(compareTimestamps)
+  endEvents.sort(compareTimestamps)
+
+  return [beginEvents, endEvents]
+}

 function filterIgnoredEventTypes(events: TraceEvent[]): ImportableTraceEvent[] {
  const ret: ImportableTraceEvent[] = []
@@ -79,40 +207,6 @@ function filterIgnoredEventTypes(events: TraceEvent[]): ImportableTraceEvent[] {
  return ret
 }

-function convertToDurationEvents(events: ImportableTraceEvent[]): DurationEvent[] {
-  const ret: DurationEvent[] = []
-  for (let ev of events) {
-    switch (ev.ph) {
-      case 'B':
-        ret.push(ev)
-        break
-
-      case 'E':
-        ret.push(ev)
-        break
-
-      case 'X':
-        let dur: number | null = null
-        if (ev.dur != null) dur = ev.dur
-        else if (ev.tdur != null) dur = ev.tdur
-
-        if (dur == null) {
-          console.warn('Found a complete event (X) with no duration. Skipping: ', ev)
-          continue
-        }
-
-        ret.push({...ev, ph: 'B'} as BTraceEvent)
-        ret.push({...ev, ph: 'E', ts: ev.ts + dur} as ETraceEvent)
-        break
-
-      default:
-        const _exhaustiveCheck: never = ev
-        return _exhaustiveCheck
-    }
-  }
-  return ret
-}
-
 function getProcessNamesByPid(events: TraceEvent[]): Map<number, string> {
  const processNamesByPid = new Map<number, string>()
  for (let ev of events) {
@@ -128,8 +222,7 @@ function getThreadNamesByPidTid(events: TraceEvent[]): Map<string, string> {

  for (let ev of events) {
    if (ev.ph === 'M' && ev.name === 'thread_name' && ev.args && ev.args.name) {
-      const key = `${ev.pid}:${ev.tid}`
-      threadNameByPidTid.set(key, ev.args.name)
+      threadNameByPidTid.set(pidTidKey(ev.pid, ev.tid), ev.args.name)
    }
  }
  return threadNameByPidTid
@@ -143,66 +236,33 @@ function keyForEvent(event: TraceEvent): string {
  return name
 }

-type TraceEventProfileState = {profile: CallTreeProfileBuilder; eventStack: BTraceEvent[]}
+function frameInfoForEvent(event: TraceEvent): FrameInfo {
+  const key = keyForEvent(event)
+  return {
+    name: key,
+    key: key,
+  }
+}

 function eventListToProfileGroup(events: TraceEvent[]): ProfileGroup {
-  const stateByPidTid = new Map<string, TraceEventProfileState>()
-
  const importableEvents = filterIgnoredEventTypes(events)
-  const durationEvents = convertToDurationEvents(importableEvents)
+  const partitioned = partitionByPidTid(importableEvents)

  const processNamesByPid = getProcessNamesByPid(events)
  const threadNamesByPidTid = getThreadNamesByPidTid(events)

-  durationEvents.sort((a, b) => {
-    if (a.ts < b.ts) return -1
-    if (a.ts > b.ts) return 1
-    if (a.pid < b.pid) return -1
-    if (a.pid > b.pid) return 1
-    if (a.tid < b.tid) return -1
-    if (a.tid > b.tid) return 1
+  const profilePairs: [string, Profile][] = []

-    // We have to be careful with events that have the same timestamp
-    // and the same pid/tid
-    const aKey = keyForEvent(a)
-    const bKey = keyForEvent(b)
-    if (aKey === bKey) {
-      // If the two elements have the same key, we need to process the begin
-      // event before the end event. This will be a zero-duration event.
-      if (a.ph === 'B' && b.ph === 'E') return -1
-      if (a.ph === 'E' && b.ph === 'B') return 1
-    } else {
-      // If the two elements have *different* keys, we want to process
-      // the end of an event before the beginning of the event to prevent
-      // out-of-order push/pops from the call-stack.
-      if (a.ph === 'B' && b.ph === 'E') return 1
-      if (a.ph === 'E' && b.ph === 'B') return -1
-    }
+  partitioned.forEach(eventsForThread => {
+    if (eventsForThread.length === 0) return

-    // In all other cases, retain the original sort order.
-    return 0
-  })
+    const {pid, tid} = eventsForThread[0]

-  if (durationEvents.length > 0) {
-    const firstTs = durationEvents[0].ts
-    for (let ev of durationEvents) {
-      ev.ts -= firstTs
-    }
-  }
-
-  function getOrCreateProfileState(pid: number, tid: number): TraceEventProfileState {
-    // We zero-pad the PID and TID to make sorting them by pid/tid pair later easier.
-    const pidTid = `${zeroPad('' + pid, 10)}:${zeroPad('' + tid, 10)}`
-
-    let state = stateByPidTid.get(pidTid)
-    if (state != null) return state
-    let profile = new CallTreeProfileBuilder()
-    state = {profile, eventStack: []}
+    const profile = new CallTreeProfileBuilder()
    profile.setValueFormatter(new TimeFormatter('microseconds'))
-    stateByPidTid.set(pidTid, state)

    const processName = processNamesByPid.get(pid)
-    const threadName = threadNamesByPidTid.get(`${pid}:${tid}`)
+    const threadName = threadNamesByPidTid.get(pidTidKey(pid, tid))

    if (processName != null && threadName != null) {
      profile.setName(`${processName} (pid ${pid}), ${threadName} (tid ${tid})`)
@@ -214,51 +274,154 @@ function eventListToProfileGroup(events: TraceEvent[]): ProfileGroup {
      profile.setName(`pid ${pid}, tid ${tid}`)
    }

-    return state
-  }
+    // The trace event format is hard to deal with because it specifically
+    // allows events to be recorded out of order, *but* event ordering is still
+    // important for events with the same timestamp. Because of this, rather
+    // than thinking about the entire event stream as a single queue of events,
+    // we're going to first construct two time-ordered lists of events:
+    //
+    // 1. ts ordered queue of 'B' events
+    // 2. ts ordered queue of 'E' events
+    //
+    // We deal with 'X' events by converting them to one entry in the 'B' event
+    // queue and one entry in the 'E' event queue.
+    //
+    // The high level goal is to deal with 'B' events in 'ts' order, breaking
+    // ties by the order the events occurred in the file, and deal with 'E'
+    // events in 'ts' order, breaking ties in whatever order causes the 'E'
+    // events to match whatever is on the top of the stack.
+    const [bEventQueue, eEventQueue] = convertToEventQueues(eventsForThread)

-  for (let ev of durationEvents) {
-    const {profile, eventStack} = getOrCreateProfileState(ev.pid, ev.tid)
-    const key = keyForEvent(ev)
-    const frameInfo: FrameInfo = {
-      key: key,
-      name: key,
+    const frameStack: BTraceEvent[] = []
+    const enterFrame = (b: BTraceEvent) => {
+      frameStack.push(b)
+      profile.enterFrame(frameInfoForEvent(b), b.ts)
    }
-    switch (ev.ph) {
-      case 'B':
-        eventStack.push(ev)
-        profile.enterFrame(frameInfo, ev.ts)
-        break

-      case 'E':
-        const lastEvent = lastOf(eventStack)
-        if (lastEvent != null && lastEvent.name === ev.name) {
-          profile.leaveFrame(frameInfo, ev.ts)
-          eventStack.pop()
-        } else {
-          console.warn(
-            'Event discarded because it did not match top-of-stack. Discarded event:',
-            ev,
-            'Top of stack:',
-            lastEvent,
-          )
+    const tryToLeaveFrame = (e: ETraceEvent) => {
+      const b = lastOf(frameStack)
+
+      if (b == null) {
+        console.warn(
+          `Tried to end frame "${
+            frameInfoForEvent(e).key
+          }", but the stack was empty. Doing nothing instead.`,
+        )
+        return
+      }
+
+      const eFrameInfo = frameInfoForEvent(e)
+      const bFrameInfo = frameInfoForEvent(b)
+
+      if (e.name !== b.name) {
+        console.warn(
+          `ts=${e.ts}: Tried to end "${eFrameInfo.key}" when "${bFrameInfo.key}" was on the top of the stack. Doing nothing instead.`,
+        )
+        return
+      }
+
+      if (eFrameInfo.key !== bFrameInfo.key) {
+        console.warn(
+          `ts=${e.ts}: Tried to end "${eFrameInfo.key}" when "${bFrameInfo.key}" was on the top of the stack. Ending ${bFrameInfo.key} instead.`,
+        )
+      }
+
+      frameStack.pop()
+      profile.leaveFrame(bFrameInfo, e.ts)
+    }
+
+    while (bEventQueue.length > 0 || eEventQueue.length > 0) {
+      const queueName = selectQueueToTakeFromNext(bEventQueue, eEventQueue)
+      switch (queueName) {
+        case 'B': {
+          enterFrame(bEventQueue.shift()!)
+          break
        }
-        break
+        case 'E': {
+          // Before we take the first event in the 'E' queue, let's first see if
+          // there are any e events that exactly match the top of the stack.
+          // We'll prioritize first by key, then by name if we can't find a key
+          // match.
+          const stackTop = lastOf(frameStack)
+          if (stackTop != null) {
+            const bFrameInfo = frameInfoForEvent(stackTop)

-      default:
-        const _exhaustiveCheck: never = ev
-        return _exhaustiveCheck
+            let swapped: boolean = false
+
+            for (let i = 1; i < eEventQueue.length; i++) {
+              const eEvent = eEventQueue[i]
+              if (eEvent.ts > eEventQueue[0].ts) {
+                // Only consider 'E' events with the same ts as the front of the queue.
+                break
+              }
+
+              const eFrameInfo = frameInfoForEvent(eEvent)
+              if (bFrameInfo.key === eFrameInfo.key) {
+                // We have a match! Process this one first.
+                const temp = eEventQueue[0]
+                eEventQueue[0] = eEventQueue[i]
+                eEventQueue[i] = temp
+                swapped = true
+                break
+              }
+            }
+
+            if (!swapped) {
+              // There was no key match, let's see if we can find a name match
+              for (let i = 1; i < eEventQueue.length; i++) {
+                const eEvent = eEventQueue[i]
+                if (eEvent.ts > eEventQueue[0].ts) {
+                  // Only consider 'E' events with the same ts as the front of the queue.
+                  break
+                }
+
+                if (eEvent.name === stackTop.name) {
+                  // We have a match! Process this one first.
+                  const temp = eEventQueue[0]
+                  eEventQueue[0] = eEventQueue[i]
+                  eEventQueue[i] = temp
+                  swapped = true
+                  break
+                }
+              }
+            }
+
+            // If swapped is still false at this point, it means we're about to
+            // pop a stack frame that doesn't even match by name. Bummer.
+          }
+
+          const e = eEventQueue.shift()!
+
+          tryToLeaveFrame(e)
+          break
+        }
+
+        default:
+          const _exhaustiveCheck: never = queueName
+          return _exhaustiveCheck
+      }
    }
-  }
+
+    for (let i = frameStack.length - 1; i >= 0; i--) {
+      const frame = frameInfoForEvent(frameStack[i])
+      console.warn(`Frame "${frame.key}" was still open at end of profile. Closing automatically.`)
+      profile.leaveFrame(frame, profile.getTotalWeight())
+    }
+
+    profilePairs.push([pidTidKey(pid, tid), profile.build()])
+  })

  // For now, we just sort processes by pid & tid.
  // TODO: The standard specifies that metadata events with the name
  // "process_sort_index" and "thread_sort_index" can be used to influence the
  // order, but for simplicity we'll ignore that until someone complains :)
-  const profilePairs = Array.from(stateByPidTid.entries())
  sortBy(profilePairs, p => p[0])

-  return {name: '', indexToView: 0, profiles: profilePairs.map(p => p[1].profile)}
+  return {
+    name: '',
+    indexToView: 0,
+    profiles: profilePairs.map(p => p[1]),
+  }
 }

 function isTraceEventList(maybeEventList: any): maybeEventList is TraceEvent[] {
@@ -51,15 +51,30 @@ export class MaybeCompressedDataReader implements ProfileDataSource {

  async readAsText(): Promise<string> {
    const buffer = await this.readAsArrayBuffer()
-    let ret: string = ''
+
+    // By default, we assume the file is utf-8 encoded.
+    let encoding = 'utf-8'
+
+    const array = new Uint8Array(buffer)
+    if (array.length > 2) {
+      if (array[0] === 0xff && array[1] === 0xfe) {
+        // UTF-16, Little Endian encoding
+        encoding = 'utf-16le'
+      } else if (array[0] === 0xfe && array[1] === 0xff) {
+        // UTF-16, Big Endian encoding
+        encoding = 'utf-16be'
+      }
+    }

    if (typeof TextDecoder !== 'undefined') {
-      const decoder = new TextDecoder()
+      const decoder = new TextDecoder(encoding)
      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)
+      // JavaScript strings are UTF-16 encoded, but we're reading data from disk
+      // that we're going to blindly assume it's ASCII encoded. This codepath
+      // only exists for older browser support.
+      console.warn('This browser does not support TextDecoder. Decoding text as ASCII.')
+      let ret: string = ''
      for (let i = 0; i < array.length; i++) {
        ret += String.fromCharCode(array[i])
      }
@@ -16,7 +16,7 @@
 // Because we're not going to use this in our actual build, it's okay for this
 // to be inefficient.

-(function () {
+;(function () {
  const nodeVersion = process.versions.node
  const versionParts = nodeVersion.split('.')
  const majorVersion = parseInt(versionParts[0], 10)
@@ -48,4 +48,10 @@
    this.splice(0, this.length, ...arrayWithIndices.map(x => x[0]))
    return this
  }
-})()
+})()
+;(function () {
+  // TextDecoder is a global API in browsers, but an imported API in node.
+  //
+  // Let's emulate it being a global API during tests.
+  global.TextDecoder = require('util').TextDecoder
+})()
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`source-map remapping of chrome-85-esbuild 1`] = `
+Array [
+  "((anonymous) @ alpha.ts:5:5) <- ((anonymous) @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/esbuild/typescript-source-map-test.js:1:170)",
+  "(e @ beta.ts:3:8) <- (e @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/esbuild/typescript-source-map-test.js:1:75)",
+  "(get floop @ kludge.ts:13:7) <- (get floop @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/esbuild/typescript-source-map-test.js:1:276)",
+  "(l constructor @ kludge.ts:4:3) <- (l @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/esbuild/typescript-source-map-test.js:1:226)",
+  "(m @ delta.ts:3:22) <- (m @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/esbuild/typescript-source-map-test.js:1:119)",
+  "(r @ alpha.ts:4:8) <- (r @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/esbuild/typescript-source-map-test.js:1:158)",
+  "(gamma @ gamma.ts:1:14) <- (t @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/esbuild/typescript-source-map-test.js:1:15)",
+  "(zap @ kludge.ts:9:3) <- (zap @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/esbuild/typescript-source-map-test.js:1:260)",
+]
+`;
+
+exports[`source-map remapping of chrome-85-parcel 1`] = `
+Array [
+  "((anonymous) @ ../alpha.ts:5:5) <- ((anonymous) @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/parcel/typescript-source-map-test.js:8:152)",
+  "(e @ ../gamma.ts:1:22) <- (e @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/parcel/typescript-source-map-test.js:2:104)",
+  "(get @ ../kludge.ts:13:3) <- (get @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/parcel/typescript-source-map-test.js:10:284)",
+  "(o.zap @ ../kludge.ts:9:3) <- (o.zap @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/parcel/typescript-source-map-test.js:10:211)",
+  "(o constructor @ ../kludge.ts:4:3) <- (o @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/parcel/typescript-source-map-test.js:10:139)",
+  "(parcelRequire.CIJJ../alpha @ ../alpha.ts:5:5) <- (parcelRequire.CIJJ../alpha @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/parcel/typescript-source-map-test.js:9:55)",
+  "(parcelRequire.EJAe../gamma @ ../gamma.ts:1:8) <- (parcelRequire.EJAe../gamma @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/parcel/typescript-source-map-test.js:3:23)",
+  "(parcelRequire.NDR3../beta @ ../delta.ts:3:8) <- (parcelRequire.NDR3../beta @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/parcel/typescript-source-map-test.js:7:39)",
+  "(parcelRequire.xEzo../kludge @ ../kludge.ts:3:1) <- (parcelRequire.xEzo../kludge @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/parcel/typescript-source-map-test.js:11:39)",
+  "(beta @ ../beta.ts:3:17) <- (r @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/parcel/typescript-source-map-test.js:4:119)",
+  "(r @ ../delta.ts:3:22) <- (r @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/parcel/typescript-source-map-test.js:6:125)",
+  "(alpha @ ../alpha.ts:4:17) <- (t @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/parcel/typescript-source-map-test.js:8:140)",
+]
+`;
+
+exports[`source-map remapping of chrome-85-webpack 1`] = `
+Array [
+  "((anonymous) @ webpack://speedscope-sourcemap-test-project/alpha.ts:5:4) <- ((anonymous) @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:181)",
+  "(get @ webpack://speedscope-sourcemap-test-project/kludge.ts:13:3) <- (get @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:368)",
+  "(n.zap @ webpack://speedscope-sourcemap-test-project/kludge.ts:9:3) <- (n.zap @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:305)",
+  "(n constructor @ webpack://speedscope-sourcemap-test-project/kludge.ts:4:3) <- (n @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:243)",
+  "(n @ webpack://speedscope-sourcemap-test-project/gamma.ts:1:22) <- (n @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:34)",
+  "(beta @ webpack://speedscope-sourcemap-test-project/beta.ts:3:17) <- (o @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:88)",
+  "(r @ webpack://speedscope-sourcemap-test-project/delta.ts:3:22) <- (r @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:130)",
+  "(alpha @ webpack://speedscope-sourcemap-test-project/alpha.ts:4:17) <- (t @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:169)",
+]
+`;
+
+exports[`source-map remapping of firefox-79-webpack 1`] = `
+Array [
+  "(get @ webpack://speedscope-sourcemap-test-project/kludge.ts:13:3) <- (get @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:368)",
+  "(n constructor @ webpack://speedscope-sourcemap-test-project/kludge.ts:4:3) <- (n @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:243)",
+  "(n @ webpack://speedscope-sourcemap-test-project/gamma.ts:1:22) <- (n @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:34)",
+  "(n.prototype.zap @ webpack://speedscope-sourcemap-test-project/kludge.ts:9:3) <- (n.prototype.zap @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:305)",
+  "(beta @ webpack://speedscope-sourcemap-test-project/beta.ts:3:17) <- (o @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:88)",
+  "(r @ webpack://speedscope-sourcemap-test-project/delta.ts:3:22) <- (r @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:130)",
+  "(alpha @ webpack://speedscope-sourcemap-test-project/alpha.ts:4:17) <- (t @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:169)",
+  "(t/< @ webpack://speedscope-sourcemap-test-project/alpha.ts:5:4) <- (t/< @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:181)",
+]
+`;
+
+exports[`source-map remapping of safari-13-webpack 1`] = `
+Array [
+  "((anonymous) @ webpack://speedscope-sourcemap-test-project/alpha.ts:5:4) <- ((anonymous) @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:181)",
+  "(zap @ webpack://speedscope-sourcemap-test-project/kludge.ts:9:3) <- ((anonymous) @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:305)",
+  "(get @ webpack://speedscope-sourcemap-test-project/kludge.ts:13:3) <- (get @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:368)",
+  "(n constructor @ webpack://speedscope-sourcemap-test-project/kludge.ts:4:3) <- (n @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:243)",
+  "(n @ webpack://speedscope-sourcemap-test-project/gamma.ts:1:22) <- (n @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:34)",
+  "(beta @ webpack://speedscope-sourcemap-test-project/beta.ts:3:17) <- (o @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:88)",
+  "(r @ webpack://speedscope-sourcemap-test-project/delta.ts:3:22) <- (r @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:130)",
+  "(alpha @ webpack://speedscope-sourcemap-test-project/alpha.ts:4:17) <- (t @ file:///Users/jlfwong/code/speedscope/sample/programs/javascript/sourcemaps/dist/webpack/typescript-source-map-test.js:1:169)",
+]
+`;
@@ -0,0 +1,69 @@
+// This file contains a collection of classes which make it easier to perform
+// batch rendering of Canvas2D primitives. The advantage of this over just doing
+// ctx.beginPath() ... ctx.rect(...) ... ctx.endPath() is that you can construct
+// several different batch renderers are the same time, then decide on their
+// paint order at the end.
+//
+// See FlamechartPanZoomView.renderOverlays for an example of how this is used.
+
+export interface TextArgs {
+  text: string
+  x: number
+  y: number
+}
+
+export class BatchCanvasTextRenderer {
+  private argsBatch: TextArgs[] = []
+
+  text(args: TextArgs) {
+    this.argsBatch.push(args)
+  }
+
+  fill(ctx: CanvasRenderingContext2D, color: string) {
+    if (this.argsBatch.length === 0) return
+    ctx.fillStyle = color
+    for (let args of this.argsBatch) {
+      ctx.fillText(args.text, args.x, args.y)
+    }
+    this.argsBatch = []
+  }
+}
+
+export interface RectArgs {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+export class BatchCanvasRectRenderer {
+  private argsBatch: RectArgs[] = []
+
+  rect(args: RectArgs) {
+    this.argsBatch.push(args)
+  }
+
+  private drawPath(ctx: CanvasRenderingContext2D) {
+    ctx.beginPath()
+    for (let args of this.argsBatch) {
+      ctx.rect(args.x, args.y, args.w, args.h)
+    }
+    ctx.closePath()
+    this.argsBatch = []
+  }
+
+  fill(ctx: CanvasRenderingContext2D, color: string) {
+    if (this.argsBatch.length === 0) return
+    ctx.fillStyle = color
+    this.drawPath(ctx)
+    ctx.fill()
+  }
+
+  stroke(ctx: CanvasRenderingContext2D, color: string, lineWidth: number) {
+    if (this.argsBatch.length === 0) return
+    ctx.strokeStyle = color
+    ctx.lineWidth = lineWidth
+    this.drawPath(ctx)
+    ctx.stroke()
+  }
+}
@@ -34,6 +34,23 @@ export class Color {
    return new Color(clamp(R1 + m, 0, 1), clamp(G1 + m, 0, 1), clamp(B1 + m, 0, 1), 1.0)
  }

+  static fromCSSHex(hex: string) {
+    if (hex.length !== 7 || hex[0] !== '#') {
+      throw new Error(`Invalid color input ${hex}`)
+    }
+    const r = parseInt(hex.substr(1, 2), 16) / 255
+    const g = parseInt(hex.substr(3, 2), 16) / 255
+    const b = parseInt(hex.substr(5, 2), 16) / 255
+    if (r < 0 || r > 1 || g < 0 || g > 1 || b < 0 || b > 1) {
+      throw new Error(`Invalid color input ${hex}`)
+    }
+    return new Color(r, g, b)
+  }
+
+  withAlpha(a: number): Color {
+    return new Color(this.r, this.g, this.b, a)
+  }
+
  toCSS(): string {
    return `rgba(${(255 * this.r).toFixed()}, ${(255 * this.g).toFixed()}, ${(
      255 * this.b
@@ -1,67 +1,72 @@
 import {importEmscriptenSymbolMap} from './emscripten'
+import {Frame} from './profile'
+import {KeyedSet} from './utils'

 test('importEmscriptenSymbolMap', () => {
+  function checkMap(input: string, expectedMapping: [string, string][]) {
+    const mapping = importEmscriptenSymbolMap(input)
+    if (mapping == null) {
+      fail('Mapping failed to parse')
+      return
+    }
+
+    const frames = new KeyedSet<Frame>()
+    for (let [key, value] of expectedMapping) {
+      const frame = Frame.getOrInsert(frames, {key, name: key})
+      expect(mapping(frame)?.name).toBe(value)
+    }
+  }
+
  // Valid symbol map
-  expect(
-    importEmscriptenSymbolMap(
-      [
-        /* prettier: ignore */
-        'a:A',
-        'b:B',
-        'c:C',
-      ].join('\n'),
-    ),
-  ).toEqual(
-    new Map([
+  checkMap(
+    [
+      /* prettier: ignore */
+      'a:A',
+      'b:B',
+      'c:C',
+    ].join('\n'),
+    [
      ['a', 'A'],
      ['b', 'B'],
      ['c', 'C'],
-    ]),
+    ],
  )

  // Valid symbol map with trailing newline
-  expect(
-    importEmscriptenSymbolMap(
-      [
-        /* prettier: ignore */
-        'a:A',
-        'b:B',
-        'c:C',
-        'd:D-D',
-        '',
-      ].join('\n'),
-    ),
-  ).toEqual(
-    new Map([
+  checkMap(
+    [
+      /* prettier: ignore */
+      'a:A',
+      'b:B',
+      'c:C',
+      'd:D-D',
+      '',
+    ].join('\n'),
+    [
      ['a', 'A'],
      ['b', 'B'],
      ['c', 'C'],
      ['d', 'D-D'],
-    ]),
+    ],
  )

  // Valid symbol map with non-alpha characters
-  expect(importEmscriptenSymbolMap('u6:__ZN8tinyxml210XMLCommentD0Ev\n')).toEqual(
-    new Map([['u6', '__ZN8tinyxml210XMLCommentD0Ev']]),
-  )
+  checkMap('u6:__ZN8tinyxml210XMLCommentD0Ev\n', [['u6', '__ZN8tinyxml210XMLCommentD0Ev']])

  // WebAssembly symbol map
-  expect(
-    importEmscriptenSymbolMap(
-      [
-        /* prettier: ignore */
-        '0:A',
-        '1:B',
-        '2:C',
-        '3:D-D',
-        '4:a\\20b',
-        '5:a\\2',
-        '6:a\\3z',
-        '7:a\\20b\\20c',
-      ].join('\n'),
-    ),
-  ).toEqual(
-    new Map([
+  checkMap(
+    [
+      /* prettier: ignore */
+      '0:A',
+      '1:B',
+      '2:C',
+      '3:D-D',
+      '4:a\\20b',
+      '5:a\\2',
+      '6:a\\3z',
+      '7:a\\20b\\20c',
+    ].join('\n'),
+    [
      ['wasm-function[0]', 'A'],
      ['wasm-function[1]', 'B'],
      ['wasm-function[2]', 'C'],
@@ -70,7 +75,7 @@ test('importEmscriptenSymbolMap', () => {
      ['wasm-function[5]', 'a\\2'],
      ['wasm-function[6]', 'a\\3z'],
      ['wasm-function[7]', 'a b c'],
-    ]),
+    ],
  )

  // Invalid symbol map
@@ -1,7 +1,8 @@
-type EmscriptenSymbolMap = Map<string, string>
-
 // Returns `input` with hex escapes expanded (e.g. `\20` becomes ` `.)
 //
+
+import {Frame, SymbolRemapper} from './profile'
+
 // NOTE: This will fail to ignore escaped backslahes (e.g. `\\20`).
 function unescapeHex(input: string): string {
  return input.replace(/\\([a-fA-F0-9]{2})/g, (_match, group) => {
@@ -15,7 +16,7 @@ function unescapeHex(input: string): string {
 // have the associated symbol map. To do this, first drop the profile into speedscope
 // and then drop the symbol map. After the second drop, the symbols will be remapped to
 // their original names.
-export function importEmscriptenSymbolMap(contents: string): EmscriptenSymbolMap | null {
+export function importEmscriptenSymbolMap(contents: string): SymbolRemapper | null {
  const lines = contents.split('\n')
  if (!lines.length) return null

@@ -23,7 +24,7 @@ export function importEmscriptenSymbolMap(contents: string): EmscriptenSymbolMap
  if (lines[lines.length - 1] === '') lines.pop()
  if (!lines.length) return null

-  const map: EmscriptenSymbolMap = new Map()
+  const map = new Map<string, string>()
  const intRegex = /^(\d+):(.+)$/
  const idRegex = /^([\$\w]+):([\$\w-]+)$/

@@ -45,5 +46,11 @@ export function importEmscriptenSymbolMap(contents: string): EmscriptenSymbolMap
    return null
  }

-  return map
+  return (frame: Frame) => {
+    if (!map.has(frame.name)) {
+      return null
+    }
+
+    return {name: map.get(frame.name)}
+  }
 }
@@ -1,7 +1,7 @@
 import {Frame, CallTreeNode} from './profile'

 import {lastOf} from './utils'
-import {clamp} from './math'
+import {clamp, Rect, Vec2} from './math'

 export interface FlamechartFrame {
  node: CallTreeNode
@@ -90,6 +90,27 @@ export class Flamechart {
    return clamp(viewportWidth, minWidth, maxWidth)
  }

+  // Given a desired config-space viewport rectangle, clamp the rectangle so
+  // that it fits within the given flamechart. This prevents the viewport from
+  // extending past the bounds of the flamechart or zooming in too far.
+  getClampedConfigSpaceViewportRect({
+    configSpaceViewportRect,
+    renderInverted,
+  }: {
+    configSpaceViewportRect: Rect
+    renderInverted?: boolean
+  }) {
+    const configSpaceSize = new Vec2(this.getTotalWeight(), this.getLayers().length)
+    const width = this.getClampedViewportWidth(configSpaceViewportRect.size.x)
+    const size = configSpaceViewportRect.size.withX(width)
+    const origin = Vec2.clamp(
+      configSpaceViewportRect.origin,
+      new Vec2(0, renderInverted ? 0 : -1),
+      Vec2.max(Vec2.zero, configSpaceSize.minus(size).plus(new Vec2(0, 1))),
+    )
+    return new Rect(origin, configSpaceViewportRect.size.withX(width))
+  }
+
  constructor(private source: FlamechartDataSource) {
    const stack: FlamechartFrame[] = []
    const openFrame = (node: CallTreeNode, value: number) => {
@@ -9,11 +9,11 @@ test('getHashParams', () => {
  })
  expect(
    getHashParams(
-      '#profileURL=https://raw.githubusercontent.com/jlfwong/speedscope/master/sample/profiles/speedscope/0.1.2/simple-sampled.speedscope.json',
+      '#profileURL=https://raw.githubusercontent.com/jlfwong/speedscope/main/sample/profiles/speedscope/0.1.2/simple-sampled.speedscope.json',
    ),
  ).toEqual({
    profileURL:
-      'https://raw.githubusercontent.com/jlfwong/speedscope/master/sample/profiles/speedscope/0.1.2/simple-sampled.speedscope.json',
+      'https://raw.githubusercontent.com/jlfwong/speedscope/main/sample/profiles/speedscope/0.1.2/simple-sampled.speedscope.json',
  })
  expect(getHashParams('#title=hello&localProfilePath=file:///tmp/file.js')).toEqual({
    title: 'hello',
@@ -0,0 +1,86 @@
+import * as fs from 'fs'
+import * as path from 'path'
+import {importProfilesFromArrayBuffer} from '../import'
+import {importJavaScriptSourceMapSymbolRemapper} from './js-source-map'
+import {Frame} from './profile'
+
+async function checkSourceMapApplication(pathToProfile: string, pathToSourceMap: string) {
+  const buffer = fs.readFileSync(pathToProfile)
+  const arrayBuffer = buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength)
+  const profileGroup = await importProfilesFromArrayBuffer(
+    path.basename(pathToProfile),
+    arrayBuffer,
+  )
+
+  if (!profileGroup) {
+    fail('Failed to extract profile')
+    return
+  }
+
+  const sourceMapFileName = path.basename(pathToSourceMap)
+  const remapper = await importJavaScriptSourceMapSymbolRemapper(
+    fs.readFileSync(pathToSourceMap, 'utf-8'),
+    sourceMapFileName,
+  )
+
+  if (!remapper) {
+    fail('Failed to extract sourcemap')
+    return
+  }
+
+  const key: (f: {name?: string; file?: string; line?: number; col?: number}) => string = f => {
+    return `${f.name} @ ${f.file}:${f.line}:${f.col}`
+  }
+
+  const frames: Frame[] = []
+
+  profileGroup.profiles[profileGroup.indexToView].forEachFrame(f => {
+    frames.push(f)
+  })
+
+  frames.sort((a, b) => (a.key < b.key ? -1 : 1))
+
+  const remappedFrames: string[] = []
+  frames.forEach(f => {
+    const remapped = remapper(f)
+    if (!remapped) return
+    remappedFrames.push(`(${key({...f, ...remapped})}) <- (${key(f)})`)
+  })
+
+  expect(remappedFrames).toMatchSnapshot()
+}
+
+test('source-map remapping of chrome-85-webpack', async () => {
+  await checkSourceMapApplication(
+    './sample/profiles/source-maps/chrome-85-webpack.json',
+    './sample/profiles/source-maps/webpack/typescript-source-map-test.js.map',
+  )
+})
+
+test('source-map remapping of firefox-79-webpack', async () => {
+  await checkSourceMapApplication(
+    './sample/profiles/source-maps/firefox-79-webpack.json',
+    './sample/profiles/source-maps/webpack/typescript-source-map-test.js.map',
+  )
+})
+
+test('source-map remapping of safari-13-webpack', async () => {
+  await checkSourceMapApplication(
+    './sample/profiles/source-maps/safari-13-webpack.json',
+    './sample/profiles/source-maps/webpack/typescript-source-map-test.js.map',
+  )
+})
+
+test('source-map remapping of chrome-85-esbuild', async () => {
+  await checkSourceMapApplication(
+    './sample/profiles/source-maps/chrome-85-esbuild.json',
+    './sample/profiles/source-maps/esbuild/typescript-source-map-test.js.map',
+  )
+})
+
+test('source-map remapping of chrome-85-parcel', async () => {
+  await checkSourceMapApplication(
+    './sample/profiles/source-maps/chrome-85-parcel.json',
+    './sample/profiles/source-maps/parcel/typescript-source-map-test.js.map',
+  )
+})
@@ -0,0 +1,227 @@
+// This file contains code to allow profiles to be remapped by JavaScript source maps.
+//
+// As of writing, this is using an out-of-date version of source-map, because the
+// source-map library migrated to using web-assembly. This requires loading the
+// web-assembly ball. The easiest way to do this is to load it from a third-party
+// URL, but I want speedscope to work standalone offline. This means that the remaining
+// options require some way of having a local URL that corresponds the .wasm file.
+//
+// Also as of writing, speedscope is bundled with Parcel v1. Trying to import
+// a .wasm file in Parcel v1 tries to load the wasm module itself, which is not
+// what I'm trying to do -- I want SourceMapConsumer.initialize to be the thing
+// booting the WebAssembly, not Parcel itself.
+//
+// One way of getting around this problem is to modify the build system to
+// copy the .wasm file from node_modules/source-map/lib/mappings.wasm. I could do
+// this, but it's a bit of a pain.
+//
+// Another would be to use something like
+// import("url:../node_modules/source-map/lib/mappings.wasm"), and then pass the
+// resulting URL to SourceMapConsumer.initialize. This is also kind of a pain,
+// because I can only do that if I upgrade to Parcel v2. Ultimately, I'd like to
+// use esbuild rather than parcel at all, so for now I'm just punting on this by
+// using an old-version of source-map which doesn't depend on wasm.
+
+// This is rarely used, so let's load it async to avoid bloating the initial
+// bundle.
+import type {MappingItem, RawSourceMap, SourceMapConsumer} from 'source-map'
+const sourceMapModule = import('source-map')
+
+import {Frame, SymbolRemapper} from './profile'
+import {findIndexBisect} from './utils'
+
+const DEBUG = false
+
+export async function importJavaScriptSourceMapSymbolRemapper(
+  contentsString: string,
+  sourceMapFileName: string,
+): Promise<SymbolRemapper | null> {
+  const sourceMap = await sourceMapModule
+
+  let consumer: SourceMapConsumer | null = null
+  let contents: RawSourceMap | null = null
+
+  try {
+    contents = JSON.parse(contentsString)
+    consumer = new sourceMap.SourceMapConsumer(contents!)
+  } catch (e) {
+    return null
+  }
+
+  const mappingItems: MappingItem[] = []
+
+  consumer.eachMapping(
+    function (m: MappingItem) {
+      // The sourcemap library uses 1-based line numbers, and 0-based column
+      // numbers. speedscope uses 1-based line-numbers, and 1-based column
+      // numbers for its in-memory representation, so we'll normalize that
+      // here too.
+      mappingItems.push({
+        ...m,
+        generatedColumn: m.generatedColumn + 1,
+        originalColumn: m.originalColumn + 1,
+      })
+    },
+    {},
+
+    // We're going to binary search through these later, so make sure they're
+    // sorted by their order in the generated file.
+    sourceMap.SourceMapConsumer.GENERATED_ORDER,
+  )
+
+  const sourceMapFileNameWithoutExt = sourceMapFileName.replace(/\.[^/]*$/, '')
+
+  return (frame: Frame) => {
+    let fileMatches = false
+    if (contents?.file && contents?.file === frame.file) {
+      fileMatches = true
+    } else if (
+      ('/' + frame.file?.replace(/\.[^/]*$/, '')).endsWith('/' + sourceMapFileNameWithoutExt)
+    ) {
+      fileMatches = true
+    }
+    if (!fileMatches) {
+      // The source-map doesn't apply to the file this frame is defined in.
+      return null
+    }
+
+    if (frame.line == null || frame.col == null) {
+      // If we don't have a line & column number for the frame, we can't
+      // remap it.
+      return null
+    }
+
+    // If we got here, then we hopefully have an remapping.
+    //
+    // Ideally, we'd look up a symbol whose generatedLine & generatedColumn
+    // match what we have in our profile, but unfortunately browsers don't do
+    // this.
+    //
+    // Browsers set the column number for a function to the index of the
+    // opening paren for the argument list, rather than the beginning of the
+    // index of the name.
+    //
+    // function alpha() { ... }
+    //               ^
+    //
+    // const beta = function() { ... }
+    //                      ^
+    //
+    // const gamma = () => { ... }
+    //               ^
+    //
+    // Since we don't have the source code being profiled, we unfortunately
+    // can't normalize this to set the column to the first character of the
+    // actual name.
+    //
+    // To work around this limitation, we'll search backwards from the first
+    // mapping whose generatedLine & generatedColumn are beyond the location
+    // in the profile.
+    let mappingIndex = findIndexBisect(mappingItems, m => {
+      if (m.generatedLine > frame.line!) return true
+      if (m.generatedLine < frame.line!) return false
+      if (m.generatedColumn >= frame.col!) return true
+      return false
+    })
+
+    if (mappingIndex === -1) {
+      // There are no symbols following the given profile frame symbol, so try
+      // to apply the very last mapping.
+      mappingIndex = mappingItems.length - 1
+    } else if (mappingIndex === 0) {
+      // If the very first index in mappingItems is beyond the location in the
+      // profile, it means the name we're looking for doesn't have a
+      // corresponding entry in the source-map (this can happen if the
+      // source-map isn't the right source-map)
+      return null
+    } else {
+      mappingIndex--
+    }
+
+    const sourceMapItem = mappingItems[mappingIndex]
+    const remappedFrameInfo: {name?: string; file?: string; line?: number; col?: number} = {}
+
+    if (sourceMapItem.name != null) {
+      remappedFrameInfo.name = sourceMapItem.name
+    } else if (sourceMapItem.source != null) {
+      // HACK: If the item name isn't specified, but the source is present, then
+      // we're going to try to guess what the name is by using the originalLine
+      // and originalColumn.
+
+      // The second argument here is "returnNullOnMissing". Without this, it
+      // throws instead of returning null.
+      const content = consumer?.sourceContentFor(sourceMapItem.source, true)
+      if (content) {
+        const lines = content.split('\n')
+        const line = lines[sourceMapItem.originalLine - 1]
+        if (line) {
+          // It's possible this source map entry will contain stuff other than
+          // the name, so let's only consider word-ish characters that are part
+          // of the prefix.
+          const identifierMatch = /\w+/.exec(line.substr(sourceMapItem.originalColumn - 1))
+          if (identifierMatch) {
+            remappedFrameInfo.name = identifierMatch[0]
+          }
+        }
+      }
+    }
+
+    switch (remappedFrameInfo.name) {
+      case 'constructor': {
+        // If the name was remapped to "constructor", then let's use the
+        // original name, since "constructor" isn't very helpful.
+        //
+        // TODO(jlfwong): Search backwards for the class keyword and see if we
+        // can guess the right name.
+        remappedFrameInfo.name = frame.name + ' constructor'
+        break
+      }
+
+      case 'function': {
+        // If the name is just "function", it probably means we either messed up
+        // the remapping, or that we matched an anonymous function. In either
+        // case, this isn't helpful, so put this back.
+        remappedFrameInfo.name = frame.name
+        break
+      }
+
+      case 'const':
+      case 'export': {
+        // If we got this, we probably just did a bad job leveraging the hack
+        // looking through the source code. Let's fall-back to whatever the
+        // original name was.
+        remappedFrameInfo.name = frame.name
+        break
+      }
+    }
+
+    if (remappedFrameInfo.name && frame.name.includes(remappedFrameInfo.name)) {
+      // If the remapped name is a substring of the original name, the original
+      // name probably contains more useful information. In that case, just use
+      // the original name instead.
+      //
+      // This can happen, for example, when remapping method names. If a
+      // call stack says the symbol name is "n.zap" and we remapped it to a
+      // function just called "zap", we might as well use the original name
+      // instead.
+      remappedFrameInfo.name = frame.name
+    }
+
+    if (sourceMapItem.source != null) {
+      remappedFrameInfo.file = sourceMapItem.source
+      remappedFrameInfo.line = sourceMapItem.originalLine
+      remappedFrameInfo.col = sourceMapItem.originalColumn
+    }
+
+    if (DEBUG) {
+      console.groupCollapsed(`Remapping "${frame.name}" -> "${remappedFrameInfo.name}"`)
+      console.log('before', {...frame})
+      console.log('item @ index', sourceMapItem)
+      console.log('item @ index + 1', mappingItems[mappingIndex + 1])
+      console.log('after', remappedFrameInfo)
+      console.groupEnd()
+    }
+
+    return remappedFrameInfo
+  }
+}
@@ -1,7 +1,7 @@
 /**
 * As of Preact 10.x, they no longer have an officially supported preact-redux library.
 * It's possible to use react-redux with some hacks, but these hacks cause npm run pack
- * to error out because of (intentinoally) unmet peer dependencies.
+ * to error out because of (intentionally) unmet peer dependencies.
 *
 * I could stack more hacks to fix this problem, but I'd rather just drop the dependency
 * and remove the need to do any dependency hacking by writing the very small part of
@@ -0,0 +1,90 @@
+import {Profile, Frame, CallTreeNode} from './profile'
+import {FuzzyMatch, fuzzyMatchStrings} from './fuzzy-find'
+import {Flamechart, FlamechartFrame} from './flamechart'
+import {Rect, Vec2} from './math'
+
+export enum FlamechartType {
+  CHRONO_FLAME_CHART,
+  LEFT_HEAVY_FLAME_GRAPH,
+}
+
+// A utility class for storing cached search results to avoid recomputation when
+// the search results & profile did not change.
+export class ProfileSearchResults {
+  constructor(readonly profile: Profile, readonly searchQuery: string) {}
+
+  private matches: Map<Frame, FuzzyMatch> | null = null
+  getMatchForFrame(frame: Frame): FuzzyMatch | null {
+    if (!this.matches) {
+      this.matches = new Map()
+      this.profile.forEachFrame(frame => {
+        const match = fuzzyMatchStrings(frame.name, this.searchQuery)
+        if (match == null) return
+        this.matches!.set(frame, match)
+      })
+    }
+    return this.matches.get(frame) || null
+  }
+}
+
+export interface FlamechartSearchMatch {
+  configSpaceBounds: Rect
+  node: CallTreeNode
+}
+
+interface CachedFlamechartResult {
+  matches: FlamechartSearchMatch[]
+  indexForNode: Map<CallTreeNode, number>
+}
+
+export class FlamechartSearchResults {
+  constructor(readonly flamechart: Flamechart, readonly profileResults: ProfileSearchResults) {}
+
+  private matches: CachedFlamechartResult | null = null
+  private getResults(): CachedFlamechartResult {
+    if (this.matches == null) {
+      const matches: FlamechartSearchMatch[] = []
+      const indexForNode = new Map<CallTreeNode, number>()
+      const visit = (frame: FlamechartFrame, depth: number) => {
+        const {node} = frame
+        if (this.profileResults.getMatchForFrame(node.frame)) {
+          const configSpaceBounds = new Rect(
+            new Vec2(frame.start, depth),
+            new Vec2(frame.end - frame.start, 1),
+          )
+          indexForNode.set(node, matches.length)
+          matches.push({configSpaceBounds, node})
+        }
+
+        frame.children.forEach(child => {
+          visit(child, depth + 1)
+        })
+      }
+
+      const layers = this.flamechart.getLayers()
+      if (layers.length > 0) {
+        layers[0].forEach(frame => visit(frame, 0))
+      }
+
+      this.matches = {matches, indexForNode}
+    }
+    return this.matches
+  }
+
+  count(): number {
+    return this.getResults().matches.length
+  }
+
+  indexOf(node: CallTreeNode): number | null {
+    const result = this.getResults().indexForNode.get(node)
+    return result === undefined ? null : result
+  }
+
+  at(index: number): FlamechartSearchMatch {
+    const matches = this.getResults().matches
+    if (index < 0 || index >= matches.length) {
+      throw new Error(`Index ${index} out of bounds in list of ${matches.length} matches.`)
+    }
+    return matches[index]
+  }
+}
@@ -3,9 +3,6 @@ import {ValueFormatter, RawValueFormatter} from './value-formatters'
 import {FileFormat} from './file-format-spec'
 const demangleCppModule = import('./demangle-cpp')

-// Force eager loading of the module
-demangleCppModule.then(() => {})
-
 export interface FrameInfo {
  key: string | number

@@ -17,13 +14,17 @@ export interface FrameInfo {
  // call stack frame.
  file?: string

-  // Line in the given file where this frame occurs
+  // Line in the given file where this frame occurs, 1-based.
  line?: number

-  // Column in the file
+  // Column in the file, 1-based.
  col?: number
 }

+export type SymbolRemapper = (
+  frame: Frame,
+) => {name?: string; file?: string; line?: number; col?: number} | null
+
 export class HasWeights {
  private selfWeight = 0
  private totalWeight = 0
@@ -116,6 +117,13 @@ export class Profile {

  protected frames = new KeyedSet<Frame>()

+  // Profiles store two call-trees.
+  //
+  // The "append order" call tree is the one in which nodes are ordered in
+  // whatever order they were appended to their parent.
+  //
+  // The "grouped" call tree is one in which each node has at most one child per
+  // frame. Nodes are ordered in decreasing order of weight
  protected appendOrderCalltreeRoot = new CallTreeNode(Frame.root, null)
  protected groupedCalltreeRoot = new CallTreeNode(Frame.root, null)

@@ -137,6 +145,12 @@ export class Profile {
    this.totalWeight = totalWeight
  }

+  shallowClone(): Profile {
+    const profile = new Profile(this.totalWeight)
+    Object.assign(profile, this)
+    return profile
+  }
+
  formatValue(v: number) {
    return this.valueFormatter.format(v)
  }
@@ -169,6 +183,17 @@ export class Profile {
    return this.totalNonIdleWeight
  }

+  // This is private because it should only be called in the ProfileBuilder
+  // classes. Once a Profile instance has been constructed, it should be treated
+  // as immutable.
+  protected sortGroupedCallTree() {
+    function visit(node: CallTreeNode) {
+      node.children.sort((a, b) => -(a.getTotalWeight() - b.getTotalWeight()))
+      node.children.forEach(visit)
+    }
+    visit(this.groupedCalltreeRoot)
+  }
+
  forEachCallGrouped(
    openFrame: (node: CallTreeNode, value: number) => void,
    closeFrame: (node: CallTreeNode, value: number) => void,
@@ -180,10 +205,7 @@ export class Profile {

      let childTime = 0

-      const children = [...node.children]
-      children.sort((a, b) => -(a.getTotalWeight() - b.getTotalWeight()))
-
-      children.forEach(function (child) {
+      node.children.forEach(function (child) {
        visit(child, start + childTime)
        childTime += child.getTotalWeight()
      })
@@ -250,12 +272,6 @@ export class Profile {
    this.frames.forEach(fn)
  }

-  forEachSample(fn: (sample: CallTreeNode, weight: number) => void) {
-    for (let i = 0; i < this.samples.length; i++) {
-      fn(this.samples[i], this.weights[i])
-    }
-  }
-
  getProfileWithRecursionFlattened(): Profile {
    const builder = new CallTreeProfileBuilder()

@@ -399,9 +415,25 @@ export class Profile {
    }
  }

-  remapNames(callback: (name: string) => string) {
+  remapSymbols(callback: SymbolRemapper) {
    for (let frame of this.frames) {
-      frame.name = callback(frame.name)
+      const remapped = callback(frame)
+      if (remapped == null) {
+        continue
+      }
+      const {name, file, line, col} = remapped
+      if (name != null) {
+        frame.name = name
+      }
+      if (file != null) {
+        frame.file = file
+      }
+      if (line != null) {
+        frame.line = line
+      }
+      if (col != null) {
+        frame.col = col
+      }
    }
  }
 }
@@ -511,6 +543,7 @@ export class StackListProfileBuilder extends Profile {
      this.totalWeight,
      this.weights.reduce((a, b) => a + b, 0),
    )
+    this.sortGroupedCallTree()
    return this
  }
 }
@@ -588,6 +621,7 @@ export class CallTreeProfileBuilder extends Profile {
    const frameCount = this.framesInStack.get(frame) || 0
    this.framesInStack.set(frame, frameCount + 1)
    this.lastValue = value
+    this.totalWeight = Math.max(this.totalWeight, this.lastValue)
  }

  private _leaveFrame(frame: Frame, value: number, useAppendOrder: boolean) {
@@ -651,6 +685,7 @@ export class CallTreeProfileBuilder extends Profile {
    if (this.appendOrderStack.length > 1 || this.groupedOrderStack.length > 1) {
      throw new Error('Tried to complete profile construction with a non-empty stack')
    }
+    this.sortGroupedCallTree()
    return this
  }
 }
@@ -90,6 +90,14 @@ test('remapRangesToTrimmedText', () => {
    expectedHighlightedTrimmed: `[he...]d`,
  })

+  assertTrimmedHighlight({
+    text: 'xxhello world',
+    pattern: 'hello',
+    length: 6,
+    expectedHighlighted: 'xx[hello] world',
+    expectedHighlightedTrimmed: `xx[h...]ld`,
+  })
+
  assertTrimmedHighlight({
    text: 'hello world',
    pattern: 'hello world',
@@ -1,4 +1,4 @@
-import {binarySearch} from './utils'
+import {findValueBisect} from './utils'

 export const ELLIPSIS = '\u2026'

@@ -65,7 +65,7 @@ export function trimTextMid(
  if (cachedMeasureTextWidth(ctx, text) <= maxWidth) {
    return buildTrimmedText(text, text.length)
  }
-  const [lo] = binarySearch(
+  const [lo] = findValueBisect(
    0,
    text.length,
    n => {
@@ -131,10 +131,7 @@ export function remapRangesToTrimmedText(
          case IndexTypeInTrimmed.ELIDED: {
            // The range starts in the prefix, but ends in the elided
            // section. Add just the prefix + one char for the ellipsis.
-            rangesToHighlightInTrimmedText.push([
-              origStart,
-              origStart + trimmedText.prefixLength + 1,
-            ])
+            rangesToHighlightInTrimmedText.push([origStart, trimmedText.prefixLength + 1])
            highlightedEllipsis = true
            break
          }
@@ -9,11 +9,12 @@ import {
  zeroPad,
  formatPercent,
  KeyedSet,
-  binarySearch,
+  findValueBisect,
  memoizeByReference,
  memoizeByShallowEquality,
  objectsHaveShallowEquality,
  decodeBase64,
+  findIndexBisect,
 } from './utils'

 import * as jsc from 'jsverify'
@@ -109,13 +110,49 @@ test('formatPercent', () => {
  expect(formatPercent(100)).toBe('100%')
 })

-test('binarySearch', () => {
-  const [lo, hi] = binarySearch(0, 10, n => Math.log(n), 1, 0.0001)
+test('findValueBisect', () => {
+  const [lo, hi] = findValueBisect(0, 10, n => Math.log(n), 1, 0.0001)
  expect(lo).toBeCloseTo(Math.E, 4)
  expect(lo).toBeLessThan(Math.E)
  expect(hi).toBeGreaterThan(Math.E)
 })

+test('findIndexBisect', () => {
+  const check = (haystack: number[], needle: number) => {
+    const condition = (v: number) => v > needle
+    expect(findIndexBisect(haystack, condition)).toEqual(haystack.findIndex(condition))
+  }
+
+  check([], 0)
+
+  check([0], 0)
+  check([0], -1)
+  check([0], 1)
+
+  check([0, 1], 0)
+  check([0, 1], 1)
+  check([0, 1], 2)
+
+  check([0, 1, 2], 2)
+  check([0, 1, 2], 2)
+  check([0, 1, 2], 2)
+  check([0, 1, 2], 2)
+
+  check([3, 5, 5, 7], 1)
+  check([3, 5, 5, 7], 2)
+  check([3, 5, 5, 7], 5)
+  check([3, 5, 5, 7], 7)
+  check([3, 5, 5, 7], 11)
+
+  jsc.assertForall(jsc.array(jsc.int8), jsc.int8, (haystack: number[], needle: number) => {
+    haystack.sort((a, b) => a - b)
+
+    const fn = (v: number) => v > needle
+    expect(findIndexBisect(haystack, fn)).toEqual(haystack.findIndex(fn))
+    return true
+  })
+})
+
 test('memoizeByReference', () => {
  let hitCount = 0
  const identity = memoizeByReference((arg: number) => {
@@ -105,7 +105,7 @@ export function triangle(x: number) {
  return 2.0 * Math.abs(fract(x) - 0.5) - 1.0
 }

-export function binarySearch(
+export function findValueBisect(
  lo: number,
  hi: number,
  f: (val: number) => number,
@@ -122,6 +122,39 @@ export function binarySearch(
  }
 }

+// Similar to Array.prototype.findIndex, except uses a binary search.
+//
+// This assumes that the condition transitions exactly once from false to true
+// in the list, e.g. the following is a valid input:
+//
+//  ls        = [a, b, c, d]
+//  ls.map(f) = [false, false, true, true]
+//
+// The following is an invalid input:
+//
+//  ls        = [a, b, c, d]
+//  ls.map(f) = [false, true, false, true]
+export function findIndexBisect<T>(ls: T[], f: (val: T) => boolean): number {
+  if (ls.length === 0) return -1
+
+  let lo = 0
+  let hi = ls.length - 1
+
+  while (hi !== lo) {
+    const mid = Math.floor((lo + hi) / 2)
+
+    if (f(ls[mid])) {
+      // The desired index is <= mid
+      hi = mid
+    } else {
+      // The desired index is > mid
+      lo = mid + 1
+    }
+  }
+
+  return f(ls[hi]) ? hi : -1
+}
+
 export function noop(...args: any[]) {}

 export function objectsHaveShallowEquality<T extends object>(a: T, b: T): boolean {
@@ -2,6 +2,7 @@ import {h, render} from 'preact'
 import {createAppStore} from './store'
 import {ApplicationContainer} from './views/application-container'
 import {Provider} from './lib/preact-redux'
+import {ThemeProvider} from './views/themes/theme'

 console.log(`speedscope v${require('../package.json').version}`)

@@ -20,7 +21,9 @@ const store = lastStore ? createAppStore(lastStore.getState()) : createAppStore(

 render(
  <Provider store={store}>
-    <ApplicationContainer />
+    <ThemeProvider>
+      <ApplicationContainer />
+    </ThemeProvider>
  </Provider>,
  document.body,
  document.body.lastElementChild || undefined,
@@ -1,7 +1,7 @@
 import {actionCreator} from '../lib/typed-redux'
 import {CallTreeNode, Frame, ProfileGroup} from '../lib/profile'
 import {SortMethod} from '../views/profile-table-view'
-import {ViewMode} from '.'
+import {ColorScheme, ViewMode} from '.'
 import {FlamechartID} from './flamechart-view-state'
 import {Rect, Vec2} from '../lib/math'
 import {HashParams} from '../lib/hash-params'
@@ -19,6 +19,7 @@ export namespace actions {
  export const setLoading = actionCreator<boolean>('setLoading')
  export const setError = actionCreator<boolean>('setError')
  export const setHashParams = actionCreator<HashParams>('setHashParams')
+  export const setColorScheme = actionCreator<ColorScheme>('setColorScheme')

  export namespace sandwichView {
    export const setTableSortMethod = actionCreator<SortMethod>('sandwichView.setTableSortMethod')
@@ -1,9 +1,9 @@
 import {Frame, Profile} from '../lib/profile'
-import {triangle, memoizeByReference, memoizeByShallowEquality} from '../lib/utils'
+import {memoizeByReference, memoizeByShallowEquality} from '../lib/utils'
 import {RowAtlas} from '../gl/row-atlas'
 import {CanvasContext} from '../gl/canvas-context'
-import {Color} from '../lib/color'
 import {FlamechartRowAtlasKey} from '../gl/flamechart-renderer'
+import {Theme} from '../views/themes/theme'

 export const createGetColorBucketForFrame = memoizeByReference(
  (frameToColorBucket: Map<number | string, number>) => {
@@ -13,24 +13,27 @@ export const createGetColorBucketForFrame = memoizeByReference(
  },
 )

-export const createGetCSSColorForFrame = memoizeByReference(
-  (frameToColorBucket: Map<number | string, number>) => {
+export const createGetCSSColorForFrame = memoizeByShallowEquality(
+  ({
+    theme,
+    frameToColorBucket,
+  }: {
+    theme: Theme
+    frameToColorBucket: Map<number | string, number>
+  }) => {
    const getColorBucketForFrame = createGetColorBucketForFrame(frameToColorBucket)
    return (frame: Frame): string => {
      const t = getColorBucketForFrame(frame) / 255
-
-      const x = triangle(30.0 * t)
-      const H = 360.0 * (0.9 * t)
-      const C = 0.25 + 0.2 * x
-      const L = 0.8 - 0.15 * x
-      return Color.fromLumaChromaHue(L, C, H).toCSS()
+      return theme.colorForBucket(t).toCSS()
    }
  },
 )

-export const getCanvasContext = memoizeByReference((canvas: HTMLCanvasElement) => {
-  return new CanvasContext(canvas)
-})
+export const getCanvasContext = memoizeByShallowEquality(
+  ({theme, canvas}: {theme: Theme; canvas: HTMLCanvasElement}) => {
+    return new CanvasContext(canvas, theme)
+  },
+)

 export const getRowAtlas = memoizeByReference((canvasContext: CanvasContext) => {
  return new RowAtlas<FlamechartRowAtlasKey>(
@@ -6,11 +6,15 @@ import {actions} from './actions'
 */

 import * as redux from 'redux'
-import {setter, Reducer} from '../lib/typed-redux'
+import {setter, Reducer, Action} from '../lib/typed-redux'
 import {HashParams, getHashParams} from '../lib/hash-params'
 import {ProfileGroupState, profileGroup} from './profiles-state'
 import {SortMethod, SortField, SortDirection} from '../views/profile-table-view'
 import {useSelector} from '../lib/preact-redux'
+import {Profile} from '../lib/profile'
+import {FlamechartViewState} from './flamechart-view-state'
+import {SandwichViewState} from './sandwich-view-state'
+import {getProfileToView} from './getters'

 export const enum ViewMode {
  CHRONO_FLAME_CHART,
@@ -18,6 +22,17 @@ export const enum ViewMode {
  SANDWICH_VIEW,
 }

+export const enum ColorScheme {
+  // Default: respect prefers-color-schema
+  SYSTEM,
+
+  // Use dark theme
+  DARK,
+
+  // use light theme
+  LIGHT,
+}
+
 export interface ApplicationState {
  // The top-level profile group from which most other data will be derived
  profileGroup: ProfileGroupState
@@ -56,6 +71,9 @@ export interface ApplicationState {
  // The table sorting method using for the sandwich view, specifying the column
  // to sort by, and the direction to sort that clumn.
  tableSortMethod: SortMethod
+
+  // The color scheme to use for the entire UI
+  colorScheme: ColorScheme
 }

 const protocol = window.location.protocol
@@ -65,6 +83,47 @@ const protocol = window.location.protocol
 // however, XHR will be unavailable to fetching files in adjacent directories.
 export const canUseXHR = protocol === 'http:' || protocol === 'https:'

+function colorScheme(state: ColorScheme | undefined, action: Action<any>): ColorScheme {
+  const localStorageKey = 'speedscope-color-scheme'
+
+  if (state === undefined) {
+    const storedPreference = window.localStorage && window.localStorage[localStorageKey]
+    if (storedPreference === 'DARK') {
+      return ColorScheme.DARK
+    } else if (storedPreference === 'LIGHT') {
+      return ColorScheme.LIGHT
+    } else {
+      return ColorScheme.SYSTEM
+    }
+  }
+
+  if (actions.setColorScheme.matches(action)) {
+    const value = action.payload
+
+    switch (value) {
+      case ColorScheme.DARK: {
+        window.localStorage[localStorageKey] = 'DARK'
+        break
+      }
+      case ColorScheme.LIGHT: {
+        window.localStorage[localStorageKey] = 'LIGHT'
+        break
+      }
+      case ColorScheme.SYSTEM: {
+        delete window.localStorage[localStorageKey]
+        break
+      }
+      default: {
+        const _exhaustiveCheck: never = value
+        return _exhaustiveCheck
+      }
+    }
+    return value
+  }
+
+  return state
+}
+
 export function createAppStore(initialState?: ApplicationState): redux.Store<ApplicationState> {
  const hashParams = getHashParams()

@@ -92,6 +151,8 @@ export function createAppStore(initialState?: ApplicationState): redux.Store<App
      field: SortField.SELF,
      direction: SortDirection.DESCENDING,
    }),
+
+    colorScheme,
  })

  return redux.createStore(reducer, initialState)
@@ -101,3 +162,30 @@ export function useAppSelector<T>(selector: (t: ApplicationState) => T, cacheArg
  /* eslint-disable react-hooks/exhaustive-deps */
  return useSelector(selector, cacheArgs)
 }
+
+export interface ActiveProfileState {
+  profile: Profile
+  index: number
+  chronoViewState: FlamechartViewState
+  leftHeavyViewState: FlamechartViewState
+  sandwichViewState: SandwichViewState
+}
+
+export function useActiveProfileState(): ActiveProfileState | null {
+  return useAppSelector(state => {
+    const {profileGroup} = state
+    if (!profileGroup) return null
+    if (profileGroup.indexToView >= profileGroup.profiles.length) return null
+
+    const index = profileGroup.indexToView
+    const profileState = profileGroup.profiles[index]
+    return {
+      ...profileGroup.profiles[profileGroup.indexToView],
+      profile: getProfileToView({
+        profile: profileState.profile,
+        flattenRecursion: state.flattenRecursion,
+      }),
+      index: profileGroup.indexToView,
+    }
+  }, [])
+}
@@ -1,10 +1,12 @@
 import {h} from 'preact'
-import {Application, ActiveProfileState} from './application'
-import {getProfileToView, getCanvasContext} from '../store/getters'
+import {Application} from './application'
+import {getCanvasContext} from '../store/getters'
 import {actions} from '../store/actions'
 import {useActionCreator} from '../lib/preact-redux'
 import {memo} from 'preact/compat'
-import {useAppSelector} from '../store'
+import {useAppSelector, useActiveProfileState} from '../store'
+import {ProfileSearchContextProvider} from './search-view'
+import {useTheme} from './themes/theme'

 const {
  setLoading,
@@ -19,41 +21,28 @@ const {

 export const ApplicationContainer = memo(() => {
  const appState = useAppSelector(state => state, [])
+  const theme = useTheme()
  const canvasContext = useAppSelector(
-    state => (state.glCanvas ? getCanvasContext(state.glCanvas) : null),
-    [],
+    state => (state.glCanvas ? getCanvasContext({theme, canvas: state.glCanvas}) : null),
+    [theme],
  )

-  const activeProfileState: ActiveProfileState | null = useAppSelector(state => {
-    const {profileGroup} = state
-    if (!profileGroup) return null
-    if (profileGroup.indexToView >= profileGroup.profiles.length) return null
-
-    const index = profileGroup.indexToView
-    const profileState = profileGroup.profiles[index]
-    return {
-      ...profileGroup.profiles[profileGroup.indexToView],
-      profile: getProfileToView({
-        profile: profileState.profile,
-        flattenRecursion: state.flattenRecursion,
-      }),
-      index: profileGroup.indexToView,
-    }
-  }, [])
-
  return (
-    <Application
-      activeProfileState={activeProfileState}
-      canvasContext={canvasContext}
-      setGLCanvas={useActionCreator(setGLCanvas, [])}
-      setLoading={useActionCreator(setLoading, [])}
-      setError={useActionCreator(setError, [])}
-      setProfileGroup={useActionCreator(setProfileGroup, [])}
-      setDragActive={useActionCreator(setDragActive, [])}
-      setViewMode={useActionCreator(setViewMode, [])}
-      setFlattenRecursion={useActionCreator(setFlattenRecursion, [])}
-      setProfileIndexToView={useActionCreator(setProfileIndexToView, [])}
-      {...appState}
-    />
+    <ProfileSearchContextProvider>
+      <Application
+        activeProfileState={useActiveProfileState()}
+        canvasContext={canvasContext}
+        setGLCanvas={useActionCreator(setGLCanvas, [])}
+        setLoading={useActionCreator(setLoading, [])}
+        setError={useActionCreator(setError, [])}
+        setProfileGroup={useActionCreator(setProfileGroup, [])}
+        setDragActive={useActionCreator(setDragActive, [])}
+        setViewMode={useActionCreator(setViewMode, [])}
+        setFlattenRecursion={useActionCreator(setFlattenRecursion, [])}
+        setProfileIndexToView={useActionCreator(setProfileIndexToView, [])}
+        theme={theme}
+        {...appState}
+      />
+    </ProfileSearchContextProvider>
  )
 })
@@ -2,23 +2,28 @@ import {h} from 'preact'
 import {StyleSheet, css} from 'aphrodite'
 import {FileSystemDirectoryEntry} from '../import/file-system-entry'

-import {Profile, ProfileGroup} from '../lib/profile'
-import {FontFamily, FontSize, Colors, Duration} from './style'
-import {importEmscriptenSymbolMap} from '../lib/emscripten'
+import {ProfileGroup, SymbolRemapper} from '../lib/profile'
+import {FontFamily, FontSize, Duration} from './style'
+import {importEmscriptenSymbolMap as importEmscriptenSymbolRemapper} from '../lib/emscripten'
 import {SandwichViewContainer} from './sandwich-view'
 import {saveToFile} from '../lib/file-format'
-import {ApplicationState, ViewMode, canUseXHR} from '../store'
+import {ApplicationState, ViewMode, canUseXHR, ActiveProfileState} from '../store'
 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'
 import {Toolbar} from './toolbar'
+import {importJavaScriptSourceMapSymbolRemapper} from '../lib/js-source-map'
+import {Theme, withTheme} from './themes/theme'

 const importModule = import('../import')
-// Force eager loading of the module
+
+// Force eager loading of a few code-split modules.
+//
+// We put them all in one place so we can directly control the relative priority
+// of these.
 importModule.then(() => {})
+import('../lib/demangle-cpp').then(() => {})
+import('source-map').then(() => {})

 async function importProfilesFromText(
  fileName: string,
@@ -53,6 +58,7 @@ const exampleProfileURL = require('../../sample/profiles/stackcollapse/perf-vert

 interface GLCanvasProps {
  canvasContext: CanvasContext | null
+  theme: Theme
  setGLCanvas: (canvas: HTMLCanvasElement | null) => void
 }
 export class GLCanvas extends StatelessComponent<GLCanvasProps> {
@@ -94,7 +100,6 @@ export class GLCanvas extends StatelessComponent<GLCanvasProps> {
      widthInAppUnits,
      heightInAppUnits,
    )
-    this.props.canvasContext.gl.clear(new Graphics.Color(1, 1, 1, 1))
  }

  onWindowResize = () => {
@@ -123,6 +128,7 @@ export class GLCanvas extends StatelessComponent<GLCanvasProps> {
    window.removeEventListener('resize', this.onWindowResize)
  }
  render() {
+    const style = getStyle(this.props.theme)
    return (
      <div ref={this.containerRef} className={css(style.glCanvasView)}>
        <canvas ref={this.ref} width={1} height={1} />
@@ -131,14 +137,6 @@ export class GLCanvas extends StatelessComponent<GLCanvasProps> {
  }
 }

-export interface ActiveProfileState {
-  profile: Profile
-  index: number
-  chronoViewState: FlamechartViewState
-  leftHeavyViewState: FlamechartViewState
-  sandwichViewState: SandwichViewState
-}
-
 export type ApplicationProps = ApplicationState & {
  setGLCanvas: (canvas: HTMLCanvasElement | null) => void
  setLoading: (loading: boolean) => void
@@ -150,6 +148,7 @@ export type ApplicationProps = ApplicationState & {
  setProfileIndexToView: (profileIndex: number) => void
  activeProfileState: ActiveProfileState | null
  canvasContext: CanvasContext | null
+  theme: Theme
 }

 export class Application extends StatelessComponent<ApplicationProps> {
@@ -204,6 +203,10 @@ export class Application extends StatelessComponent<ApplicationProps> {
    this.props.setLoading(false)
  }

+  getStyle(): ReturnType<typeof getStyle> {
+    return getStyle(this.props.theme)
+  }
+
  loadFromFile(file: File) {
    this.loadProfile(async () => {
      const profiles = await importProfilesFromFile(file)
@@ -233,15 +236,36 @@ export class Application extends StatelessComponent<ApplicationProps> {
        reader.readAsText(file)
        const fileContents = await fileContentsPromise

-        const map = importEmscriptenSymbolMap(fileContents)
-        if (map) {
-          const {profile, index} = this.props.activeProfileState
+        let symbolRemapper: SymbolRemapper | null = null
+
+        const emscriptenSymbolRemapper = importEmscriptenSymbolRemapper(fileContents)
+        if (emscriptenSymbolRemapper) {
          console.log('Importing as emscripten symbol map')
-          profile.remapNames(name => map.get(name) || name)
+          symbolRemapper = emscriptenSymbolRemapper
+        }
+
+        const jsSourceMapRemapper = await importJavaScriptSourceMapSymbolRemapper(
+          fileContents,
+          file.name,
+        )
+        if (!symbolRemapper && jsSourceMapRemapper) {
+          console.log('Importing as JavaScript source map')
+          symbolRemapper = jsSourceMapRemapper
+        }
+
+        if (symbolRemapper != null) {
          return {
            name: this.props.profileGroup.name || 'profile',
-            indexToView: index,
-            profiles: [profile],
+            indexToView: this.props.profileGroup.indexToView,
+            profiles: this.props.profileGroup.profiles.map(profileState => {
+              // We do a shallow clone here to invalidate certain caches keyed
+              // on a reference to the profile group under the assumption that
+              // profiles are immutable. Symbol remapping is (at time of
+              // writing) the only exception to that immutability.
+              const p = profileState.profile.shallowClone()
+              p.remapSymbols(symbolRemapper!)
+              return p
+            }),
          }
        }
      }
@@ -413,6 +437,8 @@ export class Application extends StatelessComponent<ApplicationProps> {
  }

  renderLanding() {
+    const style = this.getStyle()
+
    return (
      <div className={css(style.landingContainer)}>
        <div className={css(style.landingMessage)}>
@@ -484,6 +510,8 @@ export class Application extends StatelessComponent<ApplicationProps> {
  }

  renderError() {
+    const style = this.getStyle()
+
    return (
      <div className={css(style.error)}>
        <div>😿 Something went wrong.</div>
@@ -493,6 +521,7 @@ export class Application extends StatelessComponent<ApplicationProps> {
  }

  renderLoadingBar() {
+    const style = this.getStyle()
    return <div className={css(style.loading)} />
  }

@@ -527,6 +556,7 @@ export class Application extends StatelessComponent<ApplicationProps> {
  }

  render() {
+    const style = this.getStyle()
    return (
      <div
        onDrop={this.onDrop}
@@ -534,7 +564,11 @@ export class Application extends StatelessComponent<ApplicationProps> {
        onDragLeave={this.onDragLeave}
        className={css(style.root, this.props.dragActive && style.dragTargetRoot)}
      >
-        <GLCanvas setGLCanvas={this.props.setGLCanvas} canvasContext={this.props.canvasContext} />
+        <GLCanvas
+          setGLCanvas={this.props.setGLCanvas}
+          canvasContext={this.props.canvasContext}
+          theme={this.props.theme}
+        />
        <Toolbar
          saveFile={this.saveFile}
          browseForFile={this.browseForFile}
@@ -547,107 +581,114 @@ export class Application extends StatelessComponent<ApplicationProps> {
  }
 }

-const style = StyleSheet.create({
-  glCanvasView: {
-    position: 'absolute',
-    width: '100vw',
-    height: '100vh',
-    zIndex: -1,
-    pointerEvents: 'none',
-  },
-  error: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: '100%',
-  },
-  loading: {
-    height: 3,
-    marginBottom: -3,
-    background: Colors.DARK_BLUE,
-    transformOrigin: '0% 50%',
-    animationName: [
-      {
-        from: {
-          transform: `scaleX(0)`,
-        },
-        to: {
-          transform: `scaleX(1)`,
-        },
-      },
-    ],
-    animationTimingFunction: 'cubic-bezier(0, 1, 0, 1)',
-    animationDuration: '30s',
-  },
-  root: {
-    width: '100vw',
-    height: '100vh',
-    overflow: 'hidden',
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'relative',
-    fontFamily: FontFamily.MONOSPACE,
-    lineHeight: '20px',
-  },
-  dragTargetRoot: {
-    cursor: 'copy',
-  },
-  dragTarget: {
-    boxSizing: 'border-box',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    border: `5px dashed ${Colors.DARK_BLUE}`,
-    pointerEvents: 'none',
-  },
-  contentContainer: {
-    position: 'relative',
-    display: 'flex',
-    overflow: 'hidden',
-    flexDirection: 'column',
-    flex: 1,
-  },
-  landingContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flex: 1,
-  },
-  landingMessage: {
-    maxWidth: 600,
-  },
-  landingP: {
-    marginBottom: 16,
-  },
-  hide: {
-    display: 'none',
-  },
-  browseButtonContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  browseButton: {
-    marginBottom: 16,
-    height: 72,
-    flex: 1,
-    maxWidth: 256,
-    textAlign: 'center',
-    fontSize: FontSize.BIG_BUTTON,
-    lineHeight: '72px',
-    background: Colors.DARK_BLUE,
-    color: Colors.WHITE,
-    transition: `all ${Duration.HOVER_CHANGE} ease-in`,
-    ':hover': {
-      background: Colors.BRIGHT_BLUE,
+const getStyle = withTheme(theme =>
+  StyleSheet.create({
+    glCanvasView: {
+      position: 'absolute',
+      width: '100vw',
+      height: '100vh',
+      zIndex: -1,
+      pointerEvents: 'none',
    },
-  },
-  link: {
-    color: Colors.BRIGHT_BLUE,
-    cursor: 'pointer',
-    textDecoration: 'none',
-  },
-})
+    error: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%',
+    },
+    loading: {
+      height: 3,
+      marginBottom: -3,
+      background: theme.selectionPrimaryColor,
+      transformOrigin: '0% 50%',
+      animationName: [
+        {
+          from: {
+            transform: `scaleX(0)`,
+          },
+          to: {
+            transform: `scaleX(1)`,
+          },
+        },
+      ],
+      animationTimingFunction: 'cubic-bezier(0, 1, 0, 1)',
+      animationDuration: '30s',
+    },
+    root: {
+      width: '100vw',
+      height: '100vh',
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      fontFamily: FontFamily.MONOSPACE,
+      lineHeight: '20px',
+      color: theme.fgPrimaryColor,
+    },
+    dragTargetRoot: {
+      cursor: 'copy',
+    },
+    dragTarget: {
+      boxSizing: 'border-box',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      border: `5px dashed ${theme.selectionPrimaryColor}`,
+      pointerEvents: 'none',
+    },
+    contentContainer: {
+      position: 'relative',
+      display: 'flex',
+      overflow: 'hidden',
+      flexDirection: 'column',
+      flex: 1,
+    },
+    landingContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flex: 1,
+    },
+    landingMessage: {
+      maxWidth: 600,
+    },
+    landingP: {
+      marginBottom: 16,
+    },
+    hide: {
+      display: 'none',
+    },
+    browseButtonContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    browseButton: {
+      marginBottom: 16,
+      height: 72,
+      flex: 1,
+      maxWidth: 256,
+      textAlign: 'center',
+      fontSize: FontSize.BIG_BUTTON,
+      lineHeight: '72px',
+      background: theme.selectionPrimaryColor,
+      color: theme.altFgPrimaryColor,
+      transition: `all ${Duration.HOVER_CHANGE} ease-in`,
+      ':hover': {
+        background: theme.selectionSecondaryColor,
+      },
+    },
+    link: {
+      color: theme.selectionPrimaryColor,
+      cursor: 'pointer',
+      textDecoration: 'none',
+      transition: `all ${Duration.HOVER_CHANGE} ease-in`,
+      ':hover': {
+        color: theme.selectionSecondaryColor,
+      },
+    },
+  }),
+)
@@ -13,10 +13,11 @@ import {
  getFrameToColorBucket,
 } from '../store/getters'
 import {FlamechartID} from '../store/flamechart-view-state'
-import {FlamechartWrapper, useDummySearchProps} from './flamechart-wrapper'
+import {FlamechartWrapper} from './flamechart-wrapper'
 import {useAppSelector} from '../store'
 import {h} from 'preact'
 import {memo} from 'preact/compat'
+import {useTheme} from './themes/theme'

 const getCalleeProfile = memoizeByShallowEquality<
  {
@@ -52,6 +53,7 @@ export const CalleeFlamegraphView = memo((ownProps: FlamechartViewContainerProps
  const {index, profile, sandwichViewState} = activeProfileState
  const flattenRecursion = useAppSelector(state => state.flattenRecursion, [])
  const glCanvas = useAppSelector(state => state.glCanvas, [])
+  const theme = useTheme()

  if (!profile) throw new Error('profile missing')
  if (!glCanvas) throw new Error('glCanvas missing')
@@ -61,8 +63,8 @@ export const CalleeFlamegraphView = memo((ownProps: FlamechartViewContainerProps

  const frameToColorBucket = getFrameToColorBucket(profile)
  const getColorBucketForFrame = createGetColorBucketForFrame(frameToColorBucket)
-  const getCSSColorForFrame = createGetCSSColorForFrame(frameToColorBucket)
-  const canvasContext = getCanvasContext(glCanvas)
+  const getCSSColorForFrame = createGetCSSColorForFrame({theme, frameToColorBucket})
+  const canvasContext = getCanvasContext({theme, canvas: glCanvas})

  const flamechart = getCalleeFlamegraph({
    calleeProfile: getCalleeProfile({profile, frame: selectedFrame, flattenRecursion}),
@@ -72,20 +74,16 @@ export const CalleeFlamegraphView = memo((ownProps: FlamechartViewContainerProps

  return (
    <FlamechartWrapper
+      theme={theme}
      renderInverted={false}
      flamechart={flamechart}
      flamechartRenderer={flamechartRenderer}
      canvasContext={canvasContext}
      getCSSColorForFrame={getCSSColorForFrame}
      {...useFlamechartSetters(FlamechartID.SANDWICH_CALLEES, index)}
+      {...callerCallee.calleeFlamegraph}
      // This overrides the setSelectedNode specified in useFlamechartSettesr
      setSelectedNode={noop}
-      {...callerCallee.calleeFlamegraph}
-      /*
-       * TODO(jlfwong): When implementing search for the sandwich views,
-       * change these flags
-       * */
-      {...useDummySearchProps()}
    />
  )
 })
@@ -1,24 +1,28 @@
 import {h} from 'preact'
 import {StyleSheet, css} from 'aphrodite'
-import {Colors, FontSize} from './style'
+import {FontSize} from './style'
+import {useTheme, withTheme} from './themes/theme'

 interface ColorChitProps {
  color: string
 }

 export function ColorChit(props: ColorChitProps) {
+  const style = getStyle(useTheme())
  return <span className={css(style.stackChit)} style={{backgroundColor: props.color}} />
 }

-const style = StyleSheet.create({
-  stackChit: {
-    position: 'relative',
-    top: -1,
-    display: 'inline-block',
-    verticalAlign: 'middle',
-    marginRight: '0.5em',
-    border: `1px solid ${Colors.LIGHT_GRAY}`,
-    width: FontSize.LABEL - 2,
-    height: FontSize.LABEL - 2,
-  },
-})
+const getStyle = withTheme(theme =>
+  StyleSheet.create({
+    stackChit: {
+      position: 'relative',
+      top: -1,
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      marginRight: '0.5em',
+      border: `1px solid ${theme.fgSecondaryColor}`,
+      width: FontSize.LABEL - 2,
+      height: FontSize.LABEL - 2,
+    },
+  }),
+)
@@ -1,10 +1,11 @@
 import {StyleDeclarationValue, css} from 'aphrodite'
-import {h, Component, JSX} from 'preact'
-import {style} from './flamechart-style'
+import {h, JSX} from 'preact'
+import {getFlamechartStyle} from './flamechart-style'
 import {formatPercent} from '../lib/utils'
 import {Frame, CallTreeNode} from '../lib/profile'
 import {ColorChit} from './color-chit'
 import {Flamechart} from '../lib/flamechart'
+import {useTheme} from './themes/theme'

 interface StatisticsTableProps {
  title: string
@@ -15,75 +16,75 @@ interface StatisticsTableProps {
  formatter: (v: number) => string
 }

-class StatisticsTable extends Component<StatisticsTableProps, {}> {
-  render() {
-    const total = this.props.formatter(this.props.selectedTotal)
-    const self = this.props.formatter(this.props.selectedSelf)
-    const totalPerc = (100.0 * this.props.selectedTotal) / this.props.grandTotal
-    const selfPerc = (100.0 * this.props.selectedSelf) / this.props.grandTotal
+function StatisticsTable(props: StatisticsTableProps) {
+  const style = getFlamechartStyle(useTheme())

-    return (
-      <div className={css(style.statsTable)}>
-        <div className={css(this.props.cellStyle, style.statsTableCell, style.statsTableHeader)}>
-          {this.props.title}
-        </div>
+  const total = props.formatter(props.selectedTotal)
+  const self = props.formatter(props.selectedSelf)
+  const totalPerc = (100.0 * props.selectedTotal) / props.grandTotal
+  const selfPerc = (100.0 * props.selectedSelf) / props.grandTotal

-        <div className={css(this.props.cellStyle, style.statsTableCell)}>Total</div>
-        <div className={css(this.props.cellStyle, style.statsTableCell)}>Self</div>
-
-        <div className={css(this.props.cellStyle, style.statsTableCell)}>{total}</div>
-        <div className={css(this.props.cellStyle, style.statsTableCell)}>{self}</div>
-
-        <div className={css(this.props.cellStyle, style.statsTableCell)}>
-          {formatPercent(totalPerc)}
-          <div className={css(style.barDisplay)} style={{height: `${totalPerc}%`}} />
-        </div>
-        <div className={css(this.props.cellStyle, style.statsTableCell)}>
-          {formatPercent(selfPerc)}
-          <div className={css(style.barDisplay)} style={{height: `${selfPerc}%`}} />
-        </div>
+  return (
+    <div className={css(style.statsTable)}>
+      <div className={css(props.cellStyle, style.statsTableCell, style.statsTableHeader)}>
+        {props.title}
      </div>
-    )
-  }
+
+      <div className={css(props.cellStyle, style.statsTableCell)}>Total</div>
+      <div className={css(props.cellStyle, style.statsTableCell)}>Self</div>
+
+      <div className={css(props.cellStyle, style.statsTableCell)}>{total}</div>
+      <div className={css(props.cellStyle, style.statsTableCell)}>{self}</div>
+
+      <div className={css(props.cellStyle, style.statsTableCell)}>
+        {formatPercent(totalPerc)}
+        <div className={css(style.barDisplay)} style={{height: `${totalPerc}%`}} />
+      </div>
+      <div className={css(props.cellStyle, style.statsTableCell)}>
+        {formatPercent(selfPerc)}
+        <div className={css(style.barDisplay)} style={{height: `${selfPerc}%`}} />
+      </div>
+    </div>
+  )
 }

 interface StackTraceViewProps {
  getFrameColor: (frame: Frame) => string
  node: CallTreeNode
 }
-class StackTraceView extends Component<StackTraceViewProps, {}> {
-  render() {
-    const rows: JSX.Element[] = []
-    let node: CallTreeNode | null = this.props.node
-    for (; node && !node.isRoot(); node = node.parent) {
-      const row: (JSX.Element | string)[] = []
-      const {frame} = node
+function StackTraceView(props: StackTraceViewProps) {
+  const style = getFlamechartStyle(useTheme())

-      row.push(<ColorChit color={this.props.getFrameColor(frame)} />)
+  const rows: JSX.Element[] = []
+  let node: CallTreeNode | null = props.node
+  for (; node && !node.isRoot(); node = node.parent) {
+    const row: (JSX.Element | string)[] = []
+    const {frame} = node

-      if (rows.length) {
-        row.push(<span className={css(style.stackFileLine)}>&gt; </span>)
-      }
-      row.push(frame.name)
+    row.push(<ColorChit color={props.getFrameColor(frame)} />)

-      if (frame.file) {
-        let pos = frame.file
-        if (frame.line) {
-          pos += `:${frame.line}`
-          if (frame.col) {
-            pos += `:${frame.col}`
-          }
-        }
-        row.push(<span className={css(style.stackFileLine)}> ({pos})</span>)
-      }
-      rows.push(<div className={css(style.stackLine)}>{row}</div>)
+    if (rows.length) {
+      row.push(<span className={css(style.stackFileLine)}>&gt; </span>)
    }
-    return (
-      <div className={css(style.stackTraceView)}>
-        <div className={css(style.stackTraceViewPadding)}>{rows}</div>
-      </div>
-    )
+    row.push(frame.name)
+
+    if (frame.file) {
+      let pos = frame.file
+      if (frame.line != null) {
+        pos += `:${frame.line}`
+        if (frame.col != null) {
+          pos += `:${frame.col}`
+        }
+      }
+      row.push(<span className={css(style.stackFileLine)}> ({pos})</span>)
+    }
+    rows.push(<div className={css(style.stackLine)}>{row}</div>)
  }
+  return (
+    <div className={css(style.stackTraceView)}>
+      <div className={css(style.stackTraceViewPadding)}>{rows}</div>
+    </div>
+  )
 }

 interface FlamechartDetailViewProps {
@@ -92,31 +93,31 @@ interface FlamechartDetailViewProps {
  selectedNode: CallTreeNode
 }

-export class FlamechartDetailView extends Component<FlamechartDetailViewProps, {}> {
-  render() {
-    const {flamechart, selectedNode} = this.props
-    const {frame} = selectedNode
+export function FlamechartDetailView(props: FlamechartDetailViewProps) {
+  const style = getFlamechartStyle(useTheme())

-    return (
-      <div className={css(style.detailView)}>
-        <StatisticsTable
-          title={'This Instance'}
-          cellStyle={style.thisInstanceCell}
-          grandTotal={flamechart.getTotalWeight()}
-          selectedTotal={selectedNode.getTotalWeight()}
-          selectedSelf={selectedNode.getSelfWeight()}
-          formatter={flamechart.formatValue.bind(flamechart)}
-        />
-        <StatisticsTable
-          title={'All Instances'}
-          cellStyle={style.allInstancesCell}
-          grandTotal={flamechart.getTotalWeight()}
-          selectedTotal={frame.getTotalWeight()}
-          selectedSelf={frame.getSelfWeight()}
-          formatter={flamechart.formatValue.bind(flamechart)}
-        />
-        <StackTraceView node={selectedNode} getFrameColor={this.props.getCSSColorForFrame} />
-      </div>
-    )
-  }
+  const {flamechart, selectedNode} = props
+  const {frame} = selectedNode
+
+  return (
+    <div className={css(style.detailView)}>
+      <StatisticsTable
+        title={'This Instance'}
+        cellStyle={style.thisInstanceCell}
+        grandTotal={flamechart.getTotalWeight()}
+        selectedTotal={selectedNode.getTotalWeight()}
+        selectedSelf={selectedNode.getSelfWeight()}
+        formatter={flamechart.formatValue.bind(flamechart)}
+      />
+      <StatisticsTable
+        title={'All Instances'}
+        cellStyle={style.allInstancesCell}
+        grandTotal={flamechart.getTotalWeight()}
+        selectedTotal={frame.getTotalWeight()}
+        selectedSelf={frame.getSelfWeight()}
+        formatter={flamechart.formatValue.bind(flamechart)}
+      />
+      <StackTraceView node={selectedNode} getFrameColor={props.getCSSColorForFrame} />
+    </div>
+  )
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jamie Wong	03a5104317	1.13.0	2021-02-14 23:36:12 -08:00
Jamie Wong	7dcfab1bbc	Update a few remaining references to amster (#333 ) Fixes #332	2021-02-14 23:31:33 -08:00
Jamie Wong	24b60dfd4a	Callgrind import format support (#331 ) Implements import from the [callgrind format](https://www.valgrind.org/docs/manual/cl-format.html). This comes with a big caveat that the call graph information contained with callgrind formatted files don't uniquely define a flamegraph, so the generated flamegraph is a best-effort guess. Here's the comment from the top of the main file for the callgrind importer with an examplataion: ``` // https://www.valgrind.org/docs/manual/cl-format.html // // Larger example files can be found by searching on github: // https://github.com/search?q=cfn%3D&type=code // // Converting callgrind files into flamegraphs is challenging because callgrind // formatted profiles contain call graphs with weighted nodes and edges, and // such a weighted call graph does not uniquely define a flamegraph. // // Consider a program that looks like this: // // // example.js // function backup(read) { // if (read) { // read() // } else { // write() // } // } // // function start() { // backup(true) // } // // function end() { // backup(false) // } // // start() // end() // // Profiling this program might result in a profile that looks like the // following flame graph defined in Brendan Gregg's plaintext format: // // start;backup;read 4 // end;backup;write 4 // // When we convert this execution into a call-graph, we get the following: // // +------------------+ +---------------+ // \| start (self: 0) \| \| end (self: 0) \| // +------------------+ +---------------\| // \ / // (total: 4) \ / (total: 4) // v v // +------------------+ // \| backup (self: 0) \| // +------------------+ // / \ // (total: 4) / \ (total: 4) // v v // +----------------+ +-----------------+ // \| read (self: 4) \| \| write (self: 4) \| // +----------------+ +-----------------+ // // In the process of the conversion, we've lost information about the ratio of // time spent in read v.s. write in the start call v.s. the end call. The // following flame graph would yield the exact same call-graph, and therefore // the exact sample call-grind formatted profile: // // start;backup;read 3 // start;backup;write 1 // end;backup;read 1 // end;backup;write 3 // // This is unfortunate, since it means we can't produce a flamegraph that isn't // potentially lying about the what the actual execution behavior was. To // produce a flamegraph at all from the call graph representation, we have to // decide how much weight each sub-call should have. Given that we know the // total weight of each node, we'll make the incorrect assumption that every // invocation of a function will have the average distribution of costs among // the sub-function invocations. In the example given, this means we assume that // every invocation of backup() is assumed to spend half its time in read() and // half its time in write(). // // So the flamegraph we'll produce from the given call-graph will actually be: // // start;backup;read 2 // start;backup;write 2 // end;backup;read 2 // end;backup;write 2 // // A particularly bad consequence is that the resulting flamegraph will suggest // that there was at some point a call stack that looked like // strat;backup;write, even though that never happened in the real program // execution. ``` Fixes #18	2021-02-14 23:14:58 -08:00
Jamie Wong	6a979bb568	1.12.1	2020-11-12 02:35:59 -08:00
Jamie Wong	36911599cb	Fix infinite recursion in resizing on retina displays (fixes #327 )	2020-11-12 02:34:19 -08:00
Jamie Wong	b32ff08ca3	1.12.0	2020-11-12 01:57:41 -08:00
Jamie Wong	361bdc9cd2	Fix bug in remapRangesToTrimmedText (#326 ) Welp, looks like I missed a pretttty important edge case in my test. Fixes #324	2020-11-12 01:52:47 -08:00
Jamie Wong	a1384b03be	Add a system for theming, use it to implement dark mode (#323 ) Dark mode: ![image](https://user-images.githubusercontent.com/150329/98463526-9680a880-2170-11eb-9fc2-9018604ff1ad.png) Light mode: ![image](https://user-images.githubusercontent.com/150329/98463537-a5fff180-2170-11eb-8b60-afe2096d848e.png) Fixes #220	2020-11-12 01:51:55 -08:00
Jamie Wong	5f32640060	1.11.1	2020-10-25 01:50:28 -07:00
Jamie Wong	a10c834f99	Fix trace-event import for many cases where there are 'ts' collisions (#322 ) The trace event format has a very unfortunate combination of requirements in order to give a best-effort interpretation of a given trace file: 1. Events may be recorded out-of-order by timestamp 2. Events with the same timestamp should be processed in the order they were provided in the file. Mostly. The first requirement is written explicitly [in the spec](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview). > The events do not have to be in timestamp-sorted order. The second one isn't explicitly written, but it's implicitly true because otherwise the interpretation of a file is ambiguous. For example, the following file has all events with the same `ts` field, but re-ordering the fields changes the interpretation. ``` [ { "pid": 0, "tid": 0, "ph": "X", "ts": 0, "dur": 20, "name": "alpha" }, { "pid": 0, "tid": 0, "ph": "X", "ts": 0, "dur": 20, "name": "beta" } } ``` If we allowed arbitrary reordering, it would be ambiguous whether the alpha frame should be nested inside of the beta frame or vice versa. Since traces are interpreted as call trees, it's not okay to just arbitrarily choose. So you might next guess that a reasonable approach would be to do a [stable sort](https://wiki.c2.com/?StableSort) by "ts", then process the events one-by-one. This almost works, except for two additional problems. The first problem is that in some situations this would still yield invalid results. ``` [ {"pid": 0, "tid": 0, "ph": "B", "name": "alpha", "ts": 0}, {"pid": 0, "tid": 0, "ph": "B", "name": "beta", "ts": 0}, {"pid": 0, "tid": 0, "ph": "E", "name": "alpha", "ts": 1}, {"pid": 0, "tid": 0, "ph": "E", "name": "beta", "ts": 1} ] ``` If we were to follow this rule, we would try to execute the `"E"` for alpha before the `"E"` for beta, even though beta is on the top of the stack. So in that case, we actually need to execute the `"E"` for beta first, otherwise the resulting profile is incorrect. The other problem with this approach of using the stable sort order is the question of how to deal with `"X"` events. speedscope translates `"X"` events into a `"B"` and `"E"` event pair. But where should it put the `"E"` event? Your first guess might be "at the index where the `"X"` events occur in the file". This runs into trouble in cases like this: ``` [ { "pid": 0, "tid": 0, "ph": "X", "ts": 9, "dur": 1, "name": "beta" }, { "pid": 0, "tid": 0, "ph": "X", "ts": 9, "dur": 2, "name": "gamma" }, ] ``` The most natural translation of this would be to convert it into the following `"B"` and `"E"` events: ``` [ { "pid": 0, "tid": 0, "ph": "B", "ts": 9, "name": "beta" }, { "pid": 0, "tid": 0, "ph": "E", "ts": 10, "name": "beta" }, { "pid": 0, "tid": 0, "ph": "B", "ts": 9, "name": "gamma" }, { "pid": 0, "tid": 0, "ph": "E", "ts": 11, "name": "gamma" }, ] ``` Which, after a stable sort turns into this: ``` [ { "pid": 0, "tid": 0, "ph": "B", "ts": 9, "name": "beta" }, { "pid": 0, "tid": 0, "ph": "B", "ts": 9, "name": "gamma" }, { "pid": 0, "tid": 0, "ph": "E", "ts": 10, "name": "beta" }, { "pid": 0, "tid": 0, "ph": "E", "ts": 11, "name": "gamma" }, ] ``` Notice that we again have a problem where we open "beta" before "gamma", but we need to close "beta" first because it ends first! Ultimately, I couldn't figure out any sort order that would allow me to predict ahead-of-time what order to process the events in. So instead, I create two event queues: one for `"B"` events, and one for `"E"` events, and then try to be clever about how I merge them together. AFAICT, chrome://tracing does not sort events before processing them, which is kind of baffling. But chrome://tracing also has really bizarre behaviour for things like this where the resulting flamegraph isn't even a valid tree (there are overlapping ranges): ``` [ { "pid": 0, "tid": 0, "ph": "X", "ts": 0, "dur": 10, "name": "alpha" }, { "pid": 0, "tid": 0, "ph": "X", "ts": 5, "dur": 10, "name": "beta" } } ``` So I'm going to call this "good enough" for now. Fixes #223 Fixes #320	2020-10-25 01:45:13 -07:00
Jamie Wong	de3ab89eb5	Fix import of trace event files where B/E events' args don't match (#321 ) In #273, I changed `CallTreeProfileBuilder.leaveFrame` to fail hard when you request to leave a frame different from the one at the top of the stack. It turns out we were intentionally doing this for trace event imports, because `args` are part of the frame key, and we want to allow profiles to be imported where the `"B"` and `"E"` events have differing `args` field. This PR fixes the import code to permissively allow the `"args"` field to not match between the `"B"` and `"E"` fields. A note on intentional differences between speedscope and chrome://tracing `chrome://tracing` will close whichever frame is at the top when it gets an `"E"` event, regardless of whether the name or the args match. speedscope will ignore the event entirely if the `"name"` field doesn't match, but will warn but still close the frame if the `"name"`s match but the `"args"` don't. ``` [ {"pid": 0, "tid": 0, "ph": "B", "name": "alpha", "ts": 0}, {"pid": 0, "tid": 0, "ph": "B", "name": "beta", "ts": 1}, {"pid": 0, "tid": 0, "ph": "E", "name": "gamma", "ts": 2}, {"pid": 0, "tid": 0, "ph": "E", "name": "beta", "ts": 9}, {"pid": 0, "tid": 0, "ph": "E", "name": "alpha", "ts": 10} ] ``` ### speedscope ![image](https://user-images.githubusercontent.com/150329/97098205-7365dd00-1637-11eb-9869-4e81ebebcee1.png) ``` warning: ts=2: Request to end "gamma" when "beta" was on the top of the stack. Doing nothing instead. ``` ### chrome://tracing ![image](https://user-images.githubusercontent.com/150329/97098215-87114380-1637-11eb-909c-b2e70c7291a4.png)	2020-10-24 21:58:31 -07:00
Jamie Wong	aee2dfdf89	1.11.0	2020-10-13 01:05:26 -07:00
Jamie Wong	d9b3950274	Support remapping profiles using source maps (#317 ) This PR adds the ability to remap an already-loaded profile using a JavaScript source map. This is useful for e.g. recording minified profiles in production, and then remapping their symbols when the source map isn't made directly available to the browser in production. This is a bit of a hidden feature. The way it works is to drop a profile into speedscope, then drop the sourcemap file on top of it. To test this, I used a small project @cricklet made (https://gist.github.com/cricklet/0deaaa7dd63657adb6818f0a52362651), and also tested against speedscope itself. To test against speedscope itself, I profiled loading a file in speedscope in Chrome, then dropped the resulting Chrome timeline profile into speedscope, and dropped speedscope's own sourcemap on top. Before dropping the source map, the symbols look like this: ![image](https://user-images.githubusercontent.com/150329/94977230-b2878f00-04cc-11eb-8907-02a1f1485653.png) After dropping the source map, they look like this: ![image](https://user-images.githubusercontent.com/150329/94977253-d4811180-04cc-11eb-9f88-1e7a02149331.png) I also added automated tests using a small JS bundle constructed with various different JS bundlers to make sure it was doing a sensible thing in each case. # Background Remapping symbols in profiles using source-maps proved to be more complex than I originally thought because of an idiosyncrasy of which line & column are referenced for stack frames in browsers. Rather than the line & column referencing the first character of the symbol, they instead reference the opening paren for the function definition. Here's an example file where it's not immediately apparent which line & column is going to be referenced by each stack frame: ``` class Kludge { constructor() { alpha() } zap() { alpha() } } function alpha() { for (let i = 0; i < 1000; i++) { beta() delta() } } function beta() { for (let i = 0; i < 10; i++) { gamma() } } const delta = function () { for (let i = 0; i < 10; i++) { gamma() } } const gamma = () => { let prod = 1 for (let i = 1; i < 1000; i++) { prod = i } return prod } const k = new Kludge() k.zap() ``` The resulting profile looks like this: ![image](https://user-images.githubusercontent.com/150329/94976830-0db88200-04cb-11eb-86d7-934365a17c53.png) The relevant line & column for each function are... ``` // Kludge: line 2, column 14 class Kludge { constructor() { ^ ... // zap: line 6, column 6 zap() { ^ ... // alpha: line 11, column 15 function alpha() { ^ ... // delta: line 24, column 24 const delta = function () { ^ ... // gamma: line 31, column 1 const gamma = () => { ^ ``` If we look up the source map entry that corresponds to the opening paren, we'll nearly always get nothing. Instead, we'll look at the entry preceding* the one which contains the opening paren, and hope that has our symbol name. It seems this works at least some of the time. Another complication is that some, but not all source maps include the original names of functions. For ones that don't, but do include the original source-code, we try to deduce it ourselves with varying amounts of success. Supersedes #306 Fixes #139	2020-10-12 18:03:31 -07:00
Gabriele N. Tornetta	177696e359	Update link to Austin instructions (#319 ) The Austin format conversion tools have been moved to the dedicated austin-python module. The README has been updated to point to the new instructions.	2020-10-11 12:05:20 -07:00
Jamie Wong	16e32dc08e	Normalize line & column numbers to be 1-based in Chrome & Firefox imports (#318 ) This also fixes a dumb bug in the Firefox import that just completely failed to import column numbers.	2020-10-02 14:56:22 -07:00
Jamie Wong	8a4f38a8cb	1.10.0	2020-09-29 18:51:49 -07:00
Jamie Wong	9361a6baf2	Switch from Travis CI to GitHub Actions for test runs (#316 ) Switch from Travis CI to GitHub Actions for test runs	2020-09-29 16:39:18 -07:00
Jamie Wong	ede9c74d50	Remove accidentally added/retained dependencies on react and react-redux (#315 ) speedscope no longer relies upon react-redux, and never depended upon react. Let's clean these up.	2020-09-29 16:20:27 -07:00
Jamie Wong	f758130455	Add support for imports of UTF-16 encoded text w/ Byte Order Mark (BOM) (#314 ) Before this PR, we blindly assumed that all text imported into speedscope was UTF-8 encoded. This, unsurprisingly, is not always true. After this PR, we support text that's UTF-16 encoded, with either the little-endian or big-endian byte-order-mark. Fixed #291	2020-09-29 15:40:49 -07:00
Jamie Wong	f3a1c09c9b	Add support for Safari profiles (#313 ) Closes #294 This adds import for Safari/webkit profiler. Well, for Safari 13.1 for sure, I haven't done any work to check if there's been changes to the syntax. It seems to work OK, and is already a huge improvement over profiling in Safari (which doesn't even have a flame graph, let alone something like left heavy). Sadly, the sampler resolution is only 1kHz, which is not super useful for a lot of profiling work. I made a ticket on webkit bug tracker to ask for 10kHz/configurable sampling rate: https://bugs.webkit.org/show_bug.cgi?id=214866 Another thing that's missing is that I cut out all the idle time. We could also insert layout/paint samples into the timeline by parsing `events`. But I'll leave that for another time. <img width="1280" alt="Captura de pantalla 2020-07-28 a las 11 02 06" src="https://user-images.githubusercontent.com/183747/88643560-20c16700-d0c2-11ea-9c73-d9159e68fab9.png">	2020-09-29 14:26:01 -07:00
Sebastian Wahl	069c0194a6	#168 Fix browser not opening on Windows when using the CLI (#307 )	2020-09-14 11:53:36 -07:00
Jamie Wong	64fe369c42	1.9.0	2020-08-05 01:02:17 -07:00
Jamie Wong	f55c53f699	Small followup tweaks to #305	2020-08-05 00:50:02 -07:00
E-Liang Tan	a0b3fe8420	Add patch to fix accumulated negative deltas (#305 ) ## Context Hi! I'm working on an experimental React [concurrent mode profiler](https://react-scheduling-profiler.vercel.app) in partnership with the React core team, and we're using a [custom build of Speedscope](https://github.com/taneliang/speedscope/compare/master...taneliang:fork-for-scheduling-profiler) that exposes Speedscope's internals to support our custom flamechart rendering. Specifically, Speedscope is used to import and process Chrome profiles, which are then fed to our rendering code that draws everything to a canvas. Here's a screenshot of our app for context. The stuff above the thick gray bar is React data (some React Fiber lanes, React events, and other user timing marks), and a flamechart is drawn below. ![image](https://user-images.githubusercontent.com/12784593/89261576-e2e3b600-d660-11ea-9b90-6c6991d061d6.png) ## Problem Early on, we had [an issue](https://github.com/MLH-Fellowship/scheduling-profiler-prototype/issues/42) where our flamechart was not aligned with the React data. The discrepancy between the flamechart frames and our React data grew over the time of the profile. We tracked down the cause to https://github.com/jlfwong/speedscope/pull/80, which resolves https://github.com/jlfwong/speedscope/issues/70. It seems like zeroing out those negative time deltas resulted in the accumulation of errors over the time of these profiles, which resulted in the very visible misalignment in our profiler. I am confident that the React data's timestamps are correct because they are obtained from User Timing marks, which have absolute timestamps and are thus independent of any `timeDelta` stuff. This would mean that Speedscope is likely displaying incorrect timestamps for Chrome profiles. ## Solution This PR takes a different approach to solving the negative `timeDelta` problem: we add a `lastElapsed` variable as a sort of backstop, preventing `elapsed` from traveling backwards in time, while still ensuring that `elapsed` is always accurate. We've been using this patch in our custom build for about a month now and it seems to work well.	2020-08-05 00:47:49 -07:00
Jamie Wong	9452aeae82	Provide prev/next buttons to cycle through search results, make search results more visually prominent (#304 ) This PR addresses two key pieces of feedback provided on search in #38 1. Make the search results more visually prominent 2. Make it easier to find the matches by having some way of jumping to next For the visual prominence facet, I switched from yellow outlines to orange backgrounds. \|Before\|After\| \|-\|-\| \|![image](https://user-images.githubusercontent.com/150329/89276105-14746700-d5f8-11ea-9c9d-1dfdfc3bd6d7.png)\|![image](https://user-images.githubusercontent.com/150329/89276070-045c8780-d5f8-11ea-8664-9da0af569cec.png)\| For the easy identification portion, I added prev/next buttons to each view, which can also be operated by hitting Enter for next or Shift+Enter for previous. ![Kapture 2020-08-04 at 2 16 57](https://user-images.githubusercontent.com/150329/89276542-a1b7bb80-d5f8-11ea-8642-a172a6561734.gif)	2020-08-04 02:20:26 -07:00
Gabriele N. Tornetta	b26cdb5be4	Add link to Austin to README (#303 ) Add a link to Austin's Speedscope section of the README to Speedscope's README.	2020-07-30 11:03:12 -07:00
Jamie Wong	1c5bdba36e	Increase contrast for matching research results by fading text for unmatched frames (#298 ) Before: ![image](https://user-images.githubusercontent.com/150329/88493052-ee99f300-cf63-11ea-9522-8de032e920ac.png) After: ![image](https://user-images.githubusercontent.com/150329/88493062-f9548800-cf63-11ea-9e7e-5c87a1dba836.png) Works towards #38	2020-07-26 17:21:38 -07:00
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["gamma.ts","beta.ts","delta.ts","alpha.ts","kludge.ts","typescript-source-map-test.ts"],"names":[],"mappings":";AAAO,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,WAAA,EAAA,IAAM,EAAQ,WAEd,IADD,IAAA,EAAO,EACF,EAAI,EAAG,EAAI,IAAM,IACxB,GAAQ,EAEH,OAAA,GALF,QAAA,MAAA;;ACMN,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,KAAA,EAND,IAAA,EAAA,QAAA,WAEM,SAAU,IACT,IAAA,IAAI,EAAI,EAAG,EAAI,GAAI,KACtB,EAAA,EAAA;;ACFG,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,WAAA,EAFP,IAAA,EAAA,QAAA,WAEa,EAAQ,WACd,IAAA,IAAI,EAAI,EAAG,EAAI,GAAI,KACtB,EAAA,EAAA,UAFG,QAAA,MAAA;;ACQN,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,MAAA,EAVD,IAAA,EAAA,QAAA,UACA,EAAA,QAAA,WAEM,SAAU,KACZ,WACK,IAAA,IAAI,EAAI,EAAG,EAAI,IAAM,KACxB,EAAA,EAAA,SACA,EAAA,EAAA,SAHF;;ACFJ,aAAA,OAAA,eAAA,QAAA,aAAA,CAAA,OAAA,IAAA,QAAA,YAAA,EAFA,IAAA,EAAA,QAAA,WAEA,EAAA,WACE,SAAA,KACE,EAAA,EAAA,SACA,QAAQ,IAAI,KAAK,OAWrB,OARE,EAAA,UAAA,IAAA,YACE,EAAA,EAAA,UAGF,OAAA,eAAI,EAAA,UAAA,QAAK,CAAT,IAAA,WAES,OADP,EAAA,EAAA,SACO,GAFA,YAAA,EAVX,cAAA,IAcA,EAdA,GAAA,QAAA,OAAA;;ACCA,aAHA,IAAA,EAAA,QAAA,YAEM,EAAI,IAAI,EAAJ,OACV,EAAE","file":"typescript-source-map-test.js","sourceRoot":"..","sourcesContent":["export const gamma = () => {\n let prod = 1\n for (let i = 1; i < 1000; i++) {\n prod *= i\n }\n return prod\n}\n","import {gamma} from './gamma'\n\nexport function beta() {\n for (let i = 0; i < 10; i++) {\n gamma()\n }\n}\n","import {gamma} from './gamma'\n\nexport const delta = function () {\n for (let i = 0; i < 10; i++) {\n gamma()\n }\n}\n","import {beta} from './beta'\nimport {delta} from './delta'\n\nexport function alpha() {\n ;(function () {\n for (let i = 0; i < 1000; i++) {\n beta()\n delta()\n }\n })()\n}\n","import {alpha} from './alpha'\n\nexport class Kludge {\n constructor() {\n alpha()\n console.log(this.floop)\n }\n\n zap() {\n alpha()\n }\n\n get floop(): number {\n alpha()\n return 1\n }\n}\n","import {Kludge} from './kludge'\n\nconst k = new Kludge()\nk.zap()\n"]}
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["webpack://speedscope-sourcemap-test-project/./gamma.ts","webpack://speedscope-sourcemap-test-project/./beta.ts","webpack://speedscope-sourcemap-test-project/./delta.ts","webpack://speedscope-sourcemap-test-project/./alpha.ts","webpack://speedscope-sourcemap-test-project/./typescript-source-map-test.ts","webpack://speedscope-sourcemap-test-project/./kludge.ts"],"names":["gamma","prod","i","beta","delta","alpha","console","log","this","floop","zap"],"mappings":"mBAAO,IAAMA,EAAQ,WAEnB,IADA,IAAIC,EAAO,EACFC,EAAI,EAAGA,EAAI,IAAMA,IACxBD,GAAQC,EAEV,OAAOD,GCHF,SAASE,IACd,IAAK,IAAID,EAAI,EAAGA,EAAI,GAAIA,IACtBF,ICFG,IAAMI,EAAQ,WACnB,IAAK,IAAIF,EAAI,EAAGA,EAAI,GAAIA,IACtBF,KCDG,SAASK,KACb,WACC,IAAK,IAAIH,EAAI,EAAGA,EAAI,IAAMA,IACxBC,IACAC,IAHH,ICFO,ICAV,WACE,aACEC,IACAC,QAAQC,IAAIC,KAAKC,OAWrB,OARE,YAAAC,IAAA,WACEL,KAGF,sBAAI,oBAAK,C,IAAT,WAEE,OADAA,IACO,G,gCAEX,EAdA,KDCEK,O","file":"typescript-source-map-test.js","sourcesContent":["export const gamma = () => {\n let prod = 1\n for (let i = 1; i < 1000; i++) {\n prod *= i\n }\n return prod\n}\n","import {gamma} from './gamma'\n\nexport function beta() {\n for (let i = 0; i < 10; i++) {\n gamma()\n }\n}\n","import {gamma} from './gamma'\n\nexport const delta = function () {\n for (let i = 0; i < 10; i++) {\n gamma()\n }\n}\n","import {beta} from './beta'\nimport {delta} from './delta'\n\nexport function alpha() {\n ;(function () {\n for (let i = 0; i < 1000; i++) {\n beta()\n delta()\n }\n })()\n}\n","import {Kludge} from './kludge'\n\nconst k = new Kludge()\nk.zap()\n","import {alpha} from './alpha'\n\nexport class Kludge {\n constructor() {\n alpha()\n console.log(this.floop)\n }\n\n zap() {\n alpha()\n }\n\n get floop(): number {\n alpha()\n return 1\n }\n}\n"],"sourceRoot":""}