Update NetworkStateListDetailedView for VPN

BUG=179605

Review URL: https://codereview.chromium.org/12387065

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

10 files changed, 457 insertions, 270 deletions

diff --git a/ash/system/chromeos/network/network_icon.cc b/ash/system/chromeos/network/network_icon.cc
index 2a90d26..05de7d1 100644
--- a/ash/system/chromeos/network/network_icon.cc
+++ b/ash/system/chromeos/network/network_icon.cc
@@ -287,6 +287,11 @@ gfx::ImageSkia GetImageForIndex(ImageType image_type,
 
 const gfx::ImageSkia GetDisconnectedImage(const std::string& type,
                                           IconType icon_type) {
+  if (type == flimflam::kTypeVPN) {
+    // Note: same as connected image, shouldn't normally be seen.
+    return *ui::ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
+        IDR_AURA_UBER_TRAY_NETWORK_VPN);
+  }
   ImageType image_type = ImageTypeForNetworkType(type);
   const int disconnected_index = 0;
   return GetImageForIndex(image_type, icon_type, disconnected_index);
@@ -597,5 +602,31 @@ string16 GetLabelForNetwork(const chromeos::NetworkState* network,
   return UTF8ToUTF16(network->name());
 }
 
+int GetCellularUninitializedMsg() {
+  static base::Time s_uninitialized_state_time;
+  static int s_uninitialized_msg(0);
+
+  NetworkStateHandler* handler = NetworkStateHandler::Get();
+  if (handler->TechnologyUninitialized(
+          NetworkStateHandler::kMatchTypeMobile)) {
+    s_uninitialized_msg = IDS_ASH_STATUS_TRAY_INITIALIZING_CELLULAR;
+    s_uninitialized_state_time = base::Time::Now();
+    return s_uninitialized_msg;
+  } else if (handler->GetScanningByType(
+      NetworkStateHandler::kMatchTypeMobile)) {
+    s_uninitialized_msg = IDS_ASH_STATUS_TRAY_CELLULAR_SCANNING;
+    s_uninitialized_state_time = base::Time::Now();
+    return s_uninitialized_msg;
+  }
+  // There can be a delay between leaving the Initializing state and when
+  // a Cellular device shows up, so keep showing the initializing
+  // animation for a bit to avoid flashing the disconnect icon.
+  const int kInitializingDelaySeconds = 1;
+  base::TimeDelta dtime = base::Time::Now() - s_uninitialized_state_time;
+  if (dtime.InSeconds() < kInitializingDelaySeconds)
+    return s_uninitialized_msg;
+  return 0;
+}
+
 }  // namespace network_icon
 }  // namespace ash
diff --git a/ash/system/chromeos/network/network_icon.h b/ash/system/chromeos/network/network_icon.h
index 06c2491..9ea5b7f 100644
--- a/ash/system/chromeos/network/network_icon.h
+++ b/ash/system/chromeos/network/network_icon.h
@@ -44,6 +44,10 @@ gfx::ImageSkia GetImageForDisconnectedNetwork(IconType icon_type,
 string16 GetLabelForNetwork(const chromeos::NetworkState* network,
                             IconType icon_type);
 
+// Updates and returns the appropriate message id if the cellular network
+// is uninitialized.
+int GetCellularUninitializedMsg();
+
 }  // namespace network_icon
 }  // namespace ash
 
diff --git a/ash/system/chromeos/network/network_state_list_detailed_view.cc b/ash/system/chromeos/network/network_state_list_detailed_view.cc
index 6fbbcbe4..daa1af7 100644
--- a/ash/system/chromeos/network/network_state_list_detailed_view.cc
+++ b/ash/system/chromeos/network/network_state_list_detailed_view.cc
@@ -9,14 +9,17 @@
 #include "ash/shell_window_ids.h"
 #include "ash/system/chromeos/network/network_icon.h"
 #include "ash/system/chromeos/network/network_icon_animation.h"
-#include "ash/system/chromeos/network/tray_network.h"
+#include "ash/system/chromeos/network/tray_network_state_observer.h"
 #include "ash/system/tray/hover_highlight_view.h"
 #include "ash/system/tray/system_tray.h"
 #include "ash/system/tray/system_tray_delegate.h"
 #include "ash/system/tray/tray_constants.h"
 #include "ash/system/tray/tray_details_view.h"
+#include "base/command_line.h"
 #include "base/utf_string_conversions.h"
+#include "chromeos/chromeos_switches.h"
 #include "chromeos/network/device_state.h"
+#include "chromeos/network/network_configuration_handler.h"
 #include "chromeos/network/network_state.h"
 #include "chromeos/network/network_state_handler.h"
 #include "grit/ash_resources.h"
@@ -31,6 +34,7 @@
 #include "ui/views/layout/fill_layout.h"
 #include "ui/views/widget/widget.h"
 
+using chromeos::NetworkState;
 using chromeos::NetworkStateHandler;
 
 namespace ash {
@@ -117,10 +121,11 @@ struct NetworkInfo {
 // NetworkStateListDetailedView
 
 NetworkStateListDetailedView::NetworkStateListDetailedView(
-    TrayNetwork* tray_network,
+    SystemTrayItem* owner,
+    ListType list_type,
     user::LoginStatus login)
-    : NetworkDetailedView(tray_network),
-      tray_network_(tray_network),
+    : NetworkDetailedView(owner),
+      list_type_(list_type),
       login_(login),
       info_icon_(NULL),
       button_wifi_(NULL),
@@ -130,6 +135,7 @@ NetworkStateListDetailedView::NetworkStateListDetailedView(
       other_wifi_(NULL),
       turn_on_wifi_(NULL),
       other_mobile_(NULL),
+      other_vpn_(NULL),
       settings_(NULL),
       proxy_settings_(NULL),
       scanning_view_(NULL),
@@ -146,7 +152,7 @@ NetworkStateListDetailedView::~NetworkStateListDetailedView() {
 }
 
 void NetworkStateListDetailedView::ManagerChanged() {
-  UpdateNetworkListEntries();
+  UpdateNetworkList();
   UpdateHeaderButtons();
   UpdateMobileAccount();
   UpdateNetworkExtra();
@@ -157,7 +163,7 @@ void NetworkStateListDetailedView::NetworkListChanged() {
   NetworkStateList network_list;
   NetworkStateHandler::Get()->GetNetworkList(&network_list);
   UpdateNetworks(network_list);
-  UpdateNetworkListEntries();
+  UpdateNetworkList();
   UpdateHeaderButtons();
   UpdateMobileAccount();
   UpdateNetworkExtra();
@@ -165,29 +171,30 @@ void NetworkStateListDetailedView::NetworkListChanged() {
 }
 
 void NetworkStateListDetailedView::NetworkServiceChanged(
-    const chromeos::NetworkState* network) {
-  UpdateNetworkListEntries();
+    const NetworkState* network) {
+  UpdateNetworkList();
   Layout();
 }
 
 void NetworkStateListDetailedView::NetworkIconChanged() {
-  UpdateNetworkListEntries();
+  UpdateNetworkList();
   Layout();
 }
 
 // Overridden from NetworkDetailedView:
 
 void NetworkStateListDetailedView::Init() {
-  CreateMobileAccount();
-  CreateNetworkExtra();
+  CreateScrollableList();
   CreateHeaderEntry();
   CreateHeaderButtons();
+  CreateMobileAccount();
+  CreateNetworkExtra();
   NetworkStateHandler* handler = NetworkStateHandler::Get();
   NetworkStateList network_list;
   handler->RequestScan();
   handler->GetNetworkList(&network_list);
   UpdateNetworks(network_list);
-  UpdateNetworkListEntries();
+  UpdateNetworkList();
   UpdateHeaderButtons();
   UpdateMobileAccount();
   UpdateNetworkExtra();
@@ -236,6 +243,8 @@ void NetworkStateListDetailedView::ButtonPressed(views::Button* sender,
     delegate->ShowOtherCellular();
   } else if (sender == other_wifi_) {
     delegate->ShowOtherWifi();
+  } else if (sender == other_vpn_) {
+    delegate->ShowOtherVPN();
   } else {
     NOTREACHED();
   }
@@ -264,7 +273,7 @@ void NetworkStateListDetailedView::OnViewClicked(views::View* sender) {
     std::map<views::View*, std::string>::iterator found =
         network_map_.find(sender);
     if (found != network_map_.end())
-      tray_network_->ConnectToNetwork(found->second);
+      ConnectToNetwork(found->second);
   }
 }
 
@@ -275,31 +284,33 @@ void NetworkStateListDetailedView::CreateHeaderEntry() {
 }
 
 void NetworkStateListDetailedView::CreateHeaderButtons() {
-  button_wifi_ = new TrayPopupHeaderButton(
-      this,
-      IDR_AURA_UBER_TRAY_WIFI_ENABLED,
-      IDR_AURA_UBER_TRAY_WIFI_DISABLED,
-      IDR_AURA_UBER_TRAY_WIFI_ENABLED_HOVER,
-      IDR_AURA_UBER_TRAY_WIFI_DISABLED_HOVER,
-      IDS_ASH_STATUS_TRAY_WIFI);
-  button_wifi_->SetTooltipText(
-      l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_DISABLE_WIFI));
-  button_wifi_->SetToggledTooltipText(
-      l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_ENABLE_WIFI));
-  footer()->AddButton(button_wifi_);
-
-  button_mobile_ = new TrayPopupHeaderButton(
-      this,
-      IDR_AURA_UBER_TRAY_CELLULAR_ENABLED,
-      IDR_AURA_UBER_TRAY_CELLULAR_DISABLED,
-      IDR_AURA_UBER_TRAY_CELLULAR_ENABLED_HOVER,
-      IDR_AURA_UBER_TRAY_CELLULAR_DISABLED_HOVER,
-      IDS_ASH_STATUS_TRAY_CELLULAR);
-  button_mobile_->SetTooltipText(
-      l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_DISABLE_MOBILE));
-  button_mobile_->SetToggledTooltipText(
-      l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_ENABLE_MOBILE));
-  footer()->AddButton(button_mobile_);
+  if (list_type_ == LIST_TYPE_NETWORK) {
+    button_wifi_ = new TrayPopupHeaderButton(
+        this,
+        IDR_AURA_UBER_TRAY_WIFI_ENABLED,
+        IDR_AURA_UBER_TRAY_WIFI_DISABLED,
+        IDR_AURA_UBER_TRAY_WIFI_ENABLED_HOVER,
+        IDR_AURA_UBER_TRAY_WIFI_DISABLED_HOVER,
+        IDS_ASH_STATUS_TRAY_WIFI);
+    button_wifi_->SetTooltipText(
+        l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_DISABLE_WIFI));
+    button_wifi_->SetToggledTooltipText(
+        l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_ENABLE_WIFI));
+    footer()->AddButton(button_wifi_);
+
+    button_mobile_ = new TrayPopupHeaderButton(
+        this,
+        IDR_AURA_UBER_TRAY_CELLULAR_ENABLED,
+        IDR_AURA_UBER_TRAY_CELLULAR_DISABLED,
+        IDR_AURA_UBER_TRAY_CELLULAR_ENABLED_HOVER,
+        IDR_AURA_UBER_TRAY_CELLULAR_DISABLED_HOVER,
+        IDS_ASH_STATUS_TRAY_CELLULAR);
+    button_mobile_->SetTooltipText(
+        l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_DISABLE_MOBILE));
+    button_mobile_->SetToggledTooltipText(
+        l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_ENABLE_MOBILE));
+    footer()->AddButton(button_mobile_);
+  }
 
   info_icon_ = new TrayPopupHeaderButton(
       this,
@@ -314,7 +325,8 @@ void NetworkStateListDetailedView::CreateHeaderButtons() {
 }
 
 void NetworkStateListDetailedView::CreateMobileAccount() {
-  CreateScrollableList();
+  if (list_type_ != LIST_TYPE_NETWORK)
+    return;
 
   HoverHighlightView* container = new HoverHighlightView(this);
   container->AddLabel(
@@ -340,17 +352,25 @@ void NetworkStateListDetailedView::CreateNetworkExtra() {
 
   views::View* bottom_row = new views::View();
 
-  other_wifi_ = new TrayPopupLabelButton(
-      this, rb.GetLocalizedString(IDS_ASH_STATUS_TRAY_OTHER_WIFI));
-  bottom_row->AddChildView(other_wifi_);
+  if (list_type_ == LIST_TYPE_NETWORK) {
+    other_wifi_ = new TrayPopupLabelButton(
+        this, rb.GetLocalizedString(IDS_ASH_STATUS_TRAY_OTHER_WIFI));
+    bottom_row->AddChildView(other_wifi_);
 
-  turn_on_wifi_ = new TrayPopupLabelButton(
-      this, rb.GetLocalizedString(IDS_ASH_STATUS_TRAY_TURN_ON_WIFI));
-  bottom_row->AddChildView(turn_on_wifi_);
+    turn_on_wifi_ = new TrayPopupLabelButton(
+        this, rb.GetLocalizedString(IDS_ASH_STATUS_TRAY_TURN_ON_WIFI));
+    bottom_row->AddChildView(turn_on_wifi_);
 
-  other_mobile_ = new TrayPopupLabelButton(
-      this, rb.GetLocalizedString(IDS_ASH_STATUS_TRAY_OTHER_MOBILE));
-  bottom_row->AddChildView(other_mobile_);
+    other_mobile_ = new TrayPopupLabelButton(
+        this, rb.GetLocalizedString(IDS_ASH_STATUS_TRAY_OTHER_MOBILE));
+    bottom_row->AddChildView(other_mobile_);
+  } else if (list_type_ == LIST_TYPE_VPN) {
+    other_vpn_ = new TrayPopupLabelButton(
+        this,
+        ui::ResourceBundle::GetSharedInstance().GetLocalizedString(
+            IDS_ASH_STATUS_TRAY_OTHER_VPN));
+    bottom_row->AddChildView(other_vpn_);
+  }
 
   CreateSettingsEntry();
   DCHECK(settings_ || proxy_settings_);
@@ -363,12 +383,16 @@ void NetworkStateListDetailedView::CreateNetworkExtra() {
 
 void NetworkStateListDetailedView::UpdateHeaderButtons() {
   NetworkStateHandler* handler = NetworkStateHandler::Get();
-  button_wifi_->SetToggled(
-      !handler->TechnologyEnabled(flimflam::kTypeWifi));
-  button_mobile_->SetToggled(!handler->TechnologyEnabled(
-      NetworkStateHandler::kMatchTypeMobile));
-  button_mobile_->SetVisible(handler->TechnologyAvailable(
-      NetworkStateHandler::kMatchTypeMobile));
+  if (button_wifi_) {
+    button_wifi_->SetToggled(
+        !handler->TechnologyEnabled(flimflam::kTypeWifi));
+  }
+  if (button_mobile_) {
+    button_mobile_->SetToggled(!handler->TechnologyEnabled(
+        NetworkStateHandler::kMatchTypeMobile));
+    button_mobile_->SetVisible(handler->TechnologyAvailable(
+        NetworkStateHandler::kMatchTypeMobile));
+  }
   if (proxy_settings_)
     proxy_settings_->SetEnabled(handler->DefaultNetwork() != NULL);
 
@@ -380,21 +404,24 @@ void NetworkStateListDetailedView::UpdateNetworks(
   network_list_.clear();
   for (NetworkStateList::const_iterator iter = networks.begin();
        iter != networks.end(); ++iter) {
-    const chromeos::NetworkState* network = *iter;
-    if (network->type() == flimflam::kTypeVPN)
-      continue;  // Skip VPNs
-    NetworkInfo* info = new NetworkInfo(network->path());
-    network_list_.push_back(info);
+    const NetworkState* network = *iter;
+    if ((list_type_ == LIST_TYPE_NETWORK &&
+        network->type() != flimflam::kTypeVPN) ||
+        (list_type_ == LIST_TYPE_VPN &&
+         network->type() == flimflam::kTypeVPN)) {
+      NetworkInfo* info = new NetworkInfo(network->path());
+      network_list_.push_back(info);
+    }
   }
 }
 
-void NetworkStateListDetailedView::UpdateNetworkListEntries() {
+void NetworkStateListDetailedView::UpdateNetworkList() {
   NetworkStateHandler* handler = NetworkStateHandler::Get();
 
   // First, update state for all networks
   for (size_t i = 0; i < network_list_.size(); ++i) {
     NetworkInfo* info = network_list_[i];
-    const chromeos::NetworkState* network =
+    const NetworkState* network =
         handler->GetNetworkState(info->service_path);
     if (!network)
       continue;
@@ -512,47 +539,49 @@ bool NetworkStateListDetailedView::UpdateNetworkListEntries(
     }
   }
 
-  // Cellular initializing
-  int status_message_id = tray_network_->GetUninitializedMsg();
-  if (!status_message_id &&
-      handler->TechnologyEnabled(NetworkStateHandler::kMatchTypeMobile) &&
-      !handler->FirstNetworkByType(NetworkStateHandler::kMatchTypeMobile)) {
-    status_message_id = IDS_ASH_STATUS_TRAY_NO_CELLULAR_NETWORKS;
-  }
-  if (status_message_id) {
-    string16 text = rb.GetLocalizedString(status_message_id);
-    if (CreateOrUpdateInfoLabel(index++, text, &no_cellular_networks_view_))
+  if (list_type_ == LIST_TYPE_NETWORK) {
+    // Cellular initializing
+    int status_message_id = network_icon::GetCellularUninitializedMsg();
+    if (!status_message_id &&
+        handler->TechnologyEnabled(NetworkStateHandler::kMatchTypeMobile) &&
+        !handler->FirstNetworkByType(NetworkStateHandler::kMatchTypeMobile)) {
+      status_message_id = IDS_ASH_STATUS_TRAY_NO_CELLULAR_NETWORKS;
+    }
+    if (status_message_id) {
+      string16 text = rb.GetLocalizedString(status_message_id);
+      if (CreateOrUpdateInfoLabel(index++, text, &no_cellular_networks_view_))
+        needs_relayout = true;
+    } else if (no_cellular_networks_view_) {
+      scroll_content()->RemoveChildView(no_cellular_networks_view_);
+      no_cellular_networks_view_ = NULL;
       needs_relayout = true;
-  } else if (no_cellular_networks_view_) {
-    scroll_content()->RemoveChildView(no_cellular_networks_view_);
-    no_cellular_networks_view_ = NULL;
-    needs_relayout = true;
-  }
+    }
 
-  // "Wifi Enabled / Disabled"
-  if (network_list_.empty()) {
-    int message_id = handler->TechnologyEnabled(flimflam::kTypeWifi) ?
-        IDS_ASH_STATUS_TRAY_NETWORK_WIFI_ENABLED :
-        IDS_ASH_STATUS_TRAY_NETWORK_WIFI_DISABLED;
-    string16 text = rb.GetLocalizedString(message_id);
-    if (CreateOrUpdateInfoLabel(index++, text, &no_wifi_networks_view_))
+    // "Wifi Enabled / Disabled"
+    if (network_list_.empty()) {
+      int message_id = handler->TechnologyEnabled(flimflam::kTypeWifi) ?
+          IDS_ASH_STATUS_TRAY_NETWORK_WIFI_ENABLED :
+          IDS_ASH_STATUS_TRAY_NETWORK_WIFI_DISABLED;
+      string16 text = rb.GetLocalizedString(message_id);
+      if (CreateOrUpdateInfoLabel(index++, text, &no_wifi_networks_view_))
+        needs_relayout = true;
+    } else if (no_wifi_networks_view_) {
+      scroll_content()->RemoveChildView(no_wifi_networks_view_);
+      no_wifi_networks_view_ = NULL;
       needs_relayout = true;
-  } else if (no_wifi_networks_view_) {
-    scroll_content()->RemoveChildView(no_wifi_networks_view_);
-    no_wifi_networks_view_ = NULL;
-    needs_relayout = true;
-  }
+    }
 
-  // "Wifi Scanning"
-  if (handler->GetScanningByType(flimflam::kTypeWifi)) {
-    string16 text =
-        rb.GetLocalizedString(IDS_ASH_STATUS_TRAY_WIFI_SCANNING_MESSAGE);
-    if (CreateOrUpdateInfoLabel(index++, text, &scanning_view_))
+    // "Wifi Scanning"
+    if (handler->GetScanningByType(flimflam::kTypeWifi)) {
+      string16 text =
+          rb.GetLocalizedString(IDS_ASH_STATUS_TRAY_WIFI_SCANNING_MESSAGE);
+      if (CreateOrUpdateInfoLabel(index++, text, &scanning_view_))
+        needs_relayout = true;
+    } else if (scanning_view_ != NULL) {
+      scroll_content()->RemoveChildView(scanning_view_);
+      scanning_view_ = NULL;
       needs_relayout = true;
-  } else if (scanning_view_ != NULL) {
-    scroll_content()->RemoveChildView(scanning_view_);
-    scanning_view_ = NULL;
-    needs_relayout = true;
+    }
   }
 
   // Un-highlighted networks
@@ -565,10 +594,20 @@ bool NetworkStateListDetailedView::UpdateNetworkListEntries(
     }
   }
 
+  // No networks or other messages (fallback)
+  if (index == 0) {
+    string16 text = rb.GetLocalizedString(IDS_ASH_STATUS_TRAY_NO_NETWORKS);
+    if (CreateOrUpdateInfoLabel(index++, text, &scanning_view_))
+      needs_relayout = true;
+  }
+
   return needs_relayout;
 }
 
 void NetworkStateListDetailedView::UpdateMobileAccount() {
+  if (list_type_ != LIST_TYPE_NETWORK)
+    return;
+
   view_mobile_account_->SetVisible(false);
   setup_mobile_account_->SetVisible(false);
 
@@ -599,34 +638,43 @@ void NetworkStateListDetailedView::UpdateNetworkExtra() {
   if (login_ == user::LOGGED_IN_LOCKED)
     return;
 
+  View* layout_parent = NULL;  // All these buttons have the same parent.
   NetworkStateHandler* handler = NetworkStateHandler::Get();
-  if (!handler->TechnologyAvailable(flimflam::kTypeWifi)) {
-    turn_on_wifi_->SetVisible(false);
-    other_wifi_->SetVisible(false);
-  } else if (!handler->TechnologyEnabled(flimflam::kTypeWifi)) {
-    turn_on_wifi_->SetVisible(true);
-    other_wifi_->SetVisible(false);
-  } else {
-    turn_on_wifi_->SetVisible(false);
-    other_wifi_->SetVisible(true);
+  if (other_wifi_) {
+    DCHECK(turn_on_wifi_);
+    if (!handler->TechnologyAvailable(flimflam::kTypeWifi)) {
+      turn_on_wifi_->SetVisible(false);
+      other_wifi_->SetVisible(false);
+    } else if (!handler->TechnologyEnabled(flimflam::kTypeWifi)) {
+      turn_on_wifi_->SetVisible(true);
+      other_wifi_->SetVisible(false);
+    } else {
+      turn_on_wifi_->SetVisible(false);
+      other_wifi_->SetVisible(true);
+    }
+    layout_parent = other_wifi_->parent();
   }
 
-  bool show_other_mobile = false;
-  if (handler->TechnologyAvailable(NetworkStateHandler::kMatchTypeMobile)) {
-    const chromeos::DeviceState* device =
-        handler->GetDeviceStateByType(NetworkStateHandler::kMatchTypeMobile);
-    show_other_mobile = (device && device->support_network_scan());
-  }
-  if (show_other_mobile) {
-    other_mobile_->SetVisible(true);
-    other_mobile_->SetEnabled(
-        handler->TechnologyEnabled(NetworkStateHandler::kMatchTypeMobile));
-  } else {
-    other_mobile_->SetVisible(false);
+  if (other_mobile_) {
+    bool show_other_mobile = false;
+    if (handler->TechnologyAvailable(NetworkStateHandler::kMatchTypeMobile)) {
+      const chromeos::DeviceState* device =
+          handler->GetDeviceStateByType(NetworkStateHandler::kMatchTypeMobile);
+      show_other_mobile = (device && device->support_network_scan());
+    }
+    if (show_other_mobile) {
+      other_mobile_->SetVisible(true);
+      other_mobile_->SetEnabled(
+          handler->TechnologyEnabled(NetworkStateHandler::kMatchTypeMobile));
+    } else {
+      other_mobile_->SetVisible(false);
+    }
+    if (!layout_parent)
+      layout_parent = other_wifi_->parent();
   }
 
-  // All these buttons have the same parent.
-  turn_on_wifi_->parent()->Layout();
+  if (layout_parent)
+    layout_parent->Layout();
 }
 
 void NetworkStateListDetailedView::CreateSettingsEntry() {
@@ -665,19 +713,26 @@ views::View* NetworkStateListDetailedView::CreateNetworkInfoView() {
   NetworkStateHandler* handler = NetworkStateHandler::Get();
 
   std::string ip_address("0.0.0.0");
-  const chromeos::NetworkState* network = handler->DefaultNetwork();
+  const NetworkState* network = handler->DefaultNetwork();
   if (network)
     ip_address = network->ip_address();
-  std::string ethernet_address =
-      handler->FormattedHardwareAddressForType(flimflam::kTypeEthernet);
-  std::string wifi_address =
-      handler->FormattedHardwareAddressForType(flimflam::kTypeWifi);
 
   views::View* container = new views::View;
   container->SetLayoutManager(
       new views::BoxLayout(views::BoxLayout::kVertical, 0, 0, 1));
   container->set_border(views::Border::CreateEmptyBorder(0, 5, 0, 5));
 
+  std::string ethernet_address, wifi_address, vpn_address;
+  if (list_type_ == LIST_TYPE_NETWORK) {
+    ethernet_address =
+        handler->FormattedHardwareAddressForType(flimflam::kTypeEthernet);
+    wifi_address =
+        handler->FormattedHardwareAddressForType(flimflam::kTypeWifi);
+  } else if (list_type_ == LIST_TYPE_VPN) {
+    vpn_address =
+        handler->FormattedHardwareAddressForType(flimflam::kTypeVPN);
+  }
+
   // GetNetworkAddresses returns empty strings if no information is available.
   if (!ip_address.empty()) {
     container->AddChildView(CreateInfoBubbleLine(bundle.GetLocalizedString(
@@ -691,6 +746,10 @@ views::View* NetworkStateListDetailedView::CreateNetworkInfoView() {
     container->AddChildView(CreateInfoBubbleLine(bundle.GetLocalizedString(
         IDS_ASH_STATUS_TRAY_WIFI), wifi_address));
   }
+  if (!vpn_address.empty()) {
+    container->AddChildView(CreateInfoBubbleLine(bundle.GetLocalizedString(
+        IDS_ASH_STATUS_TRAY_VPN), vpn_address));
+  }
 
   // Avoid an empty bubble in the unlikely event that there is no network
   // information at all.
@@ -702,6 +761,29 @@ views::View* NetworkStateListDetailedView::CreateNetworkInfoView() {
   return container;
 }
 
+void NetworkStateListDetailedView::ConnectToNetwork(
+    const std::string& service_path) {
+  const NetworkState* network =
+      NetworkStateHandler::Get()->GetNetworkState(service_path);
+  if (!network)
+    return;
+  if (CommandLine::ForCurrentProcess()->HasSwitch(
+          chromeos::switches::kEnableNewNetworkConfigurationHandlers) &&
+      !network->IsConnectedState()) {
+    chromeos::NetworkConfigurationHandler::Get()->Connect(
+        service_path,
+        base::Bind(&base::DoNothing),
+        chromeos::network_handler::ErrorCallback());
+    TrayNetworkStateObserver::AddConnectingNetwork(service_path);
+  } else {
+    // This will show the settings UI for a connected network.
+    // TODO(stevenjb): Change the API to explicitly show network settings.
+    Shell::GetInstance()->system_tray_delegate()->ConnectToNetwork(
+        service_path);
+  }
+}
+
+
 }  // namespace tray
 }  // namespace internal
 }  // namespace ash
diff --git a/ash/system/chromeos/network/network_state_list_detailed_view.h b/ash/system/chromeos/network/network_state_list_detailed_view.h
index f5a6946..212f699 100644
--- a/ash/system/chromeos/network/network_state_list_detailed_view.h
+++ b/ash/system/chromeos/network/network_state_list_detailed_view.h
@@ -26,10 +26,12 @@ class BubbleDelegateView;
 }
 
 namespace ash {
+
+class SystemTrayItem;
+
 namespace internal {
 
 class HoverHighlightView;
-class TrayNetwork;
 class TrayPopupLabelButton;
 
 namespace tray {
@@ -41,7 +43,13 @@ class NetworkStateListDetailedView : public NetworkDetailedView,
                                      public ViewClickListener,
                                      public network_icon::AnimationObserver {
  public:
-  NetworkStateListDetailedView(TrayNetwork* tray_network,
+  enum ListType {
+    LIST_TYPE_NETWORK,
+    LIST_TYPE_VPN
+  };
+
+  NetworkStateListDetailedView(SystemTrayItem* owner,
+                               ListType list_type,
                                user::LoginStatus login);
   virtual ~NetworkStateListDetailedView();
 
@@ -78,7 +86,7 @@ class NetworkStateListDetailedView : public NetworkDetailedView,
   void UpdateHeaderButtons();
 
   void UpdateNetworks(const NetworkStateList& networks);
-  void UpdateNetworkListEntries();
+  void UpdateNetworkList();
   bool CreateOrUpdateInfoLabel(
       int index, const string16& text, views::Label** label);
   bool UpdateNetworkChild(int index, const NetworkInfo* info);
@@ -96,8 +104,11 @@ class NetworkStateListDetailedView : public NetworkDetailedView,
   bool ResetInfoBubble();
   views::View* CreateNetworkInfoView();
 
-  // Typed pointer to the owning tray item.
-  TrayNetwork* tray_network_;
+  // Handle click (connect) action
+  void ConnectToNetwork(const std::string& service_path);
+
+  // Type of list (all networks or vpn)
+  ListType list_type_;
 
   // Track login state.
   user::LoginStatus login_;
@@ -125,6 +136,7 @@ class NetworkStateListDetailedView : public NetworkDetailedView,
   TrayPopupLabelButton* other_wifi_;
   TrayPopupLabelButton* turn_on_wifi_;
   TrayPopupLabelButton* other_mobile_;
+  TrayPopupLabelButton* other_vpn_;
   TrayPopupLabelButton* settings_;
   TrayPopupLabelButton* proxy_settings_;
   views::Label* scanning_view_;
diff --git a/ash/system/chromeos/network/tray_network.cc b/ash/system/chromeos/network/tray_network.cc
index 54a40eb..3dff223 100644
--- a/ash/system/chromeos/network/tray_network.cc
+++ b/ash/system/chromeos/network/tray_network.cc
@@ -10,7 +10,6 @@
 #include "ash/system/chromeos/network/network_list_detailed_view.h"
 #include "ash/system/chromeos/network/network_list_detailed_view_base.h"
 #include "ash/system/chromeos/network/network_state_list_detailed_view.h"
-#include "ash/system/chromeos/network/tray_network_state_observer.h"
 #include "ash/system/tray/system_tray.h"
 #include "ash/system/tray/system_tray_delegate.h"
 #include "ash/system/tray/system_tray_notifier.h"
@@ -20,8 +19,6 @@
 #include "ash/system/tray/tray_notification_view.h"
 #include "base/command_line.h"
 #include "base/utf_string_conversions.h"
-#include "chromeos/chromeos_switches.h"
-#include "chromeos/network/network_configuration_handler.h"
 #include "chromeos/network/network_state.h"
 #include "chromeos/network/network_state_handler.h"
 #include "grit/ash_resources.h"
@@ -407,8 +404,7 @@ TrayNetwork::TrayNetwork(SystemTray* system_tray)
       detailed_(NULL),
       notification_(NULL),
       messages_(new tray::NetworkMessages()),
-      request_wifi_view_(false),
-      uninitialized_msg_(0) {
+      request_wifi_view_(false) {
   if (UseNewNetworkHandlers())
     network_state_observer_.reset(new TrayNetworkStateObserver(this));
   Shell::GetInstance()->system_tray_notifier()->AddNetworkObserver(this);
@@ -445,7 +441,8 @@ views::View* TrayNetwork::CreateDetailedView(user::LoginStatus status) {
     request_wifi_view_ = false;
   } else {
     if (UseNewNetworkHandlers()) {
-      detailed_ = new tray::NetworkStateListDetailedView(this, status);
+      detailed_ = new tray::NetworkStateListDetailedView(
+          this, tray::NetworkStateListDetailedView::LIST_TYPE_NETWORK, status);
     } else {
       detailed_ = new tray::NetworkListDetailedView(
           this, status, IDS_ASH_STATUS_TRAY_NETWORK);
@@ -522,8 +519,7 @@ void TrayNetwork::ClearNetworkMessage(MessageType message_type) {
 }
 
 void TrayNetwork::OnWillToggleWifi() {
-  if (UseNewNetworkHandlers())
-    return;  // Handled in TrayNetworkStateObserver::NetworkManagerChanged()
+  // Triggered by a user action (e.g. keyboard shortcut)
   if (!detailed_ ||
       detailed_->GetViewType() == tray::NetworkDetailedView::WIFI_VIEW) {
     request_wifi_view_ = true;
@@ -531,42 +527,22 @@ void TrayNetwork::OnWillToggleWifi() {
   }
 }
 
-void TrayNetwork::TrayNetworkUpdated() {
+void TrayNetwork::NetworkStateChanged(bool list_changed) {
   if (tray_  && UseNewNetworkHandlers())
     tray_->UpdateNetworkStateHandlerIcon();
   if (default_)
     default_->Update();
-}
-
-void TrayNetwork::NetworkServiceChanged(const chromeos::NetworkState* network) {
-  if (!network->IsConnectingState())
-    connecting_networks_.erase(network->path());
-}
-
-void TrayNetwork::ConnectToNetwork(const std::string& service_path) {
-  DCHECK(UseNewNetworkHandlers());
-  const NetworkState* network =
-      NetworkStateHandler::Get()->GetNetworkState(service_path);
-  if (!network)
-    return;
-  if (CommandLine::ForCurrentProcess()->HasSwitch(
-          chromeos::switches::kEnableNewNetworkConfigurationHandlers) &&
-      !network->IsConnectedState()) {
-    chromeos::NetworkConfigurationHandler::Get()->Connect(
-        service_path,
-        base::Bind(&base::DoNothing),
-        chromeos::network_handler::ErrorCallback());
-    connecting_networks_.insert(service_path);
-  } else {
-    // This will show the settings UI for a connected network.
-    // TODO(stevenjb): Change the API to explicitly show network settings.
-    Shell::GetInstance()->system_tray_delegate()->ConnectToNetwork(
-        service_path);
+  if (detailed_) {
+    if (list_changed)
+      detailed_->NetworkListChanged();
+    else
+      detailed_->ManagerChanged();
   }
 }
 
-bool TrayNetwork::HasConnectingNetwork(const std::string& service_path) {
-  return connecting_networks_.count(service_path) > 0;
+void TrayNetwork::NetworkServiceChanged(const chromeos::NetworkState* network) {
+  if (detailed_)
+    detailed_->NetworkServiceChanged(network);
 }
 
 void TrayNetwork::GetNetworkStateHandlerImageAndLabel(
@@ -587,13 +563,13 @@ void TrayNetwork::GetNetworkStateHandlerImageAndLabel(
   // network, or the connection was user requested, use the connecting
   // network.
   if (connecting_network &&
-      (!network ||
-       HasConnectingNetwork(connecting_network->path()))) {
+      (!network || TrayNetworkStateObserver::HasConnectingNetwork(
+          connecting_network->path()))) {
     network = connecting_network;
   }
   if (!network) {
     // If no connecting network, check for cellular initializing.
-    int uninitialized_msg = GetUninitializedMsg();
+    int uninitialized_msg = network_icon::GetCellularUninitializedMsg();
     if (uninitialized_msg != 0) {
       *image = network_icon::GetImageForConnectingNetwork(
           icon_type, flimflam::kTypeCellular);
@@ -616,29 +592,6 @@ void TrayNetwork::GetNetworkStateHandlerImageAndLabel(
     *label = network_icon::GetLabelForNetwork(network, icon_type);
 }
 
-int TrayNetwork::GetUninitializedMsg() {
-  NetworkStateHandler* handler = NetworkStateHandler::Get();
-  if (handler->TechnologyUninitialized(
-          NetworkStateHandler::kMatchTypeMobile)) {
-    uninitialized_msg_ = IDS_ASH_STATUS_TRAY_INITIALIZING_CELLULAR;
-    uninitialized_state_time_ = base::Time::Now();
-    return uninitialized_msg_;
-  } else if (handler->GetScanningByType(
-      NetworkStateHandler::kMatchTypeMobile)) {
-    uninitialized_msg_ = IDS_ASH_STATUS_TRAY_CELLULAR_SCANNING;
-    uninitialized_state_time_ = base::Time::Now();
-    return uninitialized_msg_;
-  }
-  // There can be a delay between leaving the Initializing state and when
-  // a Cellular device shows up, so keep showing the initializing
-  // animation for a bit to avoid flashing the disconnect icon.
-  const int kInitializingDelaySeconds = 1;
-  base::TimeDelta dtime = base::Time::Now() - uninitialized_state_time_;
-  if (dtime.InSeconds() < kInitializingDelaySeconds)
-    return uninitialized_msg_;
-  return 0;
-}
-
 void TrayNetwork::LinkClicked(MessageType message_type, int link_id) {
   tray::NetworkMessages::MessageMap::const_iterator iter =
       messages()->messages().find(message_type);
diff --git a/ash/system/chromeos/network/tray_network.h b/ash/system/chromeos/network/tray_network.h
index 3105c1f..7736056 100644
--- a/ash/system/chromeos/network/tray_network.h
+++ b/ash/system/chromeos/network/tray_network.h
@@ -9,6 +9,7 @@
 
 #include "ash/system/chromeos/network/network_icon.h"
 #include "ash/system/chromeos/network/network_observer.h"
+#include "ash/system/chromeos/network/tray_network_state_observer.h"
 #include "ash/system/tray/system_tray_item.h"
 #include "base/memory/scoped_ptr.h"
 #include "base/time.h"
@@ -32,7 +33,8 @@ class NetworkTrayView;
 }
 
 class TrayNetwork : public SystemTrayItem,
-                    public NetworkObserver {
+                    public NetworkObserver,
+                    public TrayNetworkStateObserver::Delegate {
  public:
   explicit TrayNetwork(SystemTray* system_tray);
   virtual ~TrayNetwork();
@@ -40,7 +42,7 @@ class TrayNetwork : public SystemTrayItem,
   tray::NetworkDetailedView* detailed() { return detailed_; }
   void set_request_wifi_view(bool b) { request_wifi_view_ = b; }
 
-  // Overridden from SystemTrayItem.
+  // SystemTrayItem
   virtual views::View* CreateTrayView(user::LoginStatus status) OVERRIDE;
   virtual views::View* CreateDefaultView(user::LoginStatus status) OVERRIDE;
   virtual views::View* CreateDetailedView(user::LoginStatus status) OVERRIDE;
@@ -54,7 +56,7 @@ class TrayNetwork : public SystemTrayItem,
   virtual void UpdateAfterShelfAlignmentChange(
       ShelfAlignment alignment) OVERRIDE;
 
-  // Overridden from NetworkObserver.
+  // NetworkObserver
   virtual void OnNetworkRefresh(const NetworkIconInfo& info) OVERRIDE;
   virtual void SetNetworkMessage(NetworkTrayDelegate* delegate,
                                  MessageType message_type,
@@ -65,27 +67,16 @@ class TrayNetwork : public SystemTrayItem,
   virtual void ClearNetworkMessage(MessageType message_type) OVERRIDE;
   virtual void OnWillToggleWifi() OVERRIDE;
 
-  // Called when the network for the tray icon may have been updated.
-  void TrayNetworkUpdated();
-
-  // Called when the properties for |network| may have been updated.
-  void NetworkServiceChanged(const chromeos::NetworkState* network);
-
-  // Request a network connection (called from detailed view).
-  void ConnectToNetwork(const std::string& service_path);
-
-  // Returns true if a user initiated connection to |network| occured.
-  bool HasConnectingNetwork(const std::string& service_path);
+  // TrayNetworkStateObserver::Delegate
+  virtual void NetworkStateChanged(bool list_changed) OVERRIDE;
+  virtual void NetworkServiceChanged(
+      const chromeos::NetworkState* network) OVERRIDE;
 
   // Gets the correct icon and label for |icon_type|.
   void GetNetworkStateHandlerImageAndLabel(network_icon::IconType icon_type,
                                            gfx::ImageSkia* image,
                                            string16* label);
 
-  // Updates and returns the appropriate message id if a network technology
-  // (i.e. cellular) is uninitialized.
-  int GetUninitializedMsg();
-
 private:
   friend class tray::NetworkMessageView;
   friend class tray::NetworkNotificationView;
@@ -101,9 +92,6 @@ private:
   scoped_ptr<tray::NetworkMessages> messages_;
   bool request_wifi_view_;
   scoped_ptr<TrayNetworkStateObserver> network_state_observer_;
-  std::set<std::string> connecting_networks_;
-  base::Time uninitialized_state_time_;
-  int uninitialized_msg_;
 
   DISALLOW_COPY_AND_ASSIGN(TrayNetwork);
 };
diff --git a/ash/system/chromeos/network/tray_network_state_observer.cc b/ash/system/chromeos/network/tray_network_state_observer.cc
index a33eeaa..30b6ca7 100644
--- a/ash/system/chromeos/network/tray_network_state_observer.cc
+++ b/ash/system/chromeos/network/tray_network_state_observer.cc
@@ -4,18 +4,27 @@
 
 #include "ash/system/chromeos/network/tray_network_state_observer.h"
 
-#include "ash/system/chromeos/network/network_detailed_view.h"
-#include "ash/system/chromeos/network/tray_network.h"
-#include "ash/system/tray/tray_constants.h"
+#include <set>
+#include <string>
+
+#include "chromeos/network/network_state.h"
 #include "chromeos/network/network_state_handler.h"
 #include "third_party/cros_system_api/dbus/service_constants.h"
 
+namespace {
+
+std::set<std::string>& GetConnectingNetworks() {
+  static std::set<std::string> s_connecting_networks_;
+  return s_connecting_networks_;
+}
+
+}
+
 namespace ash {
 namespace internal {
 
-TrayNetworkStateObserver::TrayNetworkStateObserver(TrayNetwork* tray)
-    : tray_(tray),
-      wifi_state_(WIFI_UNKNOWN) {
+TrayNetworkStateObserver::TrayNetworkStateObserver(Delegate* delegate)
+    : delegate_(delegate) {
   chromeos::NetworkStateHandler::Get()->AddObserver(this);
 }
 
@@ -24,46 +33,39 @@ TrayNetworkStateObserver::~TrayNetworkStateObserver() {
 }
 
 void TrayNetworkStateObserver::NetworkManagerChanged() {
-  tray::NetworkDetailedView* detailed = tray_->detailed();
-  bool wifi_enabled = chromeos::NetworkStateHandler::Get()->
-      TechnologyEnabled(flimflam::kTypeWifi);
-  WifiState wifi_state = wifi_enabled ? WIFI_ENABLED : WIFI_DISABLED;
-  if ((wifi_state_ != WIFI_UNKNOWN && wifi_state_ != wifi_state) &&
-      (!detailed ||
-       detailed->GetViewType() == tray::NetworkDetailedView::WIFI_VIEW)) {
-    tray_->set_request_wifi_view(true);
-    tray_->PopupDetailedView(kTrayPopupAutoCloseDelayForTextInSeconds, false);
-  }
-  wifi_state_ = wifi_state;
-  if (detailed)
-    detailed->ManagerChanged();
+  delegate_->NetworkStateChanged(false);
 }
 
 void TrayNetworkStateObserver::NetworkListChanged() {
-  tray::NetworkDetailedView* detailed = tray_->detailed();
-  if (detailed)
-    detailed->NetworkListChanged();
-  tray_->TrayNetworkUpdated();
+  delegate_->NetworkStateChanged(true);
 }
 
 void TrayNetworkStateObserver::DeviceListChanged() {
-  tray::NetworkDetailedView* detailed = tray_->detailed();
-  if (detailed)
-    detailed->ManagerChanged();
-  tray_->TrayNetworkUpdated();
+  delegate_->NetworkStateChanged(false);
 }
 
 void TrayNetworkStateObserver::DefaultNetworkChanged(
     const chromeos::NetworkState* network) {
-  tray_->TrayNetworkUpdated();
+  delegate_->NetworkStateChanged(true);
 }
 
 void TrayNetworkStateObserver::NetworkPropertiesUpdated(
     const chromeos::NetworkState* network) {
-  tray_->NetworkServiceChanged(network);
-  tray::NetworkDetailedView* detailed = tray_->detailed();
-  if (detailed)
-    detailed->NetworkServiceChanged(network);
+  if (!network->IsConnectingState())
+    GetConnectingNetworks().erase(network->path());
+  delegate_->NetworkServiceChanged(network);
+}
+
+// static
+void TrayNetworkStateObserver::AddConnectingNetwork(
+    const std::string& service_path) {
+  GetConnectingNetworks().insert(service_path);
+}
+
+// static
+bool TrayNetworkStateObserver::HasConnectingNetwork(
+    const std::string& service_path) {
+  return GetConnectingNetworks().count(service_path) > 0;
 }
 
 }  // namespace ash
diff --git a/ash/system/chromeos/network/tray_network_state_observer.h b/ash/system/chromeos/network/tray_network_state_observer.h
index 94ea75f..4a61dfd 100644
--- a/ash/system/chromeos/network/tray_network_state_observer.h
+++ b/ash/system/chromeos/network/tray_network_state_observer.h
@@ -13,17 +13,23 @@
 namespace ash {
 namespace internal {
 
-class TrayNetwork;
-
 class TrayNetworkStateObserver : public chromeos::NetworkStateHandlerObserver {
  public:
-  enum WifiState {
-    WIFI_DISABLED,
-    WIFI_ENABLED,
-    WIFI_UNKNOWN,
+  class Delegate {
+   public:
+    // Called when the network state may have changed. If |list_changed| is
+    // true then the list of networks may have changed.
+    virtual void NetworkStateChanged(bool list_changed) = 0;
+
+    // Called when the properties for |network| may have been updated.
+    virtual void NetworkServiceChanged(
+        const chromeos::NetworkState* network) = 0;
+
+   protected:
+    virtual ~Delegate() {}
   };
 
-  explicit TrayNetworkStateObserver(TrayNetwork* tray);
+  explicit TrayNetworkStateObserver(Delegate* delegate);
 
   virtual ~TrayNetworkStateObserver();
 
@@ -36,9 +42,14 @@ class TrayNetworkStateObserver : public chromeos::NetworkStateHandlerObserver {
   virtual void NetworkPropertiesUpdated(
       const chromeos::NetworkState* network) OVERRIDE;
 
+  // Keep track of user initiated connecting networks
+  static void AddConnectingNetwork(const std::string& service_path);
+
+  // Returns true if a user initiated connection to |network| occured
+  static bool HasConnectingNetwork(const std::string& service_path);
+
  private:
-  TrayNetwork* tray_;
-  WifiState wifi_state_;  // cache wifi enabled state
+  Delegate* delegate_;
 
   DISALLOW_COPY_AND_ASSIGN(TrayNetworkStateObserver);
 };
diff --git a/ash/system/chromeos/network/tray_vpn.cc b/ash/system/chromeos/network/tray_vpn.cc
index f9f541d..7a6dace 100644
--- a/ash/system/chromeos/network/tray_vpn.cc
+++ b/ash/system/chromeos/network/tray_vpn.cc
@@ -4,46 +4,116 @@
 
 #include "ash/system/chromeos/network/tray_vpn.h"
 
+#include "ash/ash_switches.h"
 #include "ash/shell.h"
+#include "ash/system/chromeos/network/network_icon_animation.h"
 #include "ash/system/chromeos/network/network_list_detailed_view_base.h"
+#include "ash/system/chromeos/network/network_state_list_detailed_view.h"
 #include "ash/system/tray/system_tray.h"
 #include "ash/system/tray/system_tray_delegate.h"
 #include "ash/system/tray/system_tray_notifier.h"
 #include "ash/system/tray/tray_constants.h"
 #include "ash/system/tray/tray_item_more.h"
+#include "base/command_line.h"
+#include "chromeos/network/network_state.h"
+#include "chromeos/network/network_state_handler.h"
 #include "grit/ash_strings.h"
+#include "third_party/cros_system_api/dbus/service_constants.h"
+#include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
 
+namespace {
+
+bool UseNewNetworkHandlers() {
+  return CommandLine::ForCurrentProcess()->HasSwitch(
+      ash::switches::kAshEnableNewNetworkStatusArea);
+}
+
+}
+
+using chromeos::NetworkState;
+using chromeos::NetworkStateHandler;
+
 namespace ash {
 namespace internal {
 
 namespace tray {
 
-class VpnDefaultView : public TrayItemMore {
+class VpnDefaultView : public TrayItemMore,
+                       public network_icon::AnimationObserver {
  public:
   VpnDefaultView(SystemTrayItem* owner, bool show_more)
       : TrayItemMore(owner, show_more) {
     Update();
+    if (UseNewNetworkHandlers())
+      network_icon::NetworkIconAnimation::GetInstance()->AddObserver(this);
   }
 
-  virtual ~VpnDefaultView() {}
+  virtual ~VpnDefaultView() {
+    if (UseNewNetworkHandlers())
+      network_icon::NetworkIconAnimation::GetInstance()->RemoveObserver(this);
+  }
 
   static bool ShouldShow() {
     // Do not show VPN line in uber tray bubble if VPN is not configured.
-    std::vector<NetworkIconInfo> list;
-    Shell::GetInstance()->system_tray_delegate()->GetVirtualNetworks(&list);
-    return list.size() != 0;
+    if (UseNewNetworkHandlers()) {
+      NetworkStateHandler* handler = NetworkStateHandler::Get();
+      const NetworkState* vpn = handler->FirstNetworkByType(
+          flimflam::kTypeVPN);
+      return vpn != NULL;
+    } else {
+      std::vector<NetworkIconInfo> list;
+      Shell::GetInstance()->system_tray_delegate()->GetVirtualNetworks(&list);
+      return list.size() != 0;
+    }
   }
 
   void Update() {
-    NetworkIconInfo info;
-    Shell::GetInstance()->system_tray_delegate()->GetVirtualNetworkIcon(&info);
-    SetImage(&info.image);
-    SetLabel(info.description);
-    SetAccessibleName(info.description);
+    if (UseNewNetworkHandlers()) {
+      gfx::ImageSkia image;
+      string16 label;
+      GetNetworkStateHandlerImageAndLabel(&image, &label);
+      SetImage(&image);
+      SetLabel(label);
+      SetAccessibleName(label);
+    } else {
+      NetworkIconInfo info;
+      Shell::GetInstance()->system_tray_delegate()->
+          GetVirtualNetworkIcon(&info);
+      SetImage(&info.image);
+      SetLabel(info.description);
+      SetAccessibleName(info.description);
+    }
+  }
+
+  // network_icon::AnimationObserver
+  virtual void NetworkIconChanged() OVERRIDE {
+    Update();
   }
 
  private:
+  void GetNetworkStateHandlerImageAndLabel(gfx::ImageSkia* image,
+                                           string16* label) {
+    NetworkStateHandler* handler = NetworkStateHandler::Get();
+    const NetworkState* vpn = handler->FirstNetworkByType(
+        flimflam::kTypeVPN);
+    if (!vpn) {
+      *image = network_icon::GetImageForDisconnectedNetwork(
+          network_icon::ICON_TYPE_DEFAULT_VIEW, flimflam::kTypeVPN);
+      if (label) {
+        *label = l10n_util::GetStringUTF16(
+            IDS_ASH_STATUS_TRAY_NETWORK_NOT_CONNECTED);
+      }
+      return;
+    }
+    *image = network_icon::GetImageForNetwork(
+        vpn, network_icon::ICON_TYPE_DEFAULT_VIEW);
+    if (label) {
+      *label = network_icon::GetLabelForNetwork(
+          vpn, network_icon::ICON_TYPE_DEFAULT_VIEW);
+    }
+  }
+
   DISALLOW_COPY_AND_ASSIGN(VpnDefaultView);
 };
 
@@ -151,6 +221,8 @@ TrayVPN::TrayVPN(SystemTray* system_tray)
     : SystemTrayItem(system_tray),
       default_(NULL),
       detailed_(NULL) {
+  if (UseNewNetworkHandlers())
+    network_state_observer_.reset(new TrayNetworkStateObserver(this));
   Shell::GetInstance()->system_tray_notifier()->AddVpnObserver(this);
 }
 
@@ -176,8 +248,14 @@ views::View* TrayVPN::CreateDefaultView(user::LoginStatus status) {
 
 views::View* TrayVPN::CreateDetailedView(user::LoginStatus status) {
   CHECK(detailed_ == NULL);
-  detailed_ = new tray::VpnListDetailedView(
-      this, status, IDS_ASH_STATUS_TRAY_VPN);
+
+  if (UseNewNetworkHandlers()) {
+    detailed_ = new tray::NetworkStateListDetailedView(
+        this, tray::NetworkStateListDetailedView::LIST_TYPE_VPN, status);
+  } else {
+    detailed_ = new tray::VpnListDetailedView(
+        this, status, IDS_ASH_STATUS_TRAY_VPN);
+  }
   detailed_->Init();
   return detailed_;
 }
@@ -235,5 +313,21 @@ void TrayVPN::ClearNetworkMessage(MessageType message_type) {
 void TrayVPN::OnWillToggleWifi() {
 }
 
+void TrayVPN::NetworkStateChanged(bool list_changed) {
+  if (default_)
+    default_->Update();
+  if (detailed_) {
+    if (list_changed)
+      detailed_->NetworkListChanged();
+    else
+      detailed_->ManagerChanged();
+  }
+}
+
+void TrayVPN::NetworkServiceChanged(const chromeos::NetworkState* network) {
+  if (detailed_)
+    detailed_->NetworkServiceChanged(network);
+}
+
 }  // namespace internal
 }  // namespace ash
diff --git a/ash/system/chromeos/network/tray_vpn.h b/ash/system/chromeos/network/tray_vpn.h
index 9655da0..446f693 100644
--- a/ash/system/chromeos/network/tray_vpn.h
+++ b/ash/system/chromeos/network/tray_vpn.h
@@ -6,12 +6,15 @@
 #define ASH_SYSTEM_CHROMEOS_NETWORK_TRAY_VPN_H
 
 #include "ash/system/chromeos/network/network_observer.h"
+#include "ash/system/chromeos/network/tray_network_state_observer.h"
 #include "ash/system/tray/system_tray_item.h"
 #include "base/memory/scoped_ptr.h"
 
 namespace ash {
 namespace internal {
 
+class TrayNetworkStateObserver;
+
 namespace tray {
 class NetworkDetailedView;
 class VpnDefaultView;
@@ -19,12 +22,13 @@ class VpnDetailedView;
 }
 
 class TrayVPN : public SystemTrayItem,
-                public NetworkObserver {
+                public NetworkObserver,
+                public TrayNetworkStateObserver::Delegate {
  public:
   explicit TrayVPN(SystemTray* system_tray);
   virtual ~TrayVPN();
 
-  // Overridden from SystemTrayItem.
+  // SystemTrayItem
   virtual views::View* CreateTrayView(user::LoginStatus status) OVERRIDE;
   virtual views::View* CreateDefaultView(user::LoginStatus status) OVERRIDE;
   virtual views::View* CreateDetailedView(user::LoginStatus status) OVERRIDE;
@@ -38,7 +42,7 @@ class TrayVPN : public SystemTrayItem,
   virtual void UpdateAfterShelfAlignmentChange(
       ShelfAlignment alignment) OVERRIDE;
 
-  // Overridden from NetworkObserver.
+  // NetworkObserver
   virtual void OnNetworkRefresh(const NetworkIconInfo& info) OVERRIDE;
   virtual void SetNetworkMessage(NetworkTrayDelegate* delegate,
                                  MessageType message_type,
@@ -49,9 +53,15 @@ class TrayVPN : public SystemTrayItem,
   virtual void ClearNetworkMessage(MessageType message_type) OVERRIDE;
   virtual void OnWillToggleWifi() OVERRIDE;
 
+  // TrayNetworkStateObserver::Delegate
+  virtual void NetworkStateChanged(bool list_changed) OVERRIDE;
+  virtual void NetworkServiceChanged(
+      const chromeos::NetworkState* network) OVERRIDE;
+
  private:
   tray::VpnDefaultView* default_;
   tray::NetworkDetailedView* detailed_;
+  scoped_ptr<TrayNetworkStateObserver> network_state_observer_;
 
   DISALLOW_COPY_AND_ASSIGN(TrayVPN);
 };