Adjust preferences for contrast theme or forced colors

Merge Info

Issues

Resolves

• #43130 (closed)

Related

Merging

Target Branches

• tor-browser - !fixups to tor-browser-specific commits, new features, security backports
• base-browser and mullvad-browser - !fixups to base-browser-specific commits, new features to be shared with mullvad-browser, and security backports
  • IMPORTANT: Please list the base-browser-specific commits which need to be cherry-picked to the base-browser and mullvad-browser branches here

Target Channels

• Alpha: esr128-14.5
• Stable: esr128-14.0
• Legacy: esr115-13.5

Backporting

Timeline

• No Backport (preferred): patchset for the next major stable
• Immediate: patchset needed as soon as possible (fixes CVEs, 0-days, etc)
• Next Minor Stable Release: patchset that needs to be verified in nightly before backport
• Eventually: patchset that needs to be verified in alpha before backport

(Optional) Justification

• Security update: patchset contains a security fix (be sure to select the correct item in Timeline)
• Censorship event: patchset enables censorship circumvention
• Critical bug-fix: patchset fixes a bug in core-functionality
• Consistency: patchset which would make development easier if it were in both the alpha and release branches; developer tools, build system changes, etc
• Sponsor required: patchset required for sponsor
• Localization: typos and other localization changes that should be also in the release branch
• Other: please explain

Upstream

• Patchset is a candidate for uplift to Firefox
• Patchset is a backport from Firefox
  • Bugzilla link:
  • Upstream commit:

Issue Tracking

• Link resolved issues with appropriate Release Prep issue for changelog generation

Review

Request Reviewer

• Request review from an applications developer depending on modified system:
  • NOTE: if the MR modifies multiple areas, please /cc all the relevant reviewers (since Gitlab only allows 1 reviewer)
  • accessibility : henry
  • android : clairehurst, dan
  • build system : boklm
  • extensions : ma1
  • firefox internals (XUL/JS/XPCOM) : jwilde, ma1
  • fonts : pierov
  • frontend (implementation) : henry
  • frontend (review) : donuts, morgan
  • localization : henry, pierov
  • macOS : clairehurst, dan
  • nightly builds : boklm
  • rebases/release-prep : dan, ma1, pierov, morgan
  • security : jwilde, ma1
  • signing : boklm, morgan
  • updater : pierov
  • windows : jwilde, morgan
  • misc/other : pierov, morgan

Change Description

Give the "Your bridges" and "request bridges" boxes an outline for forced-colors since the background color will not show.

Use --border-radius-* instead of fixed px values.

Do not use the accent color for text when in contrast theme or forced colors.

How Tested

Reviewed styling under high contrast system theme (linux), and with forced colors (via "General > Language and Appearance > Colors > Manage Colors" preference dialog).

requested review from @morgan

assigned to @henry

changed the description

marked this merge request as draft

@felicia can you please review the styling.

NOTE: Forced colors can be enabled via "General > Language and Appearance > Colors > Manage Colors". Otherwise it can be inherited from the Windows OS system theme.

NOTE: High contrast can be enabled via a system theme. On linux this is a high contrast theme. MacOS may have something similar, but I'm not sure Windows OS has anything.

NOTE: Mozilla is still in the process for developing a styling guide for high contrast themes without forced colors. Before version 128 they both shared the same CSS rules, but it was changed to only apply to forced colors for content pages. See bugzilla bug 1877780. As such, there isn't much guidance at the moment on what to do for this scenario.

Built-in bridges display

We add an extra border to be shown for the forced colors.

Base styling:

Forced colors:

High contrast theme:

Built-in bridge dialog

By default the "Current" label uses the accent color for the text color. This is normally meant to be used as a background color (think primary button) rather than a text color. So for high contrast and forced colors I kept the text color the same as the rest.

Base styling:

Forced colors:

High contrast theme:

Bridge list

Similar to above, we add a border for forced colors. And for both forced colors and high contrast we do not use purple for the "Connected" text.

Base styling:

Forced colors:

High contrast theme:

I can't review properly without Fx's variables for high contrast and forced colors in Figma (HC was still a WIP when we duplicated their libraries), but these versions in the screenshots look good. I wonder if there's any other color style we could use instead of accent for "Current bridge" and purple for "Connected", though. In the first case, I guess we could use the color for text links, but I don't know which one would work for "Connected".

In the first case, I guess we could use the color for text links, but I don't know which one would work for "Connected".

@felicia I did consider this, but I think link text should probably be reserved for interactive elements. Especially for forced colors.

I think we can wait for the HC guide from mozilla once they have complted it. But feel free to open an issue if you want to come back to this.

Yeah, you're right. I really wish "Connected" could be highlighted in some way, but we can keep it the way it is and wait for Mozilla's guide.

added 1 commit

• aed6314d - fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in...

Compare with previous version

marked this merge request as ready

added 3 commits

• 101b6cc2 - fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in...
• e970424b - fixup! Tor Browser strings
• 2844282c - fixup! Tor Browser localization migration scripts.

Compare with previous version

marked this merge request as draft from henry/tor-browser@101b6cc2

whoops. added the wrong commits to this branch. I'll fix it now.

marked this merge request as ready

resolved all threads

approved this merge request

merged