1506105 - Buttons and icons are not visible in High Contrast mode

Status: VERIFIED FIXED

(Toolkit :: Performance Monitoring, defect)

Description

[Gyula Palko[:gpalko]]

Attachment: highWhite.PNG

[Environment:]
Nightly 65.0a1 BuildId 20181108220756

[Steps:]
Enable a high contrast theme on the operating system(High Contrast Black/White)
1. Open Nightly
2. Open about:performance

[Actual Result:]
 Icons are not visible
 Buttons are not visible, the users are not able to close tabs, navigate to add-on detail page or open subsections in the list(see attached screenshot

[Expected Result:]
 The feature should be usable in high contrast mode

Comment 1

[Florian Quèze [:florian]]

Attachment: Patch

Comment 2

[Florian Quèze [:florian]]

Comment on attachment 9025743 [details] [diff] [review]
Patch

Now that I verified the patch actually works on Windows in High Contrast mode, requesting review.

Background colors and images are not painted in high contrast mode. This patch changes them to using the content property on the pseudo elements. And then there are a few tweaks to maintain a (mostly) correct vertical centering.

Comment 3

[:Felipe Gomes (needinfo for replies!)]

Comment on attachment 9025743 [details] [diff] [review]
Patch

Review of attachment 9025743 [details] [diff] [review]:
-----------------------------------------------------------------

I think you should investigate doing more of the centering with the table layout (vertical-align and text-align), and replacing the action buttons and twisty with real xul:buttons with -moz-appeareance: none.. That will probably save a lot of headaches

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/f9e9cf90de3d
Display the clickable icons using the content property instead of as a background image so that they are visible in high contrast mode, r=felipe.

Comment 5

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/f9e9cf90de3d

Comment 6

[Florian Quèze [:florian]]

Comment on attachment 9025743 [details] [diff] [review]
Patch

[Beta/Release Uplift Approval Request]

Feature/Bug causing the regression: bug 1496782, bug 1498185

User impact if declined: Icons that act as buttons are invisible in high contrast mode, making the new about:performance UI unusable for these users.

Is this code covered by automated tests?: No

Has the fix been verified in Nightly?: No

Needs manual test from QE?: Yes

If yes, steps to reproduce: Verify that clickable icons are now visible in high contrast mode. I'm confident that this is fixed. I think we could use a bit of manual QA to verify that the icons are still displayed at the correct places. Vertical alignment may be slightly off for some themes/font-sizes.

List of other uplifts needed: None

Risk to taking this patch: Low

Why is the change risky/not risky? (and alternatives if risky): Low risk because it's a relatively simple CSS only change. The little risk we have is around vertical aligment of icons that may be slightly off for non-default font sizes.

Note: unless new serious issues are discovered, this is the last uplift request for 64 related to about:performance (all dependencies of bug 1478831 are now resolved).

String changes made/needed: none

Comment 7

[Julien Cristau [:jcristau] (back April 22)]

Comment on attachment 9025743 [details] [diff] [review]
Patch

about:performance css fix, approved for 64.0b12

Comment 8

[Florian Quèze [:florian]]

Attachment: Patch rebased on top of beta

Rebased patch to avoid the conflict caused by https://hg.mozilla.org/mozilla-central/rev/f790f10bca33#l2.1 that landed on central but wasn't needed on beta.

Comment 9

[Gyula Palko[:gpalko]]

Verified, that the issue is no longer reproducing on Nightly 65(20181122100048).

Comment 10

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/releases/mozilla-beta/rev/811d4b940b9b

Comment 11

[Gyula Palko[:gpalko]]

Tested on Beta 64b12(20181122182000) and I noticed, that even with High contrast turned off, the 'arrow' button for displaying sub-frames is invisible, but clickable(It's displayed correctly in Nightly and Beta 64b11). Could be a regression caused by the patch rebased on Beta?

Comment 12

[Florian Quèze [:florian]]

(In reply to Gyula Palko from comment #11)
> Tested on Beta 64b12(20181122182000) and I noticed, that even with High
> contrast turned off, the 'arrow' button for displaying sub-frames is
> invisible, but clickable(It's displayed correctly in Nightly and Beta
> 64b11). Could be a regression caused by the patch rebased on Beta?

Yes, my beta rebase is broken. I included part of the patch from bug 1507114, but the new CSS from it depends on the twisty image being in a span node rather than an img node (I don't know why). Just applying this change on beta fixes it: https://hg.mozilla.org/mozilla-central/rev/f790f10bca33#l1.37

Comment 13

[Gyula Palko[:gpalko]]

Verified, that the issue is no longer reproducible on Beta 64b13(20181126173133).