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

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 cr.define('options.network', function() {
   6
   7   var ArrayDataModel = cr.ui.ArrayDataModel;
   8   var List = cr.ui.List;
   9   var ListItem = cr.ui.ListItem;
  10   var ListSingleSelectionModel = cr.ui.ListSingleSelectionModel;
  11   var Menu = cr.ui.Menu;
  12   var MenuItem = cr.ui.MenuItem;
  13   var ControlledSettingIndicator = options.ControlledSettingIndicator;
  14
  15   /**
  16    * Network settings constants. These enums usually match their C++
  17    * counterparts.
  18    */
  19   function Constants() {}
  20
  21   // Network types:
  22   Constants.TYPE_UNKNOWN = 'UNKNOWN';
  23   Constants.TYPE_ETHERNET = 'ethernet';
  24   Constants.TYPE_WIFI = 'wifi';
  25   Constants.TYPE_WIMAX = 'wimax';
  26   Constants.TYPE_BLUETOOTH = 'bluetooth';
  27   Constants.TYPE_CELLULAR = 'cellular';
  28   Constants.TYPE_VPN = 'vpn';
  29
  30   // Cellular activation states:
  31   Constants.ACTIVATION_STATE_UNKNOWN = 0;
  32   Constants.ACTIVATION_STATE_ACTIVATED = 1;
  33   Constants.ACTIVATION_STATE_ACTIVATING = 2;
  34   Constants.ACTIVATION_STATE_NOT_ACTIVATED = 3;
  35   Constants.ACTIVATION_STATE_PARTIALLY_ACTIVATED = 4;
  36
  37   /**
  38    * Order in which controls are to appear in the network list sorted by key.
  39    */
  40   Constants.NETWORK_ORDER = ['ethernet',
  41                              'wifi',
  42                              'wimax',
  43                              'cellular',
  44                              'vpn',
  45                              'addConnection'];
  46
  47   /**
  48    * Mapping of network category titles to the network type.
  49    */
  50   var categoryMap = {
  51     'cellular': Constants.TYPE_CELLULAR,
  52     'ethernet': Constants.TYPE_ETHERNET,
  53     'wimax': Constants.TYPE_WIMAX,
  54     'wifi': Constants.TYPE_WIFI,
  55     'vpn': Constants.TYPE_VPN
  56   };
  57
  58   /**
  59    * ID of the menu that is currently visible.
  60    * @type {?string}
  61    * @private
  62    */
  63   var activeMenu_ = null;
  64
  65   /**
  66    * Indicates if cellular networks are available.
  67    * @type {boolean}
  68    * @private
  69    */
  70   var cellularAvailable_ = false;
  71
  72   /**
  73    * Indicates if cellular networks are enabled.
  74    * @type {boolean}
  75    * @private
  76    */
  77   var cellularEnabled_ = false;
  78
  79   /**
  80    * Indicates if cellular device supports network scanning.
  81    * @type {boolean}
  82    * @private
  83    */
  84   var cellularSupportsScan_ = false;
  85
  86   /**
  87    * Indicates if WiMAX networks are available.
  88    * @type {boolean}
  89    * @private
  90    */
  91   var wimaxAvailable_ = false;
  92
  93   /**
  94    * Indicates if WiMAX networks are enabled.
  95    * @type {boolean}
  96    * @private
  97    */
  98   var wimaxEnabled_ = false;
  99
 100   /**
 101    * Indicates if mobile data roaming is enabled.
 102    * @type {boolean}
 103    * @private
 104    */
 105   var enableDataRoaming_ = false;
 106
 107   /**
 108    * Icon to use when not connected to a particular type of network.
 109    * @type {!Object.<string, string>} Mapping of network type to icon data url.
 110    * @private
 111    */
 112   var defaultIcons_ = {};
 113
 114   /**
 115    * Contains the current logged in user type, which is one of 'none',
 116    * 'regular', 'owner', 'guest', 'retail-mode', 'public-account',
 117    * 'locally-managed', and 'kiosk-app', or empty string if the data has not
 118    * been set.
 119    * @type {string}
 120    * @private
 121    */
 122   var loggedInUserType_ = '';
 123
 124   /**
 125    * Create an element in the network list for controlling network
 126    * connectivity.
 127    * @param {Object} data Description of the network list or command.
 128    * @constructor
 129    */
 130   function NetworkListItem(data) {
 131     var el = cr.doc.createElement('li');
 132     el.data_ = {};
 133     for (var key in data)
 134       el.data_[key] = data[key];
 135     NetworkListItem.decorate(el);
 136     return el;
 137   }
 138
 139   /**
 140    * Decorate an element as a NetworkListItem.
 141    * @param {!Element} el The element to decorate.
 142    */
 143   NetworkListItem.decorate = function(el) {
 144     el.__proto__ = NetworkListItem.prototype;
 145     el.decorate();
 146   };
 147
 148   NetworkListItem.prototype = {
 149     __proto__: ListItem.prototype,
 150
 151     /**
 152      * Description of the network group or control.
 153      * @type {Object.<string,Object>}
 154      * @private
 155      */
 156     data_: null,
 157
 158     /**
 159      * Element for the control's subtitle.
 160      * @type {?Element}
 161      * @private
 162      */
 163     subtitle_: null,
 164
 165     /**
 166      * Icon for the network control.
 167      * @type {?Element}
 168      * @private
 169      */
 170     icon_: null,
 171
 172     /**
 173      * Indicates if in the process of connecting to a network.
 174      * @type {boolean}
 175      * @private
 176      */
 177     connecting_: false,
 178
 179     /**
 180      * Description of the network control.
 181      * @type {Object}
 182      */
 183     get data() {
 184       return this.data_;
 185     },
 186
 187     /**
 188      * Text label for the subtitle.
 189      * @type {string}
 190      */
 191     set subtitle(text) {
 192       if (text)
 193         this.subtitle_.textContent = text;
 194       this.subtitle_.hidden = !text;
 195     },
 196
 197     /**
 198      * URL for the network icon.
 199      * @type {string}
 200      */
 201     set iconURL(iconURL) {
 202       this.icon_.style.backgroundImage = url(iconURL);
 203     },
 204
 205     /**
 206      * Type of network icon.  Each type corresponds to a CSS rule.
 207      * @type {string}
 208      */
 209     set iconType(type) {
 210       if (defaultIcons_[type])
 211         this.iconURL = defaultIcons_[type];
 212       else
 213         this.icon_.classList.add('network-' + type);
 214     },
 215
 216     /**
 217      * Indicates if the network is in the process of being connected.
 218      * @type {boolean}
 219      */
 220     set connecting(state) {
 221       this.connecting_ = state;
 222       if (state)
 223         this.icon_.classList.add('network-connecting');
 224       else
 225         this.icon_.classList.remove('network-connecting');
 226     },
 227
 228     /**
 229      * Indicates if the network is in the process of being connected.
 230      * @type {boolean}
 231      */
 232     get connecting() {
 233       return this.connecting_;
 234     },
 235
 236     /**
 237      * Set the direction of the text.
 238      * @param {string} direction The direction of the text, e.g. 'ltr'.
 239      */
 240     setSubtitleDirection: function(direction) {
 241       this.subtitle_.dir = direction;
 242     },
 243
 244     /**
 245      * Indicate that the selector arrow should be shown.
 246      */
 247     showSelector: function() {
 248       this.subtitle_.classList.add('network-selector');
 249     },
 250
 251     /**
 252      * Adds an indicator to show that the network is policy managed.
 253      */
 254     showManagedNetworkIndicator: function() {
 255       this.appendChild(new ManagedNetworkIndicator());
 256     },
 257
 258     /** @override */
 259     decorate: function() {
 260       ListItem.prototype.decorate.call(this);
 261       this.className = 'network-group';
 262       this.icon_ = this.ownerDocument.createElement('div');
 263       this.icon_.className = 'network-icon';
 264       this.appendChild(this.icon_);
 265       var textContent = this.ownerDocument.createElement('div');
 266       textContent.className = 'network-group-labels';
 267       this.appendChild(textContent);
 268       var categoryLabel = this.ownerDocument.createElement('div');
 269       var title = this.data_.key + 'Title';
 270       categoryLabel.className = 'network-title';
 271       categoryLabel.textContent = loadTimeData.getString(title);
 272       textContent.appendChild(categoryLabel);
 273       this.subtitle_ = this.ownerDocument.createElement('div');
 274       this.subtitle_.className = 'network-subtitle';
 275       textContent.appendChild(this.subtitle_);
 276     },
 277   };
 278
 279   /**
 280    * Creates a control that displays a popup menu when clicked.
 281    * @param {Object} data  Description of the control.
 282    */
 283   function NetworkMenuItem(data) {
 284     var el = new NetworkListItem(data);
 285     el.__proto__ = NetworkMenuItem.prototype;
 286     el.decorate();
 287     return el;
 288   }
 289
 290   NetworkMenuItem.prototype = {
 291     __proto__: NetworkListItem.prototype,
 292
 293     /**
 294      * Popup menu element.
 295      * @type {?Element}
 296      * @private
 297      */
 298     menu_: null,
 299
 300     /** @override */
 301     decorate: function() {
 302       this.subtitle = null;
 303       if (this.data.iconType)
 304         this.iconType = this.data.iconType;
 305       this.addEventListener('click', function() {
 306         this.showMenu();
 307       });
 308     },
 309
 310     /**
 311      * Retrieves the ID for the menu.
 312      */
 313     getMenuName: function() {
 314       return this.data_.key + '-network-menu';
 315     },
 316
 317     /**
 318      * Creates a popup menu for the control.
 319      * @return {Element} The newly created menu.
 320      */
 321     createMenu: function() {
 322       if (this.data.menu) {
 323         var menu = this.ownerDocument.createElement('div');
 324         menu.id = this.getMenuName();
 325         menu.className = 'network-menu';
 326         menu.hidden = true;
 327         Menu.decorate(menu);
 328         for (var i = 0; i < this.data.menu.length; i++) {
 329           var entry = this.data.menu[i];
 330           createCallback_(menu, null, entry.label, entry.command);
 331         }
 332         return menu;
 333       }
 334       return null;
 335     },
 336
 337     canUpdateMenu: function() {
 338       return false;
 339     },
 340
 341     /**
 342      * Displays a popup menu.
 343      */
 344     showMenu: function() {
 345       var rebuild = false;
 346       // Force a rescan if opening the menu for WiFi networks to ensure the
 347       // list is up to date. Networks are periodically rescanned, but depending
 348       // on timing, there could be an excessive delay before the first rescan
 349       // unless forced.
 350       var rescan = !activeMenu_ && this.data_.key == 'wifi';
 351       if (!this.menu_) {
 352         rebuild = true;
 353         var existing = $(this.getMenuName());
 354         if (existing) {
 355           if (this.updateMenu())
 356             return;
 357           closeMenu_();
 358         }
 359         this.menu_ = this.createMenu();
 360         this.menu_.addEventListener('mousedown', function(e) {
 361           // Prevent blurring of list, which would close the menu.
 362           e.preventDefault();
 363         });
 364         var parent = $('network-menus');
 365         if (existing)
 366           parent.replaceChild(this.menu_, existing);
 367         else
 368           parent.appendChild(this.menu_);
 369       }
 370       var top = this.offsetTop + this.clientHeight;
 371       var menuId = this.getMenuName();
 372       if (menuId != activeMenu_ || rebuild) {
 373         closeMenu_();
 374         activeMenu_ = menuId;
 375         this.menu_.style.setProperty('top', top + 'px');
 376         this.menu_.hidden = false;
 377       }
 378       if (rescan)
 379         chrome.send('refreshNetworks');
 380     },
 381   };
 382
 383   /**
 384    * Creates a control for selecting or configuring a network connection based
 385    * on the type of connection (e.g. wifi versus vpn).
 386    * @param {{key: string,
 387    *          networkList: Array.<Object>} data  Description of the network.
 388    * @constructor
 389    */
 390   function NetworkSelectorItem(data) {
 391     var el = new NetworkMenuItem(data);
 392     el.__proto__ = NetworkSelectorItem.prototype;
 393     el.decorate();
 394     return el;
 395   }
 396
 397   NetworkSelectorItem.prototype = {
 398     __proto__: NetworkMenuItem.prototype,
 399
 400     /** @override */
 401     decorate: function() {
 402       // TODO(kevers): Generalize method of setting default label.
 403       var policyManaged = false;
 404       var defaultMessage = this.data_.key == 'wifi' ?
 405           'networkOffline' : 'networkNotConnected';
 406       this.subtitle = loadTimeData.getString(defaultMessage);
 407       var list = this.data_.networkList;
 408       var candidateURL = null;
 409       for (var i = 0; i < list.length; i++) {
 410         var networkDetails = list[i];
 411         if (networkDetails.connecting || networkDetails.connected) {
 412           this.subtitle = networkDetails.networkName;
 413           this.setSubtitleDirection('ltr');
 414           policyManaged = networkDetails.policyManaged;
 415           candidateURL = networkDetails.iconURL;
 416           // Only break when we see a connecting network as it is possible to
 417           // have a connected network and a connecting network at the same
 418           // time.
 419           if (networkDetails.connecting) {
 420             this.connecting = true;
 421             candidateURL = null;
 422             break;
 423           }
 424         }
 425       }
 426       if (candidateURL)
 427         this.iconURL = candidateURL;
 428       else
 429         this.iconType = this.data.key;
 430
 431       this.showSelector();
 432
 433       if (policyManaged)
 434         this.showManagedNetworkIndicator();
 435
 436       if (activeMenu_ == this.getMenuName()) {
 437         // Menu is already showing and needs to be updated. Explicitly calling
 438         // show menu will force the existing menu to be replaced.  The call
 439         // is deferred in order to ensure that position of this element has
 440         // beem properly updated.
 441         var self = this;
 442         setTimeout(function() {self.showMenu();}, 0);
 443       }
 444     },
 445
 446     /**
 447      * Creates a menu for selecting, configuring or disconnecting from a
 448      * network.
 449      * @return {Element} The newly created menu.
 450      */
 451     createMenu: function() {
 452       var menu = this.ownerDocument.createElement('div');
 453       menu.id = this.getMenuName();
 454       menu.className = 'network-menu';
 455       menu.hidden = true;
 456       Menu.decorate(menu);
 457       var addendum = [];
 458       if (this.data_.key == 'wifi') {
 459         addendum.push({label: loadTimeData.getString('joinOtherNetwork'),
 460                        command: 'add',
 461                        data: {networkType: Constants.TYPE_WIFI,
 462                               servicePath: ''}});
 463       } else if (this.data_.key == 'cellular') {
 464         if (cellularEnabled_ && cellularSupportsScan_) {
 465           entry = {
 466             label: loadTimeData.getString('otherCellularNetworks'),
 467             command: createAddConnectionCallback_(Constants.TYPE_CELLULAR),
 468             addClass: ['other-cellulars'],
 469             data: {}
 470           };
 471           addendum.push(entry);
 472         }
 473
 474         var label = enableDataRoaming_ ? 'disableDataRoaming' :
 475             'enableDataRoaming';
 476         var disabled = loggedInUserType_ != 'owner';
 477         var entry = {label: loadTimeData.getString(label),
 478                      data: {}};
 479         if (disabled) {
 480           entry.command = null;
 481           entry.tooltip =
 482               loadTimeData.getString('dataRoamingDisableToggleTooltip');
 483         } else {
 484           var self = this;
 485           entry.command = function() {
 486             options.Preferences.setBooleanPref(
 487                 'cros.signed.data_roaming_enabled',
 488                 !enableDataRoaming_, true);
 489             // Force revalidation of the menu the next time it is displayed.
 490             self.menu_ = null;
 491           };
 492         }
 493         addendum.push(entry);
 494       }
 495       var list = this.data.rememberedNetworks;
 496       if (list && list.length > 0) {
 497         var callback = function(list) {
 498           $('remembered-network-list').clear();
 499           var dialog = options.PreferredNetworks.getInstance();
 500           OptionsPage.showPageByName('preferredNetworksPage', false);
 501           dialog.update(list);
 502         };
 503         addendum.push({label: loadTimeData.getString('preferredNetworks'),
 504                        command: callback,
 505                        data: list});
 506       }
 507
 508       var networkGroup = this.ownerDocument.createElement('div');
 509       networkGroup.className = 'network-menu-group';
 510       list = this.data.networkList;
 511       var empty = !list || list.length == 0;
 512       if (list) {
 513         for (var i = 0; i < list.length; i++) {
 514           var data = list[i];
 515           this.createNetworkOptionsCallback_(networkGroup, data);
 516           if (data.connected) {
 517             if (data.networkType == Constants.TYPE_VPN) {
 518               // Add separator
 519               addendum.push({});
 520               var i18nKey = 'disconnectNetwork';
 521               addendum.push({label: loadTimeData.getString(i18nKey),
 522                              command: 'disconnect',
 523                              data: data});
 524             }
 525           }
 526         }
 527       }
 528       if (this.data_.key == 'wifi' || this.data_.key == 'wimax' ||
 529               this.data_.key == 'cellular') {
 530         addendum.push({});
 531         if (this.data_.key == 'wifi') {
 532           addendum.push({label: loadTimeData.getString('turnOffWifi'),
 533                        command: function() {
 534                          chrome.send('disableWifi');
 535                        },
 536                        data: {}});
 537         } else if (this.data_.key == 'wimax') {
 538           addendum.push({label: loadTimeData.getString('turnOffWimax'),
 539                        command: function() {
 540                          chrome.send('disableWimax');
 541                        },
 542                        data: {}});
 543         } else if (this.data_.key == 'cellular') {
 544           addendum.push({label: loadTimeData.getString('turnOffCellular'),
 545                        command: function() {
 546                          chrome.send('disableCellular');
 547                        },
 548                        data: {}});
 549         }
 550       }
 551       if (!empty)
 552         menu.appendChild(networkGroup);
 553       if (addendum.length > 0) {
 554         var separator = false;
 555         if (!empty) {
 556           menu.appendChild(MenuItem.createSeparator());
 557           separator = true;
 558         }
 559         for (var i = 0; i < addendum.length; i++) {
 560           var value = addendum[i];
 561           if (value.data) {
 562             var item = createCallback_(menu, value.data, value.label,
 563                                        value.command);
 564             if (value.tooltip)
 565               item.title = value.tooltip;
 566             if (value.addClass)
 567               item.classList.add(value.addClass);
 568             separator = false;
 569           } else if (!separator) {
 570             menu.appendChild(MenuItem.createSeparator());
 571             separator = true;
 572           }
 573         }
 574       }
 575       return menu;
 576     },
 577
 578     /**
 579      * Determines if a menu can be updated on the fly. Menus that cannot be
 580      * updated are fully regenerated using createMenu. The advantage of
 581      * updating a menu is that it can preserve ordering of networks avoiding
 582      * entries from jumping around after an update.
 583      */
 584     canUpdateMenu: function() {
 585       return this.data_.key == 'wifi' && activeMenu_ == this.getMenuName();
 586     },
 587
 588     /**
 589      * Updates an existing menu.  Updated menus preserve ordering of prior
 590      * entries.  During the update process, the ordering may differ from the
 591      * preferred ordering as determined by the network library.  If the
 592      * ordering becomes potentially out of sync, then the updated menu is
 593      * marked for disposal on close.  Reopening the menu will force a
 594      * regeneration, which will in turn fix the ordering.
 595      * @return {boolean} True if successfully updated.
 596      */
 597     updateMenu: function() {
 598       if (!this.canUpdateMenu())
 599         return false;
 600       var oldMenu = $(this.getMenuName());
 601       var group = oldMenu.getElementsByClassName('network-menu-group')[0];
 602       if (!group)
 603         return false;
 604       var newMenu = this.createMenu();
 605       var discardOnClose = false;
 606       var oldNetworkButtons = this.extractNetworkConnectButtons_(oldMenu);
 607       var newNetworkButtons = this.extractNetworkConnectButtons_(newMenu);
 608       for (var key in oldNetworkButtons) {
 609         if (newNetworkButtons[key]) {
 610           group.replaceChild(newNetworkButtons[key].button,
 611                              oldNetworkButtons[key].button);
 612           if (newNetworkButtons[key].index != oldNetworkButtons[key].index)
 613             discardOnClose = true;
 614           newNetworkButtons[key] = null;
 615         } else {
 616           // Leave item in list to prevent network items from jumping due to
 617           // deletions.
 618           oldNetworkButtons[key].disabled = true;
 619           discardOnClose = true;
 620         }
 621       }
 622       for (var key in newNetworkButtons) {
 623         var entry = newNetworkButtons[key];
 624         if (entry) {
 625           group.appendChild(entry.button);
 626           discardOnClose = true;
 627         }
 628       }
 629       oldMenu.data = {discardOnClose: discardOnClose};
 630       return true;
 631     },
 632
 633     /**
 634      * Extracts a mapping of network names to menu element and position.
 635      * @param {!Element} menu The menu to process.
 636      * @return {Object.<string, Element>} Network mapping.
 637      * @private
 638      */
 639     extractNetworkConnectButtons_: function(menu) {
 640       var group = menu.getElementsByClassName('network-menu-group')[0];
 641       var networkButtons = {};
 642       if (!group)
 643         return networkButtons;
 644       var buttons = group.getElementsByClassName('network-menu-item');
 645       for (var i = 0; i < buttons.length; i++) {
 646         var label = buttons[i].data.label;
 647         networkButtons[label] = {index: i, button: buttons[i]};
 648       }
 649       return networkButtons;
 650     },
 651
 652     /**
 653      * Adds a menu item for showing network details.
 654      * @param {!Element} parent The parent element.
 655      * @param {Object} data Description of the network.
 656      * @private
 657      */
 658     createNetworkOptionsCallback_: function(parent, data) {
 659       var menuItem = createCallback_(parent,
 660                                      data,
 661                                      data.networkName,
 662                                      'options',
 663                                      data.iconURL);
 664       if (data.policyManaged)
 665         menuItem.appendChild(new ManagedNetworkIndicator());
 666       if (data.connected || data.connecting) {
 667         var label = menuItem.getElementsByClassName(
 668             'network-menu-item-label')[0];
 669         label.classList.add('active-network');
 670       }
 671     }
 672   };
 673
 674   /**
 675    * Creates a button-like control for configurating internet connectivity.
 676    * @param {{key: string,
 677    *          subtitle: string,
 678    *          command: function} data  Description of the network control.
 679    * @constructor
 680    */
 681   function NetworkButtonItem(data) {
 682     var el = new NetworkListItem(data);
 683     el.__proto__ = NetworkButtonItem.prototype;
 684     el.decorate();
 685     return el;
 686   }
 687
 688   NetworkButtonItem.prototype = {
 689     __proto__: NetworkListItem.prototype,
 690
 691     /** @override */
 692     decorate: function() {
 693       if (this.data.subtitle)
 694         this.subtitle = this.data.subtitle;
 695       else
 696        this.subtitle = null;
 697       if (this.data.command)
 698         this.addEventListener('click', this.data.command);
 699       if (this.data.iconURL)
 700         this.iconURL = this.data.iconURL;
 701       else if (this.data.iconType)
 702         this.iconType = this.data.iconType;
 703       if (this.data.policyManaged)
 704         this.showManagedNetworkIndicator();
 705     },
 706   };
 707
 708   /**
 709    * Adds a command to a menu for modifying network settings.
 710    * @param {!Element} menu Parent menu.
 711    * @param {!Object} data Description of the network.
 712    * @param {!string} label Display name for the menu item.
 713    * @param {?(string|function)} command Callback function or name
 714    *     of the command for |networkCommand|.
 715    * @param {?string=} opt_iconURL Optional URL to an icon for the menu item.
 716    * @return {!Element} The created menu item.
 717    * @private
 718    */
 719   function createCallback_(menu, data, label, command, opt_iconURL) {
 720     var button = menu.ownerDocument.createElement('div');
 721     button.className = 'network-menu-item';
 722
 723     var buttonIcon = menu.ownerDocument.createElement('div');
 724     buttonIcon.className = 'network-menu-item-icon';
 725     button.appendChild(buttonIcon);
 726     if (opt_iconURL)
 727       buttonIcon.style.backgroundImage = url(opt_iconURL);
 728
 729     var buttonLabel = menu.ownerDocument.createElement('span');
 730     buttonLabel.className = 'network-menu-item-label';
 731     buttonLabel.textContent = label;
 732     button.appendChild(buttonLabel);
 733     var callback = null;
 734     if (typeof command == 'string') {
 735       var type = data.networkType;
 736       var path = data.servicePath;
 737       callback = function() {
 738         chrome.send('networkCommand',
 739                     [type, path, command]);
 740         closeMenu_();
 741       };
 742     } else if (command != null) {
 743       if (data) {
 744         callback = function() {
 745           command(data);
 746           closeMenu_();
 747         };
 748       } else {
 749         callback = function() {
 750           command();
 751           closeMenu_();
 752         };
 753       }
 754     }
 755     if (callback != null)
 756       button.addEventListener('click', callback);
 757     else
 758       buttonLabel.classList.add('network-disabled-control');
 759
 760     button.data = {label: label};
 761     MenuItem.decorate(button);
 762     menu.appendChild(button);
 763     return button;
 764   }
 765
 766   /**
 767    * A list of controls for manipulating network connectivity.
 768    * @constructor
 769    */
 770   var NetworkList = cr.ui.define('list');
 771
 772   NetworkList.prototype = {
 773     __proto__: List.prototype,
 774
 775     /** @override */
 776     decorate: function() {
 777       List.prototype.decorate.call(this);
 778       this.startBatchUpdates();
 779       this.autoExpands = true;
 780       this.dataModel = new ArrayDataModel([]);
 781       this.selectionModel = new ListSingleSelectionModel();
 782       this.addEventListener('blur', this.onBlur_.bind(this));
 783       this.selectionModel.addEventListener('change',
 784                                            this.onSelectionChange_.bind(this));
 785
 786       // Wi-Fi control is always visible.
 787       this.update({key: 'wifi', networkList: []});
 788
 789       var entryAddWifi = {
 790         label: loadTimeData.getString('addConnectionWifi'),
 791         command: createAddConnectionCallback_(Constants.TYPE_WIFI)
 792       };
 793       var entryAddVPN = {
 794         label: loadTimeData.getString('addConnectionVPN'),
 795         command: createAddConnectionCallback_(Constants.TYPE_VPN)
 796       };
 797       this.update({key: 'addConnection',
 798                    iconType: 'add-connection',
 799                    menu: [entryAddWifi, entryAddVPN]
 800                   });
 801
 802       var prefs = options.Preferences.getInstance();
 803       prefs.addEventListener('cros.signed.data_roaming_enabled',
 804           function(event) {
 805             enableDataRoaming_ = event.value.value;
 806           });
 807       this.endBatchUpdates();
 808     },
 809
 810     /**
 811      * When the list loses focus, unselect all items in the list and close the
 812      * active menu.
 813      * @private
 814      */
 815     onBlur_: function() {
 816       this.selectionModel.unselectAll();
 817       closeMenu_();
 818     },
 819
 820     /**
 821      * Close bubble and menu when a different list item is selected.
 822      * @param {Event} event Event detailing the selection change.
 823      * @private
 824      */
 825     onSelectionChange_: function(event) {
 826       OptionsPage.hideBubble();
 827       // A list item may temporarily become unselected while it is constructing
 828       // its menu. The menu should therefore only be closed if a different item
 829       // is selected, not when the menu's owner item is deselected.
 830       if (activeMenu_) {
 831         for (var i = 0; i < event.changes.length; ++i) {
 832           if (event.changes[i].selected) {
 833             var item = this.dataModel.item(event.changes[i].index);
 834             if (!item.getMenuName || item.getMenuName() != activeMenu_) {
 835               closeMenu_();
 836               return;
 837             }
 838           }
 839         }
 840       }
 841     },
 842
 843     /**
 844      * Finds the index of a network item within the data model based on
 845      * category.
 846      * @param {string} key Unique key for the item in the list.
 847      * @return {number} The index of the network item, or |undefined| if it is
 848      *     not found.
 849      */
 850     indexOf: function(key) {
 851       var size = this.dataModel.length;
 852       for (var i = 0; i < size; i++) {
 853         var entry = this.dataModel.item(i);
 854         if (entry.key == key)
 855           return i;
 856       }
 857     },
 858
 859     /**
 860      * Updates a network control.
 861      * @param {Object.<string,string>} data Description of the entry.
 862      */
 863     update: function(data) {
 864       this.startBatchUpdates();
 865       var index = this.indexOf(data.key);
 866       if (index == undefined) {
 867         // Find reference position for adding the element.  We cannot hide
 868         // individual list elements, thus we need to conditionally add or
 869         // remove elements and cannot rely on any element having a fixed index.
 870         for (var i = 0; i < Constants.NETWORK_ORDER.length; i++) {
 871           if (data.key == Constants.NETWORK_ORDER[i]) {
 872             data.sortIndex = i;
 873             break;
 874           }
 875         }
 876         var referenceIndex = -1;
 877         for (var i = 0; i < this.dataModel.length; i++) {
 878           var entry = this.dataModel.item(i);
 879           if (entry.sortIndex < data.sortIndex)
 880             referenceIndex = i;
 881           else
 882             break;
 883         }
 884         if (referenceIndex == -1) {
 885           // Prepend to the start of the list.
 886           this.dataModel.splice(0, 0, data);
 887         } else if (referenceIndex == this.dataModel.length) {
 888           // Append to the end of the list.
 889           this.dataModel.push(data);
 890         } else {
 891           // Insert after the reference element.
 892           this.dataModel.splice(referenceIndex + 1, 0, data);
 893         }
 894       } else {
 895         var entry = this.dataModel.item(index);
 896         data.sortIndex = entry.sortIndex;
 897         this.dataModel.splice(index, 1, data);
 898       }
 899       this.endBatchUpdates();
 900     },
 901
 902     /** @override */
 903     createItem: function(entry) {
 904       if (entry.networkList)
 905         return new NetworkSelectorItem(entry);
 906       if (entry.command)
 907         return new NetworkButtonItem(entry);
 908       if (entry.menu)
 909         return new NetworkMenuItem(entry);
 910     },
 911
 912     /**
 913      * Deletes an element from the list.
 914      * @param {string} key  Unique identifier for the element.
 915      */
 916     deleteItem: function(key) {
 917       var index = this.indexOf(key);
 918       if (index != undefined)
 919         this.dataModel.splice(index, 1);
 920     },
 921
 922     /**
 923      * Updates the state of a toggle button.
 924      * @param {string} key Unique identifier for the element.
 925      * @param {boolean} active Whether the control is active.
 926      */
 927     updateToggleControl: function(key, active) {
 928       var index = this.indexOf(key);
 929       if (index != undefined) {
 930         var entry = this.dataModel.item(index);
 931         entry.iconType = active ? 'control-active' :
 932             'control-inactive';
 933         this.update(entry);
 934       }
 935     }
 936   };
 937
 938   /**
 939    * Sets the default icon to use for each network type if disconnected.
 940    * @param {!Object.<string, string>} data Mapping of network type to icon
 941    *     data url.
 942    */
 943   NetworkList.setDefaultNetworkIcons = function(data) {
 944     defaultIcons_ = Object.create(data);
 945   };
 946
 947   /**
 948    * Sets the current logged in user type.
 949    * @param {string} userType Current logged in user type.
 950    */
 951   NetworkList.updateLoggedInUserType = function(userType) {
 952     loggedInUserType_ = String(userType);
 953   };
 954
 955   /**
 956    * Chrome callback for updating network controls.
 957    * @param {Object} data Description of available network devices and their
 958    *     corresponding state.
 959    */
 960   NetworkList.refreshNetworkData = function(data) {
 961     var networkList = $('network-list');
 962     networkList.startBatchUpdates();
 963     cellularAvailable_ = data.cellularAvailable;
 964     cellularEnabled_ = data.cellularEnabled;
 965     cellularSupportsScan_ = data.cellularSupportsScan;
 966     wimaxAvailable_ = data.wimaxAvailable;
 967     wimaxEnabled_ = data.wimaxEnabled;
 968
 969     // Only show Ethernet control if connected.
 970     var ethernetConnection = getConnection_(data.wiredList);
 971     if (ethernetConnection) {
 972       var type = String(Constants.TYPE_ETHERNET);
 973       var path = ethernetConnection.servicePath;
 974       var ethernetOptions = function() {
 975         chrome.send('networkCommand',
 976                     [type, path, 'options']);
 977       };
 978       networkList.update({key: 'ethernet',
 979                           subtitle: loadTimeData.getString('networkConnected'),
 980                           iconURL: ethernetConnection.iconURL,
 981                           command: ethernetOptions,
 982                           policyManaged: ethernetConnection.policyManaged});
 983     } else {
 984       networkList.deleteItem('ethernet');
 985     }
 986
 987     if (data.wifiEnabled)
 988       loadData_('wifi', data.wirelessList, data.rememberedList);
 989     else
 990       addEnableNetworkButton_('wifi', 'enableWifi', 'wifi');
 991
 992     // Only show cellular control if available.
 993     if (data.cellularAvailable) {
 994       if (data.cellularEnabled)
 995         loadData_('cellular', data.wirelessList, data.rememberedList);
 996       else
 997         addEnableNetworkButton_('cellular', 'enableCellular', 'cellular');
 998     } else {
 999       networkList.deleteItem('cellular');
1000     }
1001
1002     // Only show cellular control if available.
1003     if (data.wimaxAvailable) {
1004       if (data.wimaxEnabled)
1005         loadData_('wimax', data.wirelessList, data.rememberedList);
1006       else
1007         addEnableNetworkButton_('wimax', 'enableWimax', 'cellular');
1008     } else {
1009       networkList.deleteItem('wimax');
1010     }
1011
1012     // Only show VPN control if there is at least one VPN configured.
1013     if (data.vpnList.length > 0)
1014       loadData_('vpn', data.vpnList, data.rememberedList);
1015     else
1016       networkList.deleteItem('vpn');
1017     networkList.endBatchUpdates();
1018   };
1019
1020   /**
1021    * Replaces a network menu with a button for reenabling the type of network.
1022    * @param {string} name The type of network (wifi, cellular or wimax).
1023    * @param {string} command The command for reenabling the network.
1024    * @param {string} type of icon (wifi or cellular).
1025    * @private
1026    */
1027   function addEnableNetworkButton_(name, command, icon) {
1028     var subtitle = loadTimeData.getString('networkDisabled');
1029     var enableNetwork = function() {
1030       chrome.send(command);
1031     };
1032     var networkList = $('network-list');
1033     networkList.update({key: name,
1034                         subtitle: subtitle,
1035                         iconType: icon,
1036                         command: enableNetwork});
1037   }
1038
1039   /**
1040    * Element for indicating a policy managed network.
1041    * @constructor
1042    */
1043   function ManagedNetworkIndicator() {
1044     var el = cr.doc.createElement('span');
1045     el.__proto__ = ManagedNetworkIndicator.prototype;
1046     el.decorate();
1047     return el;
1048   }
1049
1050   ManagedNetworkIndicator.prototype = {
1051     __proto__: ControlledSettingIndicator.prototype,
1052
1053     /** @override */
1054     decorate: function() {
1055       ControlledSettingIndicator.prototype.decorate.call(this);
1056       this.controlledBy = 'policy';
1057       var policyLabel = loadTimeData.getString('managedNetwork');
1058       this.setAttribute('textPolicy', policyLabel);
1059       this.removeAttribute('tabindex');
1060     },
1061
1062     /** @override */
1063     handleEvent: function(event) {
1064       // Prevent focus blurring as that would close any currently open menu.
1065       if (event.type == 'mousedown')
1066         return;
1067       ControlledSettingIndicator.prototype.handleEvent.call(this, event);
1068     },
1069
1070     /**
1071      * Handle mouse events received by the bubble, preventing focus blurring as
1072      * that would close any currently open menu and preventing propagation to
1073      * any elements located behind the bubble.
1074      * @param {Event} Mouse event.
1075      */
1076     stopEvent: function(event) {
1077       event.preventDefault();
1078       event.stopPropagation();
1079     },
1080
1081     /** @override */
1082     toggleBubble_: function() {
1083       if (activeMenu_ && !$(activeMenu_).contains(this))
1084         closeMenu_();
1085       ControlledSettingIndicator.prototype.toggleBubble_.call(this);
1086       if (this.showingBubble) {
1087         var bubble = OptionsPage.getVisibleBubble();
1088         bubble.addEventListener('mousedown', this.stopEvent);
1089         bubble.addEventListener('click', this.stopEvent);
1090       }
1091     },
1092   };
1093
1094   /**
1095    * Updates the list of available networks and their status, filtered by
1096    * network type.
1097    * @param {string} category The type of network.
1098    * @param {Array} available The list of available networks and their status.
1099    * @param {Array} remembered The list of remmebered networks.
1100    */
1101   function loadData_(category, available, remembered) {
1102     var data = {key: category};
1103     var type = categoryMap[category];
1104     var availableNetworks = [];
1105     for (var i = 0; i < available.length; i++) {
1106       if (available[i].networkType == type)
1107         availableNetworks.push(available[i]);
1108     }
1109     data.networkList = availableNetworks;
1110     if (remembered) {
1111       var rememberedNetworks = [];
1112       for (var i = 0; i < remembered.length; i++) {
1113         if (remembered[i].networkType == type)
1114           rememberedNetworks.push(remembered[i]);
1115       }
1116       data.rememberedNetworks = rememberedNetworks;
1117     }
1118     $('network-list').update(data);
1119   }
1120
1121   /**
1122    * Hides the currently visible menu.
1123    * @private
1124    */
1125   function closeMenu_() {
1126     if (activeMenu_) {
1127       var menu = $(activeMenu_);
1128       menu.hidden = true;
1129       if (menu.data && menu.data.discardOnClose)
1130         menu.parentNode.removeChild(menu);
1131       activeMenu_ = null;
1132     }
1133   }
1134
1135   /**
1136    * Fetches the active connection.
1137    * @param {Array.<Object>} networkList List of networks.
1138    * @return {boolean} True if connected or connecting to a network.
1139    * @private
1140    */
1141   function getConnection_(networkList) {
1142     if (!networkList)
1143       return null;
1144     for (var i = 0; i < networkList.length; i++) {
1145       var entry = networkList[i];
1146       if (entry.connected || entry.connecting)
1147         return entry;
1148     }
1149     return null;
1150   }
1151
1152   /**
1153    * Create a callback function that adds a new connection of the given type.
1154    * @param {!number} type A network type Constants.TYPE_*.
1155    * @return {function()} The created callback.
1156    * @private
1157    */
1158   function createAddConnectionCallback_(type) {
1159     return function() {
1160       chrome.send('networkCommand', [String(type), '', 'add']);
1161     };
1162   }
1163
1164   /**
1165    * Whether the Network list is disabled. Only used for display purpose.
1166    * @type {boolean}
1167    */
1168   cr.defineProperty(NetworkList, 'disabled', cr.PropertyKind.BOOL_ATTR);
1169
1170   // Export
1171   return {
1172     NetworkList: NetworkList
1173   };
1174 });