[fix mozilla#7465] Add whatsnew page for Firefox 69 (mozilla#7599)

bedrock/base/templates/macros.html

@@ -270,7 +270,7 @@ <h3>{{ _('Your download link was sent.') }}</h3>
 {%- endmacro %}
 
 {# Docs: https://bedrock.readthedocs.io/en/latest/firefox-accounts.html#linking-to-monitorfirefoxcom #}
-{% macro monitor_button(entrypoint, form_type='email', utm_campaign=None, utm_content=None, utm_term=None, button_text=None, button_class='mzp-c-button mzp-t-product') -%}
+{% macro monitor_button(entrypoint, form_type='email', utm_campaign=None, utm_content=None, utm_term=None, button_text=None, button_class='mzp-c-button mzp-t-product', button_id='fxa-monitor-submit') -%}
   {% set fxa_queries = [
     'form_type=' ~ form_type,
     'entrypoint=' ~ entrypoint,
@@ -289,7 +289,7 @@ <h3>{{ _('Your download link was sent.') }}</h3>
     {% do fxa_queries.append('utm_term=' ~ utm_term) %}
   {% endif %}
 
-  <a data-action="{{ settings.FXA_ENDPOINT }}" href="https://monitor.firefox.com/oauth/init?{{ fxa_queries|join('&') }}" {%if button_class %}class="{{ button_class }}"{% endif %} id="fxa-monitor-submit" data-cta-text="Sign In to Monitor" data-cta-type="FxA-Monitor">
+  <a data-action="{{ settings.FXA_ENDPOINT }}" href="https://monitor.firefox.com/oauth/init?{{ fxa_queries|join('&') }}" {% if button_class %}class="{{ button_class }}"{% endif %} id="{{ button_id }}" data-cta-text="Sign In to Monitor" data-cta-type="FxA-Monitor">
     {% if button_text %}
       {{ button_text }}
     {% else %}

bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx68-b.html

@@ -7,7 +7,7 @@
 {% extends "firefox/whatsnew/whatsnew-fx68-trailhead.html" %}
 
 {% block page_css %}
-  {{ css_bundle('firefox_whatsnew_modular') }}
+  {{ css_bundle('firefox_whatsnew_69') }}
 {% endblock %}
 
 {% block body_attrs %}{{ super() }} data-variant="b"{% endblock %}
@@ -123,24 +123,24 @@ <h3 class="c-block-title">{{ _('Fierce defense of your privacy') }}</h3>
   <section class="content-extra show-fxa-supported-signed-in">
     <div class="mzp-l-content">
 
-      <div class="l-blocks-two">
+      <div class="l-columns-two">
 
-        <div class="c-block">
-          <div class="c-block-icon">
+        <div class="c-picto-block">
+          <div class="c-picto-block-image">
             <img src="{{ static('img/firefox/whatsnew_67/experiments.svg') }}" alt="">
           </div>
-          <h3 class="c-block-title">{{ _('Help us build a better Firefox for you.') }}</h3>
-          <div class="c-block-body">
+          <h3 class="c-picto-block-title">{{ _('Help us build a better Firefox for you.') }}</h3>
+          <div class="c-picto-block-body">
             <p>{{ _('Get into the open source spirit by test-driving upcoming products.') }}</p>
           </div>
         </div>
 
-        <div class="c-block">
-          <div class="c-block-icon">
+        <div class="c-picto-block">
+          <div class="c-picto-block-image">
             <img src="{{ static('img/firefox/whatsnew_67/inbox.svg') }}" alt="">
           </div>
-          <h3 class="c-block-title">{{ _('Help us keep Big Tech in check.') }}</h3>
-          <div class="c-block-body">
+          <h3 class="c-picto-block-title">{{ _('Help us keep Big Tech in check.') }}</h3>
+          <div class="c-picto-block-body">
             <p>{{ _('We support communities all over the world standing up for a healthier internet.  Add your voice to the fight.') }}</p>
           </div>
         </div>

bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx68-c.html

@@ -8,7 +8,7 @@
 
 {% block body_attrs %}data-variant="c"{% endblock %}
 
-{% block container_class %}{{ super() }} t-dark{% endblock %}
+{% block container_class %}{{ super() }} mzp-t-dark{% endblock %}
 
 {% block header_logo %}
   {{ high_res_img('logos/firefox/logo-quantum-wordmark-white.png', {'alt': 'Firefox', 'width': '120', 'height': '40', 'class': 'c-page-header-logo-fx'}) }}

bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx69.html

@@ -0,0 +1,126 @@
+{# 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 http://mozilla.org/MPL/2.0/. -#}
+
+{% from "macros.html" import monitor_button with context %}
+
+{% add_lang_files "firefox/whatsnew_69" %}
+
+{% extends "firefox/base-protocol.html" %}
+
+{% block page_title %}{{ _('Firefox Monitor — see if you’ve been in another company’s data breach') }}{% endblock %}
+{% block page_desc %}{{ _('Use Firefox Monitor to see if your info was compromised in another company’s data breach — and get automatically signed up for future alerts.') }}{% endblock %}
+
+{% block page_css %}
+  {{ css_bundle('firefox_whatsnew_69') }}
+{% endblock %}
+
+{% block body_class %}state-fxa-default{% endblock %}
+
+{% block site_header %}{% endblock %}
+
+{% block content %}
+<main class="content-wrapper mzp-t-firefox mzp-t-dark">
+  <header class="c-page-header">
+    <div class="mzp-l-content c-page-header-inner">
+      {{ high_res_img('logos/firefox/logo-quantum-wordmark-white.png', {'alt': 'Firefox', 'width': '120', 'height': '40', 'class': 'c-page-header-logo-fx'}) }}
+      <h1 class="c-page-header-up-to-date"><span>{{ _('Congrats! You’re using the latest version of Firefox.') }}</span></h1>
+    </div>
+  </header>
+
+  <section class="content-main">
+    <div class="mzp-l-content">
+      <div class="c-emphasis-box show-fxa-default show-fxa-not-fx show-fxa-supported-signed-out">
+        <img class="c-emphasis-box-logo" src="{{ static('img/logos/firefox/logo-monitor.svg') }}" alt="">
+        <h2 class="c-emphasis-box-title">
+        {% if LANG.startswith('en-') %}
+          Have you checked out<br> Firefox Monitor?
+        {% else %}
+          {{ _('Have you checked out Firefox Monitor?') }}
+        {% endif %}
+        </h2>
+        <p>{{ _('Sign up to see if your info was compromised in another company’s data breach, and automatically get alerts when your info might be at risk.') }}</p>
+
+        {{ monitor_button(
+          button_id='monitor-button-signed-out',
+          entrypoint='mozilla.org-firefox-whatsnew69',
+          utm_campaign='whatsnew69',
+          utm_content='whatsnew69-signed-out',
+          button_text=_('Sign Up for Monitor')
+        ) }}
+      </div>
+
+      <div class="c-emphasis-box show-fxa-supported-signed-in">
+        <img class="c-emphasis-box-logo" src="{{ static('img/logos/firefox/logo-monitor.svg') }}" alt="">
+        <h2 class="c-emphasis-box-title">{{ _('Have you checked out Firefox Monitor? It’s included with your Firefox account.') }}</h2>
+        <p>{{ _('Use Firefox Monitor to see if your info was compromised in another company’s data breach — and get automatically signed up for future alerts.') }}</p>
+
+        {{ monitor_button(
+          button_id='monitor-button-signed-in',
+          entrypoint='mozilla.org-firefox-whatsnew69',
+          utm_campaign='whatsnew69',
+          utm_content='whatsnew69-signed-in',
+          button_text=_('Sign In')
+        ) }}
+      </div>
+    </div>
+  </section>
+
+  <section class="content-extra">
+    <div class="mzp-l-content">
+      <div class="show-fxa-supported-signed-out">
+        <div class="c-picto-block">
+          <div class="c-picto-block-image">
+            <img src="{{ static('img/icons/tracking-protection.svg') }}" alt="">
+          </div>
+
+          <h3 class="c-picto-block-title">{{ _('Your Firefox Browser now automatically blocks online snoopers') }}</h3>
+          <div class="c-picto-block-body">
+            <p>{{ _('Now it’s harder than ever for spying companies to track you online. That’s because Enhanced Tracking Protection — a feature that blocks known tracking cookies — is on by default in your updated browser.') }}</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="show-fxa-supported-signed-in">
+        <div class="l-columns-two">
+          <div class="c-picto-block">
+            <div class="c-picto-block-image">
+              <img src="{{ static('img/firefox/glyphs/tracking-protection.svg') }}" alt="">
+            </div>
+
+            <h3 class="c-picto-block-title">{{ _('Your Firefox Browser now automatically blocks online snoopers') }}</h3>
+            <div class="c-picto-block-body">
+              <p>{{ _('Now it’s harder than ever for spying companies to track you online. That’s because Enhanced Tracking Protection — a feature that blocks known tracking cookies — is on by default in your updated browser.') }}</p>
+            </div>
+          </div>
+
+          <div class="c-picto-block">
+            <div class="c-picto-block-image">
+              <img src="{{ static('img/firefox/glyphs/pocket.svg') }}" alt="">
+            </div>
+
+            <h3 class="c-picto-block-title">{{ _('Put quality content in your Pocket') }}</h3>
+            <div class="c-picto-block-body">
+              <p>{{ _('Discover the web’s best content, and absorb it anytime — even offline — on any device. Pocket’s listen feature will even read any article aloud to you. Get it all from the Firefox toolbar or the Pocket app.') }}</p>
+              <p><a href="https://getpocket.com/firefox_learnmore/?utm_source=mozilla.org-firefox-whatsnew69&utm_medium=referral&utm_campaign=wnp69&utm_content=get-pocket&entrypoint=mozilla.org-firefox-whatsnew69">{{ _('Get the Pocket App') }}</a></p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <aside class="mzp-l-content c-utilities">
+    <p>
+    {% trans notes=url('firefox.notes') %}
+      Read the <a href="{{ notes }}">Release Notes</a> to know more about what’s new in your Firefox Browser.
+    {% endtrans %}
+    </p>
+  </aside>
+
+</main>
+{% endblock %}
+
+{% block js %}
+  {{ js_bundle('firefox_whatsnew_69') }}
+{% endblock %}

bedrock/firefox/tests/test_base.py

@@ -559,6 +559,18 @@ def test_whatsnew68_ve_monitor(self, render_mock):
 
     # end 68.0 whatsnew experiment tests
 
+    # begin 69.0 whatsnew tests
+
+    def test_fx_69_0(self, render_mock):
+        """Should use whatsnew-69 template for 69.0"""
+        req = self.rf.get('/firefox/whatsnew/')
+        req.locale = 'en-US'
+        self.view(req, version='69.0')
+        template = render_mock.call_args[0][1]
+        assert template == ['firefox/whatsnew/whatsnew-fx69.html']
+
+    # end 69.0 whatsnew tests
+
 
 @patch('bedrock.firefox.views.l10n_utils.render', return_value=HttpResponse())
 class TestFirstRun(TestCase):

bedrock/firefox/views.py

@@ -614,6 +614,8 @@ def get_template_names(self):
                 template = 'firefox/whatsnew/index.html'
         elif locale == 'id':
             template = 'firefox/whatsnew/index-lite.id.html'
+        elif version.startswith('69.'):
+            template = 'firefox/whatsnew/whatsnew-fx69.html'
         elif version.startswith('68.'):
             if locale in trailhead_locales:
                 if variant in ['b', 'c', 'd', 'e']:

docs/firefox-accounts.rst

@@ -230,7 +230,9 @@ The macro provides parameters as follows (* indicates a required parameter)
 +----------------------+------------------------------------------------------------------------------------------------------------------------+----------------------------------------------------------+-------------------------------------------------+
 |    button_text       | The button copy to be used in the call to action.  Default to a well localized string.                                 | Localizable string                                       | _('Sign In to Monitor')                         |
 +----------------------+------------------------------------------------------------------------------------------------------------------------+----------------------------------------------------------+-------------------------------------------------+
-|    button_class      | A CSS class names to be applied to the link.                                                                           | String of one or more CSS class names                    | 'mzp-c-button mzp-t-primary mzp-t-product'      |
+|    button_class      | A class name to be applied to the link (typically for styling with CSS).                                               | String of one or more class names                        | 'mzp-c-button mzp-t-primary mzp-t-product'      |
++----------------------+------------------------------------------------------------------------------------------------------------------------+----------------------------------------------------------+-------------------------------------------------+
+|    button_id         | A unique ID to apply to the link, for cases where multiple buttons appear on the same page.                            | String                                                   | 'fxa-monitor-submit'                            |
 +----------------------+------------------------------------------------------------------------------------------------------------------------+----------------------------------------------------------+-------------------------------------------------+
 |    utm_campaign*     | Used to identify specific marketing campaigns. Should have default value which is descriptive of the page component.   | Campaign name appended to default value                  | 'accounts-page-hero'                            |
 +----------------------+------------------------------------------------------------------------------------------------------------------------+----------------------------------------------------------+-------------------------------------------------+

media/css/firefox/whatsnew/whatsnew-modular.scss → media/css/firefox/whatsnew/whatsnew-69.scss

@@ -6,9 +6,9 @@ $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
 
 @import '../../../protocol/css/includes/lib';
-@import '../../../protocol/css/components/hero';
 @import '../../protocol/components/state-fxa';
 
+
 .content-wrapper {
     background-color: $color-gray-10;
 }
@@ -38,7 +38,7 @@ $image-path: '/media/protocol/img';
     background: $color-white;
 }
 
-// Eventually to be replaced by an upstream component. See https://github.com/mozilla/protocol/issues/383
+// To be replaced by an upstream component. See https://github.com/mozilla/protocol/issues/383
 .c-page-header-up-to-date {
     @include text-display-xxs;
     color: $color-off-black;
@@ -48,7 +48,7 @@ $image-path: '/media/protocol/img';
     span {
         background-color: $color-green-50;
         border-radius: 4px;
-        box-shadow: 0 2px 24px transparentize($color-off-black, .85);
+        box-shadow: 0 2px 8px transparentize($color-off-black, .76), 0 0 2px transparentize($color-off-black, .9);
         display: inline-block;
         font-weight: normal;
         max-width: $content-sm;
@@ -75,71 +75,88 @@ $image-path: '/media/protocol/img';
 
 //* -------------------------------------------------------------------------- */
 // Emphasis box
-// Eventually to be replaced by an upstream component. See https://github.com/mozilla/protocol/issues/385
+// To be replaced by an upstream component. See https://github.com/mozilla/protocol/issues/385
 
 .c-emphasis-box {
     @include border-box;
     background: $color-white;
     border-radius: 6px;
-    box-shadow: 0 0 16px transparentize($color-off-black, .85), 0 0 2px transparentize($color-off-black, .9);
-    color: $color-gray-90;
+    box-shadow: 0 4px 16px transparentize($color-off-black, .76), 0 0 2px transparentize($color-off-black, .9);
     margin: 0 auto $layout-sm;
     max-width: $content-md - ($layout-md * 2);
-    padding: $spacing-xl $layout-md;
+    padding: $spacing-xl;
 
     .c-emphasis-box-logo {
         display: block;
         margin: 0 auto $spacing-lg;
+        width: 50px;
     }
 
     .c-emphasis-box-title {
         @include text-display-sm;
-        color: $color-off-black;
+
+        br {
+            display: none;
+        }
+    }
+
+    @media #{$mq-md} {
+        padding: $spacing-xl $layout-md;
+
+        .c-emphasis-box-title br {
+            display: block;
+        }
     }
 }
 
 
 //* -------------------------------------------------------------------------- */
 // Extra content
+// To be replaced by revamped picto card. See https://github.com/mozilla/protocol/issues/382
 
-.c-block {
+.c-picto-block {
     @include border-box;
     margin: 0 auto $spacing-2xl;
     max-width: $content-md - ($layout-md * 2);
     padding: 0 $layout-md;
 
-    .c-block-title {
+    .c-picto-block-title {
         @include text-display-xs;
     }
 
-    .c-block-icon {
+    .c-picto-block-image {
+        align-items: center;
+        display: flex;
         margin-bottom: $spacing-md;
+        min-height: $layout-md;
     }
 }
 
 @media #{$mq-md} {
-    .l-blocks-two {
+    .l-columns-two,
+    .l-columns-three {
         display: flex;
         margin: 0 auto;
         max-width: $content-md - ($layout-md * 2);
         padding: 0 $layout-md;
+        flex-wrap: wrap;
 
-        .c-block {
-            flex: 1 1 0;
+        .c-picto-block {
+            flex: 1 1 50%;
             padding: 0 $spacing-lg;
         }
     }
 }
 
 
 @media #{$mq-lg} {
-    .l-blocks-three {
+    .l-columns-three {
         display: flex;
         margin: 0 auto;
         max-width: $content-lg;
 
-        .c-block {
-            flex: 1 1 0;
+        .c-picto-block {
+            flex: 1 1 33.3%;
             padding: 0 $spacing-lg;
         }
     }
@@ -216,7 +233,7 @@ $image-path: '/media/protocol/img';
 //* -------------------------------------------------------------------------- */
 // Dark theme
 
-.t-dark {
+.mzp-t-dark {
 
     &.content-wrapper {
         background-color: $color-off-black;
@@ -253,6 +270,7 @@ $image-path: '/media/protocol/img';
 
     .c-emphasis-box {
         background-color: $color-gray-10;
+        color: $color-off-black;
 
         :link {
             color: $color-link;