Show User Timing measures in the UI

[taneliang]

Follows up from #72, which implemented User Timing marks but not measures.

Iterations

Iteration 1 was #72, which added User Timing marks.

Iteration 2: highlight a User Timing measure's marks together when one is hovered

This is a similar idea to #44. When a measure's start/end mark is hovered over, we can highlight its corresponding mark.

Steps

There are multiple ways to implement this; I'm thinking that the easiest way will be to implement something similar to suspense wakeable IDs (more context at #44), so that we can reuse the rendering logic.

• Modify types with a measure ID.
• Update preprocessData to process User Timing measures.
• Update renderCanvas to highlight related marks.

Acceptance Criteria

• When a custom User Timing mark is moused over, all User Timing marks with the same id should be highlighted.
• No Flow errors in affected code.

Iteration 3: display User Timing measures

This is much trickier than the above 2 iterations, as this requires a variable number of rows (or 1 variable-height row) whereas the above 2 only require a fixed-height row.

The end result should be something similar to a combination of our React measures and the Chrome Performance tab's Timings section (screenshot below).

Acceptance Criteria

• If no User Timing measures are present, there should be no change in the UI.
• Custom User Timing measures should appear as bars in a new canvas section.
• Custom User Timing measures should not overlap.
• Measures should be ordered roughly similar to how Chrome orders them.
• Hovering over the User Timing measures should display a tooltip with more information such as the measure's name, start time, and duration.
• Hovering over other items onscreen should not be broken.
• No Flow errors in affected code.