cros: Add keyboard support to network list in settings.

- Make Enter or space key perform a click() on network list item;
- Make network menu item handle 'activate' event;

BUG=310248

Review URL: https://codereview.chromium.org/1077823004

Cr-Commit-Position: refs/heads/master@{#325926}

chrome/browser/resources/options/browser_options.css

@@ -411,7 +411,8 @@ list:not([disabled]) > .network-group[selected] {
     text-overflow: ellipsis;
 }
 
-.network-menu-item:hover {
+.network-menu-item:hover,
+.network-menu-item[selected] {
   background-color: #eee;
 }
 

chrome/browser/resources/options/chromeos/network_list.js

@@ -358,9 +358,9 @@ cr.define('options.network', function() {
       this.subtitle = null;
       if (this.data.iconType)
         this.iconType = this.data.iconType;
-      this.addEventListener('click', function() {
+      this.addEventListener('click', (function() {
         this.showMenu();
-      });
+      }).bind(this));
     },
 
     /**
@@ -381,6 +381,7 @@ cr.define('options.network', function() {
         menu.className = 'network-menu';
         menu.hidden = true;
         Menu.decorate(menu);
+        menu.menuItemSelector = '.network-menu-item';
         for (var i = 0; i < this.data.menu.length; i++) {
           var entry = this.data.menu[i];
           createCallback_(menu, null, entry.label, entry.command);
@@ -526,6 +527,7 @@ cr.define('options.network', function() {
       menu.className = 'network-menu';
       menu.hidden = true;
       Menu.decorate(menu);
+      menu.menuItemSelector = '.network-menu-item';
       var addendum = [];
       if (this.data_.key == 'WiFi') {
         addendum.push({
@@ -831,7 +833,7 @@ cr.define('options.network', function() {
       }
     }
     if (callback != null)
-      button.addEventListener('click', callback);
+      button.addEventListener('activate', callback);
     else
       buttonLabel.classList.add('network-disabled-control');
 
@@ -922,6 +924,35 @@ cr.define('options.network', function() {
       closeMenu_();
     },
 
+    /** @override */
+    handleKeyDown: function(e) {
+      if (activeMenu_) {
+        // keyIdentifier does not report 'Esc' correctly
+        if (e.keyCode == 27 /* Esc */) {
+          closeMenu_();
+          return;
+        }
+
+        if ($(activeMenu_).handleKeyDown(e)) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        return;
+      }
+
+      if (e.keyIdentifier == 'Enter' ||
+          e.keyIdentifier == 'U+0020' /* Space */) {
+        var selectedListItem = this.getListItemByIndex(
+            this.selectionModel.selectedIndex);
+        if (selectedListItem) {
+          selectedListItem.click();
+          return;
+        }
+      }
+
+      List.prototype.handleKeyDown.call(this, e);
+    },
+
     /**
      * Close bubble and menu when a different list item is selected.
      * @param {Event} event Event detailing the selection change.