[unified-consent] Move passphrase section above the sync section in settings

This CL moves the passphrase section just below the account if the user
has set a a custom passphrase and if Unified Consent is enabled.

Changing the strings and fixing the vertical spacing between the elements in
the enter passphrase section will be addressed in a follow-up CL.

Mock:
https://drive.google.com/open?id=1vAn34VbmHuiEpp8jQaB4v9K2T-G-ziqU

Screenshot:
https://drive.google.com/open?id=1OizYyUmyAEView0RrJkZfinxt-Rtz5Xp

Bug: 834361
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I5b7401c641291439f1bd61e6acd1523102b8a667
Reviewed-on: https://chromium-review.googlesource.com/1133380Reviewed-by: Jochen Eisinger <jochen@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Mihai Sardarescu <msarda@chromium.org>
Cr-Commit-Position: refs/heads/master@{#576009}

chrome/app/settings_strings.grdp

@@ -3561,6 +3561,9 @@
   <message name="IDS_SETTINGS_MANAGE_SYNCED_DATA_TITLE" desc="Title for the link to manage Chrome Sync data via Google Dashboard.">
     Manage synced data on Google Dashboard
   </message>
+  <message name="IDS_SETTINGS_EXISTING_PASSPHRASE_TITLE" desc="Title for the section where the user enters the passphrase.">
+    Encryption options
+  </message>
   <message name="IDS_SETTINGS_ENCRYPTION_OPTIONS" desc="Title for the section which includes options for encrypting sync settings.">
     Encryption options
   </message>

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

@@ -91,6 +91,40 @@
       </settings-sync-account-control>
     </template>
 </if>
+
+    <template is="dom-if" if="[[shouldShowExistingPassphraseBelowAccount_(
+      unifiedConsentEnabled, syncPrefs.passphraseRequired)]]">
+      <div id="existingPassphrase" class="list-frame">
+        <div id="existingPassphraseTitle" class="list-item">
+            <div class="start">
+              <div>$i18n{existingPassphraseTitle}</div>
+              <div class="secondary">
+                [[enterPassphrasePrompt_(syncPrefs.passphraseTypeIsCustom)]]
+                <a href="$i18nRaw{syncErrorHelpUrl}" target="_blank">
+                  $i18n{learnMore}
+                </a>
+              </div>
+            </div>
+        </div>
+        <div id="existingPassphraseContainer" class="list-item">
+          <cr-input id="existingPassphraseInput" type="password"
+              value="{{existingPassphrase_}}"
+              placeholder="$i18n{passphrasePlaceholder}"
+              error-message="$i18n{incorrectPassphraseError}"
+              on-keypress="onSubmitExistingPassphraseTap_">
+            <paper-button id="submitExistingPassphrase" slot="suffix"
+                on-click="onSubmitExistingPassphraseTap_"
+                class="action-button" disabled="[[!existingPassphrase_]]">
+              $i18n{submitPassphraseButton}
+            </paper-button>
+          </cr-input>
+        </div>
+        <div id="passphraseRecoverHint" class="list-item">
+          <span>$i18nRaw{passphraseRecover}</span>
+        </div>
+      </div>
+    </template>
+
      <!-- A change of the unified consent toggle state is automatically handled
           in the C++ code after a change in the pref is observed. -->
     <settings-toggle-button id="unifiedConsentToggle" class="first"
@@ -125,7 +159,10 @@
       </div>
       <div id="[[pages_.CONFIGURE]]"
           hidden$="[[!isStatus_(pages_.CONFIGURE, pageStatus_)]]">
-        <template is="dom-if" if="[[syncPrefs.passphraseRequired]]">
+        <!-- TODO(http://crbug.com/862983) Remove this section once the Unified
+             Consent feature is launched. -->
+        <template is="dom-if" if="[[shouldShowExistingPassphraseInSyncSection_(
+            unifiedConsentEnabled, syncPrefs.passphraseRequired)]]">
           <div id="existingPassphrase" class="list-frame">
             <div class="list-item">
               <span>

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

@@ -577,6 +577,22 @@ Polymer({
   },
   // </if>
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowExistingPassphraseBelowAccount_: function() {
+    return !!this.unifiedConsentEnabled && !!this.syncPrefs.passphraseRequired;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowExistingPassphraseInSyncSection_: function() {
+    return !this.unifiedConsentEnabled && !!this.syncPrefs.passphraseRequired;
+  },
+
   /**
    * @return {boolean}
    * @private

chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -1683,6 +1683,7 @@ void AddPeopleStrings(content::WebUIDataSource* html_source, Profile* profile) {
     {"submitPassphraseButton", IDS_SETTINGS_SUBMIT_PASSPHRASE},
     {"personalizeGoogleServicesTitle",
      IDS_SETTINGS_PERSONALIZE_GOOGLE_SERVICES_TITLE},
+    {"existingPassphraseTitle", IDS_SETTINGS_EXISTING_PASSPHRASE_TITLE},
   };
   AddLocalizedStringsBulk(html_source, localized_strings,
                           arraysize(localized_strings));

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

@@ -3,24 +3,25 @@
 // found in the LICENSE file.
 
 suite('sync-page-test', function() {
-  /** @type {SyncPageElement} */ let testElement;
+  /** @type {SyncPageElement} */ let syncPage;
 
   setup(function() {
     PolymerTest.clearBody();
 
-    testElement = document.createElement('settings-sync-page');
-    document.body.appendChild(testElement);
+    syncPage = document.createElement('settings-sync-page');
+    document.body.appendChild(syncPage);
   });
 
   test('autofocus correctly after container is shown', function() {
     cr.webUIListenerCallback('sync-prefs-changed', {passphraseRequired: true});
+    syncPage.unifiedConsentEnabled = false;
     Polymer.dom.flush();
 
     // Simulate event normally fired by main_page_behavior after subpage
     // animation ends.
-    testElement.fire('show-container');
+    syncPage.fire('show-container');
     assertEquals(
-        testElement.$$('#existingPassphraseInput').inputElement,
-        testElement.$$('#existingPassphraseInput').shadowRoot.activeElement);
+        syncPage.$$('#existingPassphraseInput').inputElement,
+        syncPage.$$('#existingPassphraseInput').shadowRoot.activeElement);
   });
 });

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

@@ -441,6 +441,7 @@ cr.define('settings_people_page_sync_page', function() {
           prefs.passphraseRequired = true;
           cr.webUIListenerCallback('sync-prefs-changed', prefs);
 
+          syncPage.unifiedConsentEnabled = false;
           Polymer.dom.flush();
 
           const existingPassphraseInput =
@@ -461,6 +462,7 @@ cr.define('settings_people_page_sync_page', function() {
       prefs.passphraseRequired = true;
       cr.webUIListenerCallback('sync-prefs-changed', prefs);
 
+      syncPage.unifiedConsentEnabled = false;
       Polymer.dom.flush();
 
       const existingPassphraseInput = syncPage.$$('#existingPassphraseInput');
@@ -492,6 +494,7 @@ cr.define('settings_people_page_sync_page', function() {
       prefs.passphraseRequired = true;
       cr.webUIListenerCallback('sync-prefs-changed', prefs);
 
+      syncPage.unifiedConsentEnabled = false;
       Polymer.dom.flush();
 
       const existingPassphraseInput = syncPage.$$('#existingPassphraseInput');