Move Mozilla DevTools to Platform - Part 3: Merge the browser/devtools and toolkit/devtools adjusting for directory collisions

78 files changed, 9664 insertions, 0 deletions

diff --git a/toolkit/devtools/webaudioeditor/controller.js b/toolkit/devtools/webaudioeditor/controller.js
new file mode 100644
index 000000000..2f51b6926
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/controller.js
@@ -0,0 +1,226 @@
+/* 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/. */
+
+/**
+ * A collection of `AudioNodeModel`s used throughout the editor
+ * to keep track of audio nodes within the audio context.
+ */
+let gAudioNodes = new AudioNodesCollection();
+
+/**
+ * Initializes the web audio editor views
+ */
+function startupWebAudioEditor() {
+  return all([
+    WebAudioEditorController.initialize(),
+    ContextView.initialize(),
+    InspectorView.initialize(),
+    PropertiesView.initialize(),
+    AutomationView.initialize()
+  ]);
+}
+
+/**
+ * Destroys the web audio editor controller and views.
+ */
+function shutdownWebAudioEditor() {
+  return all([
+    WebAudioEditorController.destroy(),
+    ContextView.destroy(),
+    InspectorView.destroy(),
+    PropertiesView.destroy(),
+    AutomationView.destroy()
+  ]);
+}
+
+/**
+ * Functions handling target-related lifetime events.
+ */
+let WebAudioEditorController = {
+  /**
+   * Listen for events emitted by the current tab target.
+   */
+  initialize: Task.async(function* () {
+    telemetry.toolOpened("webaudioeditor");
+    this._onTabNavigated = this._onTabNavigated.bind(this);
+    this._onThemeChange = this._onThemeChange.bind(this);
+
+    gTarget.on("will-navigate", this._onTabNavigated);
+    gTarget.on("navigate", this._onTabNavigated);
+    gFront.on("start-context", this._onStartContext);
+    gFront.on("create-node", this._onCreateNode);
+    gFront.on("connect-node", this._onConnectNode);
+    gFront.on("connect-param", this._onConnectParam);
+    gFront.on("disconnect-node", this._onDisconnectNode);
+    gFront.on("change-param", this._onChangeParam);
+    gFront.on("destroy-node", this._onDestroyNode);
+
+    // Hook into theme change so we can change
+    // the graph's marker styling, since we can't do this
+    // with CSS
+    gDevTools.on("pref-changed", this._onThemeChange);
+
+    // Store the AudioNode definitions from the WebAudioFront
+    AUDIO_NODE_DEFINITION = yield gFront.getDefinition();
+  }),
+
+  /**
+   * Remove events emitted by the current tab target.
+   */
+  destroy: function() {
+    telemetry.toolClosed("webaudioeditor");
+    gTarget.off("will-navigate", this._onTabNavigated);
+    gTarget.off("navigate", this._onTabNavigated);
+    gFront.off("start-context", this._onStartContext);
+    gFront.off("create-node", this._onCreateNode);
+    gFront.off("connect-node", this._onConnectNode);
+    gFront.off("connect-param", this._onConnectParam);
+    gFront.off("disconnect-node", this._onDisconnectNode);
+    gFront.off("change-param", this._onChangeParam);
+    gFront.off("destroy-node", this._onDestroyNode);
+    gDevTools.off("pref-changed", this._onThemeChange);
+  },
+
+  /**
+   * Called when page is reloaded to show the reload notice and waiting
+   * for an audio context notice.
+   */
+  reset: function () {
+    $("#content").hidden = true;
+    ContextView.resetUI();
+    InspectorView.resetUI();
+    PropertiesView.resetUI();
+  },
+
+  // Since node events (create, disconnect, connect) are all async,
+  // we have to make sure to wait that the node has finished creating
+  // before performing an operation on it.
+  getNode: function* (nodeActor) {
+    let id = nodeActor.actorID;
+    let node = gAudioNodes.get(id);
+
+    if (!node) {
+      let { resolve, promise } = defer();
+      gAudioNodes.on("add", function createNodeListener (createdNode) {
+        if (createdNode.id === id) {
+          gAudioNodes.off("add", createNodeListener);
+          resolve(createdNode);
+        }
+      });
+      node = yield promise;
+    }
+    return node;
+  },
+
+  /**
+   * Fired when the devtools theme changes (light, dark, etc.)
+   * so that the graph can update marker styling, as that
+   * cannot currently be done with CSS.
+   */
+  _onThemeChange: function (event, data) {
+    window.emit(EVENTS.THEME_CHANGE, data.newValue);
+  },
+
+  /**
+   * Called for each location change in the debugged tab.
+   */
+  _onTabNavigated: Task.async(function* (event, {isFrameSwitching}) {
+    switch (event) {
+      case "will-navigate": {
+        // Make sure the backend is prepared to handle audio contexts.
+        if (!isFrameSwitching) {
+          yield gFront.setup({ reload: false });
+        }
+
+        // Clear out current UI.
+        this.reset();
+
+        // When switching to an iframe, ensure displaying the reload button.
+        // As the document has already been loaded without being hooked.
+        if (isFrameSwitching) {
+          $("#reload-notice").hidden = false;
+          $("#waiting-notice").hidden = true;
+        } else {
+          // Otherwise, we are loading a new top level document,
+          // so we don't need to reload anymore and should receive
+          // new node events.
+          $("#reload-notice").hidden = true;
+          $("#waiting-notice").hidden = false;
+        }
+
+        // Clear out stored audio nodes
+        gAudioNodes.reset();
+
+        window.emit(EVENTS.UI_RESET);
+        break;
+      }
+      case "navigate": {
+        // TODO Case of bfcache, needs investigating
+        // bug 994250
+        break;
+      }
+    }
+  }),
+
+  /**
+   * Called after the first audio node is created in an audio context,
+   * signaling that the audio context is being used.
+   */
+  _onStartContext: function() {
+    $("#reload-notice").hidden = true;
+    $("#waiting-notice").hidden = true;
+    $("#content").hidden = false;
+    window.emit(EVENTS.START_CONTEXT);
+  },
+
+  /**
+   * Called when a new node is created. Creates an `AudioNodeView` instance
+   * for tracking throughout the editor.
+   */
+  _onCreateNode: Task.async(function* (nodeActor) {
+    yield gAudioNodes.add(nodeActor);
+  }),
+
+  /**
+   * Called on `destroy-node` when an AudioNode is GC'd. Removes
+   * from the AudioNode array and fires an event indicating the removal.
+   */
+  _onDestroyNode: function (nodeActor) {
+    gAudioNodes.remove(gAudioNodes.get(nodeActor.actorID));
+  },
+
+  /**
+   * Called when a node is connected to another node.
+   */
+  _onConnectNode: Task.async(function* ({ source: sourceActor, dest: destActor }) {
+    let source = yield WebAudioEditorController.getNode(sourceActor);
+    let dest = yield WebAudioEditorController.getNode(destActor);
+    source.connect(dest);
+  }),
+
+  /**
+   * Called when a node is conneceted to another node's AudioParam.
+   */
+  _onConnectParam: Task.async(function* ({ source: sourceActor, dest: destActor, param }) {
+    let source = yield WebAudioEditorController.getNode(sourceActor);
+    let dest = yield WebAudioEditorController.getNode(destActor);
+    source.connect(dest, param);
+  }),
+
+  /**
+   * Called when a node is disconnected.
+   */
+  _onDisconnectNode: Task.async(function* (nodeActor) {
+    let node = yield WebAudioEditorController.getNode(nodeActor);
+    node.disconnect();
+  }),
+
+  /**
+   * Called when a node param is changed.
+   */
+  _onChangeParam: Task.async(function* ({ actor, param, value }) {
+    let node = yield WebAudioEditorController.getNode(actor);
+    window.emit(EVENTS.CHANGE_PARAM, node, param, value);
+  })
+};
diff --git a/toolkit/devtools/webaudioeditor/includes.js b/toolkit/devtools/webaudioeditor/includes.js
new file mode 100644
index 000000000..2e6b8ece4
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/includes.js
@@ -0,0 +1,112 @@
+/* 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 { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource:///modules/devtools/ViewHelpers.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
+
+const devtools = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools;
+const { require } = devtools;
+
+let { console } = Cu.import("resource://gre/modules/devtools/Console.jsm", {});
+let { EventTarget } = require("sdk/event/target");
+
+const { Task } = Cu.import("resource://gre/modules/Task.jsm", {});
+const { Class } = require("sdk/core/heritage");
+const EventEmitter = require("devtools/toolkit/event-emitter");
+const STRINGS_URI = "chrome://browser/locale/devtools/webaudioeditor.properties"
+const L10N = new ViewHelpers.L10N(STRINGS_URI);
+const Telemetry = require("devtools/shared/telemetry");
+const telemetry = new Telemetry();
+devtools.lazyImporter(this, "LineGraphWidget",
+  "resource:///modules/devtools/Graphs.jsm");
+
+// `AUDIO_NODE_DEFINITION` defined in the controller's initialization,
+// which describes all the properties of an AudioNode
+let AUDIO_NODE_DEFINITION;
+
+// Override DOM promises with Promise.jsm helpers
+const { defer, all } = Cu.import("resource://gre/modules/Promise.jsm", {}).Promise;
+
+/* Events fired on `window` to indicate state or actions*/
+const EVENTS = {
+  // Fired when the first AudioNode has been created, signifying
+  // that the AudioContext is being used and should be tracked via the editor.
+  START_CONTEXT: "WebAudioEditor:StartContext",
+
+  // When the devtools theme changes.
+  THEME_CHANGE: "WebAudioEditor:ThemeChange",
+
+  // When the UI is reset from tab navigation.
+  UI_RESET: "WebAudioEditor:UIReset",
+
+  // When a param has been changed via the UI and successfully
+  // pushed via the actor to the raw audio node.
+  UI_SET_PARAM: "WebAudioEditor:UISetParam",
+
+  // When a node is to be set in the InspectorView.
+  UI_SELECT_NODE: "WebAudioEditor:UISelectNode",
+
+  // When the inspector is finished setting a new node.
+  UI_INSPECTOR_NODE_SET: "WebAudioEditor:UIInspectorNodeSet",
+
+  // When the inspector is finished rendering in or out of view.
+  UI_INSPECTOR_TOGGLED: "WebAudioEditor:UIInspectorToggled",
+
+  // When an audio node is finished loading in the Properties tab.
+  UI_PROPERTIES_TAB_RENDERED: "WebAudioEditor:UIPropertiesTabRendered",
+
+  // When an audio node is finished loading in the Automation tab.
+  UI_AUTOMATION_TAB_RENDERED: "WebAudioEditor:UIAutomationTabRendered",
+
+  // When the Audio Context graph finishes rendering.
+  // Is called with two arguments, first representing number of nodes
+  // rendered, second being the number of edge connections rendering (not counting
+  // param edges), followed by the count of the param edges rendered.
+  UI_GRAPH_RENDERED: "WebAudioEditor:UIGraphRendered",
+
+  // Called when the inspector splitter is moved and resized.
+  UI_INSPECTOR_RESIZE: "WebAudioEditor:UIInspectorResize"
+};
+
+/**
+ * The current target and the Web Audio Editor front, set by this tool's host.
+ */
+let gToolbox, gTarget, gFront;
+
+/**
+ * Convenient way of emitting events from the panel window.
+ */
+EventEmitter.decorate(this);
+
+/**
+ * DOM query helper.
+ */
+function $(selector, target = document) { return target.querySelector(selector); }
+function $$(selector, target = document) { return target.querySelectorAll(selector); }
+
+/**
+ * Takes an iterable collection, and a hash. Return the first
+ * object in the collection that matches the values in the hash.
+ * From Backbone.Collection#findWhere
+ * http://backbonejs.org/#Collection-findWhere
+ */
+function findWhere (collection, attrs) {
+  let keys = Object.keys(attrs);
+  for (let model of collection) {
+    if (keys.every(key => model[key] === attrs[key])) {
+      return model;
+    }
+  }
+  return void 0;
+}
+
+function mixin (source, ...args) {
+  args.forEach(obj => Object.keys(obj).forEach(prop => source[prop] = obj[prop]));
+  return source;
+}
diff --git a/toolkit/devtools/webaudioeditor/lib/D3_LICENSE b/toolkit/devtools/webaudioeditor/lib/D3_LICENSE
new file mode 100644
index 000000000..fb7d95d70
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/lib/D3_LICENSE
@@ -0,0 +1,26 @@
+Copyright (c) 2014, Michael Bostock
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* The name Michael Bostock may not be used to endorse or promote products
+  derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT,
+INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/toolkit/devtools/webaudioeditor/lib/DAGRE_D3_LICENSE b/toolkit/devtools/webaudioeditor/lib/DAGRE_D3_LICENSE
new file mode 100644
index 000000000..1d64ed68c
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/lib/DAGRE_D3_LICENSE
@@ -0,0 +1,19 @@
+Copyright (c) 2013 Chris Pettitt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/toolkit/devtools/webaudioeditor/lib/dagre-d3.js b/toolkit/devtools/webaudioeditor/lib/dagre-d3.js
new file mode 100644
index 000000000..482ce827f
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/lib/dagre-d3.js
@@ -0,0 +1,4560 @@
+;(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+var global=self;/**
+ * @license
+ * Copyright (c) 2012-2013 Chris Pettitt
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+global.dagreD3 = require('./index');
+
+},{"./index":2}],2:[function(require,module,exports){
+/**
+ * @license
+ * Copyright (c) 2012-2013 Chris Pettitt
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+module.exports =  {
+  Digraph: require('graphlib').Digraph,
+  Renderer: require('./lib/Renderer'),
+  json: require('graphlib').converter.json,
+  layout: require('dagre').layout,
+  version: require('./lib/version')
+};
+
+},{"./lib/Renderer":3,"./lib/version":4,"dagre":11,"graphlib":28}],3:[function(require,module,exports){
+var layout = require('dagre').layout;
+
+var d3;
+try { d3 = require('d3'); } catch (_) { d3 = window.d3; }
+
+module.exports = Renderer;
+
+function Renderer() {
+  // Set up defaults...
+  this._layout = layout();
+
+  this.drawNodes(defaultDrawNodes);
+  this.drawEdgeLabels(defaultDrawEdgeLabels);
+  this.drawEdgePaths(defaultDrawEdgePaths);
+  this.positionNodes(defaultPositionNodes);
+  this.positionEdgeLabels(defaultPositionEdgeLabels);
+  this.positionEdgePaths(defaultPositionEdgePaths);
+  this.transition(defaultTransition);
+  this.postLayout(defaultPostLayout);
+  this.postRender(defaultPostRender);
+
+  this.edgeInterpolate('bundle');
+  this.edgeTension(0.95);
+}
+
+Renderer.prototype.layout = function(layout) {
+  if (!arguments.length) { return this._layout; }
+  this._layout = layout;
+  return this;
+};
+
+Renderer.prototype.drawNodes = function(drawNodes) {
+  if (!arguments.length) { return this._drawNodes; }
+  this._drawNodes = bind(drawNodes, this);
+  return this;
+};
+
+Renderer.prototype.drawEdgeLabels = function(drawEdgeLabels) {
+  if (!arguments.length) { return this._drawEdgeLabels; }
+  this._drawEdgeLabels = bind(drawEdgeLabels, this);
+  return this;
+};
+
+Renderer.prototype.drawEdgePaths = function(drawEdgePaths) {
+  if (!arguments.length) { return this._drawEdgePaths; }
+  this._drawEdgePaths = bind(drawEdgePaths, this);
+  return this;
+};
+
+Renderer.prototype.positionNodes = function(positionNodes) {
+  if (!arguments.length) { return this._positionNodes; }
+  this._positionNodes = bind(positionNodes, this);
+  return this;
+};
+
+Renderer.prototype.positionEdgeLabels = function(positionEdgeLabels) {
+  if (!arguments.length) { return this._positionEdgeLabels; }
+  this._positionEdgeLabels = bind(positionEdgeLabels, this);
+  return this;
+};
+
+Renderer.prototype.positionEdgePaths = function(positionEdgePaths) {
+  if (!arguments.length) { return this._positionEdgePaths; }
+  this._positionEdgePaths = bind(positionEdgePaths, this);
+  return this;
+};
+
+Renderer.prototype.transition = function(transition) {
+  if (!arguments.length) { return this._transition; }
+  this._transition = bind(transition, this);
+  return this;
+};
+
+Renderer.prototype.postLayout = function(postLayout) {
+  if (!arguments.length) { return this._postLayout; }
+  this._postLayout = bind(postLayout, this);
+  return this;
+};
+
+Renderer.prototype.postRender = function(postRender) {
+  if (!arguments.length) { return this._postRender; }
+  this._postRender = bind(postRender, this);
+  return this;
+};
+
+Renderer.prototype.edgeInterpolate = function(edgeInterpolate) {
+  if (!arguments.length) { return this._edgeInterpolate; }
+  this._edgeInterpolate = edgeInterpolate;
+  return this;
+};
+
+Renderer.prototype.edgeTension = function(edgeTension) {
+  if (!arguments.length) { return this._edgeTension; }
+  this._edgeTension = edgeTension;
+  return this;
+};
+
+Renderer.prototype.run = function(graph, svg) {
+  // First copy the input graph so that it is not changed by the rendering
+  // process.
+  graph = copyAndInitGraph(graph);
+
+  // Create layers
+  svg
+    .selectAll('g.edgePaths, g.edgeLabels, g.nodes')
+    .data(['edgePaths', 'edgeLabels', 'nodes'])
+    .enter()
+      .append('g')
+      .attr('class', function(d) { return d; });
+
+
+  // Create node and edge roots, attach labels, and capture dimension
+  // information for use with layout.
+  var svgNodes = this._drawNodes(graph, svg.select('g.nodes'));
+  var svgEdgeLabels = this._drawEdgeLabels(graph, svg.select('g.edgeLabels'));
+
+  svgNodes.each(function(u) { calculateDimensions(this, graph.node(u)); });
+  svgEdgeLabels.each(function(e) { calculateDimensions(this, graph.edge(e)); });
+
+  // Now apply the layout function
+  var result = runLayout(graph, this._layout);
+
+  // Run any user-specified post layout processing
+  this._postLayout(result, svg);
+
+  var svgEdgePaths = this._drawEdgePaths(graph, svg.select('g.edgePaths'));
+
+  // Apply the layout information to the graph
+  this._positionNodes(result, svgNodes);
+  this._positionEdgeLabels(result, svgEdgeLabels);
+  this._positionEdgePaths(result, svgEdgePaths);
+
+  this._postRender(result, svg);
+
+  return result;
+};
+
+function copyAndInitGraph(graph) {
+  var copy = graph.copy();
+
+  // Init labels if they were not present in the source graph
+  copy.nodes().forEach(function(u) {
+    var value = copy.node(u);
+    if (value === undefined) {
+      value = {};
+      copy.node(u, value);
+    }
+    if (!('label' in value)) { value.label = ''; }
+  });
+
+  copy.edges().forEach(function(e) {
+    var value = copy.edge(e);
+    if (value === undefined) {
+      value = {};
+      copy.edge(e, value);
+    }
+    if (!('label' in value)) { value.label = ''; }
+  });
+
+  return copy;
+}
+
+function calculateDimensions(group, value) {
+  var bbox = group.getBBox();
+  value.width = bbox.width;
+  value.height = bbox.height;
+}
+
+function runLayout(graph, layout) {
+  var result = layout.run(graph);
+
+  // Copy labels to the result graph
+  graph.eachNode(function(u, value) { result.node(u).label = value.label; });
+  graph.eachEdge(function(e, u, v, value) { result.edge(e).label = value.label; });
+
+  return result;
+}
+
+function defaultDrawNodes(g, root) {
+  var nodes = g.nodes().filter(function(u) { return !isComposite(g, u); });
+
+  var svgNodes = root
+    .selectAll('g.node')
+    .classed('enter', false)
+    .data(nodes, function(u) { return u; });
+
+  svgNodes.selectAll('*').remove();
+
+  svgNodes
+    .enter()
+      .append('g')
+        .style('opacity', 0)
+        .attr('class', 'node enter');
+
+  svgNodes.each(function(u) { addLabel(g.node(u), d3.select(this), 10, 10); });
+
+  this._transition(svgNodes.exit())
+      .style('opacity', 0)
+      .remove();
+
+  return svgNodes;
+}
+
+function defaultDrawEdgeLabels(g, root) {
+  var svgEdgeLabels = root
+    .selectAll('g.edgeLabel')
+    .classed('enter', false)
+    .data(g.edges(), function (e) { return e; });
+
+  svgEdgeLabels.selectAll('*').remove();
+
+  svgEdgeLabels
+    .enter()
+      .append('g')
+        .style('opacity', 0)
+        .attr('class', 'edgeLabel enter');
+
+  svgEdgeLabels.each(function(e) { addLabel(g.edge(e), d3.select(this), 0, 0); });
+
+  this._transition(svgEdgeLabels.exit())
+      .style('opacity', 0)
+      .remove();
+
+  return svgEdgeLabels;
+}
+
+var defaultDrawEdgePaths = function(g, root) {
+  var svgEdgePaths = root
+    .selectAll('g.edgePath')
+    .classed('enter', false)
+    .data(g.edges(), function(e) { return e; });
+
+  svgEdgePaths
+    .enter()
+      .append('g')
+        .attr('class', 'edgePath enter')
+        .append('path')
+          .style('opacity', 0)
+          .attr('marker-end', 'url(#arrowhead)');
+
+  this._transition(svgEdgePaths.exit())
+      .style('opacity', 0)
+      .remove();
+
+  return svgEdgePaths;
+};
+
+function defaultPositionNodes(g, svgNodes, svgNodesEnter) {
+  function transform(u) {
+    var value = g.node(u);
+    return 'translate(' + value.x + ',' + value.y + ')';
+  }
+
+  // For entering nodes, position immediately without transition
+  svgNodes.filter('.enter').attr('transform', transform);
+
+  this._transition(svgNodes)
+      .style('opacity', 1)
+      .attr('transform', transform);
+}
+
+function defaultPositionEdgeLabels(g, svgEdgeLabels) {
+  function transform(e) {
+    var value = g.edge(e);
+    var point = findMidPoint(value.points);
+    return 'translate(' + point.x + ',' + point.y + ')';
+  }
+
+  // For entering edge labels, position immediately without transition
+  svgEdgeLabels.filter('.enter').attr('transform', transform);
+
+  this._transition(svgEdgeLabels)
+    .style('opacity', 1)
+    .attr('transform', transform);
+}
+
+function defaultPositionEdgePaths(g, svgEdgePaths) {
+  var interpolate = this._edgeInterpolate,
+      tension = this._edgeTension;
+
+  function calcPoints(e) {
+    var value = g.edge(e);
+    var source = g.node(g.incidentNodes(e)[0]);
+    var target = g.node(g.incidentNodes(e)[1]);
+    var points = value.points.slice();
+
+    var p0 = points.length === 0 ? target : points[0];
+    var p1 = points.length === 0 ? source : points[points.length - 1];
+
+    points.unshift(intersectRect(source, p0));
+    // TODO: use bpodgursky's shortening algorithm here
+    points.push(intersectRect(target, p1));
+
+    return d3.svg.line()
+      .x(function(d) { return d.x; })
+      .y(function(d) { return d.y; })
+      .interpolate(interpolate)
+      .tension(tension)
+      (points);
+  }
+
+  svgEdgePaths.filter('.enter').selectAll('path')
+      .attr('d', calcPoints);
+
+  this._transition(svgEdgePaths.selectAll('path'))
+      .attr('d', calcPoints)
+      .style('opacity', 1);
+}
+
+// By default we do not use transitions
+function defaultTransition(selection) {
+  return selection;
+}
+
+function defaultPostLayout() {
+  // Do nothing
+}
+
+function defaultPostRender(graph, root) {
+  if (graph.isDirected() && root.select('#arrowhead').empty()) {
+    root
+      .append('svg:defs')
+        .append('svg:marker')
+          .attr('id', 'arrowhead')
+          .attr('viewBox', '0 0 10 10')
+          .attr('refX', 8)
+          .attr('refY', 5)
+          .attr('markerUnits', 'strokewidth')
+          .attr('markerWidth', 8)
+          .attr('markerHeight', 5)
+          .attr('orient', 'auto')
+          .attr('style', 'fill: #333')
+          .append('svg:path')
+            .attr('d', 'M 0 0 L 10 5 L 0 10 z');
+  }
+}
+
+function addLabel(node, root, marginX, marginY) {
+  // Add the rect first so that it appears behind the label
+  var label = node.label;
+  var rect = root.append('rect');
+  var labelSvg = root.append('g');
+
+  if (label[0] === '<') {
+    addForeignObjectLabel(label, labelSvg);
+    // No margin for HTML elements
+    marginX = marginY = 0;
+  } else {
+    addTextLabel(label,
+                 labelSvg,
+                 Math.floor(node.labelCols),
+                 node.labelCut);
+  }
+
+  var bbox = root.node().getBBox();
+
+  labelSvg.attr('transform',
+             'translate(' + (-bbox.width / 2) + ',' + (-bbox.height / 2) + ')');
+
+  rect
+    .attr('rx', 5)
+    .attr('ry', 5)
+    .attr('x', -(bbox.width / 2 + marginX))
+    .attr('y', -(bbox.height / 2 + marginY))
+    .attr('width', bbox.width + 2 * marginX)
+    .attr('height', bbox.height + 2 * marginY);
+}
+
+function addForeignObjectLabel(label, root) {
+  var fo = root
+    .append('foreignObject')
+      .attr('width', '100000');
+
+  var w, h;
+  fo
+    .append('xhtml:div')
+      .style('float', 'left')
+      // TODO find a better way to get dimensions for foreignObjects...
+      .html(function() { return label; })
+      .each(function() {
+        w = this.clientWidth;
+        h = this.clientHeight;
+      });
+
+  fo
+    .attr('width', w)
+    .attr('height', h);
+}
+
+function addTextLabel(label, root, labelCols, labelCut) {
+  if (labelCut === undefined) labelCut = "false";
+  labelCut = (labelCut.toString().toLowerCase() === "true");
+
+  var node = root
+    .append('text')
+    .attr('text-anchor', 'left');
+
+  label = label.replace(/\\n/g, "\n");
+
+  var arr = labelCols ? wordwrap(label, labelCols, labelCut) : label;
+  arr = arr.split("\n");
+  for (var i = 0; i < arr.length; i++) {
+    node
+      .append('tspan')
+        .attr('dy', '1em')
+        .attr('x', '1')
+        .text(arr[i]);
+  }
+}
+
+// Thanks to
+// http://james.padolsey.com/javascript/wordwrap-for-javascript/
+function wordwrap (str, width, cut, brk) {
+     brk = brk || '\n';
+     width = width || 75;
+     cut = cut || false;
+
+     if (!str) { return str; }
+
+     var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : '|\\S+?(\\s|$)');
+
+     return str.match( RegExp(regex, 'g') ).join( brk );
+}
+
+function findMidPoint(points) {
+  var midIdx = points.length / 2;
+  if (points.length % 2) {
+    return points[Math.floor(midIdx)];
+  } else {
+    var p0 = points[midIdx - 1];
+    var p1 = points[midIdx];
+    return {x: (p0.x + p1.x) / 2, y: (p0.y + p1.y) / 2};
+  }
+}
+
+function intersectRect(rect, point) {
+  var x = rect.x;
+  var y = rect.y;
+
+  // For now we only support rectangles
+
+  // Rectangle intersection algorithm from:
+  // http://math.stackexchange.com/questions/108113/find-edge-between-two-boxes
+  var dx = point.x - x;
+  var dy = point.y - y;
+  var w = rect.width / 2;
+  var h = rect.height / 2;
+
+  var sx, sy;
+  if (Math.abs(dy) * w > Math.abs(dx) * h) {
+    // Intersection is top or bottom of rect.
+    if (dy < 0) {
+      h = -h;
+    }
+    sx = dy === 0 ? 0 : h * dx / dy;
+    sy = h;
+  } else {
+    // Intersection is left or right of rect.
+    if (dx < 0) {
+      w = -w;
+    }
+    sx = w;
+    sy = dx === 0 ? 0 : w * dy / dx;
+  }
+
+  return {x: x + sx, y: y + sy};
+}
+
+function isComposite(g, u) {
+  return 'children' in g && g.children(u).length;
+}
+
+function bind(func, thisArg) {
+  // For some reason PhantomJS occassionally fails when using the builtin bind,
+  // so we check if it is available and if not, use a degenerate polyfill.
+  if (func.bind) {
+    return func.bind(thisArg);
+  }
+
+  return function() {
+    return func.apply(thisArg, arguments);
+  };
+}
+
+},{"d3":10,"dagre":11}],4:[function(require,module,exports){
+module.exports = '0.1.5';
+
+},{}],5:[function(require,module,exports){
+exports.Set = require('./lib/Set');
+exports.PriorityQueue = require('./lib/PriorityQueue');
+exports.version = require('./lib/version');
+
+},{"./lib/PriorityQueue":6,"./lib/Set":7,"./lib/version":9}],6:[function(require,module,exports){
+module.exports = PriorityQueue;
+
+/**
+ * A min-priority queue data structure. This algorithm is derived from Cormen,
+ * et al., "Introduction to Algorithms". The basic idea of a min-priority
+ * queue is that you can efficiently (in O(1) time) get the smallest key in
+ * the queue. Adding and removing elements takes O(log n) time. A key can
+ * have its priority decreased in O(log n) time.
+ */
+function PriorityQueue() {
+  this._arr = [];
+  this._keyIndices = {};
+}
+
+/**
+ * Returns the number of elements in the queue. Takes `O(1)` time.
+ */
+PriorityQueue.prototype.size = function() {
+  return this._arr.length;
+};
+
+/**
+ * Returns the keys that are in the queue. Takes `O(n)` time.
+ */
+PriorityQueue.prototype.keys = function() {
+  return this._arr.map(function(x) { return x.key; });
+};
+
+/**
+ * Returns `true` if **key** is in the queue and `false` if not.
+ */
+PriorityQueue.prototype.has = function(key) {
+  return key in this._keyIndices;
+};
+
+/**
+ * Returns the priority for **key**. If **key** is not present in the queue
+ * then this function returns `undefined`. Takes `O(1)` time.
+ *
+ * @param {Object} key
+ */
+PriorityQueue.prototype.priority = function(key) {
+  var index = this._keyIndices[key];
+  if (index !== undefined) {
+    return this._arr[index].priority;
+  }
+};
+
+/**
+ * Returns the key for the minimum element in this queue. If the queue is
+ * empty this function throws an Error. Takes `O(1)` time.
+ */
+PriorityQueue.prototype.min = function() {
+  if (this.size() === 0) {
+    throw new Error("Queue underflow");
+  }
+  return this._arr[0].key;
+};
+
+/**
+ * Inserts a new key into the priority queue. If the key already exists in
+ * the queue this function returns `false`; otherwise it will return `true`.
+ * Takes `O(n)` time.
+ *
+ * @param {Object} key the key to add
+ * @param {Number} priority the initial priority for the key
+ */
+PriorityQueue.prototype.add = function(key, priority) {
+  var keyIndices = this._keyIndices;
+  if (!(key in keyIndices)) {
+    var arr = this._arr;
+    var index = arr.length;
+    keyIndices[key] = index;
+    arr.push({key: key, priority: priority});
+    this._decrease(index);
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Removes and returns the smallest key in the queue. Takes `O(log n)` time.
+ */
+PriorityQueue.prototype.removeMin = function() {
+  this._swap(0, this._arr.length - 1);
+  var min = this._arr.pop();
+  delete this._keyIndices[min.key];
+  this._heapify(0);
+  return min.key;
+};
+
+/**
+ * Decreases the priority for **key** to **priority**. If the new priority is
+ * greater than the previous priority, this function will throw an Error.
+ *
+ * @param {Object} key the key for which to raise priority
+ * @param {Number} priority the new priority for the key
+ */
+PriorityQueue.prototype.decrease = function(key, priority) {
+  var index = this._keyIndices[key];
+  if (priority > this._arr[index].priority) {
+    throw new Error("New priority is greater than current priority. " +
+        "Key: " + key + " Old: " + this._arr[index].priority + " New: " + priority);
+  }
+  this._arr[index].priority = priority;
+  this._decrease(index);
+};
+
+PriorityQueue.prototype._heapify = function(i) {
+  var arr = this._arr;
+  var l = 2 * i,
+      r = l + 1,
+      largest = i;
+  if (l < arr.length) {
+    largest = arr[l].priority < arr[largest].priority ? l : largest;
+    if (r < arr.length) {
+      largest = arr[r].priority < arr[largest].priority ? r : largest;
+    }
+    if (largest !== i) {
+      this._swap(i, largest);
+      this._heapify(largest);
+    }
+  }
+};
+
+PriorityQueue.prototype._decrease = function(index) {
+  var arr = this._arr;
+  var priority = arr[index].priority;
+  var parent;
+  while (index !== 0) {
+    parent = index >> 1;
+    if (arr[parent].priority < priority) {
+      break;
+    }
+    this._swap(index, parent);
+    index = parent;
+  }
+};
+
+PriorityQueue.prototype._swap = function(i, j) {
+  var arr = this._arr;
+  var keyIndices = this._keyIndices;
+  var origArrI = arr[i];
+  var origArrJ = arr[j];
+  arr[i] = origArrJ;
+  arr[j] = origArrI;
+  keyIndices[origArrJ.key] = i;
+  keyIndices[origArrI.key] = j;
+};
+
+},{}],7:[function(require,module,exports){
+var util = require('./util');
+
+module.exports = Set;
+
+/**
+ * Constructs a new Set with an optional set of `initialKeys`.
+ *
+ * It is important to note that keys are coerced to String for most purposes
+ * with this object, similar to the behavior of JavaScript's Object. For
+ * example, the following will add only one key:
+ *
+ *     var s = new Set();
+ *     s.add(1);
+ *     s.add("1");
+ *
+ * However, the type of the key is preserved internally so that `keys` returns
+ * the original key set uncoerced. For the above example, `keys` would return
+ * `[1]`.
+ */
+function Set(initialKeys) {
+  this._size = 0;
+  this._keys = {};
+
+  if (initialKeys) {
+    for (var i = 0, il = initialKeys.length; i < il; ++i) {
+      this.add(initialKeys[i]);
+    }
+  }
+}
+
+/**
+ * Returns a new Set that represents the set intersection of the array of given
+ * sets.
+ */
+Set.intersect = function(sets) {
+  if (sets.length === 0) {
+    return new Set();
+  }
+
+  var result = new Set(!util.isArray(sets[0]) ? sets[0].keys() : sets[0]);
+  for (var i = 1, il = sets.length; i < il; ++i) {
+    var resultKeys = result.keys(),
+        other = !util.isArray(sets[i]) ? sets[i] : new Set(sets[i]);
+    for (var j = 0, jl = resultKeys.length; j < jl; ++j) {
+      var key = resultKeys[j];
+      if (!other.has(key)) {
+        result.remove(key);
+      }
+    }
+  }
+
+  return result;
+};
+
+/**
+ * Returns a new Set that represents the set union of the array of given sets.
+ */
+Set.union = function(sets) {
+  var totalElems = util.reduce(sets, function(lhs, rhs) {
+    return lhs + (rhs.size ? rhs.size() : rhs.length);
+  }, 0);
+  var arr = new Array(totalElems);
+
+  var k = 0;
+  for (var i = 0, il = sets.length; i < il; ++i) {
+    var cur = sets[i],
+        keys = !util.isArray(cur) ? cur.keys() : cur;
+    for (var j = 0, jl = keys.length; j < jl; ++j) {
+      arr[k++] = keys[j];
+    }
+  }
+
+  return new Set(arr);
+};
+
+/**
+ * Returns the size of this set in `O(1)` time.
+ */
+Set.prototype.size = function() {
+  return this._size;
+};
+
+/**
+ * Returns the keys in this set. Takes `O(n)` time.
+ */
+Set.prototype.keys = function() {
+  return values(this._keys);
+};
+
+/**
+ * Tests if a key is present in this Set. Returns `true` if it is and `false`
+ * if not. Takes `O(1)` time.
+ */
+Set.prototype.has = function(key) {
+  return key in this._keys;
+};
+
+/**
+ * Adds a new key to this Set if it is not already present. Returns `true` if
+ * the key was added and `false` if it was already present. Takes `O(1)` time.
+ */
+Set.prototype.add = function(key) {
+  if (!(key in this._keys)) {
+    this._keys[key] = key;
+    ++this._size;
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Removes a key from this Set. If the key was removed this function returns
+ * `true`. If not, it returns `false`. Takes `O(1)` time.
+ */
+Set.prototype.remove = function(key) {
+  if (key in this._keys) {
+    delete this._keys[key];
+    --this._size;
+    return true;
+  }
+  return false;
+};
+
+/*
+ * Returns an array of all values for properties of **o**.
+ */
+function values(o) {
+  var ks = Object.keys(o),
+      len = ks.length,
+      result = new Array(len),
+      i;
+  for (i = 0; i < len; ++i) {
+    result[i] = o[ks[i]];
+  }
+  return result;
+}
+
+},{"./util":8}],8:[function(require,module,exports){
+/*
+ * This polyfill comes from
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray
+ */
+if(!Array.isArray) {
+  exports.isArray = function (vArg) {
+    return Object.prototype.toString.call(vArg) === '[object Array]';
+  };
+} else {
+  exports.isArray = Array.isArray;
+}
+
+/*
+ * Slightly adapted polyfill from
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
+ */
+if ('function' !== typeof Array.prototype.reduce) {
+  exports.reduce = function(array, callback, opt_initialValue) {
+    'use strict';
+    if (null === array || 'undefined' === typeof array) {
+      // At the moment all modern browsers, that support strict mode, have
+      // native implementation of Array.prototype.reduce. For instance, IE8
+      // does not support strict mode, so this check is actually useless.
+      throw new TypeError(
+          'Array.prototype.reduce called on null or undefined');
+    }
+    if ('function' !== typeof callback) {
+      throw new TypeError(callback + ' is not a function');
+    }
+    var index, value,
+        length = array.length >>> 0,
+        isValueSet = false;
+    if (1 < arguments.length) {
+      value = opt_initialValue;
+      isValueSet = true;
+    }
+    for (index = 0; length > index; ++index) {
+      if (array.hasOwnProperty(index)) {
+        if (isValueSet) {
+          value = callback(value, array[index], index, array);
+        }
+        else {
+          value = array[index];
+          isValueSet = true;
+        }
+      }
+    }
+    if (!isValueSet) {
+      throw new TypeError('Reduce of empty array with no initial value');
+    }
+    return value;
+  };
+} else {
+  exports.reduce = function(array, callback, opt_initialValue) {
+    return array.reduce(callback, opt_initialValue);
+  };
+}
+
+},{}],9:[function(require,module,exports){
+module.exports = '1.1.3';
+
+},{}],10:[function(require,module,exports){
+require("./d3");
+module.exports = d3;
+(function () { delete this.d3; })(); // unset global
+
+},{}],11:[function(require,module,exports){
+/*
+Copyright (c) 2012-2013 Chris Pettitt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+exports.Digraph = require("graphlib").Digraph;
+exports.Graph = require("graphlib").Graph;
+exports.layout = require("./lib/layout");
+exports.version = require("./lib/version");
+
+},{"./lib/layout":12,"./lib/version":27,"graphlib":28}],12:[function(require,module,exports){
+var util = require('./util'),
+    rank = require('./rank'),
+    order = require('./order'),
+    CGraph = require('graphlib').CGraph,
+    CDigraph = require('graphlib').CDigraph;
+
+module.exports = function() {
+  // External configuration
+  var config = {
+    // How much debug information to include?
+    debugLevel: 0,
+    // Max number of sweeps to perform in order phase
+    orderMaxSweeps: order.DEFAULT_MAX_SWEEPS,
+    // Use network simplex algorithm in ranking
+    rankSimplex: false,
+    // Rank direction. Valid values are (TB, LR)
+    rankDir: 'TB'
+  };
+
+  // Phase functions
+  var position = require('./position')();
+
+  // This layout object
+  var self = {};
+
+  self.orderIters = util.propertyAccessor(self, config, 'orderMaxSweeps');
+
+  self.rankSimplex = util.propertyAccessor(self, config, 'rankSimplex');
+
+  self.nodeSep = delegateProperty(position.nodeSep);
+  self.edgeSep = delegateProperty(position.edgeSep);
+  self.universalSep = delegateProperty(position.universalSep);
+  self.rankSep = delegateProperty(position.rankSep);
+  self.rankDir = util.propertyAccessor(self, config, 'rankDir');
+  self.debugAlignment = delegateProperty(position.debugAlignment);
+
+  self.debugLevel = util.propertyAccessor(self, config, 'debugLevel', function(x) {
+    util.log.level = x;
+    position.debugLevel(x);
+  });
+
+  self.run = util.time('Total layout', run);
+
+  self._normalize = normalize;
+
+  return self;
+
+  /*
+   * Constructs an adjacency graph using the nodes and edges specified through
+   * config. For each node and edge we add a property `dagre` that contains an
+   * object that will hold intermediate and final layout information. Some of
+   * the contents include:
+   *
+   *  1) A generated ID that uniquely identifies the object.
+   *  2) Dimension information for nodes (copied from the source node).
+   *  3) Optional dimension information for edges.
+   *
+   * After the adjacency graph is constructed the code no longer needs to use
+   * the original nodes and edges passed in via config.
+   */
+  function initLayoutGraph(inputGraph) {
+    var g = new CDigraph();
+
+    inputGraph.eachNode(function(u, value) {
+      if (value === undefined) value = {};
+      g.addNode(u, {
+        width: value.width,
+        height: value.height
+      });
+      if (value.hasOwnProperty('rank')) {
+        g.node(u).prefRank = value.rank;
+      }
+    });
+
+    // Set up subgraphs
+    if (inputGraph.parent) {
+      inputGraph.nodes().forEach(function(u) {
+        g.parent(u, inputGraph.parent(u));
+      });
+    }
+
+    inputGraph.eachEdge(function(e, u, v, value) {
+      if (value === undefined) value = {};
+      var newValue = {
+        e: e,
+        minLen: value.minLen || 1,
+        width: value.width || 0,
+        height: value.height || 0,
+        points: []
+      };
+
+      g.addEdge(null, u, v, newValue);
+    });
+
+    // Initial graph attributes
+    var graphValue = inputGraph.graph() || {};
+    g.graph({
+      rankDir: graphValue.rankDir || config.rankDir,
+      orderRestarts: graphValue.orderRestarts
+    });
+
+    return g;
+  }
+
+  function run(inputGraph) {
+    var rankSep = self.rankSep();
+    var g;
+    try {
+      // Build internal graph
+      g = util.time('initLayoutGraph', initLayoutGraph)(inputGraph);
+
+      if (g.order() === 0) {
+        return g;
+      }
+
+      // Make space for edge labels
+      g.eachEdge(function(e, s, t, a) {
+        a.minLen *= 2;
+      });
+      self.rankSep(rankSep / 2);
+
+      // Determine the rank for each node. Nodes with a lower rank will appear
+      // above nodes of higher rank.
+      util.time('rank.run', rank.run)(g, config.rankSimplex);
+
+      // Normalize the graph by ensuring that every edge is proper (each edge has
+      // a length of 1). We achieve this by adding dummy nodes to long edges,
+      // thus shortening them.
+      util.time('normalize', normalize)(g);
+
+      // Order the nodes so that edge crossings are minimized.
+      util.time('order', order)(g, config.orderMaxSweeps);
+
+      // Find the x and y coordinates for every node in the graph.
+      util.time('position', position.run)(g);
+
+      // De-normalize the graph by removing dummy nodes and augmenting the
+      // original long edges with coordinate information.
+      util.time('undoNormalize', undoNormalize)(g);
+
+      // Reverses points for edges that are in a reversed state.
+      util.time('fixupEdgePoints', fixupEdgePoints)(g);
+
+      // Restore delete edges and reverse edges that were reversed in the rank
+      // phase.
+      util.time('rank.restoreEdges', rank.restoreEdges)(g);
+
+      // Construct final result graph and return it
+      return util.time('createFinalGraph', createFinalGraph)(g, inputGraph.isDirected());
+    } finally {
+      self.rankSep(rankSep);
+    }
+  }
+
+  /*
+   * This function is responsible for 'normalizing' the graph. The process of
+   * normalization ensures that no edge in the graph has spans more than one
+   * rank. To do this it inserts dummy nodes as needed and links them by adding
+   * dummy edges. This function keeps enough information in the dummy nodes and
+   * edges to ensure that the original graph can be reconstructed later.
+   *
+   * This method assumes that the input graph is cycle free.
+   */
+  function normalize(g) {
+    var dummyCount = 0;
+    g.eachEdge(function(e, s, t, a) {
+      var sourceRank = g.node(s).rank;
+      var targetRank = g.node(t).rank;
+      if (sourceRank + 1 < targetRank) {
+        for (var u = s, rank = sourceRank + 1, i = 0; rank < targetRank; ++rank, ++i) {
+          var v = '_D' + (++dummyCount);
+          var node = {
+            width: a.width,
+            height: a.height,
+            edge: { id: e, source: s, target: t, attrs: a },
+            rank: rank,
+            dummy: true
+          };
+
+          // If this node represents a bend then we will use it as a control
+          // point. For edges with 2 segments this will be the center dummy
+          // node. For edges with more than two segments, this will be the
+          // first and last dummy node.
+          if (i === 0) node.index = 0;
+          else if (rank + 1 === targetRank) node.index = 1;
+
+          g.addNode(v, node);
+          g.addEdge(null, u, v, {});
+          u = v;
+        }
+        g.addEdge(null, u, t, {});
+        g.delEdge(e);
+      }
+    });
+  }
+
+  /*
+   * Reconstructs the graph as it was before normalization. The positions of
+   * dummy nodes are used to build an array of points for the original 'long'
+   * edge. Dummy nodes and edges are removed.
+   */
+  function undoNormalize(g) {
+    g.eachNode(function(u, a) {
+      if (a.dummy) {
+        if ('index' in a) {
+          var edge = a.edge;
+          if (!g.hasEdge(edge.id)) {
+            g.addEdge(edge.id, edge.source, edge.target, edge.attrs);
+          }
+          var points = g.edge(edge.id).points;
+          points[a.index] = { x: a.x, y: a.y, ul: a.ul, ur: a.ur, dl: a.dl, dr: a.dr };
+        }
+        g.delNode(u);
+      }
+    });
+  }
+
+  /*
+   * For each edge that was reversed during the `acyclic` step, reverse its
+   * array of points.
+   */
+  function fixupEdgePoints(g) {
+    g.eachEdge(function(e, s, t, a) { if (a.reversed) a.points.reverse(); });
+  }
+
+  function createFinalGraph(g, isDirected) {
+    var out = isDirected ? new CDigraph() : new CGraph();
+    out.graph(g.graph());
+    g.eachNode(function(u, value) { out.addNode(u, value); });
+    g.eachNode(function(u) { out.parent(u, g.parent(u)); });
+    g.eachEdge(function(e, u, v, value) {
+      out.addEdge(value.e, u, v, value);
+    });
+
+    // Attach bounding box information
+    var maxX = 0, maxY = 0;
+    g.eachNode(function(u, value) {
+      if (!g.children(u).length) {
+        maxX = Math.max(maxX, value.x + value.width / 2);
+        maxY = Math.max(maxY, value.y + value.height / 2);
+      }
+    });
+    g.eachEdge(function(e, u, v, value) {
+      var maxXPoints = Math.max.apply(Math, value.points.map(function(p) { return p.x; }));
+      var maxYPoints = Math.max.apply(Math, value.points.map(function(p) { return p.y; }));
+      maxX = Math.max(maxX, maxXPoints + value.width / 2);
+      maxY = Math.max(maxY, maxYPoints + value.height / 2);
+    });
+    out.graph().width = maxX;
+    out.graph().height = maxY;
+
+    return out;
+  }
+
+  /*
+   * Given a function, a new function is returned that invokes the given
+   * function. The return value from the function is always the `self` object.
+   */
+  function delegateProperty(f) {
+    return function() {
+      if (!arguments.length) return f();
+      f.apply(null, arguments);
+      return self;
+    };
+  }
+};
+
+
+},{"./order":13,"./position":18,"./rank":19,"./util":26,"graphlib":28}],13:[function(require,module,exports){
+var util = require('./util'),
+    crossCount = require('./order/crossCount'),
+    initLayerGraphs = require('./order/initLayerGraphs'),
+    initOrder = require('./order/initOrder'),
+    sortLayer = require('./order/sortLayer');
+
+module.exports = order;
+
+// The maximum number of sweeps to perform before finishing the order phase.
+var DEFAULT_MAX_SWEEPS = 24;
+order.DEFAULT_MAX_SWEEPS = DEFAULT_MAX_SWEEPS;
+
+/*
+ * Runs the order phase with the specified `graph, `maxSweeps`, and
+ * `debugLevel`. If `maxSweeps` is not specified we use `DEFAULT_MAX_SWEEPS`.
+ * If `debugLevel` is not set we assume 0.
+ */
+function order(g, maxSweeps) {
+  if (arguments.length < 2) {
+    maxSweeps = DEFAULT_MAX_SWEEPS;
+  }
+
+  var restarts = g.graph().orderRestarts || 0;
+
+  var layerGraphs = initLayerGraphs(g);
+  // TODO: remove this when we add back support for ordering clusters
+  layerGraphs.forEach(function(lg) {
+    lg = lg.filterNodes(function(u) { return !g.children(u).length; });
+  });
+
+  var iters = 0,
+      currentBestCC,
+      allTimeBestCC = Number.MAX_VALUE,
+      allTimeBest = {};
+
+  function saveAllTimeBest() {
+    g.eachNode(function(u, value) { allTimeBest[u] = value.order; });
+  }
+
+  for (var j = 0; j < Number(restarts) + 1 && allTimeBestCC !== 0; ++j) {
+    currentBestCC = Number.MAX_VALUE;
+    initOrder(g, restarts > 0);
+
+    util.log(2, 'Order phase start cross count: ' + g.graph().orderInitCC);
+
+    var i, lastBest, cc;
+    for (i = 0, lastBest = 0; lastBest < 4 && i < maxSweeps && currentBestCC > 0; ++i, ++lastBest, ++iters) {
+      sweep(g, layerGraphs, i);
+      cc = crossCount(g);
+      if (cc < currentBestCC) {
+        lastBest = 0;
+        currentBestCC = cc;
+        if (cc < allTimeBestCC) {
+          saveAllTimeBest();
+          allTimeBestCC = cc;
+        }
+      }
+      util.log(3, 'Order phase start ' + j + ' iter ' + i + ' cross count: ' + cc);
+    }
+  }
+
+  Object.keys(allTimeBest).forEach(function(u) {
+    if (!g.children || !g.children(u).length) {
+      g.node(u).order = allTimeBest[u];
+    }
+  });
+  g.graph().orderCC = allTimeBestCC;
+
+  util.log(2, 'Order iterations: ' + iters);
+  util.log(2, 'Order phase best cross count: ' + g.graph().orderCC);
+}
+
+function predecessorWeights(g, nodes) {
+  var weights = {};
+  nodes.forEach(function(u) {
+    weights[u] = g.inEdges(u).map(function(e) {
+      return g.node(g.source(e)).order;
+    });
+  });
+  return weights;
+}
+
+function successorWeights(g, nodes) {
+  var weights = {};
+  nodes.forEach(function(u) {
+    weights[u] = g.outEdges(u).map(function(e) {
+      return g.node(g.target(e)).order;
+    });
+  });
+  return weights;
+}
+
+function sweep(g, layerGraphs, iter) {
+  if (iter % 2 === 0) {
+    sweepDown(g, layerGraphs, iter);
+  } else {
+    sweepUp(g, layerGraphs, iter);
+  }
+}
+
+function sweepDown(g, layerGraphs) {
+  var cg;
+  for (i = 1; i < layerGraphs.length; ++i) {
+    cg = sortLayer(layerGraphs[i], cg, predecessorWeights(g, layerGraphs[i].nodes()));
+  }
+}
+
+function sweepUp(g, layerGraphs) {
+  var cg;
+  for (i = layerGraphs.length - 2; i >= 0; --i) {
+    sortLayer(layerGraphs[i], cg, successorWeights(g, layerGraphs[i].nodes()));
+  }
+}
+
+},{"./order/crossCount":14,"./order/initLayerGraphs":15,"./order/initOrder":16,"./order/sortLayer":17,"./util":26}],14:[function(require,module,exports){
+var util = require('../util');
+
+module.exports = crossCount;
+
+/*
+ * Returns the cross count for the given graph.
+ */
+function crossCount(g) {
+  var cc = 0;
+  var ordering = util.ordering(g);
+  for (var i = 1; i < ordering.length; ++i) {
+    cc += twoLayerCrossCount(g, ordering[i-1], ordering[i]);
+  }
+  return cc;
+}
+
+/*
+ * This function searches through a ranked and ordered graph and counts the
+ * number of edges that cross. This algorithm is derived from:
+ *
+ *    W. Barth et al., Bilayer Cross Counting, JGAA, 8(2) 179–194 (2004)
+ */
+function twoLayerCrossCount(g, layer1, layer2) {
+  var indices = [];
+  layer1.forEach(function(u) {
+    var nodeIndices = [];
+    g.outEdges(u).forEach(function(e) { nodeIndices.push(g.node(g.target(e)).order); });
+    nodeIndices.sort(function(x, y) { return x - y; });
+    indices = indices.concat(nodeIndices);
+  });
+
+  var firstIndex = 1;
+  while (firstIndex < layer2.length) firstIndex <<= 1;
+
+  var treeSize = 2 * firstIndex - 1;
+  firstIndex -= 1;
+
+  var tree = [];
+  for (var i = 0; i < treeSize; ++i) { tree[i] = 0; }
+
+  var cc = 0;
+  indices.forEach(function(i) {
+    var treeIndex = i + firstIndex;
+    ++tree[treeIndex];
+    while (treeIndex > 0) {
+      if (treeIndex % 2) {
+        cc += tree[treeIndex + 1];
+      }
+      treeIndex = (treeIndex - 1) >> 1;
+      ++tree[treeIndex];
+    }
+  });
+
+  return cc;
+}
+
+},{"../util":26}],15:[function(require,module,exports){
+var nodesFromList = require('graphlib').filter.nodesFromList,
+    /* jshint -W079 */
+    Set = require('cp-data').Set;
+
+module.exports = initLayerGraphs;
+
+/*
+ * This function takes a compound layered graph, g, and produces an array of
+ * layer graphs. Each entry in the array represents a subgraph of nodes
+ * relevant for performing crossing reduction on that layer.
+ */
+function initLayerGraphs(g) {
+  var ranks = [];
+
+  function dfs(u) {
+    if (u === null) {
+      g.children(u).forEach(function(v) { dfs(v); });
+      return;
+    }
+
+    var value = g.node(u);
+    value.minRank = ('rank' in value) ? value.rank : Number.MAX_VALUE;
+    value.maxRank = ('rank' in value) ? value.rank : Number.MIN_VALUE;
+    var uRanks = new Set();
+    g.children(u).forEach(function(v) {
+      var rs = dfs(v);
+      uRanks = Set.union([uRanks, rs]);
+      value.minRank = Math.min(value.minRank, g.node(v).minRank);
+      value.maxRank = Math.max(value.maxRank, g.node(v).maxRank);
+    });
+
+    if ('rank' in value) uRanks.add(value.rank);
+
+    uRanks.keys().forEach(function(r) {
+      if (!(r in ranks)) ranks[r] = [];
+      ranks[r].push(u);
+    });
+
+    return uRanks;
+  }
+  dfs(null);
+
+  var layerGraphs = [];
+  ranks.forEach(function(us, rank) {
+    layerGraphs[rank] = g.filterNodes(nodesFromList(us));
+  });
+
+  return layerGraphs;
+}
+
+},{"cp-data":5,"graphlib":28}],16:[function(require,module,exports){
+var crossCount = require('./crossCount'),
+    util = require('../util');
+
+module.exports = initOrder;
+
+/*
+ * Given a graph with a set of layered nodes (i.e. nodes that have a `rank`
+ * attribute) this function attaches an `order` attribute that uniquely
+ * arranges each node of each rank. If no constraint graph is provided the
+ * order of the nodes in each rank is entirely arbitrary.
+ */
+function initOrder(g, random) {
+  var layers = [];
+
+  g.eachNode(function(u, value) {
+    var layer = layers[value.rank];
+    if (g.children && g.children(u).length > 0) return;
+    if (!layer) {
+      layer = layers[value.rank] = [];
+    }
+    layer.push(u);
+  });
+
+  layers.forEach(function(layer) {
+    if (random) {
+      util.shuffle(layer);
+    }
+    layer.forEach(function(u, i) {
+      g.node(u).order = i;
+    });
+  });
+
+  var cc = crossCount(g);
+  g.graph().orderInitCC = cc;
+  g.graph().orderCC = Number.MAX_VALUE;
+}
+
+},{"../util":26,"./crossCount":14}],17:[function(require,module,exports){
+var util = require('../util');
+/*
+    Digraph = require('graphlib').Digraph,
+    topsort = require('graphlib').alg.topsort,
+    nodesFromList = require('graphlib').filter.nodesFromList;
+*/
+
+module.exports = sortLayer;
+
+/*
+function sortLayer(g, cg, weights) {
+  var result = sortLayerSubgraph(g, null, cg, weights);
+  result.list.forEach(function(u, i) {
+    g.node(u).order = i;
+  });
+  return result.constraintGraph;
+}
+*/
+
+function sortLayer(g, cg, weights) {
+  var ordering = [];
+  var bs = {};
+  g.eachNode(function(u, value) {
+    ordering[value.order] = u;
+    var ws = weights[u];
+    if (ws.length) {
+      bs[u] = util.sum(ws) / ws.length;
+    }
+  });
+
+  var toSort = g.nodes().filter(function(u) { return bs[u] !== undefined; });
+  toSort.sort(function(x, y) {
+    return bs[x] - bs[y] || g.node(x).order - g.node(y).order;
+  });
+
+  for (var i = 0, j = 0, jl = toSort.length; j < jl; ++i) {
+    if (bs[ordering[i]] !== undefined) {
+      g.node(toSort[j++]).order = i;
+    }
+  }
+}
+
+// TOOD: re-enable constrained sorting once we have a strategy for handling
+// undefined barycenters.
+/*
+function sortLayerSubgraph(g, sg, cg, weights) {
+  cg = cg ? cg.filterNodes(nodesFromList(g.children(sg))) : new Digraph();
+
+  var nodeData = {};
+  g.children(sg).forEach(function(u) {
+    if (g.children(u).length) {
+      nodeData[u] = sortLayerSubgraph(g, u, cg, weights);
+      nodeData[u].firstSG = u;
+      nodeData[u].lastSG = u;
+    } else {
+      var ws = weights[u];
+      nodeData[u] = {
+        degree: ws.length,
+        barycenter: ws.length > 0 ? util.sum(ws) / ws.length : 0,
+        list: [u]
+      };
+    }
+  });
+
+  resolveViolatedConstraints(g, cg, nodeData);
+
+  var keys = Object.keys(nodeData);
+  keys.sort(function(x, y) {
+    return nodeData[x].barycenter - nodeData[y].barycenter;
+  });
+
+  var result =  keys.map(function(u) { return nodeData[u]; })
+                    .reduce(function(lhs, rhs) { return mergeNodeData(g, lhs, rhs); });
+  return result;
+}
+
+/*
+function mergeNodeData(g, lhs, rhs) {
+  var cg = mergeDigraphs(lhs.constraintGraph, rhs.constraintGraph);
+
+  if (lhs.lastSG !== undefined && rhs.firstSG !== undefined) {
+    if (cg === undefined) {
+      cg = new Digraph();
+    }
+    if (!cg.hasNode(lhs.lastSG)) { cg.addNode(lhs.lastSG); }
+    cg.addNode(rhs.firstSG);
+    cg.addEdge(null, lhs.lastSG, rhs.firstSG);
+  }
+
+  return {
+    degree: lhs.degree + rhs.degree,
+    barycenter: (lhs.barycenter * lhs.degree + rhs.barycenter * rhs.degree) /
+                (lhs.degree + rhs.degree),
+    list: lhs.list.concat(rhs.list),
+    firstSG: lhs.firstSG !== undefined ? lhs.firstSG : rhs.firstSG,
+    lastSG: rhs.lastSG !== undefined ? rhs.lastSG : lhs.lastSG,
+    constraintGraph: cg
+  };
+}
+
+function mergeDigraphs(lhs, rhs) {
+  if (lhs === undefined) return rhs;
+  if (rhs === undefined) return lhs;
+
+  lhs = lhs.copy();
+  rhs.nodes().forEach(function(u) { lhs.addNode(u); });
+  rhs.edges().forEach(function(e, u, v) { lhs.addEdge(null, u, v); });
+  return lhs;
+}
+
+function resolveViolatedConstraints(g, cg, nodeData) {
+  // Removes nodes `u` and `v` from `cg` and makes any edges incident on them
+  // incident on `w` instead.
+  function collapseNodes(u, v, w) {
+    // TODO original paper removes self loops, but it is not obvious when this would happen
+    cg.inEdges(u).forEach(function(e) {
+      cg.delEdge(e);
+      cg.addEdge(null, cg.source(e), w);
+    });
+
+    cg.outEdges(v).forEach(function(e) {
+      cg.delEdge(e);
+      cg.addEdge(null, w, cg.target(e));
+    });
+
+    cg.delNode(u);
+    cg.delNode(v);
+  }
+
+  var violated;
+  while ((violated = findViolatedConstraint(cg, nodeData)) !== undefined) {
+    var source = cg.source(violated),
+        target = cg.target(violated);
+
+    var v;
+    while ((v = cg.addNode(null)) && g.hasNode(v)) {
+      cg.delNode(v);
+    }
+
+    // Collapse barycenter and list
+    nodeData[v] = mergeNodeData(g, nodeData[source], nodeData[target]);
+    delete nodeData[source];
+    delete nodeData[target];
+
+    collapseNodes(source, target, v);
+    if (cg.incidentEdges(v).length === 0) { cg.delNode(v); }
+  }
+}
+
+function findViolatedConstraint(cg, nodeData) {
+  var us = topsort(cg);
+  for (var i = 0; i < us.length; ++i) {
+    var u = us[i];
+    var inEdges = cg.inEdges(u);
+    for (var j = 0; j < inEdges.length; ++j) {
+      var e = inEdges[j];
+      if (nodeData[cg.source(e)].barycenter >= nodeData[u].barycenter) {
+        return e;
+      }
+    }
+  }
+}
+*/
+
+},{"../util":26}],18:[function(require,module,exports){
+var util = require('./util');
+
+/*
+ * The algorithms here are based on Brandes and Köpf, "Fast and Simple
+ * Horizontal Coordinate Assignment".
+ */
+module.exports = function() {
+  // External configuration
+  var config = {
+    nodeSep: 50,
+    edgeSep: 10,
+    universalSep: null,
+    rankSep: 30
+  };
+
+  var self = {};
+
+  self.nodeSep = util.propertyAccessor(self, config, 'nodeSep');
+  self.edgeSep = util.propertyAccessor(self, config, 'edgeSep');
+  // If not null this separation value is used for all nodes and edges
+  // regardless of their widths. `nodeSep` and `edgeSep` are ignored with this
+  // option.
+  self.universalSep = util.propertyAccessor(self, config, 'universalSep');
+  self.rankSep = util.propertyAccessor(self, config, 'rankSep');
+  self.debugLevel = util.propertyAccessor(self, config, 'debugLevel');
+
+  self.run = run;
+
+  return self;
+
+  function run(g) {
+    g = g.filterNodes(util.filterNonSubgraphs(g));
+
+    var layering = util.ordering(g);
+
+    var conflicts = findConflicts(g, layering);
+
+    var xss = {};
+    ['u', 'd'].forEach(function(vertDir) {
+      if (vertDir === 'd') layering.reverse();
+
+      ['l', 'r'].forEach(function(horizDir) {
+        if (horizDir === 'r') reverseInnerOrder(layering);
+
+        var dir = vertDir + horizDir;
+        var align = verticalAlignment(g, layering, conflicts, vertDir === 'u' ? 'predecessors' : 'successors');
+        xss[dir]= horizontalCompaction(g, layering, align.pos, align.root, align.align);
+
+        if (config.debugLevel >= 3)
+          debugPositioning(vertDir + horizDir, g, layering, xss[dir]);
+
+        if (horizDir === 'r') flipHorizontally(xss[dir]);
+
+        if (horizDir === 'r') reverseInnerOrder(layering);
+      });
+
+      if (vertDir === 'd') layering.reverse();
+    });
+
+    balance(g, layering, xss);
+
+    g.eachNode(function(v) {
+      var xs = [];
+      for (var alignment in xss) {
+        var alignmentX = xss[alignment][v];
+        posXDebug(alignment, g, v, alignmentX);
+        xs.push(alignmentX);
+      }
+      xs.sort(function(x, y) { return x - y; });
+      posX(g, v, (xs[1] + xs[2]) / 2);
+    });
+
+    // Align y coordinates with ranks
+    var y = 0, reverseY = g.graph().rankDir === 'BT' || g.graph().rankDir === 'RL';
+    layering.forEach(function(layer) {
+      var maxHeight = util.max(layer.map(function(u) { return height(g, u); }));
+      y += maxHeight / 2;
+      layer.forEach(function(u) {
+        posY(g, u, reverseY ? -y : y);
+      });
+      y += maxHeight / 2 + config.rankSep;
+    });
+
+    // Translate layout so that top left corner of bounding rectangle has
+    // coordinate (0, 0).
+    var minX = util.min(g.nodes().map(function(u) { return posX(g, u) - width(g, u) / 2; }));
+    var minY = util.min(g.nodes().map(function(u) { return posY(g, u) - height(g, u) / 2; }));
+    g.eachNode(function(u) {
+      posX(g, u, posX(g, u) - minX);
+      posY(g, u, posY(g, u) - minY);
+    });
+  }
+
+  /*
+   * Generate an ID that can be used to represent any undirected edge that is
+   * incident on `u` and `v`.
+   */
+  function undirEdgeId(u, v) {
+    return u < v
+      ? u.toString().length + ':' + u + '-' + v
+      : v.toString().length + ':' + v + '-' + u;
+  }
+
+  function findConflicts(g, layering) {
+    var conflicts = {}, // Set of conflicting edge ids
+        pos = {},       // Position of node in its layer
+        prevLayer,
+        currLayer,
+        k0,     // Position of the last inner segment in the previous layer
+        l,      // Current position in the current layer (for iteration up to `l1`)
+        k1;     // Position of the next inner segment in the previous layer or
+                // the position of the last element in the previous layer
+
+    if (layering.length <= 2) return conflicts;
+
+    function updateConflicts(v) {
+      var k = pos[v];
+      if (k < k0 || k > k1) {
+        conflicts[undirEdgeId(currLayer[l], v)] = true;
+      }
+    }
+
+    layering[1].forEach(function(u, i) { pos[u] = i; });
+    for (var i = 1; i < layering.length - 1; ++i) {
+      prevLayer = layering[i];
+      currLayer = layering[i+1];
+      k0 = 0;
+      l = 0;
+
+      // Scan current layer for next node that is incident to an inner segement
+      // between layering[i+1] and layering[i].
+      for (var l1 = 0; l1 < currLayer.length; ++l1) {
+        var u = currLayer[l1]; // Next inner segment in the current layer or
+                               // last node in the current layer
+        pos[u] = l1;
+        k1 = undefined;
+
+        if (g.node(u).dummy) {
+          var uPred = g.predecessors(u)[0];
+          // Note: In the case of self loops and sideways edges it is possible
+          // for a dummy not to have a predecessor.
+          if (uPred !== undefined && g.node(uPred).dummy)
+            k1 = pos[uPred];
+        }
+        if (k1 === undefined && l1 === currLayer.length - 1)
+          k1 = prevLayer.length - 1;
+
+        if (k1 !== undefined) {
+          for (; l <= l1; ++l) {
+            g.predecessors(currLayer[l]).forEach(updateConflicts);
+          }
+          k0 = k1;
+        }
+      }
+    }
+
+    return conflicts;
+  }
+
+  function verticalAlignment(g, layering, conflicts, relationship) {
+    var pos = {},   // Position for a node in its layer
+        root = {},  // Root of the block that the node participates in
+        align = {}; // Points to the next node in the block or, if the last
+                    // element in the block, points to the first block's root
+
+    layering.forEach(function(layer) {
+      layer.forEach(function(u, i) {
+        root[u] = u;
+        align[u] = u;
+        pos[u] = i;
+      });
+    });
+
+    layering.forEach(function(layer) {
+      var prevIdx = -1;
+      layer.forEach(function(v) {
+        var related = g[relationship](v), // Adjacent nodes from the previous layer
+            mid;                          // The mid point in the related array
+
+        if (related.length > 0) {
+          related.sort(function(x, y) { return pos[x] - pos[y]; });
+          mid = (related.length - 1) / 2;
+          related.slice(Math.floor(mid), Math.ceil(mid) + 1).forEach(function(u) {
+            if (align[v] === v) {
+              if (!conflicts[undirEdgeId(u, v)] && prevIdx < pos[u]) {
+                align[u] = v;
+                align[v] = root[v] = root[u];
+                prevIdx = pos[u];
+              }
+            }
+          });
+        }
+      });
+    });
+
+    return { pos: pos, root: root, align: align };
+  }
+
+  // This function deviates from the standard BK algorithm in two ways. First
+  // it takes into account the size of the nodes. Second it includes a fix to
+  // the original algorithm that is described in Carstens, "Node and Label
+  // Placement in a Layered Layout Algorithm".
+  function horizontalCompaction(g, layering, pos, root, align) {
+    var sink = {},       // Mapping of node id -> sink node id for class
+        maybeShift = {}, // Mapping of sink node id -> { class node id, min shift }
+        shift = {},      // Mapping of sink node id -> shift
+        pred = {},       // Mapping of node id -> predecessor node (or null)
+        xs = {};         // Calculated X positions
+
+    layering.forEach(function(layer) {
+      layer.forEach(function(u, i) {
+        sink[u] = u;
+        maybeShift[u] = {};
+        if (i > 0)
+          pred[u] = layer[i - 1];
+      });
+    });
+
+    function updateShift(toShift, neighbor, delta) {
+      if (!(neighbor in maybeShift[toShift])) {
+        maybeShift[toShift][neighbor] = delta;
+      } else {
+        maybeShift[toShift][neighbor] = Math.min(maybeShift[toShift][neighbor], delta);
+      }
+    }
+
+    function placeBlock(v) {
+      if (!(v in xs)) {
+        xs[v] = 0;
+        var w = v;
+        do {
+          if (pos[w] > 0) {
+            var u = root[pred[w]];
+            placeBlock(u);
+            if (sink[v] === v) {
+              sink[v] = sink[u];
+            }
+            var delta = sep(g, pred[w]) + sep(g, w);
+            if (sink[v] !== sink[u]) {
+              updateShift(sink[u], sink[v], xs[v] - xs[u] - delta);
+            } else {
+              xs[v] = Math.max(xs[v], xs[u] + delta);
+            }
+          }
+          w = align[w];
+        } while (w !== v);
+      }
+    }
+
+    // Root coordinates relative to sink
+    util.values(root).forEach(function(v) {
+      placeBlock(v);
+    });
+
+    // Absolute coordinates
+    // There is an assumption here that we've resolved shifts for any classes
+    // that begin at an earlier layer. We guarantee this by visiting layers in
+    // order.
+    layering.forEach(function(layer) {
+      layer.forEach(function(v) {
+        xs[v] = xs[root[v]];
+        if (v === root[v] && v === sink[v]) {
+          var minShift = 0;
+          if (v in maybeShift && Object.keys(maybeShift[v]).length > 0) {
+            minShift = util.min(Object.keys(maybeShift[v])
+                                 .map(function(u) {
+                                      return maybeShift[v][u] + (u in shift ? shift[u] : 0);
+                                      }
+                                 ));
+          }
+          shift[v] = minShift;
+        }
+      });
+    });
+
+    layering.forEach(function(layer) {
+      layer.forEach(function(v) {
+        xs[v] += shift[sink[root[v]]] || 0;
+      });
+    });
+
+    return xs;
+  }
+
+  function findMinCoord(g, layering, xs) {
+    return util.min(layering.map(function(layer) {
+      var u = layer[0];
+      return xs[u];
+    }));
+  }
+
+  function findMaxCoord(g, layering, xs) {
+    return util.max(layering.map(function(layer) {
+      var u = layer[layer.length - 1];
+      return xs[u];
+    }));
+  }
+
+  function balance(g, layering, xss) {
+    var min = {},                            // Min coordinate for the alignment
+        max = {},                            // Max coordinate for the alginment
+        smallestAlignment,
+        shift = {};                          // Amount to shift a given alignment
+
+    function updateAlignment(v) {
+      xss[alignment][v] += shift[alignment];
+    }
+
+    var smallest = Number.POSITIVE_INFINITY;
+    for (var alignment in xss) {
+      var xs = xss[alignment];
+      min[alignment] = findMinCoord(g, layering, xs);
+      max[alignment] = findMaxCoord(g, layering, xs);
+      var w = max[alignment] - min[alignment];
+      if (w < smallest) {
+        smallest = w;
+        smallestAlignment = alignment;
+      }
+    }
+
+    // Determine how much to adjust positioning for each alignment
+    ['u', 'd'].forEach(function(vertDir) {
+      ['l', 'r'].forEach(function(horizDir) {
+        var alignment = vertDir + horizDir;
+        shift[alignment] = horizDir === 'l'
+            ? min[smallestAlignment] - min[alignment]
+            : max[smallestAlignment] - max[alignment];
+      });
+    });
+
+    // Find average of medians for xss array
+    for (alignment in xss) {
+      g.eachNode(updateAlignment);
+    }
+  }
+
+  function flipHorizontally(xs) {
+    for (var u in xs) {
+      xs[u] = -xs[u];
+    }
+  }
+
+  function reverseInnerOrder(layering) {
+    layering.forEach(function(layer) {
+      layer.reverse();
+    });
+  }
+
+  function width(g, u) {
+    switch (g.graph().rankDir) {
+      case 'LR': return g.node(u).height;
+      case 'RL': return g.node(u).height;
+      default:   return g.node(u).width;
+    }
+  }
+
+  function height(g, u) {
+    switch(g.graph().rankDir) {
+      case 'LR': return g.node(u).width;
+      case 'RL': return g.node(u).width;
+      default:   return g.node(u).height;
+    }
+  }
+
+  function sep(g, u) {
+    if (config.universalSep !== null) {
+      return config.universalSep;
+    }
+    var w = width(g, u);
+    var s = g.node(u).dummy ? config.edgeSep : config.nodeSep;
+    return (w + s) / 2;
+  }
+
+  function posX(g, u, x) {
+    if (g.graph().rankDir === 'LR' || g.graph().rankDir === 'RL') {
+      if (arguments.length < 3) {
+        return g.node(u).y;
+      } else {
+        g.node(u).y = x;
+      }
+    } else {
+      if (arguments.length < 3) {
+        return g.node(u).x;
+      } else {
+        g.node(u).x = x;
+      }
+    }
+  }
+
+  function posXDebug(name, g, u, x) {
+    if (g.graph().rankDir === 'LR' || g.graph().rankDir === 'RL') {
+      if (arguments.length < 3) {
+        return g.node(u)[name];
+      } else {
+        g.node(u)[name] = x;
+      }
+    } else {
+      if (arguments.length < 3) {
+        return g.node(u)[name];
+      } else {
+        g.node(u)[name] = x;
+      }
+    }
+  }
+
+  function posY(g, u, y) {
+    if (g.graph().rankDir === 'LR' || g.graph().rankDir === 'RL') {
+      if (arguments.length < 3) {
+        return g.node(u).x;
+      } else {
+        g.node(u).x = y;
+      }
+    } else {
+      if (arguments.length < 3) {
+        return g.node(u).y;
+      } else {
+        g.node(u).y = y;
+      }
+    }
+  }
+
+  function debugPositioning(align, g, layering, xs) {
+    layering.forEach(function(l, li) {
+      var u, xU;
+      l.forEach(function(v) {
+        var xV = xs[v];
+        if (u) {
+          var s = sep(g, u) + sep(g, v);
+          if (xV - xU < s)
+            console.log('Position phase: sep violation. Align: ' + align + '. Layer: ' + li + '. ' +
+              'U: ' + u + ' V: ' + v + '. Actual sep: ' + (xV - xU) + ' Expected sep: ' + s);
+        }
+        u = v;
+        xU = xV;
+      });
+    });
+  }
+};
+
+},{"./util":26}],19:[function(require,module,exports){
+var util = require('./util'),
+    acyclic = require('./rank/acyclic'),
+    initRank = require('./rank/initRank'),
+    feasibleTree = require('./rank/feasibleTree'),
+    constraints = require('./rank/constraints'),
+    simplex = require('./rank/simplex'),
+    components = require('graphlib').alg.components,
+    filter = require('graphlib').filter;
+
+exports.run = run;
+exports.restoreEdges = restoreEdges;
+
+/*
+ * Heuristic function that assigns a rank to each node of the input graph with
+ * the intent of minimizing edge lengths, while respecting the `minLen`
+ * attribute of incident edges.
+ *
+ * Prerequisites:
+ *
+ *  * Each edge in the input graph must have an assigned 'minLen' attribute
+ */
+function run(g, useSimplex) {
+  expandSelfLoops(g);
+
+  // If there are rank constraints on nodes, then build a new graph that
+  // encodes the constraints.
+  util.time('constraints.apply', constraints.apply)(g);
+
+  expandSidewaysEdges(g);
+
+  // Reverse edges to get an acyclic graph, we keep the graph in an acyclic
+  // state until the very end.
+  util.time('acyclic', acyclic)(g);
+
+  // Convert the graph into a flat graph for ranking
+  var flatGraph = g.filterNodes(util.filterNonSubgraphs(g));
+
+  // Assign an initial ranking using DFS.
+  initRank(flatGraph);
+
+  // For each component improve the assigned ranks.
+  components(flatGraph).forEach(function(cmpt) {
+    var subgraph = flatGraph.filterNodes(filter.nodesFromList(cmpt));
+    rankComponent(subgraph, useSimplex);
+  });
+
+  // Relax original constraints
+  util.time('constraints.relax', constraints.relax(g));
+
+  // When handling nodes with constrained ranks it is possible to end up with
+  // edges that point to previous ranks. Most of the subsequent algorithms assume
+  // that edges are pointing to successive ranks only. Here we reverse any "back
+  // edges" and mark them as such. The acyclic algorithm will reverse them as a
+  // post processing step.
+  util.time('reorientEdges', reorientEdges)(g);
+}
+
+function restoreEdges(g) {
+  acyclic.undo(g);
+}
+
+/*
+ * Expand self loops into three dummy nodes. One will sit above the incident
+ * node, one will be at the same level, and one below. The result looks like:
+ *
+ *         /--<--x--->--\
+ *     node              y
+ *         \--<--z--->--/
+ *
+ * Dummy nodes x, y, z give us the shape of a loop and node y is where we place
+ * the label.
+ *
+ * TODO: consolidate knowledge of dummy node construction.
+ * TODO: support minLen = 2
+ */
+function expandSelfLoops(g) {
+  g.eachEdge(function(e, u, v, a) {
+    if (u === v) {
+      var x = addDummyNode(g, e, u, v, a, 0, false),
+          y = addDummyNode(g, e, u, v, a, 1, true),
+          z = addDummyNode(g, e, u, v, a, 2, false);
+      g.addEdge(null, x, u, {minLen: 1, selfLoop: true});
+      g.addEdge(null, x, y, {minLen: 1, selfLoop: true});
+      g.addEdge(null, u, z, {minLen: 1, selfLoop: true});
+      g.addEdge(null, y, z, {minLen: 1, selfLoop: true});
+      g.delEdge(e);
+    }
+  });
+}
+
+function expandSidewaysEdges(g) {
+  g.eachEdge(function(e, u, v, a) {
+    if (u === v) {
+      var origEdge = a.originalEdge,
+          dummy = addDummyNode(g, origEdge.e, origEdge.u, origEdge.v, origEdge.value, 0, true);
+      g.addEdge(null, u, dummy, {minLen: 1});
+      g.addEdge(null, dummy, v, {minLen: 1});
+      g.delEdge(e);
+    }
+  });
+}
+
+function addDummyNode(g, e, u, v, a, index, isLabel) {
+  return g.addNode(null, {
+    width: isLabel ? a.width : 0,
+    height: isLabel ? a.height : 0,
+    edge: { id: e, source: u, target: v, attrs: a },
+    dummy: true,
+    index: index
+  });
+}
+
+function reorientEdges(g) {
+  g.eachEdge(function(e, u, v, value) {
+    if (g.node(u).rank > g.node(v).rank) {
+      g.delEdge(e);
+      value.reversed = true;
+      g.addEdge(e, v, u, value);
+    }
+  });
+}
+
+function rankComponent(subgraph, useSimplex) {
+  var spanningTree = feasibleTree(subgraph);
+
+  if (useSimplex) {
+    util.log(1, 'Using network simplex for ranking');
+    simplex(subgraph, spanningTree);
+  }
+  normalize(subgraph);
+}
+
+function normalize(g) {
+  var m = util.min(g.nodes().map(function(u) { return g.node(u).rank; }));
+  g.eachNode(function(u, node) { node.rank -= m; });
+}
+
+},{"./rank/acyclic":20,"./rank/constraints":21,"./rank/feasibleTree":22,"./rank/initRank":23,"./rank/simplex":25,"./util":26,"graphlib":28}],20:[function(require,module,exports){
+var util = require('../util');
+
+module.exports = acyclic;
+module.exports.undo = undo;
+
+/*
+ * This function takes a directed graph that may have cycles and reverses edges
+ * as appropriate to break these cycles. Each reversed edge is assigned a
+ * `reversed` attribute with the value `true`.
+ *
+ * There should be no self loops in the graph.
+ */
+function acyclic(g) {
+  var onStack = {},
+      visited = {},
+      reverseCount = 0;
+  
+  function dfs(u) {
+    if (u in visited) return;
+    visited[u] = onStack[u] = true;
+    g.outEdges(u).forEach(function(e) {
+      var t = g.target(e),
+          value;
+
+      if (u === t) {
+        console.error('Warning: found self loop "' + e + '" for node "' + u + '"');
+      } else if (t in onStack) {
+        value = g.edge(e);
+        g.delEdge(e);
+        value.reversed = true;
+        ++reverseCount;
+        g.addEdge(e, t, u, value);
+      } else {
+        dfs(t);
+      }
+    });
+
+    delete onStack[u];
+  }
+
+  g.eachNode(function(u) { dfs(u); });
+
+  util.log(2, 'Acyclic Phase: reversed ' + reverseCount + ' edge(s)');
+
+  return reverseCount;
+}
+
+/*
+ * Given a graph that has had the acyclic operation applied, this function
+ * undoes that operation. More specifically, any edge with the `reversed`
+ * attribute is again reversed to restore the original direction of the edge.
+ */
+function undo(g) {
+  g.eachEdge(function(e, s, t, a) {
+    if (a.reversed) {
+      delete a.reversed;
+      g.delEdge(e);
+      g.addEdge(e, t, s, a);
+    }
+  });
+}
+
+},{"../util":26}],21:[function(require,module,exports){
+exports.apply = function(g) {
+  function dfs(sg) {
+    var rankSets = {};
+    g.children(sg).forEach(function(u) {
+      if (g.children(u).length) {
+        dfs(u);
+        return;
+      }
+
+      var value = g.node(u),
+          prefRank = value.prefRank;
+      if (prefRank !== undefined) {
+        if (!checkSupportedPrefRank(prefRank)) { return; }
+
+        if (!(prefRank in rankSets)) {
+          rankSets.prefRank = [u];
+        } else {
+          rankSets.prefRank.push(u);
+        }
+
+        var newU = rankSets[prefRank];
+        if (newU === undefined) {
+          newU = rankSets[prefRank] = g.addNode(null, { originalNodes: [] });
+          g.parent(newU, sg);
+        }
+
+        redirectInEdges(g, u, newU, prefRank === 'min');
+        redirectOutEdges(g, u, newU, prefRank === 'max');
+
+        // Save original node and remove it from reduced graph
+        g.node(newU).originalNodes.push({ u: u, value: value, parent: sg });
+        g.delNode(u);
+      }
+    });
+
+    addLightEdgesFromMinNode(g, sg, rankSets.min);
+    addLightEdgesToMaxNode(g, sg, rankSets.max);
+  }
+
+  dfs(null);
+};
+
+function checkSupportedPrefRank(prefRank) {
+  if (prefRank !== 'min' && prefRank !== 'max' && prefRank.indexOf('same_') !== 0) {
+    console.error('Unsupported rank type: ' + prefRank);
+    return false;
+  }
+  return true;
+}
+
+function redirectInEdges(g, u, newU, reverse) {
+  g.inEdges(u).forEach(function(e) {
+    var origValue = g.edge(e),
+        value;
+    if (origValue.originalEdge) {
+      value = origValue;
+    } else {
+      value =  {
+        originalEdge: { e: e, u: g.source(e), v: g.target(e), value: origValue },
+        minLen: g.edge(e).minLen
+      };
+    }
+
+    // Do not reverse edges for self-loops.
+    if (origValue.selfLoop) {
+      reverse = false;
+    }
+
+    if (reverse) {
+      // Ensure that all edges to min are reversed
+      g.addEdge(null, newU, g.source(e), value);
+      value.reversed = true;
+    } else {
+      g.addEdge(null, g.source(e), newU, value);
+    }
+  });
+}
+
+function redirectOutEdges(g, u, newU, reverse) {
+  g.outEdges(u).forEach(function(e) {
+    var origValue = g.edge(e),
+        value;
+    if (origValue.originalEdge) {
+      value = origValue;
+    } else {
+      value =  {
+        originalEdge: { e: e, u: g.source(e), v: g.target(e), value: origValue },
+        minLen: g.edge(e).minLen
+      };
+    }
+
+    // Do not reverse edges for self-loops.
+    if (origValue.selfLoop) {
+      reverse = false;
+    }
+
+    if (reverse) {
+      // Ensure that all edges from max are reversed
+      g.addEdge(null, g.target(e), newU, value);
+      value.reversed = true;
+    } else {
+      g.addEdge(null, newU, g.target(e), value);
+    }
+  });
+}
+
+function addLightEdgesFromMinNode(g, sg, minNode) {
+  if (minNode !== undefined) {
+    g.children(sg).forEach(function(u) {
+      // The dummy check ensures we don't add an edge if the node is involved
+      // in a self loop or sideways edge.
+      if (u !== minNode && !g.outEdges(minNode, u).length && !g.node(u).dummy) {
+        g.addEdge(null, minNode, u, { minLen: 0 });
+      }
+    });
+  }
+}
+
+function addLightEdgesToMaxNode(g, sg, maxNode) {
+  if (maxNode !== undefined) {
+    g.children(sg).forEach(function(u) {
+      // The dummy check ensures we don't add an edge if the node is involved
+      // in a self loop or sideways edge.
+      if (u !== maxNode && !g.outEdges(u, maxNode).length && !g.node(u).dummy) {
+        g.addEdge(null, u, maxNode, { minLen: 0 });
+      }
+    });
+  }
+}
+
+/*
+ * This function "relaxes" the constraints applied previously by the "apply"
+ * function. It expands any nodes that were collapsed and assigns the rank of
+ * the collapsed node to each of the expanded nodes. It also restores the
+ * original edges and removes any dummy edges pointing at the collapsed nodes.
+ *
+ * Note that the process of removing collapsed nodes also removes dummy edges
+ * automatically.
+ */
+exports.relax = function(g) {
+  // Save original edges
+  var originalEdges = [];
+  g.eachEdge(function(e, u, v, value) {
+    var originalEdge = value.originalEdge;
+    if (originalEdge) {
+      originalEdges.push(originalEdge);
+    }
+  });
+
+  // Expand collapsed nodes
+  g.eachNode(function(u, value) {
+    var originalNodes = value.originalNodes;
+    if (originalNodes) {
+      originalNodes.forEach(function(originalNode) {
+        originalNode.value.rank = value.rank;
+        g.addNode(originalNode.u, originalNode.value);
+        g.parent(originalNode.u, originalNode.parent);
+      });
+      g.delNode(u);
+    }
+  });
+
+  // Restore original edges
+  originalEdges.forEach(function(edge) {
+    g.addEdge(edge.e, edge.u, edge.v, edge.value);
+  });
+};
+
+},{}],22:[function(require,module,exports){
+/* jshint -W079 */
+var Set = require('cp-data').Set,
+/* jshint +W079 */
+    Digraph = require('graphlib').Digraph,
+    util = require('../util');
+
+module.exports = feasibleTree;
+
+/*
+ * Given an acyclic graph with each node assigned a `rank` attribute, this
+ * function constructs and returns a spanning tree. This function may reduce
+ * the length of some edges from the initial rank assignment while maintaining
+ * the `minLen` specified by each edge.
+ *
+ * Prerequisites:
+ *
+ * * The input graph is acyclic
+ * * Each node in the input graph has an assigned `rank` attribute
+ * * Each edge in the input graph has an assigned `minLen` attribute
+ *
+ * Outputs:
+ *
+ * A feasible spanning tree for the input graph (i.e. a spanning tree that
+ * respects each graph edge's `minLen` attribute) represented as a Digraph with
+ * a `root` attribute on graph.
+ *
+ * Nodes have the same id and value as that in the input graph.
+ *
+ * Edges in the tree have arbitrarily assigned ids. The attributes for edges
+ * include `reversed`. `reversed` indicates that the edge is a
+ * back edge in the input graph.
+ */
+function feasibleTree(g) {
+  var remaining = new Set(g.nodes()),
+      tree = new Digraph();
+
+  if (remaining.size() === 1) {
+    var root = g.nodes()[0];
+    tree.addNode(root, {});
+    tree.graph({ root: root });
+    return tree;
+  }
+
+  function addTightEdges(v) {
+    var continueToScan = true;
+    g.predecessors(v).forEach(function(u) {
+      if (remaining.has(u) && !slack(g, u, v)) {
+        if (remaining.has(v)) {
+          tree.addNode(v, {});
+          remaining.remove(v);
+          tree.graph({ root: v });
+        }
+
+        tree.addNode(u, {});
+        tree.addEdge(null, u, v, { reversed: true });
+        remaining.remove(u);
+        addTightEdges(u);
+        continueToScan = false;
+      }
+    });
+
+    g.successors(v).forEach(function(w)  {
+      if (remaining.has(w) && !slack(g, v, w)) {
+        if (remaining.has(v)) {
+          tree.addNode(v, {});
+          remaining.remove(v);
+          tree.graph({ root: v });
+        }
+
+        tree.addNode(w, {});
+        tree.addEdge(null, v, w, {});
+        remaining.remove(w);
+        addTightEdges(w);
+        continueToScan = false;
+      }
+    });
+    return continueToScan;
+  }
+
+  function createTightEdge() {
+    var minSlack = Number.MAX_VALUE;
+    remaining.keys().forEach(function(v) {
+      g.predecessors(v).forEach(function(u) {
+        if (!remaining.has(u)) {
+          var edgeSlack = slack(g, u, v);
+          if (Math.abs(edgeSlack) < Math.abs(minSlack)) {
+            minSlack = -edgeSlack;
+          }
+        }
+      });
+
+      g.successors(v).forEach(function(w) {
+        if (!remaining.has(w)) {
+          var edgeSlack = slack(g, v, w);
+          if (Math.abs(edgeSlack) < Math.abs(minSlack)) {
+            minSlack = edgeSlack;
+          }
+        }
+      });
+    });
+
+    tree.eachNode(function(u) { g.node(u).rank -= minSlack; });
+  }
+
+  while (remaining.size()) {
+    var nodesToSearch = !tree.order() ? remaining.keys() : tree.nodes();
+    for (var i = 0, il = nodesToSearch.length;
+         i < il && addTightEdges(nodesToSearch[i]);
+         ++i);
+    if (remaining.size()) {
+      createTightEdge();
+    }
+  }
+
+  return tree;
+}
+
+function slack(g, u, v) {
+  var rankDiff = g.node(v).rank - g.node(u).rank;
+  var maxMinLen = util.max(g.outEdges(u, v)
+                            .map(function(e) { return g.edge(e).minLen; }));
+  return rankDiff - maxMinLen;
+}
+
+},{"../util":26,"cp-data":5,"graphlib":28}],23:[function(require,module,exports){
+var util = require('../util'),
+    topsort = require('graphlib').alg.topsort;
+
+module.exports = initRank;
+
+/*
+ * Assigns a `rank` attribute to each node in the input graph and ensures that
+ * this rank respects the `minLen` attribute of incident edges.
+ *
+ * Prerequisites:
+ *
+ *  * The input graph must be acyclic
+ *  * Each edge in the input graph must have an assigned 'minLen' attribute
+ */
+function initRank(g) {
+  var sorted = topsort(g);
+
+  sorted.forEach(function(u) {
+    var inEdges = g.inEdges(u);
+    if (inEdges.length === 0) {
+      g.node(u).rank = 0;
+      return;
+    }
+
+    var minLens = inEdges.map(function(e) {
+      return g.node(g.source(e)).rank + g.edge(e).minLen;
+    });
+    g.node(u).rank = util.max(minLens);
+  });
+}
+
+},{"../util":26,"graphlib":28}],24:[function(require,module,exports){
+module.exports = {
+  slack: slack
+};
+
+/*
+ * A helper to calculate the slack between two nodes (`u` and `v`) given a
+ * `minLen` constraint. The slack represents how much the distance between `u`
+ * and `v` could shrink while maintaining the `minLen` constraint. If the value
+ * is negative then the constraint is currently violated.
+ *
+  This function requires that `u` and `v` are in `graph` and they both have a
+  `rank` attribute.
+ */
+function slack(graph, u, v, minLen) {
+  return Math.abs(graph.node(u).rank - graph.node(v).rank) - minLen;
+}
+
+},{}],25:[function(require,module,exports){
+var util = require('../util'),
+    rankUtil = require('./rankUtil');
+
+module.exports = simplex;
+
+function simplex(graph, spanningTree) {
+  // The network simplex algorithm repeatedly replaces edges of
+  // the spanning tree with negative cut values until no such
+  // edge exists.
+  initCutValues(graph, spanningTree);
+  while (true) {
+    var e = leaveEdge(spanningTree);
+    if (e === null) break;
+    var f = enterEdge(graph, spanningTree, e);
+    exchange(graph, spanningTree, e, f);
+  }
+}
+
+/*
+ * Set the cut values of edges in the spanning tree by a depth-first
+ * postorder traversal.  The cut value corresponds to the cost, in
+ * terms of a ranking's edge length sum, of lengthening an edge.
+ * Negative cut values typically indicate edges that would yield a
+ * smaller edge length sum if they were lengthened.
+ */
+function initCutValues(graph, spanningTree) {
+  computeLowLim(spanningTree);
+
+  spanningTree.eachEdge(function(id, u, v, treeValue) {
+    treeValue.cutValue = 0;
+  });
+
+  // Propagate cut values up the tree.
+  function dfs(n) {
+    var children = spanningTree.successors(n);
+    for (var c in children) {
+      var child = children[c];
+      dfs(child);
+    }
+    if (n !== spanningTree.graph().root) {
+      setCutValue(graph, spanningTree, n);
+    }
+  }
+  dfs(spanningTree.graph().root);
+}
+
+/*
+ * Perform a DFS postorder traversal, labeling each node v with
+ * its traversal order 'lim(v)' and the minimum traversal number
+ * of any of its descendants 'low(v)'.  This provides an efficient
+ * way to test whether u is an ancestor of v since
+ * low(u) <= lim(v) <= lim(u) if and only if u is an ancestor.
+ */
+function computeLowLim(tree) {
+  var postOrderNum = 0;
+  
+  function dfs(n) {
+    var children = tree.successors(n);
+    var low = postOrderNum;
+    for (var c in children) {
+      var child = children[c];
+      dfs(child);
+      low = Math.min(low, tree.node(child).low);
+    }
+    tree.node(n).low = low;
+    tree.node(n).lim = postOrderNum++;
+  }
+
+  dfs(tree.graph().root);
+}
+
+/*
+ * To compute the cut value of the edge parent -> child, we consider
+ * it and any other graph edges to or from the child.
+ *          parent
+ *             |
+ *           child
+ *          /      \
+ *         u        v
+ */
+function setCutValue(graph, tree, child) {
+  var parentEdge = tree.inEdges(child)[0];
+
+  // List of child's children in the spanning tree.
+  var grandchildren = [];
+  var grandchildEdges = tree.outEdges(child);
+  for (var gce in grandchildEdges) {
+    grandchildren.push(tree.target(grandchildEdges[gce]));
+  }
+
+  var cutValue = 0;
+
+  // TODO: Replace unit increment/decrement with edge weights.
+  var E = 0;    // Edges from child to grandchild's subtree.
+  var F = 0;    // Edges to child from grandchild's subtree.
+  var G = 0;    // Edges from child to nodes outside of child's subtree.
+  var H = 0;    // Edges from nodes outside of child's subtree to child.
+
+  // Consider all graph edges from child.
+  var outEdges = graph.outEdges(child);
+  var gc;
+  for (var oe in outEdges) {
+    var succ = graph.target(outEdges[oe]);
+    for (gc in grandchildren) {
+      if (inSubtree(tree, succ, grandchildren[gc])) {
+        E++;
+      }
+    }
+    if (!inSubtree(tree, succ, child)) {
+      G++;
+    }
+  }
+
+  // Consider all graph edges to child.
+  var inEdges = graph.inEdges(child);
+  for (var ie in inEdges) {
+    var pred = graph.source(inEdges[ie]);
+    for (gc in grandchildren) {
+      if (inSubtree(tree, pred, grandchildren[gc])) {
+        F++;
+      }
+    }
+    if (!inSubtree(tree, pred, child)) {
+      H++;
+    }
+  }
+
+  // Contributions depend on the alignment of the parent -> child edge
+  // and the child -> u or v edges.
+  var grandchildCutSum = 0;
+  for (gc in grandchildren) {
+    var cv = tree.edge(grandchildEdges[gc]).cutValue;
+    if (!tree.edge(grandchildEdges[gc]).reversed) {
+      grandchildCutSum += cv;
+    } else {
+      grandchildCutSum -= cv;
+    }
+  }
+
+  if (!tree.edge(parentEdge).reversed) {
+    cutValue += grandchildCutSum - E + F - G + H;
+  } else {
+    cutValue -= grandchildCutSum - E + F - G + H;
+  }
+
+  tree.edge(parentEdge).cutValue = cutValue;
+}
+
+/*
+ * Return whether n is a node in the subtree with the given
+ * root.
+ */
+function inSubtree(tree, n, root) {
+  return (tree.node(root).low <= tree.node(n).lim &&
+          tree.node(n).lim <= tree.node(root).lim);
+}
+
+/*
+ * Return an edge from the tree with a negative cut value, or null if there
+ * is none.
+ */
+function leaveEdge(tree) {
+  var edges = tree.edges();
+  for (var n in edges) {
+    var e = edges[n];
+    var treeValue = tree.edge(e);
+    if (treeValue.cutValue < 0) {
+      return e;
+    }
+  }
+  return null;
+}
+
+/*
+ * The edge e should be an edge in the tree, with an underlying edge
+ * in the graph, with a negative cut value.  Of the two nodes incident
+ * on the edge, take the lower one.  enterEdge returns an edge with
+ * minimum slack going from outside of that node's subtree to inside
+ * of that node's subtree.
+ */
+function enterEdge(graph, tree, e) {
+  var source = tree.source(e);
+  var target = tree.target(e);
+  var lower = tree.node(target).lim < tree.node(source).lim ? target : source;
+
+  // Is the tree edge aligned with the graph edge?
+  var aligned = !tree.edge(e).reversed;
+
+  var minSlack = Number.POSITIVE_INFINITY;
+  var minSlackEdge;
+  if (aligned) {
+    graph.eachEdge(function(id, u, v, value) {
+      if (id !== e && inSubtree(tree, u, lower) && !inSubtree(tree, v, lower)) {
+        var slack = rankUtil.slack(graph, u, v, value.minLen);
+        if (slack < minSlack) {
+          minSlack = slack;
+          minSlackEdge = id;
+        }
+      }
+    });
+  } else {
+    graph.eachEdge(function(id, u, v, value) {
+      if (id !== e && !inSubtree(tree, u, lower) && inSubtree(tree, v, lower)) {
+        var slack = rankUtil.slack(graph, u, v, value.minLen);
+        if (slack < minSlack) {
+          minSlack = slack;
+          minSlackEdge = id;
+        }
+      }
+    });
+  }
+
+  if (minSlackEdge === undefined) {
+    var outside = [];
+    var inside = [];
+    graph.eachNode(function(id) {
+      if (!inSubtree(tree, id, lower)) {
+        outside.push(id);
+      } else {
+        inside.push(id);
+      }
+    });
+    throw new Error('No edge found from outside of tree to inside');
+  }
+
+  return minSlackEdge;
+}
+
+/*
+ * Replace edge e with edge f in the tree, recalculating the tree root,
+ * the nodes' low and lim properties and the edges' cut values.
+ */
+function exchange(graph, tree, e, f) {
+  tree.delEdge(e);
+  var source = graph.source(f);
+  var target = graph.target(f);
+
+  // Redirect edges so that target is the root of its subtree.
+  function redirect(v) {
+    var edges = tree.inEdges(v);
+    for (var i in edges) {
+      var e = edges[i];
+      var u = tree.source(e);
+      var value = tree.edge(e);
+      redirect(u);
+      tree.delEdge(e);
+      value.reversed = !value.reversed;
+      tree.addEdge(e, v, u, value);
+    }
+  }
+
+  redirect(target);
+
+  var root = source;
+  var edges = tree.inEdges(root);
+  while (edges.length > 0) {
+    root = tree.source(edges[0]);
+    edges = tree.inEdges(root);
+  }
+
+  tree.graph().root = root;
+
+  tree.addEdge(null, source, target, {cutValue: 0});
+
+  initCutValues(graph, tree);
+
+  adjustRanks(graph, tree);
+}
+
+/*
+ * Reset the ranks of all nodes based on the current spanning tree.
+ * The rank of the tree's root remains unchanged, while all other
+ * nodes are set to the sum of minimum length constraints along
+ * the path from the root.
+ */
+function adjustRanks(graph, tree) {
+  function dfs(p) {
+    var children = tree.successors(p);
+    children.forEach(function(c) {
+      var minLen = minimumLength(graph, p, c);
+      graph.node(c).rank = graph.node(p).rank + minLen;
+      dfs(c);
+    });
+  }
+
+  dfs(tree.graph().root);
+}
+
+/*
+ * If u and v are connected by some edges in the graph, return the
+ * minimum length of those edges, as a positive number if v succeeds
+ * u and as a negative number if v precedes u.
+ */
+function minimumLength(graph, u, v) {
+  var outEdges = graph.outEdges(u, v);
+  if (outEdges.length > 0) {
+    return util.max(outEdges.map(function(e) {
+      return graph.edge(e).minLen;
+    }));
+  }
+
+  var inEdges = graph.inEdges(u, v);
+  if (inEdges.length > 0) {
+    return -util.max(inEdges.map(function(e) {
+      return graph.edge(e).minLen;
+    }));
+  }
+}
+
+},{"../util":26,"./rankUtil":24}],26:[function(require,module,exports){
+/*
+ * Returns the smallest value in the array.
+ */
+exports.min = function(values) {
+  return Math.min.apply(Math, values);
+};
+
+/*
+ * Returns the largest value in the array.
+ */
+exports.max = function(values) {
+  return Math.max.apply(Math, values);
+};
+
+/*
+ * Returns `true` only if `f(x)` is `true` for all `x` in `xs`. Otherwise
+ * returns `false`. This function will return immediately if it finds a
+ * case where `f(x)` does not hold.
+ */
+exports.all = function(xs, f) {
+  for (var i = 0; i < xs.length; ++i) {
+    if (!f(xs[i])) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/*
+ * Accumulates the sum of elements in the given array using the `+` operator.
+ */
+exports.sum = function(values) {
+  return values.reduce(function(acc, x) { return acc + x; }, 0);
+};
+
+/*
+ * Returns an array of all values in the given object.
+ */
+exports.values = function(obj) {
+  return Object.keys(obj).map(function(k) { return obj[k]; });
+};
+
+exports.shuffle = function(array) {
+  for (i = array.length - 1; i > 0; --i) {
+    var j = Math.floor(Math.random() * (i + 1));
+    var aj = array[j];
+    array[j] = array[i];
+    array[i] = aj;
+  }
+};
+
+exports.propertyAccessor = function(self, config, field, setHook) {
+  return function(x) {
+    if (!arguments.length) return config[field];
+    config[field] = x;
+    if (setHook) setHook(x);
+    return self;
+  };
+};
+
+/*
+ * Given a layered, directed graph with `rank` and `order` node attributes,
+ * this function returns an array of ordered ranks. Each rank contains an array
+ * of the ids of the nodes in that rank in the order specified by the `order`
+ * attribute.
+ */
+exports.ordering = function(g) {
+  var ordering = [];
+  g.eachNode(function(u, value) {
+    var rank = ordering[value.rank] || (ordering[value.rank] = []);
+    rank[value.order] = u;
+  });
+  return ordering;
+};
+
+/*
+ * A filter that can be used with `filterNodes` to get a graph that only
+ * includes nodes that do not contain others nodes.
+ */
+exports.filterNonSubgraphs = function(g) {
+  return function(u) {
+    return g.children(u).length === 0;
+  };
+};
+
+/*
+ * Returns a new function that wraps `func` with a timer. The wrapper logs the
+ * time it takes to execute the function.
+ *
+ * The timer will be enabled provided `log.level >= 1`.
+ */
+function time(name, func) {
+  return function() {
+    var start = new Date().getTime();
+    try {
+      return func.apply(null, arguments);
+    } finally {
+      log(1, name + ' time: ' + (new Date().getTime() - start) + 'ms');
+    }
+  };
+}
+time.enabled = false;
+
+exports.time = time;
+
+/*
+ * A global logger with the specification `log(level, message, ...)` that
+ * will log a message to the console if `log.level >= level`.
+ */
+function log(level) {
+  if (log.level >= level) {
+    console.log.apply(console, Array.prototype.slice.call(arguments, 1));
+  }
+}
+log.level = 0;
+
+exports.log = log;
+
+},{}],27:[function(require,module,exports){
+module.exports = '0.4.5';
+
+},{}],28:[function(require,module,exports){
+exports.Graph = require("./lib/Graph");
+exports.Digraph = require("./lib/Digraph");
+exports.CGraph = require("./lib/CGraph");
+exports.CDigraph = require("./lib/CDigraph");
+require("./lib/graph-converters");
+
+exports.alg = {
+  isAcyclic: require("./lib/alg/isAcyclic"),
+  components: require("./lib/alg/components"),
+  dijkstra: require("./lib/alg/dijkstra"),
+  dijkstraAll: require("./lib/alg/dijkstraAll"),
+  findCycles: require("./lib/alg/findCycles"),
+  floydWarshall: require("./lib/alg/floydWarshall"),
+  postorder: require("./lib/alg/postorder"),
+  preorder: require("./lib/alg/preorder"),
+  prim: require("./lib/alg/prim"),
+  tarjan: require("./lib/alg/tarjan"),
+  topsort: require("./lib/alg/topsort")
+};
+
+exports.converter = {
+  json: require("./lib/converter/json.js")
+};
+
+var filter = require("./lib/filter");
+exports.filter = {
+  all: filter.all,
+  nodesFromList: filter.nodesFromList
+};
+
+exports.version = require("./lib/version");
+
+},{"./lib/CDigraph":30,"./lib/CGraph":31,"./lib/Digraph":32,"./lib/Graph":33,"./lib/alg/components":34,"./lib/alg/dijkstra":35,"./lib/alg/dijkstraAll":36,"./lib/alg/findCycles":37,"./lib/alg/floydWarshall":38,"./lib/alg/isAcyclic":39,"./lib/alg/postorder":40,"./lib/alg/preorder":41,"./lib/alg/prim":42,"./lib/alg/tarjan":43,"./lib/alg/topsort":44,"./lib/converter/json.js":46,"./lib/filter":47,"./lib/graph-converters":48,"./lib/version":50}],29:[function(require,module,exports){
+/* jshint -W079 */
+var Set = require("cp-data").Set;
+/* jshint +W079 */
+
+module.exports = BaseGraph;
+
+function BaseGraph() {
+  // The value assigned to the graph itself.
+  this._value = undefined;
+
+  // Map of node id -> { id, value }
+  this._nodes = {};
+
+  // Map of edge id -> { id, u, v, value }
+  this._edges = {};
+
+  // Used to generate a unique id in the graph
+  this._nextId = 0;
+}
+
+// Number of nodes
+BaseGraph.prototype.order = function() {
+  return Object.keys(this._nodes).length;
+};
+
+// Number of edges
+BaseGraph.prototype.size = function() {
+  return Object.keys(this._edges).length;
+};
+
+// Accessor for graph level value
+BaseGraph.prototype.graph = function(value) {
+  if (arguments.length === 0) {
+    return this._value;
+  }
+  this._value = value;
+};
+
+BaseGraph.prototype.hasNode = function(u) {
+  return u in this._nodes;
+};
+
+BaseGraph.prototype.node = function(u, value) {
+  var node = this._strictGetNode(u);
+  if (arguments.length === 1) {
+    return node.value;
+  }
+  node.value = value;
+};
+
+BaseGraph.prototype.nodes = function() {
+  var nodes = [];
+  this.eachNode(function(id) { nodes.push(id); });
+  return nodes;
+};
+
+BaseGraph.prototype.eachNode = function(func) {
+  for (var k in this._nodes) {
+    var node = this._nodes[k];
+    func(node.id, node.value);
+  }
+};
+
+BaseGraph.prototype.hasEdge = function(e) {
+  return e in this._edges;
+};
+
+BaseGraph.prototype.edge = function(e, value) {
+  var edge = this._strictGetEdge(e);
+  if (arguments.length === 1) {
+    return edge.value;
+  }
+  edge.value = value;
+};
+
+BaseGraph.prototype.edges = function() {
+  var es = [];
+  this.eachEdge(function(id) { es.push(id); });
+  return es;
+};
+
+BaseGraph.prototype.eachEdge = function(func) {
+  for (var k in this._edges) {
+    var edge = this._edges[k];
+    func(edge.id, edge.u, edge.v, edge.value);
+  }
+};
+
+BaseGraph.prototype.incidentNodes = function(e) {
+  var edge = this._strictGetEdge(e);
+  return [edge.u, edge.v];
+};
+
+BaseGraph.prototype.addNode = function(u, value) {
+  if (u === undefined || u === null) {
+    do {
+      u = "_" + (++this._nextId);
+    } while (this.hasNode(u));
+  } else if (this.hasNode(u)) {
+    throw new Error("Graph already has node '" + u + "'");
+  }
+  this._nodes[u] = { id: u, value: value };
+  return u;
+};
+
+BaseGraph.prototype.delNode = function(u) {
+  this._strictGetNode(u);
+  this.incidentEdges(u).forEach(function(e) { this.delEdge(e); }, this);
+  delete this._nodes[u];
+};
+
+// inMap and outMap are opposite sides of an incidence map. For example, for
+// Graph these would both come from the _incidentEdges map, while for Digraph
+// they would come from _inEdges and _outEdges.
+BaseGraph.prototype._addEdge = function(e, u, v, value, inMap, outMap) {
+  this._strictGetNode(u);
+  this._strictGetNode(v);
+
+  if (e === undefined || e === null) {
+    do {
+      e = "_" + (++this._nextId);
+    } while (this.hasEdge(e));
+  }
+  else if (this.hasEdge(e)) {
+    throw new Error("Graph already has edge '" + e + "'");
+  }
+
+  this._edges[e] = { id: e, u: u, v: v, value: value };
+  addEdgeToMap(inMap[v], u, e);
+  addEdgeToMap(outMap[u], v, e);
+
+  return e;
+};
+
+// See note for _addEdge regarding inMap and outMap.
+BaseGraph.prototype._delEdge = function(e, inMap, outMap) {
+  var edge = this._strictGetEdge(e);
+  delEdgeFromMap(inMap[edge.v], edge.u, e);
+  delEdgeFromMap(outMap[edge.u], edge.v, e);
+  delete this._edges[e];
+};
+
+BaseGraph.prototype.copy = function() {
+  var copy = new this.constructor();
+  copy.graph(this.graph());
+  this.eachNode(function(u, value) { copy.addNode(u, value); });
+  this.eachEdge(function(e, u, v, value) { copy.addEdge(e, u, v, value); });
+  copy._nextId = this._nextId;
+  return copy;
+};
+
+BaseGraph.prototype.filterNodes = function(filter) {
+  var copy = new this.constructor();
+  copy.graph(this.graph());
+  this.eachNode(function(u, value) {
+    if (filter(u)) {
+      copy.addNode(u, value);
+    }
+  });
+  this.eachEdge(function(e, u, v, value) {
+    if (copy.hasNode(u) && copy.hasNode(v)) {
+      copy.addEdge(e, u, v, value);
+    }
+  });
+  return copy;
+};
+
+BaseGraph.prototype._strictGetNode = function(u) {
+  var node = this._nodes[u];
+  if (node === undefined) {
+    throw new Error("Node '" + u + "' is not in graph");
+  }
+  return node;
+};
+
+BaseGraph.prototype._strictGetEdge = function(e) {
+  var edge = this._edges[e];
+  if (edge === undefined) {
+    throw new Error("Edge '" + e + "' is not in graph");
+  }
+  return edge;
+};
+
+function addEdgeToMap(map, v, e) {
+  (map[v] || (map[v] = new Set())).add(e);
+}
+
+function delEdgeFromMap(map, v, e) {
+  var vEntry = map[v];
+  vEntry.remove(e);
+  if (vEntry.size() === 0) {
+    delete map[v];
+  }
+}
+
+
+},{"cp-data":5}],30:[function(require,module,exports){
+var Digraph = require("./Digraph"),
+    compoundify = require("./compoundify");
+
+var CDigraph = compoundify(Digraph);
+
+module.exports = CDigraph;
+
+CDigraph.fromDigraph = function(src) {
+  var g = new CDigraph(),
+      graphValue = src.graph();
+
+  if (graphValue !== undefined) {
+    g.graph(graphValue);
+  }
+
+  src.eachNode(function(u, value) {
+    if (value === undefined) {
+      g.addNode(u);
+    } else {
+      g.addNode(u, value);
+    }
+  });
+  src.eachEdge(function(e, u, v, value) {
+    if (value === undefined) {
+      g.addEdge(null, u, v);
+    } else {
+      g.addEdge(null, u, v, value);
+    }
+  });
+  return g;
+};
+
+CDigraph.prototype.toString = function() {
+  return "CDigraph " + JSON.stringify(this, null, 2);
+};
+
+},{"./Digraph":32,"./compoundify":45}],31:[function(require,module,exports){
+var Graph = require("./Graph"),
+    compoundify = require("./compoundify");
+
+var CGraph = compoundify(Graph);
+
+module.exports = CGraph;
+
+CGraph.fromGraph = function(src) {
+  var g = new CGraph(),
+      graphValue = src.graph();
+
+  if (graphValue !== undefined) {
+    g.graph(graphValue);
+  }
+
+  src.eachNode(function(u, value) {
+    if (value === undefined) {
+      g.addNode(u);
+    } else {
+      g.addNode(u, value);
+    }
+  });
+  src.eachEdge(function(e, u, v, value) {
+    if (value === undefined) {
+      g.addEdge(null, u, v);
+    } else {
+      g.addEdge(null, u, v, value);
+    }
+  });
+  return g;
+};
+
+CGraph.prototype.toString = function() {
+  return "CGraph " + JSON.stringify(this, null, 2);
+};
+
+},{"./Graph":33,"./compoundify":45}],32:[function(require,module,exports){
+/*
+ * This file is organized with in the following order:
+ *
+ * Exports
+ * Graph constructors
+ * Graph queries (e.g. nodes(), edges()
+ * Graph mutators
+ * Helper functions
+ */
+
+var util = require("./util"),
+    BaseGraph = require("./BaseGraph"),
+/* jshint -W079 */
+    Set = require("cp-data").Set;
+/* jshint +W079 */
+
+module.exports = Digraph;
+
+/*
+ * Constructor to create a new directed multi-graph.
+ */
+function Digraph() {
+  BaseGraph.call(this);
+
+  /*! Map of sourceId -> {targetId -> Set of edge ids} */
+  this._inEdges = {};
+
+  /*! Map of targetId -> {sourceId -> Set of edge ids} */
+  this._outEdges = {};
+}
+
+Digraph.prototype = new BaseGraph();
+Digraph.prototype.constructor = Digraph;
+
+/*
+ * Always returns `true`.
+ */
+Digraph.prototype.isDirected = function() {
+  return true;
+};
+
+/*
+ * Returns all successors of the node with the id `u`. That is, all nodes
+ * that have the node `u` as their source are returned.
+ * 
+ * If no node `u` exists in the graph this function throws an Error.
+ *
+ * @param {String} u a node id
+ */
+Digraph.prototype.successors = function(u) {
+  this._strictGetNode(u);
+  return Object.keys(this._outEdges[u])
+               .map(function(v) { return this._nodes[v].id; }, this);
+};
+
+/*
+ * Returns all predecessors of the node with the id `u`. That is, all nodes
+ * that have the node `u` as their target are returned.
+ * 
+ * If no node `u` exists in the graph this function throws an Error.
+ *
+ * @param {String} u a node id
+ */
+Digraph.prototype.predecessors = function(u) {
+  this._strictGetNode(u);
+  return Object.keys(this._inEdges[u])
+               .map(function(v) { return this._nodes[v].id; }, this);
+};
+
+/*
+ * Returns all nodes that are adjacent to the node with the id `u`. In other
+ * words, this function returns the set of all successors and predecessors of
+ * node `u`.
+ *
+ * @param {String} u a node id
+ */
+Digraph.prototype.neighbors = function(u) {
+  return Set.union([this.successors(u), this.predecessors(u)]).keys();
+};
+
+/*
+ * Returns all nodes in the graph that have no in-edges.
+ */
+Digraph.prototype.sources = function() {
+  var self = this;
+  return this._filterNodes(function(u) {
+    // This could have better space characteristics if we had an inDegree function.
+    return self.inEdges(u).length === 0;
+  });
+};
+
+/*
+ * Returns all nodes in the graph that have no out-edges.
+ */
+Digraph.prototype.sinks = function() {
+  var self = this;
+  return this._filterNodes(function(u) {
+    // This could have better space characteristics if we have an outDegree function.
+    return self.outEdges(u).length === 0;
+  });
+};
+
+/*
+ * Returns the source node incident on the edge identified by the id `e`. If no
+ * such edge exists in the graph this function throws an Error.
+ *
+ * @param {String} e an edge id
+ */
+Digraph.prototype.source = function(e) {
+  return this._strictGetEdge(e).u;
+};
+
+/*
+ * Returns the target node incident on the edge identified by the id `e`. If no
+ * such edge exists in the graph this function throws an Error.
+ *
+ * @param {String} e an edge id
+ */
+Digraph.prototype.target = function(e) {
+  return this._strictGetEdge(e).v;
+};
+
+/*
+ * Returns an array of ids for all edges in the graph that have the node
+ * `target` as their target. If the node `target` is not in the graph this
+ * function raises an Error.
+ *
+ * Optionally a `source` node can also be specified. This causes the results
+ * to be filtered such that only edges from `source` to `target` are included.
+ * If the node `source` is specified but is not in the graph then this function
+ * raises an Error.
+ *
+ * @param {String} target the target node id
+ * @param {String} [source] an optional source node id
+ */
+Digraph.prototype.inEdges = function(target, source) {
+  this._strictGetNode(target);
+  var results = Set.union(util.values(this._inEdges[target])).keys();
+  if (arguments.length > 1) {
+    this._strictGetNode(source);
+    results = results.filter(function(e) { return this.source(e) === source; }, this);
+  }
+  return results;
+};
+
+/*
+ * Returns an array of ids for all edges in the graph that have the node
+ * `source` as their source. If the node `source` is not in the graph this
+ * function raises an Error.
+ *
+ * Optionally a `target` node may also be specified. This causes the results
+ * to be filtered such that only edges from `source` to `target` are included.
+ * If the node `target` is specified but is not in the graph then this function
+ * raises an Error.
+ *
+ * @param {String} source the source node id
+ * @param {String} [target] an optional target node id
+ */
+Digraph.prototype.outEdges = function(source, target) {
+  this._strictGetNode(source);
+  var results = Set.union(util.values(this._outEdges[source])).keys();
+  if (arguments.length > 1) {
+    this._strictGetNode(target);
+    results = results.filter(function(e) { return this.target(e) === target; }, this);
+  }
+  return results;
+};
+
+/*
+ * Returns an array of ids for all edges in the graph that have the `u` as
+ * their source or their target. If the node `u` is not in the graph this
+ * function raises an Error.
+ *
+ * Optionally a `v` node may also be specified. This causes the results to be
+ * filtered such that only edges between `u` and `v` - in either direction -
+ * are included. IF the node `v` is specified but not in the graph then this
+ * function raises an Error.
+ *
+ * @param {String} u the node for which to find incident edges
+ * @param {String} [v] option node that must be adjacent to `u`
+ */
+Digraph.prototype.incidentEdges = function(u, v) {
+  if (arguments.length > 1) {
+    return Set.union([this.outEdges(u, v), this.outEdges(v, u)]).keys();
+  } else {
+    return Set.union([this.inEdges(u), this.outEdges(u)]).keys();
+  }
+};
+
+/*
+ * Returns a string representation of this graph.
+ */
+Digraph.prototype.toString = function() {
+  return "Digraph " + JSON.stringify(this, null, 2);
+};
+
+/*
+ * Adds a new node with the id `u` to the graph and assigns it the value
+ * `value`. If a node with the id is already a part of the graph this function
+ * throws an Error.
+ *
+ * @param {String} u a node id
+ * @param {Object} [value] an optional value to attach to the node
+ */
+Digraph.prototype.addNode = function(u, value) {
+  u = BaseGraph.prototype.addNode.call(this, u, value);
+  this._inEdges[u] = {};
+  this._outEdges[u] = {};
+  return u;
+};
+
+/*
+ * Removes a node from the graph that has the id `u`. Any edges incident on the
+ * node are also removed. If the graph does not contain a node with the id this
+ * function will throw an Error.
+ *
+ * @param {String} u a node id
+ */
+Digraph.prototype.delNode = function(u) {
+  BaseGraph.prototype.delNode.call(this, u);
+  delete this._inEdges[u];
+  delete this._outEdges[u];
+};
+
+/*
+ * Adds a new edge to the graph with the id `e` from a node with the id `source`
+ * to a node with an id `target` and assigns it the value `value`. This graph
+ * allows more than one edge from `source` to `target` as long as the id `e`
+ * is unique in the set of edges. If `e` is `null` the graph will assign a
+ * unique identifier to the edge.
+ *
+ * If `source` or `target` are not present in the graph this function will
+ * throw an Error.
+ *
+ * @param {String} [e] an edge id
+ * @param {String} source the source node id
+ * @param {String} target the target node id
+ * @param {Object} [value] an optional value to attach to the edge
+ */
+Digraph.prototype.addEdge = function(e, source, target, value) {
+  return BaseGraph.prototype._addEdge.call(this, e, source, target, value,
+                                           this._inEdges, this._outEdges);
+};
+
+/*
+ * Removes an edge in the graph with the id `e`. If no edge in the graph has
+ * the id `e` this function will throw an Error.
+ *
+ * @param {String} e an edge id
+ */
+Digraph.prototype.delEdge = function(e) {
+  BaseGraph.prototype._delEdge.call(this, e, this._inEdges, this._outEdges);
+};
+
+// Unlike BaseGraph.filterNodes, this helper just returns nodes that
+// satisfy a predicate.
+Digraph.prototype._filterNodes = function(pred) {
+  var filtered = [];
+  this.eachNode(function(u) {
+    if (pred(u)) {
+      filtered.push(u);
+    }
+  });
+  return filtered;
+};
+
+
+},{"./BaseGraph":29,"./util":49,"cp-data":5}],33:[function(require,module,exports){
+/*
+ * This file is organized with in the following order:
+ *
+ * Exports
+ * Graph constructors
+ * Graph queries (e.g. nodes(), edges()
+ * Graph mutators
+ * Helper functions
+ */
+
+var util = require("./util"),
+    BaseGraph = require("./BaseGraph"),
+/* jshint -W079 */
+    Set = require("cp-data").Set;
+/* jshint +W079 */
+
+module.exports = Graph;
+
+/*
+ * Constructor to create a new undirected multi-graph.
+ */
+function Graph() {
+  BaseGraph.call(this);
+
+  /*! Map of nodeId -> { otherNodeId -> Set of edge ids } */
+  this._incidentEdges = {};
+}
+
+Graph.prototype = new BaseGraph();
+Graph.prototype.constructor = Graph;
+
+/*
+ * Always returns `false`.
+ */
+Graph.prototype.isDirected = function() {
+  return false;
+};
+
+/*
+ * Returns all nodes that are adjacent to the node with the id `u`.
+ *
+ * @param {String} u a node id
+ */
+Graph.prototype.neighbors = function(u) {
+  this._strictGetNode(u);
+  return Object.keys(this._incidentEdges[u])
+               .map(function(v) { return this._nodes[v].id; }, this);
+};
+
+/*
+ * Returns an array of ids for all edges in the graph that are incident on `u`.
+ * If the node `u` is not in the graph this function raises an Error.
+ *
+ * Optionally a `v` node may also be specified. This causes the results to be
+ * filtered such that only edges between `u` and `v` are included. If the node
+ * `v` is specified but not in the graph then this function raises an Error.
+ *
+ * @param {String} u the node for which to find incident edges
+ * @param {String} [v] option node that must be adjacent to `u`
+ */
+Graph.prototype.incidentEdges = function(u, v) {
+  this._strictGetNode(u);
+  if (arguments.length > 1) {
+    this._strictGetNode(v);
+    return v in this._incidentEdges[u] ? this._incidentEdges[u][v].keys() : [];
+  } else {
+    return Set.union(util.values(this._incidentEdges[u])).keys();
+  }
+};
+
+/*
+ * Returns a string representation of this graph.
+ */
+Graph.prototype.toString = function() {
+  return "Graph " + JSON.stringify(this, null, 2);
+};
+
+/*
+ * Adds a new node with the id `u` to the graph and assigns it the value
+ * `value`. If a node with the id is already a part of the graph this function
+ * throws an Error.
+ *
+ * @param {String} u a node id
+ * @param {Object} [value] an optional value to attach to the node
+ */
+Graph.prototype.addNode = function(u, value) {
+  u = BaseGraph.prototype.addNode.call(this, u, value);
+  this._incidentEdges[u] = {};
+  return u;
+};
+
+/*
+ * Removes a node from the graph that has the id `u`. Any edges incident on the
+ * node are also removed. If the graph does not contain a node with the id this
+ * function will throw an Error.
+ *
+ * @param {String} u a node id
+ */
+Graph.prototype.delNode = function(u) {
+  BaseGraph.prototype.delNode.call(this, u);
+  delete this._incidentEdges[u];
+};
+
+/*
+ * Adds a new edge to the graph with the id `e` between a node with the id `u`
+ * and a node with an id `v` and assigns it the value `value`. This graph
+ * allows more than one edge between `u` and `v` as long as the id `e`
+ * is unique in the set of edges. If `e` is `null` the graph will assign a
+ * unique identifier to the edge.
+ *
+ * If `u` or `v` are not present in the graph this function will throw an
+ * Error.
+ *
+ * @param {String} [e] an edge id
+ * @param {String} u the node id of one of the adjacent nodes
+ * @param {String} v the node id of the other adjacent node
+ * @param {Object} [value] an optional value to attach to the edge
+ */
+Graph.prototype.addEdge = function(e, u, v, value) {
+  return BaseGraph.prototype._addEdge.call(this, e, u, v, value,
+                                           this._incidentEdges, this._incidentEdges);
+};
+
+/*
+ * Removes an edge in the graph with the id `e`. If no edge in the graph has
+ * the id `e` this function will throw an Error.
+ *
+ * @param {String} e an edge id
+ */
+Graph.prototype.delEdge = function(e) {
+  BaseGraph.prototype._delEdge.call(this, e, this._incidentEdges, this._incidentEdges);
+};
+
+
+},{"./BaseGraph":29,"./util":49,"cp-data":5}],34:[function(require,module,exports){
+/* jshint -W079 */
+var Set = require("cp-data").Set;
+/* jshint +W079 */
+
+module.exports = components;
+
+/**
+ * Finds all [connected components][] in a graph and returns an array of these
+ * components. Each component is itself an array that contains the ids of nodes
+ * in the component.
+ *
+ * This function only works with undirected Graphs.
+ *
+ * [connected components]: http://en.wikipedia.org/wiki/Connected_component_(graph_theory)
+ *
+ * @param {Graph} g the graph to search for components
+ */
+function components(g) {
+  var results = [];
+  var visited = new Set();
+
+  function dfs(v, component) {
+    if (!visited.has(v)) {
+      visited.add(v);
+      component.push(v);
+      g.neighbors(v).forEach(function(w) {
+        dfs(w, component);
+      });
+    }
+  }
+
+  g.nodes().forEach(function(v) {
+    var component = [];
+    dfs(v, component);
+    if (component.length > 0) {
+      results.push(component);
+    }
+  });
+
+  return results;
+}
+
+},{"cp-data":5}],35:[function(require,module,exports){
+var PriorityQueue = require("cp-data").PriorityQueue;
+
+module.exports = dijkstra;
+
+/**
+ * This function is an implementation of [Dijkstra's algorithm][] which finds
+ * the shortest path from **source** to all other nodes in **g**. This
+ * function returns a map of `u -> { distance, predecessor }`. The distance
+ * property holds the sum of the weights from **source** to `u` along the
+ * shortest path or `Number.POSITIVE_INFINITY` if there is no path from
+ * **source**. The predecessor property can be used to walk the individual
+ * elements of the path from **source** to **u** in reverse order.
+ *
+ * This function takes an optional `weightFunc(e)` which returns the
+ * weight of the edge `e`. If no weightFunc is supplied then each edge is
+ * assumed to have a weight of 1. This function throws an Error if any of
+ * the traversed edges have a negative edge weight.
+ *
+ * This function takes an optional `incidentFunc(u)` which returns the ids of
+ * all edges incident to the node `u` for the purposes of shortest path
+ * traversal. By default this function uses the `g.outEdges` for Digraphs and
+ * `g.incidentEdges` for Graphs.
+ *
+ * This function takes `O((|E| + |V|) * log |V|)` time.
+ *
+ * [Dijkstra's algorithm]: http://en.wikipedia.org/wiki/Dijkstra%27s_algorithm
+ *
+ * @param {Graph} g the graph to search for shortest paths from **source**
+ * @param {Object} source the source from which to start the search
+ * @param {Function} [weightFunc] optional weight function
+ * @param {Function} [incidentFunc] optional incident function
+ */
+function dijkstra(g, source, weightFunc, incidentFunc) {
+  var results = {},
+      pq = new PriorityQueue();
+
+  function updateNeighbors(e) {
+    var incidentNodes = g.incidentNodes(e),
+        v = incidentNodes[0] !== u ? incidentNodes[0] : incidentNodes[1],
+        vEntry = results[v],
+        weight = weightFunc(e),
+        distance = uEntry.distance + weight;
+
+    if (weight < 0) {
+      throw new Error("dijkstra does not allow negative edge weights. Bad edge: " + e + " Weight: " + weight);
+    }
+
+    if (distance < vEntry.distance) {
+      vEntry.distance = distance;
+      vEntry.predecessor = u;
+      pq.decrease(v, distance);
+    }
+  }
+
+  weightFunc = weightFunc || function() { return 1; };
+  incidentFunc = incidentFunc || (g.isDirected()
+      ? function(u) { return g.outEdges(u); }
+      : function(u) { return g.incidentEdges(u); });
+
+  g.eachNode(function(u) {
+    var distance = u === source ? 0 : Number.POSITIVE_INFINITY;
+    results[u] = { distance: distance };
+    pq.add(u, distance);
+  });
+
+  var u, uEntry;
+  while (pq.size() > 0) {
+    u = pq.removeMin();
+    uEntry = results[u];
+    if (uEntry.distance === Number.POSITIVE_INFINITY) {
+      break;
+    }
+
+    incidentFunc(u).forEach(updateNeighbors);
+  }
+
+  return results;
+}
+
+},{"cp-data":5}],36:[function(require,module,exports){
+var dijkstra = require("./dijkstra");
+
+module.exports = dijkstraAll;
+
+/**
+ * This function finds the shortest path from each node to every other
+ * reachable node in the graph. It is similar to [alg.dijkstra][], but
+ * instead of returning a single-source array, it returns a mapping of
+ * of `source -> alg.dijksta(g, source, weightFunc, incidentFunc)`.
+ *
+ * This function takes an optional `weightFunc(e)` which returns the
+ * weight of the edge `e`. If no weightFunc is supplied then each edge is
+ * assumed to have a weight of 1. This function throws an Error if any of
+ * the traversed edges have a negative edge weight.
+ *
+ * This function takes an optional `incidentFunc(u)` which returns the ids of
+ * all edges incident to the node `u` for the purposes of shortest path
+ * traversal. By default this function uses the `outEdges` function on the
+ * supplied graph.
+ *
+ * This function takes `O(|V| * (|E| + |V|) * log |V|)` time.
+ *
+ * [alg.dijkstra]: dijkstra.js.html#dijkstra
+ *
+ * @param {Graph} g the graph to search for shortest paths from **source**
+ * @param {Function} [weightFunc] optional weight function
+ * @param {Function} [incidentFunc] optional incident function
+ */
+function dijkstraAll(g, weightFunc, incidentFunc) {
+  var results = {};
+  g.eachNode(function(u) {
+    results[u] = dijkstra(g, u, weightFunc, incidentFunc);
+  });
+  return results;
+}
+
+},{"./dijkstra":35}],37:[function(require,module,exports){
+var tarjan = require("./tarjan");
+
+module.exports = findCycles;
+
+/*
+ * Given a Digraph **g** this function returns all nodes that are part of a
+ * cycle. Since there may be more than one cycle in a graph this function
+ * returns an array of these cycles, where each cycle is itself represented
+ * by an array of ids for each node involved in that cycle.
+ *
+ * [alg.isAcyclic][] is more efficient if you only need to determine whether
+ * a graph has a cycle or not.
+ *
+ * [alg.isAcyclic]: isAcyclic.js.html#isAcyclic
+ *
+ * @param {Digraph} g the graph to search for cycles.
+ */
+function findCycles(g) {
+  return tarjan(g).filter(function(cmpt) { return cmpt.length > 1; });
+}
+
+},{"./tarjan":43}],38:[function(require,module,exports){
+module.exports = floydWarshall;
+
+/**
+ * This function is an implementation of the [Floyd-Warshall algorithm][],
+ * which finds the shortest path from each node to every other reachable node
+ * in the graph. It is similar to [alg.dijkstraAll][], but it handles negative
+ * edge weights and is more efficient for some types of graphs. This function
+ * returns a map of `source -> { target -> { distance, predecessor }`. The
+ * distance property holds the sum of the weights from `source` to `target`
+ * along the shortest path of `Number.POSITIVE_INFINITY` if there is no path
+ * from `source`. The predecessor property can be used to walk the individual
+ * elements of the path from `source` to `target` in reverse order.
+ *
+ * This function takes an optional `weightFunc(e)` which returns the
+ * weight of the edge `e`. If no weightFunc is supplied then each edge is
+ * assumed to have a weight of 1.
+ *
+ * This function takes an optional `incidentFunc(u)` which returns the ids of
+ * all edges incident to the node `u` for the purposes of shortest path
+ * traversal. By default this function uses the `outEdges` function on the
+ * supplied graph.
+ *
+ * This algorithm takes O(|V|^3) time.
+ *
+ * [Floyd-Warshall algorithm]: https://en.wikipedia.org/wiki/Floyd-Warshall_algorithm
+ * [alg.dijkstraAll]: dijkstraAll.js.html#dijkstraAll
+ *
+ * @param {Graph} g the graph to search for shortest paths from **source**
+ * @param {Function} [weightFunc] optional weight function
+ * @param {Function} [incidentFunc] optional incident function
+ */
+function floydWarshall(g, weightFunc, incidentFunc) {
+  var results = {},
+      nodes = g.nodes();
+
+  weightFunc = weightFunc || function() { return 1; };
+  incidentFunc = incidentFunc || (g.isDirected()
+      ? function(u) { return g.outEdges(u); }
+      : function(u) { return g.incidentEdges(u); });
+
+  nodes.forEach(function(u) {
+    results[u] = {};
+    results[u][u] = { distance: 0 };
+    nodes.forEach(function(v) {
+      if (u !== v) {
+        results[u][v] = { distance: Number.POSITIVE_INFINITY };
+      }
+    });
+    incidentFunc(u).forEach(function(e) {
+      var incidentNodes = g.incidentNodes(e),
+          v = incidentNodes[0] !== u ? incidentNodes[0] : incidentNodes[1],
+          d = weightFunc(e);
+      if (d < results[u][v].distance) {
+        results[u][v] = { distance: d, predecessor: u };
+      }
+    });
+  });
+
+  nodes.forEach(function(k) {
+    var rowK = results[k];
+    nodes.forEach(function(i) {
+      var rowI = results[i];
+      nodes.forEach(function(j) {
+        var ik = rowI[k];
+        var kj = rowK[j];
+        var ij = rowI[j];
+        var altDistance = ik.distance + kj.distance;
+        if (altDistance < ij.distance) {
+          ij.distance = altDistance;
+          ij.predecessor = kj.predecessor;
+        }
+      });
+    });
+  });
+
+  return results;
+}
+
+},{}],39:[function(require,module,exports){
+var topsort = require("./topsort");
+
+module.exports = isAcyclic;
+
+/*
+ * Given a Digraph **g** this function returns `true` if the graph has no
+ * cycles and returns `false` if it does. This algorithm returns as soon as it
+ * detects the first cycle.
+ *
+ * Use [alg.findCycles][] if you need the actual list of cycles in a graph.
+ *
+ * [alg.findCycles]: findCycles.js.html#findCycles
+ *
+ * @param {Digraph} g the graph to test for cycles
+ */
+function isAcyclic(g) {
+  try {
+    topsort(g);
+  } catch (e) {
+    if (e instanceof topsort.CycleException) return false;
+    throw e;
+  }
+  return true;
+}
+
+},{"./topsort":44}],40:[function(require,module,exports){
+/* jshint -W079 */
+var Set = require("cp-data").Set;
+/* jshint +W079 */
+
+module.exports = postorder;
+
+// Postorder traversal of g, calling f for each visited node. Assumes the graph
+// is a tree.
+function postorder(g, root, f) {
+  var visited = new Set();
+  if (g.isDirected()) {
+    throw new Error("This function only works for undirected graphs");
+  }
+  function dfs(u, prev) {
+    if (visited.has(u)) {
+      throw new Error("The input graph is not a tree: " + g);
+    }
+    visited.add(u);
+    g.neighbors(u).forEach(function(v) {
+      if (v !== prev) dfs(v, u);
+    });
+    f(u);
+  }
+  dfs(root);
+}
+
+},{"cp-data":5}],41:[function(require,module,exports){
+/* jshint -W079 */
+var Set = require("cp-data").Set;
+/* jshint +W079 */
+
+module.exports = preorder;
+
+// Preorder traversal of g, calling f for each visited node. Assumes the graph
+// is a tree.
+function preorder(g, root, f) {
+  var visited = new Set();
+  if (g.isDirected()) {
+    throw new Error("This function only works for undirected graphs");
+  }
+  function dfs(u, prev) {
+    if (visited.has(u)) {
+      throw new Error("The input graph is not a tree: " + g);
+    }
+    visited.add(u);
+    f(u);
+    g.neighbors(u).forEach(function(v) {
+      if (v !== prev) dfs(v, u);
+    });
+  }
+  dfs(root);
+}
+
+},{"cp-data":5}],42:[function(require,module,exports){
+var Graph = require("../Graph"),
+    PriorityQueue = require("cp-data").PriorityQueue;
+
+module.exports = prim;
+
+/**
+ * [Prim's algorithm][] takes a connected undirected graph and generates a
+ * [minimum spanning tree][]. This function returns the minimum spanning
+ * tree as an undirected graph. This algorithm is derived from the description
+ * in "Introduction to Algorithms", Third Edition, Cormen, et al., Pg 634.
+ *
+ * This function takes a `weightFunc(e)` which returns the weight of the edge
+ * `e`. It throws an Error if the graph is not connected.
+ *
+ * This function takes `O(|E| log |V|)` time.
+ *
+ * [Prim's algorithm]: https://en.wikipedia.org/wiki/Prim's_algorithm
+ * [minimum spanning tree]: https://en.wikipedia.org/wiki/Minimum_spanning_tree
+ *
+ * @param {Graph} g the graph used to generate the minimum spanning tree
+ * @param {Function} weightFunc the weight function to use
+ */
+function prim(g, weightFunc) {
+  var result = new Graph(),
+      parents = {},
+      pq = new PriorityQueue(),
+      u;
+
+  function updateNeighbors(e) {
+    var incidentNodes = g.incidentNodes(e),
+        v = incidentNodes[0] !== u ? incidentNodes[0] : incidentNodes[1],
+        pri = pq.priority(v);
+    if (pri !== undefined) {
+      var edgeWeight = weightFunc(e);
+      if (edgeWeight < pri) {
+        parents[v] = u;
+        pq.decrease(v, edgeWeight);
+      }
+    }
+  }
+
+  if (g.order() === 0) {
+    return result;
+  }
+
+  g.eachNode(function(u) {
+    pq.add(u, Number.POSITIVE_INFINITY);
+    result.addNode(u);
+  });
+
+  // Start from an arbitrary node
+  pq.decrease(g.nodes()[0], 0);
+
+  var init = false;
+  while (pq.size() > 0) {
+    u = pq.removeMin();
+    if (u in parents) {
+      result.addEdge(null, u, parents[u]);
+    } else if (init) {
+      throw new Error("Input graph is not connected: " + g);
+    } else {
+      init = true;
+    }
+
+    g.incidentEdges(u).forEach(updateNeighbors);
+  }
+
+  return result;
+}
+
+},{"../Graph":33,"cp-data":5}],43:[function(require,module,exports){
+module.exports = tarjan;
+
+/**
+ * This function is an implementation of [Tarjan's algorithm][] which finds
+ * all [strongly connected components][] in the directed graph **g**. Each
+ * strongly connected component is composed of nodes that can reach all other
+ * nodes in the component via directed edges. A strongly connected component
+ * can consist of a single node if that node cannot both reach and be reached
+ * by any other specific node in the graph. Components of more than one node
+ * are guaranteed to have at least one cycle.
+ *
+ * This function returns an array of components. Each component is itself an
+ * array that contains the ids of all nodes in the component.
+ *
+ * [Tarjan's algorithm]: http://en.wikipedia.org/wiki/Tarjan's_strongly_connected_components_algorithm
+ * [strongly connected components]: http://en.wikipedia.org/wiki/Strongly_connected_component
+ *
+ * @param {Digraph} g the graph to search for strongly connected components
+ */
+function tarjan(g) {
+  if (!g.isDirected()) {
+    throw new Error("tarjan can only be applied to a directed graph. Bad input: " + g);
+  }
+
+  var index = 0,
+      stack = [],
+      visited = {}, // node id -> { onStack, lowlink, index }
+      results = [];
+
+  function dfs(u) {
+    var entry = visited[u] = {
+      onStack: true,
+      lowlink: index,
+      index: index++
+    };
+    stack.push(u);
+
+    g.successors(u).forEach(function(v) {
+      if (!(v in visited)) {
+        dfs(v);
+        entry.lowlink = Math.min(entry.lowlink, visited[v].lowlink);
+      } else if (visited[v].onStack) {
+        entry.lowlink = Math.min(entry.lowlink, visited[v].index);
+      }
+    });
+
+    if (entry.lowlink === entry.index) {
+      var cmpt = [],
+          v;
+      do {
+        v = stack.pop();
+        visited[v].onStack = false;
+        cmpt.push(v);
+      } while (u !== v);
+      results.push(cmpt);
+    }
+  }
+
+  g.nodes().forEach(function(u) {
+    if (!(u in visited)) {
+      dfs(u);
+    }
+  });
+
+  return results;
+}
+
+},{}],44:[function(require,module,exports){
+module.exports = topsort;
+topsort.CycleException = CycleException;
+
+/*
+ * Given a graph **g**, this function returns an ordered list of nodes such
+ * that for each edge `u -> v`, `u` appears before `v` in the list. If the
+ * graph has a cycle it is impossible to generate such a list and
+ * **CycleException** is thrown.
+ *
+ * See [topological sorting](https://en.wikipedia.org/wiki/Topological_sorting)
+ * for more details about how this algorithm works.
+ *
+ * @param {Digraph} g the graph to sort
+ */
+function topsort(g) {
+  if (!g.isDirected()) {
+    throw new Error("topsort can only be applied to a directed graph. Bad input: " + g);
+  }
+
+  var visited = {};
+  var stack = {};
+  var results = [];
+
+  function visit(node) {
+    if (node in stack) {
+      throw new CycleException();
+    }
+
+    if (!(node in visited)) {
+      stack[node] = true;
+      visited[node] = true;
+      g.predecessors(node).forEach(function(pred) {
+        visit(pred);
+      });
+      delete stack[node];
+      results.push(node);
+    }
+  }
+
+  var sinks = g.sinks();
+  if (g.order() !== 0 && sinks.length === 0) {
+    throw new CycleException();
+  }
+
+  g.sinks().forEach(function(sink) {
+    visit(sink);
+  });
+
+  return results;
+}
+
+function CycleException() {}
+
+CycleException.prototype.toString = function() {
+  return "Graph has at least one cycle";
+};
+
+},{}],45:[function(require,module,exports){
+// This file provides a helper function that mixes-in Dot behavior to an
+// existing graph prototype.
+
+/* jshint -W079 */
+var Set = require("cp-data").Set;
+/* jshint +W079 */
+
+module.exports = compoundify;
+
+// Extends the given SuperConstructor with the ability for nodes to contain
+// other nodes. A special node id `null` is used to indicate the root graph.
+function compoundify(SuperConstructor) {
+  function Constructor() {
+    SuperConstructor.call(this);
+
+    // Map of object id -> parent id (or null for root graph)
+    this._parents = {};
+
+    // Map of id (or null) -> children set
+    this._children = {};
+    this._children[null] = new Set();
+  }
+
+  Constructor.prototype = new SuperConstructor();
+  Constructor.prototype.constructor = Constructor;
+
+  Constructor.prototype.parent = function(u, parent) {
+    this._strictGetNode(u);
+
+    if (arguments.length < 2) {
+      return this._parents[u];
+    }
+
+    if (u === parent) {
+      throw new Error("Cannot make " + u + " a parent of itself");
+    }
+    if (parent !== null) {
+      this._strictGetNode(parent);
+    }
+
+    this._children[this._parents[u]].remove(u);
+    this._parents[u] = parent;
+    this._children[parent].add(u);
+  };
+
+  Constructor.prototype.children = function(u) {
+    if (u !== null) {
+      this._strictGetNode(u);
+    }
+    return this._children[u].keys();
+  };
+
+  Constructor.prototype.addNode = function(u, value) {
+    u = SuperConstructor.prototype.addNode.call(this, u, value);
+    this._parents[u] = null;
+    this._children[u] = new Set();
+    this._children[null].add(u);
+    return u;
+  };
+
+  Constructor.prototype.delNode = function(u) {
+    // Promote all children to the parent of the subgraph
+    var parent = this.parent(u);
+    this._children[u].keys().forEach(function(child) {
+      this.parent(child, parent);
+    }, this);
+
+    this._children[parent].remove(u);
+    delete this._parents[u];
+    delete this._children[u];
+
+    return SuperConstructor.prototype.delNode.call(this, u);
+  };
+
+  Constructor.prototype.copy = function() {
+    var copy = SuperConstructor.prototype.copy.call(this);
+    this.nodes().forEach(function(u) {
+      copy.parent(u, this.parent(u));
+    }, this);
+    return copy;
+  };
+
+  Constructor.prototype.filterNodes = function(filter) {
+    var self = this,
+        copy = SuperConstructor.prototype.filterNodes.call(this, filter);
+
+    var parents = {};
+    function findParent(u) {
+      var parent = self.parent(u);
+      if (parent === null || copy.hasNode(parent)) {
+        parents[u] = parent;
+        return parent;
+      } else if (parent in parents) {
+        return parents[parent];
+      } else {
+        return findParent(parent);
+      }
+    }
+
+    copy.eachNode(function(u) { copy.parent(u, findParent(u)); });
+
+    return copy;
+  };
+
+  return Constructor;
+}
+
+},{"cp-data":5}],46:[function(require,module,exports){
+var Graph = require("../Graph"),
+    Digraph = require("../Digraph"),
+    CGraph = require("../CGraph"),
+    CDigraph = require("../CDigraph");
+
+exports.decode = function(nodes, edges, Ctor) {
+  Ctor = Ctor || Digraph;
+
+  if (typeOf(nodes) !== "Array") {
+    throw new Error("nodes is not an Array");
+  }
+
+  if (typeOf(edges) !== "Array") {
+    throw new Error("edges is not an Array");
+  }
+
+  if (typeof Ctor === "string") {
+    switch(Ctor) {
+      case "graph": Ctor = Graph; break;
+      case "digraph": Ctor = Digraph; break;
+      case "cgraph": Ctor = CGraph; break;
+      case "cdigraph": Ctor = CDigraph; break;
+      default: throw new Error("Unrecognized graph type: " + Ctor);
+    }
+  }
+
+  var graph = new Ctor();
+
+  nodes.forEach(function(u) {
+    graph.addNode(u.id, u.value);
+  });
+
+  // If the graph is compound, set up children...
+  if (graph.parent) {
+    nodes.forEach(function(u) {
+      if (u.children) {
+        u.children.forEach(function(v) {
+          graph.parent(v, u.id);
+        });
+      }
+    });
+  }
+
+  edges.forEach(function(e) {
+    graph.addEdge(e.id, e.u, e.v, e.value);
+  });
+
+  return graph;
+};
+
+exports.encode = function(graph) {
+  var nodes = [];
+  var edges = [];
+
+  graph.eachNode(function(u, value) {
+    var node = {id: u, value: value};
+    if (graph.children) {
+      var children = graph.children(u);
+      if (children.length) {
+        node.children = children;
+      }
+    }
+    nodes.push(node);
+  });
+
+  graph.eachEdge(function(e, u, v, value) {
+    edges.push({id: e, u: u, v: v, value: value});
+  });
+
+  var type;
+  if (graph instanceof CDigraph) {
+    type = "cdigraph";
+  } else if (graph instanceof CGraph) {
+    type = "cgraph";
+  } else if (graph instanceof Digraph) {
+    type = "digraph";
+  } else if (graph instanceof Graph) {
+    type = "graph";
+  } else {
+    throw new Error("Couldn't determine type of graph: " + graph);
+  }
+
+  return { nodes: nodes, edges: edges, type: type };
+};
+
+function typeOf(obj) {
+  return Object.prototype.toString.call(obj).slice(8, -1);
+}
+
+},{"../CDigraph":30,"../CGraph":31,"../Digraph":32,"../Graph":33}],47:[function(require,module,exports){
+/* jshint -W079 */
+var Set = require("cp-data").Set;
+/* jshint +W079 */
+
+exports.all = function() {
+  return function() { return true; };
+};
+
+exports.nodesFromList = function(nodes) {
+  var set = new Set(nodes);
+  return function(u) {
+    return set.has(u);
+  };
+};
+
+},{"cp-data":5}],48:[function(require,module,exports){
+var Graph = require("./Graph"),
+    Digraph = require("./Digraph");
+
+// Side-effect based changes are lousy, but node doesn't seem to resolve the
+// requires cycle.
+
+/**
+ * Returns a new directed graph using the nodes and edges from this graph. The
+ * new graph will have the same nodes, but will have twice the number of edges:
+ * each edge is split into two edges with opposite directions. Edge ids,
+ * consequently, are not preserved by this transformation.
+ */
+Graph.prototype.toDigraph =
+Graph.prototype.asDirected = function() {
+  var g = new Digraph();
+  this.eachNode(function(u, value) { g.addNode(u, value); });
+  this.eachEdge(function(e, u, v, value) {
+    g.addEdge(null, u, v, value);
+    g.addEdge(null, v, u, value);
+  });
+  return g;
+};
+
+/**
+ * Returns a new undirected graph using the nodes and edges from this graph.
+ * The new graph will have the same nodes, but the edges will be made
+ * undirected. Edge ids are preserved in this transformation.
+ */
+Digraph.prototype.toGraph =
+Digraph.prototype.asUndirected = function() {
+  var g = new Graph();
+  this.eachNode(function(u, value) { g.addNode(u, value); });
+  this.eachEdge(function(e, u, v, value) {
+    g.addEdge(e, u, v, value);
+  });
+  return g;
+};
+
+},{"./Digraph":32,"./Graph":33}],49:[function(require,module,exports){
+// Returns an array of all values for properties of **o**.
+exports.values = function(o) {
+  var ks = Object.keys(o),
+      len = ks.length,
+      result = new Array(len),
+      i;
+  for (i = 0; i < len; ++i) {
+    result[i] = o[ks[i]];
+  }
+  return result;
+};
+
+},{}],50:[function(require,module,exports){
+module.exports = '0.7.4';
+
+},{}]},{},[1])
+;
\ No newline at end of file
diff --git a/toolkit/devtools/webaudioeditor/models.js b/toolkit/devtools/webaudioeditor/models.js
new file mode 100644
index 000000000..aa1975f58
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/models.js
@@ -0,0 +1,312 @@
+/* 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";
+
+// Import as different name `coreEmit`, so we don't conflict
+// with the global `window` listener itself.
+const { emit: coreEmit } = require("sdk/event/core");
+
+/**
+ * Representational wrapper around AudioNodeActors. Adding and destroying
+ * AudioNodes should be performed through the AudioNodes collection.
+ *
+ * Events:
+ * - `connect`: node, destinationNode, parameter
+ * - `disconnect`: node
+ */
+const AudioNodeModel = Class({
+  extends: EventTarget,
+
+  // Will be added via AudioNodes `add`
+  collection: null,
+
+  initialize: function (actor) {
+    this.actor = actor;
+    this.id = actor.actorID;
+    this.connections = [];
+  },
+
+  /**
+   * After instantiating the AudioNodeModel, calling `setup` caches values
+   * from the actor onto the model. In this case, only the type of audio node.
+   *
+   * @return promise
+   */
+  setup: Task.async(function* () {
+    yield this.getType();
+
+    // Query bypass status on start up
+    this._bypassed = yield this.isBypassed();
+
+    // Store whether or not this node is bypassable in the first place
+    this.bypassable = !AUDIO_NODE_DEFINITION[this.type].unbypassable;
+  }),
+
+  /**
+   * A proxy for the underlying AudioNodeActor to fetch its type
+   * and subsequently assign the type to the instance.
+   *
+   * @return Promise->String
+   */
+  getType: Task.async(function* () {
+    this.type = yield this.actor.getType();
+    return this.type;
+  }),
+
+  /**
+   * Stores connection data inside this instance of this audio node connecting
+   * to another node (destination). If connecting to another node's AudioParam,
+   * the second argument (param) must be populated with a string.
+   *
+   * Connecting nodes is idempotent. Upon new connection, emits "connect" event.
+   *
+   * @param AudioNodeModel destination
+   * @param String param
+   */
+  connect: function (destination, param) {
+    let edge = findWhere(this.connections, { destination: destination.id, param: param });
+
+    if (!edge) {
+      this.connections.push({ source: this.id, destination: destination.id, param: param });
+      coreEmit(this, "connect", this, destination, param);
+    }
+  },
+
+  /**
+   * Clears out all internal connection data. Emits "disconnect" event.
+   */
+  disconnect: function () {
+    this.connections.length = 0;
+    coreEmit(this, "disconnect", this);
+  },
+
+  /**
+   * Gets the bypass status of the audio node.
+   *
+   * @return Promise->Boolean
+   */
+  isBypassed: function () {
+    return this.actor.isBypassed();
+  },
+
+  /**
+   * Sets the bypass value of an AudioNode.
+   *
+   * @param Boolean enable
+   * @return Promise
+   */
+  bypass: function (enable) {
+    this._bypassed = enable;
+    return this.actor.bypass(enable).then(() => coreEmit(this, "bypass", this, enable));
+  },
+
+  /**
+   * Returns a promise that resolves to an array of objects containing
+   * both a `param` name property and a `value` property.
+   *
+   * @return Promise->Object
+   */
+  getParams: function () {
+    return this.actor.getParams();
+  },
+
+  /**
+   * Returns a promise that resolves to an object containing an
+   * array of event information and an array of automation data.
+   *
+   * @param String paramName
+   * @return Promise->Array
+   */
+  getAutomationData: function (paramName) {
+    return this.actor.getAutomationData(paramName);
+  },
+
+  /**
+   * Takes a `dagreD3.Digraph` object and adds this node to
+   * the graph to be rendered.
+   *
+   * @param dagreD3.Digraph
+   */
+  addToGraph: function (graph) {
+    graph.addNode(this.id, {
+      type: this.type,
+      label: this.type.replace(/Node$/, ""),
+      id: this.id,
+      bypassed: this._bypassed
+    });
+  },
+
+  /**
+   * Takes a `dagreD3.Digraph` object and adds edges to
+   * the graph to be rendered. Separate from `addToGraph`,
+   * as while we depend on D3/Dagre's constraints, we cannot
+   * add edges for nodes that have not yet been added to the graph.
+   *
+   * @param dagreD3.Digraph
+   */
+  addEdgesToGraph: function (graph) {
+    for (let edge of this.connections) {
+      let options = {
+        source: this.id,
+        target: edge.destination
+      };
+
+      // Only add `label` if `param` specified, as this is an AudioParam
+      // connection then. `label` adds the magic to render with dagre-d3,
+      // and `param` is just more explicitly the param, ignoring
+      // implementation details.
+      if (edge.param) {
+        options.label = options.param = edge.param;
+      }
+
+      graph.addEdge(null, this.id, edge.destination, options);
+    }
+  }
+});
+
+
+/**
+ * Constructor for a Collection of `AudioNodeModel` models.
+ *
+ * Events:
+ * - `add`: node
+ * - `remove`: node
+ * - `connect`: node, destinationNode, parameter
+ * - `disconnect`: node
+ */
+const AudioNodesCollection = Class({
+  extends: EventTarget,
+
+  model: AudioNodeModel,
+
+  initialize: function () {
+    this.models = new Set();
+    this._onModelEvent = this._onModelEvent.bind(this);
+  },
+
+  /**
+   * Iterates over all models within the collection, calling `fn` with the
+   * model as the first argument.
+   *
+   * @param Function fn
+   */
+  forEach: function (fn) {
+    this.models.forEach(fn);
+  },
+
+  /**
+   * Creates a new AudioNodeModel, passing through arguments into the AudioNodeModel
+   * constructor, and adds the model to the internal collection store of this
+   * instance.
+   *
+   * Also calls `setup` on the model itself, and sets up event piping, so that
+   * events emitted on each model propagate to the collection itself.
+   *
+   * Emits "add" event on instance when completed.
+   *
+   * @param Object obj
+   * @return Promise->AudioNodeModel
+   */
+  add: Task.async(function* (obj) {
+    let node = new this.model(obj);
+    node.collection = this;
+    yield node.setup();
+
+    this.models.add(node);
+
+    node.on("*", this._onModelEvent);
+    coreEmit(this, "add", node);
+    return node;
+  }),
+
+  /**
+   * Removes an AudioNodeModel from the internal collection. Calls `delete` method
+   * on the model, and emits "remove" on this instance.
+   *
+   * @param AudioNodeModel node
+   */
+  remove: function (node) {
+    this.models.delete(node);
+    coreEmit(this, "remove", node);
+  },
+
+  /**
+   * Empties out the internal collection of all AudioNodeModels.
+   */
+  reset: function () {
+    this.models.clear();
+  },
+
+  /**
+   * Takes an `id` from an AudioNodeModel and returns the corresponding
+   * AudioNodeModel within the collection that matches that id. Returns `null`
+   * if not found.
+   *
+   * @param Number id
+   * @return AudioNodeModel|null
+   */
+  get: function (id) {
+    return findWhere(this.models, { id: id });
+  },
+
+  /**
+   * Returns the count for how many models are a part of this collection.
+   *
+   * @return Number
+   */
+  get length() {
+    return this.models.size;
+  },
+
+  /**
+   * Returns detailed information about the collection. used during tests
+   * to query state. Returns an object with information on node count,
+   * how many edges are within the data graph, as well as how many of those edges
+   * are for AudioParams.
+   *
+   * @return Object
+   */
+  getInfo: function () {
+    let info = {
+      nodes: this.length,
+      edges: 0,
+      paramEdges: 0
+    };
+
+    this.models.forEach(node => {
+      let paramEdgeCount = node.connections.filter(edge => edge.param).length;
+      info.edges += node.connections.length - paramEdgeCount;
+      info.paramEdges += paramEdgeCount;
+    });
+    return info;
+  },
+
+  /**
+   * Adds all nodes within the collection to the passed in graph,
+   * as well as their corresponding edges.
+   *
+   * @param dagreD3.Digraph
+   */
+  populateGraph: function (graph) {
+    this.models.forEach(node => node.addToGraph(graph));
+    this.models.forEach(node => node.addEdgesToGraph(graph));
+  },
+
+  /**
+   * Called when a stored model emits any event. Used to manage
+   * event propagation, or listening to model events to react, like
+   * removing a model from the collection when it's destroyed.
+   */
+  _onModelEvent: function (eventName, node, ...args) {
+    if (eventName === "remove") {
+      // If a `remove` event from the model, remove it
+      // from the collection, and let the method handle the emitting on
+      // the collection
+      this.remove(node);
+    } else {
+      // Pipe the event to the collection
+      coreEmit(this, eventName, node, ...args);
+    }
+  }
+});
diff --git a/toolkit/devtools/webaudioeditor/moz.build b/toolkit/devtools/webaudioeditor/moz.build
new file mode 100644
index 000000000..7fbea6cc9
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/moz.build
@@ -0,0 +1,10 @@
+# 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/.
+
+EXTRA_JS_MODULES.devtools.webaudioeditor += [
+    'panel.js'
+]
+
+BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
diff --git a/toolkit/devtools/webaudioeditor/panel.js b/toolkit/devtools/webaudioeditor/panel.js
new file mode 100644
index 000000000..c2da91a9c
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/panel.js
@@ -0,0 +1,69 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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 { Cc, Ci, Cu, Cr } = require("chrome");
+const EventEmitter = require("devtools/toolkit/event-emitter");
+const { WebAudioFront } = require("devtools/server/actors/webaudio");
+let Promise = Cu.import("resource://gre/modules/Promise.jsm", {}).Promise;
+
+function WebAudioEditorPanel (iframeWindow, toolbox) {
+  this.panelWin = iframeWindow;
+  this._toolbox = toolbox;
+  this._destroyer = null;
+
+  EventEmitter.decorate(this);
+}
+
+exports.WebAudioEditorPanel = WebAudioEditorPanel;
+
+WebAudioEditorPanel.prototype = {
+  open: function() {
+    let targetPromise;
+
+    // Local debugging needs to make the target remote.
+    if (!this.target.isRemote) {
+      targetPromise = this.target.makeRemote();
+    } else {
+      targetPromise = Promise.resolve(this.target);
+    }
+
+    return targetPromise
+      .then(() => {
+        this.panelWin.gToolbox = this._toolbox;
+        this.panelWin.gTarget = this.target;
+
+        this.panelWin.gFront = new WebAudioFront(this.target.client, this.target.form);
+        return this.panelWin.startupWebAudioEditor();
+      })
+      .then(() => {
+        this.isReady = true;
+        this.emit("ready");
+        return this;
+      })
+      .then(null, function onError(aReason) {
+        Cu.reportError("WebAudioEditorPanel open failed. " +
+                       aReason.error + ": " + aReason.message);
+      });
+  },
+
+  // DevToolPanel API
+
+  get target() this._toolbox.target,
+
+  destroy: function() {
+    // Make sure this panel is not already destroyed.
+    if (this._destroyer) {
+      return this._destroyer;
+    }
+
+    return this._destroyer = this.panelWin.shutdownWebAudioEditor().then(() => {
+      // Destroy front to ensure packet handler is removed from client
+      this.panelWin.gFront.destroy();
+      this.emit("destroyed");
+    });
+  }
+};
diff --git a/toolkit/devtools/webaudioeditor/test/440hz_sine.ogg b/toolkit/devtools/webaudioeditor/test/440hz_sine.ogg
new file mode 100644
index 000000000..bd84564e2
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/440hz_sine.ogg
diff --git a/toolkit/devtools/webaudioeditor/test/browser.ini b/toolkit/devtools/webaudioeditor/test/browser.ini
new file mode 100644
index 000000000..f58bdf623
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser.ini
@@ -0,0 +1,72 @@
+[DEFAULT]
+subsuite = devtools
+support-files =
+  doc_simple-context.html
+  doc_complex-context.html
+  doc_simple-node-creation.html
+  doc_buffer-and-array.html
+  doc_media-node-creation.html
+  doc_destroy-nodes.html
+  doc_connect-param.html
+  doc_connect-multi-param.html
+  doc_iframe-context.html
+  doc_automation.html
+  doc_bug_1125817.html
+  doc_bug_1130901.html
+  doc_bug_1112378.html
+  440hz_sine.ogg
+  head.js
+
+[browser_audionode-actor-get-param-flags.js]
+[browser_audionode-actor-get-params-01.js]
+[browser_audionode-actor-get-params-02.js]
+[browser_audionode-actor-get-set-param.js]
+[browser_audionode-actor-get-type.js]
+[browser_audionode-actor-is-source.js]
+[browser_audionode-actor-bypass.js]
+[browser_audionode-actor-connectnode-disconnect.js]
+[browser_audionode-actor-connectparam.js]
+skip-if = true # bug 1092571
+# [browser_audionode-actor-add-automation-event.js] bug 1134036
+# [browser_audionode-actor-get-automation-data-01.js] bug 1134036
+# [browser_audionode-actor-get-automation-data-02.js] bug 1134036
+# [browser_audionode-actor-get-automation-data-03.js] bug 1134036
+[browser_callwatcher-01.js]
+[browser_callwatcher-02.js]
+[browser_webaudio-actor-simple.js]
+[browser_webaudio-actor-destroy-node.js]
+[browser_webaudio-actor-connect-param.js]
+# [browser_webaudio-actor-automation-event.js] bug 1134036
+
+# [browser_wa_automation-view-01.js] bug 1134036
+# [browser_wa_automation-view-02.js] bug 1134036
+[browser_wa_controller-01.js]
+[browser_wa_destroy-node-01.js]
+[browser_wa_first-run.js]
+[browser_wa_graph-click.js]
+[browser_wa_graph-markers.js]
+[browser_wa_graph-render-01.js]
+[browser_wa_graph-render-02.js]
+[browser_wa_graph-render-03.js]
+[browser_wa_graph-render-04.js]
+[browser_wa_graph-render-05.js]
+skip-if = true # bug 1092571
+[browser_wa_graph-selected.js]
+[browser_wa_graph-zoom.js]
+[browser_wa_inspector.js]
+[browser_wa_inspector-toggle.js]
+[browser_wa_inspector-width.js]
+[browser_wa_inspector-bypass-01.js]
+[browser_wa_navigate.js]
+[browser_wa_properties-view.js]
+[browser_wa_properties-view-edit-01.js]
+skip-if = true # bug 1010423
+[browser_wa_properties-view-edit-02.js]
+skip-if = true # bug 1010423
+[browser_wa_properties-view-media-nodes.js]
+[browser_wa_properties-view-params.js]
+[browser_wa_properties-view-params-objects.js]
+[browser_wa_reset-01.js]
+[browser_wa_reset-02.js]
+[browser_wa_reset-03.js]
+[browser_wa_reset-04.js]
diff --git a/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-add-automation-event.js b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-add-automation-event.js
new file mode 100644
index 000000000..0e96b83ab
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-add-automation-event.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test AudioNode#addAutomationEvent();
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
+  let [_, [destNode, oscNode, gainNode]] = yield Promise.all([
+    front.setup({ reload: true }),
+    get3(front, "create-node")
+  ]);
+  let count = 0;
+  let counter = () => count++;
+  front.on("automation-event", counter);
+
+  let t0 = 0, t1 = 0.1, t2 = 0.2, t3 = 0.3, t4 = 0.4, t5 = 0.6, t6 = 0.7, t7 = 1;
+  let curve = [-1, 0, 1];
+  yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [0.2, t0]);
+  yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [0.3, t1]);
+  yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [0.4, t2]);
+  yield oscNode.addAutomationEvent("frequency", "linearRampToValueAtTime", [1, t3]);
+  yield oscNode.addAutomationEvent("frequency", "linearRampToValueAtTime", [0.15, t4]);
+  yield oscNode.addAutomationEvent("frequency", "exponentialRampToValueAtTime", [0.75, t5]);
+  yield oscNode.addAutomationEvent("frequency", "exponentialRampToValueAtTime", [0.5, t6]);
+  yield oscNode.addAutomationEvent("frequency", "setValueCurveAtTime", [curve, t7, t7 - t6]);
+  yield oscNode.addAutomationEvent("frequency", "setTargetAtTime", [20, 2, 5]);
+
+  ok(true, "successfully set automation events for valid automation events");
+
+  try {
+    yield oscNode.addAutomationEvent("frequency", "notAMethod", 20, 2, 5);
+    ok(false, "non-automation methods should not be successful");
+  } catch (e) {
+    ok(/invalid/.test(e.message), "AudioNode:addAutomationEvent fails for invalid automation methods");
+  }
+
+  try {
+    yield oscNode.addAutomationEvent("invalidparam", "setValueAtTime", 0.2, t0);
+    ok(false, "automating non-AudioParams should not be successful");
+  } catch (e) {
+    ok(/invalid/.test(e.message), "AudioNode:addAutomationEvent fails for a non AudioParam");
+  }
+
+  front.off("automation-event", counter);
+
+  is(count, 9,
+    "when calling `addAutomationEvent`, the WebAudioActor should still fire `automation-event`.");
+
+  yield removeTab(target.tab);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-bypass.js b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-bypass.js
new file mode 100644
index 000000000..57ce888ef
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-bypass.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test AudioNode#bypass(), AudioNode#isBypassed()
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
+  let [_, [destNode, oscNode, gainNode]] = yield Promise.all([
+    front.setup({ reload: true }),
+    get3(front, "create-node")
+  ]);
+
+  is((yield gainNode.isBypassed()), false, "Nodes start off unbypassed.");
+
+  info("Calling node#bypass(true)");
+  let isBypassed = yield gainNode.bypass(true);
+
+  is(isBypassed, true, "node.bypass(true) resolves to true");
+  is((yield gainNode.isBypassed()), true, "Node is now bypassed.");
+
+  info("Calling node#bypass(false)");
+  isBypassed = yield gainNode.bypass(false);
+
+  is(isBypassed, false, "node.bypass(false) resolves to false");
+  is((yield gainNode.isBypassed()), false, "Node back to being unbypassed.");
+
+  info("Calling node#bypass(true) on unbypassable node");
+  isBypassed = yield destNode.bypass(true);
+
+  is(isBypassed, false, "node.bypass(true) resolves to false for unbypassable node");
+  is((yield gainNode.isBypassed()), false, "Unbypassable node is unaffect");
+
+  yield removeTab(target.tab);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-connectnode-disconnect.js b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-connectnode-disconnect.js
new file mode 100644
index 000000000..f0e437d86
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-connectnode-disconnect.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that AudioNodeActor#connectNode() and AudioNodeActor#disconnect() work.
+ * Uses the editor front as the actors do not retain connect state.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+
+  let [dest, osc, gain] = actors;
+
+  info("Disconnecting oscillator...");
+  osc.disconnect();
+  yield Promise.all([
+    waitForGraphRendered(panelWin, 3, 1),
+    once(gAudioNodes, "disconnect")
+  ]);
+  ok(true, "Oscillator disconnected, event emitted.");
+
+  info("Reconnecting oscillator...");
+  osc.connectNode(gain);
+  yield Promise.all([
+    waitForGraphRendered(panelWin, 3, 2),
+    once(gAudioNodes, "connect")
+  ]);
+  ok(true, "Oscillator reconnected.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-connectparam.js b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-connectparam.js
new file mode 100644
index 000000000..df1f6e0b3
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-connectparam.js
@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that AudioNodeActor#connectParam() work.
+ * Uses the editor front as the actors do not retain connect state.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+
+  let [dest, osc, gain] = actors;
+
+  yield osc.disconnect();
+
+  osc.connectParam(gain, "gain");
+  yield Promise.all([
+    waitForGraphRendered(panelWin, 3, 1, 1),
+    once(gAudioNodes, "connect")
+  ]);
+  ok(true, "Oscillator connect to Gain's Gain AudioParam, event emitted.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-automation-data-01.js b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-automation-data-01.js
new file mode 100644
index 000000000..8bb35d270
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-automation-data-01.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test AudioNode#addAutomationEvent() checking automation values, also using
+ * a curve as the last event to check duration spread.
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
+  let [_, [destNode, oscNode, gainNode]] = yield Promise.all([
+    front.setup({ reload: true }),
+    get3(front, "create-node")
+  ]);
+
+  let t0 = 0, t1 = 0.1, t2 = 0.2, t3 = 0.3, t4 = 0.4, t5 = 0.6, t6 = 0.7, t7 = 1;
+  let curve = [-1, 0, 1];
+  yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [0.2, t0]);
+  yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [0.3, t1]);
+  yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [0.4, t2]);
+  yield oscNode.addAutomationEvent("frequency", "linearRampToValueAtTime", [1, t3]);
+  yield oscNode.addAutomationEvent("frequency", "linearRampToValueAtTime", [0.15, t4]);
+  yield oscNode.addAutomationEvent("frequency", "exponentialRampToValueAtTime", [0.75, t5]);
+  yield oscNode.addAutomationEvent("frequency", "exponentialRampToValueAtTime", [0.05, t6]);
+  // End with a curve here so we can get proper results on the last event (which takes into account
+  // duration)
+  yield oscNode.addAutomationEvent("frequency", "setValueCurveAtTime", [curve, t6, t7 - t6]);
+
+  let { events, values } = yield oscNode.getAutomationData("frequency");
+
+  is(events.length, 8, "8 recorded events returned.");
+  is(values.length, 2000, "2000 value points returned.");
+
+  checkAutomationValue(values, 0.05, 0.2);
+  checkAutomationValue(values, 0.1, 0.3);
+  checkAutomationValue(values, 0.15, 0.3);
+  checkAutomationValue(values, 0.2, 0.4);
+  checkAutomationValue(values, 0.25, 0.7);
+  checkAutomationValue(values, 0.3, 1);
+  checkAutomationValue(values, 0.35, 0.575);
+  checkAutomationValue(values, 0.4, 0.15);
+  checkAutomationValue(values, 0.45, 0.15 * Math.pow(0.75/0.15,0.05/0.2));
+  checkAutomationValue(values, 0.5, 0.15 * Math.pow(0.75/0.15,0.5));
+  checkAutomationValue(values, 0.55, 0.15 * Math.pow(0.75/0.15,0.15/0.2));
+  checkAutomationValue(values, 0.6, 0.75);
+  checkAutomationValue(values, 0.65, 0.75 * Math.pow(0.05/0.75, 0.5));
+  checkAutomationValue(values, 0.705, -1); // Increase this time a bit to prevent off by the previous exponential amount
+  checkAutomationValue(values, 0.8, 0);
+  checkAutomationValue(values, 0.9, 1);
+  checkAutomationValue(values, 1, 1);
+
+  yield removeTab(target.tab);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-automation-data-02.js b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-automation-data-02.js
new file mode 100644
index 000000000..0ace882cd
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-automation-data-02.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test AudioNode#addAutomationEvent() when automation series ends with
+ * `setTargetAtTime`, which approaches its target to infinity.
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
+  let [_, [destNode, oscNode, gainNode]] = yield Promise.all([
+    front.setup({ reload: true }),
+    get3(front, "create-node")
+  ]);
+
+  yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [300, 0.1]);
+  yield oscNode.addAutomationEvent("frequency", "linearRampToValueAtTime", [500, 0.4]);
+  yield oscNode.addAutomationEvent("frequency", "exponentialRampToValueAtTime", [200, 0.6]);
+  // End with a setTargetAtTime event, as the target approaches infinity, which will
+  // give us more points to render than the default 2000
+  yield oscNode.addAutomationEvent("frequency", "setTargetAtTime", [1000, 2, 0.5]);
+
+  var { events, values } = yield oscNode.getAutomationData("frequency");
+
+  is(events.length, 4, "4 recorded events returned.");
+  is(values.length, 4000, "4000 value points returned when ending with exponentiall approaching automator.");
+
+  checkAutomationValue(values, 2.01, 215.055)
+  checkAutomationValue(values, 2.1, 345.930);
+  checkAutomationValue(values, 3, 891.601);
+  checkAutomationValue(values, 5, 998.01);
+
+  // Refetch the automation data to ensure it recalculates correctly (bug 1118071)
+  var { events, values } = yield oscNode.getAutomationData("frequency");
+
+  checkAutomationValue(values, 2.01, 215.055)
+  checkAutomationValue(values, 2.1, 345.930);
+  checkAutomationValue(values, 3, 891.601);
+  checkAutomationValue(values, 5, 998.01);
+
+  yield removeTab(target.tab);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-automation-data-03.js b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-automation-data-03.js
new file mode 100644
index 000000000..13fb287b3
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-automation-data-03.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test that `cancelScheduledEvents` clears out events on and after
+ * its argument.
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
+  let [_, [destNode, oscNode, gainNode]] = yield Promise.all([
+    front.setup({ reload: true }),
+    get3(front, "create-node")
+  ]);
+
+  yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [300, 0]);
+  yield oscNode.addAutomationEvent("frequency", "linearRampToValueAtTime", [500, 0.9]);
+  yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [700, 1]);
+  yield oscNode.addAutomationEvent("frequency", "exponentialRampToValueAtTime", [1000, 2]);
+  yield oscNode.addAutomationEvent("frequency", "cancelScheduledValues", [1]);
+
+  var { events, values } = yield oscNode.getAutomationData("frequency");
+
+  is(events.length, 2, "2 recorded events returned.");
+  is(values.length, 2000, "2000 value points returned");
+
+  checkAutomationValue(values, 0, 300);
+  checkAutomationValue(values, 0.5, 411.15);
+  checkAutomationValue(values, 0.9, 499.9);
+  checkAutomationValue(values, 1, 499.9);
+  checkAutomationValue(values, 2, 499.9);
+
+  yield removeTab(target.tab);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-param-flags.js b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-param-flags.js
new file mode 100644
index 000000000..c7ba798af
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-param-flags.js
@@ -0,0 +1,47 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test AudioNode#getParamFlags()
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(SIMPLE_NODES_URL);
+  let [_, nodes] = yield Promise.all([
+    front.setup({ reload: true }),
+    getN(front, "create-node", 15)
+  ]);
+
+  let allNodeParams = yield Promise.all(nodes.map(node => node.getParams()));
+  let nodeTypes = [
+    "AudioDestinationNode",
+    "AudioBufferSourceNode", "ScriptProcessorNode", "AnalyserNode", "GainNode",
+    "DelayNode", "BiquadFilterNode", "WaveShaperNode", "PannerNode", "ConvolverNode",
+    "ChannelSplitterNode", "ChannelMergerNode", "DynamicsCompressorNode", "OscillatorNode",
+    "StereoPannerNode"
+  ];
+
+  // For some reason nodeTypes.forEach and params.forEach fail here so we use
+  // simple for loops.
+  for (let i = 0; i < nodeTypes.length; i++) {
+    let type = nodeTypes[i];
+    let params = allNodeParams[i];
+
+    for (let {param, value, flags} of params) {
+      let testFlags = yield nodes[i].getParamFlags(param);
+      ok(typeof testFlags === "object", type + " has flags from #getParamFlags(" + param + ")");
+
+      if (param === "buffer") {
+        is(flags.Buffer, true, "`buffer` params have Buffer flag");
+      }
+      else if (param === "bufferSize" || param === "frequencyBinCount") {
+        is(flags.readonly, true, param + " is readonly");
+      }
+      else if (param === "curve") {
+        is(flags["Float32Array"], true, "`curve` param has Float32Array flag");
+      }
+    }
+  }
+
+  yield removeTab(target.tab);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-params-01.js b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-params-01.js
new file mode 100644
index 000000000..b04ae2463
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-params-01.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test AudioNode#getParams()
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(SIMPLE_NODES_URL);
+  let [_, nodes] = yield Promise.all([
+    front.setup({ reload: true }),
+    getN(front, "create-node", 15)
+  ]);
+
+  let allNodeParams = yield Promise.all(nodes.map(node => node.getParams()));
+  let nodeTypes = [
+    "AudioDestinationNode",
+    "AudioBufferSourceNode", "ScriptProcessorNode", "AnalyserNode", "GainNode",
+    "DelayNode", "BiquadFilterNode", "WaveShaperNode", "PannerNode", "ConvolverNode",
+    "ChannelSplitterNode", "ChannelMergerNode", "DynamicsCompressorNode", "OscillatorNode",
+    "StereoPannerNode"
+  ];
+
+  nodeTypes.forEach((type, i) => {
+    let params = allNodeParams[i];
+    params.forEach(({param, value, flags}) => {
+      ok(param in NODE_DEFAULT_VALUES[type], "expected parameter for " + type);
+
+      ok(typeof flags === "object", type + " has a flags object");
+
+      if (param === "buffer") {
+        is(flags.Buffer, true, "`buffer` params have Buffer flag");
+      }
+      else if (param === "bufferSize" || param === "frequencyBinCount") {
+        is(flags.readonly, true, param + " is readonly");
+      }
+      else if (param === "curve") {
+        is(flags["Float32Array"], true, "`curve` param has Float32Array flag");
+      }
+    });
+  });
+
+  yield removeTab(target.tab);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-params-02.js b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-params-02.js
new file mode 100644
index 000000000..ce2eca630
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-params-02.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that default properties are returned with the correct type
+ * from the AudioNode actors.
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(SIMPLE_NODES_URL);
+  let [_, nodes] = yield Promise.all([
+    front.setup({ reload: true }),
+    getN(front, "create-node", 15)
+  ]);
+
+  let allParams = yield Promise.all(nodes.map(node => node.getParams()));
+  let types = [
+    "AudioDestinationNode", "AudioBufferSourceNode", "ScriptProcessorNode",
+    "AnalyserNode", "GainNode", "DelayNode", "BiquadFilterNode", "WaveShaperNode",
+    "PannerNode", "ConvolverNode", "ChannelSplitterNode", "ChannelMergerNode",
+    "DynamicsCompressorNode", "OscillatorNode", "StereoPannerNode"
+  ];
+
+  allParams.forEach((params, i) => {
+    compare(params, NODE_DEFAULT_VALUES[types[i]], types[i]);
+  });
+
+  yield removeTab(target.tab);
+});
+
+function compare (actual, expected, type) {
+  actual.forEach(({ value, param }) => {
+    value = getGripValue(value);
+    if (typeof expected[param] === "function") {
+      ok(expected[param](value), type + " has a passing value for " + param);
+    }
+    else {
+      ise(value, expected[param], type + " has correct default value and type for " + param);
+    }
+  });
+
+  is(actual.length, Object.keys(expected).length,
+    type + " has correct amount of properties.");
+}
diff --git a/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-set-param.js b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-set-param.js
new file mode 100644
index 000000000..4679159aa
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-set-param.js
@@ -0,0 +1,47 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test AudioNode#getParam() / AudioNode#setParam()
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
+  let [_, [destNode, oscNode, gainNode]] = yield Promise.all([
+    front.setup({ reload: true }),
+    get3(front, "create-node")
+  ]);
+
+  let freq = yield oscNode.getParam("frequency");
+  info(typeof freq);
+  ise(freq, 440, "AudioNode:getParam correctly fetches AudioParam");
+
+  let type = yield oscNode.getParam("type");
+  ise(type, "sine", "AudioNode:getParam correctly fetches non-AudioParam");
+
+  type = yield oscNode.getParam("not-a-valid-param");
+  ok(type.type === "undefined",
+    "AudioNode:getParam correctly returns a grip value for `undefined` for an invalid param.");
+
+  let resSuccess = yield oscNode.setParam("frequency", 220);
+  freq = yield oscNode.getParam("frequency");
+  ise(freq, 220, "AudioNode:setParam correctly sets a `number` AudioParam");
+  is(resSuccess, undefined, "AudioNode:setParam returns undefined for correctly set AudioParam");
+
+  resSuccess = yield oscNode.setParam("type", "square");
+  type = yield oscNode.getParam("type");
+  ise(type, "square", "AudioNode:setParam correctly sets a `string` non-AudioParam");
+  is(resSuccess, undefined, "AudioNode:setParam returns undefined for correctly set AudioParam");
+
+  try {
+    yield oscNode.setParam("frequency", "hello");
+    ok(false, "setParam with invalid types should throw");
+  } catch (e) {
+    ok(/is not a finite floating-point/.test(e.message), "AudioNode:setParam returns error with correct message when attempting an invalid assignment");
+    is(e.type, "TypeError", "AudioNode:setParam returns error with correct type when attempting an invalid assignment");
+    freq = yield oscNode.getParam("frequency");
+    ise(freq, 220, "AudioNode:setParam does not modify value when an error occurs");
+  }
+
+  yield removeTab(target.tab);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-type.js b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-type.js
new file mode 100644
index 000000000..94d31a6c3
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-get-type.js
@@ -0,0 +1,28 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test AudioNode#getType()
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(SIMPLE_NODES_URL);
+  let [_, nodes] = yield Promise.all([
+    front.setup({ reload: true }),
+    getN(front, "create-node", 14)
+  ]);
+
+  let actualTypes = yield Promise.all(nodes.map(node => node.getType()));
+  let expectedTypes = [
+    "AudioDestinationNode",
+    "AudioBufferSourceNode", "ScriptProcessorNode", "AnalyserNode", "GainNode",
+    "DelayNode", "BiquadFilterNode", "WaveShaperNode", "PannerNode", "ConvolverNode",
+    "ChannelSplitterNode", "ChannelMergerNode", "DynamicsCompressorNode", "OscillatorNode"
+  ];
+
+  expectedTypes.forEach((type, i) => {
+    is(actualTypes[i], type, type + " successfully created with correct type");
+  });
+
+  yield removeTab(target.tab);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-is-source.js b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-is-source.js
new file mode 100644
index 000000000..13523fb36
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_audionode-actor-is-source.js
@@ -0,0 +1,27 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test AudioNode#isSource()
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(SIMPLE_NODES_URL);
+  let [_, nodes] = yield Promise.all([
+    front.setup({ reload: true }),
+    getN(front, "create-node", 14)
+  ]);
+
+  let actualTypes = yield Promise.all(nodes.map(node => node.getType()));
+  let isSourceResult = yield Promise.all(nodes.map(node => node.isSource()));
+
+  actualTypes.forEach((type, i) => {
+    let shouldBeSource = type === "AudioBufferSourceNode" || type === "OscillatorNode";
+    if (shouldBeSource)
+      is(isSourceResult[i], true, type + "'s isSource() yields into `true`");
+    else
+      is(isSourceResult[i], false, type + "'s isSource() yields into `false`");
+  });
+
+  yield removeTab(target.tab);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_callwatcher-01.js b/toolkit/devtools/webaudioeditor/test/browser_callwatcher-01.js
new file mode 100644
index 000000000..a3dc801c6
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_callwatcher-01.js
@@ -0,0 +1,26 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Bug 1130901
+ * Tests to ensure that calling call/apply on methods wrapped
+ * via CallWatcher do not throw a security permissions error:
+ * "Error: Permission denied to access property 'call'"
+ */
+
+const BUG_1130901_URL = EXAMPLE_URL + "doc_bug_1130901.html";
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(BUG_1130901_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
+
+  reload(target);
+
+  yield waitForGraphRendered(panelWin, 3, 0);
+
+  ok(true, "Successfully created a node from AudioContext via `call`.");
+  ok(true, "Successfully created a node from AudioContext via `apply`.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_callwatcher-02.js b/toolkit/devtools/webaudioeditor/test/browser_callwatcher-02.js
new file mode 100644
index 000000000..8dc95e0c5
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_callwatcher-02.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Bug 1112378
+ * Tests to ensure that errors called on wrapped functions via call-watcher
+ * correctly looks like the error comes from the content, not from within the devtools.
+ */
+
+const BUG_1112378_URL = EXAMPLE_URL + "doc_bug_1112378.html";
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(BUG_1112378_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
+
+  loadFrameScripts();
+
+  reload(target);
+
+  yield waitForGraphRendered(panelWin, 2, 0);
+
+  let error = yield evalInDebuggee("throwError()");
+  is(error.lineNumber, 21, "error has correct lineNumber");
+  is(error.columnNumber, 11, "error has correct columnNumber");
+  is(error.name, "TypeError", "error has correct name");
+  is(error.message, "Argument 1 is not valid for any of the 2-argument overloads of AudioNode.connect.", "error has correct message");
+  is(error.stringified, "TypeError: Argument 1 is not valid for any of the 2-argument overloads of AudioNode.connect.", "error is stringified correctly");
+  ise(error.instanceof, true, "error is correctly an instanceof TypeError");
+  is(error.fileName, "http://example.com/browser/browser/devtools/webaudioeditor/test/doc_bug_1112378.html", "error has correct fileName");
+
+  error = yield evalInDebuggee("throwDOMException()");
+  is(error.lineNumber, 37, "exception has correct lineNumber");
+  is(error.columnNumber, 0, "exception has correct columnNumber");
+  is(error.code, 9, "exception has correct code");
+  is(error.result, 2152923145, "exception has correct result");
+  is(error.name, "NotSupportedError", "exception has correct name");
+  is(error.message, "Operation is not supported", "exception has correct message");
+  is(error.stringified, "NotSupportedError: Operation is not supported", "exception is stringified correctly");
+  ise(error.instanceof, true, "exception is correctly an instance of DOMException");
+  is(error.filename, "http://example.com/browser/browser/devtools/webaudioeditor/test/doc_bug_1112378.html", "exception has correct filename");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_automation-view-01.js b/toolkit/devtools/webaudioeditor/test/browser_wa_automation-view-01.js
new file mode 100644
index 000000000..59aaf2795
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_automation-view-01.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that automation view shows the correct view depending on if events
+ * or params exist.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(AUTOMATION_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS } = panelWin;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  let nodeIds = actors.map(actor => actor.actorID);
+  let $tabbox = $("#web-audio-editor-tabs");
+
+  // Oscillator node
+  click(panelWin, findGraphNode(panelWin, nodeIds[1]));
+  yield waitForInspectorRender(panelWin, EVENTS);
+  $tabbox.selectedIndex = 1;
+
+  ok(isVisible($("#automation-graph-container")), "graph container should be visible");
+  ok(isVisible($("#automation-content")), "automation content should be visible");
+  ok(!isVisible($("#automation-no-events")), "no-events panel should not be visible");
+  ok(!isVisible($("#automation-empty")), "empty panel should not be visible");
+
+  // Gain node
+  click(panelWin, findGraphNode(panelWin, nodeIds[2]));
+  yield waitForInspectorRender(panelWin, EVENTS);
+  $tabbox.selectedIndex = 1;
+
+  ok(!isVisible($("#automation-graph-container")), "graph container should not be visible");
+  ok(isVisible($("#automation-content")), "automation content should be visible");
+  ok(isVisible($("#automation-no-events")), "no-events panel should be visible");
+  ok(!isVisible($("#automation-empty")), "empty panel should not be visible");
+
+  // destination node
+  click(panelWin, findGraphNode(panelWin, nodeIds[0]));
+  yield waitForInspectorRender(panelWin, EVENTS);
+  $tabbox.selectedIndex = 1;
+
+  ok(!isVisible($("#automation-graph-container")), "graph container should not be visible");
+  ok(!isVisible($("#automation-content")), "automation content should not be visible");
+  ok(!isVisible($("#automation-no-events")), "no-events panel should not be visible");
+  ok(isVisible($("#automation-empty")), "empty panel should be visible");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_automation-view-02.js b/toolkit/devtools/webaudioeditor/test/browser_wa_automation-view-02.js
new file mode 100644
index 000000000..ecb9957ae
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_automation-view-02.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that automation view selects the first parameter by default and
+ * switching between AudioParam rerenders the graph.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(AUTOMATION_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, AutomationView } = panelWin;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  let nodeIds = actors.map(actor => actor.actorID);
+
+
+  // Oscillator node
+  click(panelWin, findGraphNode(panelWin, nodeIds[1]));
+  yield waitForInspectorRender(panelWin, EVENTS);
+  click(panelWin, $("#automation-tab"));
+
+  ok(AutomationView._selectedParamName, "frequency",
+    "AutomatioView is set on 'frequency'");
+  ok($(".automation-param-button[data-param='frequency']").getAttribute("selected"),
+    "frequency param should be selected on load");
+  ok(!$(".automation-param-button[data-param='detune']").getAttribute("selected"),
+    "detune param should not be selected on load");
+  ok(isVisible($("#automation-content")), "automation content should be visible");
+  ok(isVisible($("#automation-graph-container")), "graph container should be visible");
+  ok(!isVisible($("#automation-no-events")), "no-events panel should not be visible");
+
+  click(panelWin, $(".automation-param-button[data-param='detune']"));
+  yield once(panelWin, EVENTS.UI_AUTOMATION_TAB_RENDERED);
+
+  ok(true, "automation tab rerendered");
+
+  ok(AutomationView._selectedParamName, "detune",
+    "AutomatioView is set on 'detune'");
+  ok(!$(".automation-param-button[data-param='frequency']").getAttribute("selected"),
+    "frequency param should not be selected after clicking detune");
+  ok($(".automation-param-button[data-param='detune']").getAttribute("selected"),
+    "detune param should be selected after clicking detune");
+  ok(isVisible($("#automation-content")), "automation content should be visible");
+  ok(!isVisible($("#automation-graph-container")), "graph container should not be visible");
+  ok(isVisible($("#automation-no-events")), "no-events panel should be visible");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_controller-01.js b/toolkit/devtools/webaudioeditor/test/browser_wa_controller-01.js
new file mode 100644
index 000000000..3fb70b1ed
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_controller-01.js
@@ -0,0 +1,27 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Bug 1125817
+ * Tests to ensure that disconnecting a node immediately
+ * after creating it does not fail.
+ */
+
+const BUG_1125817_URL = EXAMPLE_URL + "doc_bug_1125817.html";
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(BUG_1125817_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    once(gAudioNodes, "add", 2),
+    once(gAudioNodes, "disconnect")
+  ]);
+
+  ok(true, "Successfully disconnected a just-created node.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_destroy-node-01.js b/toolkit/devtools/webaudioeditor/test/browser_wa_destroy-node-01.js
new file mode 100644
index 000000000..ca62a581d
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_destroy-node-01.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the destruction node event is fired and that the nodes are no
+ * longer stored internally in the tool, that the graph is updated properly, and
+ * that selecting a soon-to-be dead node clears the inspector.
+ *
+ * All done in one test since this test takes a few seconds to clear GC.
+ */
+
+add_task(function*() {
+  // Use a longer timeout as garbage collection event
+  // can be unpredictable.
+  requestLongerTimeout(2);
+
+  let { target, panel } = yield initWebAudioEditor(DESTROY_NODES_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, gAudioNodes } = panelWin;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let destroyed = getN(gAudioNodes, "remove", 10);
+
+  forceCC();
+
+  let [created] = yield Promise.all([
+    getNSpread(gAudioNodes, "add", 13),
+    waitForGraphRendered(panelWin, 13, 2)
+  ]);
+
+  // Flatten arrays of event arguments and take the first (AudioNodeModel)
+  // and get its ID.
+  let actorIDs = created.map(ev => ev[0].id);
+
+  // Click a soon-to-be dead buffer node
+  yield clickGraphNode(panelWin, actorIDs[5]);
+
+  forceCC();
+
+  // Wait for destruction and graph to re-render
+  yield Promise.all([destroyed, waitForGraphRendered(panelWin, 3, 2)]);
+
+  // Test internal storage
+  is(panelWin.gAudioNodes.length, 3, "All nodes should be GC'd except one gain, osc and dest node.");
+
+  // Test graph rendering
+  ok(findGraphNode(panelWin, actorIDs[0]), "dest should be in graph");
+  ok(findGraphNode(panelWin, actorIDs[1]), "osc should be in graph");
+  ok(findGraphNode(panelWin, actorIDs[2]), "gain should be in graph");
+
+  let { nodes, edges } = countGraphObjects(panelWin);
+
+  is(nodes, 3, "Only 3 nodes rendered in graph.");
+  is(edges, 2, "Only 2 edges rendered in graph.");
+
+  // Test that the inspector reset to no node selected
+  ok(isVisible($("#web-audio-editor-details-pane-empty")),
+    "InspectorView empty message should show if the currently selected node gets collected.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_first-run.js b/toolkit/devtools/webaudioeditor/test/browser_wa_first-run.js
new file mode 100644
index 000000000..5229b0923
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_first-run.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+///////////////////
+//
+// Whitelisting this test.
+// As part of bug 1077403, the leaking uncaught rejection should be fixed. 
+//
+thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Connection closed");
+
+/**
+ * Tests that the reloading/onContentLoaded hooks work.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { gFront, $ } = panel.panelWin;
+
+  is($("#reload-notice").hidden, false,
+    "The 'reload this page' notice should initially be visible.");
+  is($("#waiting-notice").hidden, true,
+    "The 'waiting for an audio context' notice should initially be hidden.");
+  is($("#content").hidden, true,
+    "The tool's content should initially be hidden.");
+
+  let navigating = once(target, "will-navigate");
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  yield navigating;
+
+  is($("#reload-notice").hidden, true,
+    "The 'reload this page' notice should be hidden when navigating.");
+  is($("#waiting-notice").hidden, false,
+    "The 'waiting for an audio context' notice should be visible when navigating.");
+  is($("#content").hidden, true,
+    "The tool's content should still be hidden.");
+
+  yield started;
+
+  is($("#reload-notice").hidden, true,
+    "The 'reload this page' notice should be hidden after context found.");
+  is($("#waiting-notice").hidden, true,
+    "The 'waiting for an audio context' notice should be hidden after context found.");
+  is($("#content").hidden, false,
+    "The tool's content should not be hidden anymore.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_graph-click.js b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-click.js
new file mode 100644
index 000000000..d14d3e027
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-click.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the clicking on a node in the GraphView opens and sets
+ * the correct node in the InspectorView
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(COMPLEX_CONTEXT_URL);
+  let panelWin = panel.panelWin;
+  let { gFront, $, $$, InspectorView } = panelWin;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors, _] = yield Promise.all([
+    getN(gFront, "create-node", 8),
+    waitForGraphRendered(panel.panelWin, 8, 8)
+  ]);
+
+  let nodeIds = actors.map(actor => actor.actorID);
+
+  ok(!InspectorView.isVisible(), "InspectorView hidden on start.");
+
+  yield clickGraphNode(panelWin, nodeIds[1], true);
+
+  ok(InspectorView.isVisible(), "InspectorView visible after selecting a node.");
+  is(InspectorView.getCurrentAudioNode().id, nodeIds[1], "InspectorView has correct node set.");
+
+  yield clickGraphNode(panelWin, nodeIds[2]);
+
+  ok(InspectorView.isVisible(), "InspectorView still visible after selecting another node.");
+  is(InspectorView.getCurrentAudioNode().id, nodeIds[2], "InspectorView has correct node set on second node.");
+
+  yield clickGraphNode(panelWin, nodeIds[2]);
+  is(InspectorView.getCurrentAudioNode().id, nodeIds[2], "Clicking the same node again works (idempotent).");
+
+  yield clickGraphNode(panelWin, $("rect", findGraphNode(panelWin, nodeIds[3])));
+  is(InspectorView.getCurrentAudioNode().id, nodeIds[3], "Clicking on a <rect> works as expected.");
+
+  yield clickGraphNode(panelWin, $("tspan", findGraphNode(panelWin, nodeIds[4])));
+  is(InspectorView.getCurrentAudioNode().id, nodeIds[4], "Clicking on a <tspan> works as expected.");
+
+  ok(InspectorView.isVisible(),
+    "InspectorView still visible after several nodes have been clicked.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_graph-markers.js b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-markers.js
new file mode 100644
index 000000000..684561161
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-markers.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the SVG marker styling is updated when devtools theme changes.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, MARKER_STYLING } = panelWin;
+
+  let currentTheme = Services.prefs.getCharPref("devtools.theme");
+
+  ok(MARKER_STYLING.light, "Marker styling exists for light theme.");
+  ok(MARKER_STYLING.dark, "Marker styling exists for dark theme.");
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+
+  is(getFill($("#arrowhead")), MARKER_STYLING[currentTheme],
+    "marker initially matches theme.");
+
+  // Switch to light
+  setTheme("light");
+  is(getFill($("#arrowhead")), MARKER_STYLING.light,
+    "marker styling matches light theme on change.");
+
+  // Switch to dark
+  setTheme("dark");
+  is(getFill($("#arrowhead")), MARKER_STYLING.dark,
+    "marker styling matches dark theme on change.");
+
+  // Switch to dark again
+  setTheme("dark");
+  is(getFill($("#arrowhead")), MARKER_STYLING.dark,
+    "marker styling remains dark.");
+
+  // Switch to back to light again
+  setTheme("light");
+  is(getFill($("#arrowhead")), MARKER_STYLING.light,
+    "marker styling switches back to light once again.");
+
+  yield teardown(target);
+});
+
+/**
+ * Returns a hex value found in styling for an element. So parses
+ * <marker style="fill: #abcdef"> and returns "#abcdef"
+ */
+function getFill (el) {
+  return el.getAttribute("style").match(/(#.*)$/)[1];
+}
+
+/**
+ * Mimics selecting the theme selector in the toolbox;
+ * sets the preference and emits an event on gDevTools to trigger
+ * the themeing.
+ */
+function setTheme (newTheme) {
+  let oldTheme = Services.prefs.getCharPref("devtools.theme");
+  info("Setting `devtools.theme` to \"" + newTheme + "\"");
+  Services.prefs.setCharPref("devtools.theme", newTheme);
+  gDevTools.emit("pref-changed", {
+    pref: "devtools.theme",
+    newValue: newTheme,
+    oldValue: oldTheme
+  });
+}
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-01.js b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-01.js
new file mode 100644
index 000000000..fdbe1ce5d
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-01.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that SVG nodes and edges were created for the Graph View.
+ */
+
+let connectCount = 0;
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  gAudioNodes.on("connect", onConnectNode);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+
+  let [destId, oscId, gainId] = actors.map(actor => actor.actorID);
+
+  ok(findGraphNode(panelWin, oscId).classList.contains("type-OscillatorNode"), "found OscillatorNode with class");
+  ok(findGraphNode(panelWin, gainId).classList.contains("type-GainNode"), "found GainNode with class");
+  ok(findGraphNode(panelWin, destId).classList.contains("type-AudioDestinationNode"), "found AudioDestinationNode with class");
+  is(findGraphEdge(panelWin, oscId, gainId).toString(), "[object SVGGElement]", "found edge for osc -> gain");
+  is(findGraphEdge(panelWin, gainId, destId).toString(), "[object SVGGElement]", "found edge for gain -> dest");
+
+  yield wait(1000);
+
+  is(connectCount, 2, "Only two node connect events should be fired.");
+
+  gAudioNodes.off("connect", onConnectNode);
+
+  yield teardown(target);
+});
+
+function onConnectNode () {
+  ++connectCount;
+}
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-02.js b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-02.js
new file mode 100644
index 000000000..825ab76b9
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-02.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests more edge rendering for complex graphs.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(COMPLEX_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$ } = panelWin;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    getN(gFront, "create-node", 8),
+    waitForGraphRendered(panelWin, 8, 8)
+  ]);
+
+  let nodeIDs = actors.map(actor => actor.actorID);
+
+  let types = ["AudioDestinationNode", "OscillatorNode", "GainNode", "ScriptProcessorNode",
+               "OscillatorNode", "GainNode", "AudioBufferSourceNode", "BiquadFilterNode"];
+
+
+  types.forEach((type, i) => {
+    ok(findGraphNode(panelWin, nodeIDs[i]).classList.contains("type-" + type), "found " + type + " with class");
+  });
+
+  let edges = [
+    [1, 2, "osc1 -> gain1"],
+    [1, 3, "osc1 -> proc"],
+    [2, 0, "gain1 -> dest"],
+    [4, 5, "osc2 -> gain2"],
+    [5, 0, "gain2 -> dest"],
+    [6, 7, "buf -> filter"],
+    [4, 7, "osc2 -> filter"],
+    [7, 0, "filter -> dest"],
+  ];
+
+  edges.forEach(([source, target, msg], i) => {
+    is(findGraphEdge(panelWin, nodeIDs[source], nodeIDs[target]).toString(), "[object SVGGElement]",
+      "found edge for " + msg);
+  });
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-03.js b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-03.js
new file mode 100644
index 000000000..4486483fa
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-03.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests to ensure that selected nodes stay selected on graph redraw.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS } = panelWin;
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    getN(gFront, "create-node", 3),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+
+  let [dest, osc, gain] = actors;
+
+  yield clickGraphNode(panelWin, gain.actorID);
+  ok(findGraphNode(panelWin, gain.actorID).classList.contains("selected"),
+    "Node selected once.");
+
+  // Disconnect a node to trigger a rerender
+  osc.disconnect();
+
+  yield once(panelWin, EVENTS.UI_GRAPH_RENDERED);
+  
+  ok(findGraphNode(panelWin, gain.actorID).classList.contains("selected"),
+    "Node still selected after rerender.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-04.js b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-04.js
new file mode 100644
index 000000000..84db904a9
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-04.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests audio param connection rendering.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(CONNECT_MULTI_PARAM_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS } = panelWin;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    getN(gFront, "create-node", 5),
+    waitForGraphRendered(panelWin, 5, 2, 3)
+  ]);
+
+  let nodeIDs = actors.map(actor => actor.actorID);
+
+  let [, carrier, gain, mod1, mod2] = nodeIDs;
+
+  let edges = [
+    [mod1, gain, "gain", "mod1 -> gain[gain]"],
+    [mod2, carrier, "frequency", "mod2 -> carrier[frequency]"],
+    [mod2, carrier, "detune", "mod2 -> carrier[detune]"]
+  ];
+
+  edges.forEach(([source, target, param, msg], i) => {
+    let edge = findGraphEdge(panelWin, source, target, param);
+    ok(edge.classList.contains("param-connection"), "edge is classified as a param-connection");
+  });
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-05.js b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-05.js
new file mode 100644
index 000000000..b1ddd78b3
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-render-05.js
@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests to ensure that param connections trigger graph redraws
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS } = panelWin;
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    getN(gFront, "create-node", 3),
+    waitForGraphRendered(panelWin, 3, 2, 0)
+  ]);
+
+  let [dest, osc, gain] = actors;
+
+  yield osc.disconnect();
+
+  osc.connectParam(gain, "gain");
+  yield waitForGraphRendered(panelWin, 3, 1, 1);
+  ok(true, "Graph re-rendered upon param connection");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_graph-selected.js b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-selected.js
new file mode 100644
index 000000000..4ee7e04fe
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-selected.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that SVG nodes and edges were created for the Graph View.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS } = panelWin;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+
+  let [destId, oscId, gainId] = actors.map(actor => actor.actorID);
+
+  ok(!findGraphNode(panelWin, destId).classList.contains("selected"),
+    "No nodes selected on start. (destination)");
+  ok(!findGraphNode(panelWin, oscId).classList.contains("selected"),
+    "No nodes selected on start. (oscillator)");
+  ok(!findGraphNode(panelWin, gainId).classList.contains("selected"),
+    "No nodes selected on start. (gain)");
+
+  yield clickGraphNode(panelWin, oscId);
+
+  ok(findGraphNode(panelWin, oscId).classList.contains("selected"),
+    "Selected node has class 'selected'.");
+  ok(!findGraphNode(panelWin, destId).classList.contains("selected"),
+    "Non-selected nodes do not have class 'selected'.");
+  ok(!findGraphNode(panelWin, gainId).classList.contains("selected"),
+    "Non-selected nodes do not have class 'selected'.");
+
+  yield clickGraphNode(panelWin, gainId);
+
+  ok(!findGraphNode(panelWin, oscId).classList.contains("selected"),
+    "Previously selected node no longer has class 'selected'.");
+  ok(!findGraphNode(panelWin, destId).classList.contains("selected"),
+    "Non-selected nodes do not have class 'selected'.");
+  ok(findGraphNode(panelWin, gainId).classList.contains("selected"),
+    "Newly selected node now has class 'selected'.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_graph-zoom.js b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-zoom.js
new file mode 100644
index 000000000..d06cc1549
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_graph-zoom.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the graph's scale and position is reset on a page reload.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, ContextView } = panelWin;
+
+  let started = once(gFront, "start-context");
+
+  yield Promise.all([
+    reload(target),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+
+  is(ContextView.getCurrentScale(), 1, "Default graph scale is 1.");
+  is(ContextView.getCurrentTranslation()[0], 20, "Default x-translation is 20.");
+  is(ContextView.getCurrentTranslation()[1], 20, "Default y-translation is 20.");
+
+  // Change both attribute and D3's internal store
+  panelWin.d3.select("#graph-target").attr("transform", "translate([100, 400]) scale(10)");
+  ContextView._zoomBinding.scale(10);
+  ContextView._zoomBinding.translate([100, 400]);
+
+  is(ContextView.getCurrentScale(), 10, "After zoom, scale is 10.");
+  is(ContextView.getCurrentTranslation()[0], 100, "After zoom, x-translation is 100.");
+  is(ContextView.getCurrentTranslation()[1], 400, "After zoom, y-translation is 400.");
+
+  yield Promise.all([
+    reload(target),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+
+  is(ContextView.getCurrentScale(), 1, "After refresh, graph scale is 1.");
+  is(ContextView.getCurrentTranslation()[0], 20, "After refresh, x-translation is 20.");
+  is(ContextView.getCurrentTranslation()[1], 20, "After refresh, y-translation is 20.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_inspector-bypass-01.js b/toolkit/devtools/webaudioeditor/test/browser_wa_inspector-bypass-01.js
new file mode 100644
index 000000000..b6c2a061c
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_inspector-bypass-01.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that nodes are correctly bypassed when bypassing.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  let nodeIds = actors.map(actor => actor.actorID);
+
+  click(panelWin, findGraphNode(panelWin, nodeIds[1]));
+  // Wait for the node to be set as well as the inspector to come fully into the view
+  yield Promise.all([
+    waitForInspectorRender(panelWin, EVENTS),
+    once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED)
+  ]);
+
+  let $bypass = $("toolbarbutton.bypass");
+
+  is((yield actors[1].isBypassed()), false, "AudioNodeActor is not bypassed by default.")
+  is($bypass.checked, true, "Button is 'on' for normal nodes");
+  is($bypass.disabled, false, "Bypass button is not disabled for normal nodes");
+
+  command($bypass);
+  yield gAudioNodes.once("bypass");
+
+  is((yield actors[1].isBypassed()), true, "AudioNodeActor is bypassed.")
+  is($bypass.checked, false, "Button is 'off' when clicked");
+  is($bypass.disabled, false, "Bypass button is not disabled after click");
+  ok(findGraphNode(panelWin, nodeIds[1]).classList.contains("bypassed"),
+    "AudioNode has 'bypassed' class.");
+
+  command($bypass);
+  yield gAudioNodes.once("bypass");
+
+  is((yield actors[1].isBypassed()), false, "AudioNodeActor is no longer bypassed.")
+  is($bypass.checked, true, "Button is back on when clicked");
+  is($bypass.disabled, false, "Bypass button is not disabled after click");
+  ok(!findGraphNode(panelWin, nodeIds[1]).classList.contains("bypassed"),
+    "AudioNode no longer has 'bypassed' class.");
+
+  click(panelWin, findGraphNode(panelWin, nodeIds[0]));
+
+  yield once(panelWin, EVENTS.UI_INSPECTOR_NODE_SET);
+
+  is((yield actors[0].isBypassed()), false, "Unbypassable AudioNodeActor is not bypassed.");
+  is($bypass.checked, false, "Button is 'off' for unbypassable nodes");
+  is($bypass.disabled, true, "Bypass button is disabled for unbypassable nodes");
+
+  command($bypass);
+  is((yield actors[0].isBypassed()), false,
+    "Clicking button on unbypassable node does not change bypass state on actor.");
+  is($bypass.checked, false, "Button is still 'off' for unbypassable nodes");
+  is($bypass.disabled, true, "Bypass button is still disabled for unbypassable nodes");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_inspector-toggle.js b/toolkit/devtools/webaudioeditor/test/browser_wa_inspector-toggle.js
new file mode 100644
index 000000000..33b20559d
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_inspector-toggle.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the inspector toggle button shows and hides
+ * the inspector panel as intended.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, InspectorView } = panelWin;
+  let gVars = InspectorView._propsView;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  let nodeIds = actors.map(actor => actor.actorID);
+
+  ok(!InspectorView.isVisible(), "InspectorView hidden on start.");
+
+  // Open inspector pane
+  $("#inspector-pane-toggle").click();
+  yield once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED);
+
+  ok(InspectorView.isVisible(), "InspectorView shown after toggling.");
+
+  ok(isVisible($("#web-audio-editor-details-pane-empty")),
+    "InspectorView empty message should still be visible.");
+  ok(!isVisible($("#web-audio-editor-tabs")),
+    "InspectorView tabs view should still be hidden.");
+
+  // Close inspector pane
+  $("#inspector-pane-toggle").click();
+  yield once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED);
+
+  ok(!InspectorView.isVisible(), "InspectorView back to being hidden.");
+
+  // Open again to test node loading while open
+  $("#inspector-pane-toggle").click();
+  yield once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED);
+
+  ok(InspectorView.isVisible(), "InspectorView being shown.");
+  ok(!isVisible($("#web-audio-editor-tabs")),
+    "InspectorView tabs are still hidden.");
+
+  yield clickGraphNode(panelWin, findGraphNode(panelWin, nodeIds[1]));
+
+  ok(!isVisible($("#web-audio-editor-details-pane-empty")),
+    "Empty message hides even when loading node while open.");
+  ok(isVisible($("#web-audio-editor-tabs")),
+    "Switches to tab view when loading node while open.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_inspector-width.js b/toolkit/devtools/webaudioeditor/test/browser_wa_inspector-width.js
new file mode 100644
index 000000000..5d2c44c5b
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_inspector-width.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test that the WebAudioInspector's Width is saved as
+ * a preference
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, InspectorView } = panelWin;
+  let gVars = InspectorView._propsView;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  let nodeIds = actors.map(actor => actor.actorID);
+
+  ok(!InspectorView.isVisible(), "InspectorView hidden on start.");
+
+  // Open inspector pane
+  $("#inspector-pane-toggle").click();
+  yield once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED);
+
+  let newInspectorWidth = 500;
+
+  // Setting width to new_inspector_width
+  $("#web-audio-inspector").setAttribute("width", newInspectorWidth);
+  reload(target);
+
+  //Width should be 500 after reloading
+  [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  nodeIds = actors.map(actor => actor.actorID);
+
+  // Open inspector pane
+  $("#inspector-pane-toggle").click();
+  yield once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED);
+
+  yield clickGraphNode(panelWin, findGraphNode(panelWin, nodeIds[1]));
+ 
+  // Getting the width of the audio inspector
+  let width = $("#web-audio-inspector").getAttribute("width");
+
+  is(width, newInspectorWidth, "WebAudioEditor's Inspector width should be saved as a preference");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_inspector.js b/toolkit/devtools/webaudioeditor/test/browser_wa_inspector.js
new file mode 100644
index 000000000..083bf2671
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_inspector.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that inspector view opens on graph node click, and
+ * loads the correct node inside the inspector.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, InspectorView } = panelWin;
+  let gVars = InspectorView._propsView;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  let nodeIds = actors.map(actor => actor.actorID);
+
+  ok(!InspectorView.isVisible(), "InspectorView hidden on start.");
+  ok(isVisible($("#web-audio-editor-details-pane-empty")),
+    "InspectorView empty message should show when no node's selected.");
+  ok(!isVisible($("#web-audio-editor-tabs")),
+    "InspectorView tabs view should be hidden when no node's selected.");
+
+  // Wait for the node to be set as well as the inspector to come fully into the view
+  yield clickGraphNode(panelWin, findGraphNode(panelWin, nodeIds[1]), true);
+
+  ok(InspectorView.isVisible(), "InspectorView shown once node selected.");
+  ok(!isVisible($("#web-audio-editor-details-pane-empty")),
+    "InspectorView empty message hidden when node selected.");
+  ok(isVisible($("#web-audio-editor-tabs")),
+    "InspectorView tabs view visible when node selected.");
+
+  is($("#web-audio-editor-tabs").selectedIndex, 0,
+    "default tab selected should be the parameters tab.");
+
+  yield clickGraphNode(panelWin, findGraphNode(panelWin, nodeIds[2]));
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_navigate.js b/toolkit/devtools/webaudioeditor/test/browser_wa_navigate.js
new file mode 100644
index 000000000..598deabd3
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_navigate.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests naviating from a page to another will repopulate
+ * the audio graph if both pages have an AudioContext.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $ } = panelWin;
+
+  reload(target);
+
+  var [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+
+  var { nodes, edges } = countGraphObjects(panelWin);
+  ise(nodes, 3, "should only be 3 nodes.");
+  ise(edges, 2, "should only be 2 edges.");
+
+  navigate(target, SIMPLE_NODES_URL);
+
+  var [actors] = yield Promise.all([
+    getN(gFront, "create-node", 15),
+    waitForGraphRendered(panelWin, 15, 0)
+  ]);
+
+  is($("#reload-notice").hidden, true,
+    "The 'reload this page' notice should be hidden after context found after navigation.");
+  is($("#waiting-notice").hidden, true,
+    "The 'waiting for an audio context' notice should be hidden after context found after navigation.");
+  is($("#content").hidden, false,
+    "The tool's content should reappear without closing and reopening the toolbox.");
+
+  var { nodes, edges } = countGraphObjects(panelWin);
+  ise(nodes, 15, "after navigation, should have 15 nodes");
+  ise(edges, 0, "after navigation, should have 0 edges.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-edit-01.js b/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-edit-01.js
new file mode 100644
index 000000000..bebcbc32d
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-edit-01.js
@@ -0,0 +1,65 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that properties are updated when modifying the VariablesView.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, PropertiesView } = panelWin;
+  let gVars = PropertiesView._propsView;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  let nodeIds = actors.map(actor => actor.actorID);
+
+  click(panelWin, findGraphNode(panelWin, nodeIds[1]));
+  // Wait for the node to be set as well as the inspector to come fully into the view
+  yield Promise.all([
+    waitForInspectorRender(panelWin, EVENTS),
+    once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED)
+  ]);
+
+  let setAndCheck = setAndCheckVariable(panelWin, gVars);
+
+  checkVariableView(gVars, 0, {
+    "type": "sine",
+    "frequency": 440,
+    "detune": 0
+  }, "default loaded string");
+
+  click(panelWin, findGraphNode(panelWin, nodeIds[2]));
+  yield waitForInspectorRender(panelWin, EVENTS),
+  checkVariableView(gVars, 0, {
+    "gain": 0
+  }, "default loaded number");
+
+  click(panelWin, findGraphNode(panelWin, nodeIds[1]));
+  yield waitForInspectorRender(panelWin, EVENTS),
+  yield setAndCheck(0, "type", "square", "square", "sets string as string");
+
+  click(panelWin, findGraphNode(panelWin, nodeIds[2]));
+  yield waitForInspectorRender(panelWin, EVENTS),
+  yield setAndCheck(0, "gain", "0.005", 0.005, "sets number as number");
+  yield setAndCheck(0, "gain", "0.1", 0.1, "sets float as float");
+  yield setAndCheck(0, "gain", ".2", 0.2, "sets float without leading zero as float");
+
+  yield teardown(target);
+});
+
+function setAndCheckVariable (panelWin, gVars) {
+  return Task.async(function (varNum, prop, value, expected, desc) {
+    yield modifyVariableView(panelWin, gVars, varNum, prop, value);
+    var props = {};
+    props[prop] = expected;
+    checkVariableView(gVars, varNum, props, desc);
+  });
+}
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-edit-02.js b/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-edit-02.js
new file mode 100644
index 000000000..f7f439832
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-edit-02.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that properties are not updated when modifying the VariablesView.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(COMPLEX_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, PropertiesView } = panelWin;
+  let gVars = PropertiesView._propsView;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    getN(gFront, "create-node", 8),
+    waitForGraphRendered(panelWin, 8, 8)
+  ]);
+  let nodeIds = actors.map(actor => actor.actorID);
+
+  click(panelWin, findGraphNode(panelWin, nodeIds[3]));
+  // Wait for the node to be set as well as the inspector to come fully into the view
+  yield Promise.all([
+    waitForInspectorRender(panelWin, EVENTS),
+    once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED),
+  ]);
+
+  let errorEvent = once(panelWin, EVENTS.UI_SET_PARAM_ERROR);
+
+  try {
+    yield modifyVariableView(panelWin, gVars, 0, "bufferSize", 2048);
+  } catch(e) {
+    // we except modifyVariableView to fail here, because bufferSize is not writable
+  }
+
+  yield errorEvent;
+
+  checkVariableView(gVars, 0, {bufferSize: 4096}, "check that unwritable variable is not updated");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-media-nodes.js b/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-media-nodes.js
new file mode 100644
index 000000000..917ecc390
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-media-nodes.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that params view correctly displays all properties for nodes
+ * correctly, with default values and correct types.
+ */
+
+let MEDIA_PERMISSION = "media.navigator.permission.disabled";
+
+function waitForDeviceClosed() {
+  info("Checking that getUserMedia streams are no longer in use.");
+
+  let temp = {};
+  Cu.import("resource:///modules/webrtcUI.jsm", temp);
+  let webrtcUI = temp.webrtcUI;
+
+  if (!webrtcUI.showGlobalIndicator)
+    return Promise.resolve();
+
+  let deferred = Promise.defer();
+
+  const message = "webrtc:UpdateGlobalIndicators";
+  let ppmm = Cc["@mozilla.org/parentprocessmessagemanager;1"]
+               .getService(Ci.nsIMessageBroadcaster);
+  ppmm.addMessageListener(message, function listener(aMessage) {
+    info("Received " + message + " message");
+    if (!aMessage.data.showGlobalIndicator) {
+      ppmm.removeMessageListener(message, listener);
+      deferred.resolve();
+    }
+  });
+
+  return deferred.promise;
+}
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(MEDIA_NODES_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, PropertiesView } = panelWin;
+  let gVars = PropertiesView._propsView;
+
+  // Auto enable getUserMedia
+  let mediaPermissionPref = Services.prefs.getBoolPref(MEDIA_PERMISSION);
+  Services.prefs.setBoolPref(MEDIA_PERMISSION, true);
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    getN(gFront, "create-node", 4),
+    waitForGraphRendered(panelWin, 4, 0)
+  ]);
+
+  let nodeIds = actors.map(actor => actor.actorID);
+  let types = [
+    "AudioDestinationNode", "MediaElementAudioSourceNode",
+    "MediaStreamAudioSourceNode", "MediaStreamAudioDestinationNode"
+  ];
+
+  for (let i = 0; i < types.length; i++) {
+    click(panelWin, findGraphNode(panelWin, nodeIds[i]));
+    yield waitForInspectorRender(panelWin, EVENTS);
+    checkVariableView(gVars, 0, NODE_DEFAULT_VALUES[types[i]], types[i]);
+  }
+
+  // Reset permissions on getUserMedia
+  Services.prefs.setBoolPref(MEDIA_PERMISSION, mediaPermissionPref);
+
+  yield teardown(target);
+
+  yield waitForDeviceClosed();
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-params-objects.js b/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-params-objects.js
new file mode 100644
index 000000000..61fe5398e
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-params-objects.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that params view correctly displays non-primitive properties
+ * like AudioBuffer and Float32Array in properties of AudioNodes.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(BUFFER_AND_ARRAY_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, PropertiesView } = panelWin;
+  let gVars = PropertiesView._propsView;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    getN(gFront, "create-node", 3),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  let nodeIds = actors.map(actor => actor.actorID);
+
+  click(panelWin, findGraphNode(panelWin, nodeIds[2]));
+  yield waitForInspectorRender(panelWin, EVENTS);
+  checkVariableView(gVars, 0, {
+    "curve": "Float32Array"
+  }, "WaveShaper's `curve` is listed as an `Float32Array`.");
+
+  let aVar = gVars.getScopeAtIndex(0).get("curve")
+  let state = aVar.target.querySelector(".theme-twisty").hasAttribute("invisible");
+  ok(state, "Float32Array property should not have a dropdown.");
+
+  click(panelWin, findGraphNode(panelWin, nodeIds[1]));
+  yield waitForInspectorRender(panelWin, EVENTS);
+  checkVariableView(gVars, 0, {
+    "buffer": "AudioBuffer"
+  }, "AudioBufferSourceNode's `buffer` is listed as an `AudioBuffer`.");
+
+  aVar = gVars.getScopeAtIndex(0).get("buffer")
+  state = aVar.target.querySelector(".theme-twisty").hasAttribute("invisible");
+  ok(state, "AudioBuffer property should not have a dropdown.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-params.js b/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-params.js
new file mode 100644
index 000000000..5af047ff0
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view-params.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that params view correctly displays all properties for nodes
+ * correctly, with default values and correct types.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_NODES_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, PropertiesView } = panelWin;
+  let gVars = PropertiesView._propsView;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    getN(gFront, "create-node", 15),
+    waitForGraphRendered(panelWin, 15, 0)
+  ]);
+  let nodeIds = actors.map(actor => actor.actorID);
+  let types = [
+    "AudioDestinationNode", "AudioBufferSourceNode", "ScriptProcessorNode",
+    "AnalyserNode", "GainNode", "DelayNode", "BiquadFilterNode", "WaveShaperNode",
+    "PannerNode", "ConvolverNode", "ChannelSplitterNode", "ChannelMergerNode",
+    "DynamicsCompressorNode", "OscillatorNode"
+  ];
+
+  for (let i = 0; i < types.length; i++) {
+    click(panelWin, findGraphNode(panelWin, nodeIds[i]));
+    yield waitForInspectorRender(panelWin, EVENTS);
+    checkVariableView(gVars, 0, NODE_DEFAULT_VALUES[types[i]], types[i]);
+  }
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view.js b/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view.js
new file mode 100644
index 000000000..702f1161f
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_properties-view.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that params view shows params when they exist, and are hidden otherwise.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, PropertiesView } = panelWin;
+  let gVars = PropertiesView._propsView;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  let nodeIds = actors.map(actor => actor.actorID);
+
+  // Gain node
+  click(panelWin, findGraphNode(panelWin, nodeIds[2]));
+  yield waitForInspectorRender(panelWin, EVENTS);
+
+  ok(isVisible($("#properties-content")), "Parameters shown when they exist.");
+  ok(!isVisible($("#properties-empty")),
+    "Empty message hidden when AudioParams exist.");
+
+  // Destination node
+  click(panelWin, findGraphNode(panelWin, nodeIds[0]));
+  yield waitForInspectorRender(panelWin, EVENTS);
+
+  ok(!isVisible($("#properties-content")),
+    "Parameters hidden when they don't exist.");
+  ok(isVisible($("#properties-empty")),
+    "Empty message shown when no AudioParams exist.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_reset-01.js b/toolkit/devtools/webaudioeditor/test/browser_wa_reset-01.js
new file mode 100644
index 000000000..3208227ac
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_reset-01.js
@@ -0,0 +1,65 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+///////////////////
+//
+// Whitelisting this test.
+// As part of bug 1077403, the leaking uncaught rejection should be fixed. 
+//
+thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Connection closed");
+
+/**
+ * Tests that reloading a tab will properly listen for the `start-context`
+ * event and reshow the tools after reloading.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { gFront, $ } = panel.panelWin;
+
+  is($("#reload-notice").hidden, false,
+    "The 'reload this page' notice should initially be visible.");
+  is($("#waiting-notice").hidden, true,
+    "The 'waiting for an audio context' notice should initially be hidden.");
+  is($("#content").hidden, true,
+    "The tool's content should initially be hidden.");
+
+  let navigating = once(target, "will-navigate");
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  yield navigating;
+
+  is($("#reload-notice").hidden, true,
+    "The 'reload this page' notice should be hidden when navigating.");
+  is($("#waiting-notice").hidden, false,
+    "The 'waiting for an audio context' notice should be visible when navigating.");
+  is($("#content").hidden, true,
+    "The tool's content should still be hidden.");
+
+  yield started;
+
+  is($("#reload-notice").hidden, true,
+    "The 'reload this page' notice should be hidden after context found.");
+  is($("#waiting-notice").hidden, true,
+    "The 'waiting for an audio context' notice should be hidden after context found.");
+  is($("#content").hidden, false,
+    "The tool's content should not be hidden anymore.");
+
+  navigating = once(target, "will-navigate");
+  started = once(gFront, "start-context");
+
+  reload(target);
+
+  yield Promise.all([navigating, started]);
+
+  is($("#reload-notice").hidden, true,
+    "The 'reload this page' notice should be hidden after context found after reload.");
+  is($("#waiting-notice").hidden, true,
+    "The 'waiting for an audio context' notice should be hidden after context found after reload.");
+  is($("#content").hidden, false,
+    "The tool's content should reappear without closing and reopening the toolbox.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_reset-02.js b/toolkit/devtools/webaudioeditor/test/browser_wa_reset-02.js
new file mode 100644
index 000000000..478b9f5db
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_reset-02.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests reloading a tab with the tools open properly cleans up
+ * the graph.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $ } = panelWin;
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+
+  let { nodes, edges } = countGraphObjects(panelWin);
+  ise(nodes, 3, "should only be 3 nodes.");
+  ise(edges, 2, "should only be 2 edges.");
+
+  reload(target);
+
+  [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+
+  ({ nodes, edges } = countGraphObjects(panelWin));
+  ise(nodes, 3, "after reload, should only be 3 nodes.");
+  ise(edges, 2, "after reload, should only be 2 edges.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_reset-03.js b/toolkit/devtools/webaudioeditor/test/browser_wa_reset-03.js
new file mode 100644
index 000000000..60c9572d1
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_reset-03.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests reloading a tab with the tools open properly cleans up
+ * the inspector and selected node.
+ */
+
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, InspectorView } = panelWin;
+
+  reload(target);
+
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  let nodeIds = actors.map(actor => actor.actorID);
+
+  yield clickGraphNode(panelWin, nodeIds[1], true);
+  ok(InspectorView.isVisible(), "InspectorView visible after selecting a node.");
+  is(InspectorView.getCurrentAudioNode().id, nodeIds[1], "InspectorView has correct node set.");
+
+  /**
+   * Reload
+   */
+
+  reload(target);
+
+  [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  nodeIds = actors.map(actor => actor.actorID);
+
+  ok(!InspectorView.isVisible(), "InspectorView hidden on start.");
+  ise(InspectorView.getCurrentAudioNode(), null,
+    "InspectorView has no current node set on reset.");
+
+  yield clickGraphNode(panelWin, nodeIds[2], true);
+  ok(InspectorView.isVisible(),
+    "InspectorView visible after selecting a node after a reset.");
+  is(InspectorView.getCurrentAudioNode().id, nodeIds[2], "InspectorView has correct node set upon clicking graph node after a reset.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_wa_reset-04.js b/toolkit/devtools/webaudioeditor/test/browser_wa_reset-04.js
new file mode 100644
index 000000000..3bef5775d
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_wa_reset-04.js
@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+///////////////////
+//
+// Whitelisting this test.
+// As part of bug 1077403, the leaking uncaught rejection should be fixed. 
+//
+thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Connection closed");
+
+/**
+ * Tests that switching to an iframe works fine.
+ */
+
+add_task(function*() {
+  Services.prefs.setBoolPref("devtools.command-button-frames.enabled", true);
+
+  let { target, panel, toolbox } = yield initWebAudioEditor(IFRAME_CONTEXT_URL);
+  let { gFront, $ } = panel.panelWin;
+
+  is($("#reload-notice").hidden, false,
+    "The 'reload this page' notice should initially be visible.");
+  is($("#waiting-notice").hidden, true,
+    "The 'waiting for an audio context' notice should initially be hidden.");
+  is($("#content").hidden, true,
+    "The tool's content should initially be hidden.");
+
+  let btn = toolbox.doc.getElementById("command-button-frames");
+  ok(!btn.firstChild.getAttribute("hidden"), "The frame list button is visible");
+  let frameBtns = btn.firstChild.querySelectorAll("[data-window-id]");
+  is(frameBtns.length, 2, "We have both frames in the list");
+
+  // Select the iframe
+  frameBtns[1].click();
+
+  let navigating = once(target, "will-navigate");
+
+  yield navigating;
+
+  is($("#reload-notice").hidden, false,
+    "The 'reload this page' notice should still be visible when switching to a frame.");
+  is($("#waiting-notice").hidden, true,
+    "The 'waiting for an audio context' notice should be kept hidden when switching to a frame.");
+  is($("#content").hidden, true,
+    "The tool's content should still be hidden.");
+
+  navigating = once(target, "will-navigate");
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  yield Promise.all([navigating, started]);
+
+  is($("#reload-notice").hidden, true,
+    "The 'reload this page' notice should be hidden after reloading the frame.");
+  is($("#waiting-notice").hidden, true,
+    "The 'waiting for an audio context' notice should be hidden after reloading the frame.");
+  is($("#content").hidden, false,
+    "The tool's content should appear after reload.");
+
+  yield teardown(target);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_webaudio-actor-automation-event.js b/toolkit/devtools/webaudioeditor/test/browser_webaudio-actor-automation-event.js
new file mode 100644
index 000000000..ef98dfac9
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_webaudio-actor-automation-event.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test that the WebAudioActor receives and emits the `automation-event` events
+ * with correct arguments from the content.
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(AUTOMATION_URL);
+  let events = [];
+
+  let expected = [
+    ["setValueAtTime", 0.2, 0],
+    ["linearRampToValueAtTime", 1, 0.3],
+    ["exponentialRampToValueAtTime", 0.75, 0.6],
+    ["setValueCurveAtTime", [-1, 0 ,1], 0.7, 0.3],
+  ];
+
+  front.on("automation-event", onAutomationEvent);
+
+  let [_, __, [destNode, oscNode, gainNode], [connect1, connect2]] = yield Promise.all([
+    front.setup({ reload: true }),
+    once(front, "start-context"),
+    get3(front, "create-node"),
+    get2(front, "connect-node")
+  ]);
+
+  is(events.length, 4, "correct number of events fired");
+
+  function onAutomationEvent (e) {
+    let { eventName, paramName, args } = e;
+    let exp = expected[events.length];
+
+    is(eventName, exp[0], "correct eventName in event");
+    is(paramName, "frequency", "correct paramName in event");
+    is(args.length, exp.length - 1, "correct length in args");
+
+    args.forEach((a, i) => {
+      // In the case of an array
+      if (typeof a === "object") {
+        a.forEach((f, j) => is(f, exp[i + 1][j], `correct argument in Float32Array: ${f}`));
+      } else {
+        is(a, exp[i + 1], `correct ${i+1}th argument in args: ${a}`);
+      }
+    });
+    events.push([eventName].concat(args));
+  }
+
+  front.off("automation-event", onAutomationEvent);
+  yield removeTab(target.tab);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_webaudio-actor-connect-param.js b/toolkit/devtools/webaudioeditor/test/browser_webaudio-actor-connect-param.js
new file mode 100644
index 000000000..a436401dc
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_webaudio-actor-connect-param.js
@@ -0,0 +1,25 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test the `connect-param` event on the web audio actor.
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(CONNECT_PARAM_URL);
+  let [, , [destNode, carrierNode, modNode, gainNode], , connectParam] = yield Promise.all([
+    front.setup({ reload: true }),
+    once(front, "start-context"),
+    getN(front, "create-node", 4),
+    get2(front, "connect-node"),
+    once(front, "connect-param")
+  ]);
+
+  info(connectParam);
+
+  is(connectParam.source.actorID, modNode.actorID, "`connect-param` has correct actor for `source`");
+  is(connectParam.dest.actorID, gainNode.actorID, "`connect-param` has correct actor for `dest`");
+  is(connectParam.param, "gain", "`connect-param` has correct parameter name for `param`");
+
+  yield removeTab(target.tab);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/browser_webaudio-actor-destroy-node.js b/toolkit/devtools/webaudioeditor/test/browser_webaudio-actor-destroy-node.js
new file mode 100644
index 000000000..60140dbde
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_webaudio-actor-destroy-node.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test `destroy-node` event on WebAudioActor.
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(DESTROY_NODES_URL);
+
+  let waitUntilDestroyed = getN(front, "destroy-node", 10);
+  let [, , created] = yield Promise.all([
+    front.setup({ reload: true }),
+    once(front, "start-context"),
+    // Should create 1 destination node and 10 disposable buffer nodes
+    getN(front, "create-node", 13)
+  ]);
+
+  // Force CC so we can ensure it's run to clear out dead AudioNodes
+  forceCC();
+
+  let destroyed = yield waitUntilDestroyed;
+
+  let destroyedTypes = yield Promise.all(destroyed.map(actor => actor.getType()));
+  destroyedTypes.forEach((type, i) => {
+    ok(type, "AudioBufferSourceNode", "Only buffer nodes are destroyed");
+    ok(actorIsInList(created, destroyed[i]),
+      "`destroy-node` called only on AudioNodes in current document.");
+  });
+
+  yield removeTab(target.tab);
+});
+
+function actorIsInList (list, actor) {
+  for (let i = 0; i < list.length; i++) {
+    if (list[i].actorID === actor.actorID)
+      return list[i];
+  }
+  return null;
+}
diff --git a/toolkit/devtools/webaudioeditor/test/browser_webaudio-actor-simple.js b/toolkit/devtools/webaudioeditor/test/browser_webaudio-actor-simple.js
new file mode 100644
index 000000000..949e19f0f
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/browser_webaudio-actor-simple.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test basic communication of Web Audio actor
+ */
+
+add_task(function*() {
+  let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
+  let [_, __, [destNode, oscNode, gainNode], [connect1, connect2]] = yield Promise.all([
+    front.setup({ reload: true }),
+    once(front, "start-context"),
+    get3(front, "create-node"),
+    get2(front, "connect-node")
+  ]);
+
+  let destType = yield destNode.getType();
+  let oscType = yield oscNode.getType();
+  let gainType = yield gainNode.getType();
+
+  is(destType, "AudioDestinationNode", "WebAudioActor:create-node returns AudioNodeActor for AudioDestination");
+  is(oscType, "OscillatorNode", "WebAudioActor:create-node returns AudioNodeActor");
+  is(gainType, "GainNode", "WebAudioActor:create-node returns AudioNodeActor");
+
+  let { source, dest } = connect1;
+  is(source.actorID, oscNode.actorID, "WebAudioActor:connect-node returns correct actor with ID on source (osc->gain)");
+  is(dest.actorID, gainNode.actorID, "WebAudioActor:connect-node returns correct actor with ID on dest (osc->gain)");
+
+  ({ source, dest } = connect2);
+  is(source.actorID, gainNode.actorID, "WebAudioActor:connect-node returns correct actor with ID on source (gain->dest)");
+  is(dest.actorID, destNode.actorID, "WebAudioActor:connect-node returns correct actor with ID on dest (gain->dest)");
+
+  yield removeTab(target.tab);
+});
diff --git a/toolkit/devtools/webaudioeditor/test/doc_automation.html b/toolkit/devtools/webaudioeditor/test/doc_automation.html
new file mode 100644
index 000000000..6f074208c
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/doc_automation.html
@@ -0,0 +1,30 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Web Audio Editor test page</title>
+  </head>
+
+  <body>
+
+    <script type="text/javascript;version=1.8">
+      "use strict";
+
+      let ctx = new AudioContext();
+      let osc = ctx.createOscillator();
+      let gain = ctx.createGain();
+      gain.gain.value = 0;
+      osc.frequency.setValueAtTime(0.2, 0);
+      osc.frequency.linearRampToValueAtTime(1, 0.3);
+      osc.frequency.exponentialRampToValueAtTime(0.75, 0.6);
+      osc.frequency.setValueCurveAtTime(new Float32Array([-1, 0, 1]), 0.7, 0.3);
+      osc.connect(gain);
+      gain.connect(ctx.destination);
+      osc.start(0);
+    </script>
+  </body>
+
+</html>
diff --git a/toolkit/devtools/webaudioeditor/test/doc_buffer-and-array.html b/toolkit/devtools/webaudioeditor/test/doc_buffer-and-array.html
new file mode 100644
index 000000000..49dc91f29
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/doc_buffer-and-array.html
@@ -0,0 +1,56 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Web Audio Editor test page</title>
+  </head>
+
+  <body>
+
+    <script type="text/javascript;version=1.8">
+      "use strict";
+
+      let audioURL = "http://example.com/browser/browser/devtools/webaudioeditor/test/440hz_sine.ogg";
+
+      let ctx = new AudioContext();
+      let bufferNode = ctx.createBufferSource();
+      let shaperNode = ctx.createWaveShaper();
+      shaperNode.curve = generateWaveShapingCurve();
+
+      let xhr = getBuffer(audioURL, () => {
+        ctx.decodeAudioData(xhr.response, (buffer) => {
+          bufferNode.buffer = buffer;
+          bufferNode.connect(shaperNode);
+          shaperNode.connect(ctx.destination);
+        });
+      });
+
+      function generateWaveShapingCurve() {
+        let frames = 65536;
+        let curve = new Float32Array(frames);
+        let n = frames;
+        let n2 = n / 2;
+
+        for (let i = 0; i < n; ++i) {
+          let x = (i - n2) / n2;
+          let y = Math.atan(5 * x) / (0.5 * Math.PI);
+        }
+
+        return curve;
+      }
+
+      function getBuffer (url, callback) {
+        let xhr = new XMLHttpRequest();
+        xhr.open("GET", url, true);
+        xhr.responseType = "arraybuffer";
+        xhr.onload = callback;
+        xhr.send();
+        return xhr;
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/toolkit/devtools/webaudioeditor/test/doc_bug_1112378.html b/toolkit/devtools/webaudioeditor/test/doc_bug_1112378.html
new file mode 100644
index 000000000..ecdfd7d63
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/doc_bug_1112378.html
@@ -0,0 +1,57 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Web Audio Editor test page</title>
+  </head>
+
+  <body>
+
+    <script type="text/javascript;version=1.8">
+      "use strict";
+
+      let ctx = new AudioContext();
+      let osc = ctx.createOscillator();
+
+      function throwError () {
+        try {
+          osc.connect({});
+        } catch (e) {
+          return {
+            lineNumber: e.lineNumber,
+            fileName: e.fileName,
+            columnNumber: e.columnNumber,
+            message: e.message,
+            instanceof: e instanceof TypeError,
+            stringified: e.toString(),
+            name: e.name
+          }
+        }
+      }
+
+      function throwDOMException () {
+        try {
+          osc.frequency.setValueAtTime(0, -1);
+        } catch (e) {
+          return {
+            lineNumber: e.lineNumber,
+            columnNumber: e.columnNumber,
+            filename: e.filename,
+            message: e.message,
+            code: e.code,
+            result: e.result,
+            instanceof: e instanceof DOMException,
+            stringified: e.toString(),
+            name: e.name
+          }
+        }
+      }
+
+
+    </script>
+  </body>
+
+</html>
diff --git a/toolkit/devtools/webaudioeditor/test/doc_bug_1125817.html b/toolkit/devtools/webaudioeditor/test/doc_bug_1125817.html
new file mode 100644
index 000000000..49a2be11a
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/doc_bug_1125817.html
@@ -0,0 +1,23 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Web Audio Editor test page</title>
+  </head>
+
+  <body>
+
+    <script type="text/javascript;version=1.8">
+      "use strict";
+
+      let ctx = new AudioContext();
+      let osc = ctx.createOscillator();
+      osc.frequency.value = 200;
+      osc.disconnect();
+    </script>
+  </body>
+
+</html>
diff --git a/toolkit/devtools/webaudioeditor/test/doc_bug_1130901.html b/toolkit/devtools/webaudioeditor/test/doc_bug_1130901.html
new file mode 100644
index 000000000..1ce1ebf55
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/doc_bug_1130901.html
@@ -0,0 +1,22 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Web Audio Editor test page</title>
+  </head>
+
+  <body>
+
+    <script type="text/javascript;version=1.8">
+      "use strict";
+
+      let ctx = new AudioContext();
+      ctx.createOscillator.call(ctx);
+      ctx.createGain.apply(ctx, []);
+    </script>
+  </body>
+
+</html>
diff --git a/toolkit/devtools/webaudioeditor/test/doc_complex-context.html b/toolkit/devtools/webaudioeditor/test/doc_complex-context.html
new file mode 100644
index 000000000..396bbce3f
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/doc_complex-context.html
@@ -0,0 +1,44 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Web Audio Editor test page</title>
+  </head>
+
+  <body>
+
+    <script type="text/javascript;version=1.8">
+      "use strict";
+
+/*
+         ↱   proc
+  osc    →   gain   →
+  osc    →   gain   →  destination
+  buffer →↳  filter →
+*/
+      let ctx = new AudioContext();
+      let osc1 = ctx.createOscillator();
+      let gain1 = ctx.createGain();
+      let proc = ctx.createScriptProcessor();
+      osc1.connect(gain1);
+      osc1.connect(proc);
+      gain1.connect(ctx.destination);
+
+      let osc2 = ctx.createOscillator();
+      let gain2 = ctx.createGain();
+      osc2.connect(gain2);
+      gain2.connect(ctx.destination);
+
+      let buf = ctx.createBufferSource();
+      let filter = ctx.createBiquadFilter();
+      buf.connect(filter);
+      osc2.connect(filter);
+      filter.connect(ctx.destination);
+
+    </script>
+  </body>
+
+</html>
diff --git a/toolkit/devtools/webaudioeditor/test/doc_connect-multi-param.html b/toolkit/devtools/webaudioeditor/test/doc_connect-multi-param.html
new file mode 100644
index 000000000..ed4bd84e8
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/doc_connect-multi-param.html
@@ -0,0 +1,32 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Web Audio Editor test page</title>
+  </head>
+
+  <body>
+
+    <script type="text/javascript;version=1.8">
+      "use strict";
+
+      let ctx = new AudioContext();
+      let carrier = ctx.createOscillator();
+      let gain = ctx.createGain();
+      let modulator = ctx.createOscillator();
+      let modulator2 = ctx.createOscillator();
+      carrier.connect(gain);
+      gain.connect(ctx.destination);
+      modulator.connect(gain.gain);
+      modulator2.connect(carrier.frequency);
+      modulator2.connect(carrier.detune);
+      modulator.start(0);
+      modulator2.start(0);
+      carrier.start(0);
+    </script>
+  </body>
+
+</html>
diff --git a/toolkit/devtools/webaudioeditor/test/doc_connect-param.html b/toolkit/devtools/webaudioeditor/test/doc_connect-param.html
new file mode 100644
index 000000000..9185c0b05
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/doc_connect-param.html
@@ -0,0 +1,28 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Web Audio Editor test page</title>
+  </head>
+
+  <body>
+
+    <script type="text/javascript;version=1.8">
+      "use strict";
+
+      let ctx = new AudioContext();
+      let carrier = ctx.createOscillator();
+      let modulator = ctx.createOscillator();
+      let gain = ctx.createGain();
+      carrier.connect(gain);
+      gain.connect(ctx.destination);
+      modulator.connect(gain.gain);
+      modulator.start(0);
+      carrier.start(0);
+    </script>
+  </body>
+
+</html>
diff --git a/toolkit/devtools/webaudioeditor/test/doc_destroy-nodes.html b/toolkit/devtools/webaudioeditor/test/doc_destroy-nodes.html
new file mode 100644
index 000000000..7738c39ab
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/doc_destroy-nodes.html
@@ -0,0 +1,32 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Web Audio Editor test page</title>
+  </head>
+
+  <body>
+
+    <script type="text/javascript;version=1.8">
+      "use strict";
+      (function () {
+      let ctx = new AudioContext();
+      let osc = ctx.createOscillator();
+      let gain = ctx.createGain();
+
+      for (let i = 0; i < 10; i++) {
+        ctx.createBufferSource();
+      }
+
+      osc.connect(gain);
+      gain.connect(ctx.destination);
+      gain.gain.value = 0;
+      osc.start();
+      })();
+    </script>
+  </body>
+
+</html>
diff --git a/toolkit/devtools/webaudioeditor/test/doc_iframe-context.html b/toolkit/devtools/webaudioeditor/test/doc_iframe-context.html
new file mode 100644
index 000000000..a0a411a47
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/doc_iframe-context.html
@@ -0,0 +1,14 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Web Audio Editor test page with an iframe</title>
+  </head>
+
+  <body>
+    <iframe id="frame" src="doc_simple-context.html" />
+  </body>
+</html>
diff --git a/toolkit/devtools/webaudioeditor/test/doc_media-node-creation.html b/toolkit/devtools/webaudioeditor/test/doc_media-node-creation.html
new file mode 100644
index 000000000..685062e3f
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/doc_media-node-creation.html
@@ -0,0 +1,29 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Web Audio Editor test page</title>
+  </head>
+
+  <body>
+
+    <script type="text/javascript;version=1.8">
+      "use strict";
+
+      let ctx = new AudioContext();
+      let audio = new Audio();
+      let meNode, msNode, mdNode;
+      navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia;
+
+      navigator.getUserMedia({ audio: true }, stream => {
+        meNode = ctx.createMediaElementSource(audio);
+        msNode = ctx.createMediaStreamSource(stream);
+        mdNode = ctx.createMediaStreamDestination();
+      }, () => {});
+    </script>
+  </body>
+
+</html>
diff --git a/toolkit/devtools/webaudioeditor/test/doc_simple-context.html b/toolkit/devtools/webaudioeditor/test/doc_simple-context.html
new file mode 100644
index 000000000..89a84b882
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/doc_simple-context.html
@@ -0,0 +1,33 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Web Audio Editor test page</title>
+  </head>
+
+  <body>
+
+    <script type="text/javascript;version=1.8">
+      "use strict";
+
+      let ctx = new AudioContext();
+      let osc = ctx.createOscillator();
+      let gain = ctx.createGain();
+      gain.gain.value = 0;
+
+      // Connect multiple times to test that it's disregarded.
+      osc.connect(gain);
+      gain.connect(ctx.destination);
+      gain.connect(ctx.destination);
+      gain.connect(ctx.destination);
+      gain.connect(ctx.destination);
+      gain.connect(ctx.destination);
+      gain.connect(ctx.destination);
+      osc.start(0);
+    </script>
+  </body>
+
+</html>
diff --git a/toolkit/devtools/webaudioeditor/test/doc_simple-node-creation.html b/toolkit/devtools/webaudioeditor/test/doc_simple-node-creation.html
new file mode 100644
index 000000000..e6dcf7b32
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/doc_simple-node-creation.html
@@ -0,0 +1,28 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Web Audio Editor test page</title>
+  </head>
+
+  <body>
+
+    <script type="text/javascript;version=1.8">
+      "use strict";
+
+      let ctx = new AudioContext();
+      let NODE_CREATION_METHODS = [
+          "createBufferSource", "createScriptProcessor", "createAnalyser",
+          "createGain", "createDelay", "createBiquadFilter", "createWaveShaper",
+          "createPanner", "createConvolver", "createChannelSplitter", "createChannelMerger",
+          "createDynamicsCompressor", "createOscillator", "createStereoPanner"
+      ];
+      let nodes = NODE_CREATION_METHODS.map(method => ctx[method]());
+
+    </script>
+  </body>
+
+</html>
diff --git a/toolkit/devtools/webaudioeditor/test/head.js b/toolkit/devtools/webaudioeditor/test/head.js
new file mode 100644
index 000000000..13f526a05
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/test/head.js
@@ -0,0 +1,562 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
+
+let { Services } = Cu.import("resource://gre/modules/Services.jsm", {});
+
+// Enable logging for all the tests. Both the debugger server and frontend will
+// be affected by this pref.
+let gEnableLogging = Services.prefs.getBoolPref("devtools.debugger.log");
+Services.prefs.setBoolPref("devtools.debugger.log", false);
+
+let { Task } = Cu.import("resource://gre/modules/Task.jsm", {});
+let { Promise } = Cu.import("resource://gre/modules/Promise.jsm", {});
+let { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+let { devtools } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
+let { DebuggerServer } = Cu.import("resource://gre/modules/devtools/dbg-server.jsm", {});
+let { generateUUID } = Cc["@mozilla.org/uuid-generator;1"].getService(Ci.nsIUUIDGenerator);
+
+let { WebAudioFront } = devtools.require("devtools/server/actors/webaudio");
+let TargetFactory = devtools.TargetFactory;
+let mm = null;
+
+const FRAME_SCRIPT_UTILS_URL = "chrome://browser/content/devtools/frame-script-utils.js";
+const EXAMPLE_URL = "http://example.com/browser/browser/devtools/webaudioeditor/test/";
+const SIMPLE_CONTEXT_URL = EXAMPLE_URL + "doc_simple-context.html";
+const COMPLEX_CONTEXT_URL = EXAMPLE_URL + "doc_complex-context.html";
+const SIMPLE_NODES_URL = EXAMPLE_URL + "doc_simple-node-creation.html";
+const MEDIA_NODES_URL = EXAMPLE_URL + "doc_media-node-creation.html";
+const BUFFER_AND_ARRAY_URL = EXAMPLE_URL + "doc_buffer-and-array.html";
+const DESTROY_NODES_URL = EXAMPLE_URL + "doc_destroy-nodes.html";
+const CONNECT_PARAM_URL = EXAMPLE_URL + "doc_connect-param.html";
+const CONNECT_MULTI_PARAM_URL = EXAMPLE_URL + "doc_connect-multi-param.html";
+const IFRAME_CONTEXT_URL = EXAMPLE_URL + "doc_iframe-context.html";
+const AUTOMATION_URL = EXAMPLE_URL + "doc_automation.html";
+
+// All tests are asynchronous.
+waitForExplicitFinish();
+
+let gToolEnabled = Services.prefs.getBoolPref("devtools.webaudioeditor.enabled");
+
+gDevTools.testing = true;
+
+registerCleanupFunction(() => {
+  gDevTools.testing = false;
+  info("finish() was called, cleaning up...");
+  Services.prefs.setBoolPref("devtools.debugger.log", gEnableLogging);
+  Services.prefs.setBoolPref("devtools.webaudioeditor.enabled", gToolEnabled);
+  Cu.forceGC();
+});
+
+/**
+ * Call manually in tests that use frame script utils after initializing
+ * the web audio editor. Call after init but before navigating to a different page.
+ */
+function loadFrameScripts () {
+  mm = gBrowser.selectedBrowser.messageManager;
+  mm.loadFrameScript(FRAME_SCRIPT_UTILS_URL, false);
+}
+
+function addTab(aUrl, aWindow) {
+  info("Adding tab: " + aUrl);
+
+  let deferred = Promise.defer();
+  let targetWindow = aWindow || window;
+  let targetBrowser = targetWindow.gBrowser;
+
+  targetWindow.focus();
+  let tab = targetBrowser.selectedTab = targetBrowser.addTab(aUrl);
+  let linkedBrowser = tab.linkedBrowser;
+
+  linkedBrowser.addEventListener("load", function onLoad() {
+    linkedBrowser.removeEventListener("load", onLoad, true);
+    info("Tab added and finished loading: " + aUrl);
+    deferred.resolve(tab);
+  }, true);
+
+  return deferred.promise;
+}
+
+function removeTab(aTab, aWindow) {
+  info("Removing tab.");
+
+  let deferred = Promise.defer();
+  let targetWindow = aWindow || window;
+  let targetBrowser = targetWindow.gBrowser;
+  let tabContainer = targetBrowser.tabContainer;
+
+  tabContainer.addEventListener("TabClose", function onClose(aEvent) {
+    tabContainer.removeEventListener("TabClose", onClose, false);
+    info("Tab removed and finished closing.");
+    deferred.resolve();
+  }, false);
+
+  targetBrowser.removeTab(aTab);
+  return deferred.promise;
+}
+
+function once(aTarget, aEventName, aUseCapture = false) {
+  info("Waiting for event: '" + aEventName + "' on " + aTarget + ".");
+
+  let deferred = Promise.defer();
+
+  for (let [add, remove] of [
+    ["on", "off"], // Use event emitter before DOM events for consistency
+    ["addEventListener", "removeEventListener"],
+    ["addListener", "removeListener"]
+  ]) {
+    if ((add in aTarget) && (remove in aTarget)) {
+      aTarget[add](aEventName, function onEvent(...aArgs) {
+        aTarget[remove](aEventName, onEvent, aUseCapture);
+        info("Got event: '" + aEventName + "' on " + aTarget + ".");
+        deferred.resolve(...aArgs);
+      }, aUseCapture);
+      break;
+    }
+  }
+
+  return deferred.promise;
+}
+
+function reload(aTarget, aWaitForTargetEvent = "navigate") {
+  aTarget.activeTab.reload();
+  return once(aTarget, aWaitForTargetEvent);
+}
+
+function navigate(aTarget, aUrl, aWaitForTargetEvent = "navigate") {
+  executeSoon(() => aTarget.activeTab.navigateTo(aUrl));
+  return once(aTarget, aWaitForTargetEvent);
+}
+
+/**
+ * Adds a new tab, and instantiate a WebAudiFront object.
+ * This requires calling removeTab before the test ends.
+ */
+function initBackend(aUrl) {
+  info("Initializing a web audio editor front.");
+
+  if (!DebuggerServer.initialized) {
+    DebuggerServer.init();
+    DebuggerServer.addBrowserActors();
+  }
+
+  return Task.spawn(function*() {
+    let tab = yield addTab(aUrl);
+    let target = TargetFactory.forTab(tab);
+
+    yield target.makeRemote();
+
+    let front = new WebAudioFront(target.client, target.form);
+    return { target, front };
+  });
+}
+
+/**
+ * Adds a new tab, and open the toolbox for that tab, selecting the audio editor
+ * panel.
+ * This requires calling teardown before the test ends.
+ */
+function initWebAudioEditor(aUrl) {
+  info("Initializing a web audio editor pane.");
+
+  return Task.spawn(function*() {
+    let tab = yield addTab(aUrl);
+    let target = TargetFactory.forTab(tab);
+
+    yield target.makeRemote();
+
+    Services.prefs.setBoolPref("devtools.webaudioeditor.enabled", true);
+    let toolbox = yield gDevTools.showToolbox(target, "webaudioeditor");
+    let panel = toolbox.getCurrentPanel();
+    return { target, panel, toolbox };
+  });
+}
+
+/**
+ * Close the toolbox, destroying all panels, and remove the added test tabs.
+ */
+function teardown(aTarget) {
+  info("Destroying the web audio editor.");
+
+  return gDevTools.closeToolbox(aTarget).then(() => {
+    while (gBrowser.tabs.length > 1) {
+      gBrowser.removeCurrentTab();
+    }
+  });
+}
+
+// Due to web audio will fire most events synchronously back-to-back,
+// and we can't yield them in a chain without missing actors, this allows
+// us to listen for `n` events and return a promise resolving to them.
+//
+// Takes a `front` object that is an event emitter, the number of
+// programs that should be listened to and waited on, and an optional
+// `onAdd` function that calls with the entire actors array on program link
+function getN (front, eventName, count, spread) {
+  let actors = [];
+  let deferred = Promise.defer();
+  front.on(eventName, function onEvent (...args) {
+    let actor = args[0];
+    if (actors.length !== count) {
+      actors.push(spread ? args : actor);
+    }
+    if (actors.length === count) {
+      front.off(eventName, onEvent);
+      deferred.resolve(actors);
+    }
+  });
+  return deferred.promise;
+}
+
+function get (front, eventName) { return getN(front, eventName, 1); }
+function get2 (front, eventName) { return getN(front, eventName, 2); }
+function get3 (front, eventName) { return getN(front, eventName, 3); }
+function getSpread (front, eventName) { return getN(front, eventName, 1, true); }
+function get2Spread (front, eventName) { return getN(front, eventName, 2, true); }
+function get3Spread (front, eventName) { return getN(front, eventName, 3, true); }
+function getNSpread (front, eventName, count) { return getN(front, eventName, count, true); }
+
+/**
+ * Waits for the UI_GRAPH_RENDERED event to fire, but only
+ * resolves when the graph was rendered with the correct count of
+ * nodes and edges.
+ */
+function waitForGraphRendered (front, nodeCount, edgeCount, paramEdgeCount) {
+  let deferred = Promise.defer();
+  let eventName = front.EVENTS.UI_GRAPH_RENDERED;
+  front.on(eventName, function onGraphRendered (_, nodes, edges, pEdges) {
+    let paramEdgesDone = paramEdgeCount != null ? paramEdgeCount === pEdges : true;
+    if (nodes === nodeCount && edges === edgeCount && paramEdgesDone) {
+      front.off(eventName, onGraphRendered);
+      deferred.resolve();
+    }
+  });
+  return deferred.promise;
+}
+
+function checkVariableView (view, index, hash, description = "") {
+  info("Checking Variable View");
+  let scope = view.getScopeAtIndex(index);
+  let variables = Object.keys(hash);
+
+  // If node shouldn't display any properties, ensure that the 'empty' message is
+  // visible
+  if (!variables.length) {
+    ok(isVisible(scope.window.$("#properties-empty")),
+      description + " should show the empty properties tab.");
+    return;
+  }
+
+  // Otherwise, iterate over expected properties
+  variables.forEach(variable => {
+    let aVar = scope.get(variable);
+    is(aVar.target.querySelector(".name").getAttribute("value"), variable,
+      "Correct property name for " + variable);
+    let value = aVar.target.querySelector(".value").getAttribute("value");
+
+    // Cast value with JSON.parse if possible;
+    // will fail when displaying Object types like "ArrayBuffer"
+    // and "Float32Array", but will match the original value.
+    try {
+      value = JSON.parse(value);
+    }
+    catch (e) {}
+    if (typeof hash[variable] === "function") {
+      ok(hash[variable](value),
+        "Passing property value of " + value + " for " + variable + " " + description);
+    }
+    else {
+      ise(value, hash[variable],
+        "Correct property value of " + hash[variable] + " for " + variable + " " + description);
+    }
+  });
+}
+
+function modifyVariableView (win, view, index, prop, value) {
+  let deferred = Promise.defer();
+  let scope = view.getScopeAtIndex(index);
+  let aVar = scope.get(prop);
+  scope.expand();
+
+  win.on(win.EVENTS.UI_SET_PARAM, handleSetting);
+  win.on(win.EVENTS.UI_SET_PARAM_ERROR, handleSetting);
+
+  // Focus and select the variable to begin editing
+  win.focus();
+  aVar.focus();
+  EventUtils.sendKey("RETURN", win);
+
+  // Must wait for the scope DOM to be available to receive
+  // events
+  executeSoon(() => {
+    info("Setting " + value + " for " + prop + "....");
+    for (let c of (value + "")) {
+      EventUtils.synthesizeKey(c, {}, win);
+    }
+    EventUtils.sendKey("RETURN", win);
+  });
+
+  function handleSetting (eventName) {
+    win.off(win.EVENTS.UI_SET_PARAM, handleSetting);
+    win.off(win.EVENTS.UI_SET_PARAM_ERROR, handleSetting);
+    if (eventName === win.EVENTS.UI_SET_PARAM)
+      deferred.resolve();
+    if (eventName === win.EVENTS.UI_SET_PARAM_ERROR)
+      deferred.reject();
+  }
+
+  return deferred.promise;
+}
+
+function findGraphEdge (win, source, target, param) {
+  let selector = ".edgePaths .edgePath[data-source='" + source + "'][data-target='" + target + "']";
+  if (param) {
+    selector += "[data-param='" + param + "']";
+  }
+  return win.document.querySelector(selector);
+}
+
+function findGraphNode (win, node) {
+  let selector = ".nodes > g[data-id='" + node + "']";
+  return win.document.querySelector(selector);
+}
+
+function click (win, element) {
+  EventUtils.sendMouseEvent({ type: "click" }, element, win);
+}
+
+function mouseOver (win, element) {
+  EventUtils.sendMouseEvent({ type: "mouseover" }, element, win);
+}
+
+function command (button) {
+  let ev = button.ownerDocument.createEvent("XULCommandEvent");
+  ev.initCommandEvent("command", true, true, button.ownerDocument.defaultView, 0, false, false, false, false, null);
+  button.dispatchEvent(ev);
+}
+
+function isVisible (element) {
+  return !element.getAttribute("hidden");
+}
+
+/**
+ * Used in debugging, returns a promise that resolves in `n` milliseconds.
+ */
+function wait (n) {
+  let { promise, resolve } = Promise.defer();
+  setTimeout(resolve, n);
+  info("Waiting " + n/1000 + " seconds.");
+  return promise;
+}
+
+/**
+ * Clicks a graph node based on actorID or passing in an element.
+ * Returns a promise that resolves once UI_INSPECTOR_NODE_SET is fired and
+ * the tabs have rendered, completing all RDP requests for the node.
+ */
+function clickGraphNode (panelWin, el, waitForToggle = false) {
+  let { promise, resolve } = Promise.defer();
+  let promises = [
+   once(panelWin, panelWin.EVENTS.UI_INSPECTOR_NODE_SET),
+   once(panelWin, panelWin.EVENTS.UI_PROPERTIES_TAB_RENDERED),
+   once(panelWin, panelWin.EVENTS.UI_AUTOMATION_TAB_RENDERED)
+  ];
+
+  if (waitForToggle) {
+    promises.push(once(panelWin, panelWin.EVENTS.UI_INSPECTOR_TOGGLED));
+  }
+
+  // Use `el` as the element if it is one, otherwise
+  // assume it's an ID and find the related graph node
+  let element = el.tagName ? el : findGraphNode(panelWin, el);
+  click(panelWin, element);
+
+  return Promise.all(promises);
+}
+
+/**
+ * Returns the primitive value of a grip's value, or the
+ * original form that the string grip.type comes from.
+ */
+function getGripValue (value) {
+  if (~["boolean", "string", "number"].indexOf(typeof value)) {
+    return value;
+  }
+
+  switch (value.type) {
+    case "undefined": return undefined;
+    case "Infinity": return Infinity;
+    case "-Infinity": return -Infinity;
+    case "NaN": return NaN;
+    case "-0": return -0;
+    case "null": return null;
+    default: return value;
+  }
+}
+
+/**
+ * Counts how many nodes and edges are currently in the graph.
+ */
+function countGraphObjects (win) {
+  return {
+    nodes: win.document.querySelectorAll(".nodes > .audionode").length,
+    edges: win.document.querySelectorAll(".edgePaths > .edgePath").length
+  }
+}
+
+/**
+* Forces cycle collection and GC, used in AudioNode destruction tests.
+*/
+function forceCC () {
+  SpecialPowers.DOMWindowUtils.cycleCollect();
+  SpecialPowers.DOMWindowUtils.garbageCollect();
+  SpecialPowers.DOMWindowUtils.garbageCollect();
+}
+
+/**
+ * Takes a `values` array of automation value entries,
+ * looking for the value at `time` seconds, checking
+ * to see if the value is close to `expected`.
+ */
+function checkAutomationValue (values, time, expected) {
+  // Remain flexible on values as we can approximate points
+  let EPSILON = 0.01;
+
+  let value = getValueAt(values, time);
+  ok(Math.abs(value - expected) < EPSILON, "Timeline value at " + time + " with value " + value + " should have value very close to " + expected);
+
+  /**
+   * Entries are ordered in `values` according to time, so if we can't find an exact point
+   * on a time of interest, return the point in between the threshold. This should
+   * get us a very close value.
+   */
+  function getValueAt (values, time) {
+    for (let i = 0; i < values.length; i++) {
+      if (values[i].delta === time) {
+        return values[i].value;
+      }
+      if (values[i].delta > time) {
+        return (values[i - 1].value + values[i].value) / 2;
+      }
+    }
+    return values[values.length - 1].value;
+  }
+}
+
+/**
+ * Wait for all inspector tabs to complete rendering.
+ */
+function waitForInspectorRender (panelWin, EVENTS) {
+  return Promise.all([
+    once(panelWin, EVENTS.UI_PROPERTIES_TAB_RENDERED),
+    once(panelWin, EVENTS.UI_AUTOMATION_TAB_RENDERED)
+  ]);
+}
+
+/**
+ * Takes a string `script` and evaluates it directly in the content
+ * in potentially a different process.
+ */
+function evalInDebuggee (script) {
+  let deferred = Promise.defer();
+
+  if (!mm) {
+    throw new Error("`loadFrameScripts()` must be called when using MessageManager.");
+  }
+
+  let id = generateUUID().toString();
+  mm.sendAsyncMessage("devtools:test:eval", { script: script, id: id });
+  mm.addMessageListener("devtools:test:eval:response", handler);
+
+  function handler ({ data }) {
+    if (id !== data.id) {
+      return;
+    }
+
+    mm.removeMessageListener("devtools:test:eval:response", handler);
+    deferred.resolve(data.value);
+  }
+
+  return deferred.promise;
+}
+
+/**
+ * List of audio node properties to test against expectations of the AudioNode actor
+ */
+
+const NODE_DEFAULT_VALUES = {
+  "AudioDestinationNode": {},
+  "MediaElementAudioSourceNode": {},
+  "MediaStreamAudioSourceNode": {},
+  "MediaStreamAudioDestinationNode": {
+    "stream": "MediaStream"
+  },
+  "AudioBufferSourceNode": {
+    "playbackRate": 1,
+    "loop": false,
+    "loopStart": 0,
+    "loopEnd": 0,
+    "buffer": null
+  },
+  "ScriptProcessorNode": {
+    "bufferSize": 4096
+  },
+  "AnalyserNode": {
+    "fftSize": 2048,
+    "minDecibels": -100,
+    "maxDecibels": -30,
+    "smoothingTimeConstant": 0.8,
+    "frequencyBinCount": 1024
+  },
+  "GainNode": {
+    "gain": 1
+  },
+  "DelayNode": {
+    "delayTime": 0
+  },
+  "BiquadFilterNode": {
+    "type": "lowpass",
+    "frequency": 350,
+    "Q": 1,
+    "detune": 0,
+    "gain": 0
+  },
+  "WaveShaperNode": {
+    "curve": null,
+    "oversample": "none"
+  },
+  "PannerNode": {
+    "panningModel": "equalpower",
+    "distanceModel": "inverse",
+    "refDistance": 1,
+    "maxDistance": 10000,
+    "rolloffFactor": 1,
+    "coneInnerAngle": 360,
+    "coneOuterAngle": 360,
+    "coneOuterGain": 0
+  },
+  "ConvolverNode": {
+    "buffer": null,
+    "normalize": true
+  },
+  "ChannelSplitterNode": {},
+  "ChannelMergerNode": {},
+  "DynamicsCompressorNode": {
+    "threshold": -24,
+    "knee": 30,
+    "ratio": 12,
+    "reduction": 0,
+    "attack": 0.003000000026077032,
+    "release": 0.25
+  },
+  "OscillatorNode": {
+    "type": "sine",
+    "frequency": 440,
+    "detune": 0
+  },
+  "StereoPannerNode": {
+    "pan": 0
+  }
+};
diff --git a/toolkit/devtools/webaudioeditor/views/automation.js b/toolkit/devtools/webaudioeditor/views/automation.js
new file mode 100644
index 000000000..d6107d7f7
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/views/automation.js
@@ -0,0 +1,159 @@
+/* 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";
+
+/**
+ * Functions handling the audio node inspector UI.
+ */
+
+let AutomationView = {
+
+  /**
+   * Initialization function called when the tool starts up.
+   */
+  initialize: function () {
+    this._buttons = $("#automation-param-toolbar-buttons");
+    this.graph = new LineGraphWidget($("#automation-graph"), { avg: false });
+    this.graph.selectionEnabled = false;
+
+    this._onButtonClick = this._onButtonClick.bind(this);
+    this._onNodeSet = this._onNodeSet.bind(this);
+    this._onResize = this._onResize.bind(this);
+
+    this._buttons.addEventListener("click", this._onButtonClick);
+    window.on(EVENTS.UI_INSPECTOR_RESIZE, this._onResize);
+    window.on(EVENTS.UI_INSPECTOR_NODE_SET, this._onNodeSet);
+  },
+
+  /**
+   * Destruction function called when the tool cleans up.
+   */
+  destroy: function () {
+    this._buttons.removeEventListener("click", this._onButtonClick);
+    window.off(EVENTS.UI_INSPECTOR_RESIZE, this._onResize);
+    window.off(EVENTS.UI_INSPECTOR_NODE_SET, this._onNodeSet);
+  },
+
+  /**
+   * Empties out the props view.
+   */
+  resetUI: function () {
+    this._currentNode = null;
+  },
+
+  /**
+   * On a new node selection, create the Automation panel for
+   * that specific node.
+   */
+  build: Task.async(function* () {
+    let node = this._currentNode;
+
+    let props = yield node.getParams();
+    let params = props.filter(({ flags }) => flags && flags.param);
+
+    this._createParamButtons(params);
+
+    this._selectedParamName = params[0] ? params[0].param : null;
+    this.render();
+  }),
+
+  /**
+   * Renders the graph for specified `paramName`. Called when
+   * the parameter view is changed, or when new param data events
+   * are fired for the currently specified param.
+   */
+  render: Task.async(function *() {
+    let node = this._currentNode;
+    let paramName = this._selectedParamName;
+    // Escape if either node or parameter name does not exist.
+    if (!node || !paramName) {
+      this._setState("no-params");
+      window.emit(EVENTS.UI_AUTOMATION_TAB_RENDERED, null);
+      return;
+    }
+
+    let { values, events } = yield node.getAutomationData(paramName);
+    this._setState(events.length ? "show" : "no-events");
+    yield this.graph.setDataWhenReady(values);
+    window.emit(EVENTS.UI_AUTOMATION_TAB_RENDERED, node.id);
+  }),
+
+  /**
+   * Create the buttons for each AudioParam, that when clicked,
+   * render the graph for that AudioParam.
+   */
+  _createParamButtons: function (params) {
+    this._buttons.innerHTML = "";
+    params.forEach((param, i) => {
+      let button = document.createElement("toolbarbutton");
+      button.setAttribute("class", "devtools-toolbarbutton automation-param-button");
+      button.setAttribute("data-param", param.param);
+      // Set label to the parameter name, should not be L10N'd
+      button.setAttribute("label", param.param);
+
+      // If first button, set to 'selected' for styling
+      if (i === 0) {
+        button.setAttribute("selected", true);
+      }
+
+      this._buttons.appendChild(button);
+    });
+  },
+
+  /**
+   * Internally sets the current audio node and rebuilds appropriate
+   * views.
+   */
+  _setAudioNode: function (node) {
+    this._currentNode = node;
+    if (this._currentNode) {
+      this.build();
+    }
+  },
+
+  /**
+   * Toggles the subviews to display messages whether or not
+   * the audio node has no AudioParams, no automation events, or
+   * shows the graph.
+   */
+  _setState: function (state) {
+    let contentView = $("#automation-content");
+    let emptyView = $("#automation-empty");
+
+    let graphView = $("#automation-graph-container");
+    let noEventsView = $("#automation-no-events");
+
+    contentView.hidden = state === "no-params";
+    emptyView.hidden = state !== "no-params";
+
+    graphView.hidden = state !== "show";
+    noEventsView.hidden = state !== "no-events";
+  },
+
+  /**
+   * Event handlers
+   */
+
+  _onButtonClick: function (e) {
+    Array.forEach($$(".automation-param-button"), $btn => $btn.removeAttribute("selected"));
+    let paramName = e.target.getAttribute("data-param");
+    e.target.setAttribute("selected", true);
+    this._selectedParamName = paramName;
+    this.render();
+  },
+
+  /**
+   * Called when the inspector is resized.
+   */
+  _onResize: function () {
+    this.graph.refresh();
+  },
+
+  /**
+   * Called when the inspector view determines a node is selected.
+   */
+  _onNodeSet: function (_, id) {
+    this._setAudioNode(id != null ? gAudioNodes.get(id) : null);
+  }
+};
diff --git a/toolkit/devtools/webaudioeditor/views/context.js b/toolkit/devtools/webaudioeditor/views/context.js
new file mode 100644
index 000000000..f2160acf8
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/views/context.js
@@ -0,0 +1,306 @@
+/* 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 { debounce } = require("sdk/lang/functional");
+
+// Globals for d3 stuff
+// Default properties of the graph on rerender
+const GRAPH_DEFAULTS = {
+  translate: [20, 20],
+  scale: 1
+};
+
+// Sizes of SVG arrows in graph
+const ARROW_HEIGHT = 5;
+const ARROW_WIDTH = 8;
+
+// Styles for markers as they cannot be done with CSS.
+const MARKER_STYLING = {
+  light: "#AAA",
+  dark: "#CED3D9"
+};
+
+const GRAPH_DEBOUNCE_TIMER = 100;
+
+// `gAudioNodes` events that should require the graph
+// to redraw
+const GRAPH_REDRAW_EVENTS = ["add", "connect", "disconnect", "remove"];
+
+/**
+ * Functions handling the graph UI.
+ */
+let ContextView = {
+  /**
+   * Initialization function, called when the tool is started.
+   */
+  initialize: function() {
+    this._onGraphClick = this._onGraphClick.bind(this);
+    this._onThemeChange = this._onThemeChange.bind(this);
+    this._onStartContext = this._onStartContext.bind(this);
+    this._onEvent = this._onEvent.bind(this);
+
+    this.draw = debounce(this.draw.bind(this), GRAPH_DEBOUNCE_TIMER);
+    $("#graph-target").addEventListener("click", this._onGraphClick, false);
+
+    window.on(EVENTS.THEME_CHANGE, this._onThemeChange);
+    window.on(EVENTS.START_CONTEXT, this._onStartContext);
+    gAudioNodes.on("*", this._onEvent);
+  },
+
+  /**
+   * Destruction function, called when the tool is closed.
+   */
+  destroy: function() {
+    // If the graph was rendered at all, then the handler
+    // for zooming in will be set. We must remove it to prevent leaks.
+    if (this._zoomBinding) {
+      this._zoomBinding.on("zoom", null);
+    }
+    $("#graph-target").removeEventListener("click", this._onGraphClick, false);
+
+    window.off(EVENTS.THEME_CHANGE, this._onThemeChange);
+    window.off(EVENTS.START_CONTEXT, this._onStartContext);
+    gAudioNodes.off("*", this._onEvent);
+  },
+
+  /**
+   * Called when a page is reloaded and waiting for a "start-context" event
+   * and clears out old content
+   */
+  resetUI: function () {
+    this.clearGraph();
+    this.resetGraphTransform();
+  },
+
+  /**
+   * Clears out the rendered graph, called when resetting the SVG elements to draw again,
+   * or when resetting the entire UI tool
+   */
+  clearGraph: function () {
+    $("#graph-target").innerHTML = "";
+  },
+
+  /**
+   * Moves the graph back to its original scale and translation.
+   */
+  resetGraphTransform: function () {
+    // Only reset if the graph was ever drawn.
+    if (this._zoomBinding) {
+      let { translate, scale } = GRAPH_DEFAULTS;
+      // Must set the `zoomBinding` so the next `zoom` event is in sync with
+      // where the graph is visually (set by the `transform` attribute).
+      this._zoomBinding.scale(scale);
+      this._zoomBinding.translate(translate);
+      d3.select("#graph-target")
+        .attr("transform", "translate(" + translate + ") scale(" + scale + ")");
+    }
+  },
+
+  getCurrentScale: function () {
+    return this._zoomBinding ? this._zoomBinding.scale() : null;
+  },
+
+  getCurrentTranslation: function () {
+    return this._zoomBinding ? this._zoomBinding.translate() : null;
+  },
+
+  /**
+   * Makes the corresponding graph node appear "focused", removing
+   * focused styles from all other nodes. If no `actorID` specified,
+   * make all nodes appear unselected.
+   */
+  focusNode: function (actorID) {
+    // Remove class "selected" from all nodes
+    Array.forEach($$(".nodes > g"), $node => $node.classList.remove("selected"));
+    // Add to "selected"
+    if (actorID) {
+      this._getNodeByID(actorID).classList.add("selected");
+    }
+  },
+
+  /**
+   * Takes an actorID and returns the corresponding DOM SVG element in the graph
+   */
+  _getNodeByID: function (actorID) {
+    return $(".nodes > g[data-id='" + actorID + "']");
+  },
+
+  /**
+   * Sets the appropriate class on an SVG node when its bypass
+   * status is toggled.
+   */
+  _bypassNode: function (node, enabled) {
+    let el = this._getNodeByID(node.id);
+    el.classList[enabled ? "add" : "remove"]("bypassed");
+  },
+
+  /**
+   * This method renders the nodes currently available in `gAudioNodes` and is
+   * throttled to be called at most every `GRAPH_DEBOUNCE_TIMER` milliseconds.
+   * It's called whenever the audio context routing changes, after being debounced.
+   */
+  draw: function () {
+    // Clear out previous SVG information
+    this.clearGraph();
+
+    let graph = new dagreD3.Digraph();
+    let renderer = new dagreD3.Renderer();
+    gAudioNodes.populateGraph(graph);
+
+    // Post-render manipulation of the nodes
+    let oldDrawNodes = renderer.drawNodes();
+    renderer.drawNodes(function(graph, root) {
+      let svgNodes = oldDrawNodes(graph, root);
+      svgNodes.each(function (n) {
+        let node = graph.node(n);
+        let classString = "audionode type-" + node.type + (node.bypassed ? " bypassed" : "");
+        this.setAttribute("class", classString);
+        this.setAttribute("data-id", node.id);
+        this.setAttribute("data-type", node.type);
+      });
+      return svgNodes;
+    });
+
+    // Post-render manipulation of edges
+    let oldDrawEdgePaths = renderer.drawEdgePaths();
+    let defaultClasses = "edgePath enter";
+
+    renderer.drawEdgePaths(function(graph, root) {
+      let svgEdges = oldDrawEdgePaths(graph, root);
+      svgEdges.each(function (e) {
+        let edge = graph.edge(e);
+
+        // We have to manually specify the default classes on the edges
+        // as to not overwrite them
+        let edgeClass = defaultClasses + (edge.param ? (" param-connection " + edge.param) : "");
+
+        this.setAttribute("data-source", edge.source);
+        this.setAttribute("data-target", edge.target);
+        this.setAttribute("data-param", edge.param ? edge.param : null);
+        this.setAttribute("class", edgeClass);
+      });
+
+      return svgEdges;
+    });
+
+    // Override Dagre-d3's post render function by passing in our own.
+    // This way we can leave styles out of it.
+    renderer.postRender((graph, root) => {
+      // We have to manually set the marker styling since we cannot
+      // do this currently with CSS, although it is in spec for SVG2
+      // https://svgwg.org/svg2-draft/painting.html#VertexMarkerProperties
+      // For now, manually set it on creation, and the `_onThemeChange`
+      // function will fire when the devtools theme changes to update the
+      // styling manually.
+      let theme = Services.prefs.getCharPref("devtools.theme");
+      let markerColor = MARKER_STYLING[theme];
+      if (graph.isDirected() && root.select("#arrowhead").empty()) {
+        root
+          .append("svg:defs")
+          .append("svg:marker")
+          .attr("id", "arrowhead")
+          .attr("viewBox", "0 0 10 10")
+          .attr("refX", ARROW_WIDTH)
+          .attr("refY", ARROW_HEIGHT)
+          .attr("markerUnits", "strokewidth")
+          .attr("markerWidth", ARROW_WIDTH)
+          .attr("markerHeight", ARROW_HEIGHT)
+          .attr("orient", "auto")
+          .attr("style", "fill: " + markerColor)
+          .append("svg:path")
+          .attr("d", "M 0 0 L 10 5 L 0 10 z");
+      }
+
+      // Reselect the previously selected audio node
+      let currentNode = InspectorView.getCurrentAudioNode();
+      if (currentNode) {
+        this.focusNode(currentNode.id);
+      }
+
+      // Fire an event upon completed rendering, with extra information
+      // if in testing mode only.
+      let info = {};
+      if (gDevTools.testing) {
+        info = gAudioNodes.getInfo();
+      }
+      window.emit(EVENTS.UI_GRAPH_RENDERED, info.nodes, info.edges, info.paramEdges);
+    });
+
+    let layout = dagreD3.layout().rankDir("LR");
+    renderer.layout(layout).run(graph, d3.select("#graph-target"));
+
+    // Handle the sliding and zooming of the graph,
+    // store as `this._zoomBinding` so we can unbind during destruction
+    if (!this._zoomBinding) {
+      this._zoomBinding = d3.behavior.zoom().on("zoom", function () {
+        var ev = d3.event;
+        d3.select("#graph-target")
+          .attr("transform", "translate(" + ev.translate + ") scale(" + ev.scale + ")");
+      });
+      d3.select("svg").call(this._zoomBinding);
+
+      // Set initial translation and scale -- this puts D3's awareness of
+      // the graph in sync with what the user sees originally.
+      this.resetGraphTransform();
+    }
+  },
+
+  /**
+   * Event handlers
+   */
+
+  /**
+   * Called once "start-context" is fired, indicating that there is an audio
+   * context being created to view so render the graph.
+   */
+  _onStartContext: function () {
+    this.draw();
+  },
+
+  /**
+   * Called when `gAudioNodes` fires an event -- most events (listed
+   * in GRAPH_REDRAW_EVENTS) qualify as a redraw event.
+   */
+  _onEvent: function (eventName, ...args) {
+    // If bypassing, just toggle the class on the SVG node
+    // rather than rerendering everything
+    if (eventName === "bypass") {
+      this._bypassNode.apply(this, args);
+    }
+    if (~GRAPH_REDRAW_EVENTS.indexOf(eventName)) {
+      this.draw();
+    }
+  },
+
+  /**
+   * Fired when the devtools theme changes.
+   */
+  _onThemeChange: function (eventName, theme) {
+    let markerColor = MARKER_STYLING[theme];
+    let marker = $("#arrowhead");
+    if (marker) {
+      marker.setAttribute("style", "fill: " + markerColor);
+    }
+  },
+
+  /**
+   * Fired when a click occurs in the graph.
+   *
+   * @param Event e
+   *        Click event.
+   */
+  _onGraphClick: function (e) {
+    let node = findGraphNodeParent(e.target);
+    // If node not found (clicking outside of an audio node in the graph),
+    // then ignore this event
+    if (!node)
+      return;
+
+    let id = node.getAttribute("data-id");
+
+    this.focusNode(id);
+    window.emit(EVENTS.UI_SELECT_NODE, id);
+  }
+};
diff --git a/toolkit/devtools/webaudioeditor/views/inspector.js b/toolkit/devtools/webaudioeditor/views/inspector.js
new file mode 100644
index 000000000..38e94f4b8
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/views/inspector.js
@@ -0,0 +1,187 @@
+/* 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 MIN_INSPECTOR_WIDTH = 300;
+
+// Strings for rendering
+const EXPAND_INSPECTOR_STRING = L10N.getStr("expandInspector");
+const COLLAPSE_INSPECTOR_STRING = L10N.getStr("collapseInspector");
+
+/**
+ * Functions handling the audio node inspector UI.
+ */
+
+let InspectorView = {
+  _currentNode: null,
+
+  // Set up config for view toggling
+  _collapseString: COLLAPSE_INSPECTOR_STRING,
+  _expandString: EXPAND_INSPECTOR_STRING,
+  _toggleEvent: EVENTS.UI_INSPECTOR_TOGGLED,
+  _animated: true,
+  _delayed: true,
+
+  /**
+   * Initialization function called when the tool starts up.
+   */
+  initialize: function () {
+    // Set up view controller
+    this.el = $("#web-audio-inspector");
+    this.splitter = $("#inspector-splitter");
+    this.el.setAttribute("width", Services.prefs.getIntPref("devtools.webaudioeditor.inspectorWidth"));
+    this.button = $("#inspector-pane-toggle");
+    mixin(this, ToggleMixin);
+    this.bindToggle();
+
+    // Hide inspector view on startup
+    this.hideImmediately();
+
+    this._onNodeSelect = this._onNodeSelect.bind(this);
+    this._onDestroyNode = this._onDestroyNode.bind(this);
+    this._onResize = this._onResize.bind(this);
+    this._onCommandClick = this._onCommandClick.bind(this);
+
+    this.splitter.addEventListener("mouseup", this._onResize);
+    for (let $el of $$("#audio-node-toolbar toolbarbutton")) {
+      $el.addEventListener("command", this._onCommandClick);
+    }
+    window.on(EVENTS.UI_SELECT_NODE, this._onNodeSelect);
+    gAudioNodes.on("remove", this._onDestroyNode);
+  },
+
+  /**
+   * Destruction function called when the tool cleans up.
+   */
+  destroy: function () {
+    this.unbindToggle();
+    this.splitter.removeEventListener("mouseup", this._onResize);
+
+    $("#audio-node-toolbar toolbarbutton").removeEventListener("command", this._onCommandClick);
+    for (let $el of $$("#audio-node-toolbar toolbarbutton")) {
+      $el.removeEventListener("command", this._onCommandClick);
+    }
+    window.off(EVENTS.UI_SELECT_NODE, this._onNodeSelect);
+    gAudioNodes.off("remove", this._onDestroyNode);
+
+    this.el = null;
+    this.button = null;
+    this.splitter = null;
+  },
+
+  /**
+   * Takes a AudioNodeView `node` and sets it as the current
+   * node and scaffolds the inspector view based off of the new node.
+   */
+  setCurrentAudioNode: Task.async(function* (node) {
+    this._currentNode = node || null;
+
+    // If no node selected, set the inspector back to "no AudioNode selected"
+    // view.
+    if (!node) {
+      $("#web-audio-editor-details-pane-empty").removeAttribute("hidden");
+      $("#web-audio-editor-tabs").setAttribute("hidden", "true");
+      window.emit(EVENTS.UI_INSPECTOR_NODE_SET, null);
+    }
+    // Otherwise load up the tabs view and hide the empty placeholder
+    else {
+      $("#web-audio-editor-details-pane-empty").setAttribute("hidden", "true");
+      $("#web-audio-editor-tabs").removeAttribute("hidden");
+      yield this._buildToolbar();
+      window.emit(EVENTS.UI_INSPECTOR_NODE_SET, this._currentNode.id);
+    }
+  }),
+
+  /**
+   * Returns the current AudioNodeView.
+   */
+  getCurrentAudioNode: function () {
+    return this._currentNode;
+  },
+
+  /**
+   * Empties out the props view.
+   */
+  resetUI: function () {
+    // Set current node to empty to load empty view
+    this.setCurrentAudioNode();
+
+    // Reset AudioNode inspector and hide
+    this.hideImmediately();
+  },
+
+  _buildToolbar: Task.async(function* () {
+    let node = this.getCurrentAudioNode();
+
+    let bypassable = node.bypassable;
+    let bypassed = yield node.isBypassed();
+    let button = $("#audio-node-toolbar .bypass");
+
+    if (!bypassable) {
+      button.setAttribute("disabled", true);
+    } else {
+      button.removeAttribute("disabled");
+    }
+
+    if (!bypassable || bypassed) {
+      button.removeAttribute("checked");
+    } else {
+      button.setAttribute("checked", true);
+    }
+  }),
+
+  /**
+   * Event handlers
+   */
+
+  /**
+   * Called on EVENTS.UI_SELECT_NODE, and takes an actorID `id`
+   * and calls `setCurrentAudioNode` to scaffold the inspector view.
+   */
+  _onNodeSelect: function (_, id) {
+    this.setCurrentAudioNode(gAudioNodes.get(id));
+
+    // Ensure inspector is visible when selecting a new node
+    this.show();
+  },
+
+  _onResize: function () {
+    if (this.el.getAttribute("width") < MIN_INSPECTOR_WIDTH) {
+      this.el.setAttribute("width", MIN_INSPECTOR_WIDTH);
+    }
+    Services.prefs.setIntPref("devtools.webaudioeditor.inspectorWidth", this.el.getAttribute("width"));
+    window.emit(EVENTS.UI_INSPECTOR_RESIZE);
+  },
+
+  /**
+   * Called when `DESTROY_NODE` is fired to remove the node from props view if
+   * it's currently selected.
+   */
+  _onDestroyNode: function (node) {
+    if (this._currentNode && this._currentNode.id === node.id) {
+      this.setCurrentAudioNode(null);
+    }
+  },
+
+  _onCommandClick: function (e) {
+    let node = this.getCurrentAudioNode();
+    let button = e.target;
+    let command = button.getAttribute("data-command");
+    let checked = button.getAttribute("checked");
+
+    if (button.getAttribute("disabled")) {
+      return;
+    }
+
+    if (command === "bypass") {
+      if (checked) {
+        button.removeAttribute("checked");
+        node.bypass(true);
+      } else {
+        button.setAttribute("checked", true);
+        node.bypass(false);
+      }
+    }
+  }
+};
diff --git a/toolkit/devtools/webaudioeditor/views/properties.js b/toolkit/devtools/webaudioeditor/views/properties.js
new file mode 100644
index 000000000..29ea0a410
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/views/properties.js
@@ -0,0 +1,164 @@
+/* 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";
+
+Cu.import("resource:///modules/devtools/VariablesView.jsm");
+Cu.import("resource:///modules/devtools/VariablesViewController.jsm");
+
+const GENERIC_VARIABLES_VIEW_SETTINGS = {
+  searchEnabled: false,
+  editableValueTooltip: "",
+  editableNameTooltip: "",
+  preventDisableOnChange: true,
+  preventDescriptorModifiers: false,
+  eval: () => {}
+};
+
+/**
+ * Functions handling the audio node inspector UI.
+ */
+
+let PropertiesView = {
+
+  /**
+   * Initialization function called when the tool starts up.
+   */
+  initialize: function () {
+    this._onEval = this._onEval.bind(this);
+    this._onNodeSet = this._onNodeSet.bind(this);
+
+    window.on(EVENTS.UI_INSPECTOR_NODE_SET, this._onNodeSet);
+    this._propsView = new VariablesView($("#properties-content"), GENERIC_VARIABLES_VIEW_SETTINGS);
+    this._propsView.eval = this._onEval;
+  },
+
+  /**
+   * Destruction function called when the tool cleans up.
+   */
+  destroy: function () {
+    window.off(EVENTS.UI_INSPECTOR_NODE_SET, this._onNodeSet);
+    this._propsView = null;
+  },
+
+  /**
+   * Empties out the props view.
+   */
+  resetUI: function () {
+    this._propsView.empty();
+    this._currentNode = null;
+  },
+
+  /**
+   * Internally sets the current audio node and rebuilds appropriate
+   * views.
+   */
+  _setAudioNode: function (node) {
+    this._currentNode = node;
+    if (this._currentNode) {
+      this._buildPropertiesView();
+    }
+  },
+
+  /**
+   * Reconstructs the `Properties` tab in the inspector
+   * with the `this._currentNode` as it's source.
+   */
+  _buildPropertiesView: Task.async(function* () {
+    let propsView = this._propsView;
+    let node = this._currentNode;
+    propsView.empty();
+
+    let audioParamsScope = propsView.addScope("AudioParams");
+    let props = yield node.getParams();
+
+    // Disable AudioParams VariableView expansion
+    // when there are no props i.e. AudioDestinationNode
+    this._togglePropertiesView(!!props.length);
+
+    props.forEach(({ param, value, flags }) => {
+      let descriptor = {
+        value: value,
+        writable: !flags || !flags.readonly,
+      };
+      let item = audioParamsScope.addItem(param, descriptor);
+
+      // No items should currently display a dropdown
+      item.twisty = false;
+    });
+
+    audioParamsScope.expanded = true;
+
+    window.emit(EVENTS.UI_PROPERTIES_TAB_RENDERED, node.id);
+  }),
+
+  /**
+   * Toggles the display of the "empty" properties view when
+   * node has no properties to display.
+   */
+  _togglePropertiesView: function (show) {
+    let propsView = $("#properties-content");
+    let emptyView = $("#properties-empty");
+    (show ? propsView : emptyView).removeAttribute("hidden");
+    (show ? emptyView : propsView).setAttribute("hidden", "true");
+  },
+
+  /**
+   * Returns the scope for AudioParams in the
+   * VariablesView.
+   *
+   * @return Scope
+   */
+  _getAudioPropertiesScope: function () {
+    return this._propsView.getScopeAtIndex(0);
+  },
+
+  /**
+   * Event handlers
+   */
+
+  /**
+   * Called when the inspector view determines a node is selected.
+   */
+  _onNodeSet: function (_, id) {
+    this._setAudioNode(gAudioNodes.get(id));
+  },
+
+  /**
+   * Executed when an audio prop is changed in the UI.
+   */
+  _onEval: Task.async(function* (variable, value) {
+    let ownerScope = variable.ownerView;
+    let node = this._currentNode;
+    let propName = variable.name;
+    let error;
+
+    if (!variable._initialDescriptor.writable) {
+      error = new Error("Variable " + propName + " is not writable.");
+    } else {
+      // Cast value to proper type
+      try {
+        let number = parseFloat(value);
+        if (!isNaN(number)) {
+          value = number;
+        } else {
+          value = JSON.parse(value);
+        }
+        error = yield node.actor.setParam(propName, value);
+      }
+      catch (e) {
+        error = e;
+      }
+    }
+
+    // TODO figure out how to handle and display set prop errors
+    // and enable `test/brorwser_wa_properties-view-edit.js`
+    // Bug 994258
+    if (!error) {
+      ownerScope.get(propName).setGrip(value);
+      window.emit(EVENTS.UI_SET_PARAM, node.id, propName, value);
+    } else {
+      window.emit(EVENTS.UI_SET_PARAM_ERROR, node.id, propName, value);
+    }
+  })
+};
diff --git a/toolkit/devtools/webaudioeditor/views/utils.js b/toolkit/devtools/webaudioeditor/views/utils.js
new file mode 100644
index 000000000..c397a16cb
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/views/utils.js
@@ -0,0 +1,103 @@
+/* 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";
+
+/**
+ * Takes an element in an SVG graph and iterates over
+ * ancestors until it finds the graph node container. If not found,
+ * returns null.
+ */
+
+function findGraphNodeParent (el) {
+  // Some targets may not contain `classList` property
+  if (!el.classList)
+    return null;
+
+  while (!el.classList.contains("nodes")) {
+    if (el.classList.contains("audionode"))
+      return el;
+    else
+      el = el.parentNode;
+  }
+  return null;
+}
+
+/**
+ * Object for use with `mix` into a view.
+ * Must have the following properties defined on the view:
+ * - `el`
+ * - `button`
+ * - `_collapseString`
+ * - `_expandString`
+ * - `_toggleEvent`
+ *
+ * Optional properties on the view can be defined to specify default
+ * visibility options.
+ * - `_animated`
+ * - `_delayed`
+ */
+let ToggleMixin = {
+
+  bindToggle: function () {
+    this._onToggle = this._onToggle.bind(this);
+    this.button.addEventListener("mousedown", this._onToggle, false);
+  },
+
+  unbindToggle: function () {
+    this.button.removeEventListener("mousedown", this._onToggle);
+  },
+
+  show: function () {
+    this._viewController({ visible: true });
+  },
+
+  hide: function () {
+    this._viewController({ visible: false });
+  },
+
+  hideImmediately: function () {
+    this._viewController({ visible: false, delayed: false, animated: false });
+  },
+
+  /**
+   * Returns a boolean indicating whether or not the view.
+   * is currently being shown.
+   */
+  isVisible: function () {
+    return !this.el.hasAttribute("pane-collapsed");
+  },
+
+  /**
+   * Toggles the visibility of the view.
+   *
+   * @param object visible
+   *        - visible: boolean indicating whether the panel should be shown or not
+   *        - animated: boolean indiciating whether the pane should be animated
+   *        - delayed: boolean indicating whether the pane's opening should wait
+   *                   a few cycles or not
+   */
+  _viewController: function ({ visible, animated, delayed }) {
+    let flags = {
+      visible: visible,
+      animated: animated != null ? animated : !!this._animated,
+      delayed: delayed != null ? delayed : !!this._delayed,
+      callback: () => window.emit(this._toggleEvent, visible)
+    };
+
+    ViewHelpers.togglePane(flags, this.el);
+
+    if (flags.visible) {
+      this.button.removeAttribute("pane-collapsed");
+      this.button.setAttribute("tooltiptext", this._collapseString);
+    }
+    else {
+      this.button.setAttribute("pane-collapsed", "");
+      this.button.setAttribute("tooltiptext", this._expandString);
+    }
+  },
+
+  _onToggle: function () {
+    this._viewController({ visible: !this.isVisible() });
+  }
+}
diff --git a/toolkit/devtools/webaudioeditor/webaudioeditor.xul b/toolkit/devtools/webaudioeditor/webaudioeditor.xul
new file mode 100644
index 000000000..e0af48b6f
--- /dev/null
+++ b/toolkit/devtools/webaudioeditor/webaudioeditor.xul
@@ -0,0 +1,142 @@
+<?xml version="1.0"?>
+<!-- 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/. -->
+<?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/content/devtools/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/webaudioeditor.css" type="text/css"?>
+<!DOCTYPE window [
+  <!ENTITY % debuggerDTD SYSTEM "chrome://browser/locale/devtools/webaudioeditor.dtd">
+  %debuggerDTD;
+]>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <script type="application/javascript;version=1.8"
+          src="chrome://browser/content/devtools/theme-switching.js"/>
+
+  <script type="application/javascript" src="chrome://browser/content/devtools/d3.js"/>
+  <script type="application/javascript" src="dagre-d3.js"/>
+  <script type="application/javascript" src="webaudioeditor/includes.js"/>
+  <script type="application/javascript" src="webaudioeditor/models.js"/>
+  <script type="application/javascript" src="webaudioeditor/controller.js"/>
+  <script type="application/javascript" src="webaudioeditor/views/utils.js"/>
+  <script type="application/javascript" src="webaudioeditor/views/context.js"/>
+  <script type="application/javascript" src="webaudioeditor/views/inspector.js"/>
+  <script type="application/javascript" src="webaudioeditor/views/properties.js"/>
+  <script type="application/javascript" src="webaudioeditor/views/automation.js"/>
+
+  <vbox class="theme-body" flex="1">
+    <hbox id="reload-notice"
+          class="notice-container"
+          align="center"
+          pack="center"
+          flex="1">
+      <button id="requests-menu-reload-notice-button"
+              class="devtools-toolbarbutton"
+              standalone="true"
+              label="&webAudioEditorUI.reloadNotice1;"
+              oncommand="gFront.setup({ reload: true });"/>
+      <label id="requests-menu-reload-notice-label"
+             class="plain"
+             value="&webAudioEditorUI.reloadNotice2;"/>
+    </hbox>
+    <hbox id="waiting-notice"
+          class="notice-container devtools-throbber"
+          align="center"
+          pack="center"
+          flex="1"
+          hidden="true">
+      <label id="requests-menu-waiting-notice-label"
+             class="plain"
+             value="&webAudioEditorUI.emptyNotice;"/>
+    </hbox>
+
+    <vbox id="content"
+         flex="1"
+         hidden="true">
+      <toolbar id="web-audio-toolbar" class="devtools-toolbar">
+        <spacer flex="1"></spacer>
+        <toolbarbutton id="inspector-pane-toggle" class="devtools-toolbarbutton"
+                       tabindex="0"/>
+      </toolbar>
+      <splitter class="devtools-horizontal-splitter"/>
+      <box id="web-audio-content-pane"
+           class="devtools-responsive-container"
+           flex="1">
+        <hbox flex="1">
+          <box id="web-audio-graph" flex="1">
+            <vbox flex="1">
+              <svg id="graph-svg"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink">
+                <g id="graph-target" transform="translate(20,20)"/>
+              </svg>
+            </vbox>
+          </box>
+        </hbox>
+        <splitter id="inspector-splitter" class="devtools-side-splitter"/>
+        <vbox id="web-audio-inspector" hidden="true">
+          <deck id="web-audio-editor-details-pane" flex="1">
+            <vbox id="web-audio-editor-details-pane-empty" flex="1">
+              <label value="&webAudioEditorUI.inspectorEmpty;"></label>
+            </vbox>
+            <tabbox id="web-audio-editor-tabs"
+                    class="devtools-sidebar-tabs"
+                    handleCtrlTab="false">
+              <toolbar id="audio-node-toolbar" class="devtools-toolbar">
+                <hbox class="devtools-toolbarbutton-group">
+                  <toolbarbutton class="bypass devtools-toolbarbutton"
+                                 data-command="bypass"
+                                 tabindex="0"/>
+                </hbox>
+              </toolbar>
+              <tabs>
+                <tab id="properties-tab"
+                     label="&webAudioEditorUI.tab.properties2;"/>
+                <!-- bug 1134036
+                <tab id="automation-tab"
+                     label="&webAudioEditorUI.tab.automation;"/>
+                -->
+              </tabs>
+              <tabpanels flex="1">
+                <!-- Properties Panel -->
+                <tabpanel id="properties-tabpanel"
+                          class="tabpanel-content">
+                  <vbox id="properties-content" flex="1" hidden="true">
+                  </vbox>
+                  <vbox id="properties-empty" flex="1" hidden="true">
+                    <label value="&webAudioEditorUI.propertiesEmpty;"></label>
+                  </vbox>
+                </tabpanel>
+
+                <!-- Automation Panel -->
+                <tabpanel id="automation-tabpanel"
+                          class="tabpanel-content">
+                  <vbox id="automation-content" flex="1" hidden="true">
+                    <toolbar id="automation-param-toolbar" class="devtools-toolbar">
+                      <hbox id="automation-param-toolbar-buttons" class="devtools-toolbarbutton-group">
+                      </hbox>
+                    </toolbar>
+                    <box id="automation-graph-container" flex="1">
+                      <canvas id="automation-graph"></canvas>
+                    </box>
+                    <vbox id="automation-no-events" flex="1" hidden="true">
+                      <label value="&webAudioEditorUI.automationNoEvents;"></label>
+                    </vbox>
+                  </vbox>
+                  <vbox id="automation-empty" flex="1" hidden="true">
+                    <label value="&webAudioEditorUI.automationEmpty;"></label>
+                  </vbox>
+                </tabpanel>
+              </tabpanels>
+            </tabbox>
+          </deck>
+        </vbox>
+      </box>
+    </vbox>
+  </vbox>
+
+</window>