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

chrome/browser/resources/chromeos/login/lock.js

 // Copyright (c) 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Login UI based on a stripped down OOBE controller.
  */
 
 <include src="login_shared.js">
 
+// Lazy load polymer.
+(function() {
+  'use strict';
+
+  // How long until we wait for an idle event before forcibly loading polymer.
+  /** @const */ var IDLE_TIMEOUT_MS = 250;
+
+  // Called after polymer has been loaded. Fades the pin element in.
+  var onPolymerLoaded = function() {
+    var pinContainer = $('pin-container');
+    pinContainer.style.opacity = 1;
+  };
+
+  // Load an arbitrary JavaScript file from |href|. |onload| is called after
+  // the file has been loaded.
+  var injectScript = function(href, onload) {
+    var link = document.createElement('link');
+    link.rel = 'import';
+    link.href = href;
+    link.onload = onload;
+    document.head.appendChild(link);
+  };
+
+  // We only need to load polymer on the lock screen if we are showing the PIN
+  // keypad. The PIN keypad is implemented with various paper elements and can
+  // take a significant amount of time to load. Moreover, if the user does not
+  // have PIN unlock enabled, we can skip loading all of polymer.
+  //
+  // Directly loading the element in DOMContentLoaded or load results in the pod
+  // intro animation getting interrupted because the DOM is blocked while
+  // loading polymer. Loading it in an idle callback defers the load enough
+  // that the animation does not get interrupted.
+  var showPin = loadTimeData.getBoolean('showPin');
+  if (showPin) {
+    window.addEventListener('DOMContentLoaded', function() {
+      window.requestIdleCallback(function() {
+        injectScript('chrome://oobe/custom_elements.html', onPolymerLoaded);
+      }, { timeout: IDLE_TIMEOUT_MS });
+    });
+  }
+})();
+
 cr.define('cr.ui.Oobe', function() {
   return {
     /**
      * Initializes the OOBE flow.  This will cause all C++ handlers to
      * be invoked to do final setup.
      */
     initialize: function() {
       // TODO(jdufault): Remove this after resolving crbug.com/452599.
       console.log('Start initializing LOCK OOBE');
 
@@ skipping 21 matching lines @@
      * Reloads content of the page.
      * @param {!Object} data New dictionary with i18n values.
      */
     reloadContent: function(data) {
       loadTimeData.overrideValues(data);
       i18nTemplate.process(document, loadTimeData);
       Oobe.getInstance().updateLocalizedContent_();
     },
   };
 });