Makes the network dropdown keyboard accessible (focus friendly).

chrome/browser/resources/chromeos/login/oobe_screen_network.js

Index: chrome/browser/resources/chromeos/login/oobe_screen_network.js
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_network.js b/chrome/browser/resources/chromeos/login/oobe_screen_network.js
index 9321f493855ff4046b24b870b941d2a794f392f7..7a67e89c69b6a3a7ef98aa3e7a66b9b1d45ae7d7 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_network.js
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_network.js
@@ -21,13 +21,69 @@ cr.define('oobe', function() {
 
     /** @inheritDoc */
     decorate: function() {
+      // Create overlay to catch outside clicks.
+      var overlay = this.ownerDocument.createElement('div');
+      overlay.classList.add('dropdown-overlay');
+      overlay.addEventListener('click', function() {
+        this.parentNode.childNodes[1].focus();

[xiyuan, 2011/08/08 20:07:43]

Let's add two getters for title buttone and dropdown.

get titleButton() {
  return this.childNodes[1];  // or this.firstElementChild.nextElementSibling
},
get dropDownContainer() {
  return this.lastElementChild;
},

Then we could write something like this:
this.parentNode.titleButton.focus();

[altimofeev, 2011/08/09 10:32:30]

Done.

+        this.parentNode.isShown = false;
+      });
+      this.appendChild(overlay);
+
       this.appendChild(this.createTitle_());
 
       // Create menu items container.
-      var container = this.ownerDocument.createElement('div')
+      var container = this.ownerDocument.createElement('div');

[xiyuan, 2011/08/08 20:07:43]

recommend to wrap the container into a class.

[altimofeev, 2011/08/09 10:32:30]

Done.

       container.classList.add('dropdown-container');
+
+      // Selected item in the menu list.
+      container.selectedItem = null;
+
+      container.selectItem = function (selectedItem) {
+        if (container.selectedItem)
+          container.selectedItem.classList.remove('hover');
+        selectedItem.classList.add('hover');
+        container.selectedItem = selectedItem;
+      };
+
       this.appendChild(container);
       this.isShown = false;
+
+      // Handle pressing of the up/down keys.
+      this.addEventListener('keydown', function (e) {

[xiyuan, 2011/08/08 20:07:43]

Could we put the logic into its own function since it's not trivial?

[altimofeev, 2011/08/09 10:32:30]

Done.

+        if (!this.isShown)
+          return;
+        var container = this.lastChild;
+        var selected = container.selectedItem;
+        switch(e.keyCode) {

[xiyuan, 2011/08/08 20:07:43]

do we need to handle "enter" key as well?

[altimofeev, 2011/08/09 10:32:30]

tl;dr. Done.

Enter is handled by JS directly, since the button has the focus. But processing
Enter here makes possible to distinguish Enter and click actions on the focused
button, which in turn allows to avoid 'mousedown' event usage. So no hack with
timer is needed to set focus.

+          case 38: {  // Key up.
+            do {
+              selected = selected.previousSibling;
+              if (!selected)
+                selected = container.lastChild;
+            } while (selected.iid < 0);
+            container.selectItem(selected);
+            break;
+          }
+          case 40: {  // Key down.
+            do {
+              selected = selected.nextSibling;
+              if (!selected)
+                selected = container.firstItem;
+            } while (selected.iid < 0);
+            container.selectItem(selected);
+            break;
+          }
+          case 27: {  // Esc.
+            this.isShown = false;
+            break;
+          }
+          case 9: {  // Tab.
+            this.isShown = false;
+            break;
+          }
+        }
+      });
     },
 
     /**
@@ -43,7 +99,11 @@ cr.define('oobe', function() {
      * @param {bool} show New visibility state for dropdown menu.
      */
     set isShown(show) {
+      if (show) {
+        this.lastElementChild.selectItem(this.lastElementChild.firstItem);
+      }

[xiyuan, 2011/08/08 20:07:43]

nit: no need for enclosing {} for one line branch.

[altimofeev, 2011/08/09 10:32:30]

Done.

       this.lastElementChild.hidden = !show;
+      this.firstElementChild.hidden = !show;
     },
 
     /**
@@ -53,7 +113,7 @@ cr.define('oobe', function() {
      */
     setTitle: function(title, icon) {
       // TODO(nkostylev): Icon support for dropdown title.
-      this.firstElementChild.textContent = title;
+      this.childNodes[1].textContent = title;
     },
 
     /**
@@ -63,6 +123,8 @@ cr.define('oobe', function() {
     setItems: function(items) {
       var container = this.lastElementChild;
       container.innerHTML = '';
+      // First item in the menu list.
+      container.firstItem = null;

[xiyuan, 2011/08/08 20:07:43]

clear container.selectedItem as well?

[altimofeev, 2011/08/09 10:32:30]

Good point, this is useful for the case, when the menu is updated while being
shown.

       for (var i = 0; i < items.length; ++i) {
         var item = items[i];
         if ('sub' in item) {
@@ -120,13 +182,19 @@ cr.define('oobe', function() {
           var item = this.lastElementChild;
           if (item.iid < -1 || item.classList.contains('disabled-item'))
             return;
-          item.controller.isShown = !item.controller.isShown;
+          item.controller.isShown = false;
           if (item.iid >= 0)
             chrome.send('networkItemChosen', [item.iid]);
         });
+        wrapperDiv.addEventListener('mouseover', function f(e) {
+          this.parentNode.selectItem(this);
+        });
         itemElement = wrapperDiv;
       }
       container.appendChild(itemElement);
+      if (!container.firstItem && item.id >= 0) {
+        container.firstItem = itemElement;
+      }
     },
 
     /**
@@ -137,10 +205,31 @@ cr.define('oobe', function() {
     createTitle_: function() {
       var el = this.ownerDocument.createElement('button');
       el.classList.add('dropdown-title');
+      el.id = 'dropdown-title-button';
       el.iid = -1;
       el.controller = this;
+      el.mouseDown = false;
+
+      // Only occurs with mouse click.
+      el.addEventListener('mousedown', function f(e) {
+        this.controller.isShown = !this.controller.isShown;
+        this.mouseDown = true;
+        // TODO(altimofeev): avoid this hack.
+        setTimeout("$('dropdown-title-button').focus();", 1);
+      });
+
       el.addEventListener('click', function f(e) {
+        if (this.mouseDown) {
+          this.mouseDown = false;
+          return;
+        }
         this.controller.isShown = !this.controller.isShown;
+
+        if (!this.controller.isShown) {
+          var item = this.controller.lastChild.selectedItem.lastChild;
+          if (item.iid >= 0 && !item.classList.contains('disabled-item'))
+            chrome.send('networkItemChosen', [item.iid]);
+        }
       });
       return el;
     }