1498737 - [HighContrast Mode][Mac OS] Toggles are no longer visible if display contrast is increased

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Paul_B]

STR:

1. Navigate to System Preferences -> Access and locate the Display Contrast controller.
2. Move the Display Contrast indicator towards the middle.  
3. Launch Firefox and navigate to a random page (e.g. nytimes.com)
4. Enable the element inspector and select a flex element.
5. Navigate to the Flexbox Inspector and observe the overlay toggle.

Actual result:

The overlay toggle is not visible anymore after the high contrast has been modified. 
I have attached a screenshot for better understanding. If the high-contrast indicator is moved towards the middle of the scale the toggle is no longer visible.

Expected result:

All elements of the FlexBox Inspector are properly visible even with HighContrast Mode on, as it does on Windows or Ubuntu.

Comment 1

[Paul_B]

Attachment: screenshot of high-contrast config dialog (doesn't show the bug b/c bug isn't visible in screenshots)

Comment 2

[Paul_B]

I apologize. For some reason, when the screenshot was captured the toggle was visible again, but I'll make sure I'll attach a better example of the issue.

Comment 3

[Daniel Holbert [:dholbert]]

(Setting needinfo per comment 2 - sounds like you were intending to attach an updated screenshot, I think?)

Also, two questions:
 (1): By "overlay toggle", I suspect you're talking about the little gray slider button that looks kinda like "(o  )" -- is that right?

 (2) If so, would you mind testing other DevTools panes that have the same widget & see if they're affected too?  For example: I found one other similar-looking slider on the "Fonts" devtools pane (Fonts is one of the tab-titles at the rightmost pane of three-pane-devtools).  That Fonts pane has a similar slider labeled "Italic" there, at least in most cases (e.g. for any node that I pick at nytimes.com).  It'd be useful to know if that button is affected by this bug as well (I'm guessing it probably is...)

Comment 4

[Paul_B]

Hi Daniel,

I apologize for not adding the attachment. I've tried to catch it in a screen recording, but whenever I play back the video, the issue is not visible. ( although it was during the recording - as it happened with the screenshot). 

1. Yes, I'm talking about the toggle from the far right side of the Inspector, present in the Layout section, when a flex container is selected. 

2. I've navigated to Fonts - and it seems that all the toggles present on the page are affected ( the ones for Size / Line Height / Wight and Italic ). 

Based on this, I'll edit the title and remove the [Flexbox Inspector] tag, as it is not limited to this feature.

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to Paul_B from comment #4)
> I apologize for not adding the attachment. I've tried to catch it in a
> screen recording, but whenever I play back the video, the issue is not
> visible. ( although it was during the recording - as it happened with the
> screenshot). 

Odd! Maybe the video/screen-capture tools bypass some piece of the "high contrast" feature, or something.

Just for documentation/demonstration purposes, you might consider taking a photo or video of the screen when reproducing the bug -- presumably the issue would be visible there.  (Though maybe that's not necessary. *shrug*)

Comment 6

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: photo showing the missing widget (white circle visible in upper right corner, but its "track" isn't shown)

Here is a photo of the issue taken with a phone.

@Victoria: What do you think we should do here? Maybe add a light grey border to the background?

Comment 7

[Paul_B]

Attachment: Short video of the issue

I've added a short video of the issue captured with the phone.

Comment 8

[Victoria Wang [:victoria]]

Thanks all for the info - I'm not sure there's a great solution to this for now. We've discussed creating a separate high contrast theme, which would be ideal, but for now I don't think we want to deepen all the sleek gray areas which get lost (I feel a gray outline on the toggle track would just get lost like all the other grays). In trying this out, I noticed that even the MacOS system panel itself gets pretty unusable at high contrast (especially the checkboxes).

Comment 9

[Victoria Wang [:victoria]]

(The main Firefox content blocking toggle (in the hamburger menu) also disappears at high contrast, and we're patterning ours after theirs.)