UI could look better in High Contrast Mode

[nchevobbe]

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

---

• [ ] 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 <meter> 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 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)
• [ ] Marker Chart/ Marker Table filter icon isn't visible
• [ ] bottom right corner Legal/Privacy/Cookies close button doesn't have enough contrast on hover
• [ ] keyboard shortcut panel doesn't have border and the <kbd> items don't get a distinct style

---

• [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)

[julienw]

Hey Nicolas, what more would you think is needed after your patch https://github.com/firefox-devtools/profiler/pull/5220 ?

[nchevobbe]

Hey Nicolas, what more would you think is needed after your patch #5220 ?

Quite a lot eh. I wanted to list the different issues here so we can have tasks that people could work on. I'll try to do it in the beginning of next week

[nchevobbe]

Hey Nicolas, what more would you think is needed after your patch #5220 ?

Quite a lot eh. I wanted to list the different issues here so we can have tasks that people could work on. I'll try to do it in the beginning of next week

@julienw I went through the UI and added tasks in the first comment of this issue. I may have missed some, but fixing those would already improved things a lot. Then I guess we should have the accessibility team have a look at this to confirm I'm not saying non-sense

[nmlapre]

Great list, thanks for the investigation Nicolas. Not much more to add from the accessibility side of things.

As a general note when starting any work of this kind: anywhere we have ButtonText we should pair it with ButtonFace, and anywhere we use SelectedItemText we should pair it with SelectedItem. We'd also prefer GrayText (for disabled controls) paired with ButtonFace. I note this because sometimes, depending on your settings, you might think they're equivalent since they may appear quite similar. For example, ButtonFace can look very similar to the Background color if not configured. It's important to get the pairings right so that people who want to configure one of the colors have a consistent experience and can easily visually distinguish controls.

[nchevobbe]

Note sure I will be able to spend more time on this, but the tasks should be up to date, and anyone could pick this up. Here's what it looks like now, for reference: