[cros] Network dropdown button in WebUI.

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 179c1fbfd5b9b841f9ce996127201d886a148a3c..0729e383569f4aa5f0154e3a940efb481112f420 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_network.js
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_network.js
@@ -8,6 +8,136 @@
 
 cr.define('oobe', function() {
   /**
+   * Creates a new DropDown div.
+   * @constructor
+   * @extends {HTMLDivElement}
+   */
+  var DropDown = cr.ui.define('div');
+
+  DropDown.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    /** @inheritDoc */
+    decorate: function() {
+      this.isShown = false;
+      this.appendChild(this.createTitle_());
+
+      // Create menu items container.
+      var container = document.createElement('div')

[xiyuan, 2011/08/06 00:16:34]

nit: document -> this.ownerDocument

[Nikita (slow), 2011/08/06 16:41:16]

Done.

+      container.id = 'dropdownMenu';
+      container.classList.add('dropdown-container');
+      container.hidden = !this.isShown;
+      this.appendChild(container);
+    },
+
+    /**
+     * 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.
+      $('dropdownTitle').innerText = title;

[xiyuan, 2011/08/06 00:16:34]

nit: innerText -> textContent

[Nikita (slow), 2011/08/06 16:41:16]

Done.

+    },
+
+    /**
+     * Sets dropdown items.
+     * @param {Array} items Dropdown items array.
+     */
+    setItems: function(items) {
+      var container = $('dropdownMenu');

[xiyuan, 2011/08/06 00:16:34]

nit: container = this.lastElementChild; And if we use this, then no need to have
id.

[Nikita (slow), 2011/08/06 16:41:16]

Done.

+      container.innerHTML = '';
+      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);
+      }
+    },
+
+    /**
+     * Creates dropdown item element and adds into container.
+     * @param {HTMLElement} container Container where item is added.
+     * @param {!Object} item Item to be added.
+     * @private
+     */
+    createItem_ : function(container, item) {
+      var itemContentElement;
+      var className = 'dropdown-item';
+      if (item.id == -2) {

[xiyuan, 2011/08/06 00:16:34]

nit: give -2 a constant name?

[Nikita (slow), 2011/08/06 16:41:16]

Done.

+        className = 'dropdown-divider';
+        itemContentElement = document.createElement('hr');

[xiyuan, 2011/08/06 00:16:34]

nit: document -> this.ownerDocument

[Nikita (slow), 2011/08/06 16:41:16]

Done.

+      } else {
+        var span = document.createElement('span');

[xiyuan, 2011/08/06 00:16:34]

ditto

[Nikita (slow), 2011/08/06 16:41:16]

Done.

+        if ('bold' in item && item.bold) {
+          var bold = document.createElement('b');

[xiyuan, 2011/08/06 00:16:34]

nit: I would prefer to use CSS instead of create a <b> tag.

span.bold {
  font-weight: bold;
}

and assign 'bold' class if needed.

[Nikita (slow), 2011/08/06 16:41:16]

Done.

+          bold.textContent = item.label;
+          span.appendChild(bold);
+        } else {
+          span.textContent = item.label;
+        }
+        itemContentElement = span;
+        var image = document.createElement('img');
+        if (item.icon)
+          image.src = item.icon;
+      }
+
+      var itemElement = document.createElement('div');

[xiyuan, 2011/08/06 00:16:34]

nit: document -> this.ownerDocument

[Nikita (slow), 2011/08/06 16:41:16]

Done.

+      itemElement.classList.add(className);
+      itemElement.appendChild(itemContentElement);
+      itemElement.iid = item.id;
+      itemElement.controller = this;
+      var enabled = 'enabled' in item && item.enabled;
+      if (!enabled)
+        itemElement.classList.add('disabled-item');
+
+      if (item.id > 0) {
+        var wrapperDiv = document.createElement('div');

[xiyuan, 2011/08/06 00:16:34]

nit: document -> this.ownerDocument

[Nikita (slow), 2011/08/06 16:41:16]

Done.

+        wrapperDiv.classList.add('dropdown-item-container');
+        var imageDiv = document.createElement('div');

[xiyuan, 2011/08/06 00:16:34]

nit: document -> this.ownerDocument

[Nikita (slow), 2011/08/06 16:41:16]

Done.

+        imageDiv.classList.add('dropdown-image');
+        imageDiv.appendChild(image);
+        wrapperDiv.appendChild(imageDiv);
+        wrapperDiv.appendChild(itemElement);
+        wrapperDiv.addEventListener('click', function f(e) {
+          var item = this.childNodes[1];
+          if (item.iid < -1 || item.classList.contains('disabled-item'))
+            return;
+          item.controller.isShown = !item.controller.isShown;
+          item.controller.childNodes[1].hidden = !item.controller.isShown;

[xiyuan, 2011/08/06 00:16:34]

seems like we can make isShown a property.

get isShown() {
  return !this.lastElementChild.hidden;
},
set isShown(show) {
  this.lastElementChild.hidden = !show;
},

[Nikita (slow), 2011/08/06 16:41:16]

Done.

+          if (item.iid >= 0)
+            chrome.send('networkItemChosen', [item.iid]);
+        });
+        itemElement = wrapperDiv;
+      }
+      container.appendChild(itemElement);
+    },
+
+    /**
+     * Creates dropdown title element.
+     * @type {HTMLElement}
+     * @private
+     */
+    createTitle_: function() {
+      var el = document.createElement('button');

[xiyuan, 2011/08/06 00:16:34]

nit: document -> this.ownerDocument

[Nikita (slow), 2011/08/06 16:41:16]

Done.

+      el.id = 'dropdownTitle';
+      el.classList.add('dropdown-title');
+      el.iid = -1;
+      el.controller = this;
+      el.addEventListener('click', function f(e) {
+        this.controller.isShown = !this.controller.isShown;
+        this.controller.childNodes[1].hidden = !this.controller.isShown;
+      });
+      return el;
+    }
+  };
+
+  /**
    * Creates a new oobe screen div.
    * @constructor
    * @extends {HTMLDivElement}
@@ -26,6 +156,11 @@ cr.define('oobe', function() {
   NetworkScreen.prototype = {
     __proto__: HTMLDivElement.prototype,
 
+    /**
+     * Dropdown element for networks selection.
+     */
+    dropdown_: null,
+
     /** @inheritDoc */
     decorate: function() {
       Oobe.setupSelect($('language-select'),
@@ -35,7 +170,27 @@ cr.define('oobe', function() {
       Oobe.setupSelect($('keyboard-select'),
                        templateData.inputMethodsList,
                        'networkOnInputMethodChanged');
-   },
+
+      this.dropdown_ = $('networks-list');
+      DropDown.decorate(this.dropdown_);
+    },
+
+    /**
+     * Updates network list in dropdown.
+     * @param {Array} items Dropdown items array.
+     */
+    updateNetworks: function(data) {
+      this.dropdown_.setItems(data);
+    },
+
+    /**
+     * Updates dropdown title and icon.
+     * @param {string} title Text on dropdown.
+     * @param {string} icon Icon in dataURL format.
+     */
+    updateNetworkTitle: function(title, icon) {
+      this.dropdown_.setTitle(title, icon);
+    },
 
     /**
      * Header text of the screen.
@@ -64,6 +219,14 @@ cr.define('oobe', function() {
     }
   };
 
+  NetworkScreen.updateNetworks = function(data) {
+    $('connect').updateNetworks(data);
+  };
+
+  NetworkScreen.updateNetworkTitle = function(title, icon) {
+    $('connect').updateNetworkTitle(title, icon);
+  };
+
   return {
     NetworkScreen: NetworkScreen
   };