[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..e1cf4123c1caa735f4b8871d26ec13716ab73b57 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,25 @@ cr.define('settings_people_page_sync_page', function() {
         assertTrue(syncPage.$.encryptionRadioGroupContainer.hidden);
       });
 
+      test('ExistingPassphraseSubmitButtonDisabledWhenExistingPassphraseEmpty',
+           function() {
+        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 = '';
+        assertTrue(!!submitExistingPassphrase.disabled);

[tommycli, 2016/10/26 18:27:30]

nit: Why the double bang? Is it undefined sometimes?

[Moe, 2016/10/26 21:42:40]

Done.

+
+        existingPassphraseInput.value = 'foo';
+        assertFalse(!!submitExistingPassphrase.disabled);
+      });
+
       test('EnterExistingWrongPassphrase', function() {
         var prefs = getSyncAllPrefs();
         prefs.encryptAllData = true;