Add updateMenu for modifying the WiFi menu while it is open.

chrome/browser/resources/options2/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 Menu = cr.ui.Menu;
@@ skipping 298 matching lines @@
           button.appendChild(buttonLabel);
           button.addEventListener('click', entry.command);
           MenuItem.decorate(button);
           menu.appendChild(button);
         }
         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_());
-        if (existing)
+        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_);
@@ skipping 219 matching lines @@
           } else if (!separator) {
             menu.appendChild(MenuItem.createSeparator());
             separator = true;
           }
         }
       }
       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_();
+    },
+
+    /**
+     * 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. A menu that cannot be

[csilv, 2012/07/09 19:13:14]

nit: single space before 'True'

[kevers, 2012/07/10 12:39:36]

Done.

+     *     updated is replaced with a new menu.

[csilv, 2012/07/09 19:13:14]

nit: I would recommend changing the @return description so that it doesn't imply
that it replaces the new menu here:
  "A menu that cannot be updated should be replaced with a new menu."

Alternatively, just remove the second sentence.

[kevers, 2012/07/10 12:39:36]

Dropped the second sentence.

+     */
+    updateMenu: function() {
+      if (!this.canUpdateMenu())
+        return false;
+      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,
+                             oldNetworkButtons[key].button);
+          if (newNetworkButtons[key].index != oldNetworkButtons[key].index)
+            discardOnClose = true;
+          newNetworkButtons[key] = null;
+        } else {
+          // Leave item in list to prevent network items from jumping due to
+          // deletions.
+          oldNetworkButtons[key].disabled = true;
+          discardOnClose = true;
+        }
+      }
+      for (var key in newNetworkButtons) {
+        var entry = newNetworkButtons[key];
+        if (entry) {
+          group.appendChild(entry.button);
+          discardOnClose = true;
+        }
+      }
+      oldMenu.data = {discardOnClose: discardOnClose};
+      return true;
+    },
+
+    /**
+     * Extracts a mapping of network names to menu element and position.
+     * @param {!Element} menu The menu to process.
+     * @return {Object.<string, Element>} Network mapping.
+     */

[csilv, 2012/07/09 19:13:14]

nit: @private

[kevers, 2012/07/10 12:39:36]

Done.

+    extractNetworkConnectButtons_: function(menu) {
+      var group = menu.getElementsByClassName('network-menu-group')[0];
+      var networkButtons = {};
+      if (!group)
+        return networkButtons;
+      var buttons = group.getElementsByClassName('network-menu-item');
+      for (var i = 0; i < buttons.length; i++) {
+        var label = buttons[i].data.label;
+        networkButtons[label] = {index: i, button: buttons[i]};
+      }
+      return networkButtons;
+    },
+
+    /**
      * Adds a command to a menu for modifying network settings.
      * @param {!Element} menu Parent menu.
      * @param {Object} data Description of the network.
      * @param {string} label Display name for the menu item.
      * @param {string|function} command Callback function or name
      *     of the command for |networkCommand|.
      * @return {!Element} The created menu item.
      * @private
      */
     createCallback_: function(menu, data, label, command) {
@@ skipping 15 matching lines @@
       } else if (command != null) {
         callback = function() {
           command(data);
           closeMenu_();
         };
       }
       if (callback != null)
         button.addEventListener('click', callback);
       else
         buttonLabel.classList.add('network-disabled-control');
+
+      button.data = {label: label};
       MenuItem.decorate(button);
       menu.appendChild(button);
       return button;
     },
 
     /**
      * Adds a menu item for connecting to a network.
      * @param {!Element} menu Parent menu.
      * @param {Object} data Description of the network.
      * @param {string=} opt_connect Optional connection method.
@@ skipping 373 matching lines @@
     }
     $('network-list').update(data);
   }
 
   /**
    * Hides the currently visible menu.
    * @private
    */
   function closeMenu_() {
     if (activeMenu_) {
-      $(activeMenu_).hidden = true;
+      var menu = $(activeMenu_);
+      menu.hidden = true;
+      if (menu.data && menu.data.discardOnClose)
+        menu.parentNode.removeChild(menu);
       activeMenu_ = null;
     }
   }
 
   /**
    * Determines if the user is connected to or in the process of connecting to
    * a wireless network.
    * @param {Array.<Object>} networkList List of networks.
    * @return {boolean} True if connected or connecting to a network.
    * @private
@@ skipping 34 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
   };
 });