Load Passwords and Autofill in the corresponding sub page.

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

Index: chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js
diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js b/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js
index 42fe312f06222977b1e0f6357f1b4d19daa2ba2f..5a44551cc41a9eb87f18a8cf35bed735550cd298 100644
--- a/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js
@@ -8,6 +8,154 @@
  * save any passwords.
  */
 
+/**
+ * Interface for all callbacks to the password API.
+ * @interface
+ */
+function PasswordManager() {}
+
+/** @typedef {chrome.passwordsPrivate.PasswordUiEntry} */
+PasswordManager.PasswordUiEntry;
+
+/** @typedef {chrome.passwordsPrivate.LoginPair} */
+PasswordManager.LoginPair;
+
+/** @typedef {chrome.passwordsPrivate.ExceptionPair} */
+PasswordManager.ExceptionPair;
+
+/** @typedef {chrome.passwordsPrivate.PlaintextPasswordEventParameters} */
+PasswordManager.PlaintextPasswordEvent;
+
+PasswordManager.prototype = {
+  /**
+   * Add an observer to the list of saved passwords.
+   * @param {function(!Array<!PasswordManager.PasswordUiEntry>):void} listener
+   */
+  addSavedPasswordListChangedListener: assertNotReached,
+
+  /**
+   * Remove an observer from the list of saved passwords.
+   * @param {function(!Array<!PasswordManager.PasswordUiEntry>):void} listener
+   */
+  removeSavedPasswordListChangedListener: assertNotReached,
+
+  /**
+   * Request the list of saved passwords.
+   * @param {function(!Array<!PasswordManager.PasswordUiEntry>):void} callback
+   */
+  getSavedPasswordList: assertNotReached,
+
+  /**
+   * Should remove the saved password and notify that the list has changed.
+   * @param {!PasswordManager.LoginPair} loginPair The saved password that
+   *     should be removed from the list. No-op if |loginPair| is not found.
+   */
+  removeSavedPassword: assertNotReached,
+
+  /**
+   * Add an observer to the list of password exceptions.
+   * @param {function(!Array<!PasswordManager.ExceptionPair>):void} listener
+   */
+  addExceptionListChangedListener: assertNotReached,
+
+  /**
+   * Remove an observer from the list of password exceptions.
+   * @param {function(!Array<!PasswordManager.ExceptionPair>):void} listener
+   */
+  removeExceptionListChangedListener: assertNotReached,
+
+  /**
+   * Request the list of password exceptions.
+   * @param {function(!Array<!PasswordManager.ExceptionPair>):void} callback
+   */
+  getExceptionList: assertNotReached,
+
+  /**
+   * Should remove the password exception and notify that the list has changed.
+   * @param {string} exception The exception that should be removed from the
+   *     list. No-op if |exception| is not in the list.
+   */
+  removeException: assertNotReached,
+
+  /**
+   * Gets the saved password for a given login pair.
+   * @param {!PasswordManager.LoginPair} loginPair The saved password that
+   *     should be retrieved.
+   * @param {function(!PasswordManager.PlaintextPasswordEvent):void} callback
+   */
+  getPlaintextPassword: assertNotReached,
+};
+
+/**
+ * Implementation that accesses the private API.
+ * @implements {PasswordManager}
+ * @constructor
+ */
+function PasswordManagerImpl() {}
+cr.addSingletonGetter(PasswordManagerImpl);
+
+PasswordManagerImpl.prototype = {
+  __proto__: PasswordManager,
+
+  /** @override */
+  addSavedPasswordListChangedListener: function(listener) {
+    chrome.passwordsPrivate.onSavedPasswordsListChanged.addListener(listener);
+  },
+
+  /** @override */
+  removeSavedPasswordListChangedListener: function(listener) {
+    chrome.passwordsPrivate.onSavedPasswordsListChanged.removeListener(
+        listener);
+  },
+
+  /** @override */
+  getSavedPasswordList: function(callback) {
+    chrome.passwordsPrivate.getSavedPasswordList(callback);
+  },
+
+  /** @override */
+  removeSavedPassword: function(loginPair) {
+    chrome.passwordsPrivate.removeSavedPassword(loginPair);
+  },
+
+  /** @override */
+  addExceptionListChangedListener: function(listener) {
+    chrome.passwordsPrivate.onPasswordExceptionsListChanged.addListener(
+        listener);
+  },
+
+  /** @override */
+  removeExceptionListChangedListener: function(listener) {
+    chrome.passwordsPrivate.onPasswordExceptionsListChanged.removeListener(
+        listener);
+  },
+
+  /** @override */
+  getExceptionList: function(callback) {
+    chrome.passwordsPrivate.getPasswordExceptionList(callback);
+  },
+
+  /** @override */
+  removeException: function(exception) {
+    chrome.passwordsPrivate.removePasswordException(exception);
+  },
+
+  /** @override */
+  getPlaintextPassword: function(loginPair, callback) {
+    var listener = function(reply) {
+      // Only handle the reply for our loginPair request.
+      if (reply.loginPair.originUrl == loginPair.originUrl &&
+          reply.loginPair.username == loginPair.username) {
+        chrome.passwordsPrivate.onPlaintextPasswordRetrieved.removeListener(
+            listener);
+        callback(reply);
+      }
+    };
+    chrome.passwordsPrivate.onPlaintextPasswordRetrieved.addListener(listener);
+    chrome.passwordsPrivate.requestPlaintextPassword(loginPair);
+  },
+};
+
 /** @typedef {!{model: !{item: !chrome.passwordsPrivate.PasswordUiEntry}}} */
 var PasswordUiEntryEvent;
 
@@ -31,21 +179,15 @@ Polymer({
 
     /**
      * An array of passwords to display.
-     * @type {!Array<!chrome.passwordsPrivate.PasswordUiEntry>}
+     * @type {!Array<!PasswordManager.PasswordUiEntry>}
      */
-    savedPasswords: {
-      type: Array,
-      value: function() { return []; },
-    },
+    savedPasswords: Array,
 
     /**
      * An array of sites to display.
-     * @type {!Array<!chrome.passwordsPrivate.ExceptionPair>}
+     * @type {!Array<!PasswordManager.ExceptionPair>}
      */
-    passwordExceptions: {
-      type: Array,
-      value: function() { return []; },
-    },
+    passwordExceptions: Array,
 
     /** @override */
     subpageRoute: {
@@ -69,6 +211,39 @@ Polymer({
     },
   },
 
+  listeners: {
+    'show-password': 'showPassword_',
+  },
+
+  /** @type {PasswordManager} */
+  passwordManager_: null,
+
+  /** @override */
+  ready: function() {
+    // Set the manager. These can be overridden by tests.
+    this.passwordManager_ = PasswordManagerImpl.getInstance();
+
+    // Request initial data.
+    this.passwordManager_.getSavedPasswordList(
+        this.setSavedPasswordsListener_.bind(this));
+    this.passwordManager_.getExceptionList(
+        this.setPasswordExceptionsListener_.bind(this));
+
+    // Listen for changes.
+    this.passwordManager_.addSavedPasswordListChangedListener(
+        this.setSavedPasswordsListener_.bind(this));
+    this.passwordManager_.addExceptionListChangedListener(
+        this.setPasswordExceptionsListener_.bind(this));
+  },
+
+  /** @override */
+  detached: function() {
+    this.passwordManager_.removeSavedPasswordListChangedListener(
+        this.setSavedPasswordsListener_);

[dpapad, 2017/02/14 20:43:18]

This is now a different reference than the one passed in
addSavedPasswordListChangedListener(). Does the removal still work, or does it
silently not remove the listener? I am guessing the latter.

[hcarmona, 2017/02/15 00:13:34]

Arg. Yes. Fixed. PTAL

+    this.passwordManager_.removeExceptionListChangedListener(
+        this.setPasswordExceptionsListener_);

[dpapad, 2017/02/14 20:43:18]

Same here.

[hcarmona, 2017/02/15 00:13:34]

Acknowledged.

+  },
+
   /**
    * Sets the password in the current password dialog if the loginPair matches.
    * @param {!chrome.passwordsPrivate.LoginPair} loginPair
@@ -82,6 +257,16 @@ Polymer({
     }
   },
 
+  /** @type {function(!Array<!PasswordManager.PasswordUiEntry>):void} */

[dpapad, 2017/02/14 20:43:18]

Why can't this be annotated like a normal member method?

/**
 * @param {!Array<!PasswordManager.PasswordUiEntry>} list
 */

[hcarmona, 2017/02/15 00:13:35]

Yes, that would have worked here, but had to go back to the old (current) way
because it's a reference to a bound function.

+  setSavedPasswordsListener_: function(list) {
+    this.savedPasswords = list;
+  },
+
+  /** @type {function(!Array<!PasswordManager.ExceptionPair>):void} */

[dpapad, 2017/02/14 20:43:18]

Same question here.

[hcarmona, 2017/02/15 00:13:35]

Acknowledged.

+  setPasswordExceptionsListener_: function(list) {
+    this.passwordExceptions = list;
+  },
+
   /**
    * Shows the edit password dialog.
    * @param {!Event} e
@@ -130,7 +315,7 @@ Polymer({
    * @private
    */
   onMenuRemovePasswordTap_: function() {
-    this.fire('remove-saved-password', this.activePassword.loginPair);
+    this.passwordManager_.removeSavedPassword(this.activePassword.loginPair);
     /** @type {CrActionMenuElement} */(this.$.menu).close();
   },
 
@@ -140,7 +325,7 @@ Polymer({
    * @private
    */
   onRemoveExceptionButtonTap_: function(e) {
-    this.fire('remove-password-exception', e.model.item.exceptionUrl);
+    this.passwordManager_.removeException(e.model.item.exceptionUrl);
   },
 
   /**
@@ -175,5 +360,18 @@ Polymer({
   hasSome_: function(list) {
     return !!(list && list.length);
   },
+
+  /**
+   * Listens for the show-password event, and calls the private API.
+   * @param {!Event} event
+   * @private
+   */
+  showPassword_: function(event) {
+    this.passwordManager_.getPlaintextPassword(
+        /** @type {!PasswordManager.LoginPair} */(event.detail),
+        function(item) {
+      this.setPassword(item.loginPair, item.plaintextPassword);

[dpapad, 2017/02/14 20:43:18]

Nit: Lines 373-374 should have +4 spaces of indentation.

[hcarmona, 2017/02/15 00:13:34]

Done.

+    }.bind(this));
+  },
 });
 })();