Add a password handler to get the list of passwords in md-settings.

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

Index: chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.js
diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.js b/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.js
index b46e9fb3b2389df1a434bc8350d6d947227cd203..ff7d7d85c55ef003f10e6ee097b6e95867bd62f8 100644
--- a/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.js
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.js
@@ -27,9 +27,9 @@ Polymer({
     /**
      * An array of passwords to display.
      * Lazy loaded when the password section is expanded.
+     * @type {!Array<!chrome.passwordsPrivate.PasswordUiEntry>}
      */
     savedPasswords: {
-      type: Array,
       value: function() { return []; },
     },
 
@@ -44,23 +44,23 @@ Polymer({
   },
 
   /**
-   * Called when the section is expanded. This will load the list of passwords
-   * only when needed.
+   * Called when the section is expanded. This will set up a callback to update
+   * the list of passwords and trigger it.
    * @param {boolean} passwordSectionOpened
    */
   loadPasswords_: function(passwordSectionOpened) {

[hcarmona, 2016/01/27 02:46:18]

Had to change this b/c I realized that I was adding a listener every
time the passwords section was expanded/collapsed.

[michaelpg, 2016/01/27 04:23:43]

ok, but why is passwordSectionOpened necessary?

[hcarmona, 2016/01/29 23:52:11]

Not used any more :-)

-    if (passwordSectionOpened) {
-      // TODO(hcarmona): Get real data.
-      this.savedPasswords =
-          [{origin: 'otherwebsite.com',
-            username: 'bowser',
-            password: '************'},
-           {origin: 'otherlongwebsite.com',
-            username: 'koopa',
-            password: '*********'},
-           {origin: 'otherverylongwebsite.com',
-            username: 'goomba',
-            password: '******'}];
+    if (passwordSectionOpened && !this.onSavedPasswordsListChanged_) {
+      /**
+       * Callback for updating the list of passwords.
+       * @param {!Array<!chrome.passwordsPrivate.PasswordUiEntry>} passwordList
+      */
+      this.onSavedPasswordsListChanged_ = function(passwordList) {

[michaelpg, 2016/01/27 04:23:43]

Why create this dynamically rather than have this on the prototype?

[hcarmona, 2016/01/29 23:52:11]

Updated: now part of the prototype and bound on |ready|.

+        this.savedPasswords = passwordList;
+      };
+
+      // Triggers a callback after the listener is added.
+      chrome.passwordsPrivate.onSavedPasswordsListChanged.addListener(
+          this.onSavedPasswordsListChanged_.bind(this));

[stevenjb, 2016/01/27 19:28:45]

Looking at this again, I think it would be more clear to do this in ready() and
just inline it:

ready() {
  chrome.settingsPrivate.onPrefsChanged.addListener(function(passwordList) {
    this.savedPasswords = passwordList;
  }.bind(this);
}

Existing example:
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/res...

[hcarmona, 2016/01/29 23:52:11]

Awesome! Done.

My only concern is that this API triggers a callback when the listener
is added. This means we'll retrieve the data whether we use it or not.
Maybe not a big deal?

     }
   },
 });