[Uptime] Filmstrip for Synthetic monitors

[paulb-elastic]

This issue builds on the original high level requirement defined in elastic/uptime#250.

Story

As a web performance engineer using Synthetic monitoring
I want to be able to see the visual loading progress of the website at specific points in time as the page loads
So that I can clearly see the visual impact of poorly performing pages

Acceptance criteria

• There is a filmstrip that shows the various stages of the page loading over time shown on the same page as the waterfall chart
• It is possible to separate out the filmstrip for each step of a multi step user journey
• It is possible to focus on what the page looks like at specific points in time to the page loading (e.g. a scrubber between the waterfall chart and the filmstrip)
• Determine if there is any limitation to the duration of the step or total user journey, and the implications of this to the feature
• Determine if there is any impact of capturing filmstrip images, on the performance metrics gathered on the page (i.e. the observer effect), and the implications of this to the feature

Dependencies

• Design how this will fit into the waterfall chart (statically, and also with the scrubber) https://github.com/elastic/observability-design/issues/5
• Able to get the precise position of the mouse on the waterfall chart Ability to determine precise y-axis mouse position on the stacked bar chart and represent it in the crosshair label elastic-charts#906
• Ensure the Synthetic Agent is capturing filmstrips (note that this was changed to be off by default in Feature flag to control filmstrip image capture synthetics#143
  • Synthetics needs to capture screenshots Capture filmstrip images synthetics#250
  • It must be possible to coordinate the filmstrip images and when they appear relative to the page (step) loading Synchronise trace timestamps with internal and other CDP timings synthetics#85

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)