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

chrome/browser/resources/chromeos/login/network_dropdown.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 Network drop-down implementation.
  */
 
 cr.define('cr.ui', function() {
   /**
    * Creates a new container for the drop down menu items.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var DropDownContainer = cr.ui.define('div');
 
   DropDownContainer.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /** @inheritDoc */
     decorate: function() {
       this.classList.add('dropdown-container');
       // Selected item in the menu list.
       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;
+      }
     }
   };
 
   /**
    * Creates a new DropDown div.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var DropDown = cr.ui.define('div');
 
@@ skipping 21 matching lines @@
     },
 
     /**
      * Sets dropdown menu visibility.
      * @param {bool} show New visibility state for dropdown menu.
      */
     set isShown(show) {
       this.firstElementChild.hidden = !show;
       this.container.hidden = !show;
       if (show)
-        this.container.selectItem(this.container.firstItem);
+        this.container.selectItem(this.container.firstItem, false);
     },
 
     /**
      * Returns title button.
      */
     get titleButton() {
       return this.children[1];
     },
 
     /**
@@ skipping 25 matching lines @@
         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_(this.container, item.sub[j]);
           continue;
         }
         this.createItem_(this.container, item);
       }
-      this.container.selectItem(this.container.firstItem);
+      this.container.selectItem(this.container.firstItem, false);
     },
 
     /**
      * Id of the active drop-down element.
      * @private
      */
     activeElementId_: '',
 
     /**
      * Creates dropdown item element and adds into container.
@@ skipping 38 matching lines @@
         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);
+          this.parentNode.selectItem(this, true);
         });
         itemElement = wrapperDiv;
       }
       container.appendChild(itemElement);
       if (!container.firstItem && item.id >= 0) {
         container.firstItem = itemElement;
       }
     },
 
     /**
@@ skipping 62 matching lines @@
       if (!this.isShown)
         return;
       var selected = this.container.selectedItem;
       switch (e.keyCode) {
         case 38: {  // Key up.
           do {
             selected = selected.previousSibling;
             if (!selected)
               selected = this.container.lastElementChild;
           } while (selected.iid < 0);
-          this.container.selectItem(selected);
+          this.container.selectItem(selected, false);
           break;
         }
         case 40: {  // Key down.
           do {
             selected = selected.nextSibling;
             if (!selected)
               selected = this.container.firstItem;
           } while (selected.iid < 0);
-          this.container.selectItem(selected);
+          this.container.selectItem(selected, false);
           break;
         }
         case 27: {  // Esc.
           this.isShown = false;
           break;
         }
         case 9: {  // Tab.
           this.isShown = false;
           break;
         }
@@ skipping 50 matching lines @@
         DropDown.activeElementId_ = '';
         chrome.send('networkDropdownHide', []);
       }
     }
   };
 
   return {
     DropDown: DropDown
   };
 });