[turbolizer] Refactor toolbox handling

This enables per-phase toolbox items, which makes the toolbar easier
to understand and use.

Change-Id: I1b44d28595c118f0ba55dd64eea54415b51b93aa
Notry: true
Bug: v8:7327
Reviewed-on: https://chromium-review.googlesource.com/c/1409435Reviewed-by: Georg Neis <neis@chromium.org>
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Cr-Commit-Position: refs/heads/master@{#58813}

tools/turbolizer/src/graph-view.ts

@@ -44,6 +44,7 @@ export class GraphView extends View implements PhaseView {
   graph: Graph;
   broker: SelectionBroker;
   phaseName: string;
+  toolbox: HTMLElement;
 
   createViewElement() {
     const pane = document.createElement('div');
@@ -51,13 +52,15 @@ export class GraphView extends View implements PhaseView {
     return pane;
   }
 
-  constructor(idOrContainer: string | HTMLElement, broker: SelectionBroker, showPhaseByName: (s: string) => void) {
+  constructor(idOrContainer: string | HTMLElement, broker: SelectionBroker,
+    showPhaseByName: (s: string) => void, toolbox: HTMLElement) {
     super(idOrContainer);
     const view = this;
     this.broker = broker;
     this.showPhaseByName = showPhaseByName;
     this.divElement = d3.select(this.divNode);
     this.phaseName = "";
+    this.toolbox = toolbox;
     const svg = this.divElement.append("svg")
       .attr('version', '2.0')
       .attr("width", "100%")
@@ -224,13 +227,31 @@ export class GraphView extends View implements PhaseView {
   }
 
   initializeContent(data, rememberedSelection) {
-    d3.select("#layout").on("click", partial(this.layoutAction, this));
-    d3.select("#show-all").on("click", partial(this.showAllAction, this));
-    d3.select("#toggle-hide-dead").on("click", partial(this.toggleHideDead, this));
-    d3.select("#hide-unselected").on("click", partial(this.hideUnselectedAction, this));
-    d3.select("#hide-selected").on("click", partial(this.hideSelectedAction, this));
-    d3.select("#zoom-selection").on("click", partial(this.zoomSelectionAction, this));
-    d3.select("#toggle-types").on("click", partial(this.toggleTypesAction, this));
+    function createImgInput(id: string, title: string, onClick): HTMLElement {
+      const input = document.createElement("input");
+      input.setAttribute("id", id);
+      input.setAttribute("type", "image");
+      input.setAttribute("title", title);
+      input.setAttribute("src", `img/${id}-icon.png`);
+      input.className = "button-input graph-toolbox-item";
+      input.addEventListener("click", onClick);
+      return input;
+    }
+    this.toolbox.appendChild(createImgInput("layout", "layout graph",
+      partial(this.layoutAction, this)));
+    this.toolbox.appendChild(createImgInput("show-all", "show all nodes",
+      partial(this.showAllAction, this)));
+    this.toolbox.appendChild(createImgInput("toggle-hide-dead", "show only live nodes",
+      partial(this.toggleHideDead, this)));
+    this.toolbox.appendChild(createImgInput("hide-unselected", "show only live nodes",
+      partial(this.hideUnselectedAction, this)));
+    this.toolbox.appendChild(createImgInput("hide-selected", "show only live nodes",
+      partial(this.hideSelectedAction, this)));
+    this.toolbox.appendChild(createImgInput("zoom-selection", "show only live nodes",
+      partial(this.zoomSelectionAction, this)));
+    this.toolbox.appendChild(createImgInput("toggle-types", "show only live nodes",
+      partial(this.toggleTypesAction, this)));
+
     this.phaseName = data.name;
     this.createGraph(data.data, rememberedSelection);
     this.broker.addNodeHandler(this.selectionHandler);
@@ -250,6 +271,10 @@ export class GraphView extends View implements PhaseView {
   }
 
   deleteContent() {
+    for (const item of this.toolbox.querySelectorAll(".graph-toolbox-item")) {
+      item.parentElement.removeChild(item);
+    }
+
     for (const n of this.graph.nodes()) {
       n.visible = false;
     }

tools/turbolizer/src/graphmultiview.ts

@@ -13,23 +13,12 @@ const multiviewID = "multiview";
 
 const toolboxHTML = `
 <div class="graph-toolbox">
-  <input id="layout" type="image" title="layout graph" src="layout-icon.png" alt="layout graph" class="button-input">
-  <input id="show-all" type="image" title="show all nodes" src="expand-all.jpg" alt="show all nodes" class="button-input">
-  <input id="toggle-hide-dead" type="image" title="show only live nodes" src="live.png" alt="only live nodes"
-    class="button-input">
-  <input id="hide-unselected" type="image" title="hide unselected nodes" src="hide-unselected.png" alt="hide unselected nodes"
-    class="button-input">
-  <input id="hide-selected" type="image" title="hide selected nodes" src="hide-selected.png" alt="hide selected nodes"
-    class="button-input">
-  <input id="zoom-selection" type="image" title="zoom to selection" src="search.png" alt="zoom to selection"
-    class="button-input">
-  <input id="toggle-types" type="image" title="show/hide types" src="types.png" alt="show/hide types" class="button-input">
+  <select id="phase-select">
+    <option disabled selected>(please open a file)</option>
+  </select>
   <input id="search-input" type="text" title="search nodes for regex" alt="search node for regex" class="search-input"
     placeholder="find with regexp&hellip;">
   <label><input id="search-only-visible" type="checkbox" name="instruction-address" alt="Apply search to visible nodes only">only visible</label>
-  <select id="display-selector">
-    <option disabled selected>(please open a file)</option>
-  </select>
 </div>`;
 
 export class GraphMultiView extends View {
@@ -69,10 +58,11 @@ export class GraphMultiView extends View {
       }
     });
     searchInput.setAttribute("value", window.sessionStorage.getItem("lastSearch") || "");
-    this.graph = new GraphView(this.divNode, selectionBroker, view.displayPhaseByName.bind(this));
+    this.graph = new GraphView(this.divNode, selectionBroker, view.displayPhaseByName.bind(this),
+      toolbox.querySelector(".graph-toolbox"));
     this.schedule = new ScheduleView(this.divNode, selectionBroker);
     this.sequence = new SequenceView(this.divNode, selectionBroker);
-    this.selectMenu = toolbox.querySelector("#display-selector") as HTMLSelectElement;
+    this.selectMenu = toolbox.querySelector("#phase-select") as HTMLSelectElement;
   }
 
   initializeSelect() {

tools/turbolizer/turbo-visualizer.css

@@ -23,6 +23,17 @@
   vertical-align: middle;
   width: 145px;
   opacity: 1;
+  box-sizing: border-box;
+  height: 1.5em;
+}
+
+#phase-select {
+  box-sizing: border-box;
+  height: 1.5em;
+}
+
+#search-only-visible {
+  vertical-align: middle;
 }
 
 .button-input {
@@ -367,11 +378,10 @@ input:hover,
 .graph-toolbox {
   position: relative;
   border-bottom: 2px solid #eee8d5;
-  padding-bottom: 3px;
   z-index: 5;
   background: rgba(100%, 100%, 100%, 0.7);
-  padding-top: 3px;
   box-sizing: border-box;
+  padding: 3px;
   margin-left: 4px;
   margin-right: 4px;
 }