[fix bug 1458340] Add FB videochat funnelcake banner to /firefox/.

bedrock/firefox/templates/firefox/home.html

@@ -19,10 +19,39 @@
 
 {% block page_css %}
   {% stylesheet 'firefox-home' %}
+  {% if switch('firefox_home_fbvideochat_funnelcake', ['en-US']) %}
+    {% stylesheet 'firefox-home-fbvideochat-funnelcake' %}
+  {% endif %}
 {% endblock %}
 
 {% block body_id %}firefox-home{% endblock %}
 
+{% block site_header %}
+  {% if switch('firefox_home_fbvideochat_funnelcake', ['en-US']) %}
+    <div id="fbvideochat-banner" class="fbvideochat-banner">
+      <div class="content">
+        <div id="fbvideochat-close" class="fbvideochat-close"><button type="button"><span>Close</span></button></div>
+        <div class="header-content-wrapper">
+          <div class="header-content">
+            <p>Facebook Video Messenger calls are easy with</p>
+
+            <img class="banner-logo delay-load" src="{{ static('img/placeholder.png') }}" data-src="{{ static('img/logos/firefox/logo-quantum-wordmark-large.png') }}" data-srcset="{{ static('img/logos/firefox/logo-quantum-wordmark-large-high-res.png') }}" alt="" width="185" height="69" />
+
+            {{ download_firefox(dom_id='download-fbvideochat', alt_copy=_('Download now'), download_location='banner cta') }}
+          </div>
+          <div class="header-image-wrapper">
+            <figure class="header-image">
+              <img class="delay-load" src="{{ static('img/placeholder.png') }}" data-src="{{ static('img/firefox/home/fbvideochat-screenshot.jpg') }}" data-srcset="{{ static('img/firefox/home/fbvideochat-screenshot-high-res.jpg') }}" alt="" width="810" height="433" />
+              <figcaption>Launch your video experience by downloading Firefox.</figcaption>
+            </figure>
+          </div>{#-- /.header-image-wrapper --#}
+        </div>{#-- /.header-content-wrapper --#}
+      </div>{#-- /.content --#}
+    </div>{#-- /.fbvideochat-banner --#}
+  {% endif %}
+  {{ super() }}
+{% endblock %}
+
 {% block content %}
 {% with current='desktop' %}
   {% include 'firefox/includes/hub/sub-nav.html' %}
@@ -411,4 +440,7 @@
 
 {% block js %}
   {% javascript 'firefox-home' %}
+  {% if switch('firefox_home_fbvideochat_funnelcake', ['en-US']) %}
+    {% javascript 'firefox-home-fbvideochat-funnelcake' %}
+  {% endif %}
 {% endblock %}

bedrock/mozorg/templates/mozorg/home/home-a.html

@@ -53,7 +53,7 @@
 <section class="card {% if class %}{{ class }}{% endif %} {% if video_url %}has-video{% endif %}">
   <a class="card-block-link" href="{{ link_url }}" data-link-name="{{ ga_title }}" data-link-type="link">
     <div class="card-media-wrapper {% if aspect_ratio %}{{ aspect_ratio }}{% endif %}">
-      {{ lazy_img(image_url=image_url, include_highres_image=include_highres_image, placeholder_url='home/2018/placeholder.png', optional_attributes={'class': 'card-image'}) }}
+      {{ lazy_img(image_url=image_url, include_highres_image=include_highres_image, placeholder_url='placeholder.png', optional_attributes={'class': 'card-image'}) }}
     </div>
     <div class="card-content">
     {% if tag_label %}

bedrock/settings/static_media.py

@@ -286,6 +286,12 @@ PIPELINE_CSS = {
         ),
         'output_filename': 'css/firefox-home-bundle.css',
     },
+    'firefox-home-fbvideochat-funnelcake': {
+        'source_filenames': (
+            'css/firefox/home-fbvideochat-funnelcake.scss',
+        ),
+        'output_filename': 'css/firefox-home-fbvideochat-funnelcake-bundle.css',
+    },
     'nightly_firstrun': {
         'source_filenames': (
             'css/firefox/nightly_firstrun.less',
@@ -1069,6 +1075,12 @@ PIPELINE_JS = {
         ),
         'output_filename': 'js/firefox-home-bundle.js',
     },
+    'firefox-home-fbvideochat-funnelcake': {
+        'source_filenames': (
+            'js/firefox/home/fbvideochat-funnelcake.js',
+        ),
+        'output_filename': 'js/firefox-home-fbvideochat-funnelcake-bundle.js',
+    },
     'firefox_new_scene1': {
         'source_filenames': (
             'js/base/mozilla-modal.js',

docs/analytics.rst

@@ -84,3 +84,37 @@ For all download buttons, add these data attributes:
 |   data-download-version  |'standard', 'developer', 'beta' |
 +--------------------------+--------------------------------+
 
+For all conditional banners, add the following calls.
+
+When a banner is shown:
+
+.. code-block:: javascript
+
+    dataLayer.push({
+        'eLabel': 'Banner Impression',
+        'data-banner-name': '<banner name>', //ex. Fb-Video-Compat
+        'data-banner-impression': '1',
+        'event': 'non-interaction'
+    });
+
+When an element in the banner is clicked:
+
+.. code-block:: javascript
+
+    dataLayer.push({
+        'eLabel': 'Banner Clickthrough',
+        'data-banner-name': '<banner name>', //ex. Fb-Video-Compat
+        'data-banner-click': '1',
+        'event': 'in-page-interaction'
+    });
+
+When a banner is dismissed:
+
+.. code-block:: javascript
+
+    dataLayer.push({
+        'eLabel': 'Banner Dismissal',
+        'data-banner-name': '<banner name>', //ex. Fb-Video-Compat
+        'data-banner-dismissal': '1',
+        'event': 'in-page-interaction'
+    });

media/css/firefox/home-fbvideochat-funnelcake.scss

@@ -0,0 +1,127 @@
+// 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/.
+
+@import '../pebbles/includes/lib';
+
+.fbvideochat-banner {
+    background: #f5f5f5; // fallback for old IE
+    @include gradient-vertical($start-color: #fff, $end-color: #f5f5f5);
+    display: none;
+    text-align: center;
+
+    .fbvideochat-close {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+
+        button {
+            background: transparent url('/media/img/notification/close-dark.svg') top center no-repeat;
+            border: none;
+            display: block;
+            height: 18px;
+            width: 18px;
+        }
+
+        span {
+            @include visually-hidden();
+        }
+    }
+
+    .header-content {
+        margin-bottom: 20px;
+        padding-top: 20px;
+
+        p {
+            @include font-size-level3;
+            margin: 0;
+        }
+    }
+
+    .banner-logo {
+        display: block;
+        margin: 20px auto;
+    }
+
+    .header-image-wrapper figcaption {
+        margin-top: 10px;
+    }
+
+    // ensure placeholder image doesn't display too large
+    img.delay-load {
+        height: 1px;
+        width: 1px;
+    }
+
+    .fx-privacy-link {
+        a:active,
+        a:focus,
+        a:hover,
+        a:link,
+        a:visited {
+            color: #000;
+        }
+    }
+
+    @media #{$mq-tablet} {
+        .fbvideochat-close {
+            right: 20px;
+            top: 20px;
+        }
+    }
+
+    @media #{$mq-desktop} {
+        text-align: left;
+
+        .content {
+            padding-bottom: 40px;
+            padding-top: 40px;
+        }
+
+        .header-content {
+            float: left;
+            width: 360px;
+        }
+
+        .banner-logo {
+            margin: 20px 0 40px;
+        }
+
+        .header-image-wrapper {
+            float: left;
+            padding-left: 40px;
+            text-align: center;
+            width: calc(100% - 400px);
+        }
+
+        .header-image img {
+            display: block;
+        }
+    }
+
+    @media #{$mq-desktop-wide} {
+        .header-content {
+            padding-top: 20px;
+        }
+
+        .header-image-wrapper {
+            width: 810px;
+        }
+    }
+}
+
+@supports (display: flex) {
+    .fbvideochat-banner .header-content-wrapper {
+        @media #{$mq-desktop} {
+            display: flex;
+
+            .header-image-wrapper {
+                align-self: center;
+            }
+        }
+
+        @media #{$mq-desktop-wide} {
+            display: block;
+        }
+    }
+}

media/js/firefox/home/fbvideochat-funnelcake.js

@@ -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 http://mozilla.org/MPL/2.0/. */
+
+(function ($, Mozilla, Waypoint, dataLayer) {
+    'use strict';
+
+    var $fbVideochatBanner;
+
+    var ieRegex = /MSIE|Trident|Edge/i;
+    var isIE = ieRegex.test(window.navigator.userAgent);
+
+    var fbRegex = /facebook\.com/i;
+    var isFromFb = fbRegex.test(document.referrer);
+
+    var hasCookies = typeof Mozilla.Cookies !== 'undefined' && Mozilla.Cookies.enabled();
+
+    if (hasCookies && window.site.platform === 'windows' && isFromFb && isIE) {
+        // make sure visitor hasn't previously dismissed the banner
+        var wasDismissed = Mozilla.Cookies.getItem('fbvideochat-banner-dismiss');
+
+        if (wasDismissed === null) {
+            $fbVideochatBanner = $('#fbvideochat-banner');
+
+            // allow browser to laod the images
+            $('.delay-load').each(function(i, img) {
+                var $img = $(img);
+                $img.attr('src', $img.data('src'));
+                $img.attr('srcset', $img.data('srcset') + ' 1.5x');
+                $img.removeAttr('data-src data-srcset').removeClass('delay-load');
+            });
+
+            // append funnelcake ID to Windows download links
+            $('#download-fbvideochat').find('.os_win a, .os_win64 a').each(function(i, aTag) {
+                aTag.href += '?f=134';
+            });
+
+            $('#fbvideochat-close').one('click', function() {
+                // don't show the banner again for 7 days
+                var d = new Date();
+                d.setTime(d.getTime() + (7 * 24 * 60 * 60 * 1000));
+                Mozilla.Cookies.setItem('fbvideochat-banner-dismiss', true, d.toUTCString(), '/');
+
+                $fbVideochatBanner.slideUp('fast', function() {
+                    // reset trigger point of sub nav
+                    Waypoint.refreshAll();
+
+                    dataLayer.push({
+                        'eLabel': 'Banner Dismissal',
+                        'data-banner-name': 'facebook-video-chat',
+                        'data-banner-dismissal': '1',
+                        'event': 'in-page-interaction'
+                    });
+                });
+            });
+
+            // slight delay before sliding down the banner
+            setTimeout(function() {
+                $fbVideochatBanner.slideDown(400, function() {
+                    // reset trigger point of sub nav
+                    Waypoint.refreshAll();
+
+                    dataLayer.push({
+                        'eLabel': 'Banner Impression',
+                        'data-banner-name': 'facebook-video-chat',
+                        'data-banner-impression': '1',
+                        'event': 'non-interaction'
+                    });
+                });
+            }, 500);
+        }
+    }
+})(window.jQuery, window.Mozilla, window.Waypoint, window.dataLayer || []);