Merge pull request #17032 from flodolo/bug981604_timechangelanguage

Bug 981604 - [System]: Time Picker doesn't change when switching language in Settings

apps/system/js/value_selector/value_selector.js

@@ -74,12 +74,16 @@ var ValueSelector = {
     window.addEventListener('appopened', this);
     window.addEventListener('appclosing', this);
 
-    // invalidate the current spin date picker when language setting changes
+    // invalidate the current date and time picker when language setting changes
     navigator.mozSettings.addObserver('language.current',
       (function language_change(e) {
         if (this._datePicker) {
           this._datePicker.uninit();
           this._datePicker = null;
+        }
+        if (this._timePickerInitialized) {
+          this._timePickerInitialized = false;
+          TimePicker.uninitTimePicker();
       }}).bind(this));
   },
 
@@ -552,6 +556,14 @@ var TimePicker = {
     document.getElementById('hours-minutes-separator').textContent = separator;
   },
 
+  uninitTimePicker: function tp_uninitTimePicker() {
+    TimePicker.timePicker.minute.uninit();
+    TimePicker.timePicker.hour.uninit();
+    if (TimePicker.timePicker.hour24State) {
+      TimePicker.timePicker.hour24State.uninit();
+    }
+  },
+
   setTimePickerStyle: function tp_setTimePickerStyle() {
     var style = 'format24h';
     if (this.timePicker.is12hFormat) {
@@ -561,7 +573,7 @@ var TimePicker = {
       style = (reversedPeriod) ? 'format12hrev' : 'format12h';
     }
     var container = ValueSelector._context.querySelector('.picker-container');
-    container.classList.add(style);
+    container.className = 'picker-container ' + style;
   },
 
   getHour: function tp_getHours() {

apps/system/test/unit/value_selector_test.js

@@ -47,11 +47,6 @@ suite('value selector/value selector', function() {
     element = document.getElementById('value-selector');
   });
 
-  teardown(function() {
-    // remove classes added by tests
-    timePickerContainer.className = 'picker-container';
-  });
-
   test('show', function() {
     ValueSelector.show();
     assert.isFalse(element.hidden);
@@ -90,4 +85,20 @@ suite('value selector/value selector', function() {
     assert.ok(timePickerContainer.classList.contains('format12hrev'));
   });
 
+  test('Time Picker reset at language change', function() {
+    // start with 12h format
+    stubMozl10nGet =
+      this.sinon.stub(navigator.mozL10n, 'get').returns('%I:%M %p');
+    TimePicker.initTimePicker();
+    assert.ok(timePickerContainer.classList.contains('format12h'));
+    stubMozl10nGet.restore();
+
+    // change to 24h format
+    ValueSelector._timePickerInitialized = false;
+    TimePicker.uninitTimePicker();
+    stubMozl10nGet =
+      this.sinon.stub(navigator.mozL10n, 'get').returns('%H:%M');
+    TimePicker.initTimePicker();
+    assert.ok(timePickerContainer.classList.contains('format24h'));
+  });
 });