Milo: Add an option to hide green steps

milo/appengine/frontend/templates/pages/build.html

Index: milo/appengine/frontend/templates/pages/build.html
diff --git a/milo/appengine/frontend/templates/pages/build.html b/milo/appengine/frontend/templates/pages/build.html
index 93b22a0163042f8ccccc2826f8e4a2f034d0a3e8..563d1cd4ed4b5d38d1ee4cf4ed295cdb8f0d0232 100644
--- a/milo/appengine/frontend/templates/pages/build.html
+++ b/milo/appengine/frontend/templates/pages/build.html
@@ -148,9 +148,13 @@
 
       {{ if or .Build.Components .Build.Summary.SubLink }}
         <h2>Steps and Logfiles:</h2>
-        <input type="checkbox" id="showHidden">
-        <label for="showHidden">Show hidden <span id="numHidden"></span></label>
-        <ol id="steps" class="hide">
+        Show:
+        <input type="radio" name="hider" id="showAll"><label for="showAll">All</label>

[nodir, 2017/05/22 16:36:38]

nit: maybe move label to the next line so it is consistent with other checkboxes

[Ryan Tseng, 2017/05/22 17:29:46]

Done.

+        <input type="radio" name="hider" id="showStandard" checked>
+          <label for="showStandard">Standard</label>
+        <input type="radio" name="hider" id="showInteresting">
+          <label for="showInteresting">Interesting Only</label>
+        <ol id="steps" class="standard">
 
           {{ with .Build.Summary }}
             {{ if .SubLink }}
@@ -325,24 +329,25 @@
 </div>
 <script language="javascript">
 $(document).ready(function() {
-  var check = function(checked) {
-    var things = $("#steps");
-    if (checked) {
-      $("#steps").removeClass("hide");
-    } else {
-      $("#steps").addClass("hide");
-    }
-    var numHidden = $(".verbosity-Hidden").length;
-    if (numHidden > 0) {
-      $("#numHidden").text("(" + numHidden + " hidden)");
-    } else {
-      $("#numHidden").text("");
-    }
-  };
 
-  check($("#showHidden").is(":checked"));
-  $("#showHidden").click(function(e) {
-    check($(this).is(":checked"));
+  var check = function(filter) {

[nodir, 2017/05/22 16:36:38]

i think the parameter here is a css class name. filter may be easily confused
with jquery filter (e.g. .classSelector or #id)

[Ryan Tseng, 2017/05/22 17:29:46]

Done.

+    $("#steps").removeClass("all standard interesting").addClass(filter)
+  }
+
+  $("#showInteresting").click(function(e) {
+    check("interesting");
+  });
+  $("#showStandard").click(function(e) {
+    check("standard");
+  });
+  $("#showAll").click(function(e) {
+    check("all");
+  });
+
+  $("input[name='hider']").each(function(){
+    if ($(this).prop("checked") == true) {

[nodir, 2017/05/22 16:36:38]

why not `if ($(this).prop("checked")) {` ?

[Ryan Tseng, 2017/05/22 17:29:46]

I saw it written the other way in another example snippet.  I'm not sure why
they did it that way either.  I chalked it up to javascript conventions.

+      $(this).click();
+    }
   });
 });
 </script>