Merge pull request #13769 from timdream/lockscreen-unlock-transition

Bug 937630 - All you need is ... smooth unlock transition, r=vingtetun

apps/system/js/home_gesture.js

@@ -40,14 +40,14 @@ var HomeGesture = {
       return;
     if (enable) {
       this.publish('homegesture-enabled');
-      window.addEventListener('unlock', this);
+      window.addEventListener('will-unlock', this);
       window.addEventListener('lock', this);
       window.addEventListener('utilitytrayshow', this);
       window.addEventListener('utilitytrayhide', this);
       this.homeBar.classList.add('visible');
     } else {
       this.publish('homegesture-disabled');
-      window.removeEventListener('unlock', this);
+      window.removeEventListener('will-unlock', this);
       window.removeEventListener('lock', this);
       window.removeEventListener('utilitytrayshow', this);
       window.removeEventListener('utilitytrayhide', this);
@@ -84,7 +84,7 @@ var HomeGesture = {
       case 'utilitytrayshow':
         this.homeBar.classList.remove('visible');
         break;
-      case 'unlock':
+      case 'will-unlock':
       case 'utilitytrayhide':
         this.homeBar.classList.add('visible');
         break;

apps/system/js/lockscreen.js

@@ -460,8 +460,10 @@ var LockScreen = {
           this.camera.removeChild(this.camera.firstElementChild);
         }
 
-        if (!this.locked)
+        if (!this.locked) {
           this.switchPanel();
+          this.overlay.hidden = true;
+        }
         break;
 
       case 'home':
@@ -785,50 +787,56 @@ var LockScreen = {
     var wasAlreadyUnlocked = !this.locked;
     this.locked = false;
 
+    this.mainScreen.focus();
+
+    if (!wasAlreadyUnlocked) {
+      this.dispatchEvent('will-unlock', detail);
+      this.writeSetting(false);
+
+      if (instant)
+        return;
+
+      if (this.unlockSoundEnabled) {
+        var unlockAudio = new Audio('./resources/sounds/unlock.ogg');
+        unlockAudio.play();
+      }
+    }
+
+    this.overlay.classList.toggle('no-transition', instant);
+
+    // The lockscreen will be hidden, stop refreshing the clock.
+    this.clock.stop();
+
+    this.mainScreen.classList.remove('locked');
+
+    // Actually begin unlock until the foreground app is painted
     var repaintTimeout = 0;
     var nextPaint = (function() {
       clearTimeout(repaintTimeout);
 
       if (currentFrame)
         currentFrame.removeNextPaintListener(nextPaint);
 
-      if (instant) {
-        this.overlay.classList.add('no-transition');
-        this.switchPanel();
-      } else {
-        this.overlay.classList.remove('no-transition');
-      }
+      this.overlay.classList.add('unlocked');
 
-      this.mainScreen.classList.remove('locked');
-
-      if (!wasAlreadyUnlocked) {
-        // Any changes made to this,
-        // also need to be reflected in apps/system/js/storage.js
+      // We should avoid to do anything in the nextPaint function call
+      // except the class that trigger the animation,
+      // so we will get a nice transition.
+      setTimeout(function() {
         this.dispatchEvent('unlock', detail);
-        this.writeSetting(false);
-
-        if (instant)
-          return;
-
-        if (this.unlockSoundEnabled) {
-          var unlockAudio = new Audio('./resources/sounds/unlock.ogg');
-          unlockAudio.play();
-        }
-      }
+        this.switchPanel();
+      }.bind(this), 700);
     }).bind(this);
 
     if (currentFrame)
       currentFrame.addNextPaintListener(nextPaint);
 
+    // Give up waiting for nextpaint after 400ms
+    // XXX: Does not consider the situation where the app is painted already
+    // behind the lock screen (why?).
     repaintTimeout = setTimeout(function ensureUnlock() {
       nextPaint();
-    }, 200);
-
-    this.mainScreen.focus();
-    this.dispatchEvent('will-unlock');
-
-    // The lockscreen will be hidden, stop refreshing the clock.
-    this.clock.stop();
+    }, 400);
   },
 
   lock: function ls_lock(instant) {
@@ -838,12 +846,11 @@ var LockScreen = {
     this.switchPanel();
 
     this.overlay.focus();
-    if (instant)
-      this.overlay.classList.add('no-transition');
-    else
-      this.overlay.classList.remove('no-transition');
+    this.overlay.classList.toggle('no-transition', instant);
 
     this.mainScreen.classList.add('locked');
+    this.overlay.classList.remove('unlocked');
+    this.overlay.hidden = false;
     screen.mozLockOrientation(OrientationManager.defaultOrientation);
 
     if (!wasAlreadyLocked) {
@@ -884,12 +891,13 @@ var LockScreen = {
         var frame = document.createElement('iframe');
 
         frame.src = './camera/index.html';
-        var mainScreen = this.mainScreen;
-        frame.onload = function cameraLoaded() {
-          mainScreen.classList.add('lockscreen-camera');
+        frame.onload = (function cameraLoaded() {
+          this.mainScreen.classList.add('lockscreen-camera');
+          this.overlay.classList.add('unlocked');
+
           if (callback)
             callback();
-        };
+        }).bind(this);
         this.overlay.classList.remove('no-transition');
         this.camera.appendChild(frame);
 
@@ -911,6 +919,8 @@ var LockScreen = {
 
       case 'camera':
         this.mainScreen.classList.remove('lockscreen-camera');
+        this.overlay.classList.remove('unlocked');
+        this.overlay.hidden = false;
         break;
 
       case 'emergency-call':

apps/system/js/sim_lock.js

@@ -18,8 +18,9 @@ var SimLock = {
     window.addEventListener('appwillopen', this);
 
     // Display the dialog only after lockscreen is unlocked
+    // before the transition.
     // To prevent keyboard being displayed behind it.
-    window.addEventListener('unlock', this);
+    window.addEventListener('will-unlock', this);
 
     // always monitor card state change
     IccHelper.addEventListener('cardstatechange', this.showIfLocked.bind(this));
@@ -45,7 +46,7 @@ var SimLock = {
           this.showIfLocked();
         }
         break;
-      case 'unlock':
+      case 'will-unlock':
         // Check whether the lock screen was unlocked from the camera or not.
         // If the former is true, the SIM PIN dialog should not displayed after
         // unlock, because the camera will be opened (Bug 849718)

apps/system/style/lockscreen/lockscreen.css

@@ -7,22 +7,21 @@
   background-color: #000;
   -moz-user-select: none;
   opacity: 1;
+  /* Utilzing a cubic bezier timing function to hide the fact
+     that we might be slow at the beginning of the transition. */
   transition:
-    transform 0.5s ease,
-    opacity 0.5s ease,
-    visibility 0.5s ease;
+    transform 0.5s cubic-bezier(0.7, 0.0, 1.0, 1.0),
+    opacity 0.5s cubic-bezier(0.7, 0.0, 1.0, 1.0),
 }
 
 #screen.active-statusbar > #lockscreen {
   top: 4rem;
   height: calc(100% - 4rem);
 }
 
-#screen:not(.locked) > #lockscreen,
-#screen.lockscreen-camera > #lockscreen {
+#lockscreen.unlocked {
   transform: scale(2);
   opacity: 0;
-  visibility: hidden;
   pointer-events: none;
 }