This updates the StaticIP configuration UI to match new mocks.

chrome/browser/resources/options2/chromeos/internet_detail.js

Index: chrome/browser/resources/options2/chromeos/internet_detail.js
diff --git a/chrome/browser/resources/options2/chromeos/internet_detail.js b/chrome/browser/resources/options2/chromeos/internet_detail.js
index f84122db53f2e883146bcfd42b641c5cd42174fc..bc78544b15589d26182df0d326e6df45ff3e87bc 100644
--- a/chrome/browser/resources/options2/chromeos/internet_detail.js
+++ b/chrome/browser/resources/options2/chromeos/internet_detail.js
@@ -5,6 +5,7 @@
 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++
@@ -252,10 +253,20 @@ cr.define('options.internet', function() {
       $('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_);
     },
 
     /**
@@ -285,6 +296,38 @@ cr.define('options.internet', function() {
     },
 
     /**
+     * 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
      */
@@ -295,6 +338,8 @@ cr.define('options.internet', function() {
       // 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);
@@ -542,16 +587,76 @@ cr.define('options.internet', function() {
                    $('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();
 
@@ -610,81 +715,91 @@ cr.define('options.internet', function() {
     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;
+    }
+
+    // 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;
     }
 
-    // Hide the dhcp/static radio if needed.
-    $('ip-type-dhcp-div').hidden = !data.showStaticIPConfig;
-    $('ip-type-static-div').hidden = !data.showStaticIPConfig;
-
-    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;
-
-    $('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;
+    if (ipAutoConfig == 'user') {
+      if (data.staticIP.value.address) {
+        inetAddress.value = data.staticIP.value.address;
+        inetAddress.user = data.staticIP.value.address;
       }
-      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;
-    });
-
-    $('ip-type-static').addEventListener('click', function(event) {
-      // Enable ipConfigList.
-      ipConfigList.disabled = false;
-      ipConfigList.focus();
-      ipConfigList.selectionModel.selectedIndex = 0;
-    });
+      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;
+      }
+    }
+
+    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.

+
+    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;
@@ -711,9 +826,9 @@ cr.define('options.internet', function() {
         $('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;