Aesthetic tweaks to sheriff-o-matic.

Tools/GardeningServer/ui/ct-test-list.html

 <!--
 Copyright 2014 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
 
 <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
 
 <polymer-element name="ct-test-list" attributes="tests tree">
   <template>
     <style>
       :host {
         display: block;
       }
 
       :host > div {
         /* Be at least the height of a paper-icon-button.
            So things line up nicely. */
         min-height: 24px;
       }
 
+      .test-failures {
+        margin-left: 15px;
+      }
+
       paper-icon-button {
         vertical-align: middle;
       }
 
       paper-icon-button::shadow #icon {
         margin: 0;
       }
     </style>
     <template repeat="{{ groups in testGroups_ }}">
-      <!-- FIXME: Find a less redundant UI than repeating the step on each line. -->
+      <template if="{{ groups.tests.length }}">
+        <div><span style="font-weight: bold">Step:</span> {{ groups.step }}</div>
+      </template>
+
       <template repeat="{{ group in groups.tests }}">
-        <!-- Case 1: entire step failed -->
-        <template if="{{ !group.name }}">
-          <div>{{ groups.step }} <b>whole step failed</b></div>
-        </template>
-        <!-- Case 2: single test failure -->
+        <!-- Case 1: single test failure -->
         <template if="{{ group.name && (group.tests.length == 1 || group.expanded) }}">
           <template repeat="{{ test in group.tests }}">
-            <div>
-              {{ groups.step }}
+            <div class="test-failures">
               <a href="{{ test | flakinessDashboardURL }}">{{ test.testName }}</a>
             </div>
           </template>
         </template>
-        <!-- Case 3: group of tests failed -->
+        <!-- Case 2: group of tests failed -->
         <template if="{{ group.name && group.tests.length > 1 && !group.expanded }}">
-          <div>
-            {{ groups.step }} {{ group.name }} ({{ group.tests.length }} Tests)
+          <div class="test-failures">
+            {{ group.name }} ({{ group.tests.length }} Tests)
             <paper-icon-button id="expand" icon="unfold-more" step="{{ groups.step }}" group="{{ group.name }}" on-click="{{ _expand }}"></paper-icon-button>
           </div>
         </template>
       </template>
     </template>
   </template>
   <script>
     Polymer('ct-test-list', {
       testsChanged: function() {
         var groups = {};
@@ skipping 34 matching lines @@
           }
         });
       },
 
       flakinessDashboardURL: function(test) {
         return test.flakinessDashboardURL(this.tree);
       },
     });
   </script>
 </polymer-element>