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/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 Dim non-matching nodes in the stack chart when searching #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

---

• Selected tab doesn't look selected (fixed by Adapt selected Tabs in High Contrast Mode #5220)
• Marker Table sidebar Stack item border don't get the category color (fixed by Opt-out of forced-colors for colored-square and colored-border #5237)
• Call Tree arrows are rendered as rectangles (fixed by Adapt Tree row toggle button to High Contrast Mode. #5238)
• Call tree category squares don't have a background color (fixed by Opt-out of forced-colors for colored-square and colored-border #5237)
• Tracks disabled context menu entries should have a GrayText color (fixed by Adapt context menu to High Contrast Mode #5244)
• Tracks context menu should get a SelectedItem background on hover (fixed by Adapt context menu to High Contrast Mode #5244)
• Selected track doesn't look selected Here Parent Process is selected. Hover style should be handled (fixed by Adapt Tracks to High Contrast Mode. #5252)
• Tracks context menu arrow button looks like a rectangle . It should also have a ButtonText color (fixed by Adapt FilterNavigatorBar to High Contrast Mode. #5257)
• Track timespan should have a ButtonText color (fixed by Adapt FilterNavigatorBar to High Contrast Mode. #5257)
• Track "active" timespan should get a SelectedItem background (fixed by Adapt FilterNavigatorBar to High Contrast Mode. #5257)
• Track "preview timespan" shouldn't have a lowered opacity (set on .filterNavigatorBarUncommittedItem) (fixed by Adapt FilterNavigatorBar to High Contrast Mode. #5257)
• Track "zoom" icon isn't visible (fixed by Adapt time-slice selection in High Contrast Mode.  #5259)
• Track "zoom handles" should have a ButtonText border or background (fixed by Adapt time-slice selection in High Contrast Mode.  #5259)
• Track "zoom timespan" should have borders (fixed by Adapt time-slice selection in High Contrast Mode.  #5259)
• Timeline time tooltip should have a border or a CanvasText background with a Canvas text (fixed by Adapt time-slice selection in High Contrast Mode.  #5259)
• keyboard shortcut panel doesn't have border and the <kbd> items don't get a distinct style
  (fixed by Adapt Keyboard shortcut dialog in High Contrast Mode. #5245)

[julienw]

Hey Nicolas, what more would you think is needed after your patch #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:

[arai-a]

#5740 adds dark mode, and some issues in the dark HCM are solved:

• icon color
• chart color