[cros] Network dropdown button in WebUI.

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.
 
 /**
+ * Creates dropdown element.
+ * @param {!Element} root Root element, where dropdown is inserted to.
+ * @param {string} title Text on dropdown.
+ * @param {Array} items Initial array of dropdown items.
+ */
+function DropDown(root, title, items) {

[xiyuan, 2011/07/29 21:39:33]

we probably want to put this into a cr.define namespace, either declare one here
or put it with NetworkScreen down below. 

[xiyuan, 2011/07/29 21:39:33]

It would be better to merge DropDown a HTMLDivElement derived element. I don't
see benefit of separating them.

You could do this by
var DropDown = cr.ui.define('div');

DropDown.prototype  = {
  __proto__: HTMLDivElement,prototype,
  ...
};

Then later to bind an existing div by using DropDown.decorate(existingDiv).

[Nikita (slow), 2011/08/05 23:40:26]

Done.

[Nikita (slow), 2011/08/05 23:40:26]

Done.

+  this.root_ = root;
+  this.container_ = document.createElement('div');
+  this.container_.classList.add('dropdown-container');

[xiyuan, 2011/07/29 21:39:33]

this.container_ element seems not used.

[Nikita (slow), 2011/08/05 23:40:26]

Done.

+  this.isShown = false;
+
+  this.setTitle(title);
+  this.setItems(items);
+}
+
+DropDown.prototype = {
+  /**
+   * Sets title and icon.
+   * @param {string} title Text on dropdown.
+   * @param {string} icon Icon in dataURL format.
+   */
+  setTitle: function(title, icon) {
+    var titleHtml = title;
+    var image = document.createElement('img');
+    if (icon)
+      image.src = icon;
+    this.root_.insertBefore(
+        this.createDiv_('dropdown-title', image, titleHtml, -1, true),
+        this.root_.childNodes[0]);
+    if (this.root_.childNodes.length > 1)
+      this.root_.removeChild(this.root_.childNodes[1]);

[xiyuan, 2011/07/29 21:39:33]

It seems a DropDown has two immediate child: title and items-container. Why we
need to create/delete them whevern there is a change? Could we only create them
once and only update them later?

[Nikita (slow), 2011/08/05 23:40:26]

Done.

+  },
+
+  /**
+   * Sets dropdown items.
+   * @param {Array} items Dropdown items array.
+   */
+  setItems: function(items) {
+    if (this.root_.childNodes.length > 1) {
+      this.root_.removeChild(this.root_.childNodes[1]);

[xiyuan, 2011/07/29 21:39:33]

see above. Instead of creating the container everytime. We should only create it
once and we could use innerHTML='' to clear its content here.

[Nikita (slow), 2011/08/05 23:40:26]

Done.

+    }
+
+    var container = document.createElement('div')
+    container.classList.add('dropdown-container');
+
+    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.
+        // item = item.sub[0];
+        for (var j = 0; j < item.sub.length; ++j)
+          this.createItem_(container, item.sub[j]);
+
+        continue;
+      }
+      this.createItem_(container, item);
+    }
+
+    this.root_.appendChild(container);
+    container.style.display = this.isShown ? 'block' : 'none';

[xiyuan, 2011/07/29 21:39:33]

suggest to use container.hidden instead of display

[Nikita (slow), 2011/08/05 23:40:26]

Done.

+  },
+
+  /**
+   * Creates dropdown element (div/button) for dropdown item / title.
+   * @param {string} className Element class.
+   * @param {HTMLElement} image Image element with icon.
+   * @param {string} innerHtml Inner contents of the element.
+   * @param {number} iid Internal ID of the element.
+   * @param {bool} enabled Whether element is enabled.
+   * @type {HTMLElement}
+   * @private
+   */
+  createDiv_: function(className, image, innerHtml, iid, enabled) {
+    var el = document.createElement(
+        className == 'dropdown-title' ? 'button' : 'div');
+    el.classList.add(className);
+    el.innerHTML = innerHtml;

[xiyuan, 2011/07/29 21:39:33]

we probably should try to get rid of this use.

[Nikita (slow), 2011/08/05 23:40:26]

Done.

+    el.iid = iid;
+    el.link = this;

[xiyuan, 2011/07/29 21:39:33]

nit: why DropDown is called "link"? Why not use parent or controller or
something like that?

[Nikita (slow), 2011/08/05 23:40:26]

Done.

+    el.addEventListener('click', function f(e) {
+      if (this.iid < -1 || this.classList.contains('disabled-item'))
+        return;
+      this.link.isShown = !this.link.isShown;

[xiyuan, 2011/07/29 21:39:33]

Do we really toggle isShown here?

[Nikita (slow), 2011/08/05 23:40:26]

Yes, menu is hidden on a click.

+      this.link.root_.childNodes[1].style.display =

[xiyuan, 2011/07/29 21:39:33]

use hidden attribute.

[Nikita (slow), 2011/08/05 23:40:26]

Done.

+          this.link.isShown ? 'block' : 'none';
+      if (this.iid >= 0) {
+        chrome.send('networkItemChosen', [this.iid]);
+      }
+    });
+
+    if (!enabled)
+      el.classList.add('disabled-item');
+
+    // TODO(nkostylev): Icon support for title.
+    if (className != 'dropdown-title' && iid > 0) {
+      var wrapperDiv = document.createElement('div');
+      wrapperDiv.classList.add('dropdown-item-container');
+      var imageDiv = document.createElement('div');
+      imageDiv.classList.add('dropdown-image');
+      imageDiv.appendChild(image);
+      wrapperDiv.appendChild(imageDiv);
+      wrapperDiv.appendChild(el);
+      el = wrapperDiv;
+    }
+    return el;
+  },
+
+  /**
+   * 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 text = item.label;
+    if ('bold' in item && item.bold) {
+      text = '<b>' + text + "</b>";
+    }
+    var itemHtml = '<span>' + text + '</span>';
+
+    var className = 'dropdown-item';
+    // Separator.
+    if (item.id == -2) {
+      className = 'dropdown-divider';
+      itemHtml = "<hr>";
+    }
+
+    var image = document.createElement('img');
+    if (item.icon)
+      image.src = item.icon;
+    var enabled = 'enabled' in item && item.enabled;
+    container.appendChild(
+        this.createDiv_(className, image, itemHtml, item.id, enabled));
+  },
+};
+
+var dropdown = undefined;

[xiyuan, 2011/07/29 21:39:33]

we should avoid using global vars. Let's put this as a member var of
NetworkScreen?

[Nikita (slow), 2011/08/05 23:40:26]

Done.

+
+/**
  * @fileoverview Oobe network screen implementation.
  */
 
 cr.define('oobe', function() {
   /**
    * Creates a new oobe screen div.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var NetworkScreen = cr.ui.define('div');
 
   /**
    * Registers with Oobe.
    */
   NetworkScreen.register = function() {
     var screen = $('connect');
     NetworkScreen.decorate(screen);
     Oobe.getInstance().registerScreen(screen);
+
+    dropdown = new DropDown($('networks-list'), "empty", []);
   };
 
   NetworkScreen.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /** @inheritDoc */
     decorate: function() {
       Oobe.setupSelect($('language-select'),
                        templateData.languageList,
                        'networkOnLanguageChanged');
@@ skipping 23 matching lines @@
       continueButton.textContent = localStrings.getString('continueButton');
       continueButton.addEventListener('click', function(e) {
         chrome.send('networkOnExit', []);
       });
       buttons.push(continueButton);
 
       return buttons;
     }
   };
 
+  NetworkScreen.updateNetworks = function(data) {
+    dropdown.setItems(data[0].sub);
+  };
+
+  NetworkScreen.updateNetworkTitle = function(title, icon) {
+    dropdown.setTitle(title, icon);
+  };
+
   return {
     NetworkScreen: NetworkScreen
   };
 });