Add m-esr52 at 52.6.0

14 files changed, 1246 insertions, 0 deletions

diff --git a/devtools/client/performance/components/jit-optimizations-item.js b/devtools/client/performance/components/jit-optimizations-item.js
new file mode 100644
index 000000000..e5c77ef02
--- /dev/null
+++ b/devtools/client/performance/components/jit-optimizations-item.js
@@ -0,0 +1,175 @@
+/* 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/. */
+"use strict";
+
+const { LocalizationHelper } = require("devtools/shared/l10n");
+const STRINGS_URI = "devtools/client/locales/jit-optimizations.properties";
+const L10N = new LocalizationHelper(STRINGS_URI);
+
+const {PluralForm} = require("devtools/shared/plural-form");
+const { DOM: dom, PropTypes, createClass, createFactory } = require("devtools/client/shared/vendor/react");
+const Frame = createFactory(require("devtools/client/shared/components/frame"));
+const PROPNAME_MAX_LENGTH = 4;
+// If TREE_ROW_HEIGHT changes, be sure to change `var(--jit-tree-row-height)`
+// in `devtools/client/themes/jit-optimizations.css`
+const TREE_ROW_HEIGHT = 14;
+
+const OPTIMIZATION_ITEM_TYPES = ["site", "attempts", "types", "attempt", "type",
+                                 "observedtype"];
+
+/* eslint-disable no-unused-vars */
+/**
+ * TODO - Re-enable this eslint rule. The JIT tool is a work in progress, and isn't fully
+ *        integrated as of yet.
+ */
+const {
+  JITOptimizations, hasSuccessfulOutcome, isSuccessfulOutcome
+} = require("devtools/client/performance/modules/logic/jit");
+const OPTIMIZATION_FAILURE = L10N.getStr("jit.optimizationFailure");
+const JIT_SAMPLES = L10N.getStr("jit.samples");
+const JIT_TYPES = L10N.getStr("jit.types");
+const JIT_ATTEMPTS = L10N.getStr("jit.attempts");
+/* eslint-enable no-unused-vars */
+
+const JITOptimizationsItem = createClass({
+  displayName: "JITOptimizationsItem",
+
+  propTypes: {
+    onViewSourceInDebugger: PropTypes.func.isRequired,
+    frameData: PropTypes.object.isRequired,
+    type: PropTypes.oneOf(OPTIMIZATION_ITEM_TYPES).isRequired,
+  },
+
+  _renderSite({ item: site, onViewSourceInDebugger, frameData }) {
+    let attempts = site.data.attempts;
+    let lastStrategy = attempts[attempts.length - 1].strategy;
+    let propString = "";
+    let propertyName = site.data.propertyName;
+
+    // Display property name if it exists
+    if (propertyName) {
+      if (propertyName.length > PROPNAME_MAX_LENGTH) {
+        propString = ` (.${propertyName.substr(0, PROPNAME_MAX_LENGTH)}…)`;
+      } else {
+        propString = ` (.${propertyName})`;
+      }
+    }
+
+    let sampleString = PluralForm.get(site.samples, JIT_SAMPLES)
+      .replace("#1", site.samples);
+    let text = dom.span(
+      { className: "optimization-site-title" },
+      `${lastStrategy}${propString} – (${sampleString})`
+    );
+    let frame = Frame({
+      onClick: () => onViewSourceInDebugger(frameData.url, site.data.line),
+      frame: {
+        source: frameData.url,
+        line: +site.data.line,
+        column: site.data.column,
+      }
+    });
+    let children = [text, frame];
+
+    if (!hasSuccessfulOutcome(site)) {
+      children.unshift(dom.span({ className: "opt-icon warning" }));
+    }
+
+    return dom.span({ className: "optimization-site" }, ...children);
+  },
+
+  _renderAttempts({ item: attempts }) {
+    return dom.span({ className: "optimization-attempts" },
+      `${JIT_ATTEMPTS} (${attempts.length})`
+    );
+  },
+
+  _renderTypes({ item: types }) {
+    return dom.span({ className: "optimization-types" },
+      `${JIT_TYPES} (${types.length})`
+    );
+  },
+
+  _renderAttempt({ item: attempt }) {
+    let success = isSuccessfulOutcome(attempt.outcome);
+    let { strategy, outcome } = attempt;
+    return dom.span({ className: "optimization-attempt" },
+      dom.span({ className: "optimization-strategy" }, strategy),
+      " → ",
+      dom.span({ className: `optimization-outcome ${success ? "success" : "failure"}` },
+               outcome)
+    );
+  },
+
+  _renderType({ item: type }) {
+    return dom.span({ className: "optimization-ion-type" },
+                    `${type.site}:${type.mirType}`);
+  },
+
+  _renderObservedType({ onViewSourceInDebugger, item: type }) {
+    let children = [
+      dom.span({ className: "optimization-observed-type-keyed" },
+        `${type.keyedBy}${type.name ? ` → ${type.name}` : ""}`)
+    ];
+
+    // If we have a line and location, make a link to the debugger
+    if (type.location && type.line) {
+      children.push(
+        Frame({
+          onClick: () => onViewSourceInDebugger(type.location, type.line),
+          frame: {
+            source: type.location,
+            line: type.line,
+            column: type.column,
+          }
+        })
+      );
+    // Otherwise if we just have a location, it's probably just a memory location.
+    } else if (type.location) {
+      children.push(`@${type.location}`);
+    }
+
+    return dom.span({ className: "optimization-observed-type" }, ...children);
+  },
+
+  render() {
+    /* eslint-disable no-unused-vars */
+    /**
+     * TODO - Re-enable this eslint rule. The JIT tool is a work in progress, and these
+     *        undefined variables may represent intended functionality.
+     */
+    let {
+      depth,
+      arrow,
+      type,
+      // TODO - The following are currently unused.
+      item,
+      focused,
+      frameData,
+      onViewSourceInDebugger,
+    } = this.props;
+    /* eslint-enable no-unused-vars */
+
+    let content;
+    switch (type) {
+      case "site": content = this._renderSite(this.props); break;
+      case "attempts": content = this._renderAttempts(this.props); break;
+      case "types": content = this._renderTypes(this.props); break;
+      case "attempt": content = this._renderAttempt(this.props); break;
+      case "type": content = this._renderType(this.props); break;
+      case "observedtype": content = this._renderObservedType(this.props); break;
+    }
+
+    return dom.div(
+      {
+        className: `optimization-tree-item optimization-tree-item-${type}`,
+        style: { marginInlineStart: depth * TREE_ROW_HEIGHT }
+      },
+      arrow,
+      content
+    );
+  },
+});
+
+module.exports = JITOptimizationsItem;
diff --git a/devtools/client/performance/components/jit-optimizations.js b/devtools/client/performance/components/jit-optimizations.js
new file mode 100644
index 000000000..c189aa1ce
--- /dev/null
+++ b/devtools/client/performance/components/jit-optimizations.js
@@ -0,0 +1,248 @@
+/* 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/. */
+"use strict";
+
+const { LocalizationHelper } = require("devtools/shared/l10n");
+const STRINGS_URI = "devtools/client/locales/jit-optimizations.properties";
+const L10N = new LocalizationHelper(STRINGS_URI);
+
+const { assert } = require("devtools/shared/DevToolsUtils");
+const { DOM: dom, createClass, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
+const Tree = createFactory(require("../../shared/components/tree"));
+const OptimizationsItem = createFactory(require("./jit-optimizations-item"));
+const FrameView = createFactory(require("../../shared/components/frame"));
+const JIT_TITLE = L10N.getStr("jit.title");
+// If TREE_ROW_HEIGHT changes, be sure to change `var(--jit-tree-row-height)`
+// in `devtools/client/themes/jit-optimizations.css`
+const TREE_ROW_HEIGHT = 14;
+
+/* eslint-disable no-unused-vars */
+/**
+ * TODO - Re-enable this eslint rule. The JIT tool is a work in progress, and isn't fully
+ *        integrated as of yet, and this may represent intended functionality.
+ */
+const onClickTooltipString = frame =>
+  L10N.getFormatStr("viewsourceindebugger",
+                    `${frame.source}:${frame.line}:${frame.column}`);
+/* eslint-enable no-unused-vars */
+
+const optimizationAttemptModel = {
+  id: PropTypes.number.isRequired,
+  strategy: PropTypes.string.isRequired,
+  outcome: PropTypes.string.isRequired,
+};
+
+const optimizationObservedTypeModel = {
+  keyedBy: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  location: PropTypes.string,
+  line: PropTypes.string,
+};
+
+const optimizationIonTypeModel = {
+  id: PropTypes.number.isRequired,
+  typeset: PropTypes.arrayOf(optimizationObservedTypeModel),
+  site: PropTypes.number.isRequired,
+  mirType: PropTypes.number.isRequired,
+};
+
+const optimizationSiteModel = {
+  id: PropTypes.number.isRequired,
+  propertyName: PropTypes.string,
+  line: PropTypes.number.isRequired,
+  column: PropTypes.number.isRequired,
+  data: PropTypes.shape({
+    attempts: PropTypes.arrayOf(optimizationAttemptModel).isRequired,
+    types: PropTypes.arrayOf(optimizationIonTypeModel).isRequired,
+  }).isRequired,
+};
+
+const JITOptimizations = createClass({
+  displayName: "JITOptimizations",
+
+  propTypes: {
+    onViewSourceInDebugger: PropTypes.func.isRequired,
+    frameData: PropTypes.object.isRequired,
+    optimizationSites: PropTypes.arrayOf(optimizationSiteModel).isRequired,
+    autoExpandDepth: PropTypes.number,
+  },
+
+  getDefaultProps() {
+    return {
+      autoExpandDepth: 0
+    };
+  },
+
+  getInitialState() {
+    return {
+      expanded: new Set()
+    };
+  },
+
+  /**
+   * Frame data generated from `frameNode.getInfo()`, or an empty
+   * object, as well as a handler for clicking on the frame component.
+   *
+   * @param {?Object} .frameData
+   * @param {Function} .onViewSourceInDebugger
+   * @return {ReactElement}
+   */
+  _createHeader: function ({ frameData, onViewSourceInDebugger }) {
+    let { isMetaCategory, url, line } = frameData;
+    let name = isMetaCategory ? frameData.categoryData.label :
+               frameData.functionName || "";
+
+    // Simulate `SavedFrame`s interface
+    let frame = { source: url, line: +line, functionDisplayName: name };
+
+    // Neither Meta Category nodes, or the lack of a selected frame node,
+    // renders out a frame source, like "file.js:123"; so just use
+    // an empty span.
+    let frameComponent;
+    if (isMetaCategory || !name) {
+      frameComponent = dom.span();
+    } else {
+      frameComponent = FrameView({
+        frame,
+        onClick: () => onViewSourceInDebugger(frame),
+      });
+    }
+
+    return dom.div({ className: "optimization-header" },
+      dom.span({ className: "header-title" }, JIT_TITLE),
+      dom.span({ className: "header-function-name" }, name),
+      frameComponent
+    );
+  },
+
+  _createTree(props) {
+    let {
+      autoExpandDepth,
+      frameData,
+      onViewSourceInDebugger,
+      optimizationSites: sites
+    } = this.props;
+
+    let getSite = id => sites.find(site => site.id === id);
+    let getIonTypeForObserved = type => {
+      return getSite(type.id).data.types
+        .find(iontype => (iontype.typeset || [])
+        .indexOf(type) !== -1);
+    };
+    let isSite = site => getSite(site.id) === site;
+    let isAttempts = attempts => getSite(attempts.id).data.attempts === attempts;
+    let isAttempt = attempt => getSite(attempt.id).data.attempts.indexOf(attempt) !== -1;
+    let isTypes = types => getSite(types.id).data.types === types;
+    let isType = type => getSite(type.id).data.types.indexOf(type) !== -1;
+    let isObservedType = type => getIonTypeForObserved(type);
+
+    let getRowType = node => {
+      if (isSite(node)) {
+        return "site";
+      }
+      if (isAttempts(node)) {
+        return "attempts";
+      }
+      if (isTypes(node)) {
+        return "types";
+      }
+      if (isAttempt(node)) {
+        return "attempt";
+      }
+      if (isType(node)) {
+        return "type";
+      }
+      if (isObservedType(node)) {
+        return "observedtype";
+      }
+      return null;
+    };
+
+    // Creates a unique key for each node in the
+    // optimizations data
+    let getKey = node => {
+      let site = getSite(node.id);
+      if (isSite(node)) {
+        return node.id;
+      } else if (isAttempts(node)) {
+        return `${node.id}-A`;
+      } else if (isTypes(node)) {
+        return `${node.id}-T`;
+      } else if (isType(node)) {
+        return `${node.id}-T-${site.data.types.indexOf(node)}`;
+      } else if (isAttempt(node)) {
+        return `${node.id}-A-${site.data.attempts.indexOf(node)}`;
+      } else if (isObservedType(node)) {
+        let iontype = getIonTypeForObserved(node);
+        return `${getKey(iontype)}-O-${iontype.typeset.indexOf(node)}`;
+      }
+      return "";
+    };
+
+    return Tree({
+      autoExpandDepth,
+      getParent: node => {
+        let site = getSite(node.id);
+        let parent;
+        if (isAttempts(node) || isTypes(node)) {
+          parent = site;
+        } else if (isType(node)) {
+          parent = site.data.types;
+        } else if (isAttempt(node)) {
+          parent = site.data.attempts;
+        } else if (isObservedType(node)) {
+          parent = getIonTypeForObserved(node);
+        }
+        assert(parent, "Could not find a parent for optimization data node");
+
+        return parent;
+      },
+      getChildren: node => {
+        if (isSite(node)) {
+          return [node.data.types, node.data.attempts];
+        } else if (isAttempts(node) || isTypes(node)) {
+          return node;
+        } else if (isType(node)) {
+          return node.typeset || [];
+        }
+        return [];
+      },
+      isExpanded: node => this.state.expanded.has(node),
+      onExpand: node => this.setState(state => {
+        let expanded = new Set(state.expanded);
+        expanded.add(node);
+        return { expanded };
+      }),
+      onCollapse: node => this.setState(state => {
+        let expanded = new Set(state.expanded);
+        expanded.delete(node);
+        return { expanded };
+      }),
+      onFocus: function () {},
+      getKey,
+      getRoots: () => sites || [],
+      itemHeight: TREE_ROW_HEIGHT,
+      renderItem: (item, depth, focused, arrow, expanded) =>
+        new OptimizationsItem({
+          onViewSourceInDebugger,
+          item,
+          depth,
+          focused,
+          arrow,
+          expanded,
+          type: getRowType(item),
+          frameData,
+        }),
+    });
+  },
+
+  render() {
+    let header = this._createHeader(this.props);
+    let tree = this._createTree(this.props);
+
+    return dom.div({}, header, tree);
+  }
+});
+
+module.exports = JITOptimizations;
diff --git a/devtools/client/performance/components/moz.build b/devtools/client/performance/components/moz.build
new file mode 100644
index 000000000..55de59215
--- /dev/null
+++ b/devtools/client/performance/components/moz.build
@@ -0,0 +1,19 @@
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'jit-optimizations-item.js',
+    'jit-optimizations.js',
+    'recording-button.js',
+    'recording-controls.js',
+    'recording-list-item.js',
+    'recording-list.js',
+    'waterfall-header.js',
+    'waterfall-tree-row.js',
+    'waterfall-tree.js',
+    'waterfall.js',
+)
+
+MOCHITEST_CHROME_MANIFESTS += ['test/chrome.ini']
diff --git a/devtools/client/performance/components/recording-button.js b/devtools/client/performance/components/recording-button.js
new file mode 100644
index 000000000..877fd0e2b
--- /dev/null
+++ b/devtools/client/performance/components/recording-button.js
@@ -0,0 +1,37 @@
+/* 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/. */
+"use strict";
+
+const {L10N} = require("devtools/client/performance/modules/global");
+const {DOM, createClass} = require("devtools/client/shared/vendor/react");
+const {button} = DOM;
+
+module.exports = createClass({
+  displayName: "Recording Button",
+
+  render() {
+    let {
+      onRecordButtonClick,
+      isRecording,
+      isLocked
+    } = this.props;
+
+    let classList = ["devtools-button", "record-button"];
+
+    if (isRecording) {
+      classList.push("checked");
+    }
+
+    return button(
+      {
+        className: classList.join(" "),
+        onClick: onRecordButtonClick,
+        "data-standalone": "true",
+        "data-text-only": "true",
+        disabled: isLocked
+      },
+      isRecording ? L10N.getStr("recordings.stop") : L10N.getStr("recordings.start")
+    );
+  }
+});
diff --git a/devtools/client/performance/components/recording-controls.js b/devtools/client/performance/components/recording-controls.js
new file mode 100644
index 000000000..88f788ef3
--- /dev/null
+++ b/devtools/client/performance/components/recording-controls.js
@@ -0,0 +1,54 @@
+/* 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/. */
+"use strict";
+
+const {L10N} = require("devtools/client/performance/modules/global");
+const {DOM, createClass} = require("devtools/client/shared/vendor/react");
+const {div, button} = DOM;
+
+module.exports = createClass({
+  displayName: "Recording Controls",
+
+  render() {
+    let {
+      onClearButtonClick,
+      onRecordButtonClick,
+      onImportButtonClick,
+      isRecording,
+      isLocked
+    } = this.props;
+
+    let recordButtonClassList = ["devtools-button", "record-button"];
+
+    if (isRecording) {
+      recordButtonClassList.push("checked");
+    }
+
+    return (
+      div({ className: "devtools-toolbar" },
+        div({ className: "toolbar-group" },
+          button({
+            id: "clear-button",
+            className: "devtools-button",
+            title: L10N.getStr("recordings.clear.tooltip"),
+            onClick: onClearButtonClick
+          }),
+          button({
+            id: "main-record-button",
+            className: recordButtonClassList.join(" "),
+            disabled: isLocked,
+            title: L10N.getStr("recordings.start.tooltip"),
+            onClick: onRecordButtonClick
+          }),
+          button({
+            id: "import-button",
+            className: "devtools-button",
+            title: L10N.getStr("recordings.import.tooltip"),
+            onClick: onImportButtonClick
+          })
+        )
+      )
+    );
+  }
+});
diff --git a/devtools/client/performance/components/recording-list-item.js b/devtools/client/performance/components/recording-list-item.js
new file mode 100644
index 000000000..37efec90d
--- /dev/null
+++ b/devtools/client/performance/components/recording-list-item.js
@@ -0,0 +1,49 @@
+/* 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/. */
+"use strict";
+
+const {DOM, createClass} = require("devtools/client/shared/vendor/react");
+const {div, li, span, button} = DOM;
+const {L10N} = require("devtools/client/performance/modules/global");
+
+module.exports = createClass({
+  displayName: "Recording List Item",
+
+  render() {
+    const {
+      label,
+      duration,
+      onSelect,
+      onSave,
+      isLoading,
+      isSelected,
+      isRecording
+    } = this.props;
+
+    const className = `recording-list-item ${isSelected ? "selected" : ""}`;
+
+    let durationText;
+    if (isLoading) {
+      durationText = L10N.getStr("recordingsList.loadingLabel");
+    } else if (isRecording) {
+      durationText = L10N.getStr("recordingsList.recordingLabel");
+    } else {
+      durationText = L10N.getFormatStr("recordingsList.durationLabel", duration);
+    }
+
+    return (
+      li({ className, onClick: onSelect },
+        div({ className: "recording-list-item-label" },
+          label
+        ),
+        div({ className: "recording-list-item-footer" },
+          span({ className: "recording-list-item-duration" }, durationText),
+          button({ className: "recording-list-item-save", onClick: onSave },
+            L10N.getStr("recordingsList.saveLabel")
+          )
+        )
+      )
+    );
+  }
+});
diff --git a/devtools/client/performance/components/recording-list.js b/devtools/client/performance/components/recording-list.js
new file mode 100644
index 000000000..1df7f2b71
--- /dev/null
+++ b/devtools/client/performance/components/recording-list.js
@@ -0,0 +1,23 @@
+/* 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/. */
+"use strict";
+
+const {DOM, createClass} = require("devtools/client/shared/vendor/react");
+const {L10N} = require("devtools/client/performance/modules/global");
+const {ul, div} = DOM;
+
+module.exports = createClass({
+  displayName: "Recording List",
+
+  render() {
+    const {
+      items,
+      itemComponent: Item,
+    } = this.props;
+
+    return items.length > 0
+      ? ul({ className: "recording-list" }, ...items.map(Item))
+      : div({ className: "recording-list-empty" }, L10N.getStr("noRecordingsText"));
+  }
+});
diff --git a/devtools/client/performance/components/test/chrome.ini b/devtools/client/performance/components/test/chrome.ini
new file mode 100644
index 000000000..5ba24a9af
--- /dev/null
+++ b/devtools/client/performance/components/test/chrome.ini
@@ -0,0 +1,5 @@
+[DEFAULT]
+support-files =
+  head.js
+
+[test_jit_optimizations_01.html]
diff --git a/devtools/client/performance/components/test/head.js b/devtools/client/performance/components/test/head.js
new file mode 100644
index 000000000..be8184160
--- /dev/null
+++ b/devtools/client/performance/components/test/head.js
@@ -0,0 +1,187 @@
+/* Any copyright is dedicated to the Public Domain.
+    yield new Promise(function(){});
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/* global window, document, SimpleTest, requestAnimationFrame, is, ok */
+/* exported Cc, Ci, Cu, Cr, Assert, Task, TargetFactory, Toolbox, browserRequire,
+   forceRender, setProps, dumpn, checkOptimizationHeader, checkOptimizationTree */
+let { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
+
+let { require } = Cu.import("resource://gre/modules/devtools/shared/Loader.jsm", {});
+let { Assert } = require("resource://testing-common/Assert.jsm");
+let { BrowserLoader } = Cu.import("resource://devtools/client/shared/browser-loader.js", {});
+let defer = require("devtools/shared/defer");
+let flags = require("devtools/shared/flags");
+let { Task } = require("devtools/shared/task");
+let { TargetFactory } = require("devtools/client/framework/target");
+let { Toolbox } = require("devtools/client/framework/toolbox");
+
+flags.testing = true;
+let { require: browserRequire } = BrowserLoader({
+  baseURI: "resource://devtools/client/performance/",
+  window
+});
+
+let $ = (selector, scope = document) => scope.querySelector(selector);
+let $$ = (selector, scope = document) => scope.querySelectorAll(selector);
+
+function forceRender(comp) {
+  return setState(comp, {})
+    .then(() => setState(comp, {}));
+}
+
+// All tests are asynchronous.
+SimpleTest.waitForExplicitFinish();
+
+function onNextAnimationFrame(fn) {
+  return () =>
+    requestAnimationFrame(() =>
+      requestAnimationFrame(fn));
+}
+
+function setState(component, newState) {
+  let deferred = defer();
+  component.setState(newState, onNextAnimationFrame(deferred.resolve));
+  return deferred.promise;
+}
+
+function setProps(component, newState) {
+  let deferred = defer();
+  component.setProps(newState, onNextAnimationFrame(deferred.resolve));
+  return deferred.promise;
+}
+
+function dumpn(msg) {
+  dump(`PERFORMANCE-COMPONENT-TEST: ${msg}\n`);
+}
+
+/**
+ * Default opts data for testing. First site has a simple IonType,
+ * and an IonType with an ObservedType, and a successful outcome.
+ * Second site does not have a successful outcome.
+ */
+let OPTS_DATA_GENERAL = [{
+  id: 1,
+  propertyName: "my property name",
+  line: 100,
+  column: 200,
+  samples: 90,
+  data: {
+    attempts: [
+      { id: 1, strategy: "GetElem_TypedObject", outcome: "AccessNotTypedObject" },
+      { id: 1, strategy: "GetElem_Dense", outcome: "AccessNotDense" },
+      { id: 1, strategy: "GetElem_TypedStatic", outcome: "Disabled" },
+      { id: 1, strategy: "GetElem_TypedArray", outcome: "GenericSuccess" },
+    ],
+    types: [{
+      id: 1,
+      site: "Receiver",
+      mirType: "Object",
+      typeset: [{
+        id: 1,
+        keyedBy: "constructor",
+        name: "MyView",
+        location: "http://internet.com/file.js",
+        line: "123",
+      }]
+    }, {
+      id: 1,
+      typeset: void 0,
+      site: "Index",
+      mirType: "Int32",
+    }]
+  }
+}, {
+  id: 2,
+  propertyName: void 0,
+  line: 50,
+  column: 51,
+  samples: 100,
+  data: {
+    attempts: [
+      { id: 2, strategy: "Call_Inline", outcome: "CantInlineBigData" }
+    ],
+    types: [{
+      id: 2,
+      site: "Call_Target",
+      mirType: "Object",
+      typeset: [
+        { id: 2, keyedBy: "primitive" },
+        { id: 2, keyedBy: "constructor", name: "B", location: "http://mypage.com/file.js", line: "2" },
+        { id: 2, keyedBy: "constructor", name: "C", location: "http://mypage.com/file.js", line: "3" },
+        { id: 2, keyedBy: "constructor", name: "D", location: "http://mypage.com/file.js", line: "4" },
+      ],
+    }]
+  }
+}];
+
+OPTS_DATA_GENERAL.forEach(site => {
+  site.data.types.forEach(type => {
+    if (type.typeset) {
+      type.typeset.id = site.id;
+    }
+  });
+  site.data.attempts.id = site.id;
+  site.data.types.id = site.id;
+});
+
+function checkOptimizationHeader(name, file, line) {
+  is($(".optimization-header .header-function-name").textContent, name,
+    "correct optimization header function name");
+  is($(".optimization-header .frame-link-filename").textContent, file,
+    "correct optimization header file name");
+  is($(".optimization-header .frame-link-line").textContent, `:${line}`,
+    "correct optimization header line");
+}
+
+function checkOptimizationTree(rowData) {
+  let rows = $$(".tree .tree-node");
+
+  for (let i = 0; i < rowData.length; i++) {
+    let row = rows[i];
+    let expected = rowData[i];
+
+    switch (expected.type) {
+      case "site":
+        is($(".optimization-site-title", row).textContent,
+          `${expected.strategy} – (${expected.samples} samples)`,
+          `row ${i}th: correct optimization site row`);
+
+        is(!!$(".opt-icon.warning", row), !!expected.failureIcon,
+          `row ${i}th: expected visibility of failure icon for unsuccessful outcomes`);
+        break;
+      case "types":
+        is($(".optimization-types", row).textContent,
+          `Types (${expected.count})`,
+          `row ${i}th: correct types row`);
+        break;
+      case "attempts":
+        is($(".optimization-attempts", row).textContent,
+          `Attempts (${expected.count})`,
+          `row ${i}th: correct attempts row`);
+        break;
+      case "type":
+        is($(".optimization-ion-type", row).textContent,
+          `${expected.site}:${expected.mirType}`,
+          `row ${i}th: correct ion type row`);
+        break;
+      case "observedtype":
+        is($(".optimization-observed-type-keyed", row).textContent,
+          expected.name ?
+            `${expected.keyedBy} → ${expected.name}` :
+            expected.keyedBy,
+          `row ${i}th: correct observed type row`);
+        break;
+      case "attempt":
+        is($(".optimization-strategy", row).textContent, expected.strategy,
+          `row ${i}th: correct attempt row, attempt item`);
+        is($(".optimization-outcome", row).textContent, expected.outcome,
+          `row ${i}th: correct attempt row, outcome item`);
+        ok($(".optimization-outcome", row)
+          .classList.contains(expected.success ? "success" : "failure"),
+          `row ${i}th: correct attempt row, failure/success status`);
+        break;
+    }
+  }
+}
diff --git a/devtools/client/performance/components/test/test_jit_optimizations_01.html b/devtools/client/performance/components/test/test_jit_optimizations_01.html
new file mode 100644
index 000000000..edc9c34cd
--- /dev/null
+++ b/devtools/client/performance/components/test/test_jit_optimizations_01.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+Test the rendering of the JIT Optimizations tree. Tests when jit data has observed types, multiple observed types, multiple sites, a site with a successful strategy, site with no successful strategy.
+-->
+<head>
+  <meta charset="utf-8">
+  <title>JITOptimizations component test</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+</head>
+<body style="height: 10000px;">
+<pre id="test">
+<script src="head.js" type="application/javascript;version=1.8"></script>
+<script type="application/javascript;version=1.8">
+window.onload = Task.async(function* () {
+  try {
+    let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+    let React = browserRequire("devtools/client/shared/vendor/react");
+    let JITOptimizations = React.createFactory(browserRequire("devtools/client/performance/components/jit-optimizations"));
+    ok(JITOptimizations, "Should get JITOptimizations");
+    let opts;
+
+    opts = ReactDOM.render(JITOptimizations({
+      onViewSourceInDebugger: function(){},
+      frameData: {
+        isMetaCategory: false,
+        url: "http://internet.com/file.js",
+        line: 1,
+        functionName: "myfunc",
+      },
+      optimizationSites: OPTS_DATA_GENERAL,
+      autoExpandDepth: 1000,
+    }), window.document.body);
+    yield forceRender(opts);
+
+    checkOptimizationHeader("myfunc", "file.js", "1");
+
+    checkOptimizationTree([
+      { type: "site", strategy: "GetElem_TypedArray", samples: "90" },
+      { type: "types", count: "2" },
+      { type: "type", site: "Receiver", mirType: "Object" },
+      { type: "observedtype", keyedBy: "constructor", name: "MyView" },
+      { type: "type", site: "Index", mirType: "Int32" },
+      { type: "attempts", count: "4" },
+      { type: "attempt", strategy: "GetElem_TypedObject", outcome: "AccessNotTypedObject" },
+      { type: "attempt", strategy: "GetElem_Dense", outcome: "AccessNotDense" },
+      { type: "attempt", strategy: "GetElem_TypedStatic", outcome: "Disabled" },
+      { type: "attempt", strategy: "GetElem_TypedArray", outcome: "GenericSuccess", success: true },
+      { type: "site", strategy: "Call_Inline", samples: "100", failureIcon: true },
+      { type: "types", count: "1" },
+      { type: "type", site: "Call_Target", mirType: "Object" },
+      { type: "observedtype", keyedBy: "primitive" },
+      { type: "observedtype", keyedBy: "constructor", name: "B" },
+      { type: "observedtype", keyedBy: "constructor", name: "C" },
+      { type: "observedtype", keyedBy: "constructor", name: "D" },
+      { type: "attempts", count: "1" },
+      { type: "attempt", strategy: "Call_Inline", outcome: "CantInlineBigData" },
+    ]);
+
+  } catch(e) {
+    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
+  } finally {
+    SimpleTest.finish();
+  }
+});
+</script>
+</pre>
+</body>
+</html>
diff --git a/devtools/client/performance/components/waterfall-header.js b/devtools/client/performance/components/waterfall-header.js
new file mode 100644
index 000000000..f3030091b
--- /dev/null
+++ b/devtools/client/performance/components/waterfall-header.js
@@ -0,0 +1,69 @@
+/* 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/. */
+
+"use strict";
+
+/**
+ * The "waterfall ticks" view, a header for the markers displayed in the waterfall.
+ */
+
+const { DOM: dom, PropTypes } = require("devtools/client/shared/vendor/react");
+const { L10N } = require("../modules/global");
+const { TickUtils } = require("../modules/waterfall-ticks");
+
+// ms
+const WATERFALL_HEADER_TICKS_MULTIPLE = 5;
+// px
+const WATERFALL_HEADER_TICKS_SPACING_MIN = 50;
+// px
+const WATERFALL_HEADER_TEXT_PADDING = 3;
+
+function WaterfallHeader(props) {
+  let { startTime, dataScale, sidebarWidth, waterfallWidth } = props;
+
+  let tickInterval = TickUtils.findOptimalTickInterval({
+    ticksMultiple: WATERFALL_HEADER_TICKS_MULTIPLE,
+    ticksSpacingMin: WATERFALL_HEADER_TICKS_SPACING_MIN,
+    dataScale: dataScale
+  });
+
+  let ticks = [];
+  for (let x = 0; x < waterfallWidth; x += tickInterval) {
+    let left = x + WATERFALL_HEADER_TEXT_PADDING;
+    let time = Math.round(x / dataScale + startTime);
+    let label = L10N.getFormatStr("timeline.tick", time);
+
+    let node = dom.div({
+      className: "plain waterfall-header-tick",
+      style: { transform: `translateX(${left}px)` }
+    }, label);
+    ticks.push(node);
+  }
+
+  return dom.div(
+    { className: "waterfall-header" },
+    dom.div(
+      {
+        className: "waterfall-sidebar theme-sidebar waterfall-header-name",
+        style: { width: sidebarWidth + "px" }
+      },
+      L10N.getStr("timeline.records")
+    ),
+    dom.div(
+      { className: "waterfall-header-ticks waterfall-background-ticks" },
+      ticks
+    )
+  );
+}
+
+WaterfallHeader.displayName = "WaterfallHeader";
+
+WaterfallHeader.propTypes = {
+  startTime: PropTypes.number.isRequired,
+  dataScale: PropTypes.number.isRequired,
+  sidebarWidth: PropTypes.number.isRequired,
+  waterfallWidth: PropTypes.number.isRequired,
+};
+
+module.exports = WaterfallHeader;
diff --git a/devtools/client/performance/components/waterfall-tree-row.js b/devtools/client/performance/components/waterfall-tree-row.js
new file mode 100644
index 000000000..b87750db1
--- /dev/null
+++ b/devtools/client/performance/components/waterfall-tree-row.js
@@ -0,0 +1,107 @@
+/* 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/. */
+
+"use strict";
+
+/**
+ * A single row (node) in the waterfall tree
+ */
+
+const { DOM: dom, PropTypes } = require("devtools/client/shared/vendor/react");
+const { MarkerBlueprintUtils } = require("../modules/marker-blueprint-utils");
+
+// px
+const LEVEL_INDENT = 10;
+// px
+const ARROW_NODE_OFFSET = -14;
+// px
+const WATERFALL_MARKER_TIMEBAR_WIDTH_MIN = 5;
+
+function buildMarkerSidebar(blueprint, props) {
+  const { marker, level, sidebarWidth } = props;
+
+  let bullet = dom.div({
+    className: `waterfall-marker-bullet marker-color-${blueprint.colorName}`,
+    style: { transform: `translateX(${level * LEVEL_INDENT}px)` },
+    "data-type": marker.name
+  });
+
+  let label = MarkerBlueprintUtils.getMarkerLabel(marker);
+
+  let name = dom.div({
+    className: "plain waterfall-marker-name",
+    style: { transform: `translateX(${level * LEVEL_INDENT}px)` },
+    title: label
+  }, label);
+
+  return dom.div({
+    className: "waterfall-sidebar theme-sidebar",
+    style: { width: sidebarWidth + "px" }
+  }, bullet, name);
+}
+
+function buildMarkerTimebar(blueprint, props) {
+  const { marker, startTime, dataScale, arrow } = props;
+  const offset = (marker.start - startTime) * dataScale + ARROW_NODE_OFFSET;
+  const width = Math.max((marker.end - marker.start) * dataScale,
+                         WATERFALL_MARKER_TIMEBAR_WIDTH_MIN);
+
+  let bar = dom.div(
+    {
+      className: "waterfall-marker-wrap",
+      style: { transform: `translateX(${offset}px)` }
+    },
+    arrow,
+    dom.div({
+      className: `waterfall-marker-bar marker-color-${blueprint.colorName}`,
+      style: { width: `${width}px` },
+      "data-type": marker.name
+    })
+  );
+
+  return dom.div(
+    { className: "waterfall-marker waterfall-background-ticks" },
+    bar
+  );
+}
+
+function WaterfallTreeRow(props) {
+  const { marker, focused } = props;
+  const blueprint = MarkerBlueprintUtils.getBlueprintFor(marker);
+
+  let attrs = {
+    className: "waterfall-tree-item" + (focused ? " focused" : ""),
+    "data-otmt": marker.isOffMainThread
+  };
+
+  // Don't render an expando-arrow for leaf nodes.
+  let submarkers = marker.submarkers;
+  let hasDescendants = submarkers && submarkers.length > 0;
+  if (hasDescendants) {
+    attrs["data-expandable"] = "";
+  } else {
+    attrs["data-invisible"] = "";
+  }
+
+  return dom.div(
+    attrs,
+    buildMarkerSidebar(blueprint, props),
+    buildMarkerTimebar(blueprint, props)
+  );
+}
+
+WaterfallTreeRow.displayName = "WaterfallTreeRow";
+
+WaterfallTreeRow.propTypes = {
+  marker: PropTypes.object.isRequired,
+  level: PropTypes.number.isRequired,
+  arrow: PropTypes.element.isRequired,
+  expanded: PropTypes.bool.isRequired,
+  focused: PropTypes.bool.isRequired,
+  startTime: PropTypes.number.isRequired,
+  dataScale: PropTypes.number.isRequired,
+  sidebarWidth: PropTypes.number.isRequired,
+};
+
+module.exports = WaterfallTreeRow;
diff --git a/devtools/client/performance/components/waterfall-tree.js b/devtools/client/performance/components/waterfall-tree.js
new file mode 100644
index 000000000..031c4facf
--- /dev/null
+++ b/devtools/client/performance/components/waterfall-tree.js
@@ -0,0 +1,167 @@
+/* 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/. */
+"use strict";
+
+const { createClass, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
+const Tree = createFactory(require("devtools/client/shared/components/tree"));
+const WaterfallTreeRow = createFactory(require("./waterfall-tree-row"));
+
+// px - keep in sync with var(--waterfall-tree-row-height) in performance.css
+const WATERFALL_TREE_ROW_HEIGHT = 15;
+
+/**
+ * Checks if a given marker is in the specified time range.
+ *
+ * @param object e
+ *        The marker containing the { start, end } timestamps.
+ * @param number start
+ *        The earliest allowed time.
+ * @param number end
+ *        The latest allowed time.
+ * @return boolean
+ *         True if the marker fits inside the specified time range.
+ */
+function isMarkerInRange(e, start, end) {
+  let mStart = e.start | 0;
+  let mEnd = e.end | 0;
+
+  return (
+    // bounds inside
+    (mStart >= start && mEnd <= end) ||
+    // bounds outside
+    (mStart < start && mEnd > end) ||
+    // overlap start
+    (mStart < start && mEnd >= start && mEnd <= end) ||
+    // overlap end
+    (mEnd > end && mStart >= start && mStart <= end)
+  );
+}
+
+const WaterfallTree = createClass({
+  displayName: "WaterfallTree",
+
+  propTypes: {
+    marker: PropTypes.object.isRequired,
+    startTime: PropTypes.number.isRequired,
+    endTime: PropTypes.number.isRequired,
+    dataScale: PropTypes.number.isRequired,
+    sidebarWidth: PropTypes.number.isRequired,
+    waterfallWidth: PropTypes.number.isRequired,
+    onFocus: PropTypes.func,
+  },
+
+  getInitialState() {
+    return {
+      focused: null,
+      expanded: new Set()
+    };
+  },
+
+  _getRoots(node) {
+    let roots = this.props.marker.submarkers || [];
+    return roots.filter(this._filter);
+  },
+
+  /**
+   * Find the parent node of 'node' with a depth-first search of the marker tree
+   */
+  _getParent(node) {
+    function findParent(marker) {
+      if (marker.submarkers) {
+        for (let submarker of marker.submarkers) {
+          if (submarker === node) {
+            return marker;
+          }
+
+          let parent = findParent(submarker);
+          if (parent) {
+            return parent;
+          }
+        }
+      }
+
+      return null;
+    }
+
+    let rootMarker = this.props.marker;
+    let parent = findParent(rootMarker);
+
+    // We are interested only in parent markers that are rendered,
+    // which rootMarker is not. Return null if the parent is rootMarker.
+    return parent !== rootMarker ? parent : null;
+  },
+
+  _getChildren(node) {
+    let submarkers = node.submarkers || [];
+    return submarkers.filter(this._filter);
+  },
+
+  _getKey(node) {
+    return `marker-${node.index}`;
+  },
+
+  _isExpanded(node) {
+    return this.state.expanded.has(node);
+  },
+
+  _onExpand(node) {
+    this.setState(state => {
+      let expanded = new Set(state.expanded);
+      expanded.add(node);
+      return { expanded };
+    });
+  },
+
+  _onCollapse(node) {
+    this.setState(state => {
+      let expanded = new Set(state.expanded);
+      expanded.delete(node);
+      return { expanded };
+    });
+  },
+
+  _onFocus(node) {
+    this.setState({ focused: node });
+    if (this.props.onFocus) {
+      this.props.onFocus(node);
+    }
+  },
+
+  _filter(node) {
+    let { startTime, endTime } = this.props;
+    return isMarkerInRange(node, startTime, endTime);
+  },
+
+  _renderItem(marker, level, focused, arrow, expanded) {
+    let { startTime, dataScale, sidebarWidth } = this.props;
+    return WaterfallTreeRow({
+      marker,
+      level,
+      arrow,
+      expanded,
+      focused,
+      startTime,
+      dataScale,
+      sidebarWidth
+    });
+  },
+
+  render() {
+    return Tree({
+      getRoots: this._getRoots,
+      getParent: this._getParent,
+      getChildren: this._getChildren,
+      getKey: this._getKey,
+      isExpanded: this._isExpanded,
+      onExpand: this._onExpand,
+      onCollapse: this._onCollapse,
+      onFocus: this._onFocus,
+      renderItem: this._renderItem,
+      focused: this.state.focused,
+      itemHeight: WATERFALL_TREE_ROW_HEIGHT
+    });
+  }
+});
+
+module.exports = WaterfallTree;
diff --git a/devtools/client/performance/components/waterfall.js b/devtools/client/performance/components/waterfall.js
new file mode 100644
index 000000000..067033874
--- /dev/null
+++ b/devtools/client/performance/components/waterfall.js
@@ -0,0 +1,36 @@
+/* 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/. */
+"use strict";
+
+/**
+ * This file contains the "waterfall" view, essentially a detailed list
+ * of all the markers in the timeline data.
+ */
+
+const { DOM: dom, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
+const WaterfallHeader = createFactory(require("./waterfall-header"));
+const WaterfallTree = createFactory(require("./waterfall-tree"));
+
+function Waterfall(props) {
+  return dom.div(
+    { className: "waterfall-markers" },
+    WaterfallHeader(props),
+    WaterfallTree(props)
+  );
+}
+
+Waterfall.displayName = "Waterfall";
+
+Waterfall.propTypes = {
+  marker: PropTypes.object.isRequired,
+  startTime: PropTypes.number.isRequired,
+  endTime: PropTypes.number.isRequired,
+  dataScale: PropTypes.number.isRequired,
+  sidebarWidth: PropTypes.number.isRequired,
+  waterfallWidth: PropTypes.number.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+};
+
+module.exports = Waterfall;