[turbolizer] Add 2 buttons; add middle-click on input; add comment in UI.

tools/turbolizer/graph-view.js

 // Copyright 2015 the V8 project authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 "use strict";
 
 class GraphView extends View {
   constructor (d3, id, nodes, edges, broker) {
     super(id, broker);
     var graph = this;
@@ skipping 151 matching lines @@
     });
 
     d3.select("#zoom-selection").on("click", function() {
       graph.viewSelection();
     });
 
     d3.select("#toggle-types").on("click", function() {
       graph.toggleTypes();
     });
 
+    d3.select("#show-effects").on("click", function() {
+      graph.showEffects();
+    });
+
+    d3.select("#hide-control").on("click", function() {
+      graph.hideControl();
+    });
+
     d3.select("#search-input").on("keydown", function() {
       if (d3.event.keyCode == 13) {
         graph.state.selection.clear();
         var reg = new RegExp(this.value);
         var selected = graph.visibleNodes.each(function(n) {
           if (reg.exec(n.getDisplayLabel()) != null ||
               (graph.state.showTypes && reg.exec(n.getDisplayType())) ||
               reg.exec(n.opcode) != null) {
             graph.state.selection.select(this, true);
           }
@@ skipping 423 matching lines @@
             return !d.inputs[i].isVisible();
           } )
           .attr("id", "ib," + d.inputs[i].stringID())
           .attr("r", DEFAULT_NODE_BUBBLE_RADIUS)
           .attr("transform", function(d) {
             return "translate(" + x + "," + y + ")";
           })
           .on("mousedown", function(d){
             var components = this.id.split(',');
             var node = graph.nodeMap[components[3]];
-            var edge = node.inputs[components[2]];
-            var visible = !edge.isVisible();
-            node.setInputVisibility(components[2], visible);
-            d3.event.stopPropagation();
+            var edgeIndex = components[2];
+            var edge = node.inputs[edgeIndex];
+            if (d3.event.button == 0) {
+              // Left mouse button click: show the edge and the node it leads
+              // to.
+              var visible = !edge.isVisible();
+              node.setInputVisibility(components[2], visible);
+              d3.event.stopPropagation();
+            } else {
+              // Alternate mouse button click: as above, but more: if we
+              // clicked the nth input bubble, expand all nth input bubbles of
+              // nodes that have the same opcode. If in this process we make
+              // more nodes visible that have the same opcode, also expand
+              // their nth input bubbles, until we stabilize.
+              filterActionUntilStabilize(graph.nodes,
+                // filter
+                function(otherNode) {
+                  return (node.opcode === otherNode.opcode) &&
+                         (otherNode.visible) &&
+                         (otherNode.inputs.length >= edgeIndex) &&
+                         (!otherNode.inputs[edgeIndex].visible);
+                },
+                // action
+                function(otherNode) {
+                  otherNode.setInputVisibility(edgeIndex, true);
+                });
+            }
+
             graph.updateGraphVisibility();
           });
       }
       if (d.outputs.length != 0) {
         var x = d.getOutputX();
         var y = graph.getNodeHeight() + DEFAULT_NODE_BUBBLE_RADIUS / 2 + 4;
         var s = g.append('circle')
           .classed("filledBubbleStyle", function(c) {
             return d.areAnyOutputsVisible() == 2;
           } )
@@ skipping 179 matching lines @@
     graph.state.showTypes = !graph.state.showTypes;
     var element = document.getElementById('toggle-types');
     if (graph.state.showTypes) {
       element.classList.add('button-input-toggled');
     } else {
       element.classList.remove('button-input-toggled');
     }
     graph.updateGraphVisibility();
   }
 
+  showEffects() {
+    var graph = this;
+
+    // Loop over all the nodes to find nodes which are visible. All effect
+    // edges to a visible node should become visible, as well as the source
+    // node of such edges. As long as more nodes become visible, repeat the
+    // process.
+
+    filterActionUntilStabilize(graph.nodes,
+      // filter
+      function(node) {
+        return node.visible;
+      },
+      // action
+      function(node) {
+        node.inputs.forEach(function(inputEdge) {
+          if (node !== inputEdge.target) {
+            window.alert("Error: target of an input edge should be the node itself");
+          }
+          if (!inputEdge.visible && inputEdge.type == "effect") {
+            node.setInputVisibility(inputEdge.index, true);
+          }
+        });
+      }
+    );
+
+    graph.updateGraphVisibility();
+  }
+
+  hideControl() {
+    var graph = this;
+
+    graph.edges.forEach(function(edge) {
+      if (edge.type == "control") {
+        edge.visible = false;
+      }
+    });
+
+    graph.updateGraphVisibility();
+  }
+
   viewSelection() {
     var graph = this;
     var minX, maxX, minY, maxY;
     var hasSelection = false;
     graph.visibleNodes.each(function(n) {
       if (this.classList.contains("selected")) {
         hasSelection = true;
         minX = minX ? Math.min(minX, n.x) : n.x;
         maxX = maxX ? Math.max(maxX, n.x + n.getTotalNodeWidth()) :
           n.x + n.getTotalNodeWidth();
@@ skipping 23 matching lines @@
   }
 
   viewWholeGraph() {
     var graph = this;
     var minScale = graph.minScale();
     var translation = [0, 0];
     translation = graph.getVisibleTranslation(translation, minScale);
     graph.translateClipped(translation, minScale);
   }
 }