[turbolizer] Add checkbox to search only visible nodes

Drive-by: Make label of checkboxes in disassembly view clickable.

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

tools/turbolizer/src/disassembly-view.ts

@@ -11,8 +11,8 @@ import { InstructionSelectionHandler } from "./selection-handler";
 
 const toolboxHTML = `<div id="disassembly-toolbox">
 <form>
-  <input id="show-instruction-address" type="checkbox" name="instruction-address">Show addresses</input>
-  <input id="show-instruction-binary" type="checkbox" name="instruction-binary">Show binary literal</input>
+  <label><input id="show-instruction-address" type="checkbox" name="instruction-address">Show addresses</label>
+  <label><input id="show-instruction-binary" type="checkbox" name="instruction-binary">Show binary literal</label>
 </form>
 </div>`;
 

tools/turbolizer/src/graph-view.ts

@@ -411,7 +411,7 @@ export class GraphView extends View implements PhaseView {
     view.toggleTypes();
   }
 
-  searchInputAction(searchBar: HTMLInputElement, e: KeyboardEvent) {
+  searchInputAction(searchBar: HTMLInputElement, e: KeyboardEvent, onlyVisible: boolean) {
     if (e.keyCode == 13) {
       this.selectionHandler.clear();
       const query = searchBar.value;
@@ -427,8 +427,8 @@ export class GraphView extends View implements PhaseView {
       };
 
       const selection = [...this.graph.nodes(n => {
-        if ((e.ctrlKey || n.visible) && filterFunction(n)) {
-          if (e.ctrlKey) n.visible = true;
+        if ((e.ctrlKey || n.visible || !onlyVisible) && filterFunction(n)) {
+          if (e.ctrlKey || !onlyVisible) n.visible = true;
           return true;
         }
         return false;

tools/turbolizer/src/graphmultiview.ts

@@ -26,6 +26,7 @@ const toolboxHTML = `
   <input id="toggle-types" type="image" title="show/hide types" src="types.png" alt="show/hide types" class="button-input">
   <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>
@@ -57,9 +58,10 @@ export class GraphMultiView extends View {
     toolbox.innerHTML = toolboxHTML;
     view.divNode.appendChild(toolbox);
     const searchInput = toolbox.querySelector("#search-input") as HTMLInputElement;
+    const onlyVisibleCheckbox = toolbox.querySelector("#search-only-visible") as HTMLInputElement;
     searchInput.addEventListener("keyup", e => {
       if (!view.currentPhaseView) return;
-      view.currentPhaseView.searchInputAction(searchInput, e);
+      view.currentPhaseView.searchInputAction(searchInput, e, onlyVisibleCheckbox.checked);
     });
     view.divNode.addEventListener("keyup", (e: KeyboardEvent) => {
       if (e.keyCode == 191) { // keyCode == '/'

tools/turbolizer/src/schedule-view.ts

@@ -167,7 +167,7 @@ export class ScheduleView extends TextView implements PhaseView {
     return `${node.id}: ${node.label}(${node.inputs.join(", ")})`;
   }
 
-  searchInputAction(searchBar, e) {
+  searchInputAction(searchBar, e, onlyVisible) {
     e.stopPropagation();
     this.selectionHandler.clear();
     const query = searchBar.value;

tools/turbolizer/src/view.ts

@@ -32,5 +32,5 @@ export abstract class View {
 
 export interface PhaseView {
   onresize(): void;
-  searchInputAction(searchInput: HTMLInputElement, e: Event): void;
+  searchInputAction(searchInput: HTMLInputElement, e: Event, onlyVisible: boolean): void;
 }