1993322 - Add "Where to use VPN" controls to IP Protection settings section

Status: RESOLVED FIXED

(Firefox :: IP Protection, task)

Description

[kpatenio]

Attachment: image.png

Figma: https://www.figma.com/design/l75lLbgf95PuVqNafzdvel/VPN---Firefox-Integration--Pilot?node-id=14147-264404&m=dev

We want a subsection in the IP Protection section to choose between "all" and "select" mode. Enabling "all" will enable site exclusions, whereas "select" will enable site inclusions.

Radio buttons
The currently selected radio button should be based on the pref browser.ipProtection.exceptionsMode, which is either "all" or "select". If somehow, the pref value is invalid, let's opt for "all" as the fallback since it is the default mode.

CTA button
We want a CTA button that eventually opens the inclusions or exclusions modal, depending on the currently selected mode. For this bug, we can simply add the button. Behaviour for actually showing the modal will be done in a follow up.

ipprotection-settings.mjs
We may want to consider delegating a custom lit component that renders all our controls (except for the header). If we end up implementing an ipprotection-settings component in Bug 1993052, then we will want to add the buttons to this component. I'm envisioning the component to have a responsive property that tracks the current protection mode (eg. this._protectionMode) and later support an @click callback for the CTA button to open a modal.

Comment 1

[kpatenio]

Attachment: Bug 1993322 — add basic site exceptions controls to IP Protection settings section. r=#ip-protection-reviewers!

Comment 2

[kpatenio]

Actually, let's try implementing the "newer" layout based on the settings redesign work: https://www.figma.com/design/l75lLbgf95PuVqNafzdvel/VPN---Firefox-Integration--Pilot?node-id=12704-119907&p=f&m=dev.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/86937429cf28
https://hg.mozilla.org/integration/autoland/rev/b80a033f8491
— add basic site exceptions controls to IP Protection settings section. r=ip-protection-reviewers,fluent-reviewers,mstriemer,bolsson,desktop-theme-reviewers,fchasen

Comment 4

[amarc]

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