we should use the user-defined values for front and background color when drawing canvases

[julienw]

This is from looking @PaulBone's computer.

Firefox has color keywords for user-defined colors, that's -moz-default-color and -moz-default-background-color.

I checked: this works for canvas too.

A way to programmatically detect whether they're supported is:

const elt = document.createElement('div');
elt.style.color = '-moz-default-background-color';
const isUserDefinedColorSupported = elt.style.color !== '';

There may be better ideas to detect this :)

We should try to use them instead of hardcoded values.

Now another issue is that we don't use these values directly, like sometimes it's a light grey and not directly white. I don't have a good solution for this yet; somehow we need to be able to transform colors (see https://css-tricks.com/snippets/javascript/lighten-darken-color/ for example).

┆Issue is synchronized with this Jira Task

[julienw]

I realize that the light grey in the stack chart is the category color (see https://github.com/devtools-html/perf.html/blob/728bf43bc51f5935941183db8f87279d67e55376/src/components/stack-chart/Canvas.js#L169). Maybe we need reverse-colors for categories.

Some hardcoded places:

• https://github.com/devtools-html/perf.html/blob/728bf43bc51f5935941183db8f87279d67e55376/src/components/marker-chart/Canvas.js#L254-L255
• https://github.com/devtools-html/perf.html/blob/728bf43bc51f5935941183db8f87279d67e55376/src/profile-logic/interval-marker-styles.js

@PaulBone said we could also introduce a "reverse color" mode instead of using the user-defined colors.