firefox-devtools / firefox-devtools/profiler
we should use the user-defined values for front and background color when drawing canvases
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 491
- Avg merge
- 3d 5h
- Merged PRs (30d)
- 30
Description
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:
```javascript
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](https://mozilla-hub.atlassian.net/browse/FP-676)
Contributor guide
Research direction
Start by locating the canvas drawing code and its hardcoded color values. Reproduce the Firefox support check described in the issue, then determine how user-defined foreground and background colors should be transformed for cases that currently use light gray rather than white. Done means canvas rendering consistently respects those colors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100