DOMUI: Implement new-style password manager.

chrome/browser/resources/options/password_manager_list.js

Index: chrome/browser/resources/options/password_manager_list.js
diff --git a/chrome/browser/resources/options/password_manager_list.js b/chrome/browser/resources/options/password_manager_list.js
index c814fe5b133a30f53d866532531668e520582f4f..778e590649ee2493ec36857a897667852c3056ea 100644
--- a/chrome/browser/resources/options/password_manager_list.js
+++ b/chrome/browser/resources/options/password_manager_list.js
@@ -3,50 +3,95 @@
 // found in the LICENSE file.
 
 cr.define('options.passwordManager', function() {
-
+  const ArrayDataModel = cr.ui.ArrayDataModel;
+  const DeletableItemList = options.DeletableItemList;
   const List = cr.ui.List;
   const ListItem = cr.ui.ListItem;
-  const ArrayDataModel = cr.ui.ArrayDataModel;
 
   /**
    * Creates a new passwords list item.
-   * @param {Array} entry A pair of the form [url, username].
+   * @param {Array} entry An array of the form [url, username, password].
    * @constructor
    * @extends {cr.ui.ListItem}
    */
-  function PasswordsListItem(entry) {
-    var el = cr.doc.createElement('li');
+  function PasswordListItem(entry) {
+    var el = cr.doc.createElement('div');
     el.dataItem = entry;
-    el.__proto__ = PasswordsListItem.prototype;
+    el.__proto__ = PasswordListItem.prototype;
     el.decorate();
 
     return el;
   }
 
-  PasswordsListItem.prototype = {
+  PasswordListItem.prototype = {
     __proto__: ListItem.prototype,
 
-    /**
-     * Call when an element is decorated as a list item.
-     */
+    /** @inheritDoc */
     decorate: function() {
       ListItem.prototype.decorate.call(this);
 
-      // Labels for display
-      var urlLabel = cr.doc.createElement('span');
+      // The URL of the site.
+      var urlLabel = this.ownerDocument.createElement('div');
+      urlLabel.className = 'url';
+      urlLabel.classList.add('favicon-cell');
       urlLabel.textContent = this.url;
+      urlLabel.style.backgroundImage = url('chrome://favicon/' + this.url);
       this.appendChild(urlLabel);
-      this.urlLabel = urlLabel;
 
-      var usernameLabel = cr.doc.createElement('span');
+      // The stored username.
+      var usernameLabel = this.ownerDocument.createElement('div');
+      usernameLabel.className = 'name';
       usernameLabel.textContent = this.username;
-      usernameLabel.className = 'passwordsUsername';
       this.appendChild(usernameLabel);
-      this.usernameLabel = usernameLabel;
+
+      // The stored password.
+      var passwordInputDiv = this.ownerDocument.createElement('div');
+      passwordInputDiv.className = 'password';
+
+      // The password input field.
+      var passwordInput = this.ownerDocument.createElement('input');
+      passwordInput.className = 'inactive-password';
+      passwordInput.type = 'password';
+      passwordInput.value = this.password;
+      passwordInputDiv.appendChild(passwordInput);
+
+      // The show/hide button.
+      var buttonSpan = this.ownerDocument.createElement('span');
+      buttonSpan.className = 'hidden';
+      buttonSpan.addEventListener('click', this.onClick_, true);
+      passwordInputDiv.appendChild(buttonSpan);
+
+      this.appendChild(passwordInputDiv);
+    },
+
+    /** @inheritDoc */
+    selectionChanged: function() {
+      var passwordInput = this.querySelector('input[type=password]');
+      var buttonSpan = passwordInput.nextSibling;
+      if (this.selected) {
+        passwordInput.classList.remove('inactive-password');
+        buttonSpan.classList.remove('hidden');
+      } else {
+        passwordInput.classList.add('inactive-password');
+        buttonSpan.classList.add('hidden');
+      }
     },
 
     /**
-     * Get the url for the entry.
+     * On-click event handler. Swaps the type of the input field from password
+     * to text and back.
+     * @private
+     */
+    onClick_: function(event) {
+      // The password is the input element previous to the button span.
+      var buttonSpan = event.currentTarget;
+      var passwordInput = buttonSpan.previousSibling;
+      var type = passwordInput.type;
+      passwordInput.type = (type == 'password') ? 'text' : 'password';
+    },
+
+    /**
+     * Get and set the URL for the entry.
      * @type {string}
      */
     get url() {
@@ -57,15 +102,26 @@ cr.define('options.passwordManager', function() {
     },
 
     /**
-     * Get the username for the entry.
+     * Get and set the username for the entry.
      * @type {string}
      */
     get username() {
       return this.dataItem[1];
-     },
-     set username(username) {
+    },
+    set username(username) {
       this.dataItem[1] = username;
-     },
+    },
+
+    /**
+     * Get and set the password for the entry.
+     * @type {string}
+     */
+    get password() {
+      return this.dataItem[2];
+    },
+    set password(password) {
+      this.dataItem[2] = password;
+    },
   };
 
   /**
@@ -75,7 +131,7 @@ cr.define('options.passwordManager', function() {
    * @extends {cr.ui.ListItem}
    */
   function PasswordExceptionsListItem(entry) {
-    var el = cr.doc.createElement('li');
+    var el = cr.doc.createElement('div');
     el.dataItem = entry;
     el.__proto__ = PasswordExceptionsListItem.prototype;
     el.decorate();
@@ -92,11 +148,13 @@ cr.define('options.passwordManager', function() {
     decorate: function() {
       ListItem.prototype.decorate.call(this);
 
-      // Labels for display
-      var urlLabel = cr.doc.createElement('span');
+      // The URL of the site.
+      var urlLabel = this.ownerDocument.createElement('div');
+      urlLabel.className = 'url';
+      urlLabel.classList.add('favicon-cell');
       urlLabel.textContent = this.url;
+      urlLabel.style.backgroundImage = url('chrome://favicon/' + this.url);
       this.appendChild(urlLabel);
-      this.urlLabel = urlLabel;
     },
 
     /**
@@ -111,7 +169,6 @@ cr.define('options.passwordManager', function() {
     },
   };
 
-
   /**
    * Create a new passwords list.
    * @constructor
@@ -120,52 +177,16 @@ cr.define('options.passwordManager', function() {
   var PasswordsList = cr.ui.define('list');
 
   PasswordsList.prototype = {
-    __proto__: List.prototype,
-    /**
-     * Called when an element is decorated as a list.
-     */
-    decorate: function() {
-      List.prototype.decorate.call(this);
-
-      this.dataModel = new ArrayDataModel([]);
-    },
-
-    /**
-     * Creates an item to go in the list.
-     * @param {Object} entry The element from the data model for this row.
-     */
-    createItem: function(entry) {
-      return new PasswordsListItem(entry);
-    },
+    __proto__: DeletableItemList.prototype,
 
-    /**
-     * Adds an entry to the js model.
-     * @param {Array} entry A pair of the form [url, username].
-     */
-    addEntry: function(entry) {
-      this.dataModel.push(entry);
-      this.listArea.updateButtonSensitivity();
+    /** @inheritDoc */
+    createItemContents: function(entry) {
+      return new PasswordListItem(entry);
     },
 
-    /**
-     * Remove all entries from the js model.
-     */
-    clear: function() {
-      this.dataModel = new ArrayDataModel([]);
-      this.listArea.updateButtonSensitivity();
-    },
-
-    /**
-     * Remove selected row from browser's model.
-     */
-    removeSelectedRow: function() {
-      var selectedIndex = this.selectionModel.selectedIndex;
-      PasswordManager.removeSavedPassword(selectedIndex);
-    },
-
-    showSelectedPassword: function() {
-      var selectedIndex = this.selectionModel.selectedIndex;
-      PasswordManager.showSelectedPassword(selectedIndex);
+    /** @inheritDoc */
+    deleteItemAtIndex: function(index) {
+      PasswordManager.removeSavedPassword(index);
     },
 
     /**
@@ -184,47 +205,16 @@ cr.define('options.passwordManager', function() {
   var PasswordExceptionsList = cr.ui.define('list');
 
   PasswordExceptionsList.prototype = {
-    __proto__: List.prototype,
-    /**
-     * Called when an element is decorated as a list.
-     */
-    decorate: function() {
-      List.prototype.decorate.call(this);
-
-      this.dataModel = new ArrayDataModel([]);
-    },
+    __proto__: DeletableItemList.prototype,
 
-    /**
-     * Creates an item to go in the list.
-     * @param {Object} entry The element from the data model for this row.
-     */
-    createItem: function(entry) {
+    /** @inheritDoc */
+    createItemContents: function(entry) {
       return new PasswordExceptionsListItem(entry);
     },
 
-    /**
-     * Adds an entry to the js model.
-     * @param {Array} entry A pair of the form [url, username].
-     */
-    addEntry: function(entry) {
-      this.dataModel.push(entry);
-      this.listArea.updateButtonSensitivity();
-    },
-
-    /**
-     * Remove all entries from the js model.
-     */
-    clear: function() {
-      this.dataModel = new ArrayDataModel([]);
-      this.listArea.updateButtonSensitivity();
-    },
-
-    /**
-     * Remove selected row from browser's model.
-     */
-    removeSelectedRow: function() {
-      var selectedIndex = this.selectionModel.selectedIndex;
-      PasswordManager.removePasswordException(selectedIndex);
+    /** @inheritDoc */
+    deleteItemAtIndex: function(index) {
+      PasswordManager.removePasswordException(index);
     },
 
     /**
@@ -235,165 +225,10 @@ cr.define('options.passwordManager', function() {
     },
   };
 
-  /**
-   * Create a new passwords list area.
-   * @constructor
-   * @extends {cr.ui.div}
-   */
-  var PasswordsListArea = cr.ui.define('div');
-
-  PasswordsListArea.prototype = {
-    __proto__: HTMLDivElement.prototype,
-
-    decorate: function() {
-      this.passwordsList = this.querySelector('list');
-      this.passwordsList.listArea = this;
-
-      PasswordsList.decorate(this.passwordsList);
-      this.passwordsList.selectionModel.addEventListener(
-          'change', this.handleOnSelectionChange_.bind(this));
-
-      var removeRow = cr.doc.createElement('button');
-      removeRow.textContent = templateData.passwordsRemoveButton;
-      this.appendChild(removeRow);
-      this.removeRow = removeRow;
-
-      var removeAll = cr.doc.createElement('button');
-      removeAll.textContent = templateData.passwordsRemoveAllButton;
-      this.appendChild(removeAll);
-      this.removeAll = removeAll;
-
-      var showHidePassword = cr.doc.createElement('button');
-      showHidePassword.textContent = templateData.passwordsShowButton;
-      this.appendChild(showHidePassword);
-      this.showHidePassword = showHidePassword;
-      this.showingPassword = false
-
-      var passwordLabel = cr.doc.createElement('span');
-      this.appendChild(passwordLabel);
-      this.passwordLabel = passwordLabel;
-
-      var self = this;
-      removeRow.onclick = function(event) {
-        self.passwordsList.removeSelectedRow();
-      };
-
-      removeAll.onclick = function(event) {
-        AlertOverlay.show(
-            undefined,
-            localStrings.getString('passwordsRemoveAllWarning'),
-            localStrings.getString('yesButtonLabel'),
-            localStrings.getString('noButtonLabel'),
-            function() { PasswordManager.removeAllPasswords(); });
-      };
-
-      showHidePassword.onclick = function(event) {
-        if(self.showingPassword) {
-          self.passwordLabel.textContent = "";
-          this.textContent = templateData.passwordsShowButton;
-        } else {
-          self.passwordsList.showSelectedPassword();
-          this.textContent = templateData.passwordsHideButton;
-        }
-        self.showingPassword = !self.showingPassword;
-      };
-
-      this.updateButtonSensitivity();
-    },
-
-    displayReturnedPassword: function(password) {
-      this.passwordLabel.textContent = password;
-    },
-
-    /**
-     * Update the button's states
-     */
-    updateButtonSensitivity: function() {
-      var selectionSize = this.passwordsList.selectedItems.length;
-      this.removeRow.disabled = selectionSize == 0;
-      this.showHidePassword.disabled = selectionSize == 0;
-      this.removeAll.disabled = this.passwordsList.length == 0;
-    },
-
-    /**
-     * Callback from selection model
-     * @param {!cr.Event} ce Event with change info.
-     * @private
-     */
-    handleOnSelectionChange_: function(ce) {
-      this.passwordLabel.textContent = "";
-      this.showHidePassword.textContent = templateData.passwordsShowButton;
-      this.showingPassword = false;
-      this.updateButtonSensitivity();
-    },
-  };
-
-  /**
-   * Create a new passwords list area.
-   * @constructor
-   * @extends {cr.ui.div}
-   */
-  var PasswordExceptionsListArea = cr.ui.define('div');
-
-  PasswordExceptionsListArea.prototype = {
-    __proto__: HTMLDivElement.prototype,
-
-    decorate: function() {
-      this.passwordExceptionsList = this.querySelector('list');
-      this.passwordExceptionsList.listArea = this;
-
-      PasswordExceptionsList.decorate(this.passwordExceptionsList);
-      this.passwordExceptionsList.selectionModel.addEventListener(
-          'change', this.handleOnSelectionChange_.bind(this));
-
-      var removeRow = cr.doc.createElement('button');
-      removeRow.textContent = templateData.passwordsRemoveButton;
-      this.appendChild(removeRow);
-      this.removeRow = removeRow;
-
-      var removeAll = cr.doc.createElement('button');
-      removeAll.textContent = templateData.passwordsRemoveAllButton;
-      this.appendChild(removeAll);
-      this.removeAll = removeAll;
-
-      var self = this;
-      removeRow.onclick = function(event) {
-        self.passwordExceptionsList.removeSelectedRow();
-      };
-
-      removeAll.onclick = function(event) {
-        PasswordManager.removeAllPasswordExceptions();
-      };
-
-      this.updateButtonSensitivity();
-    },
-
-    /**
-     * Update the button's states
-     */
-    updateButtonSensitivity: function() {
-      var selectionSize = this.passwordExceptionsList.selectedItems.length;
-      this.removeRow.disabled = selectionSize == 0;
-      this.removeAll.disabled = this.passwordExceptionsList.length == 0;
-    },
-
-    /**
-     * Callback from selection model
-     * @param {!cr.Event} ce Event with change info.
-     * @private
-     */
-    handleOnSelectionChange_: function(ce) {
-      this.updateButtonSensitivity();
-    },
-  };
-
-
   return {
-    PasswordsListItem: PasswordsListItem,
+    PasswordListItem: PasswordListItem,
     PasswordExceptionsListItem: PasswordExceptionsListItem,
     PasswordsList: PasswordsList,
     PasswordExceptionsList: PasswordExceptionsList,
-    PasswordsListArea: PasswordsListArea,
-    PasswordExceptionsListArea: PasswordExceptionsListArea
   };
 });