Bug 1151081 - merge pull request #29686 from Cwiiis:bug1151081-buggy-…

…value-selector-transition to mozilla-b2g:master
mozilla-b2g · Apr 24, 2015 · 7a93508 · 7a93508
2 parents 4579d4e + 98a869c
commit 7a93508
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/apps/system/js/value_selector/value_selector.js b/apps/system/js/value_selector/value_selector.js
@@ -109,10 +109,20 @@
           this.show(evt.detail);
         } else {
           this.render(function afterRender() {
-            this.show(evt.detail);
+            // Nesting two requestionAnimationFrames stops the style changes
+            // from this.show coalescing with the creation of the elements,
+            // without forcing a synchronous style flush.
+            window.requestAnimationFrame(() => {
+              window.requestAnimationFrame(() => {
+                this.show(evt.detail);
+              });
+            });
           }.bind(this));
         }
         break;
+      case 'transitionend':
+        this.element.classList.remove('transitioning');
+        break;
     }
   };
 
@@ -157,6 +167,7 @@
     // Prevent the form from submit.
     this.elements.selectOptionPopup.addEventListener('submit', this);
     this.element.addEventListener('mousedown', this);
+    this.element.addEventListener('transitionend', this);
     ['selectOptionsButtons', 'timePickerButtons',
       'spinDatePickerButtons'].forEach(function(elementId) {
         this.elements[elementId].addEventListener('click', this);
@@ -193,6 +204,7 @@
 
     this.app._setVisibleForScreenReader(false);
     if (this.element.hidden) {
+      this.element.classList.add('transitioning');
       this.element.hidden = false;
     }
 
@@ -233,6 +245,7 @@
       return;
     }
     this.element.blur();
+    this.element.classList.add('transitioning');
     this.element.hidden = true;
     if (this.app.getBottomMostWindow().isActive() && this.app.isActive()) {
       this.app.focus();

diff --git a/apps/system/style/value_selector/value_selector.css b/apps/system/style/value_selector/value_selector.css
@@ -41,6 +41,11 @@
   opacity: 0;
 }
 
+.value-selector[hidden] [role="listbox"],
+.value-selector.transitioning [role="listbox"] {
+  overflow: hidden;
+}
+
 .value-selector-container li > label {
   pointer-events: none;
 }
diff --git a/apps/system/test/unit/value_selector_test.js b/apps/system/test/unit/value_selector_test.js
@@ -14,7 +14,7 @@ var mocksForValueSelector = new MocksHelper([
 ]).init();
 
 suite('value selector/value selector', function() {
-  var realL10n, realKeyboard, stubMozl10nGet, app, fragment, vs;
+  var realL10n, realKeyboard, stubMozl10nGet, app, fragment, vs, rafStub;
 
   var fakeAppConfig = {
     url: 'app://www.fake/index.html',
@@ -57,6 +57,9 @@ suite('value selector/value selector', function() {
     realKeyboard = window.navigator.mozInputMethod;
     window.navigator.mozInputMethod = sinon.stub();
 
+    rafStub = sinon.stub(window, 'requestAnimationFrame',
+                         function(callback) { callback(); });
+
     loadBodyHTML('/index.html');
 
     requireApp('system/js/service.js');
@@ -78,6 +81,7 @@ suite('value selector/value selector', function() {
   teardown(function() {
     navigator.mozL10n = realL10n;
     window.navigator.mozInputMethod = realKeyboard;
+    rafStub.restore();
     document.body.innerHTML = '';
     fragment = null;
     vs = null;