md settings: Update lock screen to match new mocks.

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js

 // Copyright 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
  * 'pin-keyboard' is a keyboard that can be used to enter PINs or more generally
  * numeric values.
  *
  * Properties:
@@ skipping 44 matching lines @@
   ],
 
   properties: {
     /**
      * Whether or not the keyboard's input element should be numerical
      * or password.
      * @private
      */
     enablePassword: {
       type: Boolean,
-      value: false
+      value: false,
     },
 
     /**
      * The password element the pin keyboard is associated with. If this is not
      * set, then a default input element is shown and used.
      * @type {?Element}
      * @private
      */
     passwordElement: {
       type: Object,
-      value: function() { return this.$$('#pin-input'); },
-      observer: 'onPasswordElementAttached_'
+      value: function() {
+        return this.$.pinInput.inputElement;
+      },
+      observer: 'onPasswordElementAttached_',
     },
 
     /**
      * The value stored in the keyboard's input element.
      * @private
      */
     value: {
       type: String,
       notify: true,
       value: '',
-      observer: 'onPinValueChange_'
+      observer: 'onPinValueChange_',
     },
 
     /**
      * The intervalID used for the backspace button set/clear interval.
      * @private
      */
     repeatBackspaceIntervalId_: {
       type: Number,
-      value: 0
+      value: 0,

[jdufault, 2017/04/27 18:47:17]

Are these commas all automatically inserted by tooling?

[sammiequon, 2017/04/27 19:26:44]

The formatting will squash them on onto one line ie
repeatBlah_ : { type: Number, value: 0 },

adding the comma keeps the number of lines the same.

     },
 
     /**
      * The timeoutID used for the auto backspace.
      * @private
      */
     startAutoBackspaceId_: {
       type: Number,
-      value: 0
+      value: 0,
     }
   },
 
   /**
    * Called when a password element is attached to the pin keyboard.
    * @param {HTMLInputElement} inputElement The PIN keyboard's input element.
    * @private
    */
   onPasswordElementAttached_: function(inputElement) {
-    if (inputElement != this.$$('#pin-input'))
-      this.$$('#pin-input').hidden = true;
+    if (inputElement != this.$.pinInput.inputElement)
+      this.$.pinInput.hidden = true;
+    else
+      this.$$('hr').hidden = true;

[jdufault, 2017/04/27 18:47:17]

Provide an id/class?

[sammiequon, 2017/04/27 19:26:44]

Done.

+
     inputElement.addEventListener('input',
         this.handleInputChanged_.bind(this));
   },
 
   /**
    * Called when the user uses the keyboard to enter a value into the input
    * element.
    * @param {Event} event The event object.
    * @private
    */
@@ skipping 253 matching lines @@
     // does not contain decimals.
     // This heuristic will fail for inputs like '1.0'.
     //
     // Since we still support users entering their passwords through the PIN
     // keyboard, we swap the input box to rtl when we think it is a password
     // (just numbers), if the document direction is rtl.
     return (document.dir == 'rtl') && !Number.isInteger(+password);
   },
 });
 })();