Merge pull request #18694 from etiennesegonzac/bug-1000047-callscreen…

…-race

Bug 1000047 - Hardening the callscreen against a transition end race. r=rik

apps/callscreen/js/call_screen.js

@@ -227,6 +227,7 @@ var CallScreen = {
     }
   },
 
+  _transitioning: false,
   _transitionDone: false,
   _contactBackgroundWaiting: false,
   _contactImage: null,
@@ -242,23 +243,28 @@ var CallScreen = {
     var screen = this.screen;
     screen.classList.toggle('displayed');
 
-    var self = this;
+    // If we toggle the class during the transition we'll loose the
+    // transitionend ; and we have no opening transition for incoming locked
+    var skipTransition = this._transitioning ||
+                         (this.screen.dataset.layout === 'incoming-locked');
 
-    // We have no opening transition for incoming locked
-    if (this.screen.dataset.layout === 'incoming-locked') {
+    if (skipTransition) {
       if (callback && typeof(callback) == 'function') {
         setTimeout(callback);
       }
-      self._onTransitionDone();
+      this._onTransitionDone();
       return;
     }
 
     /* We need CSS transitions for the status bar state and the regular state */
+    var self = this;
+    self._transitioning = true;
     screen.addEventListener('transitionend', function trWait(evt) {
       if (evt.target != screen) {
         return;
       }
       screen.removeEventListener('transitionend', trWait);
+      self._transitioning = false;
       if (callback && typeof(callback) == 'function') {
         callback();
       }

apps/callscreen/test/unit/call_screen_test.js

@@ -381,6 +381,10 @@ suite('call screen', function() {
       CallScreen._wallpaperReady = false;
     });
 
+    teardown(function() {
+      CallScreen._transitioning = false;
+    });
+
     test('it should wait for the wallpaper to load', function(done) {
       var toggleSpy = this.sinon.spy(screen.classList, 'toggle');
       CallScreen.toggle();
@@ -455,6 +459,30 @@ suite('call screen', function() {
           });
         });
       });
+
+      suite('when toggling again in the middle of a transition', function() {
+        var addEventListenerSpy;
+        var spyCallback;
+
+        setup(function() {
+          addEventListenerSpy = this.sinon.spy(screen, 'addEventListener');
+          spyCallback = this.sinon.spy();
+
+          CallScreen.toggle(spyCallback);
+          CallScreen.toggle(spyCallback);
+        });
+
+        test('should not wait for transitionend the second time', function() {
+          assert.isTrue(addEventListenerSpy.calledOnce);
+        });
+
+        test('should call the callback once', function(done) {
+          setTimeout(function() {
+            assert.isTrue(spyCallback.calledOnce);
+            done();
+          });
+        });
+      });
     });
   });