1590215 - [META] Dev Tools should use HCM colours and backplating when HCM is enabled.

Status: NEW

(DevTools :: General, defect, P3)

Description

[Morgan Reschenberg [:morgan]]

Attachment: devtools HCM.png

STR:

1. Enable window's high contrast mode in settings, or go to about:preferences > colours > always in firefox
2. Navigate to google.com
3. Open the devtools panel (Tools > web developer > toggle tools)

Expected:

• Dev tools uses user-specified colours to render content within the dev tools pannel

Actual:

• Dev tools retains its native styling (light or dark mode) and is unaffected by the user selected colours
• Portions of the panel are backplated, decreasing overall readability because the text colour is not inherited from user settings.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is set to S3. However, the accessibility severity is higher, [access-s2].
:Honza, could you consider increasing the severity?

For more information, please visit auto_nag documentation.

Comment 2

[Morgan Reschenberg [:morgan]]

downgrading to access s3 because I think we've decided FF HCM should only apply to web content and not chrome-y things like devtools. We should still audit whether or not this works on Windows w/ win HCM -- but I'm not on a windows machine right now to verify that :)

Comment 3

[Anna Yeddi [:ayeddi]]

Attachment: 2022-10-19_DevTools_MR_WinOS_with_HCM.png

(In reply to Morgan Reschenberg [:morgan] from comment #2)

downgrading to access s3 because I think we've decided FF HCM should only apply to web content and not chrome-y things like devtools. We should still audit whether or not this works on Windows w/ win HCM -- but I'm not on a windows machine right now to verify that :)

DevTools do not respect HCM on Windows 11. The screenshot was take with the stable 106.0 (64-bit) but it looks the same with today's Nightly 108.0a1 (2022-10-19) (64-bit)

Comment 4

[Morgan Reschenberg [:morgan]]

ah you rock, thank you ! :) I'll put this back to [access-s2] then

Comment 5

[Morgan Reschenberg [:morgan]]

:Honza, re-ni?'ing you here because I cleared the autonag before from the relman bot 😁

Comment 6

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Hey, thank you for the ping

I am keeping S3 for this bug since DevTools is only used by web developers and not by standard Firefox user population. But, I agree that DevTools should respect the current HCM settings and adjust the colors used in the UI.

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Note that we use forced-color-adjust: none on :root, which makes the toolbox opt out of forced colors mode: https://searchfox.org/mozilla-central/rev/9fcc11127fbfbdc88cbf37489dac90542e141c77/devtools/client/themes/common.css#8,17

:root {
...
  forced-color-adjust: none;

We should first remove this, and then see what's broken.
Then we can probably adjust, using @media (forced-colors : active) where needed.
This is going to be a pretty challenging and long task to go over all panels, so we probably should split this in multiple bugs for each individual panels.

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

Attachment: WIP: Bug 1590215 - [devtools] Support High Contrast Mode in Toolbox.

Comment 9

[Nicolas Chevobbe [:nchevobbe]]

I attached a first patch removing the "blanket" forced-color-adjust: none and fixing issues I was seeing with HCM on Windows, mainly in the Inspector.
I'm not sure how to proceed with this patch though, I have a few questions for the a11y team folks:

Should I try to land my initial version of the patch, and then have follow up items for the different issues we see?
Or should we only enable HCM support once we think we tackle every issues? In such case, I may do the work behind a pref so I can incrementally work on various pieces.

Also, in DevTools settings panel, users can chose a theme: Auto, Light or Dark. I feel like we only apply HCM when the theme is Auto, as the user already choose between light and dark when setting its high contrast theme at the OS level, is that correct?

Comment 10

[Morgan Reschenberg [:morgan]]

I think doing this work behind a pref for now, until we're confident we've solved most of the S2's is a great idea :) We don't want to release something we're not confident is usable for HCM users, even if it is closer to what we want than what we have now.

Here's one strategy we could take:

1. Land this work now, behind a pref that is default-off
2. Submit an accessibility engineering review. Pending manager approval, I and the rest of the team can tackle this as we have time. We'll focus on finding S2's for now.
3. Once we're confident that the review has addressed all existing S2's, we can unpref this work in nightly. Then, we can focus on S3's and other less-severe but high-priority bugs before unpref'ing in release.

As part of this work, we should ensure "Dark" and "Light" modes retain "forced-colors-adjust:none;" so HCM styling doesn't apply. Users with HCM enabled should be able to select "Light" or "Dark" to turn off HCM in devtools.

Are you anticipating this work taking place in 2024 H2?
This would be a pretty substantial review for the a11y team to undertake, since devtools has quite a few surfaces to verify. I can follow up with my manager to make sure we have the time to commit to something like this between now and the end of the year.

Comment 11

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Morgan Reschenberg [:morgan] from comment #10)

I think doing this work behind a pref for now, until we're confident we've solved most of the S2's is a great idea :) We don't want to release something we're not confident is usable for HCM users, even if it is closer to what we want than what we have now.

Sounds good, I'll file a bug to add the pref, and then only support HCM when the pref is set

Here's one strategy we could take:

1. Land this work now, behind a pref that is default-off
2. Submit an accessibility engineering review. Pending manager approval, I and the rest of the team can tackle this as we have time. We'll focus on finding S2's for now.
3. Once we're confident that the review has addressed all existing S2's, we can unpref this work in nightly. Then, we can focus on S3's and other less-severe but high-priority bugs before unpref'ing in release.

Sounds great

Are you anticipating this work taking place in 2024 H2?
This would be a pretty substantial review for the a11y team to undertake, since devtools has quite a few surfaces to verify. I can follow up with my manager to make sure we have the time to commit to something like this between now and the end of the year.

So I was told by my manager that we should go over DevTools' accessibility s2 bugs (https://bugzilla.mozilla.org/buglist.cgi?f1=cf_accessibility_severity&resolution=---&classification=Client%20Software&classification=Developer%20Infrastructure&classification=Components&classification=Server%20Software&classification=Other&query_format=advanced&o1=equals&v1=s2&chfield=cf_accessibility_severity&product=DevTools&list_id=17087232), and so I'm currently doing that, and it will probably slip into H2 (which is next week already I guess).
As said earlier, I can land the ground work behind a pref, and I'll wait for the accessibility engineering review before moving further. I can double check with my manager, but I think we will commit working on this when we get the a11y review, be it in H2 or later.

As part of this work, we should ensure "Dark" and "Light" modes retain "forced-colors-adjust:none;" so HCM styling doesn't apply. Users with HCM enabled should be able to select "Light" or "Dark" to turn off HCM in devtools.

Perfect, I had trouble picturing how this would work if it wasn't like that. I'll make sure to handle that in the initial patch I'll land behind the pref

Comment 12

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #11)

I can land the ground work behind a pref, and I'll wait for the accessibility engineering review before moving further. I can double check with my manager, but I think we will commit working on this when we get the a11y review, be it in H2 or later.

Hello Morgan, so I just checked with my manager and we can commit to handle this work whenever we get the accessibility engineering review.
I'm putting a needinfo for you so it's on your radar until you get an answer from your manager/team as to when you can do the review :)

Comment 13

[Morgan Reschenberg [:morgan]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #12)

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #11)

I can land the ground work behind a pref, and I'll wait for the accessibility engineering review before moving further. I can double check with my manager, but I think we will commit working on this when we get the a11y review, be it in H2 or later.

Hello Morgan, so I just checked with my manager and we can commit to handle this work whenever we get the accessibility engineering review.
I'm putting a needinfo for you so it's on your radar until you get an answer from your manager/team as to when you can do the review :)

Hey! Great, thanks for verifying.

After talking with the team/our manager, we've got time to commit to an engineering review of a few surfaces, but not all of devtools.
Do you have telemetry info on which surfaces are most used/have the most interactions-per-launch?
If you've got a list I can go through it and try to bucket surfaces into "things we can tackle soon" and "things we'll need to tackle later".

Comment 14

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Morgan Reschenberg [:morgan] from comment #13)

After talking with the team/our manager, we've got time to commit to an engineering review of a few surfaces, but not all of devtools.
Do you have telemetry info on which surfaces are most used/have the most interactions-per-launch?
If you've got a list I can go through it and try to bucket surfaces into "things we can tackle soon" and "things we'll need to tackle later".

Our most used panels are:

1. Inspector
2. Console
3. Netmonitor

In the Inspector, the most used subpanels are

1. The markup view
2. The rules view
3. The layout panel
4. The computed panel

I think it would be a nice start to look into those.
If you think that would be helpful, I could try to reference (and file bugs) for all the obvious issue I can see with HCM enabled?

Comment 15

[Morgan Reschenberg [:morgan]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #14)

(In reply to Morgan Reschenberg [:morgan] from comment #13)

After talking with the team/our manager, we've got time to commit to an engineering review of a few surfaces, but not all of devtools.
Do you have telemetry info on which surfaces are most used/have the most interactions-per-launch?
If you've got a list I can go through it and try to bucket surfaces into "things we can tackle soon" and "things we'll need to tackle later".

Our most used panels are:

1. Inspector
2. Console
3. Netmonitor

In the Inspector, the most used subpanels are

1. The markup view
2. The rules view
3. The layout panel
4. The computed panel

I think it would be a nice start to look into those.
If you think that would be helpful, I could try to reference (and file bugs) for all the obvious issue I can see with HCM enabled?

Hey! Sorry I missed your reply here.
That would be great, thank you! I can take a look at the list and help prioritise once you've got it

Comment 16

[Nicolas Chevobbe [:nchevobbe]]

I'm not done yet with my initial check. I think I reported anything I could see in Console and Netmonitor, I'll look at the Inspector later today/this week

Comment 17

[Morgan Reschenberg [:morgan]]

I've triaged the bugs marked as blocking :) Here's my rubric:

S2 - UI that doesn't adapt to HCM (i.e. it uses existing firefox colours), UI that doesn't show up in HCM (incomplete overriding of colours), UI that fails to provide a visual indication of state change (e.g. selected text that looks like regular text in HCM)
S3 - UI that adapts but could adapt better, UI that uses incorrect colours for its role (e.g. buttons that are styled as links, clickable regions that are styled with text colours)

Please NI?me if you have questions or find more issues to triage (though I'll try to keep my eyes on this bug too)

Comment 18

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Morgan Reschenberg [:morgan] from comment #17)

I've triaged the bugs marked as blocking :) Here's my rubric:

S2 - UI that doesn't adapt to HCM (i.e. it uses existing firefox colours), UI that doesn't show up in HCM (incomplete overriding of colours), UI that fails to provide a visual indication of state change (e.g. selected text that looks like regular text in HCM)
S3 - UI that adapts but could adapt better, UI that uses incorrect colours for its role (e.g. buttons that are styled as links, clickable regions that are styled with text colours)

Thanks a lot Morgan

Please NI?me if you have questions or find more issues to triage (though I'll try to keep my eyes on this bug too)

Will do!

Comment 19

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Morgan Reschenberg [:morgan] from comment #17)

Please NI?me if you have questions or find more issues to triage (though I'll try to keep my eyes on this bug too)

I NI'd you on all the bugs that didn't have a a11y severity yet, sorry for all the bugmails 😬
I think I covered anything I could think of, but I may have missed simpler things, so don't hesitate to file bugs that I missed.

Honza, my manager, told me that the a11y s2 are important to fix, so I'll start working on those very soon

Comment 20

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #19)

(In reply to Morgan Reschenberg [:morgan] from comment #17)

Please NI?me if you have questions or find more issues to triage (though I'll try to keep my eyes on this bug too)

I NI'd you on all the bugs that didn't have a a11y severity yet, sorry for all the bugmails 😬
I think I covered anything I could think of, but I may have missed simpler things, so don't hesitate to file bugs that I missed.

Forgot to say that for testing HCM support in DevTools, you need to set devtools.high-contrast-mode-support to true, and select the Auto theme in DevTools settings

Comment 21

[Nicolas Chevobbe [:nchevobbe]]

And I realized a lot of the issues were very similar to the one you already triaged, so I triaged the one for which I was confident