[ui] Print slice duration on tooltip

The duration format follows the global duration timestamp settings.

Screenshot: https://screenshot.googleplex.com/3nX3WZ3kZwrZEpM.png
Bug: #622
Change-Id: I4e29bffef3f18e82cf003efbbbfbf6ff408b7f8c

Author: stevegolton

Diff for: ui/src/frontend/named_slice_track.ts

@@ -24,9 +24,12 @@ import {
   BaseSliceTrackTypes,
   OnSliceClickArgs,
   OnSliceOverArgs,
+  SLICE_FLAGS_INCOMPLETE,
+  SLICE_FLAGS_INSTANT,
 } from './base_slice_track';
 import {globals} from './globals';
 import {NewTrackArgs} from './track';
+import {renderDuration} from './widgets/duration';
 
 export const NAMED_ROW = {
   // Base columns (tsq, ts, dur, id, depth).
@@ -63,8 +66,16 @@ export abstract class NamedSliceTrack<
   }
 
   onSliceOver(args: OnSliceOverArgs<T['slice']>) {
-    const name = args.slice.title;
-    args.tooltip = [name];
+    const {title, dur, flags} = args.slice;
+    let duration;
+    if (flags & SLICE_FLAGS_INCOMPLETE) {
+      duration = 'Incomplete';
+    } else if (flags & SLICE_FLAGS_INSTANT) {
+      duration = 'Instant';
+    } else {
+      duration = renderDuration(dur);
+    }
+    args.tooltip = [`${title} - [${duration}]`];
   }
 
   onSliceClick(args: OnSliceClickArgs<T['slice']>) {