Make the idle frames more obvious with a distinct border color on Sample tooltip stacks

[canova]

Currently they show a grey border on the left, which is the same color as the "Other" category.

See the image for example:

It could be better to use white or something else as it's color on the left. White can be tricky for visibility though.

┆Issue is synchronized with this Jira Task

[canova]

It looks like Idle category uses the "transparent" color in the profile data. And We have a special handling for it here:

profiler/res/css/categories.css

Line 30 in 73b2d84

border-color: rgb(0 0 0 / 0.4);

When I overwrite this color for the tooltip and make it white, this is the border I get:

Which is not really visible at all. And since this is a border, I cant really add a border to a border. We can try some other lighter grey.

Here's a border with rgb(0 0 0 / 0.1):

And here's a border with rgb(0 0 0 / 0.2):

What do you think @fqueze ?

[julienw]

A bit crazy idea: with a box-shadow you could add a left border to the border, maybe something like this;

box-shadow: -1px 0 black;

[canova]

Interesting idea, but I don't think it worked out either:

[mstange]

I think the rgb(0 0 0 / 0.1) variant looks fine.

[canova]

I was also leaning towards the one with rgb(0 0 0 / 0.1). I was thinking about the accessibility aspect of it though, but one can argue that it's not a critical information and it's already surfaced in the "category" field above.

[mstange]

it's not a critical information and it's already surfaced in the "category" field above.

Yes, I agree with that argument.

[julienw]

Interesting idea, but I don't think it worked out either:

I meant it only for the white ones :-)

[julienw]

I was also leaning towards the one with rgb(0 0 0 / 0.1). I was thinking about the accessibility aspect of it though, but one can argue that it's not a critical information and it's already surfaced in the "category" field above.

We're already not super great for accessibility anyway, I think we'd need the category name to be displayed for each line to be correctly accessible, but that would make the tooltip a bit crowded.

I'm also fine with the light grey solution for now.