[Pwd List] Fix Display Of Passwords

This change fixes a bug when re-rendering the list of passwords after a
password store mutation. This bug could give the impression that a wrong
password was deleted.

Bug: 862119
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I13f42a18567f84e191e99a2beb6d00ee7e82e682
Reviewed-on: https://chromium-review.googlesource.com/1138233Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Jan Wilken Dörrie <jdoerrie@chromium.org>
Cr-Commit-Position: refs/heads/master@{#575474}

chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js

@@ -151,13 +151,14 @@ Polymer({
   /** @override */
   attached: function() {
     // Create listener functions.
-    const setSavedPasswordsListener = list => this.updateList(
-        'savedPasswords',
-        item => `${item.entry.index}_${item.entry.loginPair.urls.shown}`,
-        list.map(entry => ({
-                   entry: entry,
-                   password: '',
-                 })));
+    const setSavedPasswordsListener = list =>
+        this.updateList('savedPasswords', item => {
+          return item.entry.loginPair.urls.origin + '_' +
+              item.entry.loginPair.username;
+        }, list.map(entry => ({
+                      entry: entry,
+                      password: '',
+                    })));
 
     const setPasswordExceptionsListener = list => {
       this.passwordExceptions = list;

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

@@ -11,18 +11,18 @@ function FakeDataMaker() {}
 
 /**
  * Creates a single item for the list of passwords.
- * @param {string|undefined} url
- * @param {string|undefined} username
- * @param {number|undefined} passwordLength
+ * @param {string=} url
+ * @param {string=} username
+ * @param {number=} passwordLength
+ * @param {number=} index
  * @return {chrome.passwordsPrivate.PasswordUiEntry}
  */
-FakeDataMaker.passwordEntry = function(url, username, passwordLength) {
+FakeDataMaker.passwordEntry = function(url, username, passwordLength, index) {
   // Generate fake data if param is undefined.
   url = url || FakeDataMaker.patternMaker_('www.xxxxxx.com', 16);
   username = username || FakeDataMaker.patternMaker_('user_xxxxx', 16);
   passwordLength = passwordLength || Math.floor(Math.random() * 15) + 3;
-  entryIndex = -1;
-  exceptionIndex = -1;
+  index = index || 0;
 
   return {
     loginPair: {
@@ -34,24 +34,26 @@ FakeDataMaker.passwordEntry = function(url, username, passwordLength) {
       username: username,
     },
     numCharactersInPassword: passwordLength,
-    index: ++entryIndex,
+    index: index,
   };
 };
 
 /**
  * Creates a single item for the list of password exceptions.
- * @param {string|undefined} url
+ * @param {string=} url
+ * @param {number=} index
  * @return {chrome.passwordsPrivate.ExceptionEntry}
  */
-FakeDataMaker.exceptionEntry = function(url) {
+FakeDataMaker.exceptionEntry = function(url, index) {
   url = url || FakeDataMaker.patternMaker_('www.xxxxxx.com', 16);
+  index = index || 0;
   return {
     urls: {
       origin: 'http://' + url + '/login',
       shown: url,
       link: 'http://' + url + '/login',
     },
-    index: ++exceptionIndex,
+    index: index,
   };
 };
 

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

@@ -59,11 +59,11 @@ TEST_F('SettingsPasswordSectionBrowserTest', 'uiTests', function() {
    */
   function validatePasswordList(listElement, passwordList) {
     assertEquals(passwordList.length, listElement.items.length);
-    if (passwordList.length > 0) {
+    for (let index = 0; index < passwordList.length; ++index) {
       // The first child is a template, skip and get the real 'first child'.
-      const node = Polymer.dom(listElement).children[1];
+      const node = Polymer.dom(listElement).children[index + 1];
       assert(node);
-      const passwordInfo = passwordList[0];
+      const passwordInfo = passwordList[index];
       assertEquals(
           passwordInfo.loginPair.urls.shown,
           node.$$('#originUrl').textContent.trim());
@@ -290,6 +290,32 @@ TEST_F('SettingsPasswordSectionBrowserTest', 'uiTests', function() {
       validatePasswordList(passwordsSection.$.passwordList, passwordList);
     });
 
+    // Test verifies that removing one out of two passwords for the same website
+    // will update the elements.
+    test('verifyPasswordListRemoveSameWebsite', function() {
+      const passwordsSection = createPasswordsSection(passwordManager, [], []);
+
+      // Set-up initial list.
+      let passwordList = [
+        FakeDataMaker.passwordEntry('website.com', 'mario', 1, 0),
+        FakeDataMaker.passwordEntry('website.com', 'luigi', 7, 1)
+      ];
+
+      passwordManager.lastCallback.addSavedPasswordListChangedListener(
+          passwordList);
+      Polymer.dom.flush();
+      validatePasswordList(passwordsSection.$.passwordList, passwordList);
+
+      // Simulate '(website.com, mario)' being removed from the list.
+      passwordList =
+          [FakeDataMaker.passwordEntry('website.com', 'luigi', 7, 0)];
+
+      passwordManager.lastCallback.addSavedPasswordListChangedListener(
+          passwordList);
+      Polymer.dom.flush();
+      validatePasswordList(passwordsSection.$.passwordList, passwordList);
+    });
+
     // Test verifies that pressing the 'remove' button will trigger a remove
     // event. Does not actually remove any passwords.
     test('verifyPasswordItemRemoveButton', function(done) {