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

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

Index: chrome/test/data/webui/settings/people_page_sync_page_test.js
diff --git a/chrome/test/data/webui/settings/people_page_sync_page_test.js b/chrome/test/data/webui/settings/people_page_sync_page_test.js
index fe8be556e735f9a144be7c80ccd3846bd6991f4f..4b06bc3123fdd742857de6e80f005ce65b1085d1 100644
--- a/chrome/test/data/webui/settings/people_page_sync_page_test.js
+++ b/chrome/test/data/webui/settings/people_page_sync_page_test.js
@@ -263,27 +263,27 @@ cr.define('settings_people_page_sync_page', function() {
         assertTrue(encryptWithPassphrase.checked);
       });
 
-      test('CreatingPassphraseEmptyPassphrase', function() {
+      test('SaveButtonDisabledWhenPassphraseOrConfirmationEmpty', function() {
         MockInteractions.tap(encryptWithPassphrase);
         Polymer.dom.flush();
 
         assertTrue(!!syncPage.$$('#create-password-box'));
         var saveNewPassphrase = syncPage.$$('#saveNewPassphrase');
-        assertTrue(!!saveNewPassphrase);
-
-        MockInteractions.tap(saveNewPassphrase);
-        Polymer.dom.flush();
-
         var passphraseInput = syncPage.$$('#passphraseInput');
         var passphraseConfirmationInput =
             syncPage.$$('#passphraseConfirmationInput');
-        assertTrue(!!passphraseInput);
-        assertTrue(!!passphraseConfirmationInput);
 
-        assertTrue(passphraseInput.invalid);
-        assertFalse(passphraseConfirmationInput.invalid);
+        passphraseInput.value = '';
+        passphraseConfirmationInput.value = '';
+        assertTrue(!!saveNewPassphrase.disabled);
 
-        assertFalse(syncPage.syncPrefs.encryptAllData);
+        passphraseInput.value = 'foo';
+        passphraseConfirmationInput.value = '';
+        assertTrue(!!saveNewPassphrase.disabled);
+
+        passphraseInput.value = 'foo';
+        passphraseConfirmationInput.value = 'bar';
+        assertFalse(!!saveNewPassphrase.disabled);
       });
 
       test('CreatingPassphraseMismatchedPassphrase', function() {
@@ -355,6 +355,24 @@ cr.define('settings_people_page_sync_page', function() {
         assertTrue(syncPage.$.encryptionRadioGroupContainer.hidden);
       });
 
+      test('ExistingPassphraseSubmitButtonHiddenIfPassphraseEmpty', function() {

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

The UI specs really call for the button to be HIDDEN if there is nothing in the
input field? That sounds kind of counter intuitive. Maybe push back if you
agree?

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

The mocks seem to suggest that. I pinged Alan to know whether that is by design.
I'll further update the CL if he suggests a disabled state.

[tommycli, 2016/10/25 22:39:09]

Okay great. I leave it up to you if you want to handle it in this CL or a
followup.

[Moe, 2016/10/26 18:26:13]

Alan confirmed that the button should be disabled rather than hidden. I made
changes in the last patch.

+        var prefs = getSyncAllPrefs();
+        prefs.encryptAllData = true;
+        prefs.passphraseRequired = true;
+        cr.webUIListenerCallback('sync-prefs-changed', prefs);
+
+        Polymer.dom.flush();
+
+        var existingPassphraseInput = syncPage.$$('#existingPassphraseInput');
+        var submitExistingPassphrase = syncPage.$$('#submitExistingPassphrase');
+
+        existingPassphraseInput.value = '';
+        assertFalse(submitExistingPassphrase.clientHeight > 0);
+
+        existingPassphraseInput.value = 'foo';
+        assertTrue(submitExistingPassphrase.clientHeight > 0);
+      });
+
       test('EnterExistingWrongPassphrase', function() {
         var prefs = getSyncAllPrefs();
         prefs.encryptAllData = true;