Milo: Add an option to hide green steps

This CL contains 2 things
1. Fixes buildbot build reporting of interesting vs normal steps.
2. Client-side hiding of normal steps.  Changed from single checkbox to 3 radio boxes.

BUG=673636

Review-Url: https://codereview.chromium.org/2886353002
diff --git a/milo/appengine/buildbot/build.go b/milo/appengine/buildbot/build.go
index 5f0b92f..07f4874 100644
--- a/milo/appengine/buildbot/build.go
+++ b/milo/appengine/buildbot/build.go
@@ -226,6 +226,11 @@
 			}
 		}
 
+		// Raise the interesting-ness if the step is not "Success".
+		if bc.Status != resp.Success {
+			bc.Verbosity = resp.Interesting
+		}
+
 		remainingAliases := stringset.New(len(step.Aliases))
 		for linkAnchor := range step.Aliases {
 			remainingAliases.Add(linkAnchor)
diff --git a/milo/appengine/buildbot/expectations/newline.1234.build.json b/milo/appengine/buildbot/expectations/newline.1234.build.json
index a434c01..776773e 100644
--- a/milo/appengine/buildbot/expectations/newline.1234.build.json
+++ b/milo/appengine/buildbot/expectations/newline.1234.build.json
@@ -54,7 +54,7 @@
       "Duration": 1176393916928,
       "Type": "Recipe",
       "LevelsDeep": 0,
-      "Verbosity": 0,
+      "Verbosity": 2,
       "Text": [
         "line 1",
         "",
diff --git a/milo/appengine/buildbot/expectations/win_chromium_rel_ng.246309.build.json b/milo/appengine/buildbot/expectations/win_chromium_rel_ng.246309.build.json
index ab3505a..49b2e13 100644
--- a/milo/appengine/buildbot/expectations/win_chromium_rel_ng.246309.build.json
+++ b/milo/appengine/buildbot/expectations/win_chromium_rel_ng.246309.build.json
@@ -66,7 +66,7 @@
       "Duration": 1176393916928,
       "Type": "Recipe",
       "LevelsDeep": 0,
-      "Verbosity": 0,
+      "Verbosity": 2,
       "Text": [
         "running steps via annotated script"
       ]
@@ -589,7 +589,7 @@
       "Duration": 132432765952,
       "Type": "Recipe",
       "LevelsDeep": 0,
-      "Verbosity": 0,
+      "Verbosity": 2,
       "Text": [
         "compile (with patch)"
       ]
diff --git a/milo/appengine/frontend/expectations/buildbot.build-Debug_page-_CrWinGoma_30608.html b/milo/appengine/frontend/expectations/buildbot.build-Debug_page-_CrWinGoma_30608.html
index 655f667..5e0c767 100644
--- a/milo/appengine/frontend/expectations/buildbot.build-Debug_page-_CrWinGoma_30608.html
+++ b/milo/appengine/frontend/expectations/buildbot.build-Debug_page-_CrWinGoma_30608.html
@@ -107,9 +107,14 @@
 
       
         <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>
+        <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">
 
           
             
@@ -1336,24 +1341,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/buildbot.build-Debug_page-_newline_1234.html b/milo/appengine/frontend/expectations/buildbot.build-Debug_page-_newline_1234.html
index 7ee8d33..3359800 100644
--- a/milo/appengine/frontend/expectations/buildbot.build-Debug_page-_newline_1234.html
+++ b/milo/appengine/frontend/expectations/buildbot.build-Debug_page-_newline_1234.html
@@ -105,16 +105,21 @@
 
       
         <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>
+        <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">
 
           
             
           
 
           
-          <li class="verbosity-Normal">
+          <li class="verbosity-Interesting">
             <div class="status-Failure result">
               <b>steps</b>
               <span style="float:right"
@@ -177,24 +182,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/buildbot.build-Debug_page-_win_chromium_rel_ng_246309.html b/milo/appengine/frontend/expectations/buildbot.build-Debug_page-_win_chromium_rel_ng_246309.html
index 62106d9..87eebf7 100644
--- a/milo/appengine/frontend/expectations/buildbot.build-Debug_page-_win_chromium_rel_ng_246309.html
+++ b/milo/appengine/frontend/expectations/buildbot.build-Debug_page-_win_chromium_rel_ng_246309.html
@@ -109,16 +109,21 @@
 
       
         <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>
+        <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">
 
           
             
           
 
           
-          <li class="verbosity-Normal">
+          <li class="verbosity-Interesting">
             <div class="status-Failure result">
               <b>steps</b>
               <span style="float:right"
@@ -133,6 +138,10 @@
             <ul>
               
                 <li><a href="http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_rel_ng/builds/246309/steps/steps/logs/stdio">stdio</a></li>
+                    <link rel="prerender" href="http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_rel_ng/builds/246309/steps/steps/logs/stdio">
+                    <link rel="prefetch" href="http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_rel_ng/builds/246309/steps/steps/logs/stdio">
+                  
+                
               
                 <li><a href="http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_rel_ng/builds/246309/steps/steps/logs/preamble">preamble</a></li>
               
@@ -568,7 +577,7 @@
             </ul>
           </li>
           
-          <li class="verbosity-Normal">
+          <li class="verbosity-Interesting">
             <div class="status-Failure result">
               <b>compile (with patch)</b>
               <span style="float:right"
@@ -583,6 +592,10 @@
             <ul>
               
                 <li><a href="http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_rel_ng/builds/246309/steps/compile%20%28with%20patch%29/logs/stdio">stdio</a></li>
+                    <link rel="prerender" href="http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_rel_ng/builds/246309/steps/compile%20%28with%20patch%29/logs/stdio">
+                    <link rel="prefetch" href="http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_rel_ng/builds/246309/steps/compile%20%28with%20patch%29/logs/stdio">
+                  
+                
               
                 <li><a href="http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_rel_ng/builds/246309/steps/compile%20%28with%20patch%29/logs/json.output">json.output</a></li>
               
@@ -1106,24 +1119,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-Basic_successful_build.html b/milo/appengine/frontend/expectations/swarming.build-Basic_successful_build.html
index dbe8d9c..9e6dcaf 100644
--- a/milo/appengine/frontend/expectations/swarming.build-Basic_successful_build.html
+++ b/milo/appengine/frontend/expectations/swarming.build-Basic_successful_build.html
@@ -102,24 +102,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-canceled.html b/milo/appengine/frontend/expectations/swarming.build-build-canceled.html
index 1138eae..0b7560b 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-canceled.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-canceled.html
@@ -94,9 +94,14 @@
 
       
         <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>
+        <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">
 
           
             
@@ -245,24 +250,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-exception.html b/milo/appengine/frontend/expectations/swarming.build-build-exception.html
index 04e5506..10375cd 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-exception.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-exception.html
@@ -77,9 +77,14 @@
 
       
         <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>
+        <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">
 
           
             
@@ -286,24 +291,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-expired.html b/milo/appengine/frontend/expectations/swarming.build-build-expired.html
index 6b4cb9a..8867ac0 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-expired.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-expired.html
@@ -131,24 +131,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-internal.html b/milo/appengine/frontend/expectations/swarming.build-build-internal.html
index 1f92d3f..f1c73bd 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-internal.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-internal.html
@@ -77,9 +77,14 @@
 
       
         <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>
+        <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">
 
           
             
@@ -172,24 +177,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-link.html b/milo/appengine/frontend/expectations/swarming.build-build-link.html
index 1f92d3f..f1c73bd 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-link.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-link.html
@@ -77,9 +77,14 @@
 
       
         <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>
+        <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">
 
           
             
@@ -172,24 +177,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-nested.html b/milo/appengine/frontend/expectations/swarming.build-build-nested.html
index c99190a..8988094 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-nested.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-nested.html
@@ -77,9 +77,14 @@
 
       
         <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>
+        <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">
 
           
             
@@ -383,24 +388,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-patch-failure.html b/milo/appengine/frontend/expectations/swarming.build-build-patch-failure.html
index 9c26330..fa5eb73 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-patch-failure.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-patch-failure.html
@@ -77,9 +77,14 @@
 
       
         <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>
+        <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">
 
           
             
@@ -347,24 +352,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-pending-logdog.html b/milo/appengine/frontend/expectations/swarming.build-build-pending-logdog.html
index 447d089..74e4e2a 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-pending-logdog.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-pending-logdog.html
@@ -119,24 +119,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-pending.html b/milo/appengine/frontend/expectations/swarming.build-build-pending.html
index 447d089..74e4e2a 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-pending.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-pending.html
@@ -119,24 +119,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-running-logdog-no-annotation-stream.html b/milo/appengine/frontend/expectations/swarming.build-build-running-logdog-no-annotation-stream.html
index 03919c7..cb7c54c 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-running-logdog-no-annotation-stream.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-running-logdog-no-annotation-stream.html
@@ -77,9 +77,14 @@
 
       
         <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>
+        <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">
 
           
             
@@ -145,24 +150,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-running-logdog.html b/milo/appengine/frontend/expectations/swarming.build-build-running-logdog.html
index 8dfe2de..84ed099 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-running-logdog.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-running-logdog.html
@@ -77,9 +77,14 @@
 
       
         <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>
+        <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">
 
           
             
@@ -244,24 +249,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-running.html b/milo/appengine/frontend/expectations/swarming.build-build-running.html
index 00219e4..ee587f9 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-running.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-running.html
@@ -77,9 +77,14 @@
 
       
         <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>
+        <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">
 
           
             
@@ -242,24 +247,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-timeout.html b/milo/appengine/frontend/expectations/swarming.build-build-timeout.html
index d9f01f9..640a4c5 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-timeout.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-timeout.html
@@ -94,9 +94,14 @@
 
       
         <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>
+        <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">
 
           
             
@@ -251,24 +256,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/expectations/swarming.build-build-unicode.html b/milo/appengine/frontend/expectations/swarming.build-build-unicode.html
index adb058f..7afe5d2 100644
--- a/milo/appengine/frontend/expectations/swarming.build-build-unicode.html
+++ b/milo/appengine/frontend/expectations/swarming.build-build-unicode.html
@@ -77,9 +77,14 @@
 
       
         <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>
+        <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">
 
           
             
@@ -242,24 +247,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>
diff --git a/milo/appengine/frontend/static/buildbot/css/default.css b/milo/appengine/frontend/static/buildbot/css/default.css
index 5df2132..3654b82 100644
--- a/milo/appengine/frontend/static/buildbot/css/default.css
+++ b/milo/appengine/frontend/static/buildbot/css/default.css
@@ -719,6 +719,14 @@
     display: inline;
 }
 
-.hide .verbosity-Hidden {
+.standard .verbosity-Hidden {
+  display: none;
+}
+
+.interesting .verbosity-Hidden {
+  display: none;
+}
+
+.interesting .verbosity-Normal {
   display: none;
 }
diff --git a/milo/appengine/frontend/templates/pages/build.html b/milo/appengine/frontend/templates/pages/build.html
index 93b22a0..615adc1 100644
--- a/milo/appengine/frontend/templates/pages/build.html
+++ b/milo/appengine/frontend/templates/pages/build.html
@@ -148,9 +148,14 @@
 
       {{ 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>
+        <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 +330,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(className) {
+    $("#steps").removeClass("all standard interesting").addClass(className)
+  }
+
+  $("#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")) {
+      $(this).click();
+    }
   });
 });
 </script>