From 27414823a74b96e616544aa6ed53935a27ef89cd Mon Sep 17 00:00:00 2001 From: Craig Cook Date: Mon, 14 Aug 2023 11:32:47 -0700 Subject: [PATCH] Add WNP 117 for VPN and Relay [fix #13496, fix #13495] Co-authored-by: Nathan Barrett <30009669+nathan-barrett@users.noreply.github.com> --- .../whatsnew/whatsnew-fx117-na-relay.html | 73 ++++++ .../firefox/whatsnew/whatsnew-fx117-vpn.html | 190 +++++++++++++++ bedrock/firefox/tests/test_base.py | 55 +++++ bedrock/firefox/views.py | 47 +++- l10n/en/firefox/whatsnew/whatsnew.ftl | 5 + .../firefox/whatsnew/whatsnew-117-relay.scss | 223 ++++++++++++++++++ .../firefox/whatsnew/whatsnew-117-vpn.scss | 138 +++++++++++ .../firefox/whatsnew/whatsnew117-na/check.svg | 4 + .../whatsnew/whatsnew117-na/relay-inverse.svg | 6 + ...hatsnew-117-experiment-na-vpn-relay.es6.js | 47 ++++ .../whatsnew/whatsnew-117-na-relay.es6.js | 49 ++++ media/static-bundles.json | 24 ++ 12 files changed, 857 insertions(+), 4 deletions(-) create mode 100644 bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx117-na-relay.html create mode 100644 bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx117-vpn.html create mode 100644 media/css/firefox/whatsnew/whatsnew-117-relay.scss create mode 100644 media/css/firefox/whatsnew/whatsnew-117-vpn.scss create mode 100644 media/img/firefox/whatsnew/whatsnew117-na/check.svg create mode 100644 media/img/firefox/whatsnew/whatsnew117-na/relay-inverse.svg create mode 100644 media/js/firefox/whatsnew/whatsnew-117-experiment-na-vpn-relay.es6.js create mode 100644 media/js/firefox/whatsnew/whatsnew-117-na-relay.es6.js diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx117-na-relay.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx117-na-relay.html new file mode 100644 index 00000000000..0e0928d5f68 --- /dev/null +++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx117-na-relay.html @@ -0,0 +1,73 @@ +{# + 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_title %}What’s new with Firefox{% endblock %} + +{#- This will appear as which can be used for social share -#} +{% block page_og_desc %}{{ ftl('whatsnew-page-description') }}{% endblock %} + +{% block body_id %}firefox-whatsnew{% endblock %} + +{% block page_css %} +{{ css_bundle('firefox_whatsnew_117_na_relay') }} +{% endblock %} + +{% block experiments %} + {% if switch('experiment-whatsnew-117-na-vpn-relay', ['en-US']) %} + {{ js_bundle('firefox_whatsnew_117_experiment_na_vpn_relay') }} + {% endif %} +{% endblock %} + +{% block site_header %}{% endblock %} + +{% block wnp_content %} +
+
+
+
Firefox Relay
+ +

Avoiding spam just
got easier

+
+

New feature alert: Now Firefox Relay subscribers can now access their email masks right in the Firefox Browser.

+

Not using Relay? Let’s fix that.

+
+

+ + Try it out + +

+

+ + Try it out + +

+
+

+ Powered by Mozilla. Putting people before profits since 1998. +

+
+{% endblock %} + +{% block js %} +{{ js_bundle('firefox_whatsnew_update') }} +{{ js_bundle('firefox_whatsnew_117_na_relay') }} +{% endblock %} diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx117-vpn.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx117-vpn.html new file mode 100644 index 00000000000..4a3b925bb47 --- /dev/null +++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx117-vpn.html @@ -0,0 +1,190 @@ +{# + 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_title %}{{ ftl('whatsnew-page-title') }}{% endblock %} + +{#- This will appear as which can be used for social share -#} +{% block page_og_desc %}{{ ftl('whatsnew-page-description') }}{% endblock %} + +{% block body_id %}firefox-whatsnew{% endblock %} + +{% block page_css %} + {{ css_bundle('firefox_whatsnew_117_vpn') }} +{% endblock %} + +{% block experiments %} + {% if switch('experiment-whatsnew-117-na-vpn-relay', ['en-US']) %} + {{ js_bundle('firefox_whatsnew_117_experiment_na_vpn_relay') }} + {% endif %} +{% endblock %} + +{% block site_header %}{% endblock %} + +{%- if LANG == "bg": -%} + {% set vpn_title = "По-голяма поверителност на един клик разстояние" %} + {% set vpn_tagline = "Лятото може да си тръгва, но вашата сигурност трябва винаги да е с вас. С Mozilla VPN вие получавате допълнително спокойствие по всяко време и само с едно кликване." %} + {% set vpn_cta = "Вземете VPN от Mozilla" %} + {% set vpn_signoff = "Създадено от Mozilla. Първо хората, после приходите. От 1998 досега."|safe %} + +{%- elif LANG == "cs": -%} + {% set vpn_title = "Soukromí na vyšší úrovni je na dosah pouhým kliknutím" %} + {% set vpn_tagline = "Léto sice pomalu končí, ale vaše zabezpečení nikoli. Mozilla VPN je řešení, které vám na jedno kliknutí zajistí větší klid po celý rok." %} + {% set vpn_cta = "Získejte Mozilla VPN" %} + {% set vpn_signoff = "Provozováno společnosti Mozilla. Upřednostňujeme lidi před ziskem už od roku 1998."|safe %} + +{%- elif LANG == "da": -%} + {% set vpn_title = "Det næste niveau af privatliv er kun ét klik væk" %} + {% set vpn_tagline = "Sommeren lakker mod enden, men det bør din sikkerhed ikke. Mozilla VPN kan give dig ekstra ro i sindet året rundt med kun ét klik." %} + {% set vpn_cta = "Få Mozilla VPN" %} + {% set vpn_signoff = "Leveret af Mozilla. Vi har sat mennesker over profit siden 1998."|safe %} + +{%- elif LANG == "de": -%} + {% set vpn_title = "Mit einem Klick gibt’s Datenschutz der Extraklasse" %} + {% set vpn_tagline = "Der Sommer mag sich verabschieden, aber Ihre Sicherheit sollte bleiben. Mozilla VPN ist Ihre One-Click-Lösung für ein gutes Gefühl, das ganze Jahr über." %} + {% set vpn_cta = "Holen Sie sich Mozilla VPN" %} + {% set vpn_signoff = "Powered by Mozilla. Bei uns stehen Menschen seit 1998 über Gewinnen."|safe %} + +{%- elif LANG == "el": -%} + {% set vpn_title = "Το απόρρητο επόμενου επιπέδου είναι μόλις ένα κλικ μακριά" %} + {% set vpn_tagline = "Το καλοκαίρι μπορεί να τελειώνει, αλλά η ασφάλειά σας δεν πρέπει.Το Mozilla VPN είναι η λύση με ένα-κλικ για περισσότερη ηρεμία όλο το χρόνο." %} + {% set vpn_cta = "Αποκτήστε το Mozilla VPN" %} + {% set vpn_signoff = "Με την υποστήριξη της Mozilla. Βάζοντας τους ανθρώπους πάνω από το κέρδος από το 1998."|safe %} + +{%- elif LANG.startswith("es-"): -%} + {% set vpn_title = "La privacidad al máximo nivel está a un solo clic de distancia." %} + {% set vpn_tagline = "Aunque el verano afloje, tu seguridad no debería hacerlo.Mozilla VPN es tu solución en un solo clic para disfrutar de tranquilidad extra durante todo el año." %} + {% set vpn_cta = "Consigue Mozilla VPN" %} + {% set vpn_signoff = "Desarrollado por Mozilla. Priorizamos a las personas sobre el beneficio desde 1998."|safe %} + +{%- elif LANG == "fi": -%} + {% set vpn_title = "Seuraavan tason tietosuoja on vain napsautuksen päässä" %} + {% set vpn_tagline = "Vaikka päivät lyhenevät, tietoturvan täytyy pysyä töissä. Mozilla VPN on yhden napsautuksen ratkaisu mielenrauhaan kaikkina vuodenaikoina." %} + {% set vpn_cta = "Hanki Mozilla VPN" %} + {% set vpn_signoff = "Powered by Mozilla. Ihmiset etusijalle voitontavoittelun sijaan jo vuodesta 1998."|safe %} + +{%- elif LANG == "fr": -%} + {% set vpn_title = "La sécurité renforcée à portée de clic" %} + {% set vpn_tagline = "L’été touche à sa fin, mais votre sécurité reste importante. En un clic, Mozilla VPN vous protège tout au long de l’année." %} + {% set vpn_cta = "Obtenir Mozilla VPN" %} + {% set vpn_signoff = "Conçu par Mozilla. Nous plaçons les personnes avant le profit depuis 1998."|safe %} + +{%- elif LANG == "hr": -%} + {% set vpn_title = "Viša razina privatnosti dostupna je samo jednim klikom" %} + {% set vpn_tagline = "Ljeto je možda na odlasku, ali vaša privatnost ne bi trebala biti. Mozilla VPN je vaše rješenje jednim klikom za dodatnu bezbrižnost tijekom cijele godine." %} + {% set vpn_cta = "Uzmite Mozilla VPN" %} + {% set vpn_signoff = "Powered by Mozilla. Stavljamo ljude ispred profita od 1998."|safe %} + +{%- elif LANG == "hu": -%} + {% set vpn_title = "A biztonság következő szintje csak egy kattintásra van" %} + {% set vpn_tagline = "A nyár ugyan hamarosan lejár, de biztonsága sosem lehet a múlté. A Mozilla VPN egész évben plusz biztonságot nyújt, egyetlen kattintással." %} + {% set vpn_cta = "Mozilla VPN letöltése" %} + {% set vpn_signoff = "A Mozilla erejével. Mi az embereket helyezzük a profit elé – már 1998 óta."|safe %} + +{%- elif LANG == "it": -%} + {% set vpn_title = "La privacy di livello assoluto a portata di clic" %} + {% set vpn_tagline = "L'estate sta finendo, ma la tua sicurezza non può mai andare in vacanza. Mozilla VPN è la tua soluzione a portata di clic per un anno intero di tranquillità." %} + {% set vpn_cta = "Scopri Mozilla VPN" %} + {% set vpn_signoff = "Creata da Mozilla. Dal 1998, prima le persone, poi i profitti."|safe %} + +{%- elif LANG == "lt": -%} + {% set vpn_title = "Aukštesnio lygio privatumas vos vienu spustelėjimu" %} + {% set vpn_tagline = "Vasara gal ir baigiasi, tačiau jūsų saugumas neturėtų. „Mozilla VPN“ vos vienu spustelėjimu užtikrins ramybę visiems metams." %} + {% set vpn_cta = "Įsigykite „Mozilla VPN“" %} + {% set vpn_signoff = "Teikia „Mozilla“. Pirmenybė žmonėms, o ne pelnui, nuo 1998 m."|safe %} + +{%- elif LANG == "lv": -%} + {% set vpn_title = "Nākamā līmeņa privātums ir tikai viena klikšķa attālumā" %} + {% set vpn_tagline = "Lai arī vasara tuvojas beigām, jūsu drošībai nevajadzētu beigties. Tikai viens klikšķis, un Mozilla VPN parūpēsies par jūsu sirdsmieru visa gada garumā." %} + {% set vpn_cta = "Iegādāties Mozilla VPN" %} + {% set vpn_signoff = "Nodrošina Mozilla. Rūpes par cilvēkiem, nevis peļņu, jau kopš 1998. gada."|safe %} + +{%- elif LANG == "nl": -%} + {% set vpn_title = "Til uw privacy in één klik naar een hoger niveau" %} + {% set vpn_tagline = "De zomer loopt op zijn einde. Hoog tijd om uw veiligheid na te kijken. In één klik biedt Mozilla VPN u extra zekerheid gedurende het hele jaar." %} + {% set vpn_cta = "Mozilla VPN downloaden" %} + {% set vpn_signoff = "Mogelijk gemaakt door Mozilla. De organisatie die mensen belangrijker vindt dan winst, sinds 1998."|safe %} + +{%- elif LANG == "pl": -%} + {% set vpn_title = "Jedno kliknięcie i wchodzisz na wyższy poziom prywatności" %} + {% set vpn_tagline = "Letnie słońce słabnie, Twoje bezpieczeństwo – wręcz przeciwnie. Mozilla VPN to prosty jak kliknięcie myszką sposób na spokojną głowę przez cały rok." %} + {% set vpn_cta = "Pobierz Mozilla VPN" %} + {% set vpn_signoff = "Wykorzystuje technologię Mozilla. Tworzymy dla ludzi, nie dla zysku – już od 1998 r."|safe %} + +{%- elif LANG.startswith("pt"): -%} + {% set vpn_title = "A privacidade mais avançada está a um clique de distância" %} + {% set vpn_tagline = "O verão está quase a terminar, mas o mesmo não pode acontecer com a sua segurança. A VPN Mozilla é a sua solução com um só clique que lhe proporciona total tranquilidade durante todo o ano." %} + {% set vpn_cta = "Obtenha a VPN Mozilla" %} + {% set vpn_signoff = "Com tecnologia Mozilla. Colocamos as pessoas à frente dos lucros desde 1998."|safe %} + +{%- elif LANG == "ru": -%} + {% set vpn_title = "Конфиденциальность следующего уровня будет вашей в один клик" %} + {% set vpn_tagline = "Лето, может быть, и подходит к концу, но не ваша безопасность.Mozilla VPN — это ваше решение одним кликом для дополнительного душевного спокойствия в течение всего года." %} + {% set vpn_cta = "Установить Mozilla VPN" %} + {% set vpn_signoff = "На базе Mozilla. Ставим людей выше прибыли с 1998 года."|safe %} + +{%- elif LANG == "sk": -%} + {% set vpn_title = "Súkromie na vyššej úrovni je vzdialené len jedno kliknutie." %} + {% set vpn_tagline = "Leto sa síce končí, ale vaša bezpečnosť by sa nemala.VPN Mozilla je vaše riešenie na jedno kliknutie pre špeciálny pocit istoty počas celého roka." %} + {% set vpn_cta = "Získajte VPN Mozilla" %} + {% set vpn_signoff = "Podporované spoločnosťou Mozilla. Ľudí uprednostňujeme pred ziskom už od roku 1998."|safe %} + +{%- elif LANG == "sl": -%} + {% set vpn_title = "Od napredne stopnje zasebnosti vas loči zgolj en klik." %} + {% set vpn_tagline = "Poletje se poslavlja, vaša varnost pa ne. Z rešitvijo Mozilla VPN boste brez skrbi vse leto." %} + {% set vpn_cta = "Prenesite Mozilla VPN" %} + {% set vpn_signoff = "Rešitev omogoča Mozilla. Ljudi postavljamo pred dobiček že od leta 1998."|safe %} + +{%- elif LANG == "sv-SE": -%} + {% set vpn_title = "Ta sekretessen till nästa nivå med bara ett klick" %} + {% set vpn_tagline = "Även om sommaren varvar ner, bör inte din säkerhet göra det. Mozilla VPN ger dig sinnesro hela året med bara ett klick." %} + {% set vpn_cta = "Skaffa Mozilla VPN" %} + {% set vpn_signoff = "Drivs av Mozilla. Värderar människor mer än vinst sedan 1998."|safe %} + +{%- else: -%} + {% set vpn_title = "Next-level privacy is just a click away" %} + {% set vpn_tagline = "Summer may be winding down, but your security shouldn’t. Mozilla VPN is your one-click solution for extra peace of mind all year long." %} + {% set vpn_cta = "Get Mozilla VPN" %} + {% set vpn_signoff = "Powered by Mozilla. Putting people before profits since 1998."|safe %} +{%- endif -%} + +{% block wnp_content %} +
+
+
+ +
+ +

{{ vpn_title }}

+ +

+ {{ vpn_tagline }} +

+ +

+ {% if variant == "2" %} + + {{ vpn_cta }} + + {% else %} + + {{ vpn_cta }} + + {% endif %} +

+
+ +

+ {{ vpn_signoff }} +

+ +
+{% endblock %} + +{% block js %} + {{ js_bundle('firefox_whatsnew_update') }} +{% endblock %} diff --git a/bedrock/firefox/tests/test_base.py b/bedrock/firefox/tests/test_base.py index 21d8ea01e43..c67a4b945ab 100644 --- a/bedrock/firefox/tests/test_base.py +++ b/bedrock/firefox/tests/test_base.py @@ -706,6 +706,61 @@ def test_fx_117_0_0_fr(self, render_mock): template = render_mock.call_args[0][1] assert template == ["firefox/whatsnew/whatsnew-fx117-fr-reader-view.html"] + @override_settings(DEV=True) + @patch.dict(os.environ, SWITCH_FIREFOX_WHATSNEW_117_NA_VPN_RELAY="False") + def test_fx_117_0_0_en_us(self, render_mock): + """Should use whatsnew-fx117-vpn template for en-US locale when switch is off""" + req = self.rf.get("/firefox/whatsnew/") + req.locale = "en-US" + self.view(req, version="117.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/whatsnew-fx117-vpn.html"] + + @override_settings(DEV=True) + def test_fx_117_0_0_en_us_v3(self, render_mock): + """Should use whatsnew-fx117-na-relay template for en-US locale v3""" + req = self.rf.get("/firefox/whatsnew/?v=3") + req.locale = "en-US" + self.view(req, version="117.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/whatsnew-fx117-na-relay.html"] + + @override_settings(DEV=True) + def test_fx_117_0_0_en_us_bg(self, render_mock): + """Should use whatsnew-fx117-vpn template for en-US locale in Bulgaria""" + req = self.rf.get("/firefox/whatsnew/", HTTP_CF_IPCOUNTRY="BG") + req.locale = "en-US" + self.view(req, version="117.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/whatsnew-fx117-vpn.html"] + + @override_settings(DEV=True) + def test_fx_117_0_0_de_at(self, render_mock): + """Should use whatsnew-fx117-vpn template for de locale in Austria""" + req = self.rf.get("/firefox/whatsnew/", HTTP_CF_IPCOUNTRY="AT") + req.locale = "de" + self.view(req, version="117.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/whatsnew-fx117-vpn.html"] + + @override_settings(DEV=True) + def test_fx_117_0_0_hu_us(self, render_mock): + """Should use index template for hu locale in US""" + req = self.rf.get("/firefox/whatsnew/", HTTP_CF_IPCOUNTRY="US") + req.locale = "hu" + self.view(req, version="117.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/index.html"] + + @override_settings(DEV=True) + def test_fx_117_0_0_en_us_cn(self, render_mock): + """Should use index-account template for en-US locale in China""" + req = self.rf.get("/firefox/whatsnew/", HTTP_CF_IPCOUNTRY="CN") + req.locale = "en-US" + self.view(req, version="117.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/index-account.html"] + # end 117.0 whatsnew tests diff --git a/bedrock/firefox/views.py b/bedrock/firefox/views.py index ed68a5b168f..c12cf94a568 100644 --- a/bedrock/firefox/views.py +++ b/bedrock/firefox/views.py @@ -412,16 +412,19 @@ class WhatsnewView(L10nTemplateView): "firefox/whatsnew/whatsnew-fx117-de-reader-view.html": ["firefox/whatsnew/whatsnew"], "firefox/whatsnew/whatsnew-fx117-fr-reader-view.html": ["firefox/whatsnew/whatsnew"], "firefox/whatsnew/whatsnew-fx117-uk-reader-view.html": ["firefox/whatsnew/whatsnew"], + "firefox/whatsnew/whatsnew-fx117-vpn.html": ["firefox/whatsnew/whatsnew"], + "firefox/whatsnew/whatsnew-fx117-na-relay.html": ["firefox/whatsnew/whatsnew"], } # specific templates that should not be rendered in # countries where we can't advertise Mozilla VPN. vpn_excluded_templates = [ "firefox/whatsnew/whatsnew-fx115-eu-vpn.html", + "firefox/whatsnew/whatsnew-fx117-vpn.html", ] # place expected ?v= values in this list - variations = ["1", "2"] + variations = ["1", "2", "3", "4"] def get_context_data(self, **kwargs): ctx = super().get_context_data(**kwargs) @@ -488,11 +491,16 @@ def get_template_names(self): else: template = "firefox/whatsnew/index.html" elif version.startswith("117."): - if locale.startswith("en-"): + if country in WNP117_VPN_EXPANSION_COUNTRIES and ftl_file_is_active("firefox/whatsnew/whatsnew"): + template = "firefox/whatsnew/whatsnew-fx117-vpn.html" + elif locale.startswith("en-"): if locale == "en-GB" or country == "GB": template = "firefox/whatsnew/whatsnew-fx117-uk-reader-view.html" - else: - template = "firefox/whatsnew/index.html" + elif locale in ["en-US", "en-CA"]: + if variant == "3": + template = "firefox/whatsnew/whatsnew-fx117-na-relay.html" + else: + template = "firefox/whatsnew/whatsnew-fx117-vpn.html" elif locale == "de": template = "firefox/whatsnew/whatsnew-fx117-de-reader-view.html" elif locale == "fr": @@ -557,6 +565,37 @@ def get_template_names(self): return [template] +WNP117_VPN_EXPANSION_COUNTRIES = [ + "AT", # Austria + "BE", # Belgium + "BG", # Bulgaria + "CH", # Switzerland + "CY", # Cyprus + "CZ", # Czech Republic + # "DE", # Germany + "DK", # Denmark + "EE", # Estonia + "ES", # Spain + "FI", # Finland + # "FR", # France + "HR", # Croatia + "HU", # Hungary + "IE", # Ireland + "IT", # Italy + "LT", # Lithuania + "LU", # Luxembourg + "LV", # Latvia + "MT", # Malta + "NL", # Netherlands + "PL", # Poland + "PT", # Portugal + "RO", # Romania + "SE", # Sweden + "SI", # Slovenia + "SK", # Slovakia +] + + class DownloadThanksView(L10nTemplateView): ftl_files_map = { "firefox/new/basic/thanks.html": ["firefox/new/download"], diff --git a/l10n/en/firefox/whatsnew/whatsnew.ftl b/l10n/en/firefox/whatsnew/whatsnew.ftl index 9792a6957c0..ec754de9805 100644 --- a/l10n/en/firefox/whatsnew/whatsnew.ftl +++ b/l10n/en/firefox/whatsnew/whatsnew.ftl @@ -4,6 +4,9 @@ ### URL: https://www-dev.allizom.org/firefox/60.0/whatsnew/ +whatsnew-page-title-v2 = What’s new with { -brand-name-firefox } + +# Obsolete string whatsnew-page-title = What’s new with { -brand-name-firefox } - More privacy, more protections. whatsnew-page-description = Take your stand against an industry that’s selling your data to third parties. Stay smart and safe online with technology that fights for you. whatsnew-firefox = { -brand-name-firefox } @@ -25,3 +28,5 @@ whatsnew-out-of-date-notification-v2 = An even newer { -brand-name-firefox } is # Variables: # $url (url) - link to https://www.mozilla.org/firefox/notes/ whatsnew-release-notes = Read the Release Notes to know more about what’s new in your { -brand-name-firefox } browser. + +whatsnew-signoff = Powered by { -brand-name-mozilla }. Putting people before profits since 1998. diff --git a/media/css/firefox/whatsnew/whatsnew-117-relay.scss b/media/css/firefox/whatsnew/whatsnew-117-relay.scss new file mode 100644 index 00000000000..96fcff939dd --- /dev/null +++ b/media/css/firefox/whatsnew/whatsnew-117-relay.scss @@ -0,0 +1,223 @@ +// 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 '~@mozilla-protocol/core/protocol/css/components/logos/wordmark'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-relay'; + + +.wnp-content-main { + background-color: $color-pink-05; + margin-top: $spacing-md; + text-align: center; + + .mzp-c-wordmark { + display: none; + margin-left: auto; + margin-right: auto; + } + + &.fxa-active { + .wnp-main-cta.fxa { + display: block; + } + + .wnp-main-cta.landing { + display: none; + } + } + + &.static { + .mzp-c-wordmark { + display: block; + } + + .wnp-relay-animation { + display: none; + animation: none; + } + } +} + +.wnp-main-title { + @include text-title-lg; + color: $color-black; +} + +.wnp-body-text { + @include text-body-lg; + color: $color-black; + margin: 0 auto; + max-width: 525px; +} + +.wnp-main-cta.fxa { + display: none; +} + +.wnp-relay-animation { + --button-border-radius: 12px; + max-width: max-content; + margin: 2em auto; + background: $color-white; + border-radius: var(--button-border-radius); + height: 52px; + animation: 0.5s ease-out 0s 1 normal forwards running pop-in; + + + .relay-input { + background-color: $color-white; + color: $color-dark-gray-05; + border-radius: var(--button-border-radius); + justify-content: center; + position: relative; + display: flex; + align-items: center; + z-index: 2; + height: 56px; + width: 300px; + + .input-check { + opacity: 0; + } + + &.animation-end { + color: $color-black; + font-weight: bold; + justify-content: space-around; + + .input-check { + animation: 0.2s ease-out 0.2s 1 normal forwards running pop-in; + width: 32px; + } + } + } + + &.static { + animation: none; + + .relay-input { + color: $color-black; + font-weight: bold; + justify-content: space-around; + + .input-check { + opacity: 1; + width: 32px; + } + } + } + + .relay-dropdown { + align-items: center; + background-color: $color-white; + border-radius: var(--button-border-radius); + display: flex; + justify-content: center; + margin: 14px auto 0; + padding: $spacing-md; + position: relative; + width: max-content; + opacity: 0; + transition: opacity 0.1s ease-in-out; + + button { + @include font-size(14px); + background: $color-purple-50; + border: none; + border-radius: var(--button-border-radius); + display: flex; + color: $color-white; + align-items: center; + padding: $spacing-sm $spacing-md; + } + + .wnp-relay-logo { + margin: 0 $spacing-sm 0 0; + width: 26px; + height: 26px; + } + + &::after { + position: absolute; + content: ""; + top: -8px; + right: 20%; + border-bottom: 8px solid $color-white; + border-right: 8px solid transparent; + border-left: 8px solid transparent; + } + + &.active { + opacity: 1; + + button { + animation: 0.8s ease-in-out .5s forwards button-press; + } + } + } + + &.click-animation { + animation: 0.3s ease-in-out .5s forwards click; + + } +} + + +@keyframes button-press { + 0% { + transform: scale(1.0); + background: $color-purple-50; + } + + 50% { + transform: scale(0.98); + background: $color-purple-70; + } + + 80% { + transform: scale(1.0); + background: $color-purple-50; + } + + + 100% { + transform: scale(1.0); + background: $color-purple-50; + } +} + +@keyframes pop-in { + 0% { + opacity: 0; + transform: scale(0); + } + + 35% { + opacity: 1; + transform: scale(0.2); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes click { + 0% { + transform: scale(1.0); + } + + 50% { + transform: scale(0.98); + } + + + 100% { + transform: scale(1.0); + } +} diff --git a/media/css/firefox/whatsnew/whatsnew-117-vpn.scss b/media/css/firefox/whatsnew/whatsnew-117-vpn.scss new file mode 100644 index 00000000000..4d6e273820f --- /dev/null +++ b/media/css/firefox/whatsnew/whatsnew-117-vpn.scss @@ -0,0 +1,138 @@ +// 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/. + +$brand-theme: 'firefox'; + +@import 'includes/base'; +@import '~@mozilla-protocol/core/protocol/css/includes/lib'; +@import '~@mozilla-protocol/core/protocol/css/components/notification-bar'; + +.wnp-content-main { + animation: mainbg 200ms 1700ms ease-in forwards; + background-color: $color-white; + color: $color-black; + margin-top: $spacing-md; + padding-bottom: $spacing-md; + text-align: center; +} + +.wnp-main-title { + @include text-title-lg; + padding: 0 $layout-lg; +} + +.wnp-main-image { + margin: $layout-sm auto; +} + +.wnp-main-tagline { + @include text-body-lg; + color: $color-black; + padding: 0 $layout-lg; +} + +.wnp-sign-off, +.c-utilities { + color: $color-black; +} + +.toggle { + align-items: center; + animation: fade-and-zoom 200ms 800ms ease forwards, drop 400ms 1050ms ease-in forwards; + display: inline-flex; + flex-wrap: wrap; + justify-content: center; + padding-bottom: 0; + position: relative; + opacity: 0; + transform: scale(0.85); + top: -25px; +} + +.toggle-display { + --offset: 0.25em; + --diameter: 2.5em; + align-items: center; + animation: toggle-color 100ms 1600ms linear forwards; + background-color: $color-pink-40; + border-radius: 100vw; + border: 2px solid $color-black; + display: flex; + height: calc(var(--diameter) + var(--offset) * 2); + justify-content: space-around; + position: relative; + width: calc(var(--diameter) * 2 + var(--offset) * 2); + transition: background-color 100ms linear; + + @media #{$mq-md} { + --diameter: 3em; + } + + @media #{$mq-lg} { + --diameter: 3.5em + } + + &::before { + animation: toggle-slide 500ms 1400ms cubic-bezier(.8, -0.75, .5, 1.1) forwards; + background: $color-white; + border-radius: 50%; + border: 2px solid $color-black; + box-sizing: border-box; + content: ''; + height: var(--diameter); + left: var(--offset); + position: absolute; + top: 50%; + transform: translate(0, -50%); + transition: inherit; + width: var(--diameter); + z-index: 2; + } +} + +// Disable animations +@media (prefers-reduced-motion: reduce) { + .wnp-content-main, + .toggle, + .toggle-display, + .toggle-display::before { + animation: none; + } +} + +// ---------------------------------------------------------------------------*/ +// Animations + +@keyframes toggle-slide { + from { transform: translate(0, -50%); } + to { transform: translate(100%, -50%); } +} + +@keyframes toggle-color { + from { background-color: $color-pink-40; } + to { background-color: $color-green-40; } +} + +@keyframes mainbg { + to { background-color: $color-violet-05; } +} + +@keyframes fade-and-zoom { + 0% { + opacity: 0; + transform: scale(0.85); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes drop { + 0% { top: -25px; } + 50% { top: 4px; } + 70% { top: -8px; } + 90%, 100% { top: 0; } +} diff --git a/media/img/firefox/whatsnew/whatsnew117-na/check.svg b/media/img/firefox/whatsnew/whatsnew117-na/check.svg new file mode 100644 index 00000000000..b5859b759fb --- /dev/null +++ b/media/img/firefox/whatsnew/whatsnew117-na/check.svg @@ -0,0 +1,4 @@ + + + + diff --git a/media/img/firefox/whatsnew/whatsnew117-na/relay-inverse.svg b/media/img/firefox/whatsnew/whatsnew117-na/relay-inverse.svg new file mode 100644 index 00000000000..5dbd8cbe4f8 --- /dev/null +++ b/media/img/firefox/whatsnew/whatsnew117-na/relay-inverse.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/media/js/firefox/whatsnew/whatsnew-117-experiment-na-vpn-relay.es6.js b/media/js/firefox/whatsnew/whatsnew-117-experiment-na-vpn-relay.es6.js new file mode 100644 index 00000000000..d3a1fc8eecd --- /dev/null +++ b/media/js/firefox/whatsnew/whatsnew-117-experiment-na-vpn-relay.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'; + +const href = window.location.href; + +const initTrafficCop = () => { + if (href.indexOf('v=') !== -1) { + if (href.indexOf('v=1') !== -1) { + window.dataLayer.push({ + 'data-ex-variant': 'wnp117-vpn-page-link', + 'data-ex-name': 'wnp-117-experiment-na-vpn-relay' + }); + } else if (href.indexOf('v=2') !== -1) { + window.dataLayer.push({ + 'data-ex-variant': 'wnp117-vpn-pricing-link', + 'data-ex-name': 'wnp-117-experiment-na-vpn-relay' + }); + } else if (href.indexOf('v=3') !== -1) { + window.dataLayer.push({ + 'data-ex-variant': 'wnp117-relay', + 'data-ex-name': 'wnp-117-experiment-na-vpn-relay' + }); + } + } else if (TrafficCop) { + const miller = new TrafficCop({ + id: 'exp-wnp-117-na-vpn-relay', + cookieExpires: 0, + variations: { + 'v=1': 48, // VPN page, regular link + 'v=2': 32, // VPN page, pricing link + 'v=3': 20 // Relay page + } + }); + miller.init(); + } +}; + +// Avoid entering automated tests into random experiments. +if (isApprovedToRun()) { + initTrafficCop(); +} diff --git a/media/js/firefox/whatsnew/whatsnew-117-na-relay.es6.js b/media/js/firefox/whatsnew/whatsnew-117-na-relay.es6.js new file mode 100644 index 00000000000..7879b1ea5ad --- /dev/null +++ b/media/js/firefox/whatsnew/whatsnew-117-na-relay.es6.js @@ -0,0 +1,49 @@ +/* + * 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/. + */ + +const relayAnimationWrapper = document.querySelector('.wnp-relay-animation'); +const relayDropdown = document.querySelector('.relay-dropdown'); +const relayInput = document.querySelector('.relay-input'); +const inputText = document.querySelector('.relay-input span'); + +if (window.Mozilla.Utils.allowsMotion()) { + relayAnimationWrapper.addEventListener('animationend', (e) => { + if (e.animationName === 'pop-in') { + relayAnimationWrapper.classList.add('click-animation'); + } + + if (e.animationName === 'click' && e.target === relayAnimationWrapper) { + relayDropdown.classList.add('active'); + setTimeout(() => { + inputText.textContent = ''; + }, 500); + } + }); + + relayDropdown.addEventListener( + 'animationend', + (e) => { + if (e.animationName === 'button-press') { + relayDropdown.style.opacity = 0; + relayInput.classList.add('animation-end'); + inputText.textContent = 'hxty0y40@mozmail.com'; + } + }, + false + ); +} else { + document.querySelector('.wnp-content-main').classList.add('static'); +} + +(function () { + Mozilla.Client.getFxaDetails(function (details) { + if (details.setup) { + document + .querySelector('.wnp-content-main') + .classList.add('fxa-active'); + } + }); +})(); diff --git a/media/static-bundles.json b/media/static-bundles.json index 9aa2ff5f564..f1772db82a0 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -455,6 +455,18 @@ ], "name": "firefox_whatsnew_117_eu_reader_view" }, + { + "files": [ + "css/firefox/whatsnew/whatsnew-117-vpn.scss" + ], + "name": "firefox_whatsnew_117_vpn" + }, + { + "files": [ + "css/firefox/whatsnew/whatsnew-117-relay.scss" + ], + "name": "firefox_whatsnew_117_na_relay" + }, { "files": [ "css/firefox/privacy/common.scss" @@ -1631,6 +1643,18 @@ ], "name": "firefox_whatsnew_117_eu_reader_view_experiment" }, + { + "files": [ + "js/firefox/whatsnew/whatsnew-117-na-relay.es6.js" + ], + "name": "firefox_whatsnew_117_na_relay" + }, + { + "files": [ + "js/firefox/whatsnew/whatsnew-117-experiment-na-vpn-relay.es6.js" + ], + "name": "firefox_whatsnew_117_experiment_na_vpn_relay" + }, { "files": [ "js/firefox/privacy/products.js"