Support importing Instruments profiles

package.json

@@ -66,6 +66,7 @@
     "memoize-immutable": "^3.0.0",
     "mixedtuplemap": "^1.0.0",
     "namedtuplemap": "^1.0.0",
+    "pako": "~1.0.2",
     "photon-colors": "3.3.2",
     "prop-types": "^15.7.2",
     "query-string": "^6.3.0",

src/actions/receive-profile.js

@@ -44,6 +44,10 @@ import { getProfileOrNull } from '../selectors/profile';
 import { getView } from '../selectors/app';
 import { setDataSource } from './profile-view';
 
+import {
+  convertInstrumentsProfile,
+  isInstrumentsProfile,
+} from '../profile-logic/import/instruments';
 import type {
   FunctionsUpdatePerThread,
   FuncToFuncMap,
@@ -910,8 +914,13 @@ export function retrieveProfileFromFile(
           // extensions (eg .profile). So we can't rely on the mime type to
           // decide how to handle them. We'll try to parse them as a plain JSON
           // file.
-          const text = await fileReader(file).asText();
-          const profile = await unserializeProfileOfArbitraryFormat(text);
+          let profile;
+          if (isInstrumentsProfile(file)) {
+            profile = await convertInstrumentsProfile(file);
+          } else {
+            const text = await fileReader(file).asText();
+            profile = await unserializeProfileOfArbitraryFormat(text);
+          }
           if (profile === undefined) {
             throw new Error('Unable to parse the profile.');
           }

src/components/app/Home.js

@@ -267,7 +267,33 @@ class Home extends React.PureComponent<HomeProps, HomeState> {
       return;
     }
 
-    const { files } = event.dataTransfer;
+    const { files, items } = event.dataTransfer;
+
+    if (items && items.length > 0) {
+      const [firstItem] = items;
+      let webkitEntry = null;
+
+      if ('webkitGetAsEntry' in firstItem) {
+        // DataTransferItem.webkitGetAsEntry() is a non-standard function for now.
+        // I have checked in Firefox and Chrome. It's working fine in it.
+        // We will remove FlowFixMe once it becomes a standard function (issue #2217)
+        // $FlowFixMe webkitGetAsEntry is not present in DataTransferItem
+        webkitEntry = firstItem.webkitGetAsEntry();
+      } else if ('getAsEntry' in firstItem) {
+        // $FlowFixMe getAsEntry is not present in DataTransferItem (issue #2230)
+        webkitEntry = firstItem.getAsEntry();
+      }
+
+      if (
+        webkitEntry !== null &&
+        webkitEntry.isDirectory &&
+        webkitEntry.name.endsWith('.trace')
+      ) {
+        this.props.retrieveProfileFromFile(webkitEntry);
+        return;
+      }
+    }
+
     if (files.length > 0) {
       this.props.retrieveProfileFromFile(files[0]);
     }

src/profile-logic/import/instruments/BinReader.js

@@ -0,0 +1,65 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+// @flow
+
+// This class is inspired from here: https://github.com/jlfwong/speedscope/blob/master/src/import/instruments.ts#L200
+export class BinReader {
+  view: DataView;
+  bytePos: number;
+
+  constructor(buffer: ArrayBuffer) {
+    this.view = new DataView(buffer);
+    this.bytePos = 0;
+  }
+  seek(pos: number) {
+    this.bytePos = pos;
+  }
+  skip(byteCount: number) {
+    this.bytePos += byteCount;
+  }
+  hasMore() {
+    return this.bytePos < this.view.byteLength;
+  }
+  bytesLeft() {
+    return this.view.byteLength - this.bytePos;
+  }
+  readUint8() {
+    this.bytePos++;
+    if (this.bytePos > this.view.byteLength) {
+      return 0;
+    }
+    return this.view.getUint8(this.bytePos - 1);
+  }
+
+  readUint32() {
+    this.bytePos += 4;
+    if (this.bytePos > this.view.byteLength) {
+      return 0;
+    }
+    return this.view.getUint32(this.bytePos - 4, true);
+  }
+  readUint48() {
+    this.bytePos += 6;
+    if (this.bytePos > this.view.byteLength) {
+      return 0;
+    }
+
+    // Note: we intentionally use Math.pow here rather than bit shifts
+    // because JavaScript doesn't have true 64 bit integers.
+    return (
+      this.view.getUint32(this.bytePos - 6, true) +
+      this.view.getUint16(this.bytePos - 2, true) * Math.pow(2, 32)
+    );
+  }
+  readUint64() {
+    this.bytePos += 8;
+    if (this.bytePos > this.view.byteLength) {
+      return 0;
+    }
+    return (
+      this.view.getUint32(this.bytePos - 8, true) +
+      this.view.getUint32(this.bytePos - 4, true) * Math.pow(2, 32)
+    );
+  }
+}

src/profile-logic/import/instruments/BinaryPlistParser.js

@@ -0,0 +1,220 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+// @flow
+
+export class UID {
+  index: number;
+
+  constructor(index: number) {
+    this.index = index;
+  }
+}
+
+// This class is inspired from here:https://github.com/jlfwong/speedscope/blob/master/src/import/instruments.ts#L828
+export class BinaryPlistParser {
+  view: DataView;
+  referenceSize: number;
+  offsetTable: Array<number>;
+
+  constructor(view: DataView) {
+    this.view = view;
+    this.referenceSize = 0;
+    this.offsetTable = [];
+  }
+
+  parseRoot(): any {
+    const trailer = this.view.byteLength - 32;
+    const offsetSize = this.view.getUint8(trailer + 6);
+    this.referenceSize = this.view.getUint8(trailer + 7);
+
+    // Just use the last 32-bits of these 64-bit big-endian values
+    const objectCount = this.view.getUint32(trailer + 12);
+    const rootIndex = this.view.getUint32(trailer + 20);
+    let tableOffset = this.view.getUint32(trailer + 28);
+
+    // Parse all offsets before starting to parse objects
+    for (let i = 0; i < objectCount; i++) {
+      this.offsetTable.push(this.parseInteger(tableOffset, offsetSize));
+      tableOffset += offsetSize;
+    }
+
+    return this.parseObject(this.offsetTable[rootIndex]);
+  }
+
+  parseLengthAndOffset(offset: number, extra: number) {
+    if (extra !== 0x0f) return { length: extra, offset: 0 };
+    const marker = this.view.getUint8(offset++);
+    if ((marker & 0xf0) !== 0x10) {
+      throw new Error('Unexpected non-integer length at offset ' + offset);
+    }
+    const size = 1 << (marker & 0x0f);
+    return { length: this.parseInteger(offset, size), offset: size + 1 };
+  }
+
+  parseSingleton(offset: number, extra: number): any {
+    if (extra === 0) {
+      return null;
+    }
+    if (extra === 8) {
+      return false;
+    }
+    if (extra === 9) {
+      return true;
+    }
+    throw new Error('Unexpected extra value ' + extra + ' at offset ' + offset);
+  }
+
+  parseInteger(offset: number, size: number): number {
+    if (size === 1) {
+      return this.view.getUint8(offset);
+    }
+    if (size === 2) {
+      return this.view.getUint16(offset, false);
+    }
+    if (size === 4) {
+      return this.view.getUint32(offset, false);
+    }
+
+    if (size === 8) {
+      return (
+        Math.pow(2, 32 * 1) * this.view.getUint32(offset + 0, false) +
+        Math.pow(2, 32 * 0) * this.view.getUint32(offset + 4, false)
+      );
+    }
+
+    if (size === 16) {
+      return (
+        Math.pow(2, 32 * 3) * this.view.getUint32(offset + 0, false) +
+        Math.pow(2, 32 * 2) * this.view.getUint32(offset + 4, false) +
+        Math.pow(2, 32 * 1) * this.view.getUint32(offset + 8, false) +
+        Math.pow(2, 32 * 0) * this.view.getUint32(offset + 12, false)
+      );
+    }
+
+    throw new Error(
+      'Unexpected integer of size ' + size + ' at offset ' + offset
+    );
+  }
+
+  parseFloat(offset: number, size: number): number {
+    if (size === 4) {
+      return this.view.getFloat32(offset, false);
+    }
+    if (size === 8) {
+      return this.view.getFloat64(offset, false);
+    }
+    throw new Error(
+      'Unexpected float of size ' + size + ' at offset ' + offset
+    );
+  }
+
+  parseDate(offset: number, size: number): Date {
+    if (size !== 8) {
+      throw new Error(
+        'Unexpected date of size ' + size + ' at offset ' + offset
+      );
+    }
+    const seconds = this.view.getFloat64(offset, false);
+    return new Date(978307200000 + seconds * 1000); // Starts from January 1st, 2001
+  }
+
+  parseData(offset: number, extra: number): Uint8Array {
+    const both = this.parseLengthAndOffset(offset, extra);
+
+    return new Uint8Array(this.view.buffer, offset + both.offset, both.length);
+  }
+
+  parseStringASCII(offset: number, extra: number): string {
+    const both = this.parseLengthAndOffset(offset, extra);
+    let text = '';
+    offset += both.offset;
+    for (let i = 0; i < both.length; i++) {
+      text += String.fromCharCode(this.view.getUint8(offset++));
+    }
+    return text;
+  }
+
+  parseStringUTF16(offset: number, extra: number): string {
+    const both = this.parseLengthAndOffset(offset, extra);
+    let text = '';
+    offset += both.offset;
+    for (let i = 0; i < both.length; i++) {
+      text += String.fromCharCode(this.view.getUint16(offset, false));
+      offset += 2;
+    }
+    return text;
+  }
+
+  parseUID(offset: number, size: number): UID {
+    return new UID(this.parseInteger(offset, size));
+  }
+
+  parseArray(offset: number, extra: number): any[] {
+    const both = this.parseLengthAndOffset(offset, extra);
+    const array: any[] = [];
+    const size = this.referenceSize;
+    offset += both.offset;
+    for (let i = 0; i < both.length; i++) {
+      array.push(
+        this.parseObject(this.offsetTable[this.parseInteger(offset, size)])
+      );
+      offset += size;
+    }
+    return array;
+  }
+
+  parseDictionary(offset: number, extra: number): Object {
+    const both = this.parseLengthAndOffset(offset, extra);
+    const dictionary = Object.create(null);
+    const size = this.referenceSize;
+    let nextKey = offset + both.offset;
+    let nextValue = nextKey + both.length * size;
+    for (let i = 0; i < both.length; i++) {
+      const key = this.parseObject(
+        this.offsetTable[this.parseInteger(nextKey, size)]
+      );
+      const value = this.parseObject(
+        this.offsetTable[this.parseInteger(nextValue, size)]
+      );
+      if (typeof key !== 'string') {
+        throw new Error('Unexpected non-string key at offset ' + nextKey);
+      }
+      dictionary[key] = value;
+      nextKey += size;
+      nextValue += size;
+    }
+    return dictionary;
+  }
+
+  parseObject(offset: number): any {
+    const marker = this.view.getUint8(offset++);
+    const extra = marker & 0x0f;
+    switch (marker >> 4) {
+      case 0x0:
+        return this.parseSingleton(offset, extra);
+      case 0x1:
+        return this.parseInteger(offset, 1 << extra);
+      case 0x2:
+        return this.parseFloat(offset, 1 << extra);
+      case 0x3:
+        return this.parseDate(offset, 1 << extra);
+      case 0x4:
+        return this.parseData(offset, extra);
+      case 0x5:
+        return this.parseStringASCII(offset, extra);
+      case 0x6:
+        return this.parseStringUTF16(offset, extra);
+      case 0x8:
+        return this.parseUID(offset, extra + 1);
+      case 0xa:
+        return this.parseArray(offset, extra);
+      case 0xd:
+        return this.parseDictionary(offset, extra);
+      default:
+        throw new Error(
+          'Unexpected marker ' + marker + ' at offset ' + --offset
+        );
+    }
+  }
+}