Implement popup bubbles for the controlled setting indicator

chrome/browser/resources/options/chromeos/network_list.js

 // Copyright (c) 2012 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.
 
 cr.define('options.network', function() {
 
   var ArrayDataModel = cr.ui.ArrayDataModel;
   var List = cr.ui.List;
   var ListItem = cr.ui.ListItem;
+  var ListSingleSelectionModel = cr.ui.ListSingleSelectionModel;
   var Menu = cr.ui.Menu;
   var MenuItem = cr.ui.MenuItem;
   var ControlledSettingIndicator = options.ControlledSettingIndicator;
 
   /**
    * Network settings constants. These enums usually match their C++
    * counterparts.
    */
   function Constants() {}
 
@@ skipping 262 matching lines @@
       this.subtitle = null;
       if (this.data.iconType)
         this.iconType = this.data.iconType;
       this.addEventListener('click', function() {
         this.showMenu();
       });
     },
 
     /**
      * Retrieves the ID for the menu.
-     * @private
      */
-    getMenuName_: function() {
+    getMenuName: function() {
       return this.data_.key + '-network-menu';
     },
 
     /**
      * Creates a popup menu for the control.
      * @return {Element} The newly created menu.
      */
     createMenu: function() {
       if (this.data.menu) {
         var menu = this.ownerDocument.createElement('div');
-        menu.id = this.getMenuName_();
+        menu.id = this.getMenuName();
         menu.className = 'network-menu';
         menu.hidden = true;
         Menu.decorate(menu);
         for (var i = 0; i < this.data.menu.length; i++) {
           var entry = this.data.menu[i];
           createCallback_(menu, null, entry.label, entry.command);
         }
         return menu;
       }
       return null;
     },
 
     canUpdateMenu: function() {
       return false;
     },
 
     /**
      * Displays a popup menu.
      */
     showMenu: function() {
       var rebuild = false;
       // Force a rescan if opening the menu for WiFi networks to ensure the
       // list is up to date. Networks are periodically rescanned, but depending
       // on timing, there could be an excessive delay before the first rescan
       // unless forced.
       var rescan = !activeMenu_ && this.data_.key == 'wifi';
       if (!this.menu_) {
         rebuild = true;
-        var existing = $(this.getMenuName_());
+        var existing = $(this.getMenuName());
         if (existing) {
           if (this.updateMenu())
             return;
           closeMenu_();
         }
         this.menu_ = this.createMenu();
         this.menu_.addEventListener('mousedown', function(e) {
           // Prevent blurring of list, which would close the menu.
           e.preventDefault();
-        }, true);
+        });
         var parent = $('network-menus');
         if (existing)
           parent.replaceChild(this.menu_, existing);
         else
           parent.appendChild(this.menu_);
       }
       var top = this.offsetTop + this.clientHeight;
-      var menuId = this.getMenuName_();
+      var menuId = this.getMenuName();
       if (menuId != activeMenu_ || rebuild) {
         closeMenu_();
         activeMenu_ = menuId;
         this.menu_.style.setProperty('top', top + 'px');
         this.menu_.hidden = false;
       }
       if (rescan)
         chrome.send('refreshNetworks');
     },
   };
@@ skipping 44 matching lines @@
       if (candidateURL)
         this.iconURL = candidateURL;
       else
         this.iconType = this.data.key;
 
       this.showSelector();
 
       if (policyManaged)
         this.showManagedNetworkIndicator();
 
-      if (activeMenu_ == this.getMenuName_()) {
+      if (activeMenu_ == this.getMenuName()) {
         // Menu is already showing and needs to be updated. Explicitly calling
         // show menu will force the existing menu to be replaced.  The call
         // is deferred in order to ensure that position of this element has
         // beem properly updated.
         var self = this;
         setTimeout(function() {self.showMenu();}, 0);
       }
     },
 
     /**
      * Creates a menu for selecting, configuring or disconnecting from a
      * network.
      * @return {Element} The newly created menu.
      */
     createMenu: function() {
       var menu = this.ownerDocument.createElement('div');
-      menu.id = this.getMenuName_();
+      menu.id = this.getMenuName();
       menu.className = 'network-menu';
       menu.hidden = true;
       Menu.decorate(menu);
       var addendum = [];
       if (this.data_.key == 'wifi') {
         addendum.push({label: loadTimeData.getString('joinOtherNetwork'),
                        command: 'add',
                        data: {networkType: Constants.TYPE_WIFI,
                               servicePath: ''}});
       } else if (this.data_.key == 'cellular') {
@@ skipping 112 matching lines @@
       return menu;
     },
 
     /**
      * Determines if a menu can be updated on the fly. Menus that cannot be
      * updated are fully regenerated using createMenu. The advantage of
      * updating a menu is that it can preserve ordering of networks avoiding
      * entries from jumping around after an update.
      */
     canUpdateMenu: function() {
-      return this.data_.key == 'wifi' && activeMenu_ == this.getMenuName_();
+      return this.data_.key == 'wifi' && activeMenu_ == this.getMenuName();
     },
 
     /**
      * Updates an existing menu.  Updated menus preserve ordering of prior
      * entries.  During the update process, the ordering may differ from the
      * preferred ordering as determined by the network library.  If the
      * ordering becomes potentially out of sync, then the updated menu is
      * marked for disposal on close.  Reopening the menu will force a
      * regeneration, which will in turn fix the ordering.
      * @return {boolean} True if successfully updated.
      */
     updateMenu: function() {
       if (!this.canUpdateMenu())
         return false;
-      var oldMenu = $(this.getMenuName_());
+      var oldMenu = $(this.getMenuName());
       var group = oldMenu.getElementsByClassName('network-menu-group')[0];
       if (!group)
         return false;
       var newMenu = this.createMenu();
       var discardOnClose = false;
       var oldNetworkButtons = this.extractNetworkConnectButtons_(oldMenu);
       var newNetworkButtons = this.extractNetworkConnectButtons_(newMenu);
       for (var key in oldNetworkButtons) {
         if (newNetworkButtons[key]) {
           group.replaceChild(newNetworkButtons[key].button,
@@ skipping 157 matching lines @@
   var NetworkList = cr.ui.define('list');
 
   NetworkList.prototype = {
     __proto__: List.prototype,
 
     /** @inheritDoc */
     decorate: function() {
       List.prototype.decorate.call(this);
       this.startBatchUpdates();
       this.autoExpands = true;
-      this.addEventListener('blur', this.onBlur_);
       this.dataModel = new ArrayDataModel([]);
+      this.selectionModel = new ListSingleSelectionModel();
+      this.addEventListener('blur', this.onBlur_.bind(this));
+      this.selectionModel.addEventListener('change',
+                                           this.onSelectionChange_.bind(this));
 
       // Wi-Fi control is always visible.
       this.update({key: 'wifi', networkList: []});
 
       if (airplaneModeAvailable_()) {
         this.update({key: 'airplaneMode',
                      subtitle: loadTimeData.getString('airplaneModeLabel'),
                      command: function() {
                        chrome.send('toggleAirplaneMode');
                      }});
@@ skipping 24 matching lines @@
      * When the list loses focus, unselect all items in the list and close the
      * active menu.
      * @private
      */
     onBlur_: function() {
       this.selectionModel.unselectAll();
       closeMenu_();
     },
 
     /**
+     * Close bubble and menu when a different list item is selected.
+     * @param {Event} event Event detailing the selection change.
+     * @private
+     */
+    onSelectionChange_: function(event) {
+      OptionsPage.hideBubble();
+      // A list item may temporarily become unselected while it is constructing
+      // its menu. The menu should therefore only be closed if a different item
+      // is selected, not when the menu's owner item is deselected.
+      if (activeMenu_) {
+        for (var i = 0; i < event.changes.length; ++i) {
+          if (event.changes[i].selected) {
+            var item = this.dataModel.item(event.changes[i].index);
+            if (!item.getMenuName || item.getMenuName() != activeMenu_) {
+              closeMenu_();
+              return;
+            }
+          }
+        }
+      }
+    },
+
+    /**
      * Finds the index of a network item within the data model based on
      * category.
      * @param {string} key Unique key for the item in the list.
      * @return {number} The index of the network item, or |undefined| if it is
      *     not found.
      */
     indexOf: function(key) {
       var size = this.dataModel.length;
       for (var i = 0; i < size; i++) {
         var entry = this.dataModel.item(i);
@@ skipping 168 matching lines @@
       networkList.deleteItem('vpn');
     networkList.updateToggleControl('airplaneMode', data.airplaneMode);
     networkList.endBatchUpdates();
   };
 
   /**
    * Element for indicating a policy managed network.
    * @constructor
    */
   function ManagedNetworkIndicator() {
-    var el = cr.doc.createElement('div');
+    var el = cr.doc.createElement('span');
     el.__proto__ = ManagedNetworkIndicator.prototype;
     el.decorate();
     return el;
   }
 
   ManagedNetworkIndicator.prototype = {
     __proto__: ControlledSettingIndicator.prototype,
 
     /** @inheritDoc */
     decorate: function() {
       ControlledSettingIndicator.prototype.decorate.call(this);
       this.controlledBy = 'policy';
       var policyLabel = loadTimeData.getString('managedNetwork');
       this.setAttribute('textPolicy', policyLabel);
       this.className = 'controlled-setting-indicator';
-      // The default popup clips to the bounds of the list of networks in the
-      // drop-down because it has enforced size constraints with auto-
-      // scrolling. Use a tooltip in place of the bubble popup until the
-      // clipping issues are resolved.
-      this.setAttribute('title', policyLabel);
-      this.addEventListener('click', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-      });
-    }
+      this.removeAttribute('tabindex');
+    },
+
+    /** @inheritDoc */
+    handleEvent: function(event) {
+      // Prevent focus blurring as that would close any currently open menu.
+      if (event.type == 'mousedown')
+        return;
+      ControlledSettingIndicator.prototype.handleEvent.call(this, event);
+    },
+
+    /**
+     * Handle mouse events received by the bubble, preventing focus blurring as
+     * that would close any currently open menu and propagation to any elements
+     * located behind the bubble.
+     * @param {Event} Mouse event.
+     */
+    stopEvent: function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+    },
+
+    /** @inheritDoc */
+    toggleBubble_: function() {
+      if (activeMenu_ && !$(activeMenu_).contains(this))
+        closeMenu_();
+      ControlledSettingIndicator.prototype.toggleBubble_.call(this);
+      if (this.isShowingBubble) {
+        var bubble = OptionsPage.getVisibleBubble();
+        bubble.addEventListener('mousedown', this.stopEvent);
+        bubble.addEventListener('click', this.stopEvent);
+      }
+    },
   };
 
   /**
    * Updates the list of available networks and their status, filtered by
    * network type.
    * @param {string} category The type of network.
    * @param {Array} available The list of available networks and their status.
    * @param {Array} remembered The list of remmebered networks.
    */
   function loadData_(category, available, remembered) {
@@ skipping 85 matching lines @@
    * Whether the Network list is disabled. Only used for display purpose.
    * @type {boolean}
    */
   cr.defineProperty(NetworkList, 'disabled', cr.PropertyKind.BOOL_ATTR);
 
   // Export
   return {
     NetworkList: NetworkList
   };
 });