This updates the StaticIP configuration UI to match new mocks.

chrome/browser/resources/options2/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.
 
 cr.define('options.internet', function() {
   var OptionsPage = options.OptionsPage;
   /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
+  /** @const */ var IPAddressField = options.internet.IPAddressField;
 
   /**
    * Network settings constants. These enums must match their C++
    * counterparts.
    */
   function Constants() {}
 
   // Network types:
   Constants.TYPE_UNKNOWN = 0;
   Constants.TYPE_ETHERNET = 1;
@@ skipping 227 matching lines @@
       // Proxy
       options.proxyexceptions.ProxyExceptions.decorate($('ignored-host-list'));
       $('remove-host').addEventListener('click',
                                         this.handleRemoveProxyExceptions_);
       $('add-host').addEventListener('click', this.handleAddProxyException_);
       $('direct-proxy').addEventListener('click', this.disableManualProxy_);
       $('manual-proxy').addEventListener('click', this.enableManualProxy_);
       $('auto-proxy').addEventListener('click', this.disableManualProxy_);
       $('proxy-all-protocols').addEventListener('click',
                                                 this.toggleSingleProxy_);
+
       observePrefsUI($('direct-proxy'));
       observePrefsUI($('manual-proxy'));
       observePrefsUI($('auto-proxy'));
       observePrefsUI($('proxy-all-protocols'));
+
+      $('ip-automatic-configuration-checkbox').addEventListener('click',
+        this.handleIpAutoConfig_);
+      $('automatic-dns-radio').addEventListener('click',
+        this.handleNameServerTypeChange_);
+      $('google-dns-radio').addEventListener('click',
+        this.handleNameServerTypeChange_);
+      $('user-dns-radio').addEventListener('click',
+        this.handleNameServerTypeChange_);
     },
 
     /**
      * Handler for "add" event fired from userNameEdit.
      * @param {Event} e Add event fired from userNameEdit.
      * @private
      */
     handleAddProxyException_: function(e) {
       var exception = $('new-host').value;
       $('new-host').value = '';
 
       exception = exception.trim();
       if (exception)
         $('ignored-host-list').addException(exception);
     },
 
     /**
      * Handler for when the remove button is clicked
      * @param {Event} e The click event.
      * @private
      */
     handleRemoveProxyExceptions_: function(e) {
       var selectedItems = $('ignored-host-list').selectedItems;
       for (var x = 0; x < selectedItems.length; x++) {
         $('ignored-host-list').removeException(selectedItems[x]);
       }
     },
 
     /**
+     * Handler for when the IP automatic configuration checkbox is clicked.
+     * @param {Event} e The click event.
+     * @private
+     */
+    handleIpAutoConfig_: function(e) {
+      var checked = $('ip-automatic-configuration-checkbox').checked;
+      var fields = [$('ip-address'),
+                    $('ip-netmask'),
+                    $('ip-gateway')];

[Dan Beam, 2012/08/11 01:38:02]

nit: you can probably fit all these $('id')s on the same line

[Greg Spencer (Chromium), 2012/08/13 19:20:04]

Done.

+      for (var i = 0; i < fields.length; ++i) {
+        fields[i].editable = !checked;
+        if (checked) {
+          var model = fields[i].model;
+          model.value = model.automatic;
+          fields[i].model = model;
+        }
+      }
+      if (!checked)
+        $('ip-address').focus();
+    },
+
+    /**
+     * Handler for when the name server selection changes.
+     * @param {Event} e The click event.
+     * @private
+     */
+    handleNameServerTypeChange_: function(event) {
+      var type = event.target.value;
+      DetailsInternetPage.updateNameServerDisplay(type);
+    },
+
+    /**
      * Update details page controls.
      * @private
      */
     updateControls: function() {
       // Only show ipconfig section if network is connected OR if nothing on
       // 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.cellular);
       updateHidden('#details-internet-page .wifi-details', !this.wireless);
       updateHidden('#details-internet-page .wimax-details', !this.wimax);
       updateHidden('#details-internet-page .vpn-details', !this.vpn);
       updateHidden('#details-internet-page .proxy-details', !this.showProxy);
       /* Network information merged into the Wifi tab for wireless networks
          unless the option is set for enabling a static IP configuration. */
       updateHidden('#details-internet-page .network-details',
@@ skipping 227 matching lines @@
     } else if (data.type == Constants.TYPE_WIMAX) {
       chrome.send('setAutoConnect',
           [String(servicePath),
           $('auto-connect-network-wimax').checked ? 'true' : 'false']);
     } else if (data.type == Constants.TYPE_CELLULAR) {
       chrome.send('setAutoConnect',
                   [String(servicePath),
                    $('auto-connect-network-cellular').checked ? 'true' :
                        'false']);
     }
-    var ipConfigList = $('ip-config-list');
-    chrome.send('setIPConfig', [String(servicePath),
-                                $('ip-type-dhcp').checked ? 'true' : 'false',
-                                ipConfigList.dataModel.item(0).value,
-                                ipConfigList.dataModel.item(1).value,
-                                ipConfigList.dataModel.item(2).value,
-                                ipConfigList.dataModel.item(3).value]);
+    var ipFromDHCP = $('ip-automatic-configuration-checkbox').checked;

[Dan Beam, 2012/08/11 01:38:02]

nit: ipFromDhcp (is probably the preferred capitalization, this prevents things
like CSSHTTPURL from being hard to read, :D)

[Greg Spencer (Chromium), 2012/08/13 19:20:04]

Yeah, I actually prefer the CamelCase capitalization, for that reason, but
wasn't sure what the convention was here (we waffle on that quite a bit on the
C++ side).  Done.

+
+    var nameServerTypes = ['automatic', 'google', 'user'];
+    var nameServerType = 'automatic';
+    for (var i = 0; i < nameServerTypes.length; ++i) {
+      if ($(nameServerTypes[i] + '-dns-radio').checked) {
+        nameServerType = nameServerTypes[i];
+        break;
+      }
+    }
+
+    var userNameServers = [$('ipconfig-dns1').model.value,
+                           $('ipconfig-dns2').model.value,
+                           $('ipconfig-dns3').model.value,
+                           $('ipconfig-dns4').model.value];
+    // Clean out any empty values.

[Dan Beam, 2012/08/11 01:38:02]

nit: this is fine, but it may be less error prone in the future to start with an
empty [] and simply check each value is valid before inserting rather than
writing code that deletes from an iterator (essentially) :)

[Greg Spencer (Chromium), 2012/08/13 19:20:04]

Hmm. Good point. I've rearranged it that way.

+    for (var i = 0; i < userNameServers.length; ++i) {
+      if (!userNameServers[i]) {
+        userNameServers.splice(i, 1);
+        --i;
+      }
+    }
+    userNameServers = userNameServers.join(',');
+    var ipAddress =
+      $('ip-address').model.value ? $('ip-address').model.value : '';

[Dan Beam, 2012/08/11 01:38:02]

how I'd write this:

  chrome.send('setIPConfig', [servicePath,
                              !!ipFromDhcp,
                              $('ip-address') || '',
                              $('ip-netmask').model.value || '',
                              $('ip-gateway').model.value || '',
                              nameServerType,
                              userNameServers]);

also, why are you sending 'true'/'false' rather than just a boolean? 
additionally, why cast String(servicePath)? it seems it'd already be this, no?

[Greg Spencer (Chromium), 2012/08/13 19:20:04]

Both good points.  I was just inheriting how it was written before, but I've now
updated the C++ side to expect a boolean, and removed the String().

I don't like the "!!" notation: it's easy to miss, or to interpret as a typo, so
I chose to use ipFromDhcp || false.

[Dan Beam, 2012/08/13 19:48:55]

OK, that's fine.  You can also say Boolean(someTruthyOrFalseyValue), btw, and it
casts to a Boolean() the same way !! does.

[Greg Spencer (Chromium), 2012/08/13 22:17:44]

Ooh, I like that better.

+    var ipNetmask =
+      $('ip-netmask').model.value ? $('ip-netmask').model.value : '';
+    var ipGateway =
+      $('ip-gateway').model.value ? $('ip-gateway').model.value : '';
+    chrome.send('setIPConfig',
+      [String(servicePath),
+       ipFromDHCP ? 'true' : 'false',
+       ipAddress,
+       ipNetmask,
+       ipGateway,
+       nameServerType,
+       userNameServers]);
     OptionsPage.closeOverlay();
   };
 
+  DetailsInternetPage.updateNameServerDisplay = function(type) {
+    var editable = (type == 'user');

[Dan Beam, 2012/08/11 01:38:02]

nit: you don't really need these (), and the style guide says don't use
unnecessary (), so you probably want to remove

[Greg Spencer (Chromium), 2012/08/13 19:20:04]

Done.

+    var fields = [$('ipconfig-dns1'), $('ipconfig-dns2'),
+                  $('ipconfig-dns3'), $('ipconfig-dns4')];
+    for (var i = 0; i < fields.length; ++i) {
+      fields[i].editable = editable;
+    }
+    if (editable)
+      $('ipconfig-dns1').focus();
+
+    var automaticDns = $('automatic-dns-display');
+    var googleDns = $('google-dns-display');
+    var userDns = $('user-dns-settings');
+    if (type == 'automatic') {
+      automaticDns.setAttribute('selected', '');
+      googleDns.removeAttribute('selected');
+      userDns.removeAttribute('selected');
+    }
+    if (type == 'google') {
+      automaticDns.removeAttribute('selected');
+      googleDns.setAttribute('selected', '');
+      userDns.removeAttribute('selected');
+    }
+    if (type == 'user') {
+      automaticDns.removeAttribute('selected');
+      googleDns.removeAttribute('selected');
+      userDns.setAttribute('selected', '');
+    }
+  };
+
   DetailsInternetPage.showDetailedInfo = function(data) {
     var detailsPage = DetailsInternetPage.getInstance();
 
     // Populate header
     $('network-details-title').textContent = data.networkName;
     var statusKey = data.connected ? 'networkConnected' :
                                      'networkNotConnected';
     $('network-details-subtitle-status').textContent =
         loadTimeData.getString(statusKey);
     var typeKey = null;
@@ skipping 38 matching lines @@
     else
       $('details-internet-disconnect').hidden = !data.connected;
 
     detailsPage.deviceConnected = data.deviceConnected;
     detailsPage.connecting = data.connecting;
     detailsPage.connected = data.connected;
     detailsPage.showProxy = data.showProxy;
     detailsPage.showStaticIPConfig = data.showStaticIPConfig;
     $('connection-state').textContent = data.connectionState;
 
-    var inetAddress = '';
-    var inetSubnetAddress = '';
-    var inetGateway = '';
-    var inetDns = '';
-    $('ip-type-dhcp').checked = true;
-    if (data.ipconfigStatic.value) {
-      inetAddress = data.ipconfigStatic.value.address;
-      inetSubnetAddress = data.ipconfigStatic.value.subnetAddress;
-      inetGateway = data.ipconfigStatic.value.gateway;
-      inetDns = data.ipconfigStatic.value.dns;
-      $('ip-type-static').checked = true;
-    } else if (data.ipconfigDHCP.value) {
-      inetAddress = data.ipconfigDHCP.value.address;
-      inetSubnetAddress = data.ipconfigDHCP.value.subnetAddress;
-      inetGateway = data.ipconfigDHCP.value.gateway;
-      inetDns = data.ipconfigDHCP.value.dns;
+    var ipAutoConfig = data.ipAutoConfig ? 'automatic' : 'user';
+    $('ip-automatic-configuration-checkbox').checked = data.ipAutoConfig;
+    var inetAddress = {
+      autoConfig: ipAutoConfig,
+    };
+    var inetNetmask = {
+      autoConfig: ipAutoConfig,
+    };
+    var inetGateway = {
+      autoConfig: ipAutoConfig,
+    };

[Dan Beam, 2012/08/11 01:38:02]

nit: could probably fit these all on the same line if you want

[Greg Spencer (Chromium), 2012/08/13 19:20:04]

Done.

+
+    if (data.ipconfig.value) {
+      inetAddress.automatic = data.ipconfig.value.address;
+      inetAddress.value = data.ipconfig.value.address;
+      inetNetmask.automatic = data.ipconfig.value.netmask;
+      inetNetmask.value = data.ipconfig.value.netmask;
+      inetGateway.automatic = data.ipconfig.value.gateway;
+      inetGateway.value = data.ipconfig.value.gateway;
     }
 
-    // Hide the dhcp/static radio if needed.
-    $('ip-type-dhcp-div').hidden = !data.showStaticIPConfig;
-    $('ip-type-static-div').hidden = !data.showStaticIPConfig;
+    // Override the "automatic" values with the real saved DHCP values,
+    // if they are set.
+    if (data.savedIP.address) {
+      inetAddress.automatic = data.savedIP.address;
+      inetAddress.value = data.savedIP.address;
+    }
+    if (data.savedIP.netmask) {
+      inetNetmask.automatic = data.savedIP.netmask;
+      inetNetmask.value = data.savedIP.netmask;
+    }
+    if (data.savedIP.gateway) {
+      inetGateway.automatic = data.savedIP.gateway;
+      inetGateway.value = data.savedIP.gateway;
+    }
 
-    var ipConfigList = $('ip-config-list');
-    options.internet.IPConfigList.decorate(ipConfigList);
-    ipConfigList.disabled =
-        $('ip-type-dhcp').checked || data.ipconfigStatic.controlledBy ||
-        !data.showStaticIPConfig;
-    ipConfigList.autoExpands = true;
-    var model = new ArrayDataModel([]);
-    model.push({
-      property: 'inetAddress',
-      name: loadTimeData.getString('inetAddress'),
-      value: inetAddress,
-    });
-    model.push({
-      property: 'inetSubnetAddress',
-      name: loadTimeData.getString('inetSubnetAddress'),
-      value: inetSubnetAddress,
-    });
-    model.push({
-      property: 'inetGateway',
-      name: loadTimeData.getString('inetGateway'),
-      value: inetGateway,
-    });
-    model.push({
-      property: 'inetDns',
-      name: loadTimeData.getString('inetDns'),
-      value: inetDns,
-    });
-    ipConfigList.dataModel = model;
+    if (ipAutoConfig == 'user') {
+      if (data.staticIP.value.address) {
+        inetAddress.value = data.staticIP.value.address;
+        inetAddress.user = data.staticIP.value.address;
+      }
+      if (data.staticIP.value.netmask) {
+        inetNetmask.value = data.staticIP.value.netmask;
+        inetNetmask.user = data.staticIP.value.netmask;
+      }
+      if (data.staticIP.value.gateway) {
+        inetGateway.value = data.staticIP.value.gateway;
+        inetGateway.user = data.staticIP.value.gateway;
+      }
+    }
 
-    $('ip-type-dhcp').addEventListener('click', function(event) {
-      // Disable ipConfigList and switch back to dhcp values (if any).
-      if (data.ipconfigDHCP.value) {
-        var config = data.ipconfigDHCP.value;
-        ipConfigList.dataModel.item(0).value = config.address;
-        ipConfigList.dataModel.item(1).value = config.subnetAddress;
-        ipConfigList.dataModel.item(2).value = config.gateway;
-        ipConfigList.dataModel.item(3).value = config.dns;
-      }
-      ipConfigList.dataModel.updateIndex(0);
-      ipConfigList.dataModel.updateIndex(1);
-      ipConfigList.dataModel.updateIndex(2);
-      ipConfigList.dataModel.updateIndex(3);
-      // Unselect all so we don't keep the currently selected field editable.
-      ipConfigList.selectionModel.unselectAll();
-      ipConfigList.disabled = true;
-    });
+    var configureAddressField = function(field, model) {
+      IPAddressField.decorate(field);
+      field.model = model;
+      field.editable = (model.autoConfig == 'user');
+    }

[Dan Beam, 2012/08/11 01:38:02]

};

[Greg Spencer (Chromium), 2012/08/13 19:20:04]

Done.

 
-    $('ip-type-static').addEventListener('click', function(event) {
-      // Enable ipConfigList.
-      ipConfigList.disabled = false;
-      ipConfigList.focus();
-      ipConfigList.selectionModel.selectedIndex = 0;
-    });
+    configureAddressField($('ip-address'), inetAddress);
+    configureAddressField($('ip-netmask'), inetNetmask);
+    configureAddressField($('ip-gateway'), inetGateway);
+
+    if (data.ipconfig.value && data.ipconfig.value.nameServers)
+      $('automatic-dns-display').textContent = data.ipconfig.value.nameServers;
+    if (data.savedIP && data.savedIP.nameServers)
+      $('automatic-dns-display').textContent = data.savedIP.nameServers;
+    if (data.nameServersGoogle)
+      $('google-dns-display').textContent = data.nameServersGoogle;
+    var nameServersUser = [];
+    if (data.staticIP.value.nameServers)
+      nameServersUser = data.staticIP.value.nameServers.split(',');
+
+    var nameServerModels = [];
+    for (var i = 0; i < 4; ++i) {
+      nameServerModels.push({
+        value: nameServersUser[i] ? nameServersUser[i] : ''

[Dan Beam, 2012/08/11 01:38:02]

nit: same trick here:

  value: nameServersUser[i] || ''

[Greg Spencer (Chromium), 2012/08/13 19:20:04]

Done.

+      });
+    }
+
+    $(data.nameServerType + '-dns-radio').checked = true;
+    configureAddressField($('ipconfig-dns1'), nameServerModels[0]);
+    configureAddressField($('ipconfig-dns2'), nameServerModels[1]);
+    configureAddressField($('ipconfig-dns3'), nameServerModels[2]);
+    configureAddressField($('ipconfig-dns4'), nameServerModels[3]);
+
+    DetailsInternetPage.updateNameServerDisplay(data.nameServerType);
 
     if (data.hardwareAddress) {
       $('hardware-address').textContent = data.hardwareAddress;
       $('hardware-address-row').style.display = 'table-row';
     } else {
       // This is most likely a device without a hardware address.
       $('hardware-address-row').style.display = 'none';
     }
     if (data.type == Constants.TYPE_WIFI) {
       OptionsPage.showTab($('wifi-network-nav-tab'));
       detailsPage.wireless = true;
       detailsPage.vpn = false;
       detailsPage.ethernet = false;
       detailsPage.cellular = false;
       detailsPage.gsm = false;
       detailsPage.wimax = false;
       detailsPage.shared = data.shared;
       $('wifi-connection-state').textContent = data.connectionState;
       $('wifi-ssid').textContent = data.ssid;
       if (data.bssid && data.bssid.length > 0) {
         $('wifi-bssid').textContent = data.bssid;
         $('wifi-bssid-entry').hidden = false;
       } else {
         $('wifi-bssid-entry').hidden = true;
       }
       $('wifi-ip-address').textContent = inetAddress;
-      $('wifi-subnet-address').textContent = inetSubnetAddress;
+      $('wifi-netmask').textContent = inetNetmask;
       $('wifi-gateway').textContent = inetGateway;
-      $('wifi-dns').textContent = inetDns;
+      $('wifi-name-servers').textContent = inetNameServers;
       if (data.encryption && data.encryption.length > 0) {
         $('wifi-security').textContent = data.encryption;
         $('wifi-security-entry').hidden = false;
       } else {
         $('wifi-security-entry').hidden = true;
       }
       // Frequency is in MHz.
       var frequency = loadTimeData.getString('inetFrequencyFormat');
       frequency = frequency.replace('$1', data.frequency);
       $('wifi-frequency').textContent = frequency;
@@ skipping 177 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.
     OptionsPage.showPageByName('detailsInternetPage', false);
   };
 
   return {
     DetailsInternetPage: DetailsInternetPage
   };
 });