Add post-download thank you page. (Fixes #391) (#394)

* Update download_thunderbird() to replace a deprecated parameter with a button_class parameter + new hide footer links parameter
* Rough pass at a Thank you, please install Thunderbird page.
* Check for a get `downloaded=true` query parameter, and if it exists don't download Thunderbird.

Author: MelissaAutumn

assets/less/base/variables.less

@@ -130,9 +130,9 @@
   h-5: 1.25rem;
   h-6: 1.5rem;
   h-8: 2rem;
-  // h-10: 2.5rem;
-  // h-12: 3rem;
-  // h-16: 4rem;
+  h-10: 2.5rem;
+  h-12: 3rem;
+  h-16: 4rem;
   // h-20: 5rem;
   // h-24: 6rem;
   // h-32: 8rem;
@@ -403,6 +403,7 @@
   font-lg: 17px;
   font-xl: 19px;
   font-2xl: 21px;
+  font-3xl: 25px;
   font-4xl: 41px;
   font-hero: 59px;
 }

assets/less/components/buttons.less

@@ -119,6 +119,9 @@ button {
 .btn-newsletter {
   &:extend(.md\:w-40, .leading-none, .md\:leading-normal, .font-md, .rounded-sm, .border-none, .bg-primary-button, .text-white, .p-2, .pl-3, .pr-3, .uppercase, .font-bold, .appearance-none);
 
+  // Keeps button text one-line
+  white-space: nowrap;
+
   &:hover,
   &:focus {
     &:extend(.shadow-md);
@@ -130,6 +133,12 @@ button {
   }
 }
 
+// No javascript tweak
+.no-js .btn-newsletter {
+  line-height: 3rem;
+}
+
+
 .btn-join {
   &:extend(.text-white, .font-md, .font-semibold, .no-underline, .uppercase, .inline-block, .pt-3, .pb-3, .pl-6, .pr-6, .mb-5, .bg-primary-button, .rounded-xs, .shadow);
 
@@ -173,6 +182,15 @@ button {
   }
 }
 
+.btn-banner {
+  &:extend(.bg-transparent, .text-black, .font-regular, .font-md, .font-semibold, .inline-block, .pt-3, .pb-3, .pl-4, .pr-4, .rounded-sm, .m-1);
+
+  &:hover,
+  &:focus {
+    &:extend(.no-underline);
+  }
+}
+
 // Product download buttons
 .download-button {
   .ios-download,

assets/less/components/download.less

@@ -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 http://mozilla.org/MPL/2.0/.
+
+/* Retry Banner: "(i) Your download didn't start automatically? [Try Again]" */
+
+// Yes javascript tweaks
+.retry-download {
+  .retry-text {
+    margin-left: auto;
+    margin-right: 0;
+  }
+  .retry-button {
+    margin-right: 0;
+  }
+}
+
+// No javascript tweaks
+.no-js .retry-download {
+  &:extend(.flex-col, .h-full);
+  .retry-text {
+    &:extend(.mt-4, .mx-auto);
+    p {
+      &:extend(.mr-6);
+    }
+  }
+  .retry-button {
+    &:extend(.mx-auto);
+  }
+}
+
+/* Download buttons for the retry banner */
+
+// By default we want to hide all the downloads, and then javascript will show the correct build
+.download-hidden {
+  &:extend(.hidden);
+}
+// We want to hide channel titles on javascript enabled browsers
+.js .channel-title {
+  &:extend(.hidden);
+}
+// Show everything if we don't have javascript
+.no-js .download-hidden {
+  display: block;
+}

assets/less/style.less

@@ -26,6 +26,7 @@
 @import "components/links.less";
 @import "components/buttons.less";
 @import "components/donation-elements.less";
+@import "components/download.less";
 @import "components/faq.less";
 @import "components/forms.less";
 @import "components/headings.less";

helper.py

@@ -213,8 +213,9 @@ def platform_img(ctx, url, optional_attributes=None):
 @jinja2.contextfunction
 def download_thunderbird(ctx, channel='release', dom_id=None,
                          locale=None, force_direct=False,
-                         alt_copy=None, button_color='button-green',
-                         section='header', flex_class=None):
+                         alt_copy=None, button_class=None,
+                         section='header', flex_class=None,
+                         hide_footer_links=False):
     """ Output a "Download Thunderbird" button.
 
     :param ctx: context from calling template.
@@ -223,8 +224,9 @@ def download_thunderbird(ctx, channel='release', dom_id=None,
     :param locale: The locale of the download. Default to locale of request.
     :param force_direct: Force the download URL to be direct.
     :param alt_copy: Specifies alternate copy to use for download buttons.
-    :param button_color: color of download button. Default to 'green'.
+    :param button_class: Class of the button element. Default to `none`, and dynamically picks the class based on the channel.
     :param section: Where the button is rendered in the page. Default to 'header'.
+    :param hide_footer_links: Whether we should hide the footer links (System Requirements, What's New, Privacy Policy) display. Default to 'False'.
     :return: The button html.
     """
     alt_channel = '' if channel == 'release' else channel
@@ -278,9 +280,10 @@ def download_thunderbird(ctx, channel='release', dom_id=None,
         'id': dom_id,
         'channel': alt_channel,
         'alt_copy': alt_copy,
-        'button_color': button_color,
+        'button_class': button_class,
         'section': section,
-        'flex_class': flex_class
+        'flex_class': flex_class,
+        'hide_footer_links': hide_footer_links,
     }
     loader = jinja2.FileSystemLoader(searchpath=settings.WEBSITE_PATH)
     env = jinja2.Environment(loader=loader, extensions=['jinja2.ext.i18n'])

media/svg/circle-info.svg

@@ -7,34 +7,46 @@
 
 {% block page_title_prefix %}{{_('Thunderbird')}} — {% endblock %}
 {% block page_title %}{{ _('Download Thunderbird') }}{% endblock %}
-{% block page_desc %}{{ _('Your download should begin automatically. Didn’t work? Try the button below!') }}{% endblock %}
+{% block page_desc %}{{ _('Thank you for downloading and installing Thunderbird!') }}{% endblock %}
 
 {% block body_id %}thunderbird-download{% endblock %}
 
 {% block header_content %}
-<section class="text-center text-white flex flex-col items-center mb-12 pr-4 pl-4">
-    <h1 class="font-4xl md:font-hero font-thin md:mt-10 mb-8">{{ self.page_title() }}</h1>
-    <p class="font-lg md:font-xl tracking-wide leading-relaxed max-w-xl mb-8 md:mb-16">{{ self.page_desc() }}</p>
-    <div class="tracking-wider">
+<section class="w-full">
+  <div class="retry-download flex bg-white items-center text-black mx-auto max-w-xl shadow-lg h-12 rounded">
+    <div class="retry-text flex items-center text-center">
+      <span class="text-blue mr-2 ml-4">{{ svg('circle-info') }}</span>
+      <p class="font-lg tracking-wide leading-none">{{ _('Your download didn\'t start automatically?') }}</p>
+    </div>
+    <div class="retry-button leading-none text-center mx-auto mb-4 font-md">
       <!-- Hide all the possible channels, so we can later show the one we want. -->
-      <div id="esr" class="hidden">
-      {{ download_thunderbird(force_direct=true, alt_copy=_('Free Download'), flex_class='justify-center') }}
+      <div id="esr" class="download-hidden">
+        <h4 class="channel-title">{{ _('Release Channel') }}</h4>
+        {{ download_thunderbird(force_direct=true, alt_copy=_('Try again'), flex_class='justify-center', button_class='btn-newsletter no-underline', hide_footer_links=True) }}
       </div>
-      <div id="beta" class="hidden">
-      {{ download_thunderbird(force_direct=true, alt_copy=_('Free Download'), channel='beta', flex_class='justify-center') }}
+      <div id="beta" class="download-hidden">
+        <h4 class="channel-title">{{ _('Beta Channel') }}</h4>
+        {{ download_thunderbird(force_direct=true, alt_copy=_('Try again'), channel='beta', flex_class='justify-center', button_class='btn-newsletter no-underline', hide_footer_links=True) }}
       </div>
-      <div id="daily" class="hidden">
-      {{ download_thunderbird(force_direct=true, alt_copy=_('Free Download'), channel='daily', flex_class='justify-center') }}
+      <div id="daily" class="download-hidden">
+        <h4 class="channel-title">{{ _('Daily Channel') }}</h4>
+        {{ download_thunderbird(force_direct=true, alt_copy=_('Try again'), channel='daily', flex_class='justify-center', button_class='btn-newsletter no-underline', hide_footer_links=True) }}
       </div>
     </div>
-  </section>
-  <section class="hidden md:flex max-w-5xl self-center">
-    {{ platform_img('thunderbird/landing/screenshot.png', {'alt': _('Thunderbird screenshot'), 'high-res': True, 'l10n': True, 'platforms': ('windows', 'linux', 'mac')}) }}
-  </section>
+  </div>
+</section>
+  <div class="flex flex-col" style="min-height: 70vh">
+    <section class="text-center text-white mx-auto my-auto">
+      <p class="font-3xl tracking-wide max-w-4xl mb-6"><span class="mb-2 font-hero" style="display: block;">{{ _('Just one more step!') }}</span>{{ _('Finish installing, and start enjoying Thunderbird.') }}</p>
+      <p class="tracking-wider">
+        {{ _('Having trouble? <a class="inline-link" href="%(url)s">Get help with your installation.</a>')|format(url='https://support.mozilla.org/products/thunderbird/install-migrate-and-update') }}
+      </p>
+    </section>
+
+  </div>
 {% endblock %}
 
 {% block content %}
-
 <div itemscope itemtype="http://schema.org/SoftwareApplication">
   <meta itemprop="name" content="{{_('Thunderbird')}}">
   <meta itemprop="description" content="{% block product_desc %}{{ self.page_desc() }}{% endblock %}">

website/download/index.html

@@ -1,8 +1,9 @@
 {# 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/. -#}
-
-{% set button_class = 'btn-'+channel if channel else 'btn-download' %}
+{% if not button_class %}
+  {% set button_class = 'btn-'+channel if channel else 'btn-download' %}
+{% endif %}
 {% if not flex_class %}
   {% set flex_class = 'self-start' if channel or section == 'body' else 'justify-center' %}
 {% endif %}
@@ -66,11 +67,13 @@ <h4>{{ _('Download Thunderbird') }} — {{ locale_name|safe }}</h4>
       </li>
     {% endfor %}
   </ul>
+  {% if not hide_footer_links %}
   <p class="download-other download-other-desktop os_android os_ios os_linux os_linux64 os_osx os_win os_win64 os_winsha1 font-sm mt-0">
     {% if channel != 'daily' %}{# Daily doesn't have an all download page or release notes. #}
       <a href="{{ thunderbird_url('all', channel) }}" class="small-link {% if section == 'body' %} text-blue {% endif %}">{{ _('Systems &amp; Languages') }}</a> &bull;
       <a href="{{ thunderbird_url('releasenotes', channel) }}" class="small-link {% if section == 'body' %} text-blue {% endif %}">{{ _('What’s New') }}</a> &bull;
     {% endif %}
     <a href="{{ url('privacy.notices.thunderbird') }}" class="small-link {% if section == 'body' %} text-blue {% endif %}">{{ _('Privacy') }}</a>
   </p>
+  {% endif %}
 </div>