Add Private Network list to Internet Options; slight refactoring of icon generation.

BUG=chromium-os:12667
TEST=Connect to a Private Network, ensure network shows up in settings/internet. Clicking on 'options' should bring up details.

Review URL: http://codereview.chromium.org/7086018

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@87260 0039d316-1c4b-4281-b951-d872f2087c98

10 files changed, 198 insertions, 52 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index aa5c48a..178df33 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -10240,13 +10240,16 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_OPTIONS_SETTINGS_SECTION_TITLE_DATETIME">
         Date and time
       </message>
-      <message name="IDS_OPTIONS_SETTINGS_SECTION_TITLE_WIRED_NETWORK">
+      <message name="IDS_OPTIONS_SETTINGS_SECTION_TITLE_WIRED_NETWORK" desc="Title for section in settings/internet for list of wired networks (usually one)">
         Wired network
       </message>
-      <message name="IDS_OPTIONS_SETTINGS_SECTION_TITLE_WIRELESS_NETWORK">
+      <message name="IDS_OPTIONS_SETTINGS_SECTION_TITLE_WIRELESS_NETWORK" desc="Title for section in settings/internet for list of wireless networks (wifi and cellular)">
         Wireless networks
       </message>
-      <message name="IDS_OPTIONS_SETTINGS_SECTION_TITLE_REMEMBERED_NETWORK">
+      <message name="IDS_OPTIONS_SETTINGS_SECTION_TITLE_VIRTUAL_NETWORK" desc="Title for section in settings/internet for list of Virtual Private Networks (VPN)">
+        Private networks
+      </message>
+      <message name="IDS_OPTIONS_SETTINGS_SECTION_TITLE_REMEMBERED_NETWORK" desc="Title for section in settings/internet for list of remembered (favirote) networks">
         Remembered networks
       </message>
       <message name="IDS_OPTIONS_SETTINGS_SECTION_TITLE_TOUCHPAD">
@@ -10372,9 +10375,12 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_OPTIONS_CHANGE_PICTURE_TAKE_PHOTO" desc="The text on the button to take photo of the current user.">
         Take photo
       </message>
-      <message name="IDS_OPTIONS_SETTINGS_INTERNET_TAB_WIFI" desc="In settings Internet options, the title for buy cellular data plan button.">
+      <message name="IDS_OPTIONS_SETTINGS_INTERNET_TAB_WIFI" desc="In settings Internet options, the title for the wifi tab.">
         Wi-Fi
       </message>
+      <message name="IDS_OPTIONS_SETTINGS_INTERNET_TAB_VPN" desc="In settings Internet options, the title for the VPN (Virtual Private Network) tab.">
+        VPN
+      </message>
       <message name="IDS_OPTIONS_SETTINGS_INTERNET_TAB_PLAN" desc="In settings Internet options, the title for buy cellular data plan button.">
         Plan
       </message>
diff --git a/chrome/browser/chromeos/status/network_menu.cc b/chrome/browser/chromeos/status/network_menu.cc
index eb52722..87d2e8e 100644
--- a/chrome/browser/chromeos/status/network_menu.cc
+++ b/chrome/browser/chromeos/status/network_menu.cc
@@ -1020,6 +1020,11 @@ SkBitmap VPNMenuModel::IconForDisplay(const Network* network) {
   const SkBitmap* bottom_left_badge =
       NetworkMenu::BadgeForPrivateNetworkStatus(NULL);
 
+  // We should always have an underlying network for VPN, but if we ever don't
+  // (presumably an edge case), just return an empty icon.
+  if (!network)
+    return SkBitmap();
+
   switch (network->type()) {
     case TYPE_ETHERNET :
       icon = rb.GetBitmapNamed(IDR_STATUSBAR_WIRED_BLACK);
@@ -1243,6 +1248,59 @@ const SkBitmap* NetworkMenu::IconForNetworkStrength(
 }
 
 // static
+SkBitmap NetworkMenu::IconForNetwork(const Network* network) {
+  DCHECK(network);
+
+  chromeos::NetworkLibrary* cros =
+      chromeos::CrosLibrary::Get()->GetNetworkLibrary();
+  ResourceBundle& rb = ResourceBundle::GetSharedInstance();
+
+  const SkBitmap* icon;
+  const SkBitmap* bottom_right_badge = NULL;
+  const SkBitmap* bottom_left_badge = NULL;
+
+  switch (network->type()) {
+    case TYPE_ETHERNET: {
+      icon = rb.GetBitmapNamed(IDR_STATUSBAR_WIRED_BLACK);
+      if (!network->connecting() && !network->connected())
+        bottom_right_badge =
+            rb.GetBitmapNamed(IDR_STATUSBAR_NETWORK_DISCONNECTED);
+      bottom_left_badge = BadgeForPrivateNetworkStatus(network);
+      return IconForDisplay(
+          icon, bottom_right_badge, NULL, bottom_left_badge);
+    }
+    case TYPE_WIFI: {
+      const WifiNetwork* wifi = static_cast<const WifiNetwork*>(network);
+      icon = IconForNetworkStrength(wifi);
+      if (wifi->encrypted())
+        bottom_right_badge = rb.GetBitmapNamed(IDR_STATUSBAR_NETWORK_SECURE);
+      bottom_left_badge = BadgeForPrivateNetworkStatus(wifi);
+      return IconForDisplay(
+          icon, bottom_right_badge, NULL, bottom_left_badge);
+    }
+    case TYPE_CELLULAR: {
+      const CellularNetwork* cellular =
+          static_cast<const CellularNetwork*>(network);
+      icon = IconForNetworkStrength(cellular);
+      bottom_right_badge = BadgeForNetworkTechnology(cellular);
+      const SkBitmap* roaming_badge = BadgeForRoamingStatus(cellular);
+      bottom_left_badge = BadgeForPrivateNetworkStatus(cellular);
+      return IconForDisplay(
+          icon, bottom_right_badge, roaming_badge, bottom_left_badge);
+    }
+    case TYPE_VPN: {
+      return VPNMenuModel::IconForDisplay(cros->connected_network());
+    }
+    default:
+      LOG(WARNING) << "Request for icon for unsupported type: "
+                   << network->type();
+      icon = ResourceBundle::GetSharedInstance().GetBitmapNamed(
+          IDR_STATUSBAR_NETWORK_BARS0);
+      return *icon;
+  }
+}
+
+// static
 const SkBitmap* NetworkMenu::IconForNetworkConnecting(double animation_value,
                                                       ConnectionType type) {
   // Fade bars a bit and show the different bar states.
diff --git a/chrome/browser/chromeos/status/network_menu.h b/chrome/browser/chromeos/status/network_menu.h
index c6be3ec..670bbe9 100644
--- a/chrome/browser/chromeos/status/network_menu.h
+++ b/chrome/browser/chromeos/status/network_menu.h
@@ -90,8 +90,6 @@ class NetworkMenu : public views::ViewMenuDelegate {
   // Returns the Icon for animating network connecting.
   // |animation_value| is the value from Animation.GetCurrentValue()
   // |type| is the connection type
-  // |black| is used to specify whether to return a black icon for display
-  // on a light background or a white icon for display on a dark background.
   // Expected to never return NULL.
   static const SkBitmap* IconForNetworkConnecting(double animation_value,
                                                   ConnectionType type);
@@ -112,6 +110,8 @@ class NetworkMenu : public views::ViewMenuDelegate {
   // Badge is supposed to be shown on in bottom left corner of the icon.
   static const SkBitmap* BadgeForPrivateNetworkStatus(const Network* network);
 
+  // Returns an Icon for a given network.
+  static SkBitmap IconForNetwork(const Network* network);
   // This method will convert the |icon| bitmap to the correct size for display.
   // |icon| must be non-NULL.
   // If |badge| icon is not NULL, it will be drawn on top of the icon in
diff --git a/chrome/browser/resources/options/chromeos/internet_detail.html b/chrome/browser/resources/options/chromeos/internet_detail.html
index 5b4ec9c..53e285b 100644
--- a/chrome/browser/resources/options/chromeos/internet_detail.html
+++ b/chrome/browser/resources/options/chromeos/internet_detail.html
@@ -8,6 +8,12 @@
           i18n-content="wifiNetworkTabLabel"></span>
       <span class="active-tab-label" i18n-content="wifiNetworkTabLabel"></span>
     </span>
+    <span id="vpnNavTab" class="tab vpn-details"
+        tab-contents="vpnTab">
+      <span class="tab-label"
+          i18n-content="vpnTabLabel"></span>
+      <span class="active-tab-label" i18n-content="vpnTabLabel"></span>
+    </span>
     <span id="cellularPlanNavTab" class="tab cellular-details cdma-only"
         tab-contents="cellularPlanTab">
       <span class="tab-label"
@@ -74,6 +80,28 @@
       </table>
     </section>
   </div>
+  <div id="vpnTab" class="subpages-tab-contents vpn-details">
+    <section>
+      <table class="option-control-table">
+        <tr>
+          <td class="option-name" i18n-content="inetServiceName"></td>
+          <td id="inetServiceName" class="option-value"></td>
+        </tr>
+        <tr>
+          <td class="option-name" i18n-content="inetServerHostname"></td>
+          <td id="inetServerHostname" class="option-value"></td>
+        </tr>
+        <tr>
+          <td class="option-name" i18n-content="inetProviderType"></td>
+          <td id="inetProviderType" class="option-value"></td>
+        </tr>
+        <tr>
+          <td class="option-name" i18n-content="inetUsername"></td>
+          <td id="inetUsername" class="option-value"></td>
+        </tr>
+      </table>
+    </section>
+  </div>
   <div id="cellularPlanTab"
       class="subpages-tab-contents cellular-details cdma-only">
     <section>
diff --git a/chrome/browser/resources/options/chromeos/internet_detail.js b/chrome/browser/resources/options/chromeos/internet_detail.js
index b8b65b3..0838eeb 100644
--- a/chrome/browser/resources/options/chromeos/internet_detail.js
+++ b/chrome/browser/resources/options/chromeos/internet_detail.js
@@ -59,6 +59,9 @@ cr.define('options.internet', function() {
       updateHidden(
           cr.doc.querySelectorAll('#detailsInternetPage .wifi-details'),
           !this.wireless);
+      updateHidden(
+          cr.doc.querySelectorAll('#detailsInternetPage .vpn-details'),
+          !this.vpn);
 
       // Cell plan related
       $('planList').hidden = this.cellplanloading;
@@ -101,6 +104,14 @@ cr.define('options.internet', function() {
       DetailsInternetPage.prototype.updateControls_);
 
   /**
+   * Whether the underlying network is a vpn. Only used for display purpose.
+   * @type {boolean}
+   */
+  cr.defineProperty(DetailsInternetPage, 'vpn',
+      cr.PropertyKind.JS,
+      DetailsInternetPage.prototype.updateControls_);
+
+  /**
    * Whether the underlying network is ethernet. Only used for display purpose.
    * @type {boolean}
    */
diff --git a/chrome/browser/resources/options/chromeos/internet_network_element.js b/chrome/browser/resources/options/chromeos/internet_network_element.js
index 45c1af0..c56ecc1 100644
--- a/chrome/browser/resources/options/chromeos/internet_network_element.js
+++ b/chrome/browser/resources/options/chromeos/internet_network_element.js
@@ -26,6 +26,7 @@ cr.define('options.internet', function() {
   Constants.TYPE_WIMAX     = 3;
   Constants.TYPE_BLUETOOTH = 4;
   Constants.TYPE_CELLULAR  = 5;
+  Constants.TYPE_VPN       = 6;
 
   /**
    * Creates a new network list div.
@@ -244,6 +245,7 @@ cr.define('options.internet', function() {
         }
         if (this.data.connected ||
                 this.data.networkType == Constants.TYPE_ETHERNET ||
+                this.data.networkType == Constants.TYPE_VPN ||
                 this.data.networkType == Constants.TYPE_WIFI ||
                 this.data.networkType == Constants.TYPE_CELLULAR) {
           buttonsDiv.appendChild(
diff --git a/chrome/browser/resources/options/chromeos/internet_options.html b/chrome/browser/resources/options/chromeos/internet_options.html
index 408965c..3162406 100644
--- a/chrome/browser/resources/options/chromeos/internet_options.html
+++ b/chrome/browser/resources/options/chromeos/internet_options.html
@@ -16,7 +16,7 @@
            i18n-content="enableCellular"></button>
        <button id="disable-cellular" hidden
            i18n-content="disableCellular"></button>
-     </div>     
+     </div>
      <div id="internet-owner-only-warning" hidden>
        <span i18n-content="ownerOnly"></span>
        <span i18n-content="ownerUserId"></span>
@@ -38,6 +38,10 @@
     <h3 i18n-content="wireless_title"></h3>
     <div id="wireless-list" class="networks"></div>
   </section>
+  <section id="vpn-section">
+    <h3 i18n-content="vpn_title"></h3>
+    <div id="vpn-list" class="networks"></div>
+  </section>
   <section id="remembered-section">
     <h3 i18n-content="remembered_title"></h3>
     <div id="remembered-list" class="networks"></div>
diff --git a/chrome/browser/resources/options/chromeos/internet_options.js b/chrome/browser/resources/options/chromeos/internet_options.js
index 5365c1c..c3e1b2f 100644
--- a/chrome/browser/resources/options/chromeos/internet_options.js
+++ b/chrome/browser/resources/options/chromeos/internet_options.js
@@ -39,6 +39,8 @@ cr.define('options', function() {
       $('wired-list').load(templateData.wiredList);
       options.internet.NetworkElement.decorate($('wireless-list'));
       $('wireless-list').load(templateData.wirelessList);
+      options.internet.NetworkElement.decorate($('vpn-list'));
+      $('vpn-list').load(templateData.vpnList);
       options.internet.NetworkElement.decorate($('remembered-list'));
       $('remembered-list').load(templateData.rememberedList);
 
@@ -46,6 +48,7 @@ cr.define('options', function() {
 
       $('wired-section').hidden = (templateData.wiredList.length == 0);
       $('wireless-section').hidden = (templateData.wirelessList.length == 0);
+      $('vpn-section').hidden = (templateData.vpnList.length == 0);
       $('remembered-section').hidden =
           (templateData.rememberedList.length == 0);
       InternetOptions.setupAttributes(templateData);
@@ -133,6 +136,7 @@ cr.define('options', function() {
       $('wireless-buttons').hidden = accesslocked;
       $('wired-section').hidden = accesslocked;
       $('wireless-section').hidden = accesslocked;
+      $('vpn-section').hidden = accesslocked;
       $('remembered-section').hidden = accesslocked;
 
       // Don't change hidden attribute on OptionsPage divs directly beucase it
@@ -276,10 +280,12 @@ cr.define('options', function() {
     } else {
       $('wired-list').load(data.wiredList);
       $('wireless-list').load(data.wirelessList);
+      $('vpn-list').load(data.vpnList);
       $('remembered-list').load(data.rememberedList);
 
       $('wired-section').hidden = (data.wiredList.length == 0);
       $('wireless-section').hidden = (data.wirelessList.length == 0);
+      $('vpn-section').hidden = (data.vpnList.length == 0);
       InternetOptions.setupAttributes(data);
       $('remembered-section').hidden = (data.rememberedList.length == 0);
       InternetOptions.updateData = null;
@@ -427,6 +433,7 @@ cr.define('options', function() {
     if (data.type == 2) {
       OptionsPage.showTab($('wifiNetworkNavTab'));
       detailsPage.wireless = true;
+      detailsPage.vpn = false;
       detailsPage.ethernet = false;
       detailsPage.cellular = false;
       detailsPage.gsm = false;
@@ -443,6 +450,7 @@ cr.define('options', function() {
         OptionsPage.showTab($('cellularConnNavTab'));
       detailsPage.ethernet = false;
       detailsPage.wireless = false;
+      detailsPage.vpn = false;
       detailsPage.cellular = true;
       if (data.carrierUrl) {
         var a = $('carrierUrl');
@@ -499,10 +507,22 @@ cr.define('options', function() {
         detailsPage.nocellplan = true;
         detailsPage.cellplanloading = false;
       }
+    } else if (data.type == 6) {
+      OptionsPage.showTab($('vpnNavTab'));
+      detailsPage.wireless = false;
+      detailsPage.vpn = true;
+      detailsPage.ethernet = false;
+      detailsPage.cellular = false;
+      detailsPage.gsm = false;
+      $('inetServiceName').textContent = data.service_name;
+      $('inetServerHostname').textContent = data.server_hostname;
+      $('inetProviderType').textContent = data.provider_type;
+      $('inetUsername').textContent = data.username;
     } else {
       OptionsPage.showTab($('internetNavTab'));
       detailsPage.ethernet = true;
       detailsPage.wireless = false;
+      detailsPage.vpn = false;
       detailsPage.cellular = false;
       detailsPage.gsm = false;
     }
diff --git a/chrome/browser/ui/webui/options/chromeos/internet_options_handler.cc b/chrome/browser/ui/webui/options/chromeos/internet_options_handler.cc
index f4a9562..a2a5ebc 100644
--- a/chrome/browser/ui/webui/options/chromeos/internet_options_handler.cc
+++ b/chrome/browser/ui/webui/options/chromeos/internet_options_handler.cc
@@ -85,6 +85,9 @@ void InternetOptionsHandler::GetLocalizedValues(
   localized_strings->SetString("wireless_title",
       l10n_util::GetStringUTF16(
           IDS_OPTIONS_SETTINGS_SECTION_TITLE_WIRELESS_NETWORK));
+  localized_strings->SetString("vpn_title",
+      l10n_util::GetStringUTF16(
+          IDS_OPTIONS_SETTINGS_SECTION_TITLE_VIRTUAL_NETWORK));
   localized_strings->SetString("remembered_title",
       l10n_util::GetStringUTF16(
           IDS_OPTIONS_SETTINGS_SECTION_TITLE_REMEMBERED_NETWORK));
@@ -111,6 +114,9 @@ void InternetOptionsHandler::GetLocalizedValues(
   localized_strings->SetString("wifiNetworkTabLabel",
       l10n_util::GetStringUTF16(
           IDS_OPTIONS_SETTINGS_INTERNET_TAB_WIFI));
+  localized_strings->SetString("vpnTabLabel",
+      l10n_util::GetStringUTF16(
+          IDS_OPTIONS_SETTINGS_INTERNET_TAB_VPN));
   localized_strings->SetString("cellularPlanTabLabel",
       l10n_util::GetStringUTF16(
           IDS_OPTIONS_SETTINGS_INTERNET_TAB_PLAN));
@@ -152,6 +158,7 @@ void InternetOptionsHandler::GetLocalizedValues(
       l10n_util::GetStringUTF16(
           IDS_OPTIONS_SETTINGS_INTERNET_OPTIONS_HARDWARE_ADDRESS));
 
+  // Wifi Tab.
   localized_strings->SetString("accessLockedMsg",
       l10n_util::GetStringUTF16(
           IDS_STATUSBAR_NETWORK_LOCKED));
@@ -206,6 +213,21 @@ void InternetOptionsHandler::GetLocalizedValues(
       l10n_util::GetStringUTF16(
           IDS_OPTIONS_SETTINGS_INTERNET_OPTIONS_CONNECT_TITLE));
 
+  // VPN Tab.
+  localized_strings->SetString("inetServiceName",
+      l10n_util::GetStringUTF16(
+          IDS_OPTIONS_SETTINGS_INTERNET_OPTIONS_VPN_SERVICE_NAME));
+  localized_strings->SetString("inetServerHostname",
+      l10n_util::GetStringUTF16(
+          IDS_OPTIONS_SETTINGS_INTERNET_OPTIONS_VPN_SERVER_HOSTNAME));
+  localized_strings->SetString("inetProviderType",
+      l10n_util::GetStringUTF16(
+          IDS_OPTIONS_SETTINGS_INTERNET_OPTIONS_VPN_PROVIDER_TYPE));
+  localized_strings->SetString("inetUsername",
+      l10n_util::GetStringUTF16(
+          IDS_OPTIONS_SETTINGS_INTERNET_OPTIONS_VPN_USERNAME));
+
+  // Cellular Tab.
   localized_strings->SetString("serviceName",
       l10n_util::GetStringUTF16(
           IDS_OPTIONS_SETTINGS_INTERNET_CELLULAR_SERVICE_NAME));
@@ -489,7 +511,7 @@ void InternetOptionsHandler::OnNetworkChanged(
 void InternetOptionsHandler::MonitorNetworks() {
   cros_->RemoveObserverForAllNetworks(this);
   const chromeos::WifiNetwork* wifi_network = cros_->wifi_network();
-  if (wifi_network != NULL)
+  if (wifi_network)
     cros_->AddNetworkObserver(wifi_network->service_path(), this);
   // Always monitor the cellular networks, if any, so that changes
   // in network technology, roaming status, and signal strength
@@ -500,6 +522,9 @@ void InternetOptionsHandler::MonitorNetworks() {
     chromeos::CellularNetwork* cell_network = cell_networks[i];
     cros_->AddNetworkObserver(cell_network->service_path(), this);
   }
+  const chromeos::VirtualNetwork* virtual_network = cros_->virtual_network();
+  if (virtual_network)
+    cros_->AddNetworkObserver(virtual_network->service_path(), this);
 }
 
 void InternetOptionsHandler::OnCellularDataPlanChanged(
@@ -794,7 +819,10 @@ void InternetOptionsHandler::PopulateCellularDetails(
 void InternetOptionsHandler::PopulateVPNDetails(
     const chromeos::VirtualNetwork* vpn,
     DictionaryValue* dictionary) {
-  // TODO(altimofeev): implement this.
+  dictionary->SetString("service_name", vpn->name());
+  dictionary->SetString("server_hostname", vpn->server_hostname());
+  dictionary->SetString("provider_type", vpn->GetProviderTypeString());
+  dictionary->SetString("username", vpn->username());
 }
 
 void InternetOptionsHandler::SetActivationButtonVisibility(
@@ -1084,24 +1112,16 @@ ListValue* InternetOptionsHandler::GetNetwork(
 }
 
 ListValue* InternetOptionsHandler::GetWiredList() {
-  ResourceBundle& rb = ResourceBundle::GetSharedInstance();
   ListValue* list = new ListValue();
 
   // If ethernet is not enabled, then don't add anything.
   if (cros_->ethernet_enabled()) {
     const chromeos::EthernetNetwork* ethernet_network =
         cros_->ethernet_network();
-    const SkBitmap* icon = rb.GetBitmapNamed(IDR_STATUSBAR_WIRED_BLACK);
-    const SkBitmap* bottom_right_badge = !ethernet_network ||
-        (!ethernet_network->connecting() && !ethernet_network->connected()) ?
-            rb.GetBitmapNamed(IDR_STATUSBAR_NETWORK_DISCONNECTED) : NULL;
-    const SkBitmap* bottom_left_badge =
-        chromeos::NetworkMenu::BadgeForPrivateNetworkStatus(ethernet_network);
     if (ethernet_network) {
       list->Append(GetNetwork(
           ethernet_network->service_path(),
-          chromeos::NetworkMenu::IconForDisplay(icon, bottom_right_badge, NULL,
-                                                bottom_left_badge),
+          chromeos::NetworkMenu::IconForNetwork(ethernet_network),
           l10n_util::GetStringUTF8(IDS_STATUSBAR_NETWORK_DEVICE_ETHERNET),
           ethernet_network->connecting(),
           ethernet_network->connected(),
@@ -1120,24 +1140,12 @@ ListValue* InternetOptionsHandler::GetWirelessList() {
   ResourceBundle& rb = ResourceBundle::GetSharedInstance();
   ListValue* list = new ListValue();
 
-  const chromeos::Network* active_network = cros_->active_network();
-  bool has_vpn = active_network && cros_->virtual_network();
-  bool vpn_on_wireless = has_vpn &&
-      active_network->type() == chromeos::TYPE_WIFI;
   const chromeos::WifiNetworkVector& wifi_networks = cros_->wifi_networks();
   for (chromeos::WifiNetworkVector::const_iterator it =
       wifi_networks.begin(); it != wifi_networks.end(); ++it) {
-    const SkBitmap* icon =
-        chromeos::NetworkMenu::IconForNetworkStrength(*it);
-    const SkBitmap* bottom_right_badge = (*it)->encrypted() ?
-        rb.GetBitmapNamed(IDR_STATUSBAR_NETWORK_SECURE) : NULL;
-    const SkBitmap* bottom_left_badge =
-        vpn_on_wireless && active_network == (*it) ?
-        chromeos::NetworkMenu::BadgeForPrivateNetworkStatus(NULL) : NULL;
     list->Append(GetNetwork(
         (*it)->service_path(),
-        chromeos::NetworkMenu::IconForDisplay(icon, bottom_right_badge, NULL,
-                                              bottom_left_badge),
+        chromeos::NetworkMenu::IconForNetwork(*it),
         (*it)->name(),
         (*it)->connecting(),
         (*it)->connected(),
@@ -1165,25 +1173,13 @@ ListValue* InternetOptionsHandler::GetWirelessList() {
         false));
   }
 
-  bool vpn_on_cellular = has_vpn &&
-                         active_network->type() == chromeos::TYPE_CELLULAR;
   const chromeos::CellularNetworkVector cellular_networks =
       cros_->cellular_networks();
   for (chromeos::CellularNetworkVector::const_iterator it =
       cellular_networks.begin(); it != cellular_networks.end(); ++it) {
-    const SkBitmap* icon =
-        chromeos::NetworkMenu::IconForNetworkStrength(*it);
-    const SkBitmap* bottom_right_badge =
-        chromeos::NetworkMenu::BadgeForNetworkTechnology(*it);
-    const SkBitmap* roaming_badge =
-        chromeos::NetworkMenu::BadgeForRoamingStatus(*it);
-    const SkBitmap* bottom_left_badge =
-        vpn_on_cellular && active_network == (*it) ?
-        chromeos::NetworkMenu::BadgeForPrivateNetworkStatus(NULL) : NULL;
     list->Append(GetNetwork(
         (*it)->service_path(),
-        chromeos::NetworkMenu::IconForDisplay(icon, bottom_right_badge,
-                                              roaming_badge, bottom_left_badge),
+        chromeos::NetworkMenu::IconForNetwork(*it),
         (*it)->name(),
         (*it)->connecting(),
         (*it)->connected(),
@@ -1215,15 +1211,36 @@ ListValue* InternetOptionsHandler::GetWirelessList() {
   return list;
 }
 
+ListValue* InternetOptionsHandler::GetVPNList() {
+  ListValue* list = new ListValue();
+
+  const chromeos::VirtualNetworkVector& virtual_networks =
+      cros_->virtual_networks();
+  for (chromeos::VirtualNetworkVector::const_iterator it =
+      virtual_networks.begin(); it != virtual_networks.end(); ++it) {
+    list->Append(GetNetwork(
+        (*it)->service_path(),
+        chromeos::NetworkMenu::IconForNetwork(*it),
+        (*it)->name(),
+        (*it)->connecting(),
+        (*it)->connected(),
+        (*it)->connectable(),
+        chromeos::TYPE_VPN,
+        false,
+        false,
+        chromeos::ACTIVATION_STATE_UNKNOWN,
+        false));
+  }
+
+  return list;
+}
+
 ListValue* InternetOptionsHandler::GetRememberedList() {
   ResourceBundle& rb = ResourceBundle::GetSharedInstance();
   ListValue* list = new ListValue();
 
   const chromeos::WifiNetworkVector& remembered_wifi_networks =
       cros_->remembered_wifi_networks();
-  const chromeos::Network* active_network = cros_->active_network();
-  bool vpn_on_wireless = active_network && cros_->virtual_network() &&
-                         active_network->type() == chromeos::TYPE_WIFI;
 
   for (chromeos::WifiNetworkVector::const_iterator rit =
            remembered_wifi_networks.begin();
@@ -1240,17 +1257,14 @@ ListValue* InternetOptionsHandler::GetRememberedList() {
     // encrypted property by definition).
     const SkBitmap* bottom_right_badge = remembered->encrypted() ?
         rb.GetBitmapNamed(IDR_STATUSBAR_NETWORK_SECURE) : NULL;
-    const SkBitmap* bottom_left_badge =
-        vpn_on_wireless && active_network == wifi ?
-        chromeos::NetworkMenu::BadgeForPrivateNetworkStatus(NULL) : NULL;
     // Set in_active_profile.
     bool shared =
         cros_->HasMultipleProfiles() &&
         remembered->profile_type() == chromeos::PROFILE_SHARED;
     list->Append(GetNetwork(
         remembered->service_path(),
-        chromeos::NetworkMenu::IconForDisplay(icon, bottom_right_badge, NULL,
-                                              bottom_left_badge),
+        chromeos::NetworkMenu::IconForDisplay(
+            icon, bottom_right_badge, NULL, NULL),
         remembered->name(),
         wifi ? wifi->connecting() : false,
         wifi ? wifi->connected() : false,
@@ -1268,6 +1282,7 @@ void InternetOptionsHandler::FillNetworkInfo(DictionaryValue* dictionary) {
   dictionary->SetBoolean("accessLocked", cros_->IsLocked());
   dictionary->Set("wiredList", GetWiredList());
   dictionary->Set("wirelessList", GetWirelessList());
+  dictionary->Set("vpnList", GetVPNList());
   dictionary->Set("rememberedList", GetRememberedList());
   dictionary->SetBoolean("wifiAvailable", cros_->wifi_available());
   dictionary->SetBoolean("wifiEnabled", cros_->wifi_enabled());
diff --git a/chrome/browser/ui/webui/options/chromeos/internet_options_handler.h b/chrome/browser/ui/webui/options/chromeos/internet_options_handler.h
index e426e6c..48b93d2 100644
--- a/chrome/browser/ui/webui/options/chromeos/internet_options_handler.h
+++ b/chrome/browser/ui/webui/options/chromeos/internet_options_handler.h
@@ -121,6 +121,8 @@ class InternetOptionsHandler
   ListValue* GetWiredList();
   // Creates the map of wireless networks.
   ListValue* GetWirelessList();
+  // Creates the map of virtual networks.
+  ListValue* GetVPNList();
   // Creates the map of remembered networks.
   ListValue* GetRememberedList();
   // Fills network information into JS dictionary for displaying network lists.