diff options
Diffstat (limited to 'chrome/browser/resources')
12 files changed, 242 insertions, 241 deletions
diff --git a/chrome/browser/resources/options/autofill_edit_address_overlay.js b/chrome/browser/resources/options/autofill_edit_address_overlay.js index 46a17d0..5794daa 100644 --- a/chrome/browser/resources/options/autofill_edit_address_overlay.js +++ b/chrome/browser/resources/options/autofill_edit_address_overlay.js @@ -75,7 +75,7 @@ cr.define('options', function() { address[10] = $('fax').value; address[11] = $('email').value; - chrome.send('updateAddress', address); + chrome.send('setAddress', address); }, /** diff --git a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js index 01b1722..c61255e 100644 --- a/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js +++ b/chrome/browser/resources/options/autofill_edit_creditcard_overlay.js @@ -68,7 +68,7 @@ cr.define('options', function() { creditCard[3] = $('expirationMonth').value; creditCard[4] = $('expirationYear').value; - chrome.send('updateCreditCard', creditCard); + chrome.send('setCreditCard', creditCard); }, /** diff --git a/chrome/browser/resources/options/autofill_options.css b/chrome/browser/resources/options/autofill_options.css index 0c18e3c..673731c 100644 --- a/chrome/browser/resources/options/autofill_options.css +++ b/chrome/browser/resources/options/autofill_options.css @@ -1,16 +1,12 @@ -div.autofill-section { - display: block; - padding: 1em 0 0; +.autofill-list-item { + -webkit-padding-start: 8px; } -#profile-select-container { - display: -webkit-box; +#autofill-options > div:last-child { + margin-top: 15px; } -#profile-select-left-column { - -webkit-box-flex: 1; -} - -#profile-select-left-column select { - width: 100%; +#autofill-options * div.settings-list > :last-child { + border-top: 1px solid #D9D9D9; + padding: 5px 10px; } diff --git a/chrome/browser/resources/options/autofill_options.html b/chrome/browser/resources/options/autofill_options.html index c5bbb72..727c9ae 100644 --- a/chrome/browser/resources/options/autofill_options.html +++ b/chrome/browser/resources/options/autofill_options.html @@ -1,38 +1,22 @@ <div id="autofill-options" class="page hidden"> <h1 i18n-content="autoFillOptionsTitle"></h1> - - <div id="profile-select-container" class="autofill-section"> - <div id="profile-select-left-column"> - <select id="profile-list" size="10"> - <option value="addressesHeader" disabled - i18n-content="addressesHeader"></option> - <option value="addressesHorizontalRule" disabled></option> - <option value="addressesBlankOption" disabled></option> - <option value="creditCardsHeader" disabled - i18n-content="creditCardsHeader"></option> - <option value="creditCardsHorizontalRule" disabled></option> - </select> + <h3 i18n-content="autoFillAddresses"></h3> + <div class="settings-list"> + <list id="address-list"></list> + <div> + <button id="autofill-add-address" i18n-content="autoFillAddAddress"> + </button> </div> + </div> + <h3 i18n-content="autoFillCreditCards"></h3> + <div class="settings-list"> + <list id="creditcard-list"></list> <div> - <div> - <button id="add-address-button" i18n-content="addAddressButton"> - </button> - </div> - <div> - <button id="add-credit-card-button" i18n-content="addCreditCardButton"> - </button> - </div> - <div> - <button id="autofill-edit-button" i18n-content="editButton"></button> - </div> - <div> - <button id="autofill-remove-button" i18n-content="deleteButton"> - </button> - </div> + <button id="autofill-add-creditcard" + i18n-content="autoFillAddCreditCard"></button> </div> </div> - - <div class="autofill-section"> + <div> <if expr="pp_ifdef('chromeos')"> <a href="http://www.google.com/support/chromeos/bin/answer.py?answer=142893" target="_blank" i18n-content="helpButton"></a> diff --git a/chrome/browser/resources/options/autofill_options.js b/chrome/browser/resources/options/autofill_options.js index 0c630fd..a3637c4 100644 --- a/chrome/browser/resources/options/autofill_options.js +++ b/chrome/browser/resources/options/autofill_options.js @@ -3,28 +3,18 @@ // found in the LICENSE file. cr.define('options', function() { - var OptionsPage = options.OptionsPage; - - // The offset of the first profile in either the address list or the credit - // card list. Consists of the header and the horizontal rule. - const addressOffset = 2; - const creditCardOffset = 3; + const OptionsPage = options.OptionsPage; + const ArrayDataModel = cr.ui.ArrayDataModel; + const ListSingleSelectionModel = cr.ui.ListSingleSelectionModel; ///////////////////////////////////////////////////////////////////////////// // AutoFillOptions class: - // - // TODO(jhawkins): Replace <select> with a DOMUI List. /** * Encapsulated handling of AutoFill options page. * @constructor */ function AutoFillOptions() { - this.numAddresses = 0; - this.numCreditCards = 0; - this.activeNavTab = null; - this.addressGUIDs = null; - this.creditCardGUIDs = null; OptionsPage.call(this, 'autoFillOptions', templateData.autoFillOptionsTitle, @@ -36,32 +26,58 @@ cr.define('options', function() { AutoFillOptions.prototype = { __proto__: OptionsPage.prototype, + /** + * The address list. + * @type {DeletableItemList} + * @private + */ + addressList_: null, + + /** + * The credit card list. + * @type {DeletableItemList} + * @private + */ + creditCardList_: null, + initializePage: function() { OptionsPage.prototype.initializePage.call(this); + this.createAddressList_(); + this.createCreditCardList_(); + var self = this; - $('profile-list').onchange = function(event) { - self.updateButtonState_(); - }; - $('profile-list').addEventListener('dblclick', function(event) { - if ($('autoFillEnabled').checked) - self.editProfile_(); - }); - $('add-address-button').onclick = function(event) { + $('autofill-add-address').onclick = function(event) { self.showAddAddressOverlay_(); }; - $('add-credit-card-button').onclick = function(event) { + $('autofill-add-creditcard').onclick = function(event) { self.showAddCreditCardOverlay_(); }; - $('autofill-edit-button').onclick = function(event) { - self.editProfile_(); - }; - $('autofill-remove-button').onclick = function(event) { - self.removeProfile_(); - }; - Preferences.getInstance().addEventListener('autofill.enabled', - this.updateButtonState_.bind(this)); + // TODO(jhawkins): What happens when AutoFill is disabled whilst on the + // AutoFill options page? + }, + + /** + * Creates, decorates and initializes the address list. + * @private + */ + createAddressList_: function() { + this.addressList_ = $('address-list'); + options.autoFillOptions.AutoFillList.decorate(this.addressList_); + this.addressList_.selectionModel = new ListSingleSelectionModel; + this.addressList_.autoExpands = true; + }, + + /** + * Creates, decorates and initializes the credit card list. + * @private + */ + createCreditCardList_: function() { + this.creditCardList_ = $('creditcard-list'); + options.autoFillOptions.AutoFillList.decorate(this.creditCardList_); + this.creditCardList_.selectionModel = new ListSingleSelectionModel; + this.creditCardList_.autoExpands = true; }, /** @@ -78,19 +94,6 @@ cr.define('options', function() { }, /** - * Shows the 'Edit address' overlay, using the data in |address| to fill the - * input fields. |address| is a list with one item, an associative array - * that contains the address data. - * @private - */ - showEditAddressOverlay_: function(address) { - var title = localStrings.getString('editAddressTitle'); - AutoFillEditAddressOverlay.setTitle(title); - AutoFillEditAddressOverlay.loadAddress(address[0]); - OptionsPage.showOverlay('autoFillEditAddressOverlay'); - }, - - /** * Shows the 'Add credit card' overlay, specifically by loading the * 'Edit credit card' overlay, emptying the input fields and modifying the * overlay title. @@ -104,177 +107,91 @@ cr.define('options', function() { }, /** - * Shows the 'Edit credit card' overlay, using the data in |credit_card| to - * fill the input fields. |address| is a list with one item, an associative - * array that contains the credit card data. - * @private + * Updates the data model for the address list with the values from + * |entries|. + * @param {Array} entries The list of addresses. */ - showEditCreditCardOverlay_: function(creditCard) { - var title = localStrings.getString('editCreditCardTitle'); - AutoFillEditCreditCardOverlay.setTitle(title); - AutoFillEditCreditCardOverlay.loadCreditCard(creditCard[0]); - OptionsPage.showOverlay('autoFillEditCreditCardOverlay'); + setAddressList_: function(entries) { + this.addressList_.dataModel = new ArrayDataModel(entries); }, /** - * Resets the address list. This method leaves the header and horizontal - * rule unchanged. - * @private + * Updates the data model for the credit card list with the values from + * |entries|. + * @param {Array} entries The list of credit cards. */ - resetAddresses_: function() { - var profiles = $('profile-list'); - for (var i = 0; i < this.numAddresses; ++i) - profiles.remove(addressOffset); - this.numAddresses = 0; + setCreditCardList_: function(entries) { + this.creditCardList_.dataModel = new ArrayDataModel(entries); }, /** - * Resets the credit card list. This method leaves the header and horizontal - * rule unchanged. + * Removes the AutoFill profile represented by |guid|. + * @param {String} guid The GUID of the profile to remove. * @private */ - resetCreditCards_: function() { - var profiles = $('profile-list'); - var offset = this.numAddresses + addressOffset + creditCardOffset; - for (var i = 0; i < this.numCreditCards; ++i) - profiles.remove(offset); - this.numCreditCards = 0; + removeAutoFillProfile_: function(guid) { + chrome.send('removeAutoFillProfile', [guid]); }, /** - * Updates the address list with the given entries. + * Requests profile data for the profile represented by |guid| from the + * PersonalDataManager. Once the data is loaded, the AutoFillOptionsHandler + * calls showEdit[Address,CreditCard]Overlay(), depending on the type of the + * profile. + * @param {String} guid The GUID of the profile to edit. * @private - * @param {Array} address List of addresses. */ - updateAddresses_: function(addresses) { - this.resetAddresses_(); - var profileList = $('profile-list'); - var blankAddress = profileList.options[addressOffset]; - this.numAddresses = addresses.length; - this.addressGUIDs = new Array(this.numAddresses); - for (var i = 0; i < this.numAddresses; i++) { - var address = addresses[i]; - var option = new Option(address['label']); - this.addressGUIDs[i] = address['guid']; - profileList.add(option, blankAddress); - } - - this.updateButtonState_(); + loadProfileEditor_: function(guid) { + chrome.send('loadProfileEditor', [guid]); }, /** - * Updates the credit card list with the given entries. - * @private - * @param {Array} creditCards List of credit cards. - */ - updateCreditCards_: function(creditCards) { - this.resetCreditCards_(); - var profileList = $('profile-list'); - this.numCreditCards = creditCards.length; - this.creditCardGUIDs = new Array(this.numCreditCards); - for (var i = 0; i < this.numCreditCards; i++) { - var creditCard = creditCards[i]; - var option = new Option(creditCard['label']); - this.creditCardGUIDs[i] = creditCard['guid']; - profileList.add(option, null); - } - - this.updateButtonState_(); - }, - - /** - * Sets the enabled state of the AutoFill Add Address and Credit Card - * buttons on the current state of the |autoFillEnabled| checkbox. - * Sets the enabled state of the AutoFill Edit and Remove buttons based on - * the current selection in the profile list. - * @private - */ - updateButtonState_: function() { - var disabled = !$('autoFillEnabled').checked; - $('add-address-button').disabled = disabled; - $('add-credit-card-button').disabled = disabled; - - disabled = disabled || ($('profile-list').selectedIndex == -1); - $('autofill-remove-button').disabled = disabled; - $('autofill-edit-button').disabled = disabled; - }, - - /** - * Calls into the browser to load either an address or a credit card, - * depending on the selected index. The browser calls back into either - * editAddress() or editCreditCard() which show their respective editors. - * @private - */ - editProfile_: function() { - var idx = $('profile-list').selectedIndex; - if ((profileIndex = this.getAddressIndex_(idx)) != -1) { - chrome.send('editAddress', [this.addressGUIDs[profileIndex]]); - } else if ((profileIndex = this.getCreditCardIndex_(idx)) != -1) { - chrome.send('editCreditCard', [this.creditCardGUIDs[profileIndex]]); - } - }, - - /** - * Removes the currently selected profile, whether it's an address or a - * credit card. + * Shows the 'Edit address' overlay, using the data in |address| to fill the + * input fields. |address| is a list with one item, an associative array + * that contains the address data. * @private */ - removeProfile_: function() { - var idx = $('profile-list').selectedIndex; - if ((profileIndex = this.getAddressIndex_(idx)) != -1) - chrome.send('removeAddress', [this.addressGUIDs[profileIndex]]); - else if ((profileIndex = this.getCreditCardIndex_(idx)) != -1) - chrome.send('removeCreditCard', [this.creditCardGUIDs[profileIndex]]); + showEditAddressOverlay_: function(address) { + var title = localStrings.getString('editAddressTitle'); + AutoFillEditAddressOverlay.setTitle(title); + AutoFillEditAddressOverlay.loadAddress(address[0]); + OptionsPage.showOverlay('autoFillEditAddressOverlay'); }, /** - * Returns the index into the address list based on |index|, the index into - * the select control. Returns -1 if this is not an address index. + * Shows the 'Edit credit card' overlay, using the data in |credit_card| to + * fill the input fields. |address| is a list with one item, an associative + * array that contains the credit card data. * @private */ - getAddressIndex_: function(index) { - index -= addressOffset; - if (index >= 0 && index < this.numAddresses) - return index; - - return -1; + showEditCreditCardOverlay_: function(creditCard) { + var title = localStrings.getString('editCreditCardTitle'); + AutoFillEditCreditCardOverlay.setTitle(title); + AutoFillEditCreditCardOverlay.loadCreditCard(creditCard[0]); + OptionsPage.showOverlay('autoFillEditCreditCardOverlay'); }, + }; - /** - * Returns the index into the credit card list based on |index|, the index - * into the select control. Returns -1 if this is not a credit card index. - * @private - */ - getCreditCardIndex_: function(index) { - index -= addressOffset + this.numAddresses + creditCardOffset; - if (index >= 0 && index < this.numCreditCards) - return index; + AutoFillOptions.setAddressList = function(entries) { + AutoFillOptions.getInstance().setAddressList_(entries); + }; - return -1; - }, + AutoFillOptions.setCreditCardList = function(entries) { + AutoFillOptions.getInstance().setCreditCardList_(entries); + }; - /** - * Returns true if |index| points to a credit card profile. - * @private - */ - profileIndexIsCreditCard_: function(index) { - index -= addressOffset + this.numAddresses + creditCardOffset; - return (index >= 0 && index < this.numCreditCards); - } + AutoFillOptions.removeAutoFillProfile = function(guid) { + AutoFillOptions.getInstance().removeAutoFillProfile_(guid); }; - AutoFillOptions.updateAddresses = function(addresses) { - AutoFillOptions.getInstance().updateAddresses_(addresses); + AutoFillOptions.loadProfileEditor = function(guid) { + AutoFillOptions.getInstance().loadProfileEditor_(guid); }; AutoFillOptions.editAddress = function(address) { AutoFillOptions.getInstance().showEditAddressOverlay_(address); }; - AutoFillOptions.updateCreditCards = function(creditCards) { - AutoFillOptions.getInstance().updateCreditCards_(creditCards); - }; - AutoFillOptions.editCreditCard = function(creditCard) { AutoFillOptions.getInstance().showEditCreditCardOverlay_(creditCard); }; diff --git a/chrome/browser/resources/options/autofill_options_list.js b/chrome/browser/resources/options/autofill_options_list.js new file mode 100644 index 0000000..4d2dba7 --- /dev/null +++ b/chrome/browser/resources/options/autofill_options_list.js @@ -0,0 +1,93 @@ +// Copyright (c) 2010 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.autoFillOptions', function() { + const DeletableItemList = options.DeletableItemList; + const DeletableItem = options.DeletableItem; + const List = cr.ui.List; + + /** + * Creates a new AutoFill list item. + * @param {Array} entry An array of the form [guid, label]. + * @constructor + * @extends {options.DeletableItem} + */ + function AutoFillListItem(entry) { + var el = cr.doc.createElement('div'); + el.guid = entry[0]; + el.label = entry[1]; + el.__proto__ = AutoFillListItem.prototype; + el.decorate(); + + return el; + } + + AutoFillListItem.prototype = { + __proto__: DeletableItem.prototype, + + /** @inheritDoc */ + decorate: function() { + DeletableItem.prototype.decorate.call(this); + + // The stored label. + var label = this.ownerDocument.createElement('div'); + label.className = 'autofill-list-item'; + label.textContent = this.label; + this.contentElement.appendChild(label); + }, + + /** + * Get and set the GUID for the entry. + * @type {string} + */ + get guid() { + return this.guid; + }, + set guid(guid) { + this.guid = guid; + }, + + /** + * Get and set the label for the entry. + * @type {string} + */ + get label() { + return this.label; + }, + set label(label) { + this.label = label; + }, + }; + + /** + * Create a new AutoFill list. + * @constructor + * @extends {options.DeletableItemList} + */ + var AutoFillList = cr.ui.define('list'); + + AutoFillList.prototype = { + __proto__: DeletableItemList.prototype, + + /** @inheritDoc */ + createItem: function(entry) { + return new AutoFillListItem(entry); + }, + + /** @inheritDoc */ + activateItemAtIndex: function(index) { + AutoFillOptions.loadProfileEditor(this.dataModel.item(index)[0]); + }, + + /** @inheritDoc */ + deleteItemAtIndex: function(index) { + AutoFillOptions.removeAutoFillProfile(this.dataModel.item(index)[0]); + }, + }; + + return { + AutoFillListItem: AutoFillListItem, + AutoFillList: AutoFillList, + }; +}); diff --git a/chrome/browser/resources/options/content_settings.html b/chrome/browser/resources/options/content_settings.html index 9c48996..1c1f45b 100644 --- a/chrome/browser/resources/options/content_settings.html +++ b/chrome/browser/resources/options/content_settings.html @@ -29,7 +29,7 @@ i18n-content="flash_storage_settings" target="_blank"></a> <button class="exceptionsListButton" contentType="cookies" - i18n-content="manage_exceptions"></button> + i18n-content="manage_exceptions"></button> </div> </section> @@ -47,7 +47,7 @@ </label> <button class="exceptionsListButton" contentType="images" - i18n-content="manage_exceptions"></button> + i18n-content="manage_exceptions"></button> </div> </section> @@ -65,7 +65,7 @@ </label> <button class="exceptionsListButton" contentType="javascript" - i18n-content="manage_exceptions"></button> + i18n-content="manage_exceptions"></button> </div> </section> @@ -87,7 +87,7 @@ </label> <button class="exceptionsListButton" contentType="plugins" - i18n-content="manage_exceptions"></button> + i18n-content="manage_exceptions"></button> <a i18n-content="disable_individual_plugins" id="plugins-tab" href="#"></a> </div> @@ -107,7 +107,7 @@ </label> <button class="exceptionsListButton" contentType="popups" - i18n-content="manage_exceptions"></button> + i18n-content="manage_exceptions"></button> </div> </section> @@ -129,7 +129,7 @@ </label> <button class="exceptionsListButton" contentType="location" - i18n-content="manage_exceptions"></button> + i18n-content="manage_exceptions"></button> </div> </section> @@ -151,7 +151,7 @@ </label> <button class="exceptionsListButton" contentType="notifications" - i18n-content="manage_exceptions"></button> + i18n-content="manage_exceptions"></button> </div> </section> </div> diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html index 8b8e155..30e0cb0 100644 --- a/chrome/browser/resources/options/options.html +++ b/chrome/browser/resources/options/options.html @@ -106,6 +106,7 @@ <script src="alert_overlay.js"></script> <script src="autofill_edit_address_overlay.js"></script> <script src="autofill_edit_creditcard_overlay.js"></script> +<script src="autofill_options_list.js"></script> <script src="autofill_options.js"></script> <script src="browser_options.js"></script> <script src="browser_options_startup_page_list.js"></script> diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css index 091f91f..684ab56 100644 --- a/chrome/browser/resources/options/options_page.css +++ b/chrome/browser/resources/options/options_page.css @@ -309,6 +309,12 @@ div.page section:last-child { border-bottom: none; } +div.page > h3 { + font-size: 105%; + font-weight: bold; + margin: 20px 0 10px 0; +} + section > h3 { font-size: 105%; font-weight: bold; diff --git a/chrome/browser/resources/options/password_manager.css b/chrome/browser/resources/options/password_manager.css index bc01647..48ac0d9 100644 --- a/chrome/browser/resources/options/password_manager.css +++ b/chrome/browser/resources/options/password_manager.css @@ -1,8 +1,3 @@ -.passwords-list-title { - font-weight: bold; - margin: 20px 0 10px 0; -} - #saved-passwords-list .url { box-sizing: border-box; width: 40%; diff --git a/chrome/browser/resources/options/password_manager.html b/chrome/browser/resources/options/password_manager.html index df74db0..b103dbf 100644 --- a/chrome/browser/resources/options/password_manager.html +++ b/chrome/browser/resources/options/password_manager.html @@ -1,13 +1,7 @@ <div id="password-manager" class="page hidden"> <h1 i18n-content="passwordsTitle"></h1> - <div id="saved-passwords"> - <div class="passwords-list-title" i18n-content="savedPasswordsTitle"> - </div> - <list id="saved-passwords-list" class="settings-list"></list> - </div> - <div id="password-exceptions"> - <div class="passwords-list-title" i18n-content="passwordExceptionsTitle"> - </div> - <list id="password-exceptions-list" class="settings-list"></list> - </div> + <h3 i18n-content="savedPasswordsTitle"></h3> + <list id="saved-passwords-list" class="settings-list"></list> + <h3 i18n-content="passwordExceptionsTitle"></h3> + <list id="password-exceptions-list" class="settings-list"></list> </div> diff --git a/chrome/browser/resources/shared/js/cr/ui/list.js b/chrome/browser/resources/shared/js/cr/ui/list.js index 121703a..9a579d8 100644 --- a/chrome/browser/resources/shared/js/cr/ui/list.js +++ b/chrome/browser/resources/shared/js/cr/ui/list.js @@ -269,6 +269,7 @@ cr.define('cr.ui', function() { var length = this.dataModel ? this.dataModel.length : 0; this.selectionModel = new ListSelectionModel(length); + this.addEventListener('dblclick', this.handleDoubleClick_); this.addEventListener('mousedown', this.handleMouseDownUp_); this.addEventListener('mouseup', this.handleMouseDownUp_); this.addEventListener('keydown', this.handleKeyDown); @@ -290,6 +291,20 @@ cr.define('cr.ui', function() { }, /** + * Callback for the double click event. + * @param {Event} e The mouse event object. + * @private + */ + handleDoubleClick_: function(e) { + if (this.disabled) + return; + + var target = this.getListItemAncestor(e.target); + var index = target ? this.getIndexOfListItem(target) : -1; + this.activateItemAtIndex(index); + }, + + /** * Callback for mousedown and mouseup events. * @param {Event} e The mouse event object. * @private |