Rough A/B interaction tests for new firefox page. Two new URLs: /fire…

…fox/new-a & /firefox/new-b. Download button disabled temporarily to ease testing. Bug 814203

apps/firefox/templates/firefox/new-a.html

@@ -0,0 +1,66 @@
+{% extends "/firefox/base-resp.html" %}
+
+{% block page_title %}Free Download{% endblock %}
+{% block body_id %}firefox-new-a{% endblock %}
+
+{% block site_header_nav %}{% endblock %}
+{% block site_header_logo %}
+  <h2><a href="{{ url('mozorg.home') }}"><img src="/media/img/firefox/new/header-firefox.png" alt="Firefox for desktop" /></a></h2>
+{% endblock %}
+
+{% block site_css %}
+  {{ css('firefox_new_test') }}
+{% endblock %}
+
+{% block content %}
+
+<div id="main-feature">
+  <div class="row">
+    <h1 class="large">{{_('Different by design')}}</h1>
+  </div>
+</div>
+
+<div id="firefox-container">
+  <!-- shown at page load -->
+  <div id="features-download" class="container">
+    <ul id="features">
+      <li>{{_('Proudly <br />non-profit')}}</li>
+      <li>{{_('Innovating<br /> for you')}}</li>
+      <li>{{_('Fast, flexible,<br /> secure')}}</li>
+    </ul>
+
+    {{ download_button('download', 'large', force_direct=true) }}
+
+    {{ platform_img('img/firefox/new/browser.png', alt='Firefox screenshot', id='firefox-screenshot') }}
+  </div>
+
+  <!-- shown after dl btn click -->
+  <div id="dl-feedback">
+    <p>
+      {{_("Thanks for downloading Firefox! As a non-profit, we're free to innovate on your behalf without any pressure to compromise. You're going to love the difference.")}}
+    </p>
+
+    <ul class="installation">
+      <li>
+        <img src="{{ media('img/firefox/new/install1-mac.png') }}" />
+        {{_('Your download should begin automatically. If not, click here.')}}
+      </li>
+      <li>
+        <img src="{{ media('img/firefox/new/install2-mac.png') }}" />
+        {{_('Drag the Firefox icon into your Applications folder as seen above.')}}
+      </li>
+      <li>
+        <img src="{{ media('img/firefox/new/install3-mac.png') }}" />
+        {{_("Drag the Firefox icon into your dock so it's always there. Enjoy!")}}
+      </li>
+    </ul>
+  </div>
+</div>
+
+{% endblock %}
+
+{% block email_form %}{% endblock %}
+
+{% block js %}
+  {{ js('firefox_new') }}
+{% endblock  %}

apps/firefox/templates/firefox/new-b.html

@@ -0,0 +1,67 @@
+{% extends "/firefox/base-resp.html" %}
+
+{% block page_title %}Free Download{% endblock %}
+{% block body_id %}firefox-new-b{% endblock %}
+
+{% block site_header_nav %}{% endblock %}
+{% block site_header_logo %}
+  <h2><a href="{{ url('mozorg.home') }}"><img src="/media/img/firefox/new/header-firefox.png" alt="Firefox for desktop" /></a></h2>
+{% endblock %}
+
+{% block site_css %}
+  {{ css('firefox_new_test') }}
+{% endblock %}
+
+{% block content %}
+
+<div id="main-feature">
+  <div class="row">
+    <h1 class="large">{{_('Different by design')}}</h1>
+  </div>
+</div>
+
+<div id="firefox-container">
+  <!-- shown at page load -->
+  <div id="features-download" class="container">
+    <ul id="features">
+      <li>{{_('Proudly <br />non-profit')}}</li>
+      <li>{{_('Innovating<br /> for you')}}</li>
+      <li>{{_('Fast, flexible,<br /> secure')}}</li>
+    </ul>
+
+    {{ download_button('download', 'large', force_direct=true) }}
+  </div>
+
+  <div id="dl-feedback">
+    <h3>{{_('Installing Firefox is easy!')}}</h3>
+    <ul class="installation">
+      <li>
+        <img src="{{ media('img/firefox/new/install1-mac.png') }}" />
+        {{_('Your download should begin automatically. If not, click here.')}}
+      </li>
+      <li>
+        <img src="{{ media('img/firefox/new/install2-mac.png') }}" />
+        {{_('Drag the Firefox icon into your Applications folder as seen above.')}}
+      </li>
+      <li>
+        <img src="{{ media('img/firefox/new/install3-mac.png') }}" />
+        {{_("Drag the Firefox icon into your dock so it's always there. Enjoy!")}}
+      </li>
+    </ul>
+
+    <p>
+      {{_("Thanks for downloading Firefox! As a non-profit, we're free to innovate on your behalf without any pressure to compromise. You're going to love the difference.")}}
+    </p>
+
+  </div>
+
+  {{ platform_img('img/firefox/new/browser.png', alt='Firefox screenshot', id='firefox-screenshot') }}
+</div>
+
+{% endblock %}
+
+{% block email_form %}{% endblock %}
+
+{% block js %}
+  {{ js('firefox_new') }}
+{% endblock  %}

apps/firefox/urls.py

@@ -32,6 +32,8 @@
     url('^firefox/sms/$', views.sms_send, name='firefox.sms'),
     page('firefox/sms/sent', 'firefox/mobile/sms-thankyou.html'),
     page('firefox/new', 'firefox/new.html'),
+    page('firefox/new-a', 'firefox/new-a.html'),
+    page('firefox/new-b', 'firefox/new-b.html'),
     page('firefox/organizations/faq', 'firefox/organizations/faq.html'),
     page('firefox/organizations', 'firefox/organizations/organizations.html'),
     page('firefox/performance', 'firefox/performance.html'),

media/css/firefox/new-test.less

@@ -0,0 +1,120 @@
+@import "template-resp.less";
+
+// COMMON A/B
+#main-feature {
+    margin-top: 30px;
+    h1 {
+        text-align: center;
+        font-size: 80px;
+    }
+}
+
+#features {
+    float: left;
+    width: 492px;
+    margin: 0 83px 0 62px;
+    padding: 0;
+    list-style-type: none;
+    .clearfix;
+    li {
+        float: left;
+        width: 164px;
+        height: 80px;
+        text-align: center;
+        padding-top: 20px;
+        margin-left: 0;
+        font-size: 22px;
+        line-height: 100%;
+        .open-sans-light;
+        background: url(/media/img/firefox/new/features-divider.png) right top no-repeat;
+        &:last-child {
+            background: none;
+        }
+    }
+}
+
+#download {
+    float: left;
+}
+
+.download-button {
+    .download-link {
+        .download-content {
+            background: none;
+            padding-left: 72px;
+        }
+        .download-title {
+            .open-sans;
+            font-size: 28px;
+            background: url(/media/img/sandstone/buttons/arrow-large-inverted.png) no-repeat 100% 0;
+        }
+    }
+    small.download-other {
+        a:link, a:visited {
+            color: #85c4e3;
+        }
+    }
+}
+
+#firefox-screenshot {
+    margin-top: 50px;
+}
+
+#dl-feedback {
+    display: none;
+    p {
+        background: url(/media/img/firefox/new/thankyou-check.png) left top no-repeat;
+        padding: 0 0 0 35px;
+        margin: 0 140px ;
+        color: #6ca52a;
+        font-style: italic;
+        font-size: 18px;
+        .open-sans-light;
+    }
+}
+
+.installation {
+    margin: 0 auto;
+    padding: 0;
+    width: 900px;
+    display: block;
+    list-style-type: none;
+    .clearfix;
+    li {
+        float: left;
+        width: 232px;
+        padding: 0 34px;
+        margin: 0;
+        text-align: center;
+        color: #666;
+        font-style: italic;
+        img {
+            display: block;
+            margin-bottom: 5px;
+        }
+    }
+}
+
+// A
+#firefox-new-a {
+    .installation {
+        margin-top: 40px;
+    }
+    #firefox-container {
+        height: 340px;
+        overflow: hidden;
+    }
+}
+
+// B
+#firefox-new-b {
+    #dl-feedback {
+        margin-top: 60px;
+        h3 {
+            text-align: center;
+        }
+    }
+    .installation {
+        margin: 26px auto 40px;
+    }
+}

media/css/firefox/new.less

@@ -248,4 +248,4 @@ ul#benefits li span {
         width: @widthMobileLandscape - (@gridGutterWidth * 2);
     }
 
-}
+}

media/js/firefox/new.js

@@ -0,0 +1,30 @@
+var Mozilla = window.Mozilla || {};
+Mozilla.Firefox = window.Mozilla.Firefox || {};
+
+Mozilla.Firefox.New = (function() {
+	"use strict";
+
+	var _init = function() {
+		$('#firefox-new-a .download-firefox').on('click', function(e) {
+			e.preventDefault();
+
+			$('#features-download').fadeOut('fast', function() {
+				$('#dl-feedback').fadeIn('fast');
+			});
+		});
+
+		$('#firefox-new-b .download-firefox').on('click', function(e) {
+			e.preventDefault();
+
+			$('#dl-feedback').slideDown('normal');
+		});
+	};
+
+	return {
+		init: function() { _init(); }
+	};
+})();
+
+$(function() {
+	Mozilla.Firefox.New.init();
+});

settings/base.py

@@ -161,6 +161,9 @@ def JINJA_CONFIG():
         'firefox_new': (
             'css/firefox/new.less',
         ),
+        'firefox_new_test': (
+            'css/firefox/new-test.less',
+        ),
         'firefox_organizations': (
             'css/firefox/organizations.less',
         ),
@@ -317,6 +320,9 @@ def JINJA_CONFIG():
             'js/libs/jquery-1.4.4.min.js',
             'js/firefox/happy.js',
         ),
+        'firefox_new': (
+            'js/firefox/new.js',
+        ),
         'firefox_platforms': (
             'js/mozilla-expanders.js',
         ),