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) {

[dpapad, 2017/02/15 02:01:38]

Nit (for a potential future CL cleanup): Since we are already wrapping
chrome.passwordsPrivate API, we could convert the old-style callback based API
to Promise based.

getSavedPasswordList: function() {
  return new Promise(function(resolve) {
    chrome.passwordsPrivate.getSavedPasswordList(resolve);
  });
};

Similarly for other methods in this class.

[hcarmona, 2017/02/15 18:18:24]

This wasn't done because the callback can occur async multiple times, not just
when requested.

[dpapad, 2017/02/15 18:32:21]

A single call to getSavedPasswordList() can invoke |callback| multiple times?
That is surprising to me. The tests also don't seem to handle that case,
https://cs.chromium.org/chromium/src/chrome/test/data/extensions/api_test/pas....
As well as the documentation of that method does not imply that it is called
multiple times,
https://cs.chromium.org/chromium/src/chrome/common/extensions/api/passwords_p....

Anyway, this was just a suggestion for a future cleanup, we can evaluate
separately.

+    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,
+
+  /** @type {?function(!Array<PasswordManager.PasswordUiEntry>):void} */
+  setSavedPasswordsListener_: null,
+
+  /** @type {?function(!Array<PasswordManager.ExceptionPair>):void} */
+  setPasswordExceptionsListener_: null,
+
+  /** @override */
+  ready: function() {
+    // Create listener functions.
+    var setSavedPasswordsListener = function(list) {
+      this.savedPasswords = list;
+    }.bind(this);
+
+    var setPasswordExceptionsListener = function(list) {
+      this.passwordExceptions = list;
+    }.bind(this);
+
+    this.setSavedPasswordsListener_ = setSavedPasswordsListener;

[dpapad, 2017/02/15 02:01:38]

Nit: Same question here as in autofill. Do we need the local vars
setSavedPasswordsListener and setPasswordExceptionsListener?

[hcarmona, 2017/02/15 18:18:23]

Avoids type casting.

+    this.setPasswordExceptionsListener_ = setPasswordExceptionsListener;
+
+    // Set the manager. These can be overridden by tests.
+    this.passwordManager_ = PasswordManagerImpl.getInstance();
+
+    // Request initial data.
+    this.passwordManager_.getSavedPasswordList(setSavedPasswordsListener);
+    this.passwordManager_.getExceptionList(setPasswordExceptionsListener);
+
+    // Listen for changes.
+    this.passwordManager_.addSavedPasswordListChangedListener(
+        setSavedPasswordsListener);
+    this.passwordManager_.addExceptionListChangedListener(
+        setPasswordExceptionsListener);
+  },
+
+  /** @override */
+  detached: function() {
+    this.passwordManager_.removeSavedPasswordListChangedListener(
+      /** @type {function(!Array<PasswordManager.PasswordUiEntry>):void} */(
+        this.setSavedPasswordsListener_));
+    this.passwordManager_.removeExceptionListChangedListener(
+      /** @type {function(!Array<PasswordManager.ExceptionPair>):void} */(
+        this.setPasswordExceptionsListener_));
+  },
+
   /**
    * 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;
@@ skipping 41 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);
+        }.bind(this));
+  },
 });
 })();