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

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

 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="/people_page/sync_browser_proxy.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-sync-page">
   <template>
     <style include="settings-shared">
-      #create-password-box {
-        /* The password fields line up with the encryption radio box text. */
+      #create-password-box,
+      #reset-sync-message-box {
+        /* In order to line up with the encryption radio box text. */
         -webkit-margin-start: 36px;
       }
 
       paper-input {
         width: var(--paper-input-max-width);
+        --paper-input-container-focus-color: var(--google-blue-500);
+        --paper-input-container-input: {
+          font-size: inherit;
+        };
+      }
+
+      #saveNewPassphrase {
+        margin-top: 20px;
+      }
+
+      #existingPassphraseContainer,
+      #passphraseRecoverHint {
+        align-items: flex-end;
       }
 
       #existingPassphraseInput {
         /* The submit button for the existing passphrase is on the same line. */
         -webkit-margin-end: 16px;
         display: inline-block;
+        --paper-input-container: {
+          padding: 0;
+        };
       }
     </style>
     <div id="[[pages.SPINNER]]" class="settings-box first"
         hidden$="[[!isStatus_(pages.SPINNER, pageStatus_)]]">
       $i18n{syncLoading}
     </div>
     <div id="[[pages.TIMEOUT]]" class="settings-box first"
         hidden$="[[!isStatus_(pages.TIMEOUT, pageStatus_)]]">
       $i18n{syncTimeout}
     </div>
@@ skipping 107 matching lines @@
         <paper-radio-group
             selected="[[selectedEncryptionRadio_(
                 syncPrefs.passphraseTypeIsCustom)]]"
             on-paper-radio-group-changed="onEncryptionRadioSelectionChanged_">
           <paper-radio-button name="encrypt-with-google"
               class="list-item" disabled="[[syncPrefs.encryptAllData]]">
             $i18n{encryptWithGoogleCredentialsLabel}
           </paper-radio-button>
           <paper-radio-button name="encrypt-with-passphrase"
               class="list-item" disabled="[[syncPrefs.encryptAllData]]">
-            <span>
-              [[encryptWithPassphraseBody_(syncPrefs.fullEncryptionBody)]]
-            </span>
+            <template is="dom-if" if="[[syncPrefs.fullEncryptionBody]]">
+              <span>[[syncPrefs.fullEncryptionBody]]</span>
+            </template>
+            <template is="dom-if" if="[[!syncPrefs.fullEncryptionBody]]">
+              <span>$i18nRaw{encryptWithSyncPassphraseLabel}</span>
+            </template>
           </paper-radio-button>
         </paper-radio-group>
+        <div id="reset-sync-message-box" class="list-item"
+            hidden="[[!syncPrefs.encryptAllData]]">
+          <span>$i18nRaw{passphraseResetHint}</span>
+        </div>
       </div>
 
       <template is="dom-if" if="[[creatingNewPassphrase_]]">
         <div class="list-frame">
           <div id="create-password-box">
-            <div>$i18n{passphraseExplanationText}</div>
+            <div class="list-item">
+              <span>$i18nRaw{passphraseExplanationText}</span>
+            </div>
             <paper-input id="passphraseInput" type="password"
+                value="{{passphrase_}}"
                 placeholder="$i18n{passphrasePlaceholder}"
                 error-message="$i18n{emptyPassphraseError}">
             </paper-input>
             <paper-input id="passphraseConfirmationInput" type="password"
+                value="{{confirmation_}}"
                 placeholder="$i18n{passphraseConfirmationPlaceholder}"
                 error-message="$i18n{mismatchedPassphraseError}">
             </paper-input>
             <paper-button id="saveNewPassphrase"
-                on-tap="onSaveNewPassphraseTap_" class="action-button">
+                on-tap="onSaveNewPassphraseTap_" class="action-button"
+                disabled="[[!isSaveNewPassphraseEnabled_(passphrase_,
+                                                         confirmation_)]]">
               $i18n{save}
             </paper-button>
           </div>
         </div>
       </template>
 
       <template is="dom-if" if="[[syncPrefs.passphraseRequired]]">
         <div class="list-frame">
-          <div id="askCustomPassphraseMessage" class="list-item"
-              hidden$="[[!syncPrefs.passphraseTypeIsCustom]]">
-            [[syncPrefs.enterPassphraseBody]]
+          <div class="list-item">
+            <span>
+              [[enterPassphrasePrompt_(syncPrefs.passphraseTypeIsCustom)]]
+              <a href="$i18nRaw{syncErrorHelpUrl}" target="_blank">
+                $i18n{learnMore}
+              </a>
+            </span>
           </div>
-          <div id="askOldGooglePassphraseMessage" class="list-item"
-              hidden$="[[syncPrefs.passphraseTypeIsCustom]]">
-            [[syncPrefs.enterGooglePassphraseBody]]
-          </div>
-          <div class="list-item">
+          <div id="existingPassphraseContainer" class="list-item">
             <paper-input id="existingPassphraseInput" type="password"
+                value="{{existingPassphrase_}}"
                 placeholder="$i18n{passphrasePlaceholder}"
                 error-message="$i18n{incorrectPassphraseError}">
             </paper-input>
             <paper-button id="submitExistingPassphrase"
-                on-tap="onSubmitExistingPassphraseTap_" class="action-button">
+                on-tap="onSubmitExistingPassphraseTap_" class="action-button"
+                disabled="[[!existingPassphrase_]]">
               $i18n{submitPassphraseButton}
             </paper-button>
           </div>
-          <div class="list-item">
+          <div id="passphraseRecoverHint" class="list-item">
             <span>$i18nRaw{passphraseRecover}</span>
           </div>
         </div>
       </template>
     </div>
   </template>
   <script src="sync_page.js"></script>
 </dom-module>