firefox-devtools / firefox-devtools/profiler

UI could look better in High Contrast Mode

Open
#5,218 6 comments 0 reactions 0 assignees View on GitHub
accessibility
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:

![image](https://github.com/user-attachments/assets/62eb0423-9852-41f0-8e1f-c7e6ae56a38b)

┆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` ![image](https://github.com/user-attachments/assets/bb405bba-5a4e-4c43-b4a9-9307692359b8)
- [ ] Top right corner buttons should have a `ButtonText` color (and borders probably) ![image](https://github.com/user-attachments/assets/675ec9b1-8203-4d43-86ba-bf14612bf3a1)
- [ ] Top right corner buttons should have a `SelectedItemText` color on hover ![image](https://github.com/user-attachments/assets/c5544577-21f1-4797-b1fb-f7e3c973cd99)
- [ ] Profile info Delete and Re-sybolicate buttons should have borders ![image](https://github.com/user-attachments/assets/93f52ef4-c754-483d-8803-8ae7973a2eb9)
- [ ] Top right corner buttons icons aren't visible
- [ ] Documentation button should look like a link
- [ ] (Re)upload data checkboxes don't look like checkboxes ![image](https://github.com/user-attachments/assets/ee9954b8-1346-41e7-b2c0-468e8f676415)
- [ ] Upload button icon should be `ButtonText`, and the button should have a border
- [ ] Profile information Uploaded icon (the cloud one), is barely visible ![image](https://github.com/user-attachments/assets/ef240a3e-840b-4cac-8538-6469f74d1903)
- [ ] (checked) radio input don't look like radio
![image](https://github.com/user-attachments/assets/14f51285-c63e-436e-8d7a-008862b3a7d1)
- [ ] "Invert call stack" checkbox doesn't look like a checkbox input when checked
![image](https://github.com/user-attachments/assets/a4d31473-f62e-427d-846d-22923d3cc0a9)
- [ ] Filter stacks input clear button should have a ButtonText color ![image](https://github.com/user-attachments/assets/debb6296-e8d8-4c4b-9c75-aabbdeba6b4b)
- [ ] "Breadcrumb" separator icons are rendered as a rectangle
![image](https://github.com/user-attachments/assets/70dfe08e-1aa4-4cba-be19-b864de93a1f1)
- [ ] 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 ![image](https://github.com/user-attachments/assets/0ce7eb7e-c190-4760-a082-4792dc249f99)
- [ ] 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 ![image](https://github.com/user-attachments/assets/608c14f4-ec48-45d9-89a3-19261e4204ee)
- [ ] bottom right corner Legal/Privacy/Cookies close button doesn't have enough contrast on hover ![image](https://github.com/user-attachments/assets/eed65fb9-31de-485e-959f-2cfc56f6cb1f)

---

- [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 ![image](https://github.com/user-attachments/assets/76a8375e-f51e-43ca-a3b9-8d10a58f2110) Here Parent Process is selected. Hover style should be handled (fixed by #5252)
- [x] Tracks context menu arrow button looks like a rectangle ![image](https://github.com/user-attachments/assets/f18720eb-d342-4d2f-bac6-82edcf4fcc8a) . It should also have a `ButtonText` color (fixed by #5257)
- [x] Track timespan should have a `ButtonText` color ![image](https://github.com/user-attachments/assets/704713b2-d5f4-4f2b-8d52-f7d0391e300e) (fixed by #5257)
- [x] Track "active" timespan should get a SelectedItem background ![image](https://github.com/user-attachments/assets/be94b5d2-a9fc-4e3c-b0e2-5e0756e999e9) (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 ![image](https://github.com/user-attachments/assets/3bbe9cdd-fb1a-491b-aa07-6debd85badc6) (fixed by #5259)
- [x] Track "zoom handles" should have a ButtonText border or background ![image](https://github.com/user-attachments/assets/52d7fd19-080f-433a-a096-92cf046c0f11) (fixed by #5259)
- [x] Track "zoom timespan" should have borders ![image](https://github.com/user-attachments/assets/6804972a-b388-4a8f-b2f8-fe46f3c1fcaf) (fixed by #5259)
- [x] Timeline time tooltip should have a border or a CanvasText background with a Canvas text ![image](https://github.com/user-attachments/assets/c66ee425-ef30-4b1c-bf3b-29b700e319d8) (fixed by #5259)
- [x] keyboard shortcut panel doesn't have border and the `` items don't get a distinct style
![image](https://github.com/user-attachments/assets/37811485-9147-4cb7-8261-8ea0b6d478d4) (fixed by #5245)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.