Add a very basic PIN UI implementation that is shared between lock and settings.

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 e44a088c47acbf04655289295960b76d751b89db..726fcf80d51b7fed879e4ca243d555fa97067117 100644
--- a/ui/login/resource_loader.js
+++ b/ui/login/resource_loader.js
@@ -24,7 +24,8 @@ cr.define('cr.ui.login.ResourceLoader', function() {
    * @param {Array=} desc.css URLs containing CSS rules.
    * @param {Array<Object>=} desc.html Descriptors for HTML fragments,
    * each of which has a 'url' property and a 'targetID' property that
-   * specifies the node under which the HTML should be appended.
+   * specifies the node under which the HTML should be appended. If 'targetID'
+   * is null, then the fetched body will be appended to document.body.
    *
    * Example:
    *   ResourceLoader.registerAssets({
@@ -118,15 +119,18 @@ cr.define('cr.ui.login.ResourceLoader', function() {
    * @param {string} id Identifier of the page's asset bundle.
    * @param {Object} html Descriptor of the HTML to fetch.
    * @param {string} html.url The URL resolving to some HTML.
-   * @param {string} html.targetID The element ID to which the retrieved
-   * HTML nodes should be appended.
+   * @param {string?} html.targetID The element ID to which the retrieved
+   * HTML nodes should be appended. If null, then the elements will be appended
+   * to document.body instead.
    */
   function loadHTML(id, html) {
     var xhr = new XMLHttpRequest();
     xhr.open('GET', html.url);
     xhr.onreadystatechange = function() {
       if (isSuccessful(html.url, xhr)) {
-        moveNodes(this.responseXML.body, $(html.targetID));
+        moveNodes(this.responseXML.head, document.head);
+        moveNodes(this.responseXML.body, $(html.targetID) || document.body);
+
         resourceLoaded(id);
       }
     };
@@ -153,7 +157,7 @@ cr.define('cr.ui.login.ResourceLoader', function() {
    */
   function finishedLoading(id) {
     var assets = ASSETS[id];
-    console.log('Finished loading asset bundle', id);
+    console.log('Finished loading asset bundle ' + id);
     assets.loaded = true;
     window.setTimeout(function() {
       assets.callback();
@@ -169,7 +173,7 @@ cr.define('cr.ui.login.ResourceLoader', function() {
   function loadAssets(id, callback) {
     var assets = ASSETS[id];
     assets.callback = callback || function() {};
-    console.log('Loading asset bundle', id);
+    console.log('Loading asset bundle ' + id);
     if (alreadyLoadedAssets(id))
       console.warn('asset bundle', id, 'already loaded!');
     if (assets.count == 0) {
@@ -181,10 +185,34 @@ cr.define('cr.ui.login.ResourceLoader', function() {
     }
   }
 
+  /**
+   * Load an asset bundle after the document has been loaded and Chrome is idle.
+   * @param {string} id Identifier for the asset bundle to load.
+   * @param {function()=} callback Function to invoke when done loading.
+   * @param {number=} opt_idleTimeoutMs The maximum amount of time to wait for
+   * an idle notification.
+   */
+  function loadAssetsOnIdle(id, callback, opt_idleTimeoutMs) {
+    opt_idleTimeoutMs = opt_idleTimeoutMs || 250;
+
+    let loadOnIdle = function() {
+      window.requestIdleCallback(function() {
+        loadAssets(id, callback);
+      }, { timeout: opt_idleTimeoutMs });
+    };
+
+    if (document.readyState == 'complete') {
+      loadOnIdle();
+    } else {
+      window.addEventListener('DOMContentLoaded', loadOnIdle);
+    }
+  }
+
   return {
     alreadyLoadedAssets: alreadyLoadedAssets,
     hasDeferredAssets: hasDeferredAssets,
     loadAssets: loadAssets,
+    loadAssetsOnIdle: loadAssetsOnIdle,
     registerAssets: registerAssets
   };
 });