1477407 - [Windows] Menu items are not visible in high contrast mode

Status: VERIFIED FIXED

(DevTools :: General, defect, P1)

Description

[Abe - QA (:Abe_LV)]

Steps to Reproduce:
Screen capture- https://testing-1.tinytake.com/sf/Mjc3OTYxN184MzM3OTMz

1. Set high contrast. In Windows 10 select 'High Contrast Black' and apply
2. Click on the meatballs menu
3. Observe the menu items

Expected Result:
Menu items should be visible in high contrast mode

Actual Result:
Menu items are not visible in high contrast

Comment 1

[Patrick Brosset <:pbro>]

This seems like a P1 to me. Brian what do you think? Do we have a solution in mind for addressing this quickly?

Comment 2

[Brian Birtles (:birtles, Feb 26~ parental leave)]

I haven't looked into this properly yet -- I suspect it is the same as the Ubuntu theming bug (bug 1477417), i.e. using a system value for the text color but not the background color. That's just mirroring what other doorhangers in Firefox do but I suppose they have some specific handling for high-contrast mode. It might be enough just to hard-code the text color.

For now P1 seems fine.

Comment 3

[Abe - QA (:Abe_LV)]

This is reproducible in both Chevron and meatballs door-hanger menu.

Comment 4

[Brian Birtles (:birtles, Feb 26~ parental leave)]

I started to look into this and here's what I found.

The fundamental problem is that we're mixing system colors with non-system ones. We have:

  --theme-arrowpanel-background: white;
  --theme-arrowpanel-color: -moz-fieldText;

Now, when we set Windows to high-contrast mode, -moz-fieldText may become white, while the background will remain white. I believe this is the cause of bug 1477417 too.

So, why are we using -moz-fieldText?

Basically, to match the behavior for other menus in Firefox. On a standard Windows install this gives rgb(0, 0, 0) whereas on a default Ubuntu install it gives rgb(60, 60, 60). On Mac, we hard-code the color values some reason.

You can see all the system colors here: https://codepen.io/birtles/pen/JBrEQN

So why are we mixing system and fixed colors? I'm not really sure, but I suspect Firefox was doing it at the time and has since been fixed.

Firefox FE has the advantage that it can use the -moz-windows-default-theme media query to detect if we are in high contrast mode or not. (Naming here is a bit odd. So far as I can tell, that media query basically tells us if we are forcing Windows theme colors or not--and generally that is true when applying a high contrast theme, hence we often use it to switch to using system colors so that high-contrast mode works as expected.)

Unfortunately -moz-windows-default-theme is only available for UA and Chrome stylesheets and doesn't work in DevTools.

Nevertheless, it appears the colors for arrowpanels in Firefox have been tidied up and now look like:

Windows / Linux:

  (global.css)
  --default-arrowpanel-background: -moz-field;
  --default-arrowpanel-color: -moz-fieldText;
  --default-arrowpanel-border-color: ThreeDShadow;
  --panel-disabled-color: GrayText;

  (browser.css)
  --panel-separator-color: ThreeDShadow;
  --arrowpanel-dimmed: hsla(0,0%,80%,.3);
  --arrowpanel-dimmed-further: hsla(0,0%,80%,.45);

OSX:

  (global.css)
  --default-arrowpanel-background: hsla(0,0%,99%,.975);
  --default-arrowpanel-color: hsl(0,0%,10%);
  --default-arrowpanel-border-color: hsla(210,4%,10%,.05);
  --panel-disabled-color: GrayText;

  (browser.css)
  --panel-separator-color: hsla(210,4%,10%,.14);
  --arrowpanel-dimmed: hsla(0,0%,80%,.3);
  --arrowpanel-dimmed-further: hsla(0,0%,80%,.45);


On the other hand in DevTools we have:

Base:

  --theme-arrowpanel-background: white;
  --theme-arrowpanel-color: -moz-fieldText;
  --theme-arrowpanel-border-color: var(--grey-90-a20);
  --theme-arrowpanel-separator: var(--grey-90-a20);
  --theme-arrowpanel-dimmed: hsla(0,0%,80%,.3);
  --theme-arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
  --theme-arrowpanel-disabled-color: GrayText;

Mac overrides:

  --theme-arrowpanel-color: rgb(26,26,26);
  --theme-arrowpanel-border-color: hsla(210,4%,10%,.05);


I think we want to update this to:

  --theme-arrowpanel-background: -moz-field;
  --theme-arrowpanel-color: -moz-fieldText;
  --theme-arrowpanel-border-color: ThreeDShadow;
  --theme-arrowpanel-separator: ThreeDShadow;
  --theme-arrowpanel-dimmed: hsla(0,0%,80%,.3);
  --theme-arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
  --theme-arrowpanel-disabled-color: GrayText;

:root[platform="mac"].theme-light {
  --theme-arrowpanel-background: hsla(0,0%,99%,.975);
  --theme-arrowpanel-color: hsl(0,0%,10%);
  --theme-arrowpanel-border-color: hsla(210,4%,10%,.05);
  --theme-arrowpanel-separator: hsla(210,4%,10%,.14);
}


I'm not sure why I set --theme-arrowpanel-color to rgb(26, 26, 26) instead of hsl(0,0%,10%) though.

Comment 5

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Attachment: High contrast screenshot

Comment 6

[Brian Birtles (:birtles, Feb 26~ parental leave)]

I also verified that Dark mode continues to show the same as before (since it uses fixed colors).

Comment 7

[Brian Birtles (:birtles, Feb 26~ parental leave)]

(In reply to Brian Birtles (:birtles) from comment #4)
> I'm not sure why I set --theme-arrowpanel-color to rgb(26, 26, 26) instead
> of hsl(0,0%,10%) though.

It turns out hsl(0,0%,10%) === rgb(26,26,26).

I guess I used rgb(26,26,26) since I just read the value from the computed style I was getting on Mac.

Comment 8

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Attachment: Bug 1477407 - Consistently use system colors to define doorhanger styling; r=jdescottes

By mixing system colors and non-system colors we can arrive at a situation where
we have white text on a white background when using Windows high-constrast mode
or various themes on Linux.

This patch brings the colors used for DevTools doorhangers into line with the
colors used for arrowpanels elsewhere in Firefox.

Comment 9

[Phabricator Automation]

Comment on attachment 8995440 [details]
Bug 1477407 - Consistently use system colors to define doorhanger styling; r=jdescottes

Julian Descottes [:jdescottes][:julian] has approved the revision.

https://phabricator.services.mozilla.com/D2456

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/459a2b0d19bd
Consistently use system colors to define doorhanger styling; r=jdescottes

Comment 11

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/459a2b0d19bd

Comment 12

[Abe - QA (:Abe_LV)]

I retested this on Windows 10 and 7 with latest nightly. It is verified as fixed. Menu items are now visible in high contrast mode as well.

Test environment:
----------------
Version 	63.0a1
Build ID 	20180730100211
Update Channel 	nightly
User Agent 	Mozilla/5.0 (Windows NT 6.1; rv:63.0) Gecko/20100101 Firefox/63.0
AND
User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0