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 c1b62de260ae7b9a539db59c148190577dd4a3e7..78c9912b629381f11b1170e1d39995d8adb51f2f 100644 |
--- a/chrome/browser/resources/options/password_manager_list.js |
+++ b/chrome/browser/resources/options/password_manager_list.js |
@@ -6,8 +6,6 @@ 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; |
/** |
@@ -19,7 +17,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 {options.InlineEditableItem} |
+ * @extends {options.DeletableItem} |
*/ |
function PasswordListItem(dataModel, entry, showPasswords) { |
var el = cr.doc.createElement('div'); |
@@ -32,248 +30,110 @@ cr.define('options.passwordManager', function() { |
} |
PasswordListItem.prototype = { |
- __proto__: InlineEditableItem.prototype, |
+ __proto__: DeletableItem.prototype, |
/** @override */ |
decorate: function(showPasswords) { |
- InlineEditableItem.prototype.decorate.call(this); |
+ DeletableItem.prototype.decorate.call(this); |
- this.isPlaceholder = !this.url; |
+ // 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; |
- this.contentElement.appendChild(this.createUrlElement()); |
- this.contentElement.appendChild(this.createUsernameElement()); |
+ // The favicon URL is prefixed with "origin/", which essentially removes |
+ // the URL path past the top-level domain and ensures that a scheme (e.g., |
+ // http) is being used. This ensures that the favicon returned is the |
+ // default favicon for the domain and that the URL has a scheme if none |
+ // is present in the password manager. |
+ urlLabel.style.backgroundImage = getFaviconImageSet( |
+ 'origin/' + this.url, 16); |
+ this.contentElement.appendChild(urlLabel); |
+ |
+ // The stored username. |
+ var usernameLabel = this.ownerDocument.createElement('div'); |
+ usernameLabel.className = 'name'; |
+ usernameLabel.textContent = this.username; |
+ usernameLabel.title = this.username; |
+ this.contentElement.appendChild(usernameLabel); |
+ // The stored password. |
var passwordInputDiv = this.ownerDocument.createElement('div'); |
passwordInputDiv.className = 'password'; |
// The password input field. |
var passwordInput = this.ownerDocument.createElement('input'); |
passwordInput.type = 'password'; |
- if (!this.isPlaceholder) { |
- passwordInput.className = 'inactive-password'; |
- passwordInput.readOnly = true; |
- passwordInput.value = showPasswords ? this.password : '********'; |
- } |
- this.passwordField = passwordInput; |
- |
- // Makes the password input field editable. |
- this.addEditField(passwordInput, null); |
- |
- // Keeps the password validity updated. |
- this.updatePasswordValidity_(); |
- passwordInput.addEventListener('input', function(event) { |
- this.updatePasswordValidity_(); |
- }.bind(this)); |
- |
+ passwordInput.className = 'inactive-password'; |
+ passwordInput.readOnly = true; |
+ passwordInput.value = showPasswords ? this.password : '********'; |
passwordInputDiv.appendChild(passwordInput); |
+ this.passwordField = passwordInput; |
- // The list-inline buttons. |
- if (!this.isPlaceholder) { |
- // The container of the list-inline buttons. |
- var buttonsContainer = this.ownerDocument.createElement('div'); |
- buttonsContainer.className = 'list-inline-buttons-container'; |
- |
- var mousedownEventHandler = function(event) { |
+ // The show/hide button. |
+ if (showPasswords) { |
+ 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(); |
- }; |
- |
- // The overwrite button. |
- var overwriteButton = this.ownerDocument.createElement('button'); |
- overwriteButton.className = 'list-inline-button custom-appearance'; |
- overwriteButton.textContent = loadTimeData.getString( |
- 'passwordOverwriteButton'); |
- overwriteButton.addEventListener( |
- 'click', this.onClickOverwriteButton_.bind(this), true); |
- overwriteButton.addEventListener( |
- 'mousedown', mousedownEventHandler, false); |
- buttonsContainer.appendChild(overwriteButton); |
- this.passwordOverwriteButton = overwriteButton; |
- |
- // The show/hide button. |
- if (showPasswords) { |
- var button = this.ownerDocument.createElement('button'); |
- button.className = 'list-inline-button custom-appearance'; |
- button.textContent = loadTimeData.getString('passwordShowButton'); |
- button.addEventListener( |
- 'click', this.onClickShowButton_.bind(this), true); |
- button.addEventListener('mousedown', mousedownEventHandler, false); |
- buttonsContainer.appendChild(button); |
- this.passwordShowButton = button; |
- } |
- |
- passwordInputDiv.appendChild(buttonsContainer); |
+ }, false); |
+ passwordInputDiv.appendChild(button); |
+ this.passwordShowButton = button; |
} |
this.contentElement.appendChild(passwordInputDiv); |
- |
- // Adds the event listeners for editing. |
- this.addEventListener('canceledit', this.resetInputs); |
- this.addEventListener('commitedit', this.finishEdit); |
- }, |
- |
- /** |
- * Constructs and returns the URL element for this item. |
- * @return {HTMLElement} The URL element. |
- * @protected |
- */ |
- createUrlElement: function() { |
- var urlEl = this.ownerDocument.createElement('div'); |
- urlEl.className = 'favicon-cell weakrtl url'; |
- urlEl.setAttribute('title', this.url); |
- urlEl.textContent = this.url; |
- |
- // The favicon URL is prefixed with "origin/", which essentially removes |
- // the URL path past the top-level domain and ensures that a scheme (e.g., |
- // http) is being used. This ensures that the favicon returned is the |
- // default favicon for the domain and that the URL has a scheme if none is |
- // present in the password manager. |
- urlEl.style.backgroundImage = getFaviconImageSet( |
- 'origin/' + this.url, 16); |
- return urlEl; |
- }, |
- |
- /** |
- * Constructs and returns the username element for this item. |
- * @return {HTMLElement} The username element. |
- * @protected |
- */ |
- createUsernameElement: function() { |
- var usernameEl = this.ownerDocument.createElement('div'); |
- usernameEl.className = 'name'; |
- usernameEl.textContent = this.username; |
- usernameEl.title = this.username; |
- return usernameEl; |
}, |
/** @override */ |
selectionChanged: function() { |
- InlineEditableItem.prototype.selectionChanged.call(this); |
- |
- // Don't set 'inactive-password' class for the placeholder so that it |
- // shows the background and the borders. |
- if (this.isPlaceholder) |
+ var input = this.passwordField; |
+ var button = this.passwordShowButton; |
+ // The button doesn't exist when passwords can't be shown. |
+ if (!button) |
return; |
- this.passwordField.classList.toggle('inactive-password', !this.selected); |
- }, |
- |
- /** @override */ |
- get currentInputIsValid() { |
- return !!this.passwordField.value; |
- }, |
- |
- /** |
- * Returns if the password has been edited. |
- * @return {boolean} Whether the password has been edited. |
- * @protected |
- */ |
- passwordHasBeenEdited: function() { |
- return this.passwordField.value != this.password || this.overwriting; |
- }, |
- |
- /** @override */ |
- get hasBeenEdited() { |
- return this.passwordHasBeenEdited(); |
+ if (this.selected) { |
+ input.classList.remove('inactive-password'); |
+ button.hidden = false; |
+ } else { |
+ input.classList.add('inactive-password'); |
+ button.hidden = true; |
+ } |
}, |
/** |
- * Reveals the plain text password of this entry. Never called for the Add |
- * New Entry row. |
- * @param {string} password The plain text password. |
+ * Reveals the plain text password of this entry. |
*/ |
showPassword: function(password) { |
- this.overwriting = false; |
- this.password = password; |
- this.setPasswordFieldValue_(password); |
+ this.passwordField.value = password; |
this.passwordField.type = 'text'; |
- this.passwordField.readOnly = false; |
- this.passwordOverwriteButton.hidden = true; |
var button = this.passwordShowButton; |
if (button) |
button.textContent = loadTimeData.getString('passwordHideButton'); |
}, |
/** |
- * Hides the plain text password of this entry. Never called for the Add |
- * New Entry row. |
- * @private |
+ * Hides the plain text password of this entry. |
*/ |
- hidePassword_: function() { |
+ hidePassword: function() { |
this.passwordField.type = 'password'; |
- this.passwordField.readOnly = true; |
- this.passwordOverwriteButton.hidden = false; |
var button = this.passwordShowButton; |
if (button) |
button.textContent = loadTimeData.getString('passwordShowButton'); |
}, |
/** |
- * Resets the input fields to their original values and states. |
- * @protected |
- */ |
- resetInputs: function() { |
- this.finishOverwriting_(); |
- this.setPasswordFieldValue_(this.password); |
- }, |
- |
- /** |
- * Commits the new data to the browser. |
- * @protected |
- */ |
- finishEdit: function() { |
- this.password = this.passwordField.value; |
- this.finishOverwriting_(); |
- PasswordManager.updatePassword( |
- this.getOriginalIndex_(), this.passwordField.value); |
- }, |
- |
- /** |
- * Called with the response of the browser, which indicates the validity of |
- * the URL. |
- * @param {string} url The URL. |
- * @param {boolean} valid The validity of the URL. |
- */ |
- originValidityCheckComplete: function(url, valid) { |
- assertNotReached(); |
- }, |
- |
- /** |
- * Updates the custom validity of the password input field. |
- * @private |
- */ |
- updatePasswordValidity_: function() { |
- this.passwordField.setCustomValidity(this.passwordField.value ? |
- '' : loadTimeData.getString('editPasswordInvalidPasswordTooltip')); |
- }, |
- |
- /** |
- * Finishes password overwriting. |
- * @private |
- */ |
- finishOverwriting_: function() { |
- if (!this.overwriting) |
- return; |
- this.overwriting = false; |
- this.passwordOverwriteButton.hidden = false; |
- this.passwordField.readOnly = true; |
- }, |
- |
- /** |
- * Sets the value of the password input field. |
- * @param {string} password The new value. |
- * @private |
- */ |
- setPasswordFieldValue_: function(password) { |
- this.passwordField.value = password; |
- this.updatePasswordValidity_(); |
- }, |
- |
- /** |
* Get the original index of this item in the data model. |
* @return {number} The index. |
* @private |
@@ -284,34 +144,16 @@ cr.define('options.passwordManager', function() { |
}, |
/** |
- * Called when clicking the overwrite button. Allows the user to overwrite |
- * the hidden password. |
- * @param {Event} event The click event. |
- * @private |
- */ |
- onClickOverwriteButton_: function(event) { |
- this.overwriting = true; |
- this.passwordOverwriteButton.hidden = true; |
- |
- this.setPasswordFieldValue_(''); |
- this.passwordField.readOnly = false; |
- this.passwordField.focus(); |
- }, |
- |
- /** |
* On-click event handler. Swaps the type of the input field from password |
* to text and back. |
* @private |
*/ |
- onClickShowButton_: function(event) { |
- // Prevents committing an edit. |
- this.resetInputs(); |
- |
+ onClick_: function(event) { |
if (this.passwordField.type == 'password') { |
// After the user is authenticated, showPassword() will be called. |
PasswordManager.requestShowPassword(this.getOriginalIndex_()); |
} else { |
- this.hidePassword_(); |
+ this.hidePassword(); |
} |
}, |
@@ -320,7 +162,7 @@ cr.define('options.passwordManager', function() { |
* @type {string} |
*/ |
get url() { |
- return this.dataItem[0] || ''; |
+ return this.dataItem[0]; |
}, |
set url(url) { |
this.dataItem[0] = url; |
@@ -331,7 +173,7 @@ cr.define('options.passwordManager', function() { |
* @type {string} |
*/ |
get username() { |
- return this.dataItem[1] || ''; |
+ return this.dataItem[1]; |
}, |
set username(username) { |
this.dataItem[1] = username; |
@@ -342,7 +184,7 @@ cr.define('options.passwordManager', function() { |
* @type {string} |
*/ |
get password() { |
- return this.dataItem[2] || ''; |
+ return this.dataItem[2]; |
}, |
set password(password) { |
this.dataItem[2] = password; |
@@ -350,125 +192,6 @@ cr.define('options.passwordManager', function() { |
}; |
/** |
- * Creates a new passwords list item for the Add New Entry row. |
- * @param {ArrayDataModel} dataModel The data model that contains this item. |
- * @constructor |
- * @extends {options.passwordManager.PasswordListItem} |
- */ |
- function PasswordAddRowListItem(dataModel) { |
- var el = cr.doc.createElement('div'); |
- el.dataItem = []; |
- el.dataModel = dataModel; |
- el.__proto__ = PasswordAddRowListItem.prototype; |
- el.decorate(); |
- |
- return el; |
- } |
- |
- PasswordAddRowListItem.prototype = { |
- __proto__: PasswordListItem.prototype, |
- |
- /** @override */ |
- decorate: function() { |
- PasswordListItem.prototype.decorate.call(this, false); |
- |
- this.urlField.placeholder = loadTimeData.getString( |
- 'newPasswordUrlFieldPlaceholder'); |
- this.usernameField.placeholder = loadTimeData.getString( |
- 'newPasswordUsernameFieldPlaceholder'); |
- this.passwordField.placeholder = loadTimeData.getString( |
- 'newPasswordPasswordFieldPlaceholder'); |
- |
- // Sets the validity of the URL initially. |
- this.setUrlValid_(false); |
- }, |
- |
- /** @override */ |
- createUrlElement: function() { |
- var urlEl = this.createEditableTextCell(''); |
- urlEl.className += ' favicon-cell weakrtl url'; |
- |
- var urlField = urlEl.querySelector('input'); |
- urlField.addEventListener('input', this.onUrlInput_.bind(this)); |
- this.urlField = urlField; |
- |
- return urlEl; |
- }, |
- |
- /** @override */ |
- createUsernameElement: function() { |
- var usernameEl = this.createEditableTextCell(''); |
- usernameEl.className = 'name'; |
- |
- this.usernameField = usernameEl.querySelector('input'); |
- |
- return usernameEl; |
- }, |
- |
- /** @override */ |
- get currentInputIsValid() { |
- return this.urlValidityKnown && this.urlIsValid && |
- this.passwordField.value; |
- }, |
- |
- /** @override */ |
- get hasBeenEdited() { |
- return this.urlField.value || this.usernameField.value || |
- this.passwordHasBeenEdited(); |
- }, |
- |
- /** @override */ |
- resetInputs: function() { |
- PasswordListItem.prototype.resetInputs.call(this); |
- |
- this.urlField.value = ''; |
- this.usernameField.value = ''; |
- |
- this.setUrlValid_(false); |
- }, |
- |
- /** @override */ |
- finishEdit: function() { |
- var newUrl = this.urlField.value; |
- var newUsername = this.usernameField.value; |
- var newPassword = this.passwordField.value; |
- this.resetInputs(); |
- |
- PasswordManager.addPassword(newUrl, newUsername, newPassword); |
- }, |
- |
- /** @override */ |
- originValidityCheckComplete: function(url, valid) { |
- if (url == this.urlField.value) |
- this.setUrlValid_(valid); |
- }, |
- |
- /** |
- * Updates whether the URL in the input is valid. |
- * @param {boolean} valid The validity of the URL. |
- * @private |
- */ |
- setUrlValid_: function(valid) { |
- this.urlIsValid = valid; |
- this.urlValidityKnown = true; |
- if (this.urlField) { |
- this.urlField.setCustomValidity(valid ? |
- '' : loadTimeData.getString('editPasswordInvalidUrlTooltip')); |
- } |
- }, |
- |
- /** |
- * Called when inputting to a URL input. |
- * @param {Event} event The input event. |
- * @private |
- */ |
- onUrlInput_: function(event) { |
- this.urlValidityKnown = false; |
- PasswordManager.checkOriginValidityForAdding(this.urlField.value); |
- }, |
- }; |
- |
- /** |
* Creates a new PasswordExceptions list item. |
* @param {Array} entry A pair of the form [url, username]. |
* @constructor |
@@ -494,7 +217,9 @@ cr.define('options.passwordManager', function() { |
// The URL of the site. |
var urlLabel = this.ownerDocument.createElement('div'); |
- urlLabel.className = 'url favicon-cell weakrtl'; |
+ urlLabel.className = 'url'; |
+ urlLabel.classList.add('favicon-cell'); |
+ urlLabel.classList.add('weakrtl'); |
urlLabel.textContent = this.url; |
// The favicon URL is prefixed with "origin/", which essentially removes |
@@ -522,12 +247,12 @@ cr.define('options.passwordManager', function() { |
/** |
* Create a new passwords list. |
* @constructor |
- * @extends {options.InlineEditableItemList} |
+ * @extends {options.DeletableItemList} |
*/ |
var PasswordsList = cr.ui.define('list'); |
PasswordsList.prototype = { |
- __proto__: InlineEditableItemList.prototype, |
+ __proto__: DeletableItemList.prototype, |
/** |
* Whether passwords can be revealed or not. |
@@ -538,7 +263,7 @@ cr.define('options.passwordManager', function() { |
/** @override */ |
decorate: function() { |
- InlineEditableItemList.prototype.decorate.call(this); |
+ DeletableItemList.prototype.decorate.call(this); |
Preferences.getInstance().addEventListener( |
'profile.password_manager_allow_show_passwords', |
this.onPreferenceChanged_.bind(this)); |
@@ -559,9 +284,6 @@ cr.define('options.passwordManager', function() { |
* @param {Array} entry |
*/ |
createItem: function(entry) { |
- if (!entry) |
- return new PasswordAddRowListItem(this.dataModel); |
- |
var showPasswords = this.showPasswords_; |
if (loadTimeData.getBoolean('disableShowPasswords')) |
@@ -621,7 +343,6 @@ cr.define('options.passwordManager', function() { |
return { |
PasswordListItem: PasswordListItem, |
- PasswordAddRowListItem: PasswordAddRowListItem, |
PasswordExceptionsListItem: PasswordExceptionsListItem, |
PasswordsList: PasswordsList, |
PasswordExceptionsList: PasswordExceptionsList, |