MD Settings People Sync: Improve passphrase-required UI

 1. Puts the "Enter required custom passphrase" UI at the top of the Sync page.

 2. Auto-focuses the passphrase field when the passphrase is required.

BUG=694115
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2755793002
Cr-Commit-Position: refs/heads/master@{#457505}

chrome/browser/resources/settings/people_page/compiled_resources2.gyp

@@ -186,10 +186,11 @@
       'dependencies': [
         '../compiled_resources2.gyp:route',
         '../settings_page/compiled_resources2.gyp:settings_animated_pages',
-        'sync_browser_proxy',
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-input/compiled_resources2.gyp:paper-input-extracted',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior',
+        'sync_browser_proxy',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },

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

@@ -32,6 +32,12 @@
         margin-top: 20px;
       }
 
+      #existingPassphrase {
+        /* This particular list frame is not indented. */
+        -webkit-padding-start: var(--settings-box-row-padding);
+        border-bottom: var(--settings-separator-line);
+      }
+
       #existingPassphraseContainer,
       #passphraseRecoverHint {
         align-items: center;
@@ -62,6 +68,37 @@
     </div>
     <div id="[[pages.CONFIGURE]]"
         hidden$="[[!isStatus_(pages.CONFIGURE, pageStatus_)]]">
+      <template is="dom-if" if="[[syncPrefs.passphraseRequired]]">
+        <div id="existingPassphrase" class="list-frame">
+          <div class="list-item">
+            <span>
+              [[enterPassphrasePrompt_(syncPrefs.passphraseTypeIsCustom)]]
+              <a href="$i18nRaw{syncErrorHelpUrl}" target="_blank">
+                $i18n{learnMore}
+              </a>
+            </span>
+          </div>
+          <div id="existingPassphraseContainer" class="list-item">
+            <paper-input id="existingPassphraseInput" type="password"
+                value="{{existingPassphrase_}}"
+                placeholder="$i18n{passphrasePlaceholder}"
+                error-message="$i18n{incorrectPassphraseError}">
+              <iron-a11y-keys id="keys" keys="enter"
+                  on-keys-pressed="onSubmitExistingPassphraseTap_">
+              </iron-a11y-keys>
+            </paper-input>
+            <paper-button id="submitExistingPassphrase"
+                on-tap="onSubmitExistingPassphraseTap_" class="action-button"
+                disabled="[[!existingPassphrase_]]">
+              $i18n{submitPassphraseButton}
+            </paper-button>
+          </div>
+          <div id="passphraseRecoverHint" class="list-item">
+            <span>$i18nRaw{passphraseRecover}</span>
+          </div>
+        </div>
+      </template>
+
       <div class="settings-box first">
         <div id="syncEverythingCheckboxLabel" class="start">
           $i18n{syncEverythingCheckboxLabel}
@@ -225,7 +262,8 @@
             aria-describedby="manageSyncedDataSecondary"></button>
       </div>
 
-      <div class="settings-box two-line single-column">
+      <div id="encryptionDescription" hidden="[[syncPrefs.passphraseRequired]]"
+          class="settings-box two-line single-column">
         <div>$i18n{encryptionOptionsTitle}</div>
         <div class="secondary">$i18n{syncDataEncryptedText}</div>
       </div>
@@ -286,37 +324,6 @@
           </div>
         </div>
       </template>
-
-      <template is="dom-if" if="[[syncPrefs.passphraseRequired]]">
-        <div class="list-frame">
-          <div class="list-item">
-            <span>
-              [[enterPassphrasePrompt_(syncPrefs.passphraseTypeIsCustom)]]
-              <a href="$i18nRaw{syncErrorHelpUrl}" target="_blank">
-                $i18n{learnMore}
-              </a>
-            </span>
-          </div>
-          <div id="existingPassphraseContainer" class="list-item">
-            <paper-input id="existingPassphraseInput" type="password"
-                value="{{existingPassphrase_}}"
-                placeholder="$i18n{passphrasePlaceholder}"
-                error-message="$i18n{incorrectPassphraseError}">
-              <iron-a11y-keys id="keys" keys="enter"
-                  on-keys-pressed="onSubmitExistingPassphraseTap_">
-              </iron-a11y-keys>
-            </paper-input>
-            <paper-button id="submitExistingPassphrase"
-                on-tap="onSubmitExistingPassphraseTap_" class="action-button"
-                disabled="[[!existingPassphrase_]]">
-              $i18n{submitPassphraseButton}
-            </paper-button>
-          </div>
-          <div id="passphraseRecoverHint" class="list-item">
-            <span>$i18nRaw{passphraseRecover}</span>
-          </div>
-        </div>
-      </template>
     </div>
   </template>
   <script src="sync_page.js"></script>

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

@@ -225,6 +225,16 @@ Polymer({
     // Hide the new passphrase box if the sync data has been encrypted.
     if (this.syncPrefs.encryptAllData)
       this.creatingNewPassphrase_ = false;
+
+    // Focus the password input box if password is needed to start sync.
+    if (this.syncPrefs.passphraseRequired) {
+      // Async to allow the dom-if templates to render first.
+      this.async(function() {
+        var input = /** @type {!PaperInputElement} */ (
+            this.$$('#existingPassphraseInput'));
+        input.inputElement.focus();
+      }.bind(this));
+    }
   },
 
   /**

chrome/test/data/webui/settings/people_page_sync_page_test.js

@@ -372,6 +372,7 @@ cr.define('settings_people_page_sync_page', function() {
 
         Polymer.dom.flush();
 
+        assertTrue(syncPage.$.encryptionDescription.hidden);
         assertTrue(syncPage.$.encryptionRadioGroupContainer.hidden);
       });