DOMUI: Implement the new-style Autofill options page.

chrome/browser/resources/options/autofill_options_list.js

+// 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 ArrayDataModel = cr.ui.ArrayDataModel;
+  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 {cr.ui.ListItem}
+   */
+  function AutoFillListItem(entry) {
+    var el = cr.doc.createElement('div');
+    el.dataItem = entry;
+    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.dataItem[0];
+    },
+    set guid(guid) {
+      this.dataItem[0] = guid;
+    },
+
+    /**
+     * Get and set the label for the entry.
+     * @type {string}
+     */
+    get label() {
+      return this.dataItem[1];
+    },
+    set label(label) {
+      this.dataItem[1] = label;
+    },
+  };
+
+  /**
+   * Create a new AutoFill list.
+   * @constructor
+   * @extends {cr.ui.List}
+   */
+  var AutoFillList = cr.ui.define('list');
+
+  AutoFillList.prototype = {
+    __proto__: DeletableItemList.prototype,
+
+    /** @inheritDoc */
+    createItem: function(entry) {
+      return new AutoFillListItem(entry);
+    },
+
+    /** @inheritDoc */
+    activateItemAtIndex: function(index) {
+      var item = this.getListItemByIndex(index);
+      AutoFillOptions.loadProfileEditor(item.guid);
+    },
+
+    /** @inheritDoc */
+    deleteItemAtIndex: function(index) {
+      var item = this.getListItemByIndex(index);
+      AutoFillOptions.removeAutoFillProfile(item.guid);
+    },
+
+    /**
+     * The length of the list.
+     */
+    get length() {
+      return this.dataModel.length;
+    },
+  };
+
+  return {
+    AutoFillListItem: AutoFillListItem,
+    AutoFillList: AutoFillList,
+  };
+});