Port /firefox/speed/ page to Bedrock

apps/mozorg/templates/mozorg/firefox/speed.html

@@ -0,0 +1,199 @@
+{% extends "/mozorg/firefox/base.html" %}
+
+{% block page_title %}How fast is your Firefox?{% endblock %}
+{% block body_id %}firefox-speed{% endblock %}
+
+{% block site_header_nav %}
+{% endblock %}
+
+{% block site_css %}
+  {{ css('firefox_speed') }}
+{% endblock %}
+
+{% block content %}
+
+
+<div id="main-feature">
+  <h1 class="">How fast is your Firefox?</h1>
+  <div class="row">
+    <h4 class="">New Firefox is up to 7 times faster. (That’s a lot!) Check the speedometer to see if yours can keep up.</h4>
+    <div id="download_area">
+      {{ download_button('download', 'upgrade') }}
+      <script src="/media/js/download.js"></script>
+      <script type="text/javascript">
+        offerBestDownloadLink('download');
+      </script>
+      <p><a href="/firefox/central/">Learn more »</a></p>
+    </div>
+  </div>
+</div>
+
+<div id="main-content">
+
+    <div id="gauge">
+        <img src="{{ media('img/firefox/speed/needle.png') }}" alt="" id="needle" />
+        <div id="gauge-slow">
+            Old Firefox = <em>Sadface</em>
+        </div>
+        <div id="gauge-fast">
+            New Firefox = <em>Yay!</em>
+        </div>
+        <div id="gauge-slow-note">
+            <div class="content">
+            <p>That just isn’t going to cut it. Stop browsing in the past and <a href="/<?=$lang?>/firefox/">upgrade now!</a></p>
+            </div>
+        </div>
+        <div id="gauge-fast-note">
+            <div class="content">
+            <h4>Now we’re talking!</h4>
+            <p>Feels better, doesn’t it? Welcome to the future of the Web. It’s nice here.</p>
+            </div>
+        </div>
+    </div>
+    <div id="non-fx">
+        <p id="detected">Hey, looks like you’re using %BROWSER%. Why not grab Firefox and get up to speed.</p>
+        <p id="notdetected">Hey, looks like you’re not using Firefox as your browser. Why not grab Firefox and get up to speed.</p>
+    </div>
+
+    <p id="followup"><em>New Firefox is faster, free (as always), crashes less and protects your privacy more.</em> <a href="/<?=$lang?>/firefox/">Upgrading</a> takes less than a minute and you won’t lose your history or bookmarks. Hooray!</p>
+
+</div>
+
+{% endblock %}
+
+
+{% block js %}
+
+{{ js('firefox_speed') }}
+
+<script>
+$(function() {
+    $('a.close').click(function() {
+        $($(this).attr('href')).slideUp();
+        return false;
+    });
+});
+</script>
+
+<script>
+$(document).ready(function() {
+    var needle = $('#needle');
+    var gauge = $('#gauge');
+    var angle = 0;
+    var latestVersion = parseInt('{{latest_version}}'.split('.')[0], 10);
+    var isFirefox = (/\sFirefox/.test(window.navigator.userAgent));
+
+
+    $.easing.easeInOutSine = function (x, t, b, c, d) {
+        return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
+    };
+
+    $.easing.easeInOutExpo = function (x, t, b, c, d) {
+        if (t==0) return b;
+        if (t==d) return b+c;
+        if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
+        return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
+    };
+
+    function getFirefoxVersion()
+    {
+        var version = 0;
+
+        var matches = /Firefox\/([0-9]+).[0-9]+(?:.[0-9]+)?/.exec(
+            navigator.userAgent
+        );
+
+        if (matches !== null && matches.length > 0) {
+            version = parseInt(matches[1], 10);
+        }
+
+        return version;
+    };
+
+    function rotate(delta, duration, complete, easing)
+    {
+        if (!easing) {
+            easing = 'swing';
+        }
+        angle -= delta;
+        needle.animate({ 'rotate': angle }, duration, easing, complete);
+    };
+
+    waver = null;
+    waverDelta = 1;
+
+    function startWaver()
+    {
+        if (waver === null) {
+            rotate(-waverDelta / 2.0, 280, null, 'easeInOutSine');
+            waver = setInterval(function() {
+                rotate(waverDelta, 280, null, 'easeInOutSine');
+                waverDelta *= -1;
+            }, 300);
+        }
+    };
+
+    function stopWaver()
+    {
+        if (waver) {
+            rotate(waverDelta / 2, 1, null, 'linear');
+            clearInterval(waver);
+            waver = null;
+        }
+    };
+
+    if (isFirefox) {
+        // initial position
+        rotate(-1.5, 10, startWaver, 'linear');
+
+        if (latestVersion > getFirefoxVersion()) {
+            // slow
+            setTimeout(function() {
+                stopWaver();
+                rotate(-29.5, 1000, startWaver, 'easeInOutExpo');
+            }, 1500);
+            $('#gauge-slow-note').delay(3000).fadeIn('slow');
+        } else {
+            // fast
+            setTimeout(function() {
+                stopWaver();
+                rotate(-168, 1500, startWaver, 'easeInOutExpo');
+            }, 1500);
+            $('#gauge-fast-note').delay(3000).fadeIn('slow');
+        }
+    } else {
+        gauge.hide();
+
+        var $nonfx       = $('#non-fx');
+        var $detected    = $('#detected');
+        var $notdetected = $('#notdetected');
+
+        var isSafari = /Safari/.test(window.navigator.userAgent);
+        var isChrome = /Chrome/.test(window.navigator.userAgent);
+        var isIE     = /MSIE/.test(window.navigator.userAgent);
+
+        if (isChrome) {
+            $detected.text(
+                $detected.text().replace(/%BROWSER%/, 'Google Chrome')
+            );
+            $notdetected.hide();
+        } else if (isSafari) {
+            $detected.text(
+                $detected.text().replace(/%BROWSER%/, 'Safari')
+            );
+            $notdetected.hide();
+        } else if (isIE) {
+            $detected.text(
+                $detected.text().replace(/%BROWSER%/, 'Internet Explorer')
+            );
+            $notdetected.hide();
+        } else {
+            $detected.hide();
+        }
+
+        $nonfx.show();
+    }
+});
+</script>
+
+{% endblock %}

apps/mozorg/urls.py

@@ -1,5 +1,5 @@
 from django.conf.urls.defaults import *
-from views import contribute, channel, firefox_performance, firefox_features, firefox_customize, firefox_happy, firefox_security, firefox_technology, button, new, sandstone, geolocation
+from views import contribute, channel, firefox_performance, firefox_features, firefox_customize, firefox_happy, firefox_security, firefox_speed, firefox_technology, button, new, sandstone, geolocation
 
 
 urlpatterns = patterns('',
@@ -15,5 +15,6 @@ urlpatterns = patterns('',
     url(r'^firefox/happy/', firefox_happy, name='mozorg.firefox_happy'),
     url(r'^firefox/performance/', firefox_performance, name='mozorg.firefox_performance'),
     url(r'^firefox/security/', firefox_security, name='mozorg.firefox_security'),
+    url(r'^firefox/speed/', firefox_speed, name='mozorg.firefox_speed'),
     url(r'^firefox/technology/', firefox_technology, name='mozorg.firefox_technology'),
 )

apps/mozorg/views.py

@@ -1,5 +1,6 @@
 import l10n_utils
 from django.conf import settings
+from product_details import product_details
 
 def index(request):
     return l10n_utils.render(request, "mozorg/index.html")
@@ -22,6 +23,9 @@ def firefox_technology(request):
 def firefox_security(request):
     return l10n_utils.render(request, "mozorg/firefox/security.html")
 
+def firefox_speed(request):
+    return l10n_utils.render(request, "mozorg/firefox/speed.html", {'latest_version': product_details.firefox_versions['LATEST_FIREFOX_DEVEL_VERSION']})
+
 def firefox_performance(request):
     return l10n_utils.render(request, "mozorg/firefox/performance.html")
 

media/css/firefox/speed.less

@@ -0,0 +1,154 @@
+@import "template.less";
+
+
+#main-feature .download-button-small {
+    float: right;
+    position: static;
+}
+
+
+#firefox-speed #learn-more {
+    clear: right;
+    margin-top: 7px;
+    font-style: italic;
+    margin-left: 30px;
+    font-size: 13px;
+    text-align: center;
+}
+
+#firefox-speed #main-content {
+    clear: both;
+}
+
+#firefox-speed #main-feature h4 {
+    .span(6);
+}
+
+#firefox-speed #main-feature #download_area {
+    .span(4);
+    p {
+        margin-top: @baseLine;
+        text-align: right;
+        clear: right;
+    }
+}
+
+
+#firefox-speed #non-fx {
+    display: none;
+}
+
+#firefox-speed #followup {
+    margin: 30px 100px;
+    text-align: center;
+    font-size: 16px;
+    font-style: normal;
+}
+
+#firefox-speed #followup em {
+    display: block;
+    font-style: normal;
+}
+
+/* }}} */
+/* {{{ Gauge */
+
+#gauge {
+    background: url(/media/img/firefox/speed/gauge-bg.jpg) 50% 0 no-repeat;
+    height: 255px;
+    width: 800px;
+    margin: 0 auto;
+    position: relative;
+}
+
+#gauge-fast,
+#gauge-slow {
+    position: absolute;
+    width: 180px;
+    top: 230px;
+    color: #ef3b24;
+    font-size: 18px;
+    .open-sans-light;
+}
+
+#gauge-slow {
+    left: 100px;
+    text-align: right;
+    color: #005787;
+}
+
+#gauge-fast {
+    left: 520px;
+}
+
+#gauge-slow-note p,
+#gauge-fast-note p {
+    margin: 0;
+    line-height: 1.3;
+}
+
+#gauge-slow-note h4,
+#gauge-fast-note h4 {
+}
+
+#gauge-fast-note,
+#gauge-slow-note {
+    display: none;
+    position: absolute;
+    width: 800px;
+    height: 255px;
+    top: 0;
+    left: 0;
+    p {
+        text-style: italic;
+    }
+}
+
+#gauge-slow-note {
+    background: url(/media/img/firefox/speed/line-l.png) 63px 70px no-repeat;
+}
+
+#gauge-slow-note .content {
+    width: 190px;
+    position: absolute;
+    bottom: 190px;
+    left: 10px;
+}
+
+#gauge-fast-note {
+    background: url(/media/img/firefox/speed/line.png) 610px 115px no-repeat;
+}
+
+#gauge-fast-note .content {
+    position: absolute;
+    width: 190px;
+    left: auto;
+    right: 0px;
+    bottom: 145px;
+}
+
+
+#needle {
+    -webkit-transform-origin: 173px 30px;
+    -moz-transform-origin: 173px 30px;
+    -o-transform-origin: 173px 30px;
+    transform-origin: 173px 30px;
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    transform: rotate(0);
+    x-moz-transition: all 500ms linear;
+    position: absolute;
+    top: 181px;
+    left: 227px;
+}
+
+/* }}} */
+/* {{{ Non Firefox fallback*/
+
+#non-fx {
+    margin: 0 160px;
+    font-size: 22px;
+}
+
+/* }}} */

settings/base.py

@@ -78,6 +78,9 @@ MINIFY_BUNDLES = {
         'firefox_security': (
             'css/firefox/security.less',
         ),
+        'firefox_speed': (
+            'css/firefox/speed.less',
+        ),
         'firefox_technology': (
             'css/firefox/technology.less',
             'css/firefox/technology-demos.css',
@@ -133,6 +136,12 @@ MINIFY_BUNDLES = {
             'js/firefox/features.js',
         ),
         'firefox_happy': (
+            'js/libs/jquery-1.4.4.min.js',
+            'js/libs/jquery-css-transform.js',
+            'js/libs/jquery-animate-css-rotate-scale.js',
+        ),
+        'firefox_speed': (
+            'js/libs/jquery-1.4.4.min.js',
             'js/libs/jquery-css-transform.js',
             'js/libs/jquery-animate-css-rotate-scale.js',
         ),