firefox-devtools / firefox-devtools/profiler

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

Open
#673 1 comment 0 reactions 0 assignees View on GitHub
accessibility
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.