[oobe] Adds icon support for the network drop-down button.

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() {
   /**
@@ skipping 81 matching lines @@
     get container() {
       return this.lastElementChild;
     },
 
     /**
      * 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.titleButton.textContent = title;
+      this.titleButton.firstElementChild.src = icon;
+      this.titleButton.lastElementChild.textContent = title;
     },
 
     /**
      * Sets dropdown items.
      * @param {Array} items Dropdown items array.
      */
     setItems: function(items) {
       this.container.innerHTML = '';
       this.container.firstItem = null;
       this.container.selectedItem = null;
@@ skipping 51 matching lines @@
         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 = false;
           if (item.iid >= 0)
             chrome.send('networkItemChosen', [item.iid]);
+          this.parentNode.parentNode.titleButton.focus();
         });
         wrapperDiv.addEventListener('mouseover', function f(e) {
           this.parentNode.selectItem(this);
         });
         itemElement = wrapperDiv;
       }
       container.appendChild(itemElement);
       if (!container.firstItem && item.id >= 0) {
         container.firstItem = itemElement;
       }
@@ skipping 13 matching lines @@
       });
       return overlay;
     },
 
     /**
      * Creates dropdown title element.
      * @type {HTMLElement}
      * @private
      */
     createTitle_: function() {
-      var el = this.ownerDocument.createElement('button');
+      var image = this.ownerDocument.createElement('img');
+      var text = this.ownerDocument.createElement('div');
+
+      var el = this.ownerDocument.createElement('div');
+      el.appendChild(image);
+      el.appendChild(text);
+
+      el.tabIndex = 0;
       el.classList.add('dropdown-title');
       el.iid = -1;
       el.controller = this;
-      el.enterPressed = false;
+      el.inFocus = false;
+      el.opening = false;
 
       el.addEventListener('click', function f(e) {
-        this.focus();
         this.controller.isShown = !this.controller.isShown;
+      });
 
-        if (this.enterPressed) {
-          this.enterPressed = false;
-          if (!this.controller.isShown) {
-            var item = this.controller.container.selectedItem.lastElementChild;
-            if (item.iid >= 0 && !item.classList.contains('disabled-item'))
-              chrome.send('networkItemChosen', [item.iid]);
-          }
+      el.addEventListener('focus', function(e) {
+        this.inFocus = true;
+      });
+
+      el.addEventListener('blur', function(e) {
+        this.inFocus = false;
+      });
+
+      el.addEventListener('keydown', function f(e) {
+        if (this.inFocus && !this.controller.isShown && e.keyCode == 13) {
+          // Enter has been pressed.
+          this.opening = true;
+          this.controller.isShown = true;
         }
       });
       return el;
     },
 
     /**
      * Handles keydown event from the keyboard.
      * @private
      * @param {!Event} e Keydown event.
      */
@@ skipping 22 matching lines @@
         }
         case 27: {  // Esc.
           this.isShown = false;
           break;
         }
         case 9: {  // Tab.
           this.isShown = false;
           break;
         }
         case 13: {  // Enter.
-          this.titleButton.enterPressed = true;
+          var button = this.titleButton;
+          if (!button.opening) {
+            button.focus();
+            this.isShown = false;
+            var item =
+                button.controller.container.selectedItem.lastElementChild;
+            if (item.iid >= 0 && !item.classList.contains('disabled-item'))
+              chrome.send('networkItemChosen', [item.iid]);
+          } else {
+            button.opening = false;
+          }
           break;
         }
       };
     }
   };
 
   /**
    * Creates a new oobe screen div.
    * @constructor
    * @extends {HTMLDivElement}
@@ skipping 80 matching lines @@
   };
 
   NetworkScreen.updateNetworkTitle = function(title, icon) {
     $('connect').updateNetworkTitle(title, icon);
   };
 
   return {
     NetworkScreen: NetworkScreen
   };
 });