Makes the network dropdown keyboard accessible (focus friendly).

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

 // Copyright (c) 2011 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.
 
 /**
  * @fileoverview Oobe network screen implementation.
  */
 
 cr.define('oobe', function() {
   /**
    * Creates a new DropDown div.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var DropDown = cr.ui.define('div');
 
   DropDown.ITEM_DIVIDER_ID = -2;
 
   DropDown.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /** @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;
+          }
+        }
+      });
     },
 
     /**
      * Returns true if dropdown menu is shown.
      * @type {bool} Whether menu element is shown.
      */
     get isShown() {
       return !this.lastElementChild.hidden;
     },
 
     /**
      * Sets dropdown menu visibility.
      * @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;
     },
 
     /**
      * Sets title and icon.
      * @param {string} title Text on dropdown.
      * @param {string} icon Icon in dataURL format.
      */
     setTitle: function(title, icon) {
       // TODO(nkostylev): Icon support for dropdown title.
-      this.firstElementChild.textContent = title;
+      this.childNodes[1].textContent = title;
     },
 
     /**
      * Sets dropdown items.
      * @param {Array} items Dropdown items array.
      */
     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) {
           // Workaround for submenus, add items on top level.
           // TODO(altimofeev): support submenus.
           for (var j = 0; j < item.sub.length; ++j)
             this.createItem_(container, item.sub[j]);
           continue;
         }
         this.createItem_(container, item);
@@ skipping 37 matching lines @@
         wrapperDiv.classList.add('dropdown-item-container');
         var imageDiv = this.ownerDocument.createElement('div');
         imageDiv.classList.add('dropdown-image');
         imageDiv.appendChild(image);
         wrapperDiv.appendChild(imageDiv);
         wrapperDiv.appendChild(itemElement);
         wrapperDiv.addEventListener('click', function f(e) {
           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;
+      }
     },
 
     /**
      * Creates dropdown title element.
      * @type {HTMLElement}
      * @private
      */
     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;
     }
   };
 
   /**
    * Creates a new oobe screen div.
    * @constructor
    * @extends {HTMLDivElement}
    */
@@ skipping 79 matching lines @@
   };
 
   NetworkScreen.updateNetworkTitle = function(title, icon) {
     $('connect').updateNetworkTitle(title, icon);
   };
 
   return {
     NetworkScreen: NetworkScreen
   };
 });