2031802 - Add location selection button to VPN panel

Status: VERIFIED FIXED

(Firefox :: IP Protection, task, P2)

Description

[Michael Hynson]

The VPN Panel has UI updates which include a full width button for allowing a user to change their location.

There are various states for the button, but only the default state should be considered for this bug.

• Default State - button text is "Recommended: Location" or "Recommended location" (confirm this text with Laura/Wolasi)
• New Default State - same as the Default State but conditionally displays the "NEW" badge
• Selected Location State - button text displays the selected location (this behavior should be handled in another bug)

Note: This more than likely could use a moz-button. Also take note of the arrow icon to the right.

More details are in the Figma - https://www.figma.com/design/dreQfreWFUrRMsjE2j4qwC/Built-in-VPN-Firefox-151?node-id=13569-26251&m=dev

Comment 1

[Michael Hynson]

Attachment: WIP: Bug 2031802 - Add location selection button to VPN panel. r=#ip-protection-reviewers

Comment 2

[Michael Hynson]

Attachment: WIP: Bug 2031802 - Add location selection button to VPN panel. r=#ip-protection-reviewers

Comment 3

[Michael Hynson]

Attachment: Bug 2031802 - Add location selection button to VPN panel. r=#ip-protection-reviewers,hjones

Comment 4

[Fred Chasen [:fchasen]]

Description:
Please provide an explanation of the feature or change. Include a description of the user scenario in which it would be used and how the user would complete the task(s).
Screenshots and visual UI specs are welcome, but please include sufficient accompanying explanation so that blind members of the accessibility team are able to understand the feature/change.

How do we test this?
If there is an implementation to test, please provide instructions for testing it; e.g. setting preferences, other preparation, how to trigger the UI, etc.

When will this ship?
Tracking bug/issue:
Design documents (e.g. Product Requirements Document, UI spec):
Engineering lead:
Product manager:

The accessibility team has developed the Mozilla Accessibility Release Guidelines which outline what is needed to make user interfaces accessible:
https://wiki.mozilla.org/Accessibility/Guidelines
Please describe the accessibility guidelines you considered and what steps you've taken to address them:

Describe any areas of concern to which you want the accessibility team to give special attention:

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/3ad783f9c9ce
https://hg.mozilla.org/integration/autoland/rev/05415966db52
Add location selection button to VPN panel. r=hjones,ip-protection-reviewers,desktop-theme-reviewers,rking

Comment 6

[amarc]

https://hg.mozilla.org/mozilla-central/rev/05415966db52

Comment 7

[Raluca Ilban [:rilban], Premium Services - VPN]

Attachment: locations.png

Verified this as fixed using Firefox Nightly 152.0a1 (2026-04-27) on Windows 11. The "Location: Recommended" button is displayed in the VPN main panel.

Comment 8

[Michael Hynson]

Attachment: Bug 2031802 - Add location selection button to VPN panel.

Original Revision: https://phabricator.services.mozilla.com/D294797

Comment 9

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/cc63232fc877
https://hg.mozilla.org/releases/mozilla-beta/rev/96e512ccca44

Comment 10

[Raluca Ilban [:rilban], Premium Services - VPN]

Attachment: panel.png

Verified this as fixed using Firefox Beta 151.0b4 on Windows 11. The "Location: Recommended" button is displayed in the VPN main panel.