DOMUI Prefs: Add delete/backspace handling to deletable item lists

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 89 matching lines @@
 
   var DeletableItemList = cr.ui.define('list');
 
   DeletableItemList.prototype = {
     __proto__: List.prototype,
 
     /** @inheritDoc */
     decorate: function() {
       List.prototype.decorate.call(this);
       this.addEventListener('click', this.handleClick_);
+      this.addEventListener('keydown', this.handleKeyDown_);
     },
 
     /**
      * 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);
         var selected = this.selectionModel.selectedIndexes;
 
         // Check if the list item that contains the close button being clicked
         // is not in the list of selected items. Only delete this item in that
         // case.
         var idx = this.getIndexOfListItem(listItem);
         if (selected.indexOf(idx) == -1) {
           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]);
+          this.deleteSelectedItems_();
         }
       }
     },
 
     /**
+     * Callback for keydown events.
+     * @param {Event} e The keydown event object.
+     * @private
+     */
+    handleKeyDown_: function(e) {
+      // Map delete (and backspapce on Mac) to item deletion (unless focus is

[arv (Not doing code reviews), 2011/01/18 19:56:24]

typo

[stuartmorgan, 2011/01/18 21:55:54]

Oops, I'll fix that next time I'm in the file.

+      // in an input field, where it's intended for text editing).
+      if ((e.keyCode == 46 || (e.keyCode == 8 && cr.isMac)) &&

[arv (Not doing code reviews), 2011/01/18 19:56:24]

I thought Mac used Command-Backspace (Meta-Backspace)

[stuartmorgan, 2011/01/18 21:55:54]

For menu items, yes. For interacting with tables and things, which is what this
UI is comparable to, no.

+          e.target.tagName != 'INPUT') {
+        this.deleteSelectedItems_();
+        // Prevent the browser from going back.
+        e.preventDefault();
+      }
+    },
+
+    /**
+     * Deletes all the currently selected items that are deletable.
+     * @private
+     */
+    deleteSelectedItems_: function() {
+      var selected = this.selectionModel.selectedIndexes;
+      // Reverse through the list of selected indexes to maintain the
+      // correct index values after deletion.
+      for (var j = selected.length - 1; j >= 0; j--) {
+        var index = selected[j];
+        if (this.getListItemByIndex(index).deletable)
+          this.deleteItemAtIndex(index);
+      }
+    },
+
+    /**
      * 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,
   };
 });