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

Also changes the close button to always show for the lead element (even in a non-editable list), and fixes a bug in close-button-based multiple deletion where the deletable property wasn't being checked.

BUG=67027
TEST=List items should be deletable with the delete or backspace key.

Review URL: http://codereview.chromium.org/6317005

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@71706 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 34 insertions, 5 deletions

diff --git a/chrome/browser/resources/options/deletable_item_list.js b/chrome/browser/resources/options/deletable_item_list.js
index 5d5b35b..783a313 100644
--- a/chrome/browser/resources/options/deletable_item_list.js
+++ b/chrome/browser/resources/options/deletable_item_list.js
@@ -107,6 +107,7 @@ cr.define('options', function() {
     decorate: function() {
       List.prototype.decorate.call(this);
       this.addEventListener('click', this.handleClick_);
+      this.addEventListener('keydown', this.handleKeyDown_);
     },
 
     /**
@@ -130,15 +131,43 @@ cr.define('options', function() {
         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 backspace on Mac) to item deletion (unless focus is
+      // in an input field, where it's intended for text editing).
+      if ((e.keyCode == 46 || (e.keyCode == 8 && cr.isMac)) &&
+          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.
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index be6c6b1..d398b2a 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -424,7 +424,7 @@ list .close-button {
   width: 16px;
 }
 
-list > *:not(:hover):not([editing]) .close-button,
+list > *:not(:hover):not([lead]) .close-button,
 list[disabled] .close-button,
 list .close-button[disabled] {
   opacity: 0;