Allow editing passwords in settings/passwords

chrome/browser/resources/options/password_manager_list.js

 // Copyright (c) 2012 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.
 
 cr.define('options.passwordManager', function() {
   /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
   /** @const */ var DeletableItemList = options.DeletableItemList;
   /** @const */ var DeletableItem = options.DeletableItem;
+  /** @const */ var InlineEditableItemList = options.InlineEditableItemList;
+  /** @const */ var InlineEditableItem = options.InlineEditableItem;
   /** @const */ var List = cr.ui.List;
 
   /**
    * Creates a new passwords list item.
    * @param {ArrayDataModel} dataModel The data model that contains this item.
    * @param {Array} entry An array of the form [url, username, password]. When
    *     the list has been filtered, a fourth element [index] may be present.
    * @param {boolean} showPasswords If true, add a button to the element to
    *     allow the user to reveal the saved password.
    * @constructor
-   * @extends {cr.ui.ListItem}
+   * @extends {options.InlineEditableItem}
    */
   function PasswordListItem(dataModel, entry, showPasswords) {
     var el = cr.doc.createElement('div');
     el.dataItem = entry;
     el.dataModel = dataModel;
     el.__proto__ = PasswordListItem.prototype;
     el.decorate(showPasswords);
 
     return el;
   }
 
   PasswordListItem.prototype = {
-    __proto__: DeletableItem.prototype,
+    __proto__: InlineEditableItem.prototype,
 
     /** @override */
     decorate: function(showPasswords) {
-      DeletableItem.prototype.decorate.call(this);
+      InlineEditableItem.prototype.decorate.call(this);
+
+      // The user can edit the saved passwords if and only if he can reveal
+      // them.
+      this.editable = showPasswords;
 
       // The URL of the site.
       var urlLabel = this.ownerDocument.createElement('div');
       urlLabel.classList.add('favicon-cell');
       urlLabel.classList.add('weakrtl');
       urlLabel.classList.add('url');
       urlLabel.setAttribute('title', this.url);
       urlLabel.textContent = this.url;
 
       // The favicon URL is prefixed with "origin/", which essentially removes
@@ skipping 18 matching lines @@
 
       // The password input field.
       var passwordInput = this.ownerDocument.createElement('input');
       passwordInput.type = 'password';
       passwordInput.className = 'inactive-password';
       passwordInput.readOnly = true;
       passwordInput.value = showPasswords ? this.password : '********';
       passwordInputDiv.appendChild(passwordInput);
       this.passwordField = passwordInput;
 
-      // The show/hide button.
       if (showPasswords) {
+        // The show/hide button.
         var button = this.ownerDocument.createElement('button');
         button.hidden = true;
         button.className = 'list-inline-button custom-appearance';
         button.textContent = loadTimeData.getString('passwordShowButton');
         button.addEventListener('click', this.onClick_.bind(this), true);
         button.addEventListener('mousedown', function(event) {
           // Don't focus on this button by mousedown.
           event.preventDefault();
           // Don't handle list item selection. It causes focus change.
           event.stopPropagation();
         }, false);
         passwordInputDiv.appendChild(button);
         this.passwordShowButton = button;
+
+        // Makes the password input field editable.
+        this.addEditField(passwordInput, null);
+        this.addEventListener('canceledit', this.onEditCancelled_);
+        this.addEventListener('commitedit', this.onEditCommitted_);
       }
 
       this.contentElement.appendChild(passwordInputDiv);
     },
 
     /** @override */
     selectionChanged: function() {
+      InlineEditableItem.prototype.selectionChanged.call(this);
+
       var input = this.passwordField;
       var button = this.passwordShowButton;
       // The button doesn't exist when passwords can't be shown.
       if (!button)
         return;
 
       if (this.selected) {
         input.classList.remove('inactive-password');
         button.hidden = false;
       } else {
         input.classList.add('inactive-password');
         button.hidden = true;
       }
     },
 
+    /** @override */
+    get currentInputIsValid() {
+      return !!this.passwordField.value;
+    },
+
+    /** @override */
+    get hasBeenEdited() {
+      return this.passwordField.value != this.password;
+    },
+
     /**
      * Reveals the plain text password of this entry.
      */
     showPassword: function(password) {
+      this.password = password;
       this.passwordField.value = password;
       this.passwordField.type = 'text';
+      this.passwordField.readOnly = false;
 
       var button = this.passwordShowButton;
       if (button)
         button.textContent = loadTimeData.getString('passwordHideButton');
     },
 
     /**
      * Hides the plain text password of this entry.
      */
     hidePassword: function() {
       this.passwordField.type = 'password';
+      this.passwordField.readOnly = true;
 
       var button = this.passwordShowButton;
       if (button)
         button.textContent = loadTimeData.getString('passwordShowButton');
     },
 
     /**
      * Get the original index of this item in the data model.
      * @return {number} The index.
      * @private
@@ skipping 11 matching lines @@
     onClick_: function(event) {
       if (this.passwordField.type == 'password') {
         // After the user is authenticated, showPassword() will be called.
         PasswordManager.requestShowPassword(this.getOriginalIndex_());
       } else {
         this.hidePassword();
       }
     },
 
     /**
+     * Called when cancelling a password edit. Resets the password input field.
+     * @param {Event} event The canceledit event.
+     * @private
+     */
+    onEditCancelled_: function(event) {
+      this.passwordField.value = this.password;
+    },
+
+    /**
+     * Called when committing a password edit. Updates the password.
+     * @param {Event} event The commitedit event.
+     * @private
+     */
+    onEditCommitted_: function(event) {
+      this.password = this.passwordField.value;
+      PasswordManager.updatePassword(
+          this.getOriginalIndex_(), this.passwordField.value);
+    },
+
+    /**
      * Get and set the URL for the entry.
      * @type {string}
      */
     get url() {
       return this.dataItem[0];
     },
     set url(url) {
       this.dataItem[0] = url;
     },
 
@@ skipping 69 matching lines @@
       return this.dataItem;
     },
     set url(url) {
       this.dataItem = url;
     },
   };
 
   /**
    * Create a new passwords list.
    * @constructor
-   * @extends {cr.ui.List}
+   * @extends {options.InlineEditableItemList}
    */
   var PasswordsList = cr.ui.define('list');
 
   PasswordsList.prototype = {
-    __proto__: DeletableItemList.prototype,
+    __proto__: InlineEditableItemList.prototype,
 
     /**
      * Whether passwords can be revealed or not.
      * @type {boolean}
      * @private
      */
     showPasswords_: true,
 
     /** @override */
     decorate: function() {
-      DeletableItemList.prototype.decorate.call(this);
+      InlineEditableItemList.prototype.decorate.call(this);
       Preferences.getInstance().addEventListener(
           'profile.password_manager_allow_show_passwords',
           this.onPreferenceChanged_.bind(this));
     },
 
     /**
      * Listener for changes on the preference.
      * @param {Event} event The preference update event.
      * @private
      */
@@ skipping 58 matching lines @@
     },
   };
 
   return {
     PasswordListItem: PasswordListItem,
     PasswordExceptionsListItem: PasswordExceptionsListItem,
     PasswordsList: PasswordsList,
     PasswordExceptionsList: PasswordExceptionsList,
   };
 });