Reimplement the marker chart by using several canvas elements instead of just one

Currently our marker chart is made of one big canvas. Instead we should split it by having one canvas for each line. As a reminder one line is encoded as a marker timing row in the JS logic, so this logic shouldn't be impacted. However the drawing logic would change.

Impacts of this change:
* HTML labels instead of drawn with the canvas API (see also #574)
* use a scrollbar to scroll down (see bug-1872217) like a normal page

Difficulties:
* handle propely the zoom gestures. It's currently handled by the Viewport HOC. It would be good to extract the zoom functionality into a hook, reimplement the Viewport HOC using this hook (for other users of the Viewport HOC), and finally use the hook in the new marker chart implementation
* we may need to virtualize the list, unless using the IntersectionObserver to control just the drawings would be good enough for performance.

┆Issue is synchronized with this [Jira Task](https://mozilla-hub.atlassian.net/browse/FP-7)

Start by locating the marker chart drawing logic and the Viewport HOC; the marker timing row logic should remain unchanged. The work is done when each line uses its own canvas, labels are HTML, scrolling behaves like a normal page, and zoom gestures still work, with virtualization or IntersectionObserver considered for performance.

Written by the indexing model from the issue text.