settings: Focus sync passphrase field after entering wrong passphrase

The user is likely to try re-entering their passphrase, so ensure
focus stays in the input field.

Convert the Print Preview PIN settings element to use the same
approach to focus, so callers aren't depending on internal
implementation details of cr-input.

Bug: 805829
Test: See bug. sign in to account with sync passphrase, enter
  incorrect phrase, focus returns to input field. Tested with both
  Chrome OS and Linux.

Change-Id: I012f5b5368654c8b0f36b66f9fd07124d394c9a5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1832632Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Auto-Submit: James Cook <jamescook@chromium.org>
Commit-Queue: James Cook <jamescook@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702032}

chrome/browser/resources/print_preview/ui/pin_settings.js

@@ -66,7 +66,7 @@ Polymer({
   /** @private */
   onCollapseChanged_: function() {
     if (this.pinEnabled_) {
-      /** @type {!CrInputElement} */ (this.$.pinValue).inputElement.focus();
+      /** @type {!CrInputElement} */ (this.$.pinValue).focusInput();
     }
   },
 

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

@@ -506,7 +506,10 @@ Polymer({
       case settings.PageStatus.PASSPHRASE_FAILED:
         if (this.pageStatus_ == this.pages_.CONFIGURE && this.syncPrefs &&
             this.syncPrefs.passphraseRequired) {
-          this.$$('#existingPassphraseInput').invalid = true;
+          const passphraseInput = /** @type {!CrInputElement} */ (
+              this.$$('#existingPassphraseInput'));
+          passphraseInput.invalid = true;
+          passphraseInput.focusInput();
         }
         return;
     }

ui/webui/resources/cr_elements/cr_input/cr_input.js

@@ -225,7 +225,7 @@ Polymer({
 
   /** @private */
   onFocus_: function() {
-    if (!this.focusInput_()) {
+    if (!this.focusInput()) {
       return;
     }
     // Always select the <input> element on focus. TODO(stevenjb/scottchen):
@@ -235,10 +235,12 @@ Polymer({
   },
 
   /**
+   * Focuses the input element.
+   * TODO(crbug.com/882612): Replace this with focus() after resolving the text
+   * selection issue described in onFocus_().
    * @return {boolean} Whether the <input> element was focused.
-   * @private
    */
-  focusInput_: function() {
+  focusInput: function() {
     if (this.shadowRoot.activeElement == this.inputElement) {
       return false;
     }
@@ -346,7 +348,7 @@ Polymer({
    * @param {number=} end
    */
   select: function(start, end) {
-    this.focusInput_();
+    this.focusInput();
     if (start !== undefined && end !== undefined) {
       this.inputElement.setSelectionRange(start, end);
     } else {