Milo: Add timestamp name and tooltip

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

 {{define "title"}}
   {{ with .Build.Summary -}}
     {{ if eq .Status.String "InfraFailure" }}
       Exception
     {{ else if eq .Status.String "Failure" }}
       Failed
     {{ else if eq .Status.String "NotRun" }}
       Pending
     {{ else }}
       {{ .Status.String }}
@@ skipping 135 matching lines @@
         <input type="checkbox" id="showHidden">
         <label for="showHidden">Show hidden <span id="numHidden"></span></label>
         <ol id="steps" class="hide">
 
           {{ with .Build.Summary }}
             {{ if .SubLink }}
             <li class="verbosity-{{.Verbosity.String}}">
               <div class="status-{{.Status}} result">
                 <b>Steps</b>
                 {{ if .Duration -}}
-                <span style="float:right">( {{ .Duration | humanDuration }} )</span>
+                <span style="float:right"

[nodir, 2017/04/29 01:26:40]

probably we will have more places where we need to express duration, so
repeating this code everywhere is not ideal. What about making a function or a
template that accepts duration, start time and end time and returns this span
with data-starttime date-endtime, etc

[hinoka, 2017/05/02 03:33:14]

the span might need other things though, like styles/classes to make it float to
the right.  I could make one for this specific span, but then it'd have to
contain the code to make it float to the right...  It might be premature
optimization, wdyt?

[nodir, 2017/05/02 14:58:02]

It might be premature generalization 

+                      class="duration"
+                      data-starttime="{{ .Started | formatTime }}"
+                      {{ if .Finished }}
+                        data-endtime="{{ .Finished | formatTime }}"
+                      {{ end }}>
+                      ( {{ .Duration | humanDuration }} )</span>
                 {{- end }}
               </div>
               <ul>
                 {{ range .SubLink  }}
                 <li>{{ . | linkifySet }}</li>
                 {{ end }}
               </ul>
             </li>
             {{ end }}
           {{ end }}
 
           {{ range .Build.Components  }}
           <li class="verbosity-{{.Verbosity.String}}">
             <div class="status-{{.Status}} result">
               <b>{{.Label}}</b>
               {{ if .Duration -}}
-                <span style="float:right">( {{ .Duration | humanDuration }} )</span>
+              <span style="float:right"
+                    class="duration"
+                    data-starttime="{{ .Started | formatTime }}"
+                    {{ if .Finished }}
+                      data-endtime="{{ .Finished | formatTime }}"
+                    {{ end }}>
+                    ( {{ .Duration | humanDuration }} )</span>
               {{- end }}
               <span>
                 {{ range .Text -}}
                   <div class="step-text">
                     {{- if . -}}{{- . -}}{{- else -}}&nbsp;{{- end -}}
                   </div>
                 {{- end }}
               </span>
             </div>
             <ul>
@@ skipping 143 matching lines @@
     }
   };
 
   check($("#showHidden").is(":checked"));
   $("#showHidden").click(function(e) {
     check($(this).is(":checked"));
   });
 });
 </script>
 {{end}}