settings: Fix focus issues with lock screen.

1) Fix pin keyboard shifting when going from message to no message.
2) Fix loosing focus on input when clicking disabled backspace - it will
also not loose focus anymore if anywhere on the PIN keyboard is clicked.
3) Fix no focus on input when directly going to lockscreen
(chrome:settings/lockScreen).

Test: manual
Bug: 828450, 827948, 827126
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Id64b80287c6667a419f186cf67d7b77c62cf02d1
Reviewed-on: https://chromium-review.googlesource.com/1006262
Commit-Queue: Sammie Quon <sammiequon@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#550345}

chrome/browser/resources/settings/people_page/password_prompt_dialog.js

@@ -84,9 +84,11 @@ Polymer({
   attached: function() {
     this.writeUma_(LockScreenProgress.START_SCREEN_LOCK);
     this.$.dialog.showModal();
+    // This needs to occur at the next paint otherwise the password input will
+    // not receive focus.
     this.async(() => {
       this.$.passwordInput.focus();
-    });
+    }, 1);
   },
 
   /** @private */

chrome/browser/resources/settings/people_page/setup_pin_dialog.html

@@ -55,14 +55,14 @@
         close-text="$i18n{close}">
       <div slot="title">[[getTitleMessage_(isConfirmStep_)]]</div>
       <div slot="body">
-        <!-- Pin keyboard -->
+        <!-- PIN keyboard -->
         <div id="pinKeyboardDiv" class="settings-box continuation">
           <pin-keyboard id="pinKeyboard" on-pin-change="onPinChange_"
               on-submit="onPinSubmit_" value="{{pinKeyboardValue_}}"
               has-error$="[[hasError_(problemMessage_, problemClass_)]]">
             <!-- Warning/error; only shown if title is hidden. -->
             <div id="problemDiv" class$="[[problemClass_]]"
-                hidden="[[!problemMessage_]]" problem>
+                invisible$="[[!problemMessage_]]" problem>
               <iron-icon icon="cr:error-outline"></iron-icon>
               <span id="problemMessage">[[problemMessage_]]</span>
             </div>
@@ -73,7 +73,6 @@
         <paper-button class="cancel-button" on-click="onCancelTap_">
           $i18n{cancel}
         </paper-button>
-
         <paper-button class="action-button" on-click="onPinSubmit_"
             disabled$="[[!enableSubmit_]]">
           <span>[[getContinueMessage_(isConfirmStep_)]]</span>

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html

@@ -169,7 +169,7 @@
       }
     </style>
 
-    <div id="root" on-contextmenu="onContextMenu_">
+    <div id="root" on-contextmenu="onContextMenu_" on-tap="focusInput_">
       <div id="pinInputDiv" class="row">
         <paper-input id="pinInput" type="password" no-label-float
             value="[[value]]"

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js

@@ -196,6 +196,17 @@ Polymer({
     }.bind(this), 0);
   },
 
+  /**
+   * Transfers focus to the input. Called when a non button element on the
+   * PIN button area is clicked to prevent focus from leaving the input.
+   */
+  focusInput_: function() {
+    // Focus the input and place the selected region to its exact previous
+    // location, as this function will not be called by something that will also
+    // modify the input value.
+    this.focus(this.selectionStart_, this.selectionEnd_);
+  },
+
   /**
    * Called when a keypad number has been tapped.
    * @param {Event} event The event object.
@@ -372,7 +383,7 @@ Polymer({
    * @private
    */
   hasInput_: function(value) {
-    return value.length > 0;
+    return value.length > 0 && this.selectionStart_ > 0;
   },
 
   /**