[fix bug 1122519] Remove UA detection and use feature detect for CSS line animations

Author: alexgibson

bedrock/settings/base.py

@@ -236,6 +236,7 @@ def JINJA_CONFIG():
         'firefox_desktop': (
             'css/sandstone/sandstone-resp.less',
             'css/firefox/desktop/intro-anim.less',
+            'css/base/svg-animation-check.less',
             'css/firefox/desktop/index.less',
         ),
         'firefox_desktop_fast': (
@@ -314,6 +315,7 @@ def JINJA_CONFIG():
             'css/sandstone/sandstone-resp.less',
             'css/firefox/menu-resp.less',
             'css/base/mozilla-modal.less',
+            'css/base/svg-animation-check.less',
             'css/firefox/hello/index.less',
         ),
         'firefox_new': (
@@ -725,6 +727,7 @@ def JINJA_CONFIG():
             'js/libs/jquery.waypoints.min.js',
             'js/firefox/desktop/common.js',
             'js/firefox/desktop/speed-graph.js',
+            'js/base/svg-animation-check.js',
             'js/firefox/desktop/intro-anim.js',
             'js/firefox/desktop/index.js',
         ),
@@ -820,8 +823,8 @@ def JINJA_CONFIG():
         ),
         'firefox_hello': (
             'js/firefox/australis/australis-uitour.js',
-            'js/libs/modernizr.custom.cssanimations.js',
             'js/base/mozilla-modal.js',
+            'js/base/svg-animation-check.js',
             'js/firefox/hello/index.js',
         ),
         'firefox_hello_ie9': (

media/css/base/svg-animation-check.less

@@ -0,0 +1,35 @@
+// 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/.
+
+#svg-test {
+    visibility: hidden;
+    height: 0;
+    width: 0;
+    overflow: hidden;
+}
+
+#svg-test-circle {
+    stroke-dasharray: 117;
+    stroke-dashoffset: 117;
+    -webkit-animation: svg-dash-test 0.1s linear forwards;
+    animation: svg-dash-test 0.1s linear forwards;
+}
+
+@-webkit-keyframes svg-dash-test {
+    0% {
+        stroke-dashoffset: 0;
+    }
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
+
+@keyframes svg-dash-test {
+    0% {
+        stroke-dashoffset: 0;
+    }
+    100% {
+        stroke-dashoffset: 0;
+    }
+}

media/js/base/svg-animation-check.js

@@ -0,0 +1,81 @@
+/* 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/. */
+
+// create namespace
+if (typeof Mozilla == 'undefined') {
+    var Mozilla = {};
+}
+
+/**
+ * Feature detect for animating SVG line paths using CSS
+ * Detection:
+ * 1.) browser supports inline SVG
+ * 2.) browser supports CSS animations
+ * 3.) browser can animate stroke-dashoffset via a CSS keyframe animation
+ *
+ * Required less file: 'css/base/svg-animation-check.less'
+ */
+Mozilla.SVGAnimCheck = function() {
+    if (!Mozilla.SVGAnimCheck.supportsInlineSVG() || !Mozilla.SVGAnimCheck.supportsCSSAnimations()) {
+        return false;
+    } else {
+        return Mozilla.SVGAnimCheck.supportsCSSAnimatedPaths();
+    }
+};
+
+/**
+ * Detect CSS animation support (only checks for webkit and unprefixed)
+ */
+Mozilla.SVGAnimCheck.supportsCSSAnimations = function() {
+    var div = document.createElement('div');
+
+    // note we're only checking for Webkit vendor prefix as all other browsers
+    // now support unprefixed CSS animations
+    if (div.style.animationName !== undefined || div.style.WebkitAnimationName !== undefined) {
+        return true;
+    }
+
+    return false;
+};
+
+/**
+ * Detect support for inline SVG elements.
+ */
+Mozilla.SVGAnimCheck.supportsInlineSVG = function() {
+    var div = document.createElement('div');
+    div.innerHTML = '<svg/>';
+    return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
+};
+
+/**
+ * Try to animate stroke-dashoffset using CSS and then get the computed value to see if it has changed.
+ */
+Mozilla.SVGAnimCheck.supportsCSSAnimatedPaths = function() {
+    var div = document.createElement('div');
+    var circle;
+    var offset;
+
+    div.id = 'svg-test';
+    div.innerHTML = '<svg role="presentation" xmlns="http://www.w3.org/2000/svg" version="1.1"><path id="svg-test-circle" fill-opacity="0" d="M33.665530413296274,58.589001490321166C43.94406883919239,58.59306994020939,52.274,66.92651000976564,52.274,77.205C52.274,87.486,43.939,95.821,33.658,95.821C23.377000000000002,95.821,15.042000000000002,87.48599999999999,15.042000000000002,77.205C15.041,66.923,23.376,58.589,33.658,58.589" stroke="#5d7489"></path></svg>';
+    document.documentElement.appendChild(div);
+
+    // try/catch is maybe a little over cautious
+    // but better to show the fallback than throw an exception
+    try {
+        circle = document.getElementById('svg-test-circle');
+        offset = window.getComputedStyle(circle).getPropertyValue('stroke-dashoffset');
+
+        div.parentNode.removeChild(div);
+
+        // webkit & blink return a string with px value
+        if (offset.replace(/\D/g, '') === '0') {
+            return true;
+        }
+        return false;
+    } catch(e) {
+        div.parentNode.removeChild(div);
+        return false;
+    }
+};
+

media/js/firefox/desktop/intro-anim.js

@@ -2,26 +2,16 @@
  * 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($) {
+(function(Mozilla, $) {
     'use strict';
 
-    var isIE = /MSIE/.test(navigator.userAgent);
-    var isTrident = /Trident/.test(navigator.userAgent);
-    var isOldOpera= /Presto/.test(navigator.userAgent);
-
     function cutsTheMustard() {
         // Bug (1083079) fixed but effects Firefox 35
         if (window.isFirefox() && window.getFirefoxMasterVersion() === 35 && $('html').hasClass('osx')) {
             return false;
         }
 
-        return supportsInlineSVG() && !isIE && !isTrident && !isOldOpera;
-    }
-
-    function supportsInlineSVG () {
-        var div = document.createElement('div');
-        div.innerHTML = '<svg/>';
-        return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
+        return Mozilla.SVGAnimCheck();
     }
 
     if (!cutsTheMustard()) {
@@ -34,4 +24,4 @@
         });
     }
 
-})(window.jQuery);
+})(Mozilla, window.jQuery);

media/js/firefox/hello/index.js

@@ -2,7 +2,7 @@
 * 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(w, $, Modernizr) {
+;(function(Mozilla, w, $) {
     'use strict';
 
     var $w = $(w);
@@ -16,30 +16,17 @@
     var supportsHTML5Video = !!document.createElement('video').canPlayType;
     var isWideViewport = $w.width() >= 740;
     var mqIsWide;
-    var isIE = /MSIE/.test(navigator.userAgent);
-    var isTrident = /Trident/.test(navigator.userAgent);
-    var isOldOpera= /Presto/.test(navigator.userAgent);
-
-    var supportsSVGAnimation = function() {
-        return supportsInlineSVG() && !isIE && !isTrident && !isOldOpera;
-    };
-
-    var supportsInlineSVG = function() {
-        var div = document.createElement('div');
-        div.innerHTML = '<svg/>';
-        return (div.firstChild && div.firstChild.namespaceURI) === 'http://www.w3.org/2000/svg';
-    };
 
     if (isWideViewport) {
-        if (supportsSVGAnimation()) {
+        if (Mozilla.SVGAnimCheck()) {
             $w.on('load', function() {
                 $animationStage.addClass('animate wide');
             });
         } else {
             $('body').addClass('no-animation');
         }
     } else {
-        if (Modernizr.cssanimations) {
+        if (Mozilla.SVGAnimCheck.supportsCSSAnimations()) {
             $w.on('load', function() {
                 $animationStage.addClass('animate mini');
             });
@@ -199,4 +186,4 @@
     $video.on('play', function() {
         w.gaTrack(['_trackEvent', '/hello interactions', 'productPage', 'PlayVideo']);
     });
-})(window, window.jQuery, window.Modernizr);
+})(Mozilla, window, window.jQuery);