Implement Password Exceptions Tab

chrome/browser/resources/options/passwords_exceptions_list.js

Index: chrome/browser/resources/options/passwords_exceptions_list.js
diff --git a/chrome/browser/resources/options/passwords_exceptions_list.js b/chrome/browser/resources/options/passwords_exceptions_list.js
index 8bf232e1a36eb9f97e8f275c7bfa5afe83aff74e..261a3b0d086a62da39f18505d4646919a6d41967 100644
--- a/chrome/browser/resources/options/passwords_exceptions_list.js
+++ b/chrome/browser/resources/options/passwords_exceptions_list.js
@@ -36,13 +36,12 @@ cr.define('options.passwordsExceptions', function() {
       var urlLabel = cr.doc.createElement('span');
       urlLabel.textContent = this.url;
       this.appendChild(urlLabel);
+      this.urlLabel = urlLabel;
 
       var usernameLabel = cr.doc.createElement('span');
       usernameLabel.textContent = this.username;
       usernameLabel.className = 'passwordsUsername';
       this.appendChild(usernameLabel);
-
-      this.urlLabel = urlLabel;
       this.usernameLabel = usernameLabel;
     },
 
@@ -63,12 +62,56 @@ cr.define('options.passwordsExceptions', function() {
      */
     get username() {
       return this.dataItem[1];
-    },
-    set username(username) {
+     },
+     set username(username) {
       this.dataItem[1] = username;
+     },
+  };
+
+  /**
+   * Creates a new PasswordExceptions list item.
+   * @param {Array} entry A pair of the form [url, username].
+   * @constructor
+   * @extends {cr.ui.ListItem}
+   */
+  function PasswordExceptionsListItem(entry) {
+    var el = cr.doc.createElement('li');
+    el.dataItem = entry;
+    el.__proto__ = PasswordExceptionsListItem.prototype;
+    el.decorate();
+
+    return el;
+  }
+
+  PasswordExceptionsListItem.prototype = {
+    __proto__: ListItem.prototype,
+
+    /**
+     * Call when an element is decorated as a list item.
+     */
+    decorate: function() {
+      ListItem.prototype.decorate.call(this);
+
+      // Labels for display
+      var urlLabel = cr.doc.createElement('span');
+      urlLabel.textContent = this.url;
+      this.appendChild(urlLabel);
+      this.urlLabel = urlLabel;
+    },
+
+    /**
+     * Get the url for the entry.
+     * @type {string}
+     */
+    get url() {
+      return this.dataItem;
+    },
+    set url(url) {
+      this.dataItem = url;
     },
   };
 
+
   /**
    * Create a new passwords list.
    * @constructor
@@ -101,6 +144,7 @@ cr.define('options.passwordsExceptions', function() {
      */
     addEntry: function(entry) {
       this.dataModel.push(entry);
+      this.listArea.updateButtonSensitivity();
     },
 
     /**
@@ -108,6 +152,7 @@ cr.define('options.passwordsExceptions', function() {
      */
     clear: function() {
       this.dataModel = new ArrayDataModel([]);
+      this.listArea.updateButtonSensitivity();
     },
 
     /**
@@ -115,7 +160,7 @@ cr.define('options.passwordsExceptions', function() {
      */
     removeSelectedRow: function() {
       var selectedIndex = this.selectionModel.selectedIndex;
-      PasswordsExceptions.removeAutofillable(selectedIndex);
+      PasswordsExceptions.removeSavedPassword(selectedIndex);
     },
 
     showSelectedPassword: function() {
@@ -123,16 +168,86 @@ cr.define('options.passwordsExceptions', function() {
       PasswordsExceptions.showSelectedPassword(selectedIndex);
     },
 
+    /**
+     * The length of the list.
+     */
+    get length() {
+      return this.dataModel.length;
+    },
   };
 
-  var ListArea = cr.ui.define('div');
+  /**
+   * Create a new passwords list.
+   * @constructor
+   * @extends {cr.ui.List}
+   */
+  var PasswordExceptionsList = cr.ui.define('list');
 
-  ListArea.prototype = {
+  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([]);
+    },
+
+    /**
+     * 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 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;
+      PasswordsExceptions.removePasswordException(selectedIndex);
+    },
+
+    /**
+     * The length of the list.
+     */
+    get length() {
+      return this.dataModel.length;
+    },
+  };
+
+  /**
+   * 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.contentType = this.contentType;
+      this.passwordsList.listArea = this;
 
       PasswordsList.decorate(this.passwordsList);
       this.passwordsList.selectionModel.addEventListener(
@@ -143,6 +258,11 @@ cr.define('options.passwordsExceptions', function() {
       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);
@@ -158,6 +278,10 @@ cr.define('options.passwordsExceptions', function() {
         self.passwordsList.removeSelectedRow();
       };
 
+      removeAll.onclick = function(event) {
+        OptionsPage.showOverlay('passwordsRemoveAllOverlay');
+      };
+
       showHidePassword.onclick = function(event) {
         if(self.showingPassword) {
           self.passwordLabel.textContent = "";
@@ -172,17 +296,6 @@ cr.define('options.passwordsExceptions', function() {
       this.updateButtonSensitivity();
     },
 
-    /**
-     * The content type for the exceptions area, such as 'passwords'
-     * @type {string}
-     */
-    get contentType() {
-      return this.getAttribute('contentType');
-    },
-    set contentType(type) {
-      return this.getAttribute('contentType', type);
-    },
-
     displayReturnedPassword: function(password) {
       this.passwordLabel.textContent = password;
     },
@@ -191,9 +304,10 @@ cr.define('options.passwordsExceptions', function() {
      * Update the button's states
      */
     updateButtonSensitivity: function() {
-      var selectionSize = autofillableLoginsList.selectedItems.length;
+      var selectionSize = this.passwordsList.selectedItems.length;
       this.removeRow.disabled = selectionSize == 0;
       this.showHidePassword.disabled = selectionSize == 0;
+      this.removeAll.disabled = this.passwordsList.length == 0;
     },
 
     /**
@@ -209,9 +323,72 @@ cr.define('options.passwordsExceptions', function() {
     },
   };
 
+  /**
+   * 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', cr.bind(this.handleOnSelectionChange_, 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) {
+        PasswordsExceptions.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,
+    PasswordExceptionsListItem: PasswordExceptionsListItem,
     PasswordsList: PasswordsList,
-    ListArea: ListArea
+    PasswordExceptionsList: PasswordExceptionsList,
+    PasswordsListArea: PasswordsListArea,
+    PasswordExceptionsListArea: PasswordExceptionsListArea
   };
 });