diff --git a/bedrock/firefox/redirects.py b/bedrock/firefox/redirects.py index debb54b0982..d2f883f7189 100644 --- a/bedrock/firefox/redirects.py +++ b/bedrock/firefox/redirects.py @@ -48,6 +48,16 @@ def mobile_app(request, *args, **kwargs): "fxshare7", "DESKTOP_FEATURE_CALLOUT_SIGNED_INTO_ACCOUNT.treatment_a", "DESKTOP_FEATURE_CALLOUT_SIGNED_INTO_ACCOUNT.treatment_b", + "wnp134-de-a", + "wnp134-de-b", + "wnp134-en-ca-a", + "wnp134-en-ca-b", + "wnp134-en-na-a", + "wnp134-en-na-b", + "wnp134-en-uk-a", + "wnp134-en-uk-b", + "wnp134-fr-a", + "wnp134-fr-b", ] for p in product_options: diff --git a/bedrock/firefox/templates/firefox/whatsnew/includes/fx134/qrcode.html b/bedrock/firefox/templates/firefox/whatsnew/includes/fx134/qrcode.html new file mode 100644 index 00000000000..fd4d6d786a8 --- /dev/null +++ b/bedrock/firefox/templates/firefox/whatsnew/includes/fx134/qrcode.html @@ -0,0 +1,37 @@ +{# + 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/. +#} + +
+
+
+ {{ resp_img( + url='img/firefox/whatsnew/whatsnew134/' + qrcode + '-200.png', + srcset={ + 'img/firefox/whatsnew/whatsnew134/' + qrcode + '-400.png': '2x' + }, + optional_attributes={ + 'class': 'wnp-main-image', + 'width': '200', + 'height': '200' + } + ) }} + + {% if variant == '2' %} + + + + + + {% else %} + + + + {% endif %} +
+ +
{{ caption }}
+
+
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-ca.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-ca.html new file mode 100644 index 00000000000..fc896b159aa --- /dev/null +++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-ca.html @@ -0,0 +1,47 @@ +{# + 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_134') }} +{% endblock %} + +{% block experiments %} + {{ js_bundle('firefox_whatsnew_134_experiment') }} +{% endblock %} + +{% if variant == '2' %} + {% set title = 'Stay productive on the go' %} + {% set desc = 'Syncing your Firefox tabs across your devices means you can work,
read and shop whenever and wherever.'|safe %} + {% set qrcode = 'en-ca-b' %} +{% else %} + {% set title = 'Privacy in your pocket' %} + {% set desc = 'You deserve privacy even when you’re in public. With Firefox on your phone,
you can trust you won’t be followed around online wherever you go.'|safe %} + {% set qrcode = 'en-ca-a' %} +{% endif %} + +{% block wnp_content %} +
+
+

{{ title }}

+

{{ desc }}

+ + {% with qrcode=qrcode, caption='Scan to get Firefox on your phone or tablet' %} + {% include "firefox/whatsnew/includes/fx134/qrcode.html" %} + {% endwith %} +
+
+ +
+

{{ ftl('whatsnew-signoff') }}

+ {% include "firefox/whatsnew/includes/mofo-donate-cta.html" %} +
+{% endblock %} + +{% block js %} + {{ js_bundle('firefox_whatsnew_events') }} +{% endblock %} diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-de.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-de.html new file mode 100644 index 00000000000..a7caeda30dd --- /dev/null +++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-de.html @@ -0,0 +1,47 @@ +{# + 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_134') }} +{% endblock %} + +{% block experiments %} + {{ js_bundle('firefox_whatsnew_134_experiment') }} +{% endblock %} + +{% if variant == '2' %} + {% set title = 'Bleib unterwegs produktiv' %} + {% set desc = 'Wenn „produktiver sein“ auf deiner Liste mit guten Vorsätzen für 2025 steht, ist das Synchronisieren von Firefox auf all deinen Geräten der perfekte Start.' %} + {% set qrcode = 'de-b' %} +{% else %} + {% set title = 'Datenschutz für die Hosentasche' %} + {% set desc = 'Du verdienst Privatsphäre. Mit Firefox auf deinem Smartphone kannst du darauf vertrauen, dass du online nicht auf Schritt und Tritt verfolgt wirst.' %} + {% set qrcode = 'de-a' %} +{% endif %} + +{% block wnp_content %} +
+
+

{{ title }}

+

{{ desc }}

+ + {% with qrcode=qrcode, caption='Scanne, um Firefox auf deinem Smartphone oder Tablet zu installieren.' %} + {% include "firefox/whatsnew/includes/fx134/qrcode.html" %} + {% endwith %} +
+
+ +
+

{{ ftl('whatsnew-signoff') }}

+ {% include "firefox/whatsnew/includes/mofo-donate-cta.html" %} +
+{% endblock %} + +{% block js %} + {{ js_bundle('firefox_whatsnew_events') }} +{% endblock %} diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-fr.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-fr.html new file mode 100644 index 00000000000..4b30ea58d43 --- /dev/null +++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-fr.html @@ -0,0 +1,47 @@ +{# + 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_134') }} +{% endblock %} + +{% block experiments %} + {{ js_bundle('firefox_whatsnew_134_experiment') }} +{% endblock %} + +{% if variant == '2' %} + {% set title = 'Restez productif où que vous soyez' %} + {% set desc = 'La synchronisation de vos onglets Firefox sur tous vos appareils vous permet de travailler, de lire et de faire des achats de n’importe où sans perdre le fil.' %} + {% set qrcode = 'fr-b' %} +{% else %} + {% set title = 'La confidentialité dans votre poche' %} + {% set desc = 'Vous méritez d’être protégé, même en public. Naviguez sans être suivi avec Firefox sur votre téléphone.' %} + {% set qrcode = 'fr-a' %} +{% endif %} + +{% block wnp_content %} +
+
+

{{ title }}

+

{{ desc }}

+ + {% with qrcode=qrcode, caption='Scanner pour installer Firefox sur votre téléphone ou tablette' %} + {% include "firefox/whatsnew/includes/fx134/qrcode.html" %} + {% endwith %} +
+
+ +
+

{{ ftl('whatsnew-signoff') }}

+ {% include "firefox/whatsnew/includes/mofo-donate-cta.html" %} +
+{% endblock %} + +{% block js %} + {{ js_bundle('firefox_whatsnew_events') }} +{% endblock %} diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-gb.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-gb.html new file mode 100644 index 00000000000..10c8f37194b --- /dev/null +++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-gb.html @@ -0,0 +1,46 @@ +{# + 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_134') }} +{% endblock %} + +{% block experiments %} + {{ js_bundle('firefox_whatsnew_134_experiment') }} +{% endblock %} + +{% if variant == '2' %} + {% set title = 'Stay productive on the go' %} + {% set desc = 'Syncing your Firefox tabs across your devices means you can work,
read and shop whenever and wherever.'|safe %} + {% set qrcode = 'en-gb-b' %} +{% else %} + {% set title = 'Privacy in your pocket' %} + {% set desc = 'You deserve privacy even when you’re in public. With Firefox on your phone,
you can trust you won’t be followed around online wherever you go.'|safe %} + {% set qrcode = 'en-gb-a' %} +{% endif %} + +{% block wnp_content %} +
+
+

{{ title }}

+

{{ desc }}

+ + {% with qrcode=qrcode, caption='Scan to get Firefox on your phone or tablet' %} + {% include "firefox/whatsnew/includes/fx134/qrcode.html" %} + {% endwith %} +
+ +
+

{{ ftl('whatsnew-signoff') }}

+ {% include "firefox/whatsnew/includes/mofo-donate-cta.html" %} +
+{% endblock %} + +{% block js %} + {{ js_bundle('firefox_whatsnew_events') }} +{% endblock %} diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-us.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-us.html new file mode 100644 index 00000000000..d64694da5af --- /dev/null +++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx134-us.html @@ -0,0 +1,47 @@ +{# + 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_134') }} +{% endblock %} + +{% block experiments %} + {{ js_bundle('firefox_whatsnew_134_experiment') }} +{% endblock %} + +{% if variant == '2' %} + {% set title = 'Stay productive on the go' %} + {% set desc = 'Syncing your Firefox tabs across your devices means you can work,
read and shop whenever and wherever.'|safe %} + {% set qrcode = 'en-us-b' %} +{% else %} + {% set title = 'Privacy in your pocket' %} + {% set desc = 'You deserve privacy even when you’re in public. With Firefox on your phone,
you can trust you won’t be followed around online wherever you go.'|safe %} + {% set qrcode = 'en-us-a' %} +{% endif %} + +{% block wnp_content %} +
+
+

{{ title }}

+

{{ desc }}

+ + {% with qrcode=qrcode, caption='Scan to get Firefox on your phone or tablet' %} + {% include "firefox/whatsnew/includes/fx134/qrcode.html" %} + {% endwith %} +
+
+ +
+

{{ ftl('whatsnew-signoff') }}

+ {% include "firefox/whatsnew/includes/mofo-donate-cta.html" %} +
+{% endblock %} + +{% block js %} + {{ js_bundle('firefox_whatsnew_events') }} +{% endblock %} diff --git a/bedrock/firefox/tests/test_base.py b/bedrock/firefox/tests/test_base.py index b9d814a6838..32b45663bfe 100644 --- a/bedrock/firefox/tests/test_base.py +++ b/bedrock/firefox/tests/test_base.py @@ -1620,6 +1620,64 @@ def test_fx_133_0_0_newsletter_en_ca_fr_v3(self, render_mock): # end 133.0 whatsnew tests + # begin 134.0 whatsnew tests + + @override_settings(DEV=True) + def test_fx_134_0_0_en_us(self, render_mock): + """Should use whatsnew-fx134-us.html template for en-US""" + req = self.rf.get("/firefox/whatsnew/") + req.locale = "en-US" + self.view(req, version="134.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/whatsnew-fx134-us.html"] + + @override_settings(DEV=True) + def test_fx_134_0_0_en_ca(self, render_mock): + """Should use whatsnew-fx134-ca.html template for en-CA""" + req = self.rf.get("/firefox/whatsnew/") + req.locale = "en-CA" + self.view(req, version="134.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/whatsnew-fx134-ca.html"] + + @override_settings(DEV=True) + def test_fx_134_0_0_en_gb(self, render_mock): + """Should use whatsnew-fx134-gb.html template for en-GB""" + req = self.rf.get("/firefox/whatsnew/") + req.locale = "en-GB" + self.view(req, version="134.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/whatsnew-fx134-gb.html"] + + @override_settings(DEV=True) + def test_fx_134_0_0_de(self, render_mock): + """Should use whatsnew-fx134-de.html template for de""" + req = self.rf.get("/firefox/whatsnew/") + req.locale = "de" + self.view(req, version="134.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/whatsnew-fx134-de.html"] + + @override_settings(DEV=True) + def test_fx_134_0_0_fr(self, render_mock): + """Should use whatsnew-fx134-fr.html template for fr""" + req = self.rf.get("/firefox/whatsnew/") + req.locale = "fr" + self.view(req, version="134.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/whatsnew-fx134-fr.html"] + + @override_settings(DEV=True) + def test_fx_134_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="134.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/index.html"] + + # end 134.0 whatsnew tests + @patch("bedrock.firefox.views.l10n_utils.render", return_value=HttpResponse()) class TestFirstRun(TestCase): diff --git a/bedrock/firefox/views.py b/bedrock/firefox/views.py index 18faff68cdd..19c4200e2c2 100644 --- a/bedrock/firefox/views.py +++ b/bedrock/firefox/views.py @@ -516,6 +516,11 @@ class WhatsnewView(L10nTemplateView): "firefox/whatsnew/whatsnew-fx133-donation-eu.html": ["firefox/whatsnew/whatsnew"], "firefox/whatsnew/whatsnew-fx133-donation-na.html": ["firefox/whatsnew/whatsnew"], "firefox/whatsnew/whatsnew-fx135beta.html": ["firefox/whatsnew/whatsnew"], + "firefox/whatsnew/whatsnew-fx134-us.html": ["firefox/whatsnew/whatsnew"], + "firefox/whatsnew/whatsnew-fx134-ca.html": ["firefox/whatsnew/whatsnew"], + "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"], } # specific templates that should not be rendered in @@ -641,6 +646,19 @@ def get_template_names(self): template = "firefox/whatsnew/index.html" else: template = "firefox/whatsnew/index.html" + elif version.startswith("134."): + if locale == "en-US": + template = "firefox/whatsnew/whatsnew-fx134-us.html" + elif locale == "en-CA": + template = "firefox/whatsnew/whatsnew-fx134-ca.html" + elif locale == "en-GB": + template = "firefox/whatsnew/whatsnew-fx134-gb.html" + elif locale == "de": + template = "firefox/whatsnew/whatsnew-fx134-de.html" + elif locale == "fr": + template = "firefox/whatsnew/whatsnew-fx134-fr.html" + else: + template = "firefox/whatsnew/index.html" elif version.startswith("133."): if locale in self.wnp_133_vpn_langs and country in settings.VPN_MOBILE_SUB_COUNTRY_CODES: template = "firefox/whatsnew/whatsnew-fx133-vpn.html" diff --git a/media/css/firefox/whatsnew/whatsnew-134.scss b/media/css/firefox/whatsnew/whatsnew-134.scss new file mode 100644 index 00000000000..e541141d215 --- /dev/null +++ b/media/css/firefox/whatsnew/whatsnew-134.scss @@ -0,0 +1,431 @@ +// 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'; + +@keyframes pop-in-v1-foxy { + 0% { + opacity: 0; + transform: scale(0) rotate(-13.9deg);; + } + + 35% { + opacity: 1; + transform: scale(0.2) rotate(-13.9deg);; + } + + 50% { + transform: scale(0.5) rotate(-13.9deg);; + } + + 65% { + transform: scale(0.7) rotate(-13.9deg);; + } + + 80% { + transform: scale(0.9) rotate(-13.9deg);; + } + + 90% { + transform: scale(1.1) rotate(-13.9deg);; + } + + 100% { + opacity: 1; + transform: scale(1) rotate(-13.9deg);; + } +} + +@keyframes pop-in-v1-padlock { + 0% { + opacity: 0; + transform: scale(0) rotate(21.1deg); + } + + 35% { + opacity: 1; + transform: scale(0.2) rotate(21.1deg); + } + + 50% { + transform: scale(0.5) rotate(21.1deg); + } + + 65% { + transform: scale(0.7) rotate(21.1deg); + } + + 80% { + transform: scale(0.9) rotate(21.1deg); + } + + 90% { + transform: scale(1.1) rotate(21.1deg); + } + + 100% { + opacity: 1; + transform: scale(1) rotate(21.1deg); + } +} + +@keyframes pop-in-v1-eye { + 0% { + opacity: 0; + transform: scale(0); + } + + 35% { + opacity: 1; + transform: scale(0.2); + } + + 50% { + transform: scale(0.5); + } + + 65% { + transform: scale(0.7); + } + + 80% { + transform: scale(0.9); + } + + 90% { + transform: scale(1.1); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes pop-in-v2-foxy { + 0% { + opacity: 0; + transform: scale(0) rotate(-15deg); + } + + 35% { + opacity: 1; + transform: scale(0.2) rotate(-15deg); + } + + 50% { + transform: scale(0.5) rotate(-15deg); + } + + 65% { + transform: scale(0.7) rotate(-15deg); + } + + 80% { + transform: scale(0.9) rotate(-15deg); + } + + 90% { + transform: scale(1.1) rotate(-15deg); + } + + 100% { + opacity: 1; + transform: scale(1) rotate(-15deg); + } +} + +@keyframes pop-in-v2-heart { + 0% { + opacity: 0; + transform: scale(0) rotate(21deg); + } + + 35% { + opacity: 1; + transform: scale(0.2) rotate(21deg); + } + + 50% { + transform: scale(0.5) rotate(21deg); + } + + 65% { + transform: scale(0.7) rotate(21deg); + } + + 80% { + transform: scale(0.9) rotate(21deg); + } + + 90% { + transform: scale(1.1) rotate(21deg); + } + + 100% { + opacity: 1; + transform: scale(1) rotate(21deg); + } +} + +@keyframes pop-in-v2-laptop { + 0% { + opacity: 0; + transform: scale(0) rotate(7.2deg); + } + + 35% { + opacity: 1; + transform: scale(0.2) rotate(7.2deg); + } + + 50% { + transform: scale(0.5) rotate(7.2deg); + } + + 65% { + transform: scale(0.7) rotate(7.2deg); + } + + 80% { + transform: scale(0.9) rotate(7.2deg); + } + + 90% { + transform: scale(1.1) rotate(7.2deg); + } + + 100% { + opacity: 1; + transform: scale(1) rotate(7.2deg); + } +} + +@keyframes pop-in-v2-phone { + 0% { + opacity: 0; + transform: scale(0); + } + + 35% { + opacity: 1; + transform: scale(0.2); + } + + 50% { + transform: scale(0.5); + } + + 65% { + transform: scale(0.7); + } + + 80% { + transform: scale(0.9); + } + + 90% { + transform: scale(1.1); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes pop-in-v2-sync { + 0% { + opacity: 0; + transform: scale(0) rotate(0deg); + } + + 35% { + opacity: 1; + transform: scale(0.2) rotate(63deg); + } + + 50% { + transform: scale(0.5) rotate(90deg); + } + + 65% { + transform: scale(0.7) rotate(117deg); + } + + 80% { + transform: scale(0.9) rotate(144deg); + } + + 90% { + transform: scale(1.1) rotate(162deg); + } + + 100% { + opacity: 1; + transform: scale(1) rotate(180deg); + } +} + +.wnp-content-main { + text-align: center; + + & > .mzp-l-content { + padding-top: $layout-sm; + padding-bottom: $layout-sm; + } + + @media #{$mq-tall} { + & > .mzp-l-content { + padding-top: $layout-lg; + padding-bottom: $layout-lg; + } + } +} + +.wnp-main-tagline br { + display: none; + + @media #{$mq-md} { + display: block; + } +} + +.wnp-qr-code { + display: inline-block; + max-width: 325px; +} + +.wnp-qr-code-wrapper { + display: inline-block; + position: relative; +} + +.wnp-main-image { + margin: $spacing-lg 0 $spacing-md; + transform: rotate(-3.4deg); +} + +.wnp-sticker-v1-foxy, +.wnp-sticker-v1-padlock, +.wnp-sticker-v1-eye, +.wnp-sticker-v2-foxy, +.wnp-sticker-v2-heart, +.wnp-sticker-v2-laptop, +.wnp-sticker-v2-phone, +.wnp-sticker-v2-sync { + display: none; +} + +@media #{$mq-md} { + .wnp-sticker-v1-foxy, + .wnp-sticker-v1-padlock, + .wnp-sticker-v1-eye, + .wnp-sticker-v2-foxy, + .wnp-sticker-v2-heart, + .wnp-sticker-v2-laptop, + .wnp-sticker-v2-phone, + .wnp-sticker-v2-sync { + display: block; + position: absolute; + } + + // variant A + + .wnp-sticker-v1-foxy { + top: 0; + left: -122px; + transform: rotate(-13.9deg); + } + + .wnp-sticker-v1-padlock { + transform: rotate(21.1deg); + bottom: 70px; + right: -115px; + } + + .wnp-sticker-v1-eye { + bottom: 5px; + right: -120px; + } + + // variant B + + .wnp-sticker-v2-foxy { + bottom: 20px; + left: -122px; + transform: rotate(-15deg); + } + + .wnp-sticker-v2-heart { + top: 15px; + right: -60px; + transform: rotate(21deg); + } + + .wnp-sticker-v2-laptop { + top: 35px; + right: -165px; + transform: rotate(7.2deg); + } + + .wnp-sticker-v2-phone { + top: 85px; + right: -165px; + } + + .wnp-sticker-v2-sync { + top: 70px; + right: -130px; + } +} + +@media (prefers-reduced-motion: no-preference) { + .loaded { + .animate-pop-in-v1-foxy { + animation: 0.3s ease-out 0s 1 normal forwards pop-in-v1-foxy; + } + + .animate-pop-in-v1-padlock { + animation: 0.3s ease-out 0.2s 1 normal forwards pop-in-v1-padlock; + } + + .animate-pop-in-v1-eye { + animation: 0.3s ease-out 0.45s 1 normal forwards pop-in-v1-eye; + } + + .animate-pop-in-v2-foxy { + animation: 0.3s ease-out 0s 1 normal forwards pop-in-v2-foxy; + } + + .animate-pop-in-v2-heart { + animation: 0.3s ease-out 0.2s 1 normal forwards pop-in-v2-heart; + } + + .animate-pop-in-v2-laptop { + animation: 0.3s ease-out 0.45s 1 normal forwards pop-in-v2-laptop; + } + + .animate-pop-in-v2-phone { + animation: 0.3s ease-out 0.6s 1 normal forwards pop-in-v2-phone; + } + + .animate-pop-in-v2-sync { + animation: 0.3s ease-out 0.8s 1 normal forwards pop-in-v2-sync; + } + } + + .wnp-sticker-v1-foxy, + .wnp-sticker-v1-padlock, + .wnp-sticker-v1-eye, + .wnp-sticker-v2-foxy, + .wnp-sticker-v2-heart, + .wnp-sticker-v2-laptop, + .wnp-sticker-v2-phone, + .wnp-sticker-v2-sync { + opacity: 0; + } +} diff --git a/media/img/firefox/whatsnew/whatsnew134/de-a-200.png b/media/img/firefox/whatsnew/whatsnew134/de-a-200.png new file mode 100644 index 00000000000..d93d14105b6 Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/de-a-200.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/de-a-400.png b/media/img/firefox/whatsnew/whatsnew134/de-a-400.png new file mode 100644 index 00000000000..331558e6dcf Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/de-a-400.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/de-b-200.png b/media/img/firefox/whatsnew/whatsnew134/de-b-200.png new file mode 100644 index 00000000000..2a3fedf7b1d Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/de-b-200.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/de-b-400.png b/media/img/firefox/whatsnew/whatsnew134/de-b-400.png new file mode 100644 index 00000000000..dcf3d63405a Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/de-b-400.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/en-ca-a-200.png b/media/img/firefox/whatsnew/whatsnew134/en-ca-a-200.png new file mode 100644 index 00000000000..52b865b0c4e Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/en-ca-a-200.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/en-ca-a-400.png b/media/img/firefox/whatsnew/whatsnew134/en-ca-a-400.png new file mode 100644 index 00000000000..dc288f33702 Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/en-ca-a-400.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/en-ca-b-200.png b/media/img/firefox/whatsnew/whatsnew134/en-ca-b-200.png new file mode 100644 index 00000000000..cdf192c3eab Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/en-ca-b-200.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/en-ca-b-400.png b/media/img/firefox/whatsnew/whatsnew134/en-ca-b-400.png new file mode 100644 index 00000000000..08645f9bfcf Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/en-ca-b-400.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/en-gb-a-200.png b/media/img/firefox/whatsnew/whatsnew134/en-gb-a-200.png new file mode 100644 index 00000000000..f5b5584d2da Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/en-gb-a-200.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/en-gb-a-400.png b/media/img/firefox/whatsnew/whatsnew134/en-gb-a-400.png new file mode 100644 index 00000000000..62c0af82d41 Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/en-gb-a-400.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/en-gb-b-200.png b/media/img/firefox/whatsnew/whatsnew134/en-gb-b-200.png new file mode 100644 index 00000000000..db535f791f0 Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/en-gb-b-200.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/en-gb-b-400.png b/media/img/firefox/whatsnew/whatsnew134/en-gb-b-400.png new file mode 100644 index 00000000000..43b02f7ad14 Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/en-gb-b-400.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/en-us-a-200.png b/media/img/firefox/whatsnew/whatsnew134/en-us-a-200.png new file mode 100644 index 00000000000..9d5df955351 Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/en-us-a-200.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/en-us-a-400.png b/media/img/firefox/whatsnew/whatsnew134/en-us-a-400.png new file mode 100644 index 00000000000..26647d482b9 Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/en-us-a-400.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/en-us-b-200.png b/media/img/firefox/whatsnew/whatsnew134/en-us-b-200.png new file mode 100644 index 00000000000..ca56ebfe153 Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/en-us-b-200.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/en-us-b-400.png b/media/img/firefox/whatsnew/whatsnew134/en-us-b-400.png new file mode 100644 index 00000000000..cc2ffdbc461 Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/en-us-b-400.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/fr-a-200.png b/media/img/firefox/whatsnew/whatsnew134/fr-a-200.png new file mode 100644 index 00000000000..0c81a55061b Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/fr-a-200.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/fr-a-400.png b/media/img/firefox/whatsnew/whatsnew134/fr-a-400.png new file mode 100644 index 00000000000..ce28ef2cdbc Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/fr-a-400.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/fr-b-200.png b/media/img/firefox/whatsnew/whatsnew134/fr-b-200.png new file mode 100644 index 00000000000..0b92a88276c Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/fr-b-200.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/fr-b-400.png b/media/img/firefox/whatsnew/whatsnew134/fr-b-400.png new file mode 100644 index 00000000000..e39923431eb Binary files /dev/null and b/media/img/firefox/whatsnew/whatsnew134/fr-b-400.png differ diff --git a/media/img/firefox/whatsnew/whatsnew134/wnp-134-a-eye.svg b/media/img/firefox/whatsnew/whatsnew134/wnp-134-a-eye.svg new file mode 100644 index 00000000000..fbb3517c066 --- /dev/null +++ b/media/img/firefox/whatsnew/whatsnew134/wnp-134-a-eye.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/whatsnew/whatsnew134/wnp-134-a-foxy.svg b/media/img/firefox/whatsnew/whatsnew134/wnp-134-a-foxy.svg new file mode 100644 index 00000000000..02f03058fe3 --- /dev/null +++ b/media/img/firefox/whatsnew/whatsnew134/wnp-134-a-foxy.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/whatsnew/whatsnew134/wnp-134-a-padlock.svg b/media/img/firefox/whatsnew/whatsnew134/wnp-134-a-padlock.svg new file mode 100644 index 00000000000..8c7e1992694 --- /dev/null +++ b/media/img/firefox/whatsnew/whatsnew134/wnp-134-a-padlock.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-foxy.svg b/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-foxy.svg new file mode 100644 index 00000000000..a6bd781e6c7 --- /dev/null +++ b/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-foxy.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-heart.svg b/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-heart.svg new file mode 100644 index 00000000000..cb494a331e9 --- /dev/null +++ b/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-heart.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-laptop.svg b/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-laptop.svg new file mode 100644 index 00000000000..4b490ae7941 --- /dev/null +++ b/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-laptop.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-phone.svg b/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-phone.svg new file mode 100644 index 00000000000..dbb80afd566 --- /dev/null +++ b/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-phone.svg @@ -0,0 +1 @@ + diff --git a/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-sync.svg b/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-sync.svg new file mode 100644 index 00000000000..6c200f8d0b9 --- /dev/null +++ b/media/img/firefox/whatsnew/whatsnew134/wnp-134-b-sync.svg @@ -0,0 +1 @@ + diff --git a/media/js/firefox/whatsnew/whatsnew-134-experiment.es6.js b/media/js/firefox/whatsnew/whatsnew-134-experiment.es6.js new file mode 100644 index 00000000000..748b32201a3 --- /dev/null +++ b/media/js/firefox/whatsnew/whatsnew-134-experiment.es6.js @@ -0,0 +1,47 @@ +/* + * 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 TrafficCop from '@mozmeao/trafficcop'; +import { isApprovedToRun } from '../../base/experiment-utils.es6.js'; + +if (typeof window.dataLayer === 'undefined') { + window.dataLayer = []; +} + +const href = window.location.href; + +const initTrafficCop = () => { + if (href.indexOf('v=') !== -1) { + if (href.indexOf('v=1') !== -1) { + // GA4 + window.dataLayer.push({ + event: 'experiment_view', + id: 'wnp134-exp', + variant: 'wnp134-privacy-v1' + }); + } else if (href.indexOf('v=2') !== -1) { + // GA4 + window.dataLayer.push({ + event: 'experiment_view', + id: 'wnp134-exp', + variant: 'wnp134-sync-v2' + }); + } + } else if (TrafficCop) { + const cop = new TrafficCop({ + variations: { + 'v=1': 50, // Privacy + 'v=2': 50 // Sync + } + }); + cop.init(); + } +}; + +// Avoid entering automated tests into random experiments. +if (isApprovedToRun()) { + initTrafficCop(); +} diff --git a/media/static-bundles.json b/media/static-bundles.json index 6f628f2901f..7dcf5cdb93a 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -471,6 +471,12 @@ ], "name": "firefox_whatsnew_133_vpn" }, + { + "files": [ + "css/firefox/whatsnew/whatsnew-134.scss" + ], + "name": "firefox_whatsnew_134" + }, { "files": [ "css/firefox/whatsnew/whatsnew-133-newsletter.scss" @@ -1589,6 +1595,12 @@ ], "name": "firefox_whatsnew_133_experiment_donation" }, + { + "files": [ + "js/firefox/whatsnew/whatsnew-134-experiment.es6.js" + ], + "name": "firefox_whatsnew_134_experiment" + }, { "files": [ "js/firefox/firefox-20th/firefox-20th.js"