Use Modernizr to check for browser compatibility

Add a CompatibilityPage which is shown for incompatible clients. If they
continue on regardless, proceed as if it never happened.

.modernizr.json

@@ -0,0 +1,12 @@
+{
+  "minify": true,
+  "classPrefix": "modernizr_",
+  "options": [
+    "setClasses"
+  ],
+  "feature-detects": [
+    "test/css/displaytable",
+    "test/css/flexbox",
+    "test/es5/specification"
+  ]
+}

package.json

@@ -11,6 +11,7 @@
   "style": "bundle.css",
   "scripts": {
     "reskindex": "reskindex vector -h src/skins/vector/header",
+    "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
     "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/bundle.css -c uglifycss --no-watch",
     "build:compile": "babel --source-maps -d lib src",
     "build:bundle": "NODE_ENV=production webpack -p lib/vector/index.js vector/bundle.js",
@@ -29,6 +30,7 @@
     "linkifyjs": "^2.0.0-beta.4",
     "matrix-js-sdk": "^0.2.2",
     "matrix-react-sdk": "^0.0.1",
+    "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^0.13.3",
     "react-loader": "^1.4.0"

src/skins/vector/css/pages/CompatibilityPage.css

@@ -0,0 +1,19 @@
+.mx_CompatibilityPage {
+    width: 100%;
+    height: 100%;
+    background-color: #e55;
+}
+
+.mx_CompatibilityPage_box {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 500px;
+    height: 300px;
+    border: 1px solid;
+    padding: 10px;
+    background-color: #fcc;
+}

src/skins/vector/views/pages/CompatibilityPage.js

@@ -0,0 +1,58 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+
+module.exports = React.createClass({
+    displayName: 'CompatibilityPage',
+    propTypes: {
+        onAccept: React.PropTypes.func
+    },
+
+    getDefaultProps: function() {
+        return {
+            onAccept: function() {} // NOP
+        };
+    },
+
+    onAccept: function() {
+        this.props.onAccept();
+    },
+
+    render: function() {
+
+        return (
+        <div className="mx_CompatibilityPage">
+            <div className="mx_CompatibilityPage_box">
+                <p>Sorry, your browser is <b>not</b> able to run Vector.</p>
+                <p>
+                Buttons and images may appear out of place, communication may
+                not be possible and all manner of chaos may be unleashed.
+                </p>
+                <p>
+                Though if you like taking risks with your life, you can still try it
+                out by clicking that you understand the risks involved.
+                </p>
+                <button onClick={this.onAccept}>
+                    I understand the risks and wish to continue
+                </button>
+            </div>
+        </div>
+        );
+    }
+});

src/vector/index.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 'use strict';
 
+var RunModernizrTests = require("./modernizr"); // this side-effects a global
 var React = require("react");
 var sdk = require("matrix-react-sdk");
 sdk.loadSkin(require('../skins/vector/skindex'));
@@ -25,6 +26,33 @@ var qs = require("querystring");
 
 var lastLocationHashSet = null;
 
+function checkBrowserFeatures(featureList) {
+    if (!window.Modernizr) {
+        console.error("Cannot check features - Modernizr global is missing.");
+        return false;
+    }
+    var featureComplete = true;
+    for (var i = 0; i < featureList.length; i++) {
+        if (window.Modernizr[featureList[i]] === undefined) {
+            console.error(
+                "Looked for feature '%s' but Modernizr has no results for this. " +
+                "Has it been configured correctly?", featureList[i]
+            );
+            return false;
+        }
+        if (window.Modernizr[featureList[i]] === false) {
+            console.error("Browser missing feature: '%s'", featureList[i]);
+            // toggle flag rather than return early so we log all missing features
+            // rather than just the first.
+            featureComplete = false;
+        }
+    }
+    return featureComplete;
+}
+
+var validBrowser = checkBrowserFeatures([
+    "displaytable", "flexbox", "es5object", "es5function", "foo"
+]);
 
 // We want to support some name / value pairs in the fragment
 // so we're re-using query string like format
@@ -84,14 +112,11 @@ var makeRegistrationUrl = function() {
            '#/register';
 }
 
-var MatrixChat = sdk.getComponent('pages.MatrixChat');
-window.matrixChat = React.render(
-    <MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
-    document.getElementById('matrixchat')
-);
-
 window.addEventListener('hashchange', onHashChange);
 window.onload = function() {
+    if (!validBrowser) {
+        return;
+    }
     routeUrl(window.location);
     loaded = true;
     if (lastLoadedScreen) {
@@ -100,3 +125,28 @@ window.onload = function() {
     }
 }
 
+function loadApp() {
+    if (validBrowser) {
+        var MatrixChat = sdk.getComponent('pages.MatrixChat');
+        window.matrixChat = React.render(
+            <MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
+            document.getElementById('matrixchat')
+        );
+    }
+    else {
+        console.error("Browser is missing required features.");
+        // take to a different landing page to AWOOOOOGA at the user
+        var CompatibilityPage = require("../skins/vector/views/pages/CompatibilityPage");
+        window.matrixChat = React.render(
+            <CompatibilityPage onAccept={function() {
+                validBrowser = true;
+                console.log("User accepts the compatibility risks.");
+                loadApp();
+                window.onload(); // still do the same code paths for compatible clients
+            }} />,
+            document.getElementById('matrixchat')
+        );
+    }  
+}
+
+loadApp();