firefox-devtools / firefox-devtools/profiler
UI could look better in High Contrast Mode
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 491
- Avg merge
- 3d 46m
- Merged PRs (30d)
- 27
Description
When enabling a High Contrast Theme on Windows and setting forced colors in Firefox, the profiler looks a bit odd:

┆Issue is synchronized with this [Jira Task](https://mozilla-hub.atlassian.net/browse/FP-825)
---
- [ ] Focus indicators aren't visible
- [ ] Edit Profile name button color should probably be `ButtonText`
- [ ] Edit Profile name button hover color should be `SelectedItemText` 
- [ ] Top right corner buttons should have a `ButtonText` color (and borders probably) 
- [ ] Top right corner buttons should have a `SelectedItemText` color on hover 
- [ ] Profile info Delete and Re-sybolicate buttons should have borders 
- [ ] Top right corner buttons icons aren't visible
- [ ] Documentation button should look like a link
- [ ] (Re)upload data checkboxes don't look like checkboxes 
- [ ] Upload button icon should be `ButtonText`, and the button should have a border
- [ ] Profile information Uploaded icon (the cloud one), is barely visible 
- [ ] (checked) radio input don't look like radio

- [ ] "Invert call stack" checkbox doesn't look like a checkbox input when checked

- [ ] Filter stacks input clear button should have a ButtonText color 
- [ ] "Breadcrumb" separator icons are rendered as a rectangle

- [ ] Call tree selected item doesn't get a background when tree isn't focused
- [ ] Call Tree sidebar toggle button (`.sidebar-open-close-button`) isn't visible
- [ ] `sidebar-histogram-bar-color` are not visible (maybe those should be `` too ? )
- [ ] Call Tree sidebar Categories headers don't have enough contrast on hover 
- [ ] Call Tree sidebar Categories headers could have a border
- [ ] Call Tree search matching texts are not visible. They should have a `Mark` background and `MarkText` color
- [ ] Flame Graph/Stack Chart/Marker Chart keep a light background in dark mode, but this one might be more related to dark mode support than an issue with High Contrast Mode
- [ ] Flame graph tooltip "histograms" are not visible (might be fixed at the same time as we handle them in the Call Tree ?)
- [ ] Flame Graph/Stack Chart tooltip category colors are not visible (same, might be fixed as the same time as we handle them in the Call Tree)
- [ ] Flame graph/Stack Chart item colors could have higher contrast. The accessibility team created a High Contrast palette that we could pick color from (https://www.figma.com/design/VHRA9hZ54oJqKKJwPd6FWa/High-Contrast-Mode?node-id=1870-2617&node-type=canvas&t=cESK0Mn8tfktc9Ow-0)
- [ ] Note that https://github.com/firefox-devtools/profiler/pull/5935 is adding a "dimmed" style when filtering the view. We should try to use `GrayText` for the dimmed nodes text color when in HCM
- [ ] Marker Chart/ Marker Table filter icon isn't visible 
- [ ] bottom right corner Legal/Privacy/Cookies close button doesn't have enough contrast on hover 
---
- [x] Selected tab doesn't look selected (fixed by #5220)
- [x] Marker Table sidebar Stack item border don't get the category color (fixed by #5237)
- [x] Call Tree arrows are rendered as rectangles (fixed by #5238)
- [x] Call tree category squares don't have a background color (fixed by #5237)
- [x] Tracks disabled context menu entries should have a `GrayText` color (fixed by #5244)
- [x] Tracks context menu should get a SelectedItem background on hover (fixed by #5244)
- [x] Selected track doesn't look selected  Here Parent Process is selected. Hover style should be handled (fixed by #5252)
- [x] Tracks context menu arrow button looks like a rectangle  . It should also have a `ButtonText` color (fixed by #5257)
- [x] Track timespan should have a `ButtonText` color  (fixed by #5257)
- [x] Track "active" timespan should get a SelectedItem background  (fixed by #5257)
- [x] Track "preview timespan" shouldn't have a lowered opacity (set on `.filterNavigatorBarUncommittedItem`) (fixed by #5257)
- [x] Track "zoom" icon isn't visible  (fixed by #5259)
- [x] Track "zoom handles" should have a ButtonText border or background  (fixed by #5259)
- [x] Track "zoom timespan" should have borders  (fixed by #5259)
- [x] Timeline time tooltip should have a border or a CanvasText background with a Canvas text  (fixed by #5259)
- [x] keyboard shortcut panel doesn't have border and the `` items don't get a distinct style
 (fixed by #5245)
Contributor guide
Assessment
This issue has not been assessed yet.