Reduce menu dropdowns (#14484)

* Update products menu * Update browsers menu * Move some items around * (Re)move icons * Prune obsolete brand fallbacks --------- Co-authored-by: Jan Brasna <janbrasna@users.noreply.github.com>
mozilla · Apr 30, 2024 · 9553c3d · 9553c3d
1 parent 8fa3b01
commit 9553c3d
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 71 deletions.
diff --git a/bedrock/base/templates/includes/protocol/navigation/menus/firefox.html b/bedrock/base/templates/includes/protocol/navigation/menus/firefox.html
@@ -12,7 +12,7 @@
     <div class="c-menu-panel-container">
       <button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-firefox">{{ ftl('navigation-v2-close-firefox-browsers-menu') }}</button>
       <div class="c-menu-panel-content">
-        <ul class="mzp-l-rows-four">
+        <ul class="mzp-l-rows-three">
           <li>
             <section class="c-menu-item mzp-has-icon">
               <a class="c-menu-item-link" href="{{ url('firefox.new') }}" data-link-text="Firefox Desktop Browser" data-link-type="nav" data-link-position="topnav" data-link-group="firefox">
@@ -61,15 +61,6 @@ <h4 class="c-menu-item-title">{{ ftl('navigation-v2-firefox-focus') }}</h4>
               </a>
             </section>
           </li>
-          <li>
-            <section class="c-menu-item mzp-has-icon">
-              <a class="c-menu-item-link" href="{{ url('firefox.privacy.index') }}" data-link-text="Privacy Promise" data-link-type="nav" data-link-position="topnav" data-link-group="firefox">
-                <img loading="lazy" src="{{ static('img/nav/icons/icon-privacy-promise.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
-                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-privacy-promise') }}</h4>
-                <p class="c-menu-item-desc">{{ ftl('navigation-v2-learn-how-firefox-treats', fallback='navigation-your-right-to-security') }}</p>
-              </a>
-            </section>
-          </li>
           <li>
             <section class="c-menu-item mzp-has-icon">
               <a class="c-menu-item-link" href="https://blog.mozilla.org/firefox/?{{ utm_params }}" data-link-text="Firefox Blog" data-link-type="nav" data-link-position="topnav" data-link-group="firefox">

diff --git a/bedrock/base/templates/includes/protocol/navigation/menus/innovation.html b/bedrock/base/templates/includes/protocol/navigation/menus/innovation.html
@@ -6,19 +6,13 @@
 
 {% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nav&utm_content=innovation' %}
 
-{% if ftl_has_messages('navigation-v2-mozilla-innovation-projects', 'navigation-v2-discover-ways-to-bring') %}
-  {% set row_count = 'mzp-l-rows-three' %}
-{% else %}
-  {% set row_count = 'mzp-l-rows-two' %}
-{% endif %}
-
 <li class="c-menu-category mzp-has-drop-down mzp-js-expandable">
   <a class="c-menu-title" href="https://future.mozilla.org/?{{ utm_params }}" aria-haspopup="true" aria-controls="c-menu-panel-innovation">{{ ftl('navigation-v2-innovation') }}</a>
   <div class="c-menu-panel" id="c-menu-panel-innovation">
     <div class="c-menu-panel-container">
       <button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-innovation">{{ ftl('navigation-v2-close-innovation-menu') }}</button>
       <div class="c-menu-panel-content">
-        <ul class="{{ row_count }}">
+        <ul class="mzp-l-rows-two">
           <li>
             <section class="c-menu-item mzp-has-icon">
               <a class="c-menu-item-link" href="{{ url('firefox.developer.index') }}" data-link-text="Firefox Developer Edition" data-link-type="nav" data-link-position="topnav" data-link-group="innovation">
@@ -39,24 +33,22 @@ <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mdn-web-docs') }}</h4>
           </li>
           <li>
             <section class="c-menu-item mzp-has-icon">
-              <a class="c-menu-item-link" href="https://commonvoice.mozilla.org/?{{ utm_params }}" data-link-text="Common Voice" data-link-type="nav" data-link-position="topnav" data-link-group="innovation">
-                <img loading="lazy" class="c-menu-item-icon" src="{{ static('img/nav/icons/icon-common-voice.svg') }}" alt="">
-                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-common-voice') }}</h4>
-                <p class="c-menu-item-desc">{{ ftl('navigation-v2-donate-your-voice-so-the-future', fallback='navigation-donate-your-voice-to') }}</p>
+              <a class="c-menu-item-link" href="https://future.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Innovation Projects" data-link-type="nav" data-link-position="topnav" data-link-group="innovation">
+                <img loading="lazy" class="c-menu-item-icon" src="{{ static('img/nav/icons/icon-innovation-projects.svg') }}" alt="">
+                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-innovation-projects') }}</h4>
+                <p class="c-menu-item-desc">{{ ftl('navigation-v2-discover-ways-to-bring') }}</p>
               </a>
             </section>
           </li>
-        {% if ftl_has_messages('navigation-v2-mozilla-innovation-projects', 'navigation-v2-discover-ways-to-bring') %}
           <li>
             <section class="c-menu-item mzp-has-icon">
-              <a class="c-menu-item-link" href="https://future.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Innovation Projects" data-link-type="nav" data-link-position="topnav" data-link-group="innovation">
-                <img loading="lazy" class="c-menu-item-icon" src="{{ static('img/nav/icons/icon-innovation-projects.svg') }}" alt="">
-                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-innovation-projects') }}</h4>
-                <p class="c-menu-item-desc">{{ ftl('navigation-v2-discover-ways-to-bring') }}</p>
+              <a class="c-menu-item-link" href="https://commonvoice.mozilla.org/?{{ utm_params }}" data-link-text="Common Voice" data-link-type="nav" data-link-position="topnav" data-link-group="innovation">
+                <img loading="lazy" class="c-menu-item-icon" src="{{ static('img/nav/icons/icon-common-voice.svg') }}" alt="">
+                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-common-voice') }}</h4>
+                <p class="c-menu-item-desc">{{ ftl('navigation-v2-donate-your-voice-so-the-future', fallback='navigation-donate-your-voice-to') }}</p>
               </a>
             </section>
           </li>
-        {% endif %}
         </ul>
       </div>
     </div><!-- close .c-menu-panel-container -->

diff --git a/bedrock/base/templates/includes/protocol/navigation/menus/products.html b/bedrock/base/templates/includes/protocol/navigation/menus/products.html
@@ -12,17 +12,12 @@
     <div class="c-menu-panel-container">
       <button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-products">{{ ftl('navigation-v2-close-products-menu') }}</button>
       <div class="c-menu-panel-content">
-        <ul class="mzp-l-rows-four">
+        <ul class="mzp-l-rows-three">
           <li>
             <section class="c-menu-item mzp-has-icon">
-              {% set mozilla_monitor = switch('mozilla-monitor-brand-name') %}
-              <a class="c-menu-item-link" href="https://monitor.mozilla.org/?{{ utm_params }}" data-link-text="{% if mozilla_monitor %}Mozilla Monitor{% else %}Firefox Monitor{% endif %}" data-link-type="nav" data-link-position="topnav" data-link-group="products">
+              <a class="c-menu-item-link" href="https://monitor.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Monitor" data-link-type="nav" data-link-position="topnav" data-link-group="products">
                 <img loading="lazy" src="{{ static('protocol/img/logos/firefox/monitor/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
-                {% if mozilla_monitor %}
-                  <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-monitor', fallback='navigation-v2-firefox-monitor') }}</h4>
-                {% else %}
-                  <h4 class="c-menu-item-title">{{ ftl('navigation-v2-firefox-monitor', fallback='navigation-firefox-monitor') }}</h4>
-                {% endif %}
+                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-monitor') }}</h4>
                 <p class="c-menu-item-desc">{{ ftl('navigation-v2-see-if-your-email-has', fallback='navigation-see-if-your-personal') }}</p>
               </a>
             </section>
@@ -50,23 +45,12 @@ <h4 class="c-menu-item-title">{{ ftl('navigation-v2-pocket') }}</h4>
           <li>
             <section class="c-menu-item mzp-has-icon">
               <a class="c-menu-item-link" href="{{ url('products.vpn.landing') }}" data-link-text="Mozilla VPN" data-link-type="nav" data-link-position="topnav" data-link-group="products">
-                <svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M26 10.4c-2.5 0-4.7 1.7-5.4 4h-9.3c-.1-.4-.3-.7-.4-1.1l2.4-2.4c.8.4 1.7.7 2.7.7 3.1 0 5.6-2.5 5.6-5.6S19.1.4 16 .4 10.4 2.9 10.4 6c0 1 .2 1.9.7 2.7l-2.4 2.4c-.8-.5-1.7-.7-2.7-.7C2.9 10.4.4 12.9.4 16s2.5 5.6 5.6 5.6c2.5 0 4.7-1.7 5.4-4h9.3c.1.4.3.7.4 1.1l-2.4 2.4c-.8-.4-1.7-.7-2.7-.7-3.1 0-5.6 2.5-5.6 5.6s2.5 5.6 5.6 5.6 5.6-2.5 5.6-5.6c0-1-.2-1.9-.7-2.7l2.4-2.4c.8.4 1.7.7 2.7.7 3.1 0 5.6-2.5 5.6-5.6s-2.5-5.6-5.6-5.6zM16 3.6c1.3 0 2.4 1.1 2.4 2.4S17.3 8.4 16 8.4 13.6 7.3 13.6 6s1.1-2.4 2.4-2.4zM6 18.4c-1.3 0-2.4-1.1-2.4-2.4s1.1-2.4 2.4-2.4c1.3 0 2.4 1.1 2.4 2.4S7.3 18.4 6 18.4zm10 10c-.5 0-1-.2-1.3-.4-.3-.2-.5-.4-.6-.6-.3-.4-.4-.8-.4-1.3s.2-1 .4-1.3c.2-.3.4-.5.6-.6.4-.3.8-.4 1.3-.4 1.3 0 2.4 1.1 2.4 2.4s-1.1 2.2-2.4 2.2zm10-10c-1.3 0-2.4-1.1-2.4-2.4s1.1-2.4 2.4-2.4 2.4 1.1 2.4 2.4-1.1 2.4-2.4 2.4z"></path></svg>
+                <img loading="lazy" src="{{ static('protocol/img/logos/mozilla/vpn/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
                 <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-vpn') }}</h4>
                 <p class="c-menu-item-desc">{{ ftl('navigation-v2-get-protection-beyond-your-browser', fallback='navigation-protect-your-entire-device') }}</p>
               </a>
             </section>
           </li>
-          <li>
-            <section class="c-menu-item mzp-has-icon">
-              <a class="c-menu-item-link" href="{{ url('firefox.privacy.products') }}" data-link-text="Hubs" data-link-type="nav" data-link-position="topnav" data-link-group="projects">
-                <svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M27.3 7.6c0-1.5-1.1-2.8-2.6-3L16 3.1 7.2 4.6c-1.5.2-2.6 1.5-2.6 3 0 2.4 0 5.5.2 7 .4 4.5 1.3 7 3.5 9.8 1.9 2.4 4.6 4 7.6 4.4h.4c3-.5 5.7-2 7.6-4.4 2.2-2.8 3-5.3 3.5-9.8-.1-1.6-.1-5.1-.1-7zm-2.9 6.7c-.4 4-1.1 6-2.9 8.4-1.4 1.7-3.3 2.9-5.5 3.3-2.2-.4-4.1-1.6-5.5-3.3-1.8-2.4-2.5-4.4-2.9-8.4-.1-1.1-.1-3.5-.1-6.7 0-.1.1-.2.2-.2L16 6l8.3 1.4c.1 0 .2.1.2.2 0 3.2 0 5.7-.1 6.7zm-13.9-.2c0-.4-.1-1.5-.1-4.3l5.6-.9v14.2c-1.3-.3-2.4-1.1-3.2-2.1-1.4-1.8-2-3.1-2.3-6.9z"></path></svg>
-                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-product-promise') }}</h4>
-              {% if ftl_has_messages('navigation-v2-learn-how-each-firefox-product') %}
-                <p class="c-menu-item-desc">{{ ftl('navigation-v2-learn-how-each-firefox-product') }}</p>
-              {% endif %}
-              </a>
-            </section>
-          </li>
           <li>
             <section class="c-menu-item mzp-has-icon">
               <a class="c-menu-item-link" href="https://relay.firefox.com/?{{ utm_params }}" data-link-text="Firefox Relay" data-link-type="nav" data-link-position="topnav" data-link-group="projects">

diff --git a/bedrock/base/templates/includes/protocol/navigation/menus/whoweare.html b/bedrock/base/templates/includes/protocol/navigation/menus/whoweare.html
@@ -12,7 +12,7 @@
     <div class="c-menu-panel-container">
       <button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-about">{{ ftl('navigation-v2-close-who-we-are-menu', fallback='navigation-close-about-menu') }}</button>
       <div class="c-menu-panel-content">
-        <ul class="mzp-l-rows-four">
+        <ul class="mzp-l-rows-three">
           <li>
             <section class="c-menu-item mzp-has-icon">
               <a class="c-menu-item-link" href="{{ url('mozorg.about.manifesto') }}" data-link-text="Mozilla Manifesto" data-link-type="nav" data-link-position="topnav" data-link-group="who-we-are">
@@ -33,15 +33,6 @@ <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-foundation') }}</h4>
               </a>
             </section>
           </li>
-          <li>
-            <section class="c-menu-item mzp-has-icon">
-              <a class="c-menu-item-link" href="{{ url('mozorg.contribute') }}" data-link-text="Get Involved" data-link-type="nav" data-link-position="topnav" data-link-group="who-we-are">
-                <svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M12 22.7l4-3.9c-.5-.1-.9-.1-1.3-.1C11.1 18.7 4 20.5 4 24v2.7h12l-4-4zm2.7-6.7c2.9 0 5.3-2.4 5.3-5.3s-2.4-5.3-5.3-5.3-5.3 2.4-5.3 5.3c-.1 2.9 2.3 5.3 5.3 5.3z"></path><path fill="#42435a" d="M20.6 27.3L16 22.7l1.9-1.9 2.8 2.8 6.8-6.9 1.9 1.9-8.8 8.7z"></path></svg>
-                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-get-involved', fallback='navigation-get-involved') }}</h4>
-                <p class="c-menu-item-desc">{{ ftl('navigation-v2-join-the-fight-for-a', fallback='navigation-join-the-fight-for-a') }}</p>
-              </a>
-            </section>
-          </li>
           <li>
             <section class="c-menu-item mzp-has-icon">
               <a class="c-menu-item-link" href="{{ url('mozorg.about.leadership.index') }}" data-link-text="Leadership" data-link-type="nav" data-link-position="topnav" data-link-group="who-we-are">
@@ -53,6 +44,15 @@ <h4 class="c-menu-item-title">{{ ftl('navigation-v2-leadership', fallback='navig
               </a>
             </section>
           </li>
+          <li>
+            <section class="c-menu-item mzp-has-icon">
+              <a class="c-menu-item-link" href="{{ url('mozorg.contribute') }}" data-link-text="Get Involved" data-link-type="nav" data-link-position="topnav" data-link-group="who-we-are">
+                <svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M12 22.7l4-3.9c-.5-.1-.9-.1-1.3-.1C11.1 18.7 4 20.5 4 24v2.7h12l-4-4zm2.7-6.7c2.9 0 5.3-2.4 5.3-5.3s-2.4-5.3-5.3-5.3-5.3 2.4-5.3 5.3c-.1 2.9 2.3 5.3 5.3 5.3z"></path><path fill="#42435a" d="M20.6 27.3L16 22.7l1.9-1.9 2.8 2.8 6.8-6.9 1.9 1.9-8.8 8.7z"></path></svg>
+                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-get-involved', fallback='navigation-get-involved') }}</h4>
+                <p class="c-menu-item-desc">{{ ftl('navigation-v2-join-the-fight-for-a', fallback='navigation-join-the-fight-for-a') }}</p>
+              </a>
+            </section>
+          </li>
           <li>
             <section class="c-menu-item mzp-has-icon">
               <a class="c-menu-item-link" href="{{ url('careers.home') }}" data-link-text="Careers" data-link-type="nav" data-link-position="topnav" data-link-group="who-we-are">

diff --git a/l10n/en/navigation_v2.ftl b/l10n/en/navigation_v2.ftl
@@ -20,8 +20,6 @@ navigation-v2-firefox-for-ios = { -brand-name-firefox } for { -brand-name-ios }
 navigation-v2-get-the-mobile-browser = Get the mobile browser for your { -brand-name-iphone } or { -brand-name-ipad }.
 navigation-v2-firefox-focus = { -brand-name-firefox-focus }
 navigation-v2-simply-private-mobile = Simply private mobile browsing.
-navigation-v2-privacy-promise = Privacy Promise
-navigation-v2-learn-how-firefox-treats = Learn how { -brand-name-firefox } treats your data with respect.
 navigation-v2-firefox-blog = { -brand-name-firefox } Blog
 navigation-v2-read-about-new-firefox-features = Read about new { -brand-name-firefox } features and ways to stay safe online.
 navigation-v2-release-notes = Release Notes
@@ -33,19 +31,13 @@ navigation-v2-view-all-firefox-browsers = View all { -brand-name-firefox-browser
 navigation-v2-products = Products
 navigation-v2-close-products-menu = Close Products menu
 navigation-v2-mozilla-monitor = { -brand-name-mozilla-monitor }
-
-# Obsolete string
-navigation-v2-firefox-monitor = { -brand-name-firefox-monitor }
-
 navigation-v2-see-if-your-email-has = See if your email has appeared in a company’s data breach.
 navigation-v2-pocket = { -brand-name-pocket }
 navigation-v2-save-and-discover-the-best = Save and discover the best stories from across the web.
 navigation-v2-facebook-container = { -brand-name-facebook-container }
 navigation-v2-help-prevent-facebook-from = Help prevent { -brand-name-facebook } from collecting your data outside their site.
 navigation-v2-mozilla-vpn = { -brand-name-mozilla-vpn }
 navigation-v2-get-protection-beyond-your-browser = Get protection beyond your browser, on all your devices.
-navigation-v2-product-promise = Product Promise
-navigation-v2-learn-how-each-firefox-product = Learn how each { -brand-name-firefox } product protects and respects your data.
 navigation-v2-firefox-relay = { -brand-name-firefox-relay }
 navigation-v2-firefox-relay-beta = { -brand-name-firefox-relay } (beta)
 navigation-v2-sign-up-for-new-accounts = Sign up for new accounts without handing over your email address.

diff --git a/media/img/nav/icons/icon-privacy-promise.svg → .../firefox/privacy/icon-privacy-promise.svg b/media/img/nav/icons/icon-privacy-promise.svg → .../firefox/privacy/icon-privacy-promise.svg
diff --git a/media/img/nav/icons/icon-mozilla-vpn.svg b/media/img/nav/icons/icon-mozilla-vpn.svg
diff --git a/media/img/nav/icons/icon-product-promise.svg b/media/img/nav/icons/icon-product-promise.svg