DOMUI: Implement new-style password manager.

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 button that will trigger a
@@ skipping 13 matching lines @@
    */
   DeletableListItem.decorate = function(el) {
     el.__proto__ = DeletableListItem.prototype;
     el.decorate();
   };
 
   DeletableListItem.prototype = {
     __proto__: ListItem.prototype,
 
     /**
-     * The list item being wrapped to make in deletable.
+     * The list item being wrapped to make it deletable.
      * @type {!ListItem}
      * @private
      */
     baseItem_: null,
 
     /** @inheritDoc */
     decorate: function() {
       ListItem.prototype.decorate.call(this);
 
-      this.className = 'deletable-item';
-      var contentEl = this.ownerDocument.createElement('div');
-      contentEl.appendChild(this.baseItem_);
+      this.baseItem_.classList.add('deletable-item');
+      this.appendChild(this.baseItem_);
+
+      //this.className = 'deletable-item';
       var closeButtonEl = this.ownerDocument.createElement('button');
       closeButtonEl.className = 'close-button';
-
-      this.appendChild(contentEl);
       this.appendChild(closeButtonEl);
     },
 
+    /** @inheritDoc */
+    selectionChanged: function() {
+      // Forward the selection state to the |baseItem_|.
+      // TODO(jhawkins): This is terrible.
+      this.baseItem_.selected = this.selected;

[James Hawkins, 2010/12/16 19:28:28]

I'm not particularly happy with this API.  The fact that we have to bubble up a
virtual function seems wrong.  We should probably use DeletableListItem directly
in any user of DeletableItemList.  I also talked with Stuart about moving this
functionality into List itself, since most uses of List need the ability to
delete items from the list.

+      this.baseItem_.selectionChanged();
+    },
+
     /**
-     * Returns the list item being wrapped to make in deletable.
+     * Returns the list item being wrapped to make it 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 */
     decorate: function() {
       List.prototype.decorate.call(this);
@@ skipping 29 matching lines @@
       if (target.className == 'close-button') {
         var listItem = this.getListItemAncestor(target);
         if (listItem)
           this.deleteItemAtIndex(this.getIndexOfListItem(listItem));
       }
     },
 
     /**
      * Called when an item should be deleted; subclasses are responsible for
      * implementing.
-     * @param {number} index The indexd of the item that is being deleted.
+     * @param {number} index The index of the item that is being deleted.
      */
     deleteItemAtIndex: function(index) {
     },
   };
 
   return {
     DeletableItemList: DeletableItemList
   };
 });