2009535 - Add a "connected" + "excluded" state when the VPN is on, but the current site is excluded

Status: NEW

(Firefox :: IP Protection, task, P2)

Description

[kpatenio]

Figma spec: https://www.figma.com/design/R32vqpWWU9ffSCYrWD8tpw/VPN---Firefox-Integration-Q1-2026?node-id=17748-8894&m=dev

This bug is to add a new state UI for when we are connected to the VPN, but the current site we're on is saved as an exclusion. Currently, we do not make any distinction in the "connected" state whether a site is excluded or not.

We'll want to use ipprotection-status-box from Bug 2008854. It should ideally be a matter of slotting the elements we need into that component to get the desired UI. How we implement it also depends on how we make the "connected" state in Bug 2009534.

Similar to Bug 2009534, we'll want these for our state:

• a "connected" type to use the correct background colour (green)
• a "location" slot to display the geographical location for the VPN connection
• an "action" slot to display the "Turn off VPN everywhere" button (note the different label string)
• headerL10nId and descriptionL10nId properties to render the header and description strings respectively; requires new strings
• an "icon" slot to display the hollow circle icon

Ensure that we have tests to check that we're rendering the right UI when the current site is excluded vs not excluded.

Comment 1

[kpatenio]

Attachment: connected_but_excluded_site.png