ui: Add 100ns margin to both sides of trace

The first and last events in the trace are often hard to click on since
scrolling is bound by these timestamps. This issue is especially bad
when the trace contains a handful of events (as is often the case with
heap profiles) since the user is more likely to want to click on an
'edge' event.

This introduces a fixed time margin to both ends of the trace allowing
the user to zoom in a select 'edge' events.

Bug: 178383244
Change-Id: I7ef7aa9f77cd0d0c6c80117b8bdd69666277740e
diff --git a/ui/src/controller/trace_controller.ts b/ui/src/controller/trace_controller.ts
index ab061c7..06dd825 100644
--- a/ui/src/controller/trace_controller.ts
+++ b/ui/src/controller/trace_controller.ts
@@ -84,6 +84,8 @@
 
 type States = 'init'|'loading_trace'|'ready';
 
+const TRACE_MARGIN_TIME_S = 1 / 1e7;
+
 // TraceController handles handshakes with the frontend for everything that
 // concerns a single trace. It owns the WASM trace processor engine, handles
 // tracks data and SQL queries. There is one TraceController instance for each
@@ -284,9 +286,13 @@
     }
 
     const traceTime = await this.engine.getTraceTimeBounds();
+    let startSec = traceTime.start;
+    let endSec = traceTime.end;
+    startSec -= TRACE_MARGIN_TIME_S;
+    endSec += TRACE_MARGIN_TIME_S;
     const traceTimeState = {
-      startSec: traceTime.start,
-      endSec: traceTime.end,
+      startSec,
+      endSec,
     };
     const actions: DeferredAction[] = [
       Actions.setTraceTime(traceTimeState),