Flamegraph doesn't render thin adjacent boxes

[mstange]

Profile: https://share.firefox.dev/3n6HOJO

When there are many narrow boxes in the flame graph, they disappear, even if they are adjacent and fill up the full space.
In the profile above, you can move your mouse around above the EnterBaseline function, and you'll see based on the tooltip that a large part of the area is covered in functions but rendered blank.

[julienw]

I believe this is where we don't draw boxes smaller than 2px:

profiler/src/components/flame-graph/Canvas.js

Lines 200 to 204 in d6da757

	const w: CssPixels = (endTime - startTime) * containerWidth;
	if (w < 2) {
	// Skip sending draw calls for sufficiently small boxes.
	continue;
	}

We also forcibly keep a 1px offset in

profiler/src/components/flame-graph/Canvas.js

Lines 230 to 231 in d6da757

	// Draw rect at an offset to ensure spacing between blocks.
	ctx.fillRect(x + 1, y, w - 1, h);

So I wonder what the right behaviour would be. I don't think we want to draw smaller-than-1px boxes as things would be messy. Do you have an idea?

The fact that tooltips work makes things a bit weird indeed.

[mstange]

I think we should do it the same way the Chrome devtools do it: Draw the graph in device pixels, snap the left and right edge of each box to a multiple of two device pixels, and skip drawing boxes which snap away to nothing. For the remaining boxes, the width is at least 2 device pixels, so we can subtract one device pixel from the right and enforce the gap.

I have a patch, I need to split it up for easier review.

[julienw]

I had a similar idea (that should bring the same result) but possibly easier to do with our current code: draw the first box at the minimum visible width (that is 1px + 1px gap) that is on a specific px, and skip the others on the same px.