DOMUI: Make Autofill profile lists multi-select and implementing deleting

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;
 
   /**
    * Creates a deletable list item, which has a button that will trigger a call
@@ skipping 43 matching lines @@
       ListItem.prototype.decorate.call(this);
 
       this.classList.add('deletable-item');
 
       this.contentElement_ = this.ownerDocument.createElement('div');
       this.appendChild(this.contentElement_);
 
       this.closeButtonElement_ = this.ownerDocument.createElement('button');
       this.closeButtonElement_.className = 'close-button';
       this.closeButtonElement_.addEventListener('mousedown',
-                                                this.handleMouseDownOnClose_);
+                                                this.handleMouseDownUpOnClose_);
+      this.closeButtonElement_.addEventListener('mouseup',
+                                                this.handleMouseDownUpOnClose_);
       this.appendChild(this.closeButtonElement_);
     },
 
     /**
      * Returns the element subclasses should add content to.
      * @return {HTMLElement} The element subclasses should popuplate.
      */
     get contentElement() {
       return this.contentElement_;
     },
 
     /* Gets/sets the deletable property. An item that is not deletable doesn't
      * show the delete button (although space is still reserved for it).
      */
     get deletable() {
       return this.deletable_;
     },
     set deletable(value) {
       this.deletable_ = value;
       this.closeButtonElement_.disabled = !value;
     },
 
     /**
      * Don't let the list have a crack at the event. We don't want clicking the
-     * close button to select the list.
-     * @param {Event} e The mouse down event object.
+     * close button to change the selection of the list.
+     * @param {Event} e The mouse down/up event object.
      * @private
      */
-    handleMouseDownOnClose_: function(e) {
+    handleMouseDownUpOnClose_: function(e) {
       if (!e.target.disabled)
         e.stopPropagation();
     },
   };
 
   var DeletableItemList = cr.ui.define('list');
 
   DeletableItemList.prototype = {
     __proto__: List.prototype,
 
     /** @inheritDoc */
     decorate: function() {
       List.prototype.decorate.call(this);
       this.addEventListener('click', this.handleClick_);
     },
 
     /**
      * Callback for onclick events.
      * @param {Event} e The click event object.
      * @private
      */
     handleClick_: function(e) {
       if (this.disabled)
         return;
 
       var target = e.target;
       if (target.className == 'close-button') {
         var listItem = this.getListItemAncestor(target);
-        if (listItem)
-          this.deleteItemAtIndex(this.getIndexOfListItem(listItem));
+        var selected = this.selectionModel.selectedIndexes;
+
+        // Check if the list item that contains the close button being clicked
+        // is in the list of selected items. Only delete this item in that case.

[stuartmorgan, 2011/01/06 20:59:34]

The comment (and the logic) are backward here. If the list item *isn't*
selected, we should delete only that item.

[James Hawkins, 2011/01/06 21:01:54]

Done.

[James Hawkins, 2011/01/06 21:03:40]

Actually fixed now.

+        var idx = this.getIndexOfListItem(listItem);
+        if (selected.indexOf(idx)) {
+          this.deleteItemAtIndex(idx);
+        } else {
+          // Reverse through the list of selected indexes to maintain the
+          // correct index values after deletion.
+          for (var j = selected.length - 1; j >= 0; j--)
+            this.deleteItemAtIndex(selected[j]);
+        }
       }
     },
 
     /**
      * Called when an item should be deleted; subclasses are responsible for
      * implementing.
      * @param {number} index The index of the item that is being deleted.
      */
     deleteItemAtIndex: function(index) {
     },
   };
 
   return {
     DeletableItemList: DeletableItemList,
     DeletableItem: DeletableItem,
   };
 });