[CrOS Tether] Display an X next to the cellular icon when disconnected.

This CL updates the mobile data section of network settings so that when
a mobile network is not connected, an X is displayed as part of the icon
to indicate clearly to users that the network is not connected. Without
this icon, some users were confused and thought that they were connected
to a mobile network when they actually were not.

Bug: 764107, 672263
Change-Id: If1e10e838bffd5ab37cd9909fd02f448fefa3956
Reviewed-on: https://chromium-review.googlesource.com/693420
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: James Cook <jamescook@chromium.org>
Cr-Commit-Position: refs/heads/master@{#506272}

ash/resources/vector_icons/BUILD.gn

@@ -62,6 +62,8 @@ aggregate_vector_icons("ash_vector_icons") {
     "network_badge_vpn.icon",
     "network_ethernet.1x.icon",
     "network_ethernet.icon",
+    "network_mobile_not_connected_x.1x.icon",
+    "network_mobile_not_connected_x.icon",
     "network_vpn.1x.icon",
     "network_vpn.icon",
     "notification_accessibility.icon",

ash/resources/vector_icons/network_mobile_not_connected_x.1x.icon

@@ -0,0 +1,19 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+CANVAS_DIMENSIONS, 24,
+MOVE_TO, 9.5f, 3.21f,
+LINE_TO, 8.8f, 2.5f,
+LINE_TO, 6, 5.3f,
+LINE_TO, 3.21f, 2.5f,
+R_LINE_TO, -0.7f, 0.71f,
+LINE_TO, 5.3f, 6,
+LINE_TO, 2.5f, 8.8f,
+R_LINE_TO, 0.71f, 0.71f,
+LINE_TO, 6, 6.71f,
+LINE_TO, 8.8f, 9.5f,
+R_LINE_TO, 0.71f, -0.7f,
+LINE_TO, 6.71f, 6,
+CLOSE,
+END

ash/resources/vector_icons/network_mobile_not_connected_x.icon

@@ -0,0 +1,19 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+CANVAS_DIMENSIONS, 48,
+MOVE_TO, 19.2f, 6.25f,
+LINE_TO, 17.75f, 4.8f,
+LINE_TO, 12, 10.55f,
+LINE_TO, 6.25f, 4.8f,
+LINE_TO, 4.8f, 6.25f,
+LINE_TO, 10.55f, 12,
+LINE_TO, 4.8f, 17.75f,
+R_LINE_TO, 1.45f, 1.45f,
+LINE_TO, 12, 13.45f,
+R_LINE_TO, 5.75f, 5.75f,
+R_LINE_TO, 1.45f, -1.45f,
+LINE_TO, 13.45f, 12,
+CLOSE,
+END

ash/system/network/network_list.cc

@@ -52,6 +52,7 @@
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/font.h"
 #include "ui/gfx/image/image_skia.h"
+#include "ui/gfx/image/image_skia_operations.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/gfx/text_constants.h"
 #include "ui/views/background.h"
@@ -76,6 +77,8 @@ namespace tray {
 namespace {
 
 const int64_t kBluetoothTimeoutDelaySeconds = 2;
+const int kMobileNetworkBatteryIconSize = 14;
+const int kPowerStatusPaddingRight = 10;
 
 bool IsProhibitedByPolicy(const chromeos::NetworkState* network) {
   if (!NetworkTypePattern::WiFi().MatchesType(network->type()))
@@ -703,7 +706,19 @@ bool NetworkListView::ShouldMobileDataSectionBeShown() {
 void NetworkListView::UpdateViewForNetwork(HoverHighlightView* view,
                                            const NetworkInfo& info) {
   view->Reset();
-  view->AddIconAndLabel(info.image, info.label);
+  gfx::ImageSkia network_image;
+  if (info.type == NetworkInfo::Type::MOBILE &&
+      (!info.connected && !info.connecting)) {
+    // Mobile icons which are not connecting or connected should display a small
+    // "X" icon superimposed so that it is clear that they are disconnected.
+    network_image = gfx::ImageSkiaOperations::CreateSuperimposedImage(
+        info.image, gfx::CreateVectorIcon(kNetworkMobileNotConnectedXIcon,
+                                          info.image.height(),
+                                          kMobileNotConnectedXIconColor));
+  } else {
+    network_image = info.image;
+  }
+  view->AddIconAndLabel(network_image, info.label);
   if (info.connected)
     SetupConnectedScrollListItem(view);
   else if (info.connecting)
@@ -714,7 +729,10 @@ void NetworkListView::UpdateViewForNetwork(HoverHighlightView* view,
   // that require it (e.g. Tether, controlled by extension).
   views::View* power_icon = CreatePowerStatusView(info);
   if (power_icon) {
-    view->AddRightView(power_icon);
+    view->AddRightView(
+        power_icon, views::CreateEmptyBorder(
+                        gfx::Insets(0 /* top */, 0 /* left */, 0 /* bottom */,
+                                    kPowerStatusPaddingRight)));
   } else {
     views::View* controlled_icon = CreateControlledByExtensionView(info);
     if (controlled_icon)
@@ -740,8 +758,9 @@ views::View* NetworkListView::CreatePowerStatusView(const NetworkInfo& info) {
   views::ImageView* icon = TrayPopupUtils::CreateMoreImageView();
   PowerStatus::BatteryImageInfo icon_info;
   icon_info.charge_percent = network->battery_percentage();
-  icon->SetImage(PowerStatus::GetBatteryImage(
-      icon_info, kMenuIconSize, kMenuIconColorDisabled, kMenuIconColor));
+  icon->SetImage(
+      PowerStatus::GetBatteryImage(icon_info, kMobileNetworkBatteryIconSize,
+                                   kMenuIconColorDisabled, kMenuIconColor));
 
   // Show the numeric battery percentage on hover.
   icon->SetTooltipText(base::FormatPercent(network->battery_percentage()));

ash/system/tray/hover_highlight_view.cc

@@ -38,14 +38,18 @@ void HoverHighlightView::AddRightIcon(const gfx::ImageSkia& image,
   AddRightView(right_icon);
 }
 
-void HoverHighlightView::AddRightView(views::View* view) {
+void HoverHighlightView::AddRightView(views::View* view,
+                                      std::unique_ptr<views::Border> border) {
   DCHECK(is_populated_);
   DCHECK(!right_view_);
 
   // When a right view is added, extra padding on the CENTER container should be
   // removed.
   tri_view_->SetContainerBorder(TriView::Container::CENTER, nullptr);
 
+  if (border)
+    tri_view_->SetContainerBorder(TriView::Container::END, std::move(border));
+
   right_view_ = view;
   right_view_->SetEnabled(enabled());
   tri_view_->AddView(TriView::Container::END, right_view_);

ash/system/tray/hover_highlight_view.h

@@ -5,13 +5,16 @@
 #ifndef ASH_SYSTEM_TRAY_HOVER_HIGHLIGHT_VIEW_H_
 #define ASH_SYSTEM_TRAY_HOVER_HIGHLIGHT_VIEW_H_
 
+#include <memory>
+
 #include "ash/system/tray/actionable_view.h"
 #include "ash/system/tray/tray_popup_item_style.h"
 #include "base/macros.h"
 #include "ui/gfx/font.h"
 #include "ui/gfx/text_constants.h"
 
 namespace views {
+class Border;
 class ImageView;
 class Label;
 }
@@ -64,7 +67,8 @@ class HoverHighlightView : public ActionableView {
   void AddRightIcon(const gfx::ImageSkia& image, int icon_size);
 
   // Adds an optional right view to an already populated view.
-  void AddRightView(views::View* view);
+  void AddRightView(views::View* view,
+                    std::unique_ptr<views::Border> border = nullptr);
 
   // Hides or shows the right view for an already populated view.
   void SetRightViewVisible(bool visible);

ash/system/tray/tray_constants.cc

@@ -70,6 +70,8 @@ const SkColor kHeaderBackgroundColor = SkColorSetRGB(0xf5, 0xf5, 0xf5);
 const SkColor kHeaderTextColorNormal = SkColorSetARGB(0x7f, 0, 0, 0);
 const SkColor kHeaderTextColorHover = SkColorSetARGB(0xd3, 0, 0, 0);
 
+const SkColor kMobileNotConnectedXIconColor = SkColorSetRGB(0xb2, 0xb2, 0xb2);
+
 const int kTrayPopupMinWidth = 300;
 const int kTrayPopupMaxWidth = 500;
 const int kNotificationIconWidth = 40;

ash/system/tray/tray_constants.h

@@ -89,6 +89,8 @@ extern const SkColor kHeaderBackgroundColor;
 extern const SkColor kHeaderTextColorNormal;
 extern const SkColor kHeaderTextColorHover;
 
+extern const SkColor kMobileNotConnectedXIconColor;
+
 extern const int kTrayPopupMinWidth;
 extern const int kTrayPopupMaxWidth;
 extern const int kNotificationIconWidth;