Add accept-language support

config/default-search.js

@@ -18,4 +18,6 @@ module.exports = {
       ],
     },
   },
+
+  redirectLangPrefix: false,
 };

config/default.js

@@ -137,6 +137,8 @@ module.exports = {
   },
   rtlLangs: ['ar', 'dbr', 'fa', 'he'],
   defaultLang: 'en-US',
+  redirectLangPrefix: true,
+
   localeDir: path.resolve(path.join(__dirname, '../locale')),
 
   // This is off by default

package.json

@@ -14,7 +14,7 @@
     "eslint": "eslint .",
     "stylelint": "stylelint --syntax scss **/*.scss",
     "lint": "npm run eslint && npm run stylelint",
-    "servertest": "ADDONS_FRONTEND_BUILD_ALL=1 npm run build && better-npm-run servertest",
+    "servertest": "ADDONS_FRONTEND_BUILD_ALL=1 npm run build && better-npm-run servertest && better-npm-run servertest:disco && better-npm-run servertest:search",
     "start": "npm run version-check && NODE_PATH='./:./src' node bin/server.js",
     "test": "better-npm-run test",
     "unittest": "better-npm-run unittest",
@@ -63,12 +63,28 @@
       }
     },
     "servertest": {
-      "command": "mocha --compilers js:babel-register --timeout 10000 --recursive tests/server/",
+      "command": "mocha --compilers js:babel-register --timeout 10000 tests/server/",
       "env": {
         "NODE_PATH": "./:./src",
         "NODE_ENV": "production"
       }
     },
+    "servertest:disco": {
+      "command": "mocha --compilers js:babel-register --timeout 10000 tests/server/disco",
+      "env": {
+        "NODE_PATH": "./:./src",
+        "NODE_ENV": "production",
+        "NODE_APP_INSTANCE": "disco"
+      }
+    },
+    "servertest:search": {
+      "command": "mocha --compilers js:babel-register --timeout 10000 tests/server/search",
+      "env": {
+        "NODE_PATH": "./:./src",
+        "NODE_ENV": "production",
+        "NODE_APP_INSTANCE": "search"
+      }
+    },
     "test": {
       "command": "npm run version-check && npm run unittest && npm run servertest && npm run eslint && npm run stylelint",
       "env": {

src/amo/routes.js

@@ -5,8 +5,7 @@ import App from './containers/App';
 import Home from './containers/Home';
 
 export default (
-  <Route path="/" component={App}>
+  <Route path="/(:lang/)" component={App}>
     <IndexRoute component={Home} />
-    <Route path="/:lang/" component={Home} />
   </Route>
 );

src/core/client/base.js

@@ -6,7 +6,7 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { Router, browserHistory } from 'react-router';
 import { ReduxAsyncConnect } from 'redux-async-connect';
-import { langToLocale, getLanguage } from 'core/i18n/utils';
+import { langToLocale, sanitizeLanguage } from 'core/i18n/utils';
 import I18nProvider from 'core/i18n/Provider';
 import Jed from 'jed';
 
@@ -18,7 +18,7 @@ export default function makeClient(routes, createStore) {
   let initialState;
 
   const html = document.querySelector('html');
-  const lang = getLanguage(html.getAttribute('lang'));
+  const lang = sanitizeLanguage(html.getAttribute('lang'));
   const locale = langToLocale(lang);
   const appName = config.get('appName');
 

src/core/i18n/utils.js

@@ -59,11 +59,11 @@ export function normalizeLocale(locale) {
   return langToLocale(localeToLang(locale));
 }
 
-export function isValidLang(lang) {
-  return validLangs.includes(lang);
+export function isValidLang(lang, { _validLangs = validLangs } = {}) {
+  return _validLangs.includes(normalizeLang(lang));
 }
 
-export function getLanguage(langOrLocale) {
+export function sanitizeLanguage(langOrLocale) {
   let language = normalizeLang(langOrLocale);
   // Only look in the un-mapped lang list.
   if (!langs.includes(language)) {
@@ -73,24 +73,91 @@ export function getLanguage(langOrLocale) {
 }
 
 export function isRtlLang(lang) {
-  const language = getLanguage(lang);
+  const language = sanitizeLanguage(lang);
   return rtlLangs.includes(language);
 }
 
 export function getDirection(lang) {
   return isRtlLang(lang) ? 'rtl' : 'ltr';
 }
 
-export function getLangFromRouter(renderProps) {
-  if (renderProps) {
-    // Get the lang from the url param by default
-    // if it exists.
-    if (renderProps.params && renderProps.params.lang) {
-      return getLanguage(renderProps.params.lang);
-    } else if (renderProps.location && renderProps.location.query &&
-               renderProps.location.query.lang) {
-      return getLanguage(renderProps.location.query.lang);
+
+function qualityCmp(a, b) {
+  if (a.quality === b.quality) {
+    return 0;
+  } else if (a.quality < b.quality) {
+    return 1;
+  }
+  return -1;
+}
+
+/*
+ * Parses the HTTP accept-language header and returns a
+ * sorted array of objects. Example object:
+ * { lang: 'pl', quality: 0.7 }
+ */
+export function parseAcceptLanguage(header) {
+  // pl,fr-FR;q=0.3,en-US;q=0.1
+  if (!header || !header.split) {
+    return [];
+  }
+  const rawLangs = header.split(',');
+  const langList = rawLangs.map((rawLang) => {
+    const parts = rawLang.split(';');
+    let q = 1;
+    if (parts.length > 1 && parts[1].trim().indexOf('q=') === 0) {
+      const qVal = parseFloat(parts[1].split('=')[1]);
+      if (isNaN(qVal) === false) {
+        q = qVal;
+      }
     }
+    return {
+      lang: parts[0].trim(),
+      quality: q,
+    };
+  });
+  langList.sort(qualityCmp);
+  return langList;
+}
+
+
+/*
+ * Given an accept-language header and a list of currently
+ * supported languages, returns the best match with no normalization.
+ *
+ */
+export function getLangFromHeader(acceptLanguage, { _validLangs } = {}) {
+  let userLang;
+  if (acceptLanguage) {
+    const langList = parseAcceptLanguage(acceptLanguage);
+    for (const langPref of langList) {
+      if (isValidLang(langPref.lang, { _validLangs })) {
+        userLang = langPref.lang;
+        break;
+      // Match locale, even if region isn't supported
+      } else if (isValidLang(langPref.lang.split('-')[0], { _validLangs })) {
+        userLang = langPref.lang.split('-')[0];
+        break;
+      }
+    }
+  }
+  return userLang;
+}
+
+/*
+ * Looks up the language from the router renderProps.
+ * When that fails fall-back to accept-language.
+ *
+ */
+export function getFilteredUserLanguage({ renderProps, acceptLanguage } = {}) {
+  let userLang;
+  // Get the lang from the url param by default if it exists.
+  if (renderProps && renderProps.params && renderProps.params.lang) {
+    userLang = renderProps.params.lang;
+  }
+  // If we don't have a valid userLang set yet try accept-language.
+  if (!isValidLang(userLang) && acceptLanguage) {
+    userLang = getLangFromHeader(acceptLanguage);
   }
-  return defaultLang;
+  return sanitizeLanguage(userLang);
 }

src/core/server/base.js

@@ -19,7 +19,7 @@ import ServerHtml from 'core/containers/ServerHtml';
 import config from 'config';
 import { setLang, setJWT } from 'core/actions';
 import log from 'core/logger';
-import { getDirection, getLangFromRouter, langToLocale } from 'core/i18n/utils';
+import { getDirection, getFilteredUserLanguage, langToLocale } from 'core/i18n/utils';
 import I18nProvider from 'core/i18n/Provider';
 import Jed from 'jed';
 
@@ -83,6 +83,11 @@ function baseServer(routes, createStore, { appInstanceName = appName } = {}) {
     app.get('/', (req, res) => res.redirect(302, '/search'));
   }
 
+  if (appInstanceName === 'disco' && isDevelopment) {
+    app.get('/', (req, res) =>
+      res.redirect(302, '/en-US/firefox/discovery/pane/48.0/Darwin/normal'));
+  }
+
   app.use((req, res) => {
     if (isDevelopment) {
       log.info('Running in Development Mode');
@@ -113,19 +118,24 @@ function baseServer(routes, createStore, { appInstanceName = appName } = {}) {
         fs.readFileSync(path.join(config.get('basePath'), 'dist/sri.json'))
       ) : {};
 
-      const lang = getLangFromRouter(renderProps);
+      const acceptLanguage = req.headers['accept-language'];
+      // Get language from URL or fall-back to accept-language.
+      const lang = getFilteredUserLanguage({ renderProps, acceptLanguage });
 
-      if (renderProps.params && renderProps.params.lang) {
+      if (renderProps.params) {
         const origLang = renderProps.params.lang;
         if (lang !== origLang) {
-          // If the original lang param (found via the router) matches
-          // the first part of the original url path, redirect to the
-          // normalized lang (which will be the default if invalid).
+          // If a lang was provided but the lang looked up is different
+          // redirect to the looked-up lang (or default).
           // eslint-disable-next-line no-unused-vars
           const [_, firstPart, ...rest] = req.originalUrl.split('/');
           if (origLang === decodeURIComponent(firstPart)) {
             // The '' provides a leading /
-            return res.redirect(301, ['', lang, ...rest].join('/'));
+            return res.redirect(302, ['', lang, ...rest].join('/'));
+          } else if (!origLang && config.get('redirectLangPrefix')) {
+            // If there was no lang param. Redirect to the same URL with
+            // a lang prepended.
+            return res.redirect(302, `/${lang}${req.originalUrl}`);
           }
         }
       }

src/disco/routes.js

@@ -1,15 +1,14 @@
 import React from 'react';
-import { IndexRoute, Route } from 'react-router';
+import { Router, Route } from 'react-router';
 
 import App from './containers/App';
 import DiscoPane from './containers/DiscoPane';
 
 export default (
-  <Route path="/" component={App}>
-    <IndexRoute component={DiscoPane} />
+  <Router component={App}>
     <Route
-      path="/:lang/firefox/discovery/pane/:version/:platform/:compatibilityMode"
+      path="/(:lang/)firefox/discovery/pane/:version/:platform/:compatibilityMode"
       component={DiscoPane}
     />
-  </Route>
+  </Router>
 );