Update bedrock to Protocol V22 #16586

stephaniehobson · 2025-09-19T22:32:22Z

One-line summary

Update bedrock to Protocol V22

Significant changes and points to review

V22 changelog

new colours
new icons
new breadcrumb component
new rich text component
unless they were throwing errors I left the Firefox pages alone

Issue / Bugzilla link

mozilla/protocol#1074
#13462

Testing

Color token changes:

http://localhost:8000/en-US/products/vpn/ (green gaurentee writing)
http://localhost:8000/en-US/products/vpn/resource-center/what-is-an-ip-address/ (up/down helpful buttons)
http://localhost:8000/en-US/contribute/ (underneath the images in the 4 cards across) (border around the "problems with this webpage" call out)
http://localhost:8000/en-US/foundation/reimagine-open/

Breadcrumbs/subnav:

caret -> arrow icon updates (mostly modal navigation):

rich text & icon updates

http://localhost:8000/en-US/about/leadership/

Integration test run

codecov · 2025-10-31T21:19:03Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.70%. Comparing base (a59a279) to head (672a697).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #16586   +/-   ##
=======================================
  Coverage   79.70%   79.70%           
=======================================
  Files         159      159           
  Lines        8534     8534           
=======================================
  Hits         6802     6802           
  Misses       1732     1732

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

maureenlholland

code review is r+wc, going to do browser review tomorrow morning

the non-blocking requested change is to use @use instead of @import

media/css/m24/vars/_color.scss

media/css/m24/flag.scss

media/css/foundation/reimagine-open.scss

media/css/cms/rich-text.scss

bedrock/mozorg/views.py

janbrasna

Thanks for the play/pause icons, the skip pixel of yesteryear was obnoxious;]

There's also two icons on products.landing that are outdated now:

bedrock/bedrock/products/templates/products/landing.html

Lines 38 to 39 in a59a279

    
           {% set icon_external = '<span class="mzp-c-button-icon-end"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="M13 4h7v7M12 12l8-8M8 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-1"/></g></svg></span>' %} 
        
           {% set icon_download ='<span class="mzp-c-button-icon-end"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M8 13c.2 0 .4-.1.5-.2l4.4-4.4-1.1-1.1-3.1 3.1V1H7.2v9.4L4.1 7.3l-1 1.1 4.4 4.4c.1.1.3.2.5.2z" /><path d="M13.5 12v2c0 .3-.2.5-.5.5H3c-.3 0-.5-.2-.5-.5v-2H1v2c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-2h-1.5z" /></svg></span>' %}

Some random notes:

janbrasna · 2025-11-01T12:43:23Z

bedrock/mozorg/templates/mozorg/about/policy/transparency/2024.html

-        <title>Download</title>
-        <path fill="currentColor" d="M19.5 17.31v2.13H4.72v-2.13h-2.6v4.73H22.1v-4.73h-2.6z"/>
-        <path fill="currentColor" d="M21.44 7.09h-8.03V2.06h-2.6v5.03H2.78l9.33 11.09 9.33-11.09Zm-5.59 2.59-3.74 4.46-3.74-4.46h7.48Z"/>
-      </svg></span></a>
+      <a download class="mzp-c-button" href="https://assets.mozilla.net/pdf/transparency-report/2024-dsa.pdf">2024 DSA Transparency Report <span class="mzp-c-button-icon-end"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><clipPath id="a"><path d="M0 0h16v16H0z"/></clipPath><g fill="currentColor" clip-path="url(#a)"><path d="M7.25 0v10.21L3.53 6.49 2.47 7.55 8 13.08l5.53-5.53-1.06-1.06-3.72 3.72V0zM16 14.5H0V16h16z"/></g></svg></a>


Seems the title here inside the SVG got removed?

BTW, the download attribute does something?

✅

download means something. I'm not sure it does something.

janbrasna · 2025-11-01T12:45:03Z

bedrock/mozorg/views.py

-        if ftl_file_is_active("mozorg/home-m24") and experience != "legacy":
+        if ftl_file_is_active("mozorg/home-m24") and experience not in ["quantum", "trailhead"]:
            return [self.m24_template_name]
-        elif ftl_file_is_active("mozorg/home-new") and experience != "legacy":
+        elif ftl_file_is_active("mozorg/home-new") and experience != "quantum":


Okay this makes sense (I wish there was also a way to trigger the nav/footer from that time) — but wondering if that needs a comment, or a documentation somewhere?

(I remember learning about the xv=legacy at some point, seemingly within ftl file comments; but can't find that any longer. Wondering where was the learning curve for this.)

NB: the experience value for mozorg/home is something different than the firefox/download already documented in mkdocs.

I updated the home-new.ftl and home.ftl files to use the xv links explicitly.

The real fix here is to retire the old ones. It's been long enough but that's for another issue.

janbrasna · 2025-11-01T12:51:50Z

media/css/privacy/cookie-settings-form.scss

-    &.is-hidden {
-        display: none;
-    }
-


IIUC this is extra, when history state is empty?

janbrasna · 2025-11-01T12:54:41Z

media/css/products/monitor/article.scss

-    &.is-hidden {
-        display: none;
-    }


(Hmm here too, for some reason, was that for long vs. short title?)

OK can't find this any longer — it would have to come from CMS somehow.

Maybe it was copied wholesale from the cookie settings page and was only relevant there?

maureenlholland

1 blocking issue for ads page contact button hover styling

re-upping some of Jan's comments (I'm on the fence about considering these blocking, could be fast follow PR)

restore transparency report SVG download title or mark SVG as hidden
restore cookie settings is-hidden styling related to this JS: https://github.com/mozilla/bedrock/pull/14559/files#diff-efa591629125b1152bfa52e6480828acebd32e5e4e73a86d98839a33893446c0R112

Nice we've got the button link focus contrast back 🎉

maureenlholland · 2025-11-04T13:35:46Z

package.json

    "@babel/core": "^7.28.4",
    "@babel/preset-env": "^7.28.3",
-    "@mozilla-protocol/core": "^20.0.0",
+    "@mozilla-protocol/core": "^22.0.0",


blocking: the hover/active styling on ads page button is unhappy on this PR (working on www-dev and prod). See "Contact Sales" link above footer

There's a lot of specificity fighting on the ads pages: Protocol + M24 base + Ads styling

I tested removing link overrides from M24: https://github.com/mozilla/bedrock/blob/main/media/css/m24/base.scss#L33
But this creates other specificity problems (i.e. homepage "Learn" link goes dark green on hover)

I want to prioritize getting access to Protocol v22. So the requested change is to fix ads button only and we can create a follow up task to untangle the Protocol/M24 overrides later.

Review feedback addressed!

stephaniehobson added the WMO and FXC Code relevant to both mozilla/bedrock (www.mozilla.org) and mozmeao/springfield (www.firefox.com) label Sep 19, 2025

stephaniehobson force-pushed the v22 branch 2 times, most recently from d6cfc20 to fc3a9f5 Compare October 31, 2025 21:11

Stephanie Hobson added 2 commits October 31, 2025 14:14

Update Protocol to V22

a3605b3

Update colour variable names, use more variables were possible

fffd495

Update icon names and display sizes

5b2b176

stephaniehobson force-pushed the v22 branch from fc3a9f5 to 326d4ac Compare October 31, 2025 21:27

Stephanie Hobson added 4 commits October 31, 2025 14:27

Reduce link specificity

6198a01

Add experience variables to view old home pages

1268f62

Use new rich text component

8fb7e0b

Update to breadcrumb component

0a58412

stephaniehobson force-pushed the v22 branch from 326d4ac to 0a58412 Compare October 31, 2025 21:30

stephaniehobson marked this pull request as ready for review October 31, 2025 21:33

stephaniehobson requested review from a team as code owners October 31, 2025 21:33

Remove unused m24 icons

155dbbb

stephaniehobson added Needs Review Awaiting code review Frontend HTML, CSS, JS... client side stuff labels Oct 31, 2025

Update play and pause icons on homepage animation

66994a4

stephaniehobson changed the title ~~[WIP] Update bedrock to Protocol V22~~ Update bedrock to Protocol V22 Oct 31, 2025

maureenlholland self-assigned this Nov 3, 2025

maureenlholland mentioned this pull request Nov 3, 2025

update to use new icons for ads pages (fix #16747) #16847

Open

maureenlholland reviewed Nov 3, 2025

View reviewed changes

review fix

bb9d627

janbrasna reviewed Nov 3, 2025

View reviewed changes

maureenlholland previously requested changes Nov 4, 2025

View reviewed changes

maureenlholland reviewed Nov 4, 2025

View reviewed changes

stephaniehobson force-pushed the v22 branch from 21086da to e4e9221 Compare November 5, 2025 20:52

review fixes

672a697

stephaniehobson force-pushed the v22 branch from e4e9221 to 672a697 Compare November 5, 2025 20:58

stephaniehobson merged commit 3bb8a11 into main Nov 5, 2025
5 checks passed

stephaniehobson deleted the v22 branch November 5, 2025 22:20

Update bedrock to Protocol V22 #16586

Update bedrock to Protocol V22 #16586

Uh oh!

Conversation

stephaniehobson commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

One-line summary

Significant changes and points to review

Issue / Bugzilla link

Testing

Uh oh!

codecov bot commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

maureenlholland left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

janbrasna left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maureenlholland left a comment

Choose a reason for hiding this comment

Uh oh!

maureenlholland Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

stephaniehobson commented Sep 19, 2025 •

edited

Loading

codecov bot commented Oct 31, 2025 •

edited

Loading

maureenlholland Nov 4, 2025 •

edited

Loading