Bug 1006287 - Clicking a graph node in the audio dev tool focuses the param view for the node. r=vp

browser/devtools/webaudioeditor/test/browser.ini

@@ -16,7 +16,7 @@ support-files =
 
 [browser_wa_first-run.js]
 
-[browser_wa_graph_mouseover.js]
+[browser_wa_graph_click.js]
 [browser_wa_graph_render_01.js]
 [browser_wa_graph_render_02.js]
 

browser/devtools/webaudioeditor/test/browser_wa_graph_click.js

@@ -0,0 +1,58 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the ParamsList view opens the correct node when clicking
+ * on the node in the GraphView
+ */
+
+function spawnTest() {
+  let [target, debuggee, panel] = yield initWebAudioEditor(COMPLEX_CONTEXT_URL);
+  let panelWin = panel.panelWin;
+  let { gFront, $, $$, EVENTS, WebAudioParamView } = panelWin;
+  let gVars = WebAudioParamView._paramsView;
+
+  let started = once(gFront, "start-context");
+
+  reload(target);
+
+  let [_, nodes, _] = yield Promise.all([
+    getN(gFront, "create-node", 8),
+    getNSpread(panel.panelWin, EVENTS.UI_ADD_NODE_LIST, 8),
+    waitForGraphRendered(panel.panelWin, 8, 8)
+  ]);
+
+  let nodeIds = nodes.map(([e, id]) => id);
+
+  for (let i = 0; i < 8; i++) {
+    ok(!isExpanded(gVars, i), "no views expanded on default");
+  }
+
+  click(panel.panelWin, findGraphNode(panelWin, nodeIds[1]));
+  ok(isExpanded(gVars, 1), "params view expanded on click");
+
+  var allClosed = true;
+  for (let i = 0; i < 8; i++) {
+    if (i === 1) continue;
+    if (isExpanded(gVars, i))
+      allClosed = false;
+  }
+  ok(allClosed, "all other param views are still minimized");
+
+  click(panel.panelWin, findGraphNode(panelWin, nodeIds[2]));
+  ok(isExpanded(gVars, 2), "second params view expanded on click");
+
+  click(panel.panelWin, $("rect", findGraphNode(panelWin, nodeIds[3])));
+  ok(isExpanded(gVars, 3), "param view opens when clicking `<rect>`");
+
+  click(panel.panelWin, $("tspan", findGraphNode(panelWin, nodeIds[4])));
+  ok(isExpanded(gVars, 4), "param view opens when clicking `<tspan>`");
+
+  yield teardown(panel);
+  finish();
+}
+
+function isExpanded (view, index) {
+  let scope = view.getScopeAtIndex(index);
+  return scope.expanded;
+}

browser/devtools/webaudioeditor/test/browser_wa_graph_mouseover.js

@@ -1,42 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-/**
- * Tests if the shader editor shows the appropriate UI when opened.
- */
-
-function spawnTest() {
-  let [target, debuggee, panel] = yield initWebAudioEditor(COMPLEX_CONTEXT_URL);
-  let { gFront, $, $$, EVENTS, WebAudioParamView } = panel.panelWin;
-  let gVars = WebAudioParamView._paramsView;
-
-  let started = once(gFront, "start-context");
-
-  reload(target);
-
-  yield Promise.all([
-    getN(gFront, "create-node", 8),
-    getNSpread(panel.panelWin, EVENTS.UI_ADD_NODE_LIST, 8),
-    waitForGraphRendered(panel.panelWin, 8, 8)
-  ]);
-
-  let $items = $$(".variables-view-scope");
-  let $graphNodes = $$(".nodes > g");
-
-  for (let $item of $items) {
-    mouseOver(panel.panelWin, $(".devtools-toolbar", $item));
-    // Get actorID from id of variable scope
-    let id = $item.id.match(/\(([^\)]*)\)/)[1];
-
-    // Go over all graph nodes and check only the selected one is highlighted
-    for (let $node of $graphNodes) {
-      let shouldBeSelected = id === $node.getAttribute("data-id");
-      ok($node.classList.contains("selected") === shouldBeSelected,
-        "graph node correctly " + (shouldBeSelected ? "" : "not ") + "highlighted on param view mouseover");
-    }
-  }
-
-  yield teardown(panel);
-  finish();
-}
-

browser/devtools/webaudioeditor/webaudioeditor-view.js

@@ -40,6 +40,7 @@ let WebAudioGraphView = {
   initialize: function() {
     this._onGraphNodeClick = this._onGraphNodeClick.bind(this);
     this.draw = debounce(this.draw.bind(this), GRAPH_DEBOUNCE_TIMER);
+    $('#graph-target').addEventListener('click', this._onGraphNodeClick, false);
   },
 
   /**
@@ -49,6 +50,7 @@ let WebAudioGraphView = {
     if (this._zoomBinding) {
       this._zoomBinding.on("zoom", null);
     }
+    $('#graph-target').removeEventListener('click', this._onGraphNodeClick, false);
   },
 
   /**
@@ -140,7 +142,7 @@ let WebAudioGraphView = {
       let svgNodes = oldDrawNodes(graph, root);
       svgNodes.attr("class", (n) => {
         let node = graph.node(n);
-        return "type-" + node.label;
+        return "audionode type-" + node.label;
       });
       svgNodes.attr("data-id", (n) => {
         let node = graph.node(n);
@@ -214,12 +216,16 @@ let WebAudioGraphView = {
   /**
    * Fired when a node in the svg graph is clicked. Used to handle triggering the AudioNodePane.
    *
-   * @param Object AudioNodeView
+   * @param Event e
-   *        The object stored in `AudioNodes` which contains render information, but most importantly,
+   *        Click event.
-   *        the actorID under `id` property.
    */
-  _onGraphNodeClick: function (node) {
+  _onGraphNodeClick: function (e) {
-    WebAudioParamView.focusNode(node.id);
+    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;
+    WebAudioParamView.focusNode(node.getAttribute('data-id'));
   }
 };
 
@@ -370,3 +376,19 @@ let WebAudioParamView = {
 
   })
 };
+
+/**
+ * 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) {
+  while (!el.classList.contains("nodes")) {
+    if (el.classList.contains("audionode"))
+      return el;
+    else
+      el = el.parentNode;
+  }
+  return null;
+}