Bug 1116986 - Dynamically populate year select. r=kgrandon, a=fabrice

apps/system/fxa/elements/fxa-coppa.html

@@ -9,31 +9,6 @@ <h3 data-l10n-id="fxa-age-verification">
           <span class="button icon icon-dialog">
             <select id="fxa-age-select">
               <option value="0" data-l10n-id="fxa-year-of-birth">Year of birth</option>
-              <option value="1990" data-l10n-id="fxa-age-1990-earlier">1990 or earlier</option>
-              <option value="1991">1991</option>
-              <option value="1992">1992</option>
-              <option value="1993">1993</option>
-              <option value="1994">1994</option>
-              <option value="1995">1995</option>
-              <option value="1996">1996</option>
-              <option value="1997">1997</option>
-              <option value="1998">1998</option>
-              <option value="1999">1999</option>
-              <option value="2000">2000</option>
-              <option value="2001">2001</option>
-              <option value="2002">2002</option>
-              <option value="2003">2003</option>
-              <option value="2004">2004</option>
-              <option value="2005">2005</option>
-              <option value="2006">2006</option>
-              <option value="2007">2007</option>
-              <option value="2008">2008</option>
-              <option value="2009">2009</option>
-              <option value="2010">2010</option>
-              <option value="2011">2011</option>
-              <option value="2012">2012</option>
-              <option value="2013">2013</option>
-              <option value="2014">2014</option>
             </select>
           </span>
         </li>

apps/system/fxa/js/screens/fxam_coppa.js

@@ -16,6 +16,22 @@ var FxaModuleCoppa = (function() {
 
   var MINIMUM_AGE = 13;
 
+  function _populateSelect(select) {
+    var currentYear = new Date().getFullYear();
+    var start = currentYear - MINIMUM_AGE;
+    for (var year = start; year <= currentYear; year++) {
+      var option = document.createElement('option');
+      option.value= year;
+      if (year == start) {
+        option.setAttribute('data-l10n-id', 'fxa-age-earlier');
+        option.setAttribute('data-l10n-args', '{ "year": "' + year + '" }');
+      } else {
+        option.textContent = year;
+      }
+      select.appendChild(option);
+    }
+  }
+
   function _enableNext(age) {
     if (age === '0') {
       FxaModuleUI.disableNextButton();
@@ -30,6 +46,10 @@ var FxaModuleCoppa = (function() {
 
     this.isFTU = !!(options && options.isftu);
 
+    navigator.mozL10n.once(() => {
+      _populateSelect(this.fxaAgeSelect);
+    });
+
     _enableNext(this.fxaAgeSelect.value);
 
     // If COPPA is part of the sign up flow, then we need to add a step to the
@@ -42,9 +62,9 @@ var FxaModuleCoppa = (function() {
       return;
     }
 
-    this.fxaAgeSelect.addEventListener('change', (function onSelectChange(e) {
+    this.fxaAgeSelect.addEventListener('change', () => {
       _enableNext(this.fxaAgeSelect.value);
-    }).bind(this));
+    });
 
     this.initialized = true;
   };

apps/system/fxa/locales/fxa.en-US.properties

@@ -102,5 +102,5 @@ fxa-signup-click-verification-link-in-email = Next time you check your email, cl
 # COPPA
 #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#
 fxa-age-verification = Age Verification
-fxa-age-1990-earlier = 1990 or earlier
+fxa-age-earlier = {{year}} or earlier
 fxa-year-of-birth = Year of Birth

apps/system/test/unit/fxa_test/screens/fxam_coppa_test.js

@@ -107,7 +107,6 @@ suite('Screen: COPPA', function() {
       showErrorOverlaySpy = this.sinon.spy(FxaModuleErrorOverlay, 'show');
       showErrorResponse = this.sinon.spy(FxaModuleCoppa, 'showErrorResponse');
       fxaAgeSelect.value = new Date().getFullYear();
-
     });
 
     teardown(function() {