Load Passwords and Autofill in the corresponding sub page.

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

 // Copyright 2015 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.
 
 /**
  * @fileoverview 'passwords-section' is the collapsible section containing
  * the list of saved passwords as well as the list of sites that will never
  * 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;
 
 /** @typedef {!{model: !{item: !chrome.passwordsPrivate.ExceptionPair}}} */
 var ExceptionPairEntryEvent;
 
 (function() {
 'use strict';
 
 Polymer({
   is: 'passwords-section',
 
   behaviors: [settings.GlobalScrollTargetBehavior],
 
   properties: {
     /** Preferences state. */
     prefs: {
       type: Object,
       notify: true,
     },
 
     /**
      * 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: {
       type: Object,
       value: settings.Route.MANAGE_PASSWORDS,
     },
 
     /**
      * The model for any password related action menus or dialogs.
      * @private {?chrome.passwordsPrivate.PasswordUiEntry}
      */
     activePassword: Object,
 
     /** @private */
     showPasswordEditDialog_: Boolean,
 
     /** Filter on the saved passwords and exceptions. */
     filter: {
       type: String,
       value: '',
     },
   },
 
+  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
    * @param {string} password
    */
   setPassword: function(loginPair, password) {
     if (this.activePassword &&
         this.activePassword.loginPair.originUrl == loginPair.originUrl &&
         this.activePassword.loginPair.username == loginPair.username) {
       this.$$('password-edit-dialog').password = password;
     }
   },
 
+  /** @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
    * @private
    */
   onMenuEditPasswordTap_: function(e) {
     e.preventDefault();
     /** @type {CrActionMenuElement} */(this.$.menu).close();
     this.showPasswordEditDialog_ = true;
   },
@@ skipping 28 matching lines @@
     return function(exception) {
       return exception.exceptionUrl.includes(filter);
     };
   },
 
   /**
    * Fires an event that should delete the saved password.
    * @private
    */
   onMenuRemovePasswordTap_: function() {
-    this.fire('remove-saved-password', this.activePassword.loginPair);
+    this.passwordManager_.removeSavedPassword(this.activePassword.loginPair);
     /** @type {CrActionMenuElement} */(this.$.menu).close();
   },
 
   /**
    * Fires an event that should delete the password exception.
    * @param {!ExceptionPairEntryEvent} e The polymer event.
    * @private
    */
   onRemoveExceptionButtonTap_: function(e) {
-    this.fire('remove-password-exception', e.model.item.exceptionUrl);
+    this.passwordManager_.removeException(e.model.item.exceptionUrl);
   },
 
   /**
    * Creates an empty password of specified length.
    * @param {number} length
    * @return {string} password
    * @private
    */
   getEmptyPassword_: function(length) { return ' '.repeat(length); },
 
@@ skipping 14 matching lines @@
 
   /**
    * Returns true if the list exists and has items.
    * @param {Array<Object>} list
    * @return {boolean}
    * @private
    */
   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));
+  },
 });
 })();