[cros] Network dropdown button in WebUI.

Based on a patch by altimofeev
http://codereview.chromium.org/7461117/

BUG=chromium-os:17892
TEST=manual

Review URL: http://codereview.chromium.org/7520037

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@95750 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 269 insertions, 20 deletions

diff --git a/chrome/browser/resources/chromeos/login/oobe.css b/chrome/browser/resources/chromeos/login/oobe.css
index 46287f2..0ab6264 100644
--- a/chrome/browser/resources/chromeos/login/oobe.css
+++ b/chrome/browser/resources/chromeos/login/oobe.css
@@ -55,6 +55,7 @@ hr.bottom {
                                       rgba(0,0,0,0.2)), rgba(0,0,0,0.0));
   border-bottom: 1px solid rgba(0,0,0,0.5);
   height: 2px;
+  z-index: 0;
 }
 
 #header {
@@ -507,6 +508,99 @@ body.login-display #progress {
   visibility: hidden;
 }
 
+.dropdown-title {
+  -webkit-border-radius: 2px;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-padding-end: 20px;
+  -webkit-padding-start: 2px;
+  -webkit-user-select: none;
+  background-image: url('../../shared/images/select.png'),
+                    -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+  background-position: center right;
+  background-repeat: no-repeat;
+  border: 1px solid #aaa;
+  color: #555;
+  font-size: inherit;
+  height: 24px;
+  margin: 0;
+  overflow: hidden;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  text-overflow: ellipsis;
+  text-align: left;  
+  text-indent: 4px;
+  white-space: nowrap;
+  width: 250px;
+}
+
+.dropdown-title:hover {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  background-image: url('../../shared/images/select.png'),
+                    -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
+  color: #333;  
+  background-position: center right;
+  background-repeat: no-repeat;
+}
+
+.dropdown-title:active {
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+  background-image: url('../../shared/images/select.png'),
+                    -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
+  color: #444;
+}
+
+.dropdown-container {
+  background: #f7f7f7;
+  border: 1px solid #7c91bf;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  position: relative;
+  top: 100%;
+  width: 248px;
+  z-index: 1;
+}
+
+.dropdown-item-container {
+  display: -webkit-box;
+  height: 24px;
+  padding-left: 5px;
+}
+
+.dropdown-item-container:hover {
+  background: #dce4fa;
+}
+
+.dropdown-image {
+  width: 24px;
+}
+
+.dropdown-item {
+  cursor: default;
+  color: #555;
+  overflow: hidden;
+  padding-top: 4px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 219px;
+}
+
+.dropdown-divider {
+  height: 3px;
+}
+
+.dropdown-divider hr {
+  -webkit-margin-before: 2px;
+  -webkit-margin-after: 2px;
+}
+
+.dropdown-item.disabled-item {
+  color: graytext;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
 .error-message {
   -webkit-padding-start: 30px;
   background-image: url('chrome://theme/IDR_WARNING');
diff --git a/chrome/browser/resources/chromeos/login/oobe.js b/chrome/browser/resources/chromeos/login/oobe.js
index 7309143..4003080 100644
--- a/chrome/browser/resources/chromeos/login/oobe.js
+++ b/chrome/browser/resources/chromeos/login/oobe.js
@@ -124,15 +124,10 @@ cr.define('cr.ui', function() {
         oldStep.addEventListener('webkitTransitionEnd', function f(e) {
           oldStep.removeEventListener('webkitTransitionEnd', f);
           oldStep.classList.add('hidden');
-          if (nextStepIndex == 0)
-            Oobe.refreshNetworkControl();
         });
       } else {
         // First screen on OOBE launch.
         newHeader.classList.remove('right');
-        if (nextStepIndex == 0) {
-          Oobe.refreshNetworkControl();
-        }
       }
       this.currentStep_ = nextStepIndex;
       $('oobe').className = nextStepId;
@@ -320,15 +315,6 @@ cr.define('cr.ui', function() {
   };
 
   /**
-   * Refreshes position of the network control (on connect screen).
-   */
-  Oobe.refreshNetworkControl = function() {
-    var controlOffset = Oobe.getOffset($('network-control'));
-    chrome.send('networkControlPosition',
-                [controlOffset.left, controlOffset.top]);
-  };
-
-  /**
    * Sets usage statistics checkbox.
    * @param {bool} checked Is the checkbox checked?
    */
@@ -400,9 +386,6 @@ cr.define('cr.ui', function() {
 
     // Update headers & buttons.
     Oobe.updateHeadersAndButtons();
-
-    // Update the network control position.
-    Oobe.refreshNetworkControl();
   }
 
   /**
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_network.html b/chrome/browser/resources/chromeos/login/oobe_screen_network.html
index 38095fd..fa58e2c 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_network.html
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_network.html
@@ -16,7 +16,7 @@
     <div i18n-content="selectNetwork" class="label"
         class="menu-control"></div>
     <div class="menu-area">
-      <div id="network-control"></div>
+      <div id="networks-list" class="menu-control"></div>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_network.js b/chrome/browser/resources/chromeos/login/oobe_screen_network.js
index 179c1fb..9321f49 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_network.js
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_network.js
@@ -8,6 +8,145 @@
 
 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() {
+      this.appendChild(this.createTitle_());
+
+      // Create menu items container.
+      var container = this.ownerDocument.createElement('div')
+      container.classList.add('dropdown-container');
+      this.appendChild(container);
+      this.isShown = false;
+    },
+
+    /**
+     * 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) {
+      this.lastElementChild.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;
+    },
+
+    /**
+     * Sets dropdown items.
+     * @param {Array} items Dropdown items array.
+     */
+    setItems: function(items) {
+      var container = this.lastElementChild;
+      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 == DropDown.ITEM_DIVIDER_ID) {
+        className = 'dropdown-divider';
+        itemContentElement = this.ownerDocument.createElement('hr');
+      } else {
+        var span = this.ownerDocument.createElement('span');
+        itemContentElement = span;
+        span.textContent = item.label;
+        if ('bold' in item && item.bold)
+          span.classList.add('bold');
+        var image = this.ownerDocument.createElement('img');
+        if (item.icon)
+          image.src = item.icon;
+      }
+
+      var itemElement = this.ownerDocument.createElement('div');
+      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 = this.ownerDocument.createElement('div');
+        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;
+          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 = this.ownerDocument.createElement('button');
+      el.classList.add('dropdown-title');
+      el.iid = -1;
+      el.controller = this;
+      el.addEventListener('click', function f(e) {
+        this.controller.isShown = !this.controller.isShown;
+      });
+      return el;
+    }
+  };
+
+  /**
    * Creates a new oobe screen div.
    * @constructor
    * @extends {HTMLDivElement}
@@ -26,6 +165,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 +179,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 +228,14 @@ cr.define('oobe', function() {
     }
   };
 
+  NetworkScreen.updateNetworks = function(data) {
+    $('connect').updateNetworks(data);
+  };
+
+  NetworkScreen.updateNetworkTitle = function(title, icon) {
+    $('connect').updateNetworkTitle(title, icon);
+  };
+
   return {
     NetworkScreen: NetworkScreen
   };