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.
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.
preprocessDatato process User Timing measures.renderCanvasto highlight related marks.Acceptance Criteria
idshould be highlighted.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