[cros,webui] Adds scrollbar for the network drop-down controller.

Also ellipses was added for the title.

BUG=chromium-os:19789,chromium-os:20510
TEST=manual

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

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

3 files changed, 43 insertions, 15 deletions

diff --git a/chrome/browser/resources/chromeos/login/network_dropdown.css b/chrome/browser/resources/chromeos/login/network_dropdown.css
index 71d1a91..c4a611f 100644
--- a/chrome/browser/resources/chromeos/login/network_dropdown.css
+++ b/chrome/browser/resources/chromeos/login/network_dropdown.css
@@ -42,26 +42,31 @@
 }
 
 .dropdown-title img {
-  maring-top: -1px;
+  margin-top: -1px;
 }
 
 .dropdown-title div {
+  -webkit-box-flex: 1;
   margin-top: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .dropdown-container {
   background: #f7f7f7;
   border: 1px solid #7c91bf;
+  max-height: 330px;
+  overflow-x: hidden;
+  overflow-y: auto;
   padding-bottom: 2px;
   padding-top: 2px;
   position: relative;
   top: 100%;
-  width: 248px;
   z-index: 10;
 }
 
 .dropdown-item-container {
-  -webkitpadding-start: 5px;
+  -webkit-padding-start: 5px;
   display: -webkit-box;
   height: 24px;
 }
@@ -70,18 +75,14 @@
   background: #dce4fa;
 }
 
-.dropdown-image {
-  width: 24px;
-}
-
 .dropdown-item {
+  -webkit-box-flex: 1;
   cursor: default;
   color: #555;
   overflow: hidden;
   padding-top: 4px;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: 219px;
 }
 
 .dropdown-divider {
diff --git a/chrome/browser/resources/chromeos/login/network_dropdown.js b/chrome/browser/resources/chromeos/login/network_dropdown.js
index 41f4d0e..15469b8 100644
--- a/chrome/browser/resources/chromeos/login/network_dropdown.js
+++ b/chrome/browser/resources/chromeos/login/network_dropdown.js
@@ -24,17 +24,44 @@ cr.define('cr.ui', function() {
       this.selectedItem = null;
       // First item which could be selected.
       this.firstItem = null;
+      // Whether scroll has just happened.
+      this.scrollJustHappened = false;
+    },
+
+    /**
+     * Gets scroll action to be done for the item.
+     * @param {!Object} item Menu item.
+     * @return {integer} -1 for scroll up; 0 for no action; 1 for scroll down.
+     */
+    scrollAction: function(item) {
+      var thisTop = this.scrollTop;
+      var thisBottom = thisTop + this.offsetHeight;
+      var itemTop = item.offsetTop;
+      var itemBottom = itemTop + item.offsetHeight;
+      if (itemTop <= thisTop) return -1;
+      if (itemBottom >= thisBottom) return 1;
+      return 0;
     },
 
     /**
      * Selects new item.
      * @param {!Object} selectedItem Item to be selected.
+     * @param {boolean} mouseOver Is mouseover event triggered?
      */
-    selectItem: function(selectedItem) {
+    selectItem: function(selectedItem, mouseOver) {
+      if (mouseOver && this.scrollJustHappened) {
+        this.scrollJustHappened = false;
+        return;
+      }
       if (this.selectedItem)
         this.selectedItem.classList.remove('hover');
       selectedItem.classList.add('hover');
       this.selectedItem = selectedItem;
+      var action = this.scrollAction(selectedItem);
+      if (action != 0) {
+        selectedItem.scrollIntoView(action < 0);
+        this.scrollJustHappened = true;
+      }
     }
   };
 
@@ -76,7 +103,7 @@ cr.define('cr.ui', function() {
       this.firstElementChild.hidden = !show;
       this.container.hidden = !show;
       if (show)
-        this.container.selectItem(this.container.firstItem);
+        this.container.selectItem(this.container.firstItem, false);
     },
 
     /**
@@ -122,7 +149,7 @@ cr.define('cr.ui', function() {
         }
         this.createItem_(this.container, item);
       }
-      this.container.selectItem(this.container.firstItem);
+      this.container.selectItem(this.container.firstItem, false);
     },
 
     /**
@@ -181,7 +208,7 @@ cr.define('cr.ui', function() {
           this.parentNode.parentNode.titleButton.focus();
         });
         wrapperDiv.addEventListener('mouseover', function f(e) {
-          this.parentNode.selectItem(this);
+          this.parentNode.selectItem(this, true);
         });
         itemElement = wrapperDiv;
       }
@@ -264,7 +291,7 @@ cr.define('cr.ui', function() {
             if (!selected)
               selected = this.container.lastElementChild;
           } while (selected.iid < 0);
-          this.container.selectItem(selected);
+          this.container.selectItem(selected, false);
           break;
         }
         case 40: {  // Key down.
@@ -273,7 +300,7 @@ cr.define('cr.ui', function() {
             if (!selected)
               selected = this.container.firstItem;
           } while (selected.iid < 0);
-          this.container.selectItem(selected);
+          this.container.selectItem(selected, false);
           break;
         }
         case 27: {  // Esc.
diff --git a/chrome/browser/resources/chromeos/login/oobe.css b/chrome/browser/resources/chromeos/login/oobe.css
index 2f597fd..53ef0fa 100644
--- a/chrome/browser/resources/chromeos/login/oobe.css
+++ b/chrome/browser/resources/chromeos/login/oobe.css
@@ -618,7 +618,7 @@ html[dir=rtl] #header {
   background-position: right center;
 }
 
-body.login-display #oobe hr {
+body.login-display #oobe hr.shadow {
   -webkit-transition: all .8s ease;
   width: 1100px;  /* Necessary. Otherwise hr shrinks to 0 first when switching
                      from 640px to full width. */