[debug] Add a control to make node instruction listing stick to the top

Summary:
Often when debugging real programs I need to cross-reference what those
`n$13` and `n$24` correspond to (so going up and down html).

Sticky instruction listing should simplify navigating and
cross-referencing.

Two button control whether the listing will stick to top and its visibility. For instance, it's OK to make the listing stick to the top and toggle its visibility when needed so that the listing doesn't obscure the output all the time.

Reviewed By: jvillard

Differential Revision: D46019382

fbshipit-source-id: c5cadc2b1a2d1c0ef8bcda232996acfddc8cc701

infer/src/IR/Io_infer.ml

@@ -40,9 +40,28 @@ function toggleDetailsBlock() {
     d.open = detailsOpen;
   });
   return detailsOpen;
-};
+}
+
+function toggleListingOnTop() {
+  var sticky_class = "sticky_header";
+  var listing = document.getElementById("node_listing");
+  if (listing.classList.contains(sticky_class)) {
+    listing.classList.remove(sticky_class);
+  } else {
+    listing.classList.add(sticky_class);
+  }
+}
+
+function toggleListingVisibility() {
+  var listing = document.querySelector("#node_listing > listing");
+  if (listing.style.display == "none") {
+  listing.style.display = "";
+  } else {
+    listing.style.display = "none";
+  }
+}
 </script>
-       |}
+|}
     in
     let style =
       {|
@@ -63,6 +82,8 @@ h1 { font-size:14pt }
 .tooltip { display: none; background-color:#FFF0F0; border: 2px solid #F00; font-weight: normal; left:10em; padding: 2px; position: absolute; top: -1em; -webkit-border-radius:5px; -webkit-box-shadow:1px 1px 7px #000; z-index: 1}
 .with_tooltip { position: relative; }
 .with_tooltip:hover .tooltip, .visited:hover .tooltip { display: block; }
+#node_listing { margin-top: 5pt; margin-bottom: 5pt; }
+.sticky_header { position: fixed; top: 0; width: 100%; background-color: #eeeee4; }         
 details { padding-left: 20pt; }
 summary { margin-left: -20pt; }
 .d_with_indent { padding-left: 20pt; }

infer/src/backend/printer.ml

@@ -93,9 +93,17 @@ end = struct
       F.fprintf fmt "<br>EXN:@\n" ;
       pp_node_link_seq fmt (Procdesc.Node.get_exn node) ;
       F.fprintf fmt "<br>@\n" ;
-      F.fprintf fmt "<LISTING class='%s'>%a</LISTING>" (Pp.color_string Green)
+      (* Instruction listing + buttons to control stickiness/visibility *)
+      F.fprintf fmt "<DIV id='node_listing'>@\n" ;
+      F.fprintf fmt
+        "<BUTTON type='button' onclick='toggleListingOnTop()'>Listing on top</BUTTON>@\n" ;
+      F.fprintf fmt
+        "<BUTTON type='button' onclick='toggleListingVisibility()'>Listing visibility</BUTTON>@\n" ;
+      F.fprintf fmt "<LISTING class='%s'>%a</LISTING>@\n" (Pp.color_string Green)
         (Instrs.pp ~indent:false (Pp.html Green))
         (Procdesc.Node.get_instrs node) ;
+      F.fprintf fmt "</DIV>@\n" ;
+      (* Listing end *)
       F.fprintf fmt "<BUTTON type='button' onclick='toggleDetailsBlock()'>Toggle details</BUTTON>" ) ;
     F.fprintf fmt "%a%a %t" Io_infer.Html.pp_hline ()
       (Io_infer.Html.pp_session_link source ~with_name:true [".."] ~proc_name)