1997406 - Implement new status card designs

Status: VERIFIED FIXED

(Firefox :: IP Protection, task, P1)

Description

[kpatenio]

A follow up to Bug 1997404 where we implement the new status card designs for Beta. https://www.figma.com/design/l75lLbgf95PuVqNafzdvel/VPN---Firefox-Integration--Pilot?node-id=12625-59833&p=f&m=dev

Implementation
Our Alpha variant status card uses a moz-box-group of moz-box-item components: https://searchfox.org/firefox-main/rev/75f89f7dee3f30c371af717da54ba8bbf046e5fd/browser/components/ipprotection/content/ipprotection-content.mjs#250,252. However, the new design has some sort of "nesting", where our website settings button is inside the box.

We'll need to explore this a bit further to see if it works, but perhaps we can still use this moz-box combo? Here's what I'm thinking:

• The header, location, time and toggle can stay as a moz-box-item. This time there is no icon. This item is the first one in our moz-box-group.

We also want to consider:

• The variant type and switching between the Alpha and post-Alpha version of the card. TBD how we read the variant.
• It might be easier to have two separate card components so that we can don't have to worry about overlapping / conflicting styles.

Testing

• Alpha and Beta variant types show different status cards
• Status card has all information we need passed in, like location, vpn state and duration
• We can actually toggle on or off the VPN with our new card
• All existing tests pass

Comment 1

[kpatenio]

Attachment: Bug 1997406 — implement new status card designs for the ip protection panel

Comment 2

[kpatenio]

We're okay porting the new designs to Alpha now. No longer specific to Beta or other non-Alpha variants.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/861a4f1e9468
https://hg.mozilla.org/integration/autoland/rev/e3b592307dfe
— implement new status card designs for the ip protection panel r=fluent-reviewers,ip-protection-reviewers,bolsson,rking

Comment 4

[Cristina Horotan [:chorotan]]

Backed out for causing bc failure on browser_all_files_referenced.js

Backout link: https://hg-edge.mozilla.org/integration/autoland/rev/fe1c1bdaa63d93768a83a0c80e16ed010735f1c0
Log link: https://treeherder.mozilla.org/logviewer?job_id=535801470&repo=autoland&task=Lf1jA2qTT9qH_JAYVa5qhA.0&lineNumber=2084

Comment 5

[Sandor Molnar[:smolnar]]

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

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/af31d5856c0d
https://hg.mozilla.org/integration/autoland/rev/bfd80fddba63
— implement new status card designs for the ip protection panel r=fluent-reviewers,ip-protection-reviewers,bolsson,rking

Comment 7

[Sandor Molnar[:smolnar]]

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

Comment 8

[kpatenio]

Hi QA team, could you please verify that the VPN panel in Alpha continues to function with the new designs? For context, the simplified UI was intended for Beta, but we've decided to port it over to the Alpha experience as well. I just requested uplift to 146.

No new controls should be shown for Alpha. Only the core panel controls like the VPN toggle, time duration, and server location name.

Comment 9

[kpatenio]

Attachment: Bug 1997406 — implement new status card designs for the ip protection panel

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

Comment 10

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined: If D273116 is declined, Firefox VPN Alpha experiment users won't see new VPN panel designs.
• Code covered by automated testing: yes
• Fix verified in Nightly: no
• Needs manual QE test: yes
• Steps to reproduce for manual QE testing: Enrol into Firefox VPN Alpha experiment. Log in to Mozilla account. Click Firefox VPN widget to see panel. Ensure panel appears with new designs, and that it functions without issues.
• Risk associated with taking this patch: low
• Explanation of risk level: Firefox VPN panel is only accessible via an experiment (Firefox VPN Alpha) with a small population at this time.
• String changes made/needed: Yes, but all strings are in preview.
• Is Android affected?: no

Comment 11

[Valentina Virlics [:vvalentina], VPN QA]

Attachment: mainpanel.png

(In reply to kpatenio from comment #8)

Hi QA team, could you please verify that the VPN panel in Alpha continues to function with the new designs? For context, the simplified UI was intended for Beta, but we've decided to port it over to the Alpha experience as well. I just requested uplift to 146.

No new controls should be shown for Alpha. Only the core panel controls like the VPN toggle, time duration, and server location name.

Verified this on Firefox Nightly 147.0a1 (18-11-2025) while on Windows 10.
The main panel is changed and contains the core controls: title, location, timer and toggle on a green background, like visible in the Figma files.
No other features are available.

Should we also expect to have the same size for the elements like in figma?

Comment 12

[kpatenio]

(In reply to Valentina Virlics [:vvalentina], Ecosystem QA from comment #11)

Created attachment 9527697 [details]
mainpanel.png

(In reply to kpatenio from comment #8)

Hi QA team, could you please verify that the VPN panel in Alpha continues to function with the new designs? For context, the simplified UI was intended for Beta, but we've decided to port it over to the Alpha experience as well. I just requested uplift to 146.

No new controls should be shown for Alpha. Only the core panel controls like the VPN toggle, time duration, and server location name.

Verified this on Firefox Nightly 147.0a1 (18-11-2025) while on Windows 10.
The main panel is changed and contains the core controls: title, location, timer and toggle on a green background, like visible in the Figma files.
No other features are available.

Should we also expect to have the same size for the elements like in figma?

Thanks Valentina! Regarding the sizes, the UI doesn't perfectly align with the Figma spec due to current technical constraints. We plan to add more polish in later releases and are fine with shipping the current implementation for 146/147.

Comment 13

[Valentina Virlics [:vvalentina], VPN QA]

Based on above reply, we can mark this as verified-fixed.

Comment 14

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/f378e523339a
https://hg.mozilla.org/releases/mozilla-beta/rev/b7c530368e84

Comment 15

[Valentina Virlics [:vvalentina], VPN QA]

Verified this on Firefox Beta 146.0b7 while on Windows 10.
The main panel is changed and contains the core controls: title, location, timer and toggle on a green background, like visible in the Figma files.
No other features are available.