Revamp Autofill Wallet settings

chrome/browser/resources/options/autofill_options_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.autofillOptions', function() {
   /** @const */ var DeletableItem = options.DeletableItem;
   /** @const */ var DeletableItemList = options.DeletableItemList;
   /** @const */ var InlineEditableItem = options.InlineEditableItem;
   /** @const */ var InlineEditableItemList = options.InlineEditableItemList;
 
   /**
    * @return {!HTMLButtonElement}
    */
-  function AutofillEditProfileButton(guid, edit) {
+  function AutofillEditProfileButton(edit) {
     var editButtonEl = /** @type {HTMLButtonElement} */(
         document.createElement('button'));
     editButtonEl.className = 'list-inline-button custom-appearance';
     editButtonEl.textContent =
         loadTimeData.getString('autofillEditProfileButton');
-    editButtonEl.onclick = function(e) { edit(guid); };
+    editButtonEl.onclick = edit;
 
     editButtonEl.onmousedown = function(e) {
       // Don't select the row when clicking the button.
       e.stopPropagation();
       // Don't focus on the button when clicking it.
       e.preventDefault();
     };
 
     return editButtonEl;
   }
 
   /**
    * Creates a new address list item.
-   * @param {Array} entry An array of the form [guid, label].
+   * @param {Object} entry An object with metadata about an address profile.
    * @constructor
    * @extends {options.DeletableItem}
    */
   function AddressListItem(entry) {
     var el = cr.doc.createElement('div');
-    el.guid = entry[0];
-    el.label = entry[1];
+    for (var key in entry) {
+      el[key] = entry[key];
+    }
     el.__proto__ = AddressListItem.prototype;
     el.decorate();
 
     return el;
   }
 
   AddressListItem.prototype = {
     __proto__: DeletableItem.prototype,
 
     /** @override */
     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);
 
+      if (!this.isLocal)
+        this.deletable = false;
+
       // The 'Edit' button.
+      var guid = this.guid;
       var editButtonEl = AutofillEditProfileButton(
-        this.guid,
-        AutofillOptions.loadAddressEditor);
+          function() { AutofillOptions.loadAddressEditor(guid); });
       this.contentElement.appendChild(editButtonEl);
     },
   };
 
   /**
    * Creates a new credit card list item.
-   * @param {Array} entry An array of the form [guid, label, icon].
+   * @param {Object} entry An object with metadata about a credit card.
    * @constructor
    * @extends {options.DeletableItem}
    */
   function CreditCardListItem(entry) {
     var el = cr.doc.createElement('div');
-    el.guid = entry[0];
-    el.label = entry[1];
-    el.icon = entry[2];
-    el.description = entry[3];
+    for (var key in entry) {
+      el[key] = entry[key];
+    }
     el.__proto__ = CreditCardListItem.prototype;
     el.decorate();
 
     return el;
   }
 
   CreditCardListItem.prototype = {
     __proto__: DeletableItem.prototype,
 
     /** @override */
     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);
 
-      // The credit card icon.
-      var icon = this.ownerDocument.createElement('img');
-      icon.src = this.icon;
-      icon.alt = this.description;
-      this.contentElement.appendChild(icon);
+      if (!this.isLocal)
+        this.deletable = false;
+
+      var guid = this.guid;
+      if (this.isCached) {
+        var localCopyText = this.ownerDocument.createElement('span');
+        localCopyText.textContent =
+            loadTimeData.getString('autofillDescribeLocalCopy');
+        this.contentElement.appendChild(localCopyText);
+
+        var clearLocalCopyButton = AutofillEditProfileButton(
+            function() { chrome.send('clearLocalCardCopy', [guid]); });
+        clearLocalCopyButton.textContent =
+            loadTimeData.getString('autofillClearLocalCopyButton');
+        this.contentElement.appendChild(clearLocalCopyButton);
+      }
 
       // The 'Edit' button.
       var editButtonEl = AutofillEditProfileButton(
-        this.guid,
-        AutofillOptions.loadCreditCardEditor);
+          function() { AutofillOptions.loadCreditCardEditor(guid); });
       this.contentElement.appendChild(editButtonEl);
     },
   };
 
   /**
    * Creates a new value list item.
    * @param {options.autofillOptions.AutofillValuesList} list The parent list of
    *     this item.
    * @param {string} entry A string value.
    * @constructor
@@ skipping 235 matching lines @@
 
   AutofillAddressList.prototype = {
     __proto__: AutofillProfileList.prototype,
 
     decorate: function() {
       AutofillProfileList.prototype.decorate.call(this);
     },
 
     /** @override */
     activateItemAtIndex: function(index) {
-      AutofillOptions.loadAddressEditor(this.dataModel.item(index)[0]);
+      AutofillOptions.loadAddressEditor(this.dataModel.item(index));
     },
 
     /**
      * @override
      * @param {Array} entry
      */
     createItem: function(entry) {
       return new AddressListItem(entry);
     },
 
     /** @override */
     deleteItemAtIndex: function(index) {
-      AutofillOptions.removeData(this.dataModel.item(index)[0],
+      AutofillOptions.removeData(this.dataModel.item(index).guid,
                                  'Options_AutofillAddressDeleted');
     },
   };
 
   /**
    * Create a new credit card list.
    * @constructor
    * @extends {options.DeletableItemList}
    */
   var AutofillCreditCardList = cr.ui.define('list');
 
   AutofillCreditCardList.prototype = {
     __proto__: AutofillProfileList.prototype,
 
     decorate: function() {
       AutofillProfileList.prototype.decorate.call(this);
     },
 
     /** @override */
     activateItemAtIndex: function(index) {
-      AutofillOptions.loadCreditCardEditor(this.dataModel.item(index)[0]);
+      AutofillOptions.loadCreditCardEditor(this.dataModel.item(index));
     },
 
     /**
      * @override
      * @param {Array} entry
      */
     createItem: function(entry) {
       return new CreditCardListItem(entry);
     },
 
     /** @override */
     deleteItemAtIndex: function(index) {
-      AutofillOptions.removeData(this.dataModel.item(index)[0],
+      AutofillOptions.removeData(this.dataModel.item(index).guid,
                                  'Options_AutofillCreditCardDeleted');
     },
   };
 
   /**
    * Create a new value list.
    * @constructor
    * @extends {options.InlineEditableItemList}
    */
   var AutofillValuesList = cr.ui.define('list');
@@ skipping 124 matching lines @@
     CreditCardListItem: CreditCardListItem,
     ValuesListItem: ValuesListItem,
     NameListItem: NameListItem,
     AutofillAddressList: AutofillAddressList,
     AutofillCreditCardList: AutofillCreditCardList,
     AutofillValuesList: AutofillValuesList,
     AutofillNameValuesList: AutofillNameValuesList,
     AutofillPhoneValuesList: AutofillPhoneValuesList,
   };
 });