[MD Settings][People] Visual updates to the sync setup page.

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

 // Copyright 2015 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.
 
 (function() {
 
 /**
  * Names of the radio buttons which allow the user to choose his encryption
  * mechanism.
  * @enum {string}
@@ skipping 81 matching lines @@
      * Whether the "create passphrase" inputs should be shown. These inputs
      * give the user the opportunity to use a custom passphrase instead of
      * authenticating with his Google credentials.
      * @private
      */
     creatingNewPassphrase_: {
       type: Boolean,
       value: false,
     },
 
+    /**
+     * The passphrase input field value.
+     * @private
+     */
+    passphrase_: {
+      type: String,
+      value: '',
+    },
+
+    /**
+     * The passphrase confirmation input field value.
+     * @private
+     */
+    confirmation_: {

[tommycli, 2016/10/25 18:28:46]

since you are now binding the values of these input fields to properties, I
suggest using these everywhere. Do a Ctrl+F on this file for ".value".

[Moe, 2016/10/25 22:30:18]

Done.

+      type: String,
+      value: '',
+    },
+
+    /**
+     * The existing passphrase input field value.
+     * @private
+     */
+    existingPassphrase_: {
+      type: String,
+      value: '',
+    },
+
     /** @private {!settings.SyncBrowserProxy} */
     browserProxy_: {
       type: Object,
       value: function() {
         return settings.SyncBrowserProxyImpl.getInstance();
       },
     },
 
     /**
      * The unload callback is needed because the sign-in flow needs to know
@@ skipping 141 matching lines @@
    * @private
    */
   onAutofillDataTypeChanged_: function() {
     this.set('syncPrefs.paymentsIntegrationEnabled',
              this.syncPrefs.autofillSynced);
 
     this.onSingleSyncDataTypeChanged_();
   },
 
   /**
+   * @param {string} passphrase The passphrase input field value
+   * @param {string} confirmation The passphrase confirmation input field value.
+   * @return {boolean} Whether the passphrase save button should be enabled.
+   * @private
+   */
+  isSaveNewPassphraseEnabled_: function(passphrase, confirmation) {
+    return passphrase !== '' && confirmation !== '';
+  },
+
+  /**
    * Sends the newly created custom sync passphrase to the browser.
    * @private
    */
   onSaveNewPassphraseTap_: function() {
     assert(this.creatingNewPassphrase_);
 
     // If a new password has been entered but it is invalid, do not send the
     // sync state to the API.
     if (!this.validateCreatedPassphrases_())
       return;
@@ skipping 63 matching lines @@
    * Computed binding returning the selected encryption radio button.
    * @private
    */
   selectedEncryptionRadio_: function() {
     return this.syncPrefs.encryptAllData || this.creatingNewPassphrase_ ?
         RadioButtonNames.ENCRYPT_WITH_PASSPHRASE :
         RadioButtonNames.ENCRYPT_WITH_GOOGLE;
   },
 
   /**
-   * Computed binding returning the encryption text body.
+   * Computed binding returning text of the prompt for entering the passphrase.
    * @private
    */
-  encryptWithPassphraseBody_: function() {
-    if (this.syncPrefs && this.syncPrefs.fullEncryptionBody)
-      return this.syncPrefs.fullEncryptionBody;
+  enterPassphrasePrompt_: function() {
+    if (this.syncPrefs && this.syncPrefs.passphraseTypeIsCustom)
+      return this.syncPrefs.enterPassphraseBody;
 
-    return this.i18n('encryptWithSyncPassphraseLabel');
+    return this.syncPrefs.enterGooglePassphraseBody;
   },
 
   /**
    * @param {boolean} syncAllDataTypes
    * @param {boolean} enforced
    * @return {boolean} Whether the sync checkbox should be disabled.
    */
   shouldSyncCheckboxBeDisabled_: function(syncAllDataTypes, enforced) {
     return syncAllDataTypes || enforced;
   },
@@ skipping 28 matching lines @@
 
     passphraseInput.invalid = emptyPassphrase;
     passphraseConfirmationInput.invalid =
         !emptyPassphrase && mismatchedPassphrase;
 
     return !emptyPassphrase && !mismatchedPassphrase;
   },
 });
 
 })();