Some JS cleanup, including proper ownership of ONC properties.

chrome/browser/resources/options/chromeos/internet_detail.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.
 
 // require: onc_data.js
 
 // NOTE(stevenjb): This code is in the process of being converted to be
 // compatible with the networkingPrivate extension API:
 // * The network property dictionaries are being converted to use ONC values.
 // * chrome.send calls will be replaced with an API object that simulates the
@@ skipping 99 matching lines @@
   }
 
   /////////////////////////////////////////////////////////////////////////////
   // DetailsInternetPage class:
 
   /**
    * Encapsulated handling of ChromeOS internet details overlay page.
    * @constructor
    */
   function DetailsInternetPage() {
+    this.userApnIndex_ = -1;
+    this.selectedApnIndex_ = -1;
+    this.userApn_ = {};
     Page.call(this, 'detailsInternetPage', null, 'details-internet-page');
   }
 
   cr.addSingletonGetter(DetailsInternetPage);
 
   DetailsInternetPage.prototype = {
     __proto__: Page.prototype,
 
     /** @override */
     initializePage: function() {
@@ skipping 37 matching lines @@
       $('details-internet-configure').addEventListener('click',
                                                        function(event) {
         DetailsInternetPage.setDetails();
         DetailsInternetPage.configureNetwork();
       });
 
       $('activate-details').addEventListener('click', function(event) {
         DetailsInternetPage.activateFromDetails();
       });
 
-      $('buyplan-details').addEventListener('click', function(event) {
-        var data = $('connection-state').data;
-        chrome.send('buyDataPlan', [data.servicePath]);
-        PageManager.closeOverlay();
-      });
-
       $('view-account-details').addEventListener('click', function(event) {
-        var data = $('connection-state').data;
-        chrome.send('showMorePlanInfo', [data.servicePath]);
+        chrome.send('showMorePlanInfo',
+                    [DetailsInternetPage.getInstance().servicePath_]);
         PageManager.closeOverlay();
       });
 
       $('cellular-apn-use-default').addEventListener('click', function(event) {
-        var data = $('connection-state').data;
-        var onc = $('connection-state').onc;
-        var apnSelector = $('select-apn');
-
-        if (data.userApnIndex != -1) {
-          apnSelector.remove(data.userApnIndex);
-          data.userApnIndex = -1;
-        }
-
-        var activeApn;
-        var iApn = -1;
-        var apnList = onc.getActiveValue('Cellular.APNList');
-        if (apnList != undefined && apnList.length > 0) {
-          iApn = 0;
-          var defaultApn = apnList[iApn];
-          activeApn['AccessPointName'] =
-              stringFromValue(defaultApn['AccessPointName']);
-          activeApn['Username'] = stringFromValue(defaultApn['Username']);
-          activeApn['Password'] = stringFromValue(defaultApn['Password']);
-          chrome.send('setApn', [data.servicePath,
-                                 activeApn['AccessPointName'],
-                                 activeApn['Username'],
-                                 activeApn['Password']]);
-        }
-        onc.setManagedProperty('Cellular.APN', activeApn);
-        apnSelector.selectedIndex = iApn;
-        data.selectedApn = iApn;
-
-        updateHidden('.apn-list-view', false);
-        updateHidden('.apn-details-view', true);
+        DetailsInternetPage.getInstance().setDefaultApn_();
       });
 
       $('cellular-apn-set').addEventListener('click', function(event) {
-        if ($('cellular-apn').value == '')
-          return;
-
-        var data = $('connection-state').data;
-        var onc = $('connection-state').onc;
-        var apnSelector = $('select-apn');
-
-        var activeApn = {};
-        activeApn['AccessPointName'] =
-            stringFromValue($('cellular-apn').value);
-        activeApn['Username'] =
-            stringFromValue($('cellular-apn-username').value);
-        activeApn['Password'] =
-            stringFromValue($('cellular-apn-password').value);
-        onc.setManagedProperty('Cellular.APN', activeApn);
-        data.userApn = activeApn;
-        chrome.send('setApn', [data.servicePath,
-                               activeApn['AccessPointName'],
-                               activeApn['Username'],
-                               activeApn['Password']]);
-
-        if (data.userApnIndex != -1) {
-          apnSelector.remove(data.userApnIndex);
-          data.userApnIndex = -1;
-        }
-
-        var option = document.createElement('option');
-        option.textContent = activeApn['AccessPointName'];
-        option.value = -1;
-        option.selected = true;
-        apnSelector.add(option, apnSelector[apnSelector.length - 1]);
-        data.userApnIndex = apnSelector.length - 2;
-        data.selectedApn = data.userApnIndex;
-
-        updateHidden('.apn-list-view', false);
-        updateHidden('.apn-details-view', true);
+        DetailsInternetPage.getInstance().setApn_($('cellular-apn').value);
       });
 
       $('cellular-apn-cancel').addEventListener('click', function(event) {
-        $('select-apn').selectedIndex = $('connection-state').data.selectedApn;
-        updateHidden('.apn-list-view', false);
-        updateHidden('.apn-details-view', true);
+        DetailsInternetPage.getInstance().cancelApn_();
       });
 
       $('select-apn').addEventListener('change', function(event) {
-        var data = $('connection-state').data;
-        var onc = $('connection-state').onc;
-        var apnSelector = $('select-apn');
-        var apnDict;
-        if (apnSelector[apnSelector.selectedIndex].value != -1) {
-          var apnList = onc.getActiveValue('Cellular.APNList');
-          var apnIndex = apnSelector.selectedIndex;
-          assert(apnIndex < apnList.length);
-          apnDict = apnList[apnIndex];
-          chrome.send('setApn', [data.servicePath,
-                                 stringFromValue(apnDict['AccessPointName']),
-                                 stringFromValue(apnDict['Username']),
-                                 stringFromValue(apnDict['Password'])]);
-          data.selectedApn = apnIndex;
-        } else if (apnSelector.selectedIndex == data.userApnIndex) {
-          apnDict = data.userApn;
-          chrome.send('setApn', [data.servicePath,
-                                 stringFromValue(apnDict['AccessPointName']),
-                                 stringFromValue(apnDict['Username']),
-                                 stringFromValue(apnDict['Password'])]);
-          data.selectedApn = apnSelector.selectedIndex;
-        } else {
-          apnDict = onc.getActiveValue('Cellular.APN');
-          $('cellular-apn').value = stringFromValue(apnDict['AccessPointName']);
-          $('cellular-apn-username').value =
-              stringFromValue(apnDict['Username']);
-          $('cellular-apn-password').value =
-              stringFromValue(apnDict['Password']);
-
-          updateHidden('.apn-list-view', true);
-          updateHidden('.apn-details-view', false);
-        }
+        DetailsInternetPage.getInstance().selectApn_();
       });
 
       $('sim-card-lock-enabled').addEventListener('click', function(event) {
         var newValue = $('sim-card-lock-enabled').checked;
         // Leave value as is because user needs to enter PIN code first.
         // When PIN will be entered and value changed,
         // we'll update UI to reflect that change.
         $('sim-card-lock-enabled').checked = !newValue;
         chrome.send('setSimCardLock', [newValue]);
       });
@@ skipping 173 matching lines @@
       // this device is connected. This is so that you can fix the ip configs
       // if you can't connect to any network.
       // TODO(chocobo): Once ipconfig is moved to flimflam service objects,
       //   we need to redo this logic to allow configuration of all networks.
       $('ipconfig-section').hidden = !this.connected && this.deviceConnected;
       $('ipconfig-dns-section').hidden =
         !this.connected && this.deviceConnected;
 
       // Network type related.
       updateHidden('#details-internet-page .cellular-details',
-                   this.type != 'Cellular');
+                   this.type_ != 'Cellular');
       updateHidden('#details-internet-page .wifi-details',
-                   this.type != 'WiFi');
+                   this.type_ != 'WiFi');
       updateHidden('#details-internet-page .wimax-details',
-                   this.type != 'Wimax');
-      updateHidden('#details-internet-page .vpn-details', this.type != 'VPN');
+                   this.type_ != 'Wimax');
+      updateHidden('#details-internet-page .vpn-details', this.type_ != 'VPN');
       updateHidden('#details-internet-page .proxy-details', !this.showProxy);
 
       // Cellular
 
       // Conditionally call updateHidden on .gsm-only, so that we don't unhide
       // a previously hidden element.
       if (this.gsm)
         updateHidden('#details-internet-page .cdma-only', true);
       else
         updateHidden('#details-internet-page .gsm-only', true);
 
       // Wifi
 
       // Hide network tab for VPN.
       updateHidden('#details-internet-page .network-details',
-                   this.type == 'VPN');
+                   this.type_ == 'VPN');
 
       // Password and shared.
       updateHidden('#details-internet-page #password-details',
-                   this.type != 'WiFi' || !this.hasSecurity);
+                   this.type_ != 'WiFi' || !this.hasSecurity);
       updateHidden('#details-internet-page #wifi-shared-network',
           !this.shared);
       updateHidden('#details-internet-page #prefer-network',
                    !this.showPreferred);
 
       // WiMAX.
       updateHidden('#details-internet-page #wimax-shared-network',
                    !this.shared);
 
       // Proxy
@@ skipping 114 matching lines @@
       $('ftp-proxy').disabled = allDisabled;
       $('ftp-proxy-port').disabled = allDisabled;
       $('socks-host').disabled = allDisabled;
       $('socks-port').disabled = allDisabled;
       $('proxy-use-pac-url').disabled = true;
       $('proxy-pac-url').disabled = true;
       $('auto-proxy-parms').hidden = !$('auto-proxy').checked;
       $('manual-proxy-parms').hidden = !$('manual-proxy').checked;
       chrome.send('coreOptionsUserMetricsAction',
                   ['Options_NetworkManualProxy_Enable']);
+    },
+
+    updateConnectionButtonVisibilty_: function() {
+      var onc = this.onc_;
+      if (this.type_ == 'Ethernet') {
+        // Ethernet can never be connected or disconnected and can always be
+        // configured (e.g. to set security).
+        $('details-internet-login').hidden = true;
+        $('details-internet-disconnect').hidden = true;
+        $('details-internet-configure').hidden = false;
+        return;
+      }
+
+      var connectState = onc.getActiveValue('ConnectionState');
+      if (connectState == 'NotConnected') {
+        $('details-internet-login').hidden = false;
+        // Connecting to an unconfigured network might trigger certificate
+        // installation UI. Until that gets handled here, always enable the
+        // Connect button.
+        $('details-internet-login').disabled = false;
+        $('details-internet-disconnect').hidden = true;
+      } else {
+        $('details-internet-login').hidden = true;
+        $('details-internet-disconnect').hidden = false;
+      }
+
+      var connectable = onc.getActiveValue('Connectable');
+      if (connectState != 'Connected' &&
+          (!connectable || this.hasSecurity ||
+          (this.type_ == 'Wimax' || this.type_ == 'VPN'))) {
+        $('details-internet-configure').hidden = false;
+      } else {
+        $('details-internet-configure').hidden = true;
+      }
+    },
+
+    populateHeader_: function() {
+      var onc = this.onc_;
+
+      $('network-details-title').textContent = onc.getTranslatedValue('Name');
+      var connectionState = onc.getActiveValue('ConnectionState');
+      var connectionStateString = onc.getTranslatedValue('ConnectionState');
+      this.connected = connectionState == 'Connected';
+      $('network-details-subtitle-status').textContent = connectionStateString;
+      var typeKey;
+      var type = this.type_;
+      if (type == 'Ethernet')
+        typeKey = 'ethernetTitle';
+      else if (type == 'WiFi')
+        typeKey = 'wifiTitle';
+      else if (type == 'Wimax')
+        typeKey = 'wimaxTitle';
+      else if (type == 'Cellular')
+        typeKey = 'cellularTitle';
+      else if (type == 'VPN')
+        typeKey = 'vpnTitle';
+      else
+        typeKey = null;
+      var typeLabel = $('network-details-subtitle-type');
+      var typeSeparator = $('network-details-subtitle-separator');
+      if (typeKey) {
+        typeLabel.textContent = loadTimeData.getString(typeKey);
+        typeLabel.hidden = false;
+        typeSeparator.hidden = false;
+      } else {
+        typeLabel.hidden = true;
+        typeSeparator.hidden = true;
+      }
+    },
+
+    initializeApnList_: function(onc) {
+      var apnSelector = $('select-apn');
+      // Clear APN lists, keep only last element that "other".
+      while (apnSelector.length != 1) {
+        apnSelector.remove(0);
+      }
+      var otherOption = apnSelector[0];
+      var activeApn = onc.getActiveValue('Cellular.APN.AccessPointName');
+      var activeUsername = onc.getActiveValue('Cellular.APN.Username');
+      var activePassword = onc.getActiveValue('Cellular.APN.Password');
+      var lastGoodApn =
+          onc.getActiveValue('Cellular.LastGoodAPN.AccessPointName');
+      var lastGoodUsername =
+          onc.getActiveValue('Cellular.LastGoodAPN.Username');
+      var lastGoodPassword =
+          onc.getActiveValue('Cellular.LastGoodAPN.Password');
+      var apnList = onc.getActiveValue('Cellular.APNList');
+      for (var i = 0; i < apnList.length; i++) {
+        var apnDict = apnList[i];
+        var option = document.createElement('option');
+        var localizedName = apnDict['LocalizedName'];
+        var name = localizedName ? localizedName : apnDict['Name'];
+        var accessPointName = apnDict['AccessPointName'];
+        option.textContent =
+            name ? (name + ' (' + accessPointName + ')') : accessPointName;
+        option.value = i;
+        // If this matches the active Apn, or LastGoodApn, set it as the
+        // selected Apn.
+        if ((activeApn == accessPointName &&
+            activeUsername == apnDict['Username'] &&
+            activePassword == apnDict['Password']) ||
+            (!activeApn &&
+            lastGoodApn == accessPointName &&
+            lastGoodUsername == apnDict['Username'] &&
+            lastGoodPassword == apnDict['Password'])) {
+          this.selectedApnIndex_ = i;
+        }
+        // Insert new option before "other" option.
+        apnSelector.add(option, otherOption);
+      }
+      if (this.selectedApnIndex_ == -1 && activeApn) {
+        var activeOption = document.createElement('option');
+        activeOption.textContent = activeApn;
+        activeOption.value = -1;
+        apnSelector.add(activeOption, otherOption);
+        this.selectedApnIndex_ = apnSelector.length - 2;
+        this.userApnIndex_ = this.selectedApnIndex_;
+      }
+      assert(this.selectedApnIndex_ >= 0);
+      apnSelector.selectedIndex = this.selectedApnIndex_;
+      updateHidden('.apn-list-view', false);
+      updateHidden('.apn-details-view', true);
+    },
+
+    setDefaultApn_: function() {
+      var onc = this.onc_;
+      var apnSelector = $('select-apn');
+
+      if (this.userApnIndex_ != -1) {
+        apnSelector.remove(this.userApnIndex_);
+        this.userApnIndex_ = -1;
+      }
+
+      var activeApn;
+      var iApn = -1;
+      var apnList = onc.getActiveValue('Cellular.APNList');
+      if (apnList != undefined && apnList.length > 0) {
+        iApn = 0;
+        var defaultApn = apnList[iApn];
+        activeApn['AccessPointName'] =
+            stringFromValue(defaultApn['AccessPointName']);

[stevenjb, 2014/09/08 21:31:18]

This was buggy; activeApn needs to be defined as a dictionary object first.
Also, we really shouldn't call onc.setmanagedProperty in line 701 unless we set
activeApn anyway.

[armansito, 2014/09/08 21:43:32]

Yes, good catch by vitalyp@.

+        activeApn['Username'] = stringFromValue(defaultApn['Username']);
+        activeApn['Password'] = stringFromValue(defaultApn['Password']);
+        chrome.send('setApn', [this.servicePath_,
+                               activeApn['AccessPointName'],
+                               activeApn['Username'],
+                               activeApn['Password']]);
+      }
+      onc.setManagedProperty('Cellular.APN', activeApn);
+      apnSelector.selectedIndex = iApn;
+      this.selectedApnIndex_ = iApn;
+
+      updateHidden('.apn-list-view', false);
+      updateHidden('.apn-details-view', true);
+    },
+
+    setApn_: function(apnValue) {
+      if (apnValue == '')
+        return;
+
+      var onc = this.onc_;
+      var apnSelector = $('select-apn');
+
+      var activeApn = {};
+      activeApn['AccessPointName'] = stringFromValue(apnValue);
+      activeApn['Username'] = stringFromValue($('cellular-apn-username').value);
+      activeApn['Password'] = stringFromValue($('cellular-apn-password').value);
+      onc.setManagedProperty('Cellular.APN', activeApn);
+      this.userApn_ = activeApn;
+      chrome.send('setApn', [this.servicePath_,
+                             activeApn['AccessPointName'],
+                             activeApn['Username'],
+                             activeApn['Password']]);
+
+      if (this.userApnIndex_ != -1) {
+        apnSelector.remove(this.userApnIndex_);
+        this.userApnIndex_ = -1;
+      }
+
+      var option = document.createElement('option');
+      option.textContent = activeApn['AccessPointName'];
+      option.value = -1;
+      option.selected = true;
+      apnSelector.add(option, apnSelector[apnSelector.length - 1]);
+      this.userApnIndex_ = apnSelector.length - 2;
+      this.selectedApnIndex_ = this.userApnIndex_;
+
+      updateHidden('.apn-list-view', false);
+      updateHidden('.apn-details-view', true);
+    },
+
+    cancelApn_: function() {
+      $('select-apn').selectedIndex = this.selectedApnIndex_;
+      updateHidden('.apn-list-view', false);
+      updateHidden('.apn-details-view', true);
+    },
+
+    selectApn_: function() {
+      var onc = this.onc_;
+      var apnSelector = $('select-apn');
+      var apnDict;
+      if (apnSelector[apnSelector.selectedIndex].value != -1) {
+        var apnList = onc.getActiveValue('Cellular.APNList');
+        var apnIndex = apnSelector.selectedIndex;
+        assert(apnIndex < apnList.length);
+        apnDict = apnList[apnIndex];
+        chrome.send('setApn', [this.servicePath_,
+                               stringFromValue(apnDict['AccessPointName']),
+                               stringFromValue(apnDict['Username']),
+                               stringFromValue(apnDict['Password'])]);
+        this.selectedApnIndex_ = apnIndex;
+      } else if (apnSelector.selectedIndex == this.userApnIndex_) {
+        apnDict = this.userApn_;
+        chrome.send('setApn', [this.servicePath_,
+                               stringFromValue(apnDict['AccessPointName']),
+                               stringFromValue(apnDict['Username']),
+                               stringFromValue(apnDict['Password'])]);
+        this.selectedApnIndex_ = apnSelector.selectedIndex;
+      } else {
+        apnDict = onc.getActiveValue('Cellular.APN');
+        $('cellular-apn').value = stringFromValue(apnDict['AccessPointName']);
+        $('cellular-apn-username').value = stringFromValue(apnDict['Username']);
+        $('cellular-apn-password').value = stringFromValue(apnDict['Password']);
+
+        updateHidden('.apn-list-view', true);
+        updateHidden('.apn-details-view', false);
+      }
     }
   };
 
   /**
    * Enables or Disables all buttons that provide operations on the cellular
    * network.
    */
   DetailsInternetPage.changeCellularButtonsState = function(disable) {
     var buttonsToDisableList =
         new Array('details-internet-login',
                   'details-internet-disconnect',
                   'details-internet-configure',
                   'activate-details',
-                  'buyplan-details',
                   'view-account-details');
 
     for (var i = 0; i < buttonsToDisableList.length; ++i) {
       var button = $(buttonsToDisableList[i]);
       button.disabled = disable;
     }
   };
 
   /**
    * Shows a spinner while the carrier is changed.
    */
   DetailsInternetPage.showCarrierChangeSpinner = function(visible) {
     $('switch-carrier-spinner').hidden = !visible;
     // Disable any buttons that allow us to operate on cellular networks.
     DetailsInternetPage.changeCellularButtonsState(visible);
   };
 
   /**
    * Changes the network carrier.
    */
   DetailsInternetPage.handleCarrierChanged = function() {
     var carrierSelector = $('select-carrier');
     var carrier = carrierSelector[carrierSelector.selectedIndex].textContent;
     DetailsInternetPage.showCarrierChangeSpinner(true);
-    var data = $('connection-state').data;
-    chrome.send('setCarrier', [data.servicePath, carrier]);
+    chrome.send('setCarrier', [
+      DetailsInternetPage.getInstance().servicePath_, carrier]);
   };
 
   /**
    * Performs minimal initialization of the InternetDetails dialog in
    * preparation for showing proxy-setttings.
    */
   DetailsInternetPage.initializeProxySettings = function() {
-    var detailsPage = DetailsInternetPage.getInstance();
-    detailsPage.initializePageContents_();
+    DetailsInternetPage.getInstance().initializePageContents_();
   };
 
   /**
    * Displays the InternetDetails dialog with only the proxy settings visible.
    */
   DetailsInternetPage.showProxySettings = function() {
     var detailsPage = DetailsInternetPage.getInstance();
     $('network-details-header').hidden = true;
-    $('buyplan-details').hidden = true;
     $('activate-details').hidden = true;
     $('view-account-details').hidden = true;
     $('web-proxy-auto-discovery').hidden = true;
     detailsPage.showProxy = true;
     updateHidden('#internet-tab', true);
     updateHidden('#details-tab-strip', true);
     updateHidden('#details-internet-page .action-area', true);
     detailsPage.updateControls();
     detailsPage.visible = true;
     chrome.send('coreOptionsUserMetricsAction',
@@ skipping 38 matching lines @@
           $(proxyPort).value = hostValue[1];
         }
       }
   };
 
   DetailsInternetPage.updateCarrier = function() {
     DetailsInternetPage.showCarrierChangeSpinner(false);
   };
 
   DetailsInternetPage.loginFromDetails = function() {
-    var data = $('connection-state').data;
-    var servicePath = data.servicePath;
-    chrome.send('networkCommand', [data.type, servicePath, 'connect']);
+    var detailsPage = DetailsInternetPage.getInstance();
+    chrome.send('networkCommand',
+                [detailsPage.type_, detailsPage.servicePath_, 'connect']);
     PageManager.closeOverlay();
   };
 
   DetailsInternetPage.disconnectNetwork = function() {
-    var data = $('connection-state').data;
-    var servicePath = data.servicePath;
-    chrome.send('networkCommand', [data.type, servicePath, 'disconnect']);
+    var detailsPage = DetailsInternetPage.getInstance();
+    chrome.send('networkCommand',
+                [detailsPage.type_, detailsPage.servicePath_, 'disconnect']);
     PageManager.closeOverlay();
   };
 
   DetailsInternetPage.configureNetwork = function() {
-    var data = $('connection-state').data;
-    var servicePath = data.servicePath;
-    chrome.send('networkCommand', [data.type, servicePath, 'configure']);
+    var detailsPage = DetailsInternetPage.getInstance();
+    chrome.send('networkCommand',
+                [detailsPage.type_, detailsPage.servicePath_, 'configure']);
     PageManager.closeOverlay();
   };
 
   DetailsInternetPage.activateFromDetails = function() {
-    var data = $('connection-state').data;
-    var servicePath = data.servicePath;
-    if (data.type == 'Cellular')
-      chrome.send('networkCommand', [data.type, servicePath, 'activate']);
+    var detailsPage = DetailsInternetPage.getInstance();
+    if (detailsPage.type_ == 'Cellular') {
+      chrome.send('networkCommand',
+                  [detailsPage.type_, detailsPage.servicePath_, 'activate']);
+    }
     PageManager.closeOverlay();
   };
 
   DetailsInternetPage.setDetails = function() {
-    var data = $('connection-state').data;
-    var servicePath = data.servicePath;
-    if (data.type == 'WiFi') {
+    var detailsPage = DetailsInternetPage.getInstance();
+    var type = detailsPage.type_;
+    var servicePath = detailsPage.servicePath_;
+    if (type == 'WiFi') {
       sendCheckedIfEnabled(servicePath, 'setPreferNetwork',
                            $('prefer-network-wifi'));
       sendCheckedIfEnabled(servicePath, 'setAutoConnect',
                            $('auto-connect-network-wifi'));
-    } else if (data.type == 'Wimax') {
+    } else if (type == 'Wimax') {
       sendCheckedIfEnabled(servicePath, 'setAutoConnect',
                            $('auto-connect-network-wimax'));
-    } else if (data.type == 'Cellular') {
+    } else if (type == 'Cellular') {
       sendCheckedIfEnabled(servicePath, 'setAutoConnect',
                            $('auto-connect-network-cellular'));
-    } else if (data.type == 'VPN') {
+    } else if (type == 'VPN') {
       chrome.send('setServerHostname',
                   [servicePath,
                    $('inet-server-hostname').value]);
       sendCheckedIfEnabled(servicePath, 'setAutoConnect',
                            $('auto-connect-network-vpn'));
     }
 
     var nameServerTypes = ['automatic', 'google', 'user'];
     var nameServerType = 'automatic';
     for (var i = 0; i < nameServerTypes.length; ++i) {
@@ skipping 50 matching lines @@
         userDns.removeAttribute('selected');
         break;
       case 'user':
         automaticDns.removeAttribute('selected');
         googleDns.removeAttribute('selected');
         userDns.setAttribute('selected', '');
         break;
     }
   };
 
-  DetailsInternetPage.updateConnectionButtonVisibilty = function(onc) {
-    if (onc.type == 'Ethernet') {
-      // Ethernet can never be connected or disconnected and can always be
-      // configured (e.g. to set security).
-      $('details-internet-login').hidden = true;
-      $('details-internet-disconnect').hidden = true;
-      $('details-internet-configure').hidden = false;
-      return;
-    }
-
-    var connectState = onc.getActiveValue('ConnectionState');
-    if (connectState == 'NotConnected') {
-      $('details-internet-login').hidden = false;
-      // Connecting to an unconfigured network might trigger certificate
-      // installation UI. Until that gets handled here, always enable the
-      // Connect button.
-      $('details-internet-login').disabled = false;
-      $('details-internet-disconnect').hidden = true;
-    } else {
-      $('details-internet-login').hidden = true;
-      $('details-internet-disconnect').hidden = false;
-    }
-
-    var connectable = onc.getActiveValue('Connectable');
-    if (connectState != 'Connected' &&
-        (!connectable || this.hasSecurity ||
-        (onc.type == 'Wimax' || onc.type == 'VPN'))) {
-      $('details-internet-configure').hidden = false;
-    } else {
-      $('details-internet-configure').hidden = true;
-    }
-  };
-
-  DetailsInternetPage.populateHeader = function(detailsPage, onc) {
-    $('network-details-title').textContent = onc.getTranslatedValue('Name');
-    var connectionState = onc.getActiveValue('ConnectionState');
-    var connectionStateString = onc.getTranslatedValue('ConnectionState');
-    detailsPage.connected = connectionState == 'Connected';
-    $('network-details-subtitle-status').textContent = connectionStateString;
-    var typeKey;
-    if (onc.type == 'Ethernet')
-      typeKey = 'ethernetTitle';
-    else if (onc.type == 'WiFi')
-      typeKey = 'wifiTitle';
-    else if (onc.type == 'Wimax')
-      typeKey = 'wimaxTitle';
-    else if (onc.type == 'Cellular')
-      typeKey = 'cellularTitle';
-    else if (onc.type == 'VPN')
-      typeKey = 'vpnTitle';
-    else
-      typeKey = null;
-    var typeLabel = $('network-details-subtitle-type');
-    var typeSeparator = $('network-details-subtitle-separator');
-    if (typeKey) {
-      typeLabel.textContent = loadTimeData.getString(typeKey);
-      typeLabel.hidden = false;
-      typeSeparator.hidden = false;
-    } else {
-      typeLabel.hidden = true;
-      typeSeparator.hidden = true;
-    }
-  };
-
   DetailsInternetPage.updateConnectionData = function(update) {
     var detailsPage = DetailsInternetPage.getInstance();
     if (!detailsPage.visible)
       return;
 
-    var data = $('connection-state').data;
-    if (!data)
-      return;
-
-    if (update.servicePath != data.servicePath)
+    if (update.servicePath != detailsPage.servicePath_)
       return;
 
     // Update our cached data object.
-    updateDataObject(data, update);
-    var onc = new OncData(data);
+    var onc = detailsPage.onc_;
+    onc.updateData(update);
 
-    this.populateHeader(detailsPage, onc);
+    detailsPage.populateHeader_();
 
     var connectionState = onc.getActiveValue('ConnectionState');
     var connectionStateString = onc.getTranslatedValue('ConnectionState');
-    detailsPage.deviceConnected = data.deviceConnected;
+    if ('deviceConnected' in update)
+      detailsPage.deviceConnected = update.deviceConnected;
     detailsPage.connected = connectionState == 'Connected';
     $('connection-state').textContent = connectionStateString;
 
-    this.updateConnectionButtonVisibilty(onc);
+    detailsPage.updateConnectionButtonVisibilty_();
 
-    if (onc.type == 'WiFi') {
+    var type = detailsPage.type_;
+    if (type == 'WiFi') {
       $('wifi-connection-state').textContent = connectionStateString;
-    } else if (onc.type == 'Wimax') {
+    } else if (type == 'Wimax') {
       $('wimax-connection-state').textContent = connectionStateString;
-    } else if (onc.type == 'Cellular') {
+    } else if (type == 'Cellular') {
       $('activation-state').textContent =
           onc.getTranslatedValue('Cellular.ActivationState');
-      $('buyplan-details').hidden = !data.showBuyButton;
-      $('view-account-details').hidden = !data.showViewAccountButton;
-
-      $('activate-details').hidden = !data.showActivateButton;
-      if (data.showActivateButton)
-        $('details-internet-login').hidden = true;
+      // These properties are only defined if they are true.
+      $('view-account-details').hidden = !update.showViewAccountButton;
+      $('activate-details').hidden = !update.showActivateButton;
+      $('details-internet-login').hidden = update.showActivateButton;
 
       if (detailsPage.gsm) {
         var lockEnabled =
             onc.getActiveValue('Cellular.SIMLockStatus.LockEnabled');
         $('sim-card-lock-enabled').checked = lockEnabled;
         $('change-pin').hidden = !lockEnabled;
       }
     }
-
-    $('connection-state').data = data;
-    $('connection-state').onc = onc;
   };
 
   DetailsInternetPage.showDetailedInfo = function(data) {
+    var onc = new OncData(data);
+
     var detailsPage = DetailsInternetPage.getInstance();
+    detailsPage.onc_ = onc;
+    var type = onc.getActiveValue('Type');
+    detailsPage.type_ = type;
+    detailsPage.servicePath_ = data.servicePath;
 
-    var onc = new OncData(data);
-    data.type = onc.type;
+    detailsPage.populateHeader_();
 
-    this.populateHeader(detailsPage, onc);
-
-    // TODO(stevenjb): Find a more appropriate place to cache data.
-    $('connection-state').data = data;
-    $('connection-state').onc = onc;
-
-    $('buyplan-details').hidden = true;
     $('activate-details').hidden = true;
     $('view-account-details').hidden = true;
 
-    this.updateConnectionButtonVisibilty(onc);
+    detailsPage.updateConnectionButtonVisibilty_();
 
     $('web-proxy-auto-discovery').hidden = true;
 
     detailsPage.deviceConnected = data.deviceConnected;
     detailsPage.connected =
         onc.getActiveValue('ConnectionState') == 'Connected';
 
     // Only show proxy for remembered networks.
     if (data.remembered) {
       detailsPage.showProxy = true;
-      chrome.send('selectNetwork', [data.servicePath]);
+      chrome.send('selectNetwork', [detailsPage.servicePath_]);
     } else {
       detailsPage.showProxy = false;
     }
 
     var connectionStateString = onc.getTranslatedValue('ConnectionState');
     $('connection-state').textContent = connectionStateString;
     var restricted = onc.getActiveValue('RestrictedConnectivity');
     var restrictedString = loadTimeData.getString(
         restricted ? 'restrictedYes' : 'restrictedNo');
 
     var inetAddress = {};
     var inetNetmask = {};
     var inetGateway = {};
 
     var inetNameServersString;
 
-    if ('IPConfigs' in data) {
-      var ipconfigList = onc.getActiveValue('IPConfigs');
+    var ipconfigList = onc.getActiveValue('IPConfigs');
+    if (Array.isArray(ipconfigList)) {
       for (var i = 0; i < ipconfigList.length; ++i) {
         var ipconfig = ipconfigList[i];
-        var type = ipconfig['Type'];
-        if (type != 'IPv4') {
+        var ipType = ipconfig['Type'];
+        if (ipType != 'IPv4') {
           // TODO(stevenjb): Handle IPv6 properties.
           continue;
         }
         var address = ipconfig['IPAddress'];
         inetAddress.automatic = address;
         inetAddress.value = address;
         var netmask = PrefixLengthToNetmask(ipconfig['RoutingPrefix']);
         inetNetmask.automatic = netmask;
         inetNetmask.value = netmask;
         var gateway = ipconfig['Gateway'];
         inetGateway.automatic = gateway;
         inetGateway.value = gateway;
         if ('WebProxyAutoDiscoveryUrl' in ipconfig) {
           $('web-proxy-auto-discovery').hidden = false;
           $('web-proxy-auto-discovery-url').value =
               ipconfig['WebProxyAutoDiscoveryUrl'];
         }
         if ('NameServers' in ipconfig) {
           var inetNameServers = ipconfig['NameServers'];
           inetNameServers = inetNameServers.sort();
           inetNameServersString = inetNameServers.join(',');
         }
         break;  // Use the first IPv4 entry.
       }
     }
 
     // Override the "automatic" values with the real saved DHCP values,
     // if they are set.
     var savedNameServersString;
-    if ('SavedIPConfig' in data) {
-      var savedIpAddress = onc.getActiveValue('SavedIPConfig.IPAddress');
-      if (savedIpAddress != undefined) {
-        inetAddress.automatic = savedIpAddress;
-        inetAddress.value = savedIpAddress;
-      }
-      var savedPrefix = onc.getActiveValue('SavedIPConfig.RoutingPrefix');
-      if (savedPrefix != undefined) {
-        var savedNetmask = PrefixLengthToNetmask(savedPrefix);
-        inetNetmask.automatic = savedNetmask;
-        inetNetmask.value = savedNetmask;
-      }
-      var savedGateway = onc.getActiveValue('SavedIPConfig.Gateway');
-      if (savedGateway != undefined) {
-        inetGateway.automatic = savedGateway;
-        inetGateway.value = savedGateway;
-      }
-      var savedNameServers = onc.getActiveValue('SavedIPConfig.NameServers');
-      if (savedNameServers) {
-        savedNameServers = savedNameServers.sort();
-        savedNameServersString = savedNameServers.join(',');
-      }
+    var savedIpAddress = onc.getActiveValue('SavedIPConfig.IPAddress');
+    if (savedIpAddress != undefined) {
+      inetAddress.automatic = savedIpAddress;
+      inetAddress.value = savedIpAddress;
+    }
+    var savedPrefix = onc.getActiveValue('SavedIPConfig.RoutingPrefix');
+    if (savedPrefix != undefined) {
+      var savedNetmask = PrefixLengthToNetmask(savedPrefix);
+      inetNetmask.automatic = savedNetmask;
+      inetNetmask.value = savedNetmask;
+    }
+    var savedGateway = onc.getActiveValue('SavedIPConfig.Gateway');
+    if (savedGateway != undefined) {
+      inetGateway.automatic = savedGateway;
+      inetGateway.value = savedGateway;
+    }
+    var savedNameServers = onc.getActiveValue('SavedIPConfig.NameServers');
+    if (savedNameServers) {
+      savedNameServers = savedNameServers.sort();
+      savedNameServersString = savedNameServers.join(',');
     }
 
     var ipAutoConfig = 'automatic';
 
     var staticNameServersString;
-    if ('StaticIPConfig' in data) {
-      var staticIpAddress = onc.getActiveValue('StaticIPConfig.IPAddress');
-      if (staticIpAddress != undefined) {
-        ipAutoConfig = 'user';
-        inetAddress.user = staticIpAddress;
-        inetAddress.value = staticIpAddress;
-      }
-      var staticPrefix = onc.getActiveValue('StaticIPConfig.RoutingPrefix');
-      if (staticPrefix != undefined) {
-        var staticNetmask = PrefixLengthToNetmask(staticPrefix);
-        inetNetmask.user = staticNetmask;
-        inetNetmask.value = staticNetmask;
-      }
-      var staticGateway = onc.getActiveValue('StaticIPConfig.Gateway');
-      if (staticGateway != undefined) {
-        inetGateway.user = staticGateway;
-        inetGateway.value = staticGateway;
-      }
-      var staticNameServers = onc.getActiveValue('StaticIPConfig.NameServers');
-      if (staticNameServers) {
-        staticNameServers = staticNameServers.sort();
-        staticNameServersString = staticNameServers.join(',');
-      }
+    var staticIpAddress = onc.getActiveValue('StaticIPConfig.IPAddress');
+    if (staticIpAddress != undefined) {
+      ipAutoConfig = 'user';
+      inetAddress.user = staticIpAddress;
+      inetAddress.value = staticIpAddress;
+    }
+    var staticPrefix = onc.getActiveValue('StaticIPConfig.RoutingPrefix');
+    if (staticPrefix != undefined) {
+      var staticNetmask = PrefixLengthToNetmask(staticPrefix);
+      inetNetmask.user = staticNetmask;
+      inetNetmask.value = staticNetmask;
+    }
+    var staticGateway = onc.getActiveValue('StaticIPConfig.Gateway');
+    if (staticGateway != undefined) {
+      inetGateway.user = staticGateway;
+      inetGateway.value = staticGateway;
+    }
+    var staticNameServers = onc.getActiveValue('StaticIPConfig.NameServers');
+    if (staticNameServers) {
+      staticNameServers = staticNameServers.sort();
+      staticNameServersString = staticNameServers.join(',');
     }
 
     $('ip-automatic-configuration-checkbox').checked =
         ipAutoConfig == 'automatic';
 
     inetAddress.autoConfig = ipAutoConfig;
     inetNetmask.autoConfig = ipAutoConfig;
     inetGateway.autoConfig = ipAutoConfig;
 
     var configureAddressField = function(field, model) {
@@ skipping 48 matching lines @@
         $(field).parentElement.hidden = false;
       } else {
         $(field).parentElement.hidden = true;
       }
     };
 
     var networkName = onc.getTranslatedValue('Name');
 
     // Signal strength as percentage (for WiFi and Wimax).
     var signalStrength;
-    if (onc.type == 'WiFi' || onc.type == 'Wimax') {
-      signalStrength = onc.getActiveValue(onc.type + '.SignalStrength');
-    }
+    if (type == 'WiFi' || type == 'Wimax')
+      signalStrength = onc.getActiveValue(type + '.SignalStrength');
     if (!signalStrength)
       signalStrength = 0;
     var strengthFormat = loadTimeData.getString('inetSignalStrengthFormat');
     var strengthString = strengthFormat.replace('$1', signalStrength);
 
-    detailsPage.type = onc.type;
-    if (onc.type == 'WiFi') {
+    if (type == 'WiFi') {
       OptionsPage.showTab($('wifi-network-nav-tab'));
       detailsPage.gsm = false;
       detailsPage.shared = data.shared;
       $('wifi-connection-state').textContent = connectionStateString;
       $('wifi-restricted-connectivity').textContent = restrictedString;
       var ssid = onc.getActiveValue('WiFi.SSID');
       $('wifi-ssid').textContent = ssid ? ssid : networkName;
       setOrHideParent('wifi-bssid', onc.getActiveValue('WiFi.BSSID'));
       var security = onc.getActiveValue('WiFi.Security');
       if (security == 'None')
@@ skipping 10 matching lines @@
       setOrHideParent('wifi-hardware-address',
                       onc.getActiveValue('MacAddress'));
       detailsPage.showPreferred = data.remembered;
       var priority = onc.getActiveValue('Priority');
       $('prefer-network-wifi').checked = priority > 0;
       $('prefer-network-wifi').disabled = !data.remembered;
       $('auto-connect-network-wifi').checked =
           onc.getActiveValue('AutoConnect');
       $('auto-connect-network-wifi').disabled = !data.remembered;
       detailsPage.hasSecurity = security != undefined;
-    } else if (onc.type == 'Wimax') {
+    } else if (type == 'Wimax') {
       OptionsPage.showTab($('wimax-network-nav-tab'));
       detailsPage.gsm = false;
       detailsPage.shared = data.shared;
       detailsPage.showPreferred = data.remembered;
       $('wimax-connection-state').textContent = connectionStateString;
       $('wimax-restricted-connectivity').textContent = restrictedString;
       $('auto-connect-network-wimax').checked =
           onc.getActiveValue('AutoConnect');
       $('auto-connect-network-wimax').disabled = !data.remembered;
       var identity = onc.getActiveValue('Wimax.EAP.Identity');
       setOrHideParent('wimax-eap-identity', identity);
       $('wimax-signal-strength').textContent = strengthString;
-    } else if (onc.type == 'Cellular') {
+    } else if (type == 'Cellular') {
       OptionsPage.showTab($('cellular-conn-nav-tab'));
       if (data.showCarrierSelect && data.currentCarrierIndex != -1) {
         var carrierSelector = $('select-carrier');
         carrierSelector.onchange = DetailsInternetPage.handleCarrierChanged;
         carrierSelector.options.length = 0;
         for (var i = 0; i < data.carriers.length; ++i) {
           var option = document.createElement('option');
           option.textContent = data.carriers[i];
           carrierSelector.add(option);
         }
@@ skipping 42 matching lines @@
       setOrHideParent('imei', onc.getActiveValue('Cellular.IMEI'));
       setOrHideParent('meid', onc.getActiveValue('Cellular.MEID'));
       setOrHideParent('min', onc.getActiveValue('Cellular.MIN'));
       setOrHideParent('prl-version', onc.getActiveValue('Cellular.PRLVersion'));
 
       var family = onc.getActiveValue('Cellular.Family');
       detailsPage.gsm = family == 'GSM';
       if (detailsPage.gsm) {
         $('iccid').textContent = onc.getActiveValue('Cellular.ICCID');
         $('imsi').textContent = onc.getActiveValue('Cellular.IMSI');
-
-        var apnSelector = $('select-apn');
-        // Clear APN lists, keep only last element that "other".
-        while (apnSelector.length != 1)
-          apnSelector.remove(0);
-        var otherOption = apnSelector[0];
-        data.selectedApn = -1;
-        data.userApnIndex = -1;
-        var activeApn = onc.getActiveValue('Cellular.APN.AccessPointName');
-        var activeUsername = onc.getActiveValue('Cellular.APN.Username');
-        var activePassword = onc.getActiveValue('Cellular.APN.Password');
-        var lastGoodApn =
-            onc.getActiveValue('Cellular.LastGoodAPN.AccessPointName');
-        var lastGoodUsername =
-            onc.getActiveValue('Cellular.LastGoodAPN.Username');
-        var lastGoodPassword =
-            onc.getActiveValue('Cellular.LastGoodAPN.Password');
-        var apnList = onc.getActiveValue('Cellular.APNList');
-        for (var i = 0; i < apnList.length; i++) {
-          var apnDict = apnList[i];
-          var option = document.createElement('option');
-          var localizedName = apnDict['LocalizedName'];
-          var name = localizedName ? localizedName : apnDict['Name'];
-          var accessPointName = apnDict['AccessPointName'];
-          option.textContent =
-              name ? (name + ' (' + accessPointName + ')') : accessPointName;
-          option.value = i;
-          // If this matches the active Apn, or LastGoodApn, set it as the
-          // selected Apn.
-          if ((activeApn == accessPointName &&
-               activeUsername == apnDict['Username'] &&
-               activePassword == apnDict['Password']) ||
-              (!activeApn &&
-               lastGoodApn == accessPointName &&
-               lastGoodUsername == apnDict['Username'] &&
-               lastGoodPassword == apnDict['Password'])) {
-            data.selectedApn = i;
-          }
-          // Insert new option before "other" option.
-          apnSelector.add(option, otherOption);
-        }
-        if (data.selectedApn == -1 && activeApn) {
-          var option = document.createElement('option');
-          option.textContent = activeApn;
-          option.value = -1;
-          apnSelector.add(option, otherOption);
-          data.selectedApn = apnSelector.length - 2;
-          data.userApnIndex = data.selectedApn;
-        }
-        apnSelector.selectedIndex = data.selectedApn;
-        updateHidden('.apn-list-view', false);
-        updateHidden('.apn-details-view', true);
+        detailsPage.initializeApnList_(onc);
         var lockEnabled =
             onc.getActiveValue('Cellular.SIMLockStatus.LockEnabled');
         $('sim-card-lock-enabled').checked = lockEnabled;
         $('change-pin').hidden = !lockEnabled;
       }
       $('auto-connect-network-cellular').checked =
           onc.getActiveValue('AutoConnect');
       $('auto-connect-network-cellular').disabled = false;
 
-      $('buyplan-details').hidden = !data.showBuyButton;
       $('view-account-details').hidden = !data.showViewAccountButton;
       $('activate-details').hidden = !data.showActivateButton;
-      if (data.showActivateButton) {
-        $('details-internet-login').hidden = true;
-      }
-    } else if (onc.type == 'VPN') {
+      $('details-internet-login').hidden = data.showActivateButton;
+    } else if (type == 'VPN') {
       OptionsPage.showTab($('vpn-nav-tab'));
       detailsPage.gsm = false;
       $('inet-service-name').textContent = networkName;
       $('inet-provider-type').textContent =
           onc.getTranslatedValue('VPN.Type');
       var providerType = onc.getActiveValue('VPN.Type');
       var providerKey = 'VPN.' + providerType;
       $('inet-username').textContent =
           onc.getActiveValue(providerKey + '.Username');
       var inetServerHostname = $('inet-server-hostname');
@@ skipping 44 matching lines @@
 
     // Don't show page name in address bar and in history to prevent people
     // navigate here by hand and solve issue with page session restore.
     PageManager.showPageByName('detailsInternetPage', false);
   };
 
   return {
     DetailsInternetPage: DetailsInternetPage
   };
 });