Update bedrock to Protocol V22 (mozilla#16586)

* Update colour variable names, use more variables were possible

* Update icon names and display sizes

* Reduce link specificity

* Add experience variables to view old home pages

* Use new rich text component

* Update to breadcrumb component

* Remove unused m24 icons

* Update play and pause icons on homepage animation

Author: stephaniehobson

bedrock/base/templates/404.html

@@ -38,7 +38,7 @@ <h1 class="error-title">{{ ftl('not-found-page-sorry-we-cant-find-that-page') }}
         </span>
       </li>
       <li>
-        <img class="list-icon" alt="" src="{{ static('protocol/img/icons/default-browser.svg') }}" width="30" height="30">
+        <img class="list-icon" alt="" src="{{ static('protocol/img/icons/heart.svg') }}" width="30" height="30">
         <span>
           {{ ftl('not-found-page-donate-to-mozilla-reclaim-from-v2', fallback='not-found-page-donate-to-mozilla-reclaim-from', donate='href="%s"'|safe|format(donate_url(location='donate-404'))) }}
         </span>

bedrock/base/templates/includes/protocol/footer/footer-refresh.html

@@ -22,9 +22,7 @@ <h2>
             <a class="moz24-footer-advertising-link" href="{{ url('mozorg.advertising.landing') }}" data-link-position="footer" data-link-text="Learn more">
               <span class="mzp-c-button-icon-text">{{ ftl('footer-refresh-learn-more-about-mozilla-ads', fallback='footer-refresh-learn-more-about-mozilla-advertising') }}</span>
               <span class="mzp-c-button-icon-end">
-                <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24" height="24" viewBox="0 0 23.4 24">
-                  <path fill="#fff" d="M23.4 12 9.1 0v10.5H0v3h9.1V24l14.3-12zm-11.3-1.5v-4l6.6 5.5-6.6 5.5v-7z"/>
-                </svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="m7.24 1.36 5.89 5.89H0v1.5h13.13l-5.89 5.89L8.3 15.7 16 8 8.3.3z"/></svg>
               </span>
             </a>
           </div>
@@ -97,9 +95,7 @@ <h2 class="moz24-footer-heading-social">{{ ftl('footer-refresh-follow-firefox')
     <div class="moz24-footer-actions">
       <a class="moz24-footer-donate" href="{{ donate_url(location='moco-donate-footer') }}" data-link-text="Donate">
         <span class="mzp-c-button-icon-start">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-            <path fill="currentColor" d="M16.34 2.93c-1.26 0-2.34.46-3.2 1.03-.11.09-.57.43-.84.82h-.71c-.28-.4-.75-.75-.85-.81s-.02-.01-.03-.02h-.01c-.85-.56-1.92-1-3.16-1-3.09 0-5.6 2.57-5.6 5.73 0 1.6.52 3.26 1.55 4.94.79 1.28 1.87 2.57 3.22 3.85 2.27 2.14 4.51 3.49 4.61 3.55l.29.17h.66l.29-.17c.09-.06 2.34-1.41 4.61-3.55 1.35-1.28 2.44-2.57 3.22-3.85 1.03-1.68 1.55-3.34 1.55-4.94 0-3.16-2.51-5.73-5.6-5.73Zm-.8 12.74c-1.4 1.33-2.82 2.34-3.61 2.87-.78-.53-2.21-1.54-3.61-2.87-1.82-1.72-3.99-4.34-3.99-7.02 0-1.83 1.44-3.33 3.2-3.33.78 0 1.58.33 2.36.99.37.31.66.63.83.85s0 .01 0 .01v2.39h2.4V7.15c.18-.22.46-.53.83-.84.78-.66 1.58-.99 2.36-.99 1.76 0 3.2 1.49 3.2 3.33 0 2.68-2.17 5.29-3.99 7.02Z"/>
-          </svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill="currentColor" d="M14.8 8.25c.77-.77 1.2-1.8 1.2-2.9a4.094 4.094 0 0 0-4.1-4.1c-1.1 0-2.12.43-2.9 1.2L7.99 3.46 6.98 2.45c-.77-.77-1.8-1.2-2.9-1.2a4.094 4.094 0 0 0-4.1 4.1c0 1.1.43 2.12 1.2 2.9l6.8 6.8 6.8-6.8zM1.5 5.35c0-.7.27-1.35.76-1.83.49-.49 1.14-.76 1.84-.76s1.34.27 1.84.76l2.07 2.07 2.07-2.07c.98-.98 2.69-.98 3.67 0a2.595 2.595 0 0 1 0 3.67l-5.74 5.74-5.75-5.74c-.49-.49-.76-1.14-.76-1.84"/></g><defs><clipPath id="a"><path d="M0 0h16v16H0z"/></clipPath></defs></svg>
         </span>
         <span class="mzp-c-button-icon-text">{{ ftl('footer-refresh-donate') }}</span>
       </a>

bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html

@@ -62,9 +62,7 @@ <h2 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-thunderbird') }}</h
         <p class="m24-c-menu-category-link">
           <a href="{{ url('products.landing') }}" data-link-text="Go to all browsers and products" data-link-position="topnav - products">
             {{ ftl('navigation-refresh-all-products') }}
-            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24" height="24" viewBox="0 0 23.4 24" fill="currentColor">
-              <path d="M23.4 12 9.1 0v10.5H0v3h9.1V24l14.3-12zm-11.3-1.5v-4l6.6 5.5-6.6 5.5v-7z"/>
-            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="m7.24 1.36 5.89 5.89H0v1.5h13.13l-5.89 5.89L8.3 15.7 16 8 8.3.3z"/></svg>
           </a>
         </p>
       </div>

bedrock/careers/templates/careers/404.html

@@ -41,7 +41,7 @@ <h1 class="error-title">Sorry, we can’t find that job posting</h1>
         </span>
       </li>
       <li>
-        <img class="list-icon" alt="" src="{{ static('protocol/img/icons/default-browser.svg') }}" width="30" height="30">
+        <img class="list-icon" alt="" src="{{ static('protocol/img/icons/heart.svg') }}" width="30" height="30">
         <span>
           <a href="{{ donate_url(location='donate-404') }}">Donate</a> to Mozilla Foundation and reclaim the internet from big tech.
         </span>

bedrock/cms/templates/cms/simple_rich_text_page.html

@@ -17,7 +17,7 @@ <h1 class="mzp-c-article-title" itemprop="name">
     </h1>
   </header>
 
-  <div itemprop="articleBody" class="mzp-c-article w-rich-text">
+  <div itemprop="articleBody" class="mzp-c-article mzp-u-rich-text">
     {{page.content|richtext}}
   </div>
 </div>

bedrock/firefox/templates/firefox/all/download.html

@@ -12,7 +12,7 @@
 <h2 {% if not (product and platform and locale) %} class="c-step-name t-step-disabled" aria-disabled="true" {% else %} class="c-step-name" aria-disabled="false" {% endif %}>
   {{ ftl('firefox-all-download') }}
   {% if product and platform and locale %}
-    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">
+    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/caret-down.svg') }}" width="30" height="30">
   {% else %}
     <img alt="{{ current_step }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-left.svg') }}" width="30" height="30">
   {% endif %}

bedrock/firefox/templates/firefox/all/lang.html

@@ -13,15 +13,15 @@ <h2 {% if not (product and platform) %} class="c-step-name t-step-disabled" aria
       <a href="{{ url('firefox.all.locales', product_slug=product.slug, platform=platform) }}" class="c-step-icon"><img alt="{{ ftl('firefox-all-change-language') }}" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
     {% endif %}
   {% elif product and platform %}
-    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">
+    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/caret-down.svg') }}" width="30" height="30">
   {% else %}
     <img alt="{{ current_step }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-left.svg') }}" width="30" height="30">
   {% endif %}
 </h2>
 
 {% if product and platform and not locale %}
 <div class="c-step-contents">
-  <h3 class="c-step-prompt">{{ ftl('firefox-all-select-your-preferred-language') }}<img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30"></h3>
+  <h3 class="c-step-prompt">{{ ftl('firefox-all-select-your-preferred-language') }}<img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/caret-down.svg') }}" width="30" height="30"></h3>
   <ul class="c-lang-list">
     {% for locale, name in locales %}
       <li><a href="{{ url('firefox.all.download', product_slug=product.slug, platform=platform, locale=locale) }}">{{ name }}</a></li>

bedrock/firefox/templates/firefox/all/platform.html

@@ -15,7 +15,7 @@ <h2 {% if not product %} class="c-step-name t-step-disabled" aria-disabled="true
       <a href="{{ url('firefox.all.platforms', product_slug=product.slug) }}" class="c-step-icon"><img alt="{{ ftl('firefox-all-change-platform') }}" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
     {% endif %}
   {% elif product %}
-    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">
+    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/caret-down.svg') }}" width="30" height="30">
   {% else %}
     <img alt="{{ current_step }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-left.svg') }}" width="30" height="30">
   {% endif %}

bedrock/firefox/templates/firefox/all/product.html

@@ -11,7 +11,7 @@ <h2 class="c-step-name">
   {% if product %}
     <span class="c-step-choice">{{ product and product.name }}</span> <a href="{{ url('firefox.all') }}" class="c-step-icon"><img alt="{{ ftl('firefox-all-change-browser') }}" src="{{ static('protocol/img/icons/close.svg') }}" width="30" height="30"></a>
   {% else %}
-    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/arrow-down.svg') }}" width="30" height="30">
+    <img alt="{{ ftl('firefox-all-down-arrow') }}" class="c-step-icon" src="{{ static('protocol/img/icons/caret-down.svg') }}" width="30" height="30">
   {% endif %}
 
   {% if not product %}

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

@@ -14,7 +14,7 @@ <h1>2024 Transparency Reports</h1>
 
 {% block report_body %}
 <div class="c-2024-back-link">
-  <img src="{{ static('img/icons/m24-small/left-arrow.svg') }}" alt="">
+  <img src="{{ static('protocol/img/icons/arrow-left.svg') }}" alt="Back" height="20" width="20">
   <a href="{{ url('mozorg.about.policy.transparency.index') }}">Mozilla Transparency</a>
 </div>
 <section>
@@ -24,11 +24,7 @@ <h1>2024 Transparency Reports</h1>
   <p>On February 28, 2025, we published our <a download href="https://assets.mozilla.net/pdf/transparency-report/2024-dsa.pdf">2024 DSA Transparency Report</a>. Because that report was required to follow a specific reporting format, some of the data in that report — such as the number and type of requests we received from law enforcement agencies — is limited to the EU.  The EU requests included in that report are also counted in the global government demand totals listed below.  Other data in the DSA report — such as the number of copyright-related takedown notices we received and actioned — is not tracked country-by-country.  The DSA report therefore contains the same numbers as are indicated here, in our global report.</p>
   <ul class="c-2024-reports">
     <li>
-      <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="24" height="24" viewBox="0 0 24 24">
-        <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"><title>Download</title><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>
     </li>
     <li>
       <a class="mzp-c-button mzp-t-secondary" href="{{ url('mozorg.about.policy.transparency.jan-jun-2024') }}">January 1, 2024 to June 30, 2024</a>