From 3dce96ad1263dd39344399a02d6d9d7460f79caf Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 14 Jan 2025 15:59:54 -0500 Subject: [PATCH] Restore wnp 124 pdf page for wnp 135 na --- .../firefox/whatsnew/whatsnew-fx135-na.html | 76 +++++++++++++ bedrock/firefox/tests/test_base.py | 22 ++++ bedrock/firefox/views.py | 6 + .../firefox/whatsnew/whatsnew-135-pdf.scss | 92 +++++++++++++++ .../whatsnew135-pdf/edit-pdfs-dark.svg | 16 +++ .../whatsnew135-pdf/edit-pdfs-light.svg | 16 +++ .../firefox/whatsnew/whatsnew-135-pdf.es6.js | 105 ++++++++++++++++++ media/static-bundles.json | 12 ++ 8 files changed, 345 insertions(+) create mode 100644 bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx135-na.html create mode 100644 media/css/firefox/whatsnew/whatsnew-135-pdf.scss create mode 100644 media/img/firefox/whatsnew/whatsnew135-pdf/edit-pdfs-dark.svg create mode 100644 media/img/firefox/whatsnew/whatsnew135-pdf/edit-pdfs-light.svg create mode 100644 media/js/firefox/whatsnew/whatsnew-135-pdf.es6.js diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx135-na.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx135-na.html new file mode 100644 index 00000000000..383a659de20 --- /dev/null +++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx135-na.html @@ -0,0 +1,76 @@ +{# + 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_pdf') }} +{% endblock %} + +{% block wnp_content %} +
+

+ {{ picture( + url="img/firefox/whatsnew/whatsnew135-pdf/edit-pdfs-light.svg", + sources=[ + { + "media": "(prefers-color-scheme: light)", + "srcset": { + "img/firefox/whatsnew/whatsnew135-pdf/edit-pdfs-light.svg": "default", + } + }, + { + "media": "(prefers-color-scheme: dark)", + "srcset": { + "img/firefox/whatsnew/whatsnew135-pdf/edit-pdfs-dark.svg": "default", + } + } + ], + optional_attributes={ + "alt": "Edit PDFs in Firefox", + "width": "435", + "height": "222", + } + ) }} +

+ +
+ +
+

+ Say goodbye to the hassle of printing or filling out PDFs in other apps. Quickly and easily edit documents right in your browser. +

+ + +

+ + Try it now + +

+
+ +
+

+ Say goodbye to the hassle of printing or filling out PDFs in other apps. With Firefox as your default browser, quickly and easily edit documents right in your browser. +

+ +

+ + Set Firefox to default + +

+
+ +

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

+
+ +{% endblock %} + +{% block js %} + {{ js_bundle('firefox_whatsnew_135_pdf') }} +{% endblock %} diff --git a/bedrock/firefox/tests/test_base.py b/bedrock/firefox/tests/test_base.py index 77160917ab0..4bf79f5c039 100644 --- a/bedrock/firefox/tests/test_base.py +++ b/bedrock/firefox/tests/test_base.py @@ -335,6 +335,28 @@ def test_fx_135_0_0beta_pl(self, render_mock): # end 135 beta whatsnew tests + # begin 135 na whatsnew tests + + @override_settings(DEV=True) + def test_fx_135_0_0_en_US(self, render_mock): + """Should use whatsnew-fx135-na template for en-US locale""" + req = self.rf.get("/firefox/whatsnew/") + req.locale = "en-US" + self.view(req, version="111.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/whatsnew-fx135-na.html"] + + @override_settings(DEV=True) + def test_fx_135_0_0_en_CA(self, render_mock): + """Should use whatsnew-fx135-na template for en-CA locale""" + req = self.rf.get("/firefox/whatsnew/") + req.locale = "en-CA" + self.view(req, version="111.0") + template = render_mock.call_args[0][1] + assert template == ["firefox/whatsnew/whatsnew-fx135-na.html"] + + # end 135 na whatsnew tests + @override_settings(DEV=True) def test_rv_prefix(self, render_mock): """Prefixed oldversion shouldn't impact version sniffing.""" diff --git a/bedrock/firefox/views.py b/bedrock/firefox/views.py index b6d6ebf664f..295e6880236 100644 --- a/bedrock/firefox/views.py +++ b/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-na.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 == "en-US" or locale == "en-CA": + template = "firefox/whatsnew/whatsnew-fx135-na.html" + else: + template = "firefox/whatsnew/index.html" elif version.startswith("134."): if locale == "en-US": template = "firefox/whatsnew/whatsnew-fx134-us.html" diff --git a/media/css/firefox/whatsnew/whatsnew-135-pdf.scss b/media/css/firefox/whatsnew/whatsnew-135-pdf.scss new file mode 100644 index 00000000000..89daf3d39ec --- /dev/null +++ b/media/css/firefox/whatsnew/whatsnew-135-pdf.scss @@ -0,0 +1,92 @@ + +// 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 'includes/dark-mode'; +@import '~@mozilla-protocol/core/protocol/css/includes/lib'; +@import '~@mozilla-protocol/core/protocol/css/components/notification-bar'; + +@keyframes loading { + 0% { + background-position: 100% 50%; + } + + 100% { + background-position: 0 50%; + } +} + +.wnp-loading, +.wnp-editor, +.wnp-default { + &.show { + display: block; + } + + &.hide { + display: none; + } +} + +.wnp-content-main { + text-align: center; +} + +.wnp-main-title { + margin: 0 auto $layout-md; + color: $color-black; +} + +.wnp-main-tagline { + @include text-body-lg; + color: $color-black; +} + +// Show a loading indicator until we can detect default browser +.wnp-loading { + animation: loading 1.2s ease-in-out infinite; + background: linear-gradient(100deg, $color-light-gray-10 30%, $color-light-gray-20 50%, $color-light-gray-10 70%); + background-size: 400%; + border-radius: $border-radius-sm; + height: 4em; + margin: $layout-lg auto; + + &.hide { + display: none; + } +} + +// Assuming JS is available, show no content until we can detect default browser +.js { + .wnp-loading, + .wnp-default, + .wnp-editor { + display: none; + + &.show { + display: block; + } + } +} + +// Fall back to the editor content if JS fails +.no-js { + .wnp-loading, + .wnp-default { + display: none; + } + + .wnp-editor { + display: block; + } +} + +// Dark mode support +@media (prefers-color-scheme: dark) { + .wnp-main-title, + .wnp-main-tagline { + color: $color-white; + } +} diff --git a/media/img/firefox/whatsnew/whatsnew135-pdf/edit-pdfs-dark.svg b/media/img/firefox/whatsnew/whatsnew135-pdf/edit-pdfs-dark.svg new file mode 100644 index 00000000000..368c502bc6d --- /dev/null +++ b/media/img/firefox/whatsnew/whatsnew135-pdf/edit-pdfs-dark.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/media/img/firefox/whatsnew/whatsnew135-pdf/edit-pdfs-light.svg b/media/img/firefox/whatsnew/whatsnew135-pdf/edit-pdfs-light.svg new file mode 100644 index 00000000000..580a6725c14 --- /dev/null +++ b/media/img/firefox/whatsnew/whatsnew135-pdf/edit-pdfs-light.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/media/js/firefox/whatsnew/whatsnew-135-pdf.es6.js b/media/js/firefox/whatsnew/whatsnew-135-pdf.es6.js new file mode 100644 index 00000000000..28bf657fafe --- /dev/null +++ b/media/js/firefox/whatsnew/whatsnew-135-pdf.es6.js @@ -0,0 +1,105 @@ +/* + * 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/. + */ + +function defaultTrue() { + document.querySelector('.wnp-loading').classList.add('hide'); + document.querySelector('.wnp-default').classList.add('hide'); + document.querySelector('.wnp-editor').classList.add('show'); + + // UA + window.dataLayer.push({ + event: 'non-interaction', + eAction: 'whatsnew-135-na', + eLabel: 'default-true' + }); + + // GA4 + window.dataLayer.push({ + event: 'dimension_set', + firefox_is_default: true + }); +} + +function defaultFalse() { + document.querySelector('.wnp-loading').classList.add('hide'); + document.querySelector('.wnp-editor').classList.add('hide'); + document.querySelector('.wnp-default').classList.add('show'); + + // UA + window.dataLayer.push({ + event: 'non-interaction', + eAction: 'whatsnew-135-na', + eLabel: 'default-false' + }); + + // GA4 + window.dataLayer.push({ + event: 'dimension_set', + firefox_is_default: false + }); +} + +function init() { + // If UITour is slow to respond, fallback to assuming Fx is not default. + const requestTimeout = window.setTimeout(defaultFalse, 2000); + + Mozilla.UITour.getConfiguration('appinfo', function (details) { + // Clear timeout as soon as we get a response. + window.clearTimeout(requestTimeout); + + // If Firefox is already the default, show alternate call to action. + if (details.defaultBrowser) { + defaultTrue(); + return; + } + + defaultFalse(); + }); + + // Log account status + Mozilla.Client.getFxaDetails((details) => { + if (details.setup) { + // UA + window.dataLayer.push({ + event: 'non-interaction', + eAction: 'whatsnew-135-na', + eLabel: 'firefox-signed-in' + }); + + // GA4 + window.dataLayer.push({ + event: 'dimension_set', + firefox_is_signed_in: true + }); + } else { + // UA + window.dataLayer.push({ + event: 'non-interaction', + eAction: 'whatsnew-135-na', + eLabel: 'firefox-signed-out' + }); + + // GA4 + window.dataLayer.push({ + event: 'dimension_set', + firefox_is_signed_in: false + }); + } + }); +} + +if ( + typeof window.Mozilla.Client !== 'undefined' && + typeof window.Mozilla.UITour !== 'undefined' && + window.Mozilla.Client.isFirefoxDesktop +) { + init(); +} else { + // Fall back to PDF editor page if other checks fail + document.querySelector('.wnp-loading').classList.add('hide'); + document.querySelector('.wnp-default').classList.add('hide'); + document.querySelector('.wnp-editor').classList.add('show'); +} diff --git a/media/static-bundles.json b/media/static-bundles.json index fe4490e39c8..a2836d1f973 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -441,6 +441,12 @@ ], "name": "firefox_whatsnew_135beta" }, + { + "files": [ + "css/firefox/whatsnew/whatsnew-135-pdf.scss" + ], + "name": "firefox_whatsnew_135_pdf" + }, { "files": [ "css/firefox/firefox-20th/firefox-20th.scss" @@ -1487,6 +1493,12 @@ ], "name": "firefox_whatsnew_134_experiment" }, + { + "files": [ + "js/firefox/whatsnew/whatsnew-135-pdf.es6.js" + ], + "name": "firefox_whatsnew_135_pdf" + }, { "files": [ "js/firefox/firefox-20th/firefox-20th.js"