DOMUI Prefs: Add a deletable item list type, and use it for startup pages.

chrome/browser/resources/options/deletable_item_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', function() {
+  const List = cr.ui.List;
+  const ListItem = cr.ui.ListItem;
+
+  /**
+   * Wraps a list item to make it deletable, adding a delete button that calls
+   * deleteItem(value) on delegate when it is clicked.
+   * @param {!ListItem} baseItem The list element to wrap.
+   * @param {*} delegate The delegate to call.
+   * @param {*} value The value corresponding to the list item.
+   */
+  function DeletableListItem(baseItem, delegate, value) {
+    var el = cr.doc.createElement('div');
+    el.baseItem_ = baseItem;
+    el.delegate_ = delegate;
+    el.value_ = value;
+    DeletableListItem.decorate(el);
+    return el;
+  }
+
+  /**
+   * Decorates an element as a deletable list item.
+   * @param {!HTMLElement} el The element to decorate.
+   */
+  DeletableListItem.decorate = function(el) {
+    el.__proto__ = DeletableListItem.prototype;
+    el.decorate();
+  };
+
+  DeletableListItem.prototype = {
+    __proto__: ListItem.prototype,
+
+    /**
+     * The list item being wrapped to make in deletable.
+     * @type {!ListItem}
+     * @private
+     */
+    baseItem_: null,
+
+    /**
+     * The delegate to call on item deletion.
+     * @type {*}
+     * @private
+     */
+    delegate_: null,
+
+    /**
+     * The value for the list item.
+     * @type {*}
+     * @private
+     */
+    value_: null,
+
+    /** @inheritDoc */
+    decorate: function() {
+      ListItem.prototype.decorate.call(this);
+
+      this.className = 'deletable-item';
+      var contentEl = this.ownerDocument.createElement('div');
+      contentEl.appendChild(this.baseItem_);
+      var closeEl = this.ownerDocument.createElement('div');
+      var closeButtonEl = this.ownerDocument.createElement('button');

[arv (Not doing code reviews), 2010/12/13 20:18:41]

I think you can get away with only closeButtonEl here. it should not be
necessary to wrap the button in a div.

[stuartmorgan, 2010/12/14 00:10:58]

Done.

+      closeButtonEl.className = 'close-button';
+      var self = this;
+      closeButtonEl.onclick = function(event) {

[arv (Not doing code reviews), 2010/12/13 20:18:41]

I think you might be better of listening to click at the list level and checking
the target classList. That way you can also get rid of the delegate.

[stuartmorgan, 2010/12/14 00:10:58]

Done.

+        self.delegate_.deleteItem(self.value_);

[arv (Not doing code reviews), 2010/12/13 20:18:41]

Another option might have been to dispatch a delete event or walk up the DOM
until you find the list.

+      };
+      closeEl.appendChild(closeButtonEl);
+
+      this.appendChild(contentEl);
+      this.appendChild(closeEl);
+    },
+
+    /**
+     * Returns the list item being wrapped to make in deletable.
+     * @return {!ListItem} The list item being wrapped
+     */
+    get contentItem() {
+      return this.baseItem_;
+    }
+  };
+
+  var DeletableItemList = cr.ui.define('list');
+
+  DeletableItemList.prototype = {
+    __proto__: List.prototype,
+
+    /** @inheritDoc */
+    createItem: function(value) {
+      var baseItem = this.createItemContents(value);
+      return new DeletableListItem(baseItem, this, value);
+    },
+
+    /**
+     * Creates a new list item to use as the main row contents for |value|.
+     * Subclasses should override this instead of createItem.
+     * @param {*} value The value to use for the item.
+     * @return {!ListItem} The newly created list item.
+     */
+    createItemContents: function(value) {
+      List.prototype.createItem.call(this, value);
+    },
+
+    /**
+     * Called when an item should be deleted; subclasses are responsible for
+     * implementing.
+     * @param {*} value The item value that is being deleted.
+     */
+    deleteItem: function(value) {
+    },
+  };
+
+  return {
+    DeletableItemList: DeletableItemList
+  };
+});