Closed Bug 1597322 Opened 5 months ago Closed 3 months ago

[macOS] Color tone inconsistency on links in about:protections page when system dark theme is set

Categories

(Firefox :: Protections UI, defect, P3, minor)

All
macOS
defect

Tracking

()

VERIFIED FIXED
Firefox 74
Tracking Status
firefox70 --- wontfix
firefox71 --- wontfix
firefox72 --- wontfix
firefox73 --- wontfix
firefox74 --- verified

People

(Reporter: Anca, Assigned: brent)

Details

(Keywords: good-first-bug)

Attachments

(2 files)

Attached image screenshot issue.png

[Affected versions]:

  • 70.0.1
  • 71.0b10
  • 72.0a1 (2019-11-18)

[Affected platforms]:

  • macOS 10.14
  • macOS 10.15

[Steps to reproduce]:

Preconditions:

  • From System Preferences => General => Appearance set OS system to Dark
  1. Sign in to FxA using a compromised acccount (eg. login-manager-monitor@mailinator.com password: loginmanagermonitor)
  2. Sign in to https://monitor.firefox.com/ with the same account
  3. Access "about:protections" in a new tab
  4. Observe "How it works" and "Manage devices" links

[Expected result]:

  • Both links use the same blue color tone

[Actual result]:

  • Links have different blue color tone

[Regression range]:

  • Not a regression, reproducible with Fx 70 cycle.

[Additional notes]:

  • If step 2 is not executed this issue is not reproducible

I believe the dark theme is behaving as expected, and the light theme is not. After a link has been visited it will change color to indicate it's visited state.

This may be a bit of a design issue.
The links are --in-content-link-color, and after visited they are --in-content-link-color-visited
on light theme both of these are blue-60,
on dark theme:
--in-content-link-color-visited = blue-60
--in-content-link-color = blue-40

Since we are using variables that are across all of product in this case, this should affect other pages as well. I'll look into this and ni: epang to double check what our design system defines the correct colors to be.

edit: Confirmed, visiting about:rights and clicking the "Mozilla Public License" link has the same effect in dark theme vs light theme.

Flags: needinfo?(epang)

Just checked what we do on New Tab. The link and visited link colours are the same.

Can we check what colours are being used for the linked colour and the pressed state in dark mode?
Should be Blue 40 for link/visited and Blue 50 for link pressed.

Flags: needinfo?(epang)
Priority: -- → P3

Spoke with Stephen about this. Never change the colour of the link visited or not. Thanks!

Thank you, so: --in-content-link-color-visited should be blue-40 on dark theme.
By the way, this is the OS dark theme for mac (since we had some confusion about that earlier in-person).

I'm looking for a good first bug and am pretty confident I can take a stab at this one, if it's still open and unassigned?

(In reply to Brent Schroeter from comment #5)

I'm looking for a good first bug and am pretty confident I can take a stab at this one, if it's still open and unassigned?

Hi Brent, yes, it is open and unassigned, feel free to work on it and send me any questions you have.

Thanks! Should I tag you as reviewer when I submit to Phabricator?

(In reply to Brent Schroeter from comment #7)

Thanks! Should I tag you as reviewer when I submit to Phabricator?

Yep, I'm happy to review it.

The light theme sets both visited and non-visited links to the same color
(--blue-60) by default, while the dark theme sets non-visited links to
--blue-40 but did not specify a color for visited links, displaying them as
--blue-60. This resulted in inconsistent styling of pages written in XHTML
versus HTML, e.g. about:protections versus about:newtab. epang confirmed
that the desired behavior is to display links as --blue-40, visited or not.

Assignee: nobody → brent
Status: NEW → ASSIGNED
Pushed by ntim.bugs@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/3bc0d683a41c
Correctly set a:visited color in dark-mode. r=ewright
Status: ASSIGNED → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 74

Since the status are different for nightly and release, what's the status for beta?
For more information, please visit auto_nag documentation.

Flags: qe-verify+

The issue is verified fixed with Fx 74.0b2 and Fx 75.0a1(2020-02-12) on macOS 10.14 and macOS 10.15.

Status: RESOLVED → VERIFIED
Flags: qe-verify+

Does the "never change the color of the link visited or not" rule mentioned in Comment 3 applies also to the High Contrast mode on Windows?

Flags: needinfo?(epang)

(In reply to Simona Badau from comment #14)

Does the "never change the color of the link visited or not" rule mentioned in Comment 3 applies also to the High Contrast mode on Windows?

No, not for High Contrast mode on Windows. Thanks for the clarifying questions!

Flags: needinfo?(epang)
You need to log in before you can comment on or make changes to this bug.