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 2a77ea3281a64156448e79ac0329d683d30028e7..59f3ec871e45fbc590f79f5deeab74f809c455b9 100644 |
--- a/chrome/browser/resources/options/password_manager_list.js |
+++ b/chrome/browser/resources/options/password_manager_list.js |
@@ -6,6 +6,8 @@ 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; |
/** |
@@ -16,7 +18,7 @@ cr.define('options.passwordManager', function() { |
* @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'); |
@@ -29,11 +31,15 @@ cr.define('options.passwordManager', function() { |
} |
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'); |
@@ -72,8 +78,8 @@ cr.define('options.passwordManager', function() { |
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'; |
@@ -87,6 +93,11 @@ cr.define('options.passwordManager', function() { |
}, 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); |
@@ -94,6 +105,8 @@ cr.define('options.passwordManager', function() { |
/** @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. |
@@ -109,12 +122,24 @@ cr.define('options.passwordManager', function() { |
} |
}, |
+ /** @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) |
@@ -126,6 +151,7 @@ cr.define('options.passwordManager', function() { |
*/ |
hidePassword: function() { |
this.passwordField.type = 'password'; |
+ this.passwordField.readOnly = true; |
var button = this.passwordShowButton; |
if (button) |
@@ -157,6 +183,26 @@ cr.define('options.passwordManager', function() { |
}, |
/** |
+ * 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} |
*/ |
@@ -246,12 +292,12 @@ cr.define('options.passwordManager', function() { |
/** |
* 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. |
@@ -262,7 +308,7 @@ cr.define('options.passwordManager', function() { |
/** @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)); |