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

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('settings_people_page_sync_page', function() {
   /**
    * @constructor
    * @implements {settings.SyncBrowserProxy}
    * @extends {settings.TestBrowserProxy}
    */
@@ skipping 245 matching lines @@
         assertTrue(!!syncPage.$$('#create-password-box'));
         var saveNewPassphrase = syncPage.$$('#saveNewPassphrase');
         assertTrue(!!saveNewPassphrase);
 
         // Test that a sync prefs update does not reset the selection.
         cr.webUIListenerCallback('sync-prefs-changed', getSyncAllPrefs());
         Polymer.dom.flush();
         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() {
         MockInteractions.tap(encryptWithPassphrase);
         Polymer.dom.flush();
 
         assertTrue(!!syncPage.$$('#create-password-box'));
         var saveNewPassphrase = syncPage.$$('#saveNewPassphrase');
         assertTrue(!!saveNewPassphrase);
 
@@ skipping 51 matching lines @@
         prefs.encryptAllData = true;
         prefs.passphraseRequired = true;
         prefs.fullEncryptionBody = 'Sync already encrypted.';
         cr.webUIListenerCallback('sync-prefs-changed', prefs);
 
         Polymer.dom.flush();
 
         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;
         prefs.passphraseRequired = true;
         cr.webUIListenerCallback('sync-prefs-changed', prefs);
 
         Polymer.dom.flush();
 
         var existingPassphraseInput = syncPage.$$('#existingPassphraseInput');
         assertTrue(!!existingPassphraseInput);
@@ skipping 58 matching lines @@
       });
     });
   }
 
   return {
     registerTests: function() {
       registerAdvancedSyncSettingsTests();
     },
   };
 });