Fix opacity transition of pin keyboard on lockscreen.

ui/login/resource_loader.js

Index: ui/login/resource_loader.js
diff --git a/ui/login/resource_loader.js b/ui/login/resource_loader.js
index 726fcf80d51b7fed879e4ca243d555fa97067117..8fb2082f6d78c4dcf17bff9a404af43bea6a0d14 100644
--- a/ui/login/resource_loader.js
+++ b/ui/login/resource_loader.js
@@ -208,11 +208,32 @@ cr.define('cr.ui.login.ResourceLoader', function() {
     }
   }
 
+  /**
+   * Wait until the element with the given |id| has finished its layout,
+   * specifically, after it has an offsetHeight > 0.
+   * @param {string} id Identifier of the element to wait for.
+   * @param {function()} callback Function to invoke when done loading.
+   */
+  function waitUntilLayoutComplete(id, callback) {
+    function doWait() {

[xiyuan, 2016/05/20 21:06:32]

nit: var doWait = function() {...};

[1]
https://google.github.io/styleguide/javascriptguide.xml?showone=Function_Decl...

[jdufault, 2016/05/20 21:31:06]

Done.

+      var element = $(id);
+      if (!element || !element.offsetHeight) {
+        setTimeout(doWait, 0);
+        return;
+      }
+
+      callback(element);
+    }
+
+    setTimeout(doWait, 0);

[xiyuan, 2016/05/20 21:06:32]

nit: Would window.requestAnimationFrame be better since it is called before the
next repaint?

[jdufault, 2016/05/20 21:31:06]

Makes sense. Done.

+  }
+
   return {
     alreadyLoadedAssets: alreadyLoadedAssets,
     hasDeferredAssets: hasDeferredAssets,
     loadAssets: loadAssets,
     loadAssetsOnIdle: loadAssetsOnIdle,
+    waitUntilLayoutComplete: waitUntilLayoutComplete,
     registerAssets: registerAssets
   };
 });