[settings] Fix layout and text for the passhprase reset hints

Bug: 873739, 873644
Change-Id: I02e0819130678a1398106f0d0faf8068456e28dc
Reviewed-on: https://chromium-review.googlesource.com/1196451
Commit-Queue: David Roger <droger@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#589142}

chrome/app/settings_strings.grdp

@@ -3617,10 +3617,10 @@
   <message name="IDS_SETTINGS_PASSPHRASE_EXPLANATION_TEXT" desc="Message shown when explicit passphrase is selected.">
     Only someone with your passphrase can read your encrypted data. The passphrase is not sent to or stored by Google. If you forget your passphrase or want to change this setting, you'll need to <ph name="BEGIN_LINK">&lt;a href="$1" target=&quot;_blank&quot;&gt;<ex>&lt;a href="$1" target=&quot;_blank&quot;&gt;</ex></ph>reset sync<ph name="END_LINK">&lt;/a&gt;<ex>&lt;/a&gt;</ex></ph>.
   </message>
-  <message name="IDS_SETTINGS_PASSPHRASE_RESET_HINT" desc="Informs user how to change their encryption setting.">
-    To change this setting, <ph name="BEGIN_LINK">&lt;a href="$1" target=&quot;_blank&quot;&gt;<ex>&lt;a href="$1" target=&quot;_blank&quot;&gt;</ex></ph>reset sync<ph name="END_LINK">&lt;/a&gt;<ex>&lt;/a&gt;</ex></ph>.
+  <message name="IDS_SETTINGS_PASSPHRASE_RESET_HINT_ENCRYPTION" desc="Informs user how to change their encryption setting.">
+    To change this setting, <ph name="BEGIN_LINK">&lt;a href="$1" target=&quot;_blank&quot;&gt;<ex>&lt;a href="$1" target=&quot;_blank&quot;&gt;</ex></ph>reset sync<ph name="END_LINK">&lt;/a&gt;<ex>&lt;/a&gt;</ex></ph> to remove your sync passphrase
   </message>
-  <message name="IDS_SETTINGS_PASSPHRASE_RESET_HINT_UNIFIED_CONSENT" desc="Informs user how to change their encryption setting when unified consent is enabled.">
+  <message name="IDS_SETTINGS_PASSPHRASE_RESET_HINT_TOGGLE" desc="Informs user how to change their encryption setting when unified consent is enabled.">
     To turn this on, <ph name="BEGIN_LINK">&lt;a href="$1" target=&quot;_blank&quot;&gt;<ex>&lt;a href="$1" target=&quot;_blank&quot;&gt;</ex></ph>reset sync<ph name="END_LINK">&lt;/a&gt;<ex>&lt;/a&gt;</ex></ph> to remove your sync passphrase
   </message>
   <message name="IDS_SETTINGS_EMPTY_PASSPHRASE_ERROR" desc="Error message when the passphrase is empty.">

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

@@ -31,9 +31,7 @@
         opacity: var(--cr-disabled-opacity);
       }
 
-      #create-password-box,
-      #reset-sync-message-box-encryption,
-      #reset-sync-message-box-user-events {
+      #create-password-box {
         /* In order to line up with the encryption radio box text. */
         margin-inline-start: var(--settings-indent-width);
       }
@@ -73,6 +71,10 @@
         border-top: var(--settings-separator-line);
       }
 
+      .passphrase-reset-icon {
+        margin-right: 8px;
+      }
+
 <if expr="not chromeos">
       #toast {
         color: white;
@@ -361,19 +363,20 @@
           <!-- User events is disabled and unchecked if data is encrypted or
                typed urls are disabled. -->
           <template is="dom-if" if="[[unifiedConsentEnabled]]">
-            <div class="layout horizontal list-item"
-                hidden="[[!syncPrefs.userEventsRegistered]]">
+            <div hidden="[[!syncPrefs.userEventsRegistered]]"
+                class$="[[getPassphraseHintLines_(syncPrefs.encryptAllData)]]
+                    layout horizontal list-item">
               <div class="start" id="userEventsCheckboxLabel">
-                <div>$i18n{userEventsCheckboxLabel}</div>
+                $i18n{userEventsCheckboxLabel}
                 <div class="secondary">
                   $i18n{userEventsCheckboxText}
-                </div>
-                <div id="reset-sync-message-box-user-events" class="list-item"
-                  hidden="[[!syncPrefs.encryptAllData]]">
-                  <span>
-                    <iron-icon icon="settings:info-outline"></iron-icon>
-                    $i18nRaw{passphraseResetHint}
-                  </span>
+                  <div id="reset-sync-message-box-user-events"
+                      hidden="[[!syncPrefs.encryptAllData]]">
+                    <iron-icon icon="settings:info-outline"
+                        class="passphrase-reset-icon">
+                    </iron-icon>
+                    $i18nRaw{passphraseResetHintToggle}
+                  </div>
                 </div>
               </div>
               <cr-toggle id="userEventsToggle"
@@ -425,10 +428,19 @@
 
           <div id="encryptionDescription"
               hidden="[[syncPrefs.passphraseRequired]]"
-              class$="two-line single-column
+              class$="single-column
+                  [[getPassphraseHintLines_(syncPrefs.encryptAllData)]]
                   [[getListItemClass_(unifiedConsentEnabled)]]">
-            <div>$i18n{encryptionOptionsTitle}</div>
-            <div class="secondary">$i18n{syncDataEncryptedText}</div>
+            $i18n{encryptionOptionsTitle}
+            <div class="secondary">
+              $i18n{syncDataEncryptedText}
+              <div hidden="[[!syncPrefs.encryptAllData]]">
+                <iron-icon icon="settings:info-outline"
+                    class="passphrase-reset-icon">
+                </iron-icon>
+                $i18nRaw{passphraseResetHintEncryption}
+              </div>
+            </div>
           </div>
 
           <div id="encryptionRadioGroupContainer" class="list-frame"
@@ -455,16 +467,6 @@
                 </template>
               </cr-radio-button>
             </paper-radio-group>
-
-            <!-- duplicated from above -->
-            <div id="reset-sync-message-box-encryption" class="list-item"
-                hidden="[[!syncPrefs.encryptAllData]]">
-              <span>
-                <iron-icon icon="settings:info-outline"></iron-icon>
-                $i18nRaw{passphraseResetHint}
-              </span>
-            </div>
-
           </div>
 
           <template is="dom-if" if="[[creatingNewPassphrase_]]">

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

@@ -657,6 +657,16 @@ Polymer({
     return this.unifiedConsentEnabled ? 'list-item' : 'settings-box';
   },
 
+  /**
+   * When there is a sync passphrase, some items have an additional line for the
+   * passphrase reset hint, making them three lines rather than two.
+   * @return {string}
+   * @private
+   */
+  getPassphraseHintLines_: function() {
+    return this.syncPrefs.encryptAllData ? 'three-line' : 'two-line';
+  },
+
   // <if expr="not chromeos">
   /**
    * @return {boolean}

chrome/browser/resources/settings/settings_shared_css.html

@@ -196,6 +196,12 @@
         min-height: var(--settings-row-two-line-min-height);
       }
 
+      /* A row with three lines of text. Often the lower lines will be
+       * .secondary. */
+      .three-line {
+        min-height: var(--settings-row-three-line-min-height);
+      }
+
       /* A settings-box is a horizontal row of text or controls within a
        * setting section (page or subpage). */
       .settings-box {

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

@@ -1777,12 +1777,13 @@ void AddPeopleStrings(content::WebUIDataSource* html_source, Profile* profile) {
       l10n_util::GetStringFUTF8(IDS_SETTINGS_PASSPHRASE_EXPLANATION_TEXT,
                                 base::ASCIIToUTF16(sync_dashboard_url)));
   html_source->AddString(
-      "passphraseResetHint",
-      l10n_util::GetStringFUTF8(
-          unified_consent::IsUnifiedConsentFeatureEnabled()
-              ? IDS_SETTINGS_PASSPHRASE_RESET_HINT_UNIFIED_CONSENT
-              : IDS_SETTINGS_PASSPHRASE_RESET_HINT,
-          base::ASCIIToUTF16(sync_dashboard_url)));
+      "passphraseResetHintEncryption",
+      l10n_util::GetStringFUTF8(IDS_SETTINGS_PASSPHRASE_RESET_HINT_ENCRYPTION,
+                                base::ASCIIToUTF16(sync_dashboard_url)));
+  html_source->AddString(
+      "passphraseResetHintToggle",
+      l10n_util::GetStringFUTF8(IDS_SETTINGS_PASSPHRASE_RESET_HINT_TOGGLE,
+                                base::ASCIIToUTF16(sync_dashboard_url)));
   html_source->AddString(
       "passphraseRecover",
       l10n_util::GetStringFUTF8(IDS_SETTINGS_PASSPHRASE_RECOVER,