Shortcuts WNP135 (#15852)

bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx135-eu.html

@@ -0,0 +1,45 @@
+{#
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+{% extends "firefox/whatsnew/base.html" %}
+
+{% block page_css %}
+  {{ css_bundle('firefox_whatsnew_135') }}
+{% endblock %}
+
+{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=wnp135-shortcuts' %}
+
+{% if LANG == 'de' %}
+  {% set main_title = 'Ein Zoom auf die Funktionen von Firefox' %}
+  {% set main_tagline = 'Navigiere dich mit Firefox schnell durchs Web und nutze <strong>cmd/Strg +</strong> und <strong>cmd/Strg -</strong>, um unkompliziert Inhalte zu vergrößern oder zu verkleinern.' %}
+  {% set main_cta = 'Entdecke weitere Tastenkombinationen' %}
+{% elif LANG == 'fr' %}
+  {% set main_title = 'Zoomez sur les fonctionnalités de Firefox' %}
+  {% set main_tagline = 'Naviguez sur Firefox rapidement avec <strong>cmd/ctrl +</strong> et <strong>cmd/ctrl -</strong> pour facilement redimensionner le contenu d’une page web.' %}
+  {% set main_cta = 'Découvrir plus de raccourcis' %}
+{% else %}
+  {% set main_title = 'Zoom in to Firefox functions' %}
+  {% set main_tagline = 'Navigate Firefox quickly and use <strong>cmd/ctrl +</strong> and <strong>cmd/ctrl -</strong> to easily resize content, making it larger or smaller.' %}
+  {% set main_cta = 'Find more shortcuts' %}
+{% endif %}
+
+{% set main_cta_link = 'https://support.mozilla.org/kb/keyboard-shortcuts-perform-firefox-tasks-quickly?'  + utm_params %}
+
+{% block wnp_content %}
+<section class="wnp-content-main">
+  <div class="mzp-l-content mzp-t-content-sm">
+    <img width="182" height="69" class="wnp-main-image" src="{{ l10n_img('firefox/wnp-135/shortcuts.svg') }}" alt="">
+    <h1 class="wnp-main-title">{{ main_title }}</h1>
+    <p class="wnp-main-tagline">{{ main_tagline | safe }}</p>
+    <a class="mzp-c-button mzp-t-product" data-cta-text="Find more shortcuts" href="{{ main_cta_link }}">{{ main_cta }}</a>
+  </div>
+</section>
+
+<section class="wnp-footer">
+  <p class="wnp-sign-off">{{ ftl('whatsnew-signoff') }}</p>
+  {% include "firefox/whatsnew/includes/mofo-donate-cta.html" %}
+</section>
+{% endblock %}

bedrock/firefox/tests/test_base.py

@@ -1164,6 +1164,55 @@ def test_fx_134_0_0_es_es(self, render_mock):
 
     # end 134.0 whatsnew tests
 
+    # begin 135.0 whatsnew tests
+
+    @override_settings(DEV=True)
+    def test_fx_135_0_0_fr(self, render_mock):
+        """Should use whatsnew-fx135-eu.html template for fr locale"""
+        req = self.rf.get("/firefox/whatsnew/")
+        req.locale = "fr"
+        self.view(req, version="135.0")
+        template = render_mock.call_args[0][1]
+        assert template == ["firefox/whatsnew/whatsnew-fx135-eu.html"]
+
+    @override_settings(DEV=True)
+    def test_fx_135_0_0_de(self, render_mock):
+        """Should use whatsnew-fx135-eu.html template for de locale"""
+        req = self.rf.get("/firefox/whatsnew/")
+        req.locale = "de"
+        self.view(req, version="135.0")
+        template = render_mock.call_args[0][1]
+        assert template == ["firefox/whatsnew/whatsnew-fx135-eu.html"]
+
+    @override_settings(DEV=True)
+    def test_fx_135_0_0_en_gb(self, render_mock):
+        """Should use whatsnew-fx135-eu.html template for en locale and country GB"""
+        req = self.rf.get("/firefox/whatsnew/", HTTP_CF_IPCOUNTRY="GB")
+        req.locale = "en-US"
+        self.view(req, version="135.0")
+        template = render_mock.call_args[0][1]
+        assert template == ["firefox/whatsnew/whatsnew-fx135-eu.html"]
+
+    @override_settings(DEV=True)
+    def test_fx_135_0_0_non_en_gb(self, render_mock):
+        """Should use default WNP template for non-en locale and country GB"""
+        req = self.rf.get("/firefox/whatsnew/", HTTP_CF_IPCOUNTRY="GB")
+        req.locale = "es-ES"
+        self.view(req, version="135.0")
+        template = render_mock.call_args[0][1]
+        assert template == ["firefox/whatsnew/index.html"]
+
+    @override_settings(DEV=True)
+    def test_fx_135_0_0_es_es(self, render_mock):
+        """Should use default WNP template for other locales"""
+        req = self.rf.get("/firefox/whatsnew/")
+        req.locale = "es-ES"
+        self.view(req, version="135.0")
+        template = render_mock.call_args[0][1]
+        assert template == ["firefox/whatsnew/index.html"]
+
+    # end 135.0 whatsnew tests
+
 
 @patch("bedrock.firefox.views.l10n_utils.render", return_value=HttpResponse())
 class TestFirstRun(TestCase):

bedrock/firefox/views.py

@@ -505,6 +505,7 @@ class WhatsnewView(L10nTemplateView):
         "firefox/whatsnew/whatsnew-fx134-gb.html": ["firefox/whatsnew/whatsnew"],
         "firefox/whatsnew/whatsnew-fx134-de.html": ["firefox/whatsnew/whatsnew"],
         "firefox/whatsnew/whatsnew-fx134-fr.html": ["firefox/whatsnew/whatsnew"],
+        "firefox/whatsnew/whatsnew-fx135-eu.html": ["firefox/whatsnew/whatsnew"],
     }
 
     # specific templates that should not be rendered in
@@ -616,6 +617,11 @@ def get_template_names(self):
                     template = "firefox/whatsnew/index.html"
             else:
                 template = "firefox/whatsnew/index.html"
+        elif version.startswith("135."):
+            if locale in ["de", "fr"] or country == "GB" and locale.startswith("en-"):
+                template = "firefox/whatsnew/whatsnew-fx135-eu.html"
+            else:
+                template = "firefox/whatsnew/index.html"
         elif version.startswith("134."):
             if locale == "en-US":
                 template = "firefox/whatsnew/whatsnew-fx134-us.html"

media/css/firefox/whatsnew/whatsnew-135.scss

@@ -0,0 +1,25 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+@import 'includes/base';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
+@import 'includes/dark-mode';
+@import 'includes/mofo-donate-cta';
+
+.mzp-l-content.mzp-t-content-sm {
+    max-width: 450px; // protocol is 432px, we need slightly bigger
+}
+
+.wnp-content-main {
+    text-align: center;
+}
+
+.wnp-main-title {
+    line-height: 1.01;
+}
+
+.wnp-main-image {
+    margin-bottom: $spacing-lg;
+}