Revisit how we're building the Debugger Tracer sidebar timeline
Categories
(DevTools :: Debugger, task)
Tracking
(Not tracked)
People
(Reporter: nchevobbe, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(1 file)
|
67.46 KB,
image/png
|
Details |
"pill" UI
At the moment, we're using regular HTML element that we absolutely position, using percentage, which can be the source of misplacements.
The events "markers" have a clip path applied to have the "reverse L" look.
We could use SVG/Canvas/WebGL, which would be more efficient at drawing custom shapes.
When there's a lot of events / mutations , depending on the level of zoom, markers can overlap, making the timeline cluttered and hard to read
Also, rendering too many items makes the rendering slugish on long traces.
|
Reporter | |
Comment 1•6 months ago
|
||
For the overlapping bit, we could try to merge all close items into a single shape, with an indication of what's in there.
We could "magnify" the content around the mouse so it will be easier to navigate, and double clicking a marker "slice" will zoom in the appropriate event
Description
•