user-timings.diff

diff --git a/src/components/stack-chart/Canvas.js b/src/components/stack-chart/Canvas.js
index 808669c7..8a29aee8 100644
--- a/src/components/stack-chart/Canvas.js
+++ b/src/components/stack-chart/Canvas.js
@@ -20,6 +20,7 @@ import TextMeasurement from '../../utils/text-measurement';
 import { formatMilliseconds } from '../../utils/format-numbers';
 import { updatePreviewSelection } from '../../actions/profile-view';
 import { mapCategoryColorNameToStackChartStyles } from '../../utils/colors';
+// Add TooltipMarker
 import { TooltipCallNode } from '../tooltip/CallNode';
 
 import type { Thread, CategoryList } from '../../types/profile';
@@ -138,6 +139,7 @@ class StackChartCanvas extends React.PureComponent<Props> {
     ctx: CanvasRenderingContext2D,
     hoveredItem: HoveredStackTiming | null
   ) => {
+    // Add user timing drawing here.
     const {
       thread,
       rangeStart,
@@ -398,7 +400,10 @@ class StackChartCanvas extends React.PureComponent<Props> {
       return null;
     }
 
+    // Figure out if this is a call node or marker.
+
     const stackTiming = stackTimingByDepth[depth];
+    // If check every callNodeIndex for a marker index.
     const callNodeIndex = stackTiming.callNode[stackTimingIndex];
     const duration =
       stackTiming.end[stackTimingIndex] - stackTiming.start[stackTimingIndex];
@@ -419,6 +424,7 @@ class StackChartCanvas extends React.PureComponent<Props> {
     if (hoveredItem === null) {
       return;
     }
+    // Figure out if this is a call node or a marker.
     const { depth, stackTimingIndex } = hoveredItem;
     const { stackTimingByDepth, updatePreviewSelection } = this.props;
     updatePreviewSelection({
diff --git a/src/components/stack-chart/index.js b/src/components/stack-chart/index.js
index 17cf2b9b..53f17a36 100644
--- a/src/components/stack-chart/index.js
+++ b/src/components/stack-chart/index.js
@@ -138,7 +138,8 @@ class StackChartGraph extends React.PureComponent<Props> {
       scrollToSelectionGeneration,
     } = this.props;
 
-    const maxViewportHeight = maxStackDepth * STACK_FRAME_HEIGHT;
+    const maxViewportHeight =
+      maxUserTimingDepth + maxStackDepth * STACK_FRAME_HEIGHT;
 
     return (
       <div
@@ -173,6 +174,7 @@ class StackChartGraph extends React.PureComponent<Props> {
                 chartProps={{
                   interval,
                   thread,
+                  userTimingMarkers,
                   stackTimingByDepth,
                   // $FlowFixMe Error introduced by upgrading to v0.96.0. See issue #1936.
                   updatePreviewSelection,
diff --git a/src/profile-logic/stack-timing.js b/src/profile-logic/stack-timing.js
index 082fd085..40486cd4 100644
--- a/src/profile-logic/stack-timing.js
+++ b/src/profile-logic/stack-timing.js
@@ -48,12 +48,20 @@ import type {
 export type StackTimingDepth = number;
 export type IndexIntoStackTiming = number;
 
-export type StackTimingByDepth = Array<{
-  start: Milliseconds[],
-  end: Milliseconds[],
-  callNode: IndexIntoCallNodeTable[],
-  length: number,
-}>;
+export type StackTimingByDepth = Array<
+  | {
+      start: Milliseconds[],
+      end: Milliseconds[],
+      markerIndex: Array<MarkerIndexIndex>,
+      length: number,
+    }
+  | {
+      start: Milliseconds[],
+      end: Milliseconds[],
+      callNode: Array<IndexIntoCallNodeTable>,
+      length: number,
+    }
+>;
 
 type LastSeen = {
   startTimeByDepth: number[],
@@ -67,7 +75,8 @@ export function getStackTimingByDepth(
   thread: Thread,
   callNodeInfo: CallNodeInfo,
   maxDepth: number,
-  interval: Milliseconds
+  interval: Milliseconds,
+  userTimingMarkers: Markers[]
 ): StackTimingByDepth {
   const { callNodeTable, stackIndexToCallNodeIndex } = callNodeInfo;
   const stackTimingByDepth = Array.from({ length: maxDepth }, () => ({