Bug 1032482 - Only render redundant connections between nodes once in the web audio editor. r=vp

browser/devtools/webaudioeditor/test/browser_wa_graph-render-01.js

@@ -5,6 +5,8 @@
  * Tests that SVG nodes and edges were created for the Graph View.
  */
 
+let connectCount = 0;
+
 function spawnTest() {
   let [target, debuggee, panel] = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
   let { panelWin } = panel;
@@ -14,6 +16,8 @@ function spawnTest() {
 
   reload(target);
 
+  panelWin.on(EVENTS.CONNECT_NODE, onConnectNode);
+
   let [actors] = yield Promise.all([
     get3(gFront, "create-node"),
     waitForGraphRendered(panelWin, 3, 2)
@@ -27,7 +31,16 @@ function spawnTest() {
   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.");
+
+  panelWin.off(EVENTS.CONNECT_NODE, onConnectNode);
+
   yield teardown(panel);
   finish();
 }
 
+function onConnectNode () {
+  ++connectCount;
+}

browser/devtools/webaudioeditor/test/doc_simple-context.html

@@ -17,8 +17,15 @@
       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>

browser/devtools/webaudioeditor/webaudioeditor-controller.js

@@ -94,19 +94,24 @@ AudioNodeView.prototype.getType = Task.async(function* () {
 });
 
 // Helper method to create connections in the AudioNodeConnections
-// WeakMap for rendering
+// WeakMap for rendering. Returns a boolean indicating
+// if the connection was successfully created. Will return `false`
+// when the connection was previously made.
 AudioNodeView.prototype.connect = function (destination) {
-  let connections = AudioNodeConnections.get(this);
-  if (!connections) {
-    connections = [];
-    AudioNodeConnections.set(this, connections);
+  let connections = AudioNodeConnections.get(this) || new Set();
+  AudioNodeConnections.set(this, connections);
+
+  // Don't duplicate add.
+  if (!connections.has(destination)) {
+    connections.add(destination);
+    return true;
   }
-  connections.push(destination);
+  return false;
 };
 
 // Helper method to remove audio connections from the current AudioNodeView
 AudioNodeView.prototype.disconnect = function () {
-  AudioNodeConnections.set(this, []);
+  AudioNodeConnections.set(this, new Set());
 };
 
 // Returns a promise that resolves to an array of objects containing
@@ -293,8 +298,10 @@ let WebAudioEditorController = {
     // adding an edge.
     let [source, dest] = yield waitForNodeCreation(sourceActor, destActor);
 
-    source.connect(dest);
-    window.emit(EVENTS.CONNECT_NODE, source.id, dest.id);
+    // Connect nodes, and only emit if it's a new connection.
+    if (source.connect(dest)) {
+      window.emit(EVENTS.CONNECT_NODE, source.id, dest.id);
+    }
 
     function waitForNodeCreation (sourceActor, destActor) {
       let deferred = defer();

browser/devtools/webaudioeditor/webaudioeditor-view.js

@@ -161,7 +161,7 @@ let WebAudioGraphView = {
       // Add all of the connections from this node to the edge array to be added
       // after all the nodes are added, otherwise edges will attempted to be created
       // for nodes that have not yet been added
-      AudioNodeConnections.get(node, []).forEach(dest => edges.push([node, dest]));
+      AudioNodeConnections.get(node, new Set()).forEach(dest => edges.push([node, dest]));
     });
 
     edges.forEach(([node, dest]) => graph.addEdge(null, node.id, dest.id, {