[ash-md] Adds VPN network status indicators in system menu

ash/common/system/chromeos/network/vpn_list_view.cc

Index: ash/common/system/chromeos/network/vpn_list_view.cc
diff --git a/ash/common/system/chromeos/network/vpn_list_view.cc b/ash/common/system/chromeos/network/vpn_list_view.cc
index a66d03cac78fead0afe45be525d9334ba1316100..2b5ecab80fed3f75d55e20f4e102a67cdbc8be5a 100644
--- a/ash/common/system/chromeos/network/vpn_list_view.cc
+++ b/ash/common/system/chromeos/network/vpn_list_view.cc
@@ -18,6 +18,7 @@
 #include "ash/common/system/tray/hover_highlight_view.h"
 #include "ash/common/system/tray/system_menu_button.h"
 #include "ash/common/system/tray/system_tray_controller.h"
+#include "ash/common/system/tray/throbber_view.h"
 #include "ash/common/system/tray/tray_constants.h"
 #include "ash/common/system/tray/tray_popup_label_button.h"
 #include "ash/common/system/tray/tray_popup_utils.h"
@@ -193,6 +194,10 @@ class VPNListNetworkEntry : public VPNListEntryBase,
   };
 
   void UpdateFromNetworkState(const chromeos::NetworkState* network);
+  void SetupConnectedItemMd(const base::string16& text,
+                            const gfx::ImageSkia& image);
+  void SetupConnectingItemMd(const base::string16& text,
+                             const gfx::ImageSkia& image);
 
   const std::string service_path_;
 
@@ -282,16 +287,22 @@ void VPNListNetworkEntry::UpdateFromNetworkState(
     // the network list in the UI has not been updated yet.
     return;
   }
-
   RemoveAllChildViews(true);
   disconnect_button_ = nullptr;
 
-  AddIconAndLabel(
-      network_icon::GetImageForNetwork(network, network_icon::ICON_TYPE_LIST),
-      network_icon::GetLabelForNetwork(network, network_icon::ICON_TYPE_LIST),
-      IsConnectedOrConnecting(network));
-  if (IsConnectedOrConnecting(network)) {
-    if (UseMd()) {
+  gfx::ImageSkia image =
+      network_icon::GetImageForNetwork(network, network_icon::ICON_TYPE_LIST);
+  base::string16 label =
+      network_icon::GetLabelForNetwork(network, network_icon::ICON_TYPE_LIST);
+  if (UseMd()) {
+    if (network->IsConnectedState())
+      SetupConnectedItemMd(label, image);
+    else if (network->IsConnectingState())
+      SetupConnectingItemMd(label, image);
+    else
+      AddIconAndLabel(image, label, IsConnectedOrConnecting(network));

[tdanderson, 2016/12/14 00:24:23]

nit: you can just pass in false for the third argument here since MD never
highlights any rows.

[varkha, 2016/12/14 17:01:47]

Done.

+
+    if (network->IsConnectedState()) {
       disconnect_button_ = TrayPopupUtils::CreateTrayPopupButton(
           this, l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_VPN_DISCONNECT));
       tri_view()->AddView(TriView::Container::END, disconnect_button_);
@@ -299,17 +310,16 @@ void VPNListNetworkEntry::UpdateFromNetworkState(
       tri_view()->SetContainerBorder(
           TriView::Container::END,
           views::CreateEmptyBorder(0, 0, 0, kTrayPopupButtonEndMargin));
-    } else {
+    }
+  } else {
+    AddIconAndLabel(image, label, IsConnectedOrConnecting(network));
+    if (IsConnectedOrConnecting(network)) {
       disconnect_button_ = new DisconnectButton(this);
       AddChildView(disconnect_button_);
       SetBorder(views::CreateEmptyBorder(0, kTrayPopupPaddingHorizontal, 0, 3));
-    }
-  } else {
-    if (!UseMd())
+    } else {
       SetBorder(views::CreateEmptyBorder(0, kTrayPopupPaddingHorizontal, 0, 0));
-  }
-
-  if (!UseMd()) {
+    }
     // The icon and the disconnect button are always set to their preferred
     // size. All remaining space is used for the network name.
     views::BoxLayout* layout = new views::BoxLayout(
@@ -321,6 +331,28 @@ void VPNListNetworkEntry::UpdateFromNetworkState(
   Layout();
 }
 
+// TODO(varkha): Consolidate with a similar method in tray_bluetooth.cc.
+void VPNListNetworkEntry::SetupConnectedItemMd(const base::string16& text,
+                                               const gfx::ImageSkia& image) {
+  AddIconAndLabels(
+      image, text,
+      l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_NETWORK_STATUS_CONNECTED));
+  TrayPopupItemStyle style(TrayPopupItemStyle::FontStyle::CAPTION);
+  style.set_color_style(TrayPopupItemStyle::ColorStyle::CONNECTED);
+  style.SetupLabel(sub_text_label());

[tdanderson, 2016/12/14 00:24:23]

Wouldn't you also need to set the "connecting..." label to have a CAPTION style,
too? If so then we should probably be doing the same thing in the Bluetooth
version of this file too (in a separate CL though).

[varkha, 2016/12/14 17:01:47]

I think code here does that, no?
https://cs.chromium.org/chromium/src/ash/common/system/tray/hover_highlight_v...

+}
+
+// TODO(varkha): Consolidate with a similar method in tray_bluetooth.cc.
+void VPNListNetworkEntry::SetupConnectingItemMd(const base::string16& text,
+                                                const gfx::ImageSkia& image) {
+  AddIconAndLabels(
+      image, text,
+      l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_NETWORK_STATUS_CONNECTING));
+  ThrobberView* throbber = new ThrobberView;
+  throbber->Start();
+  AddRightView(throbber);
+}
+
 }  // namespace
 
 VPNListView::VPNListView(NetworkListDelegate* delegate) : delegate_(delegate) {