From f566a4c3f0c84092f760fca4b9bc492b1fe3c5bb Mon Sep 17 00:00:00 2001 From: Kyle Horimoto Date: Wed, 4 Oct 2017 01:56:10 +0000 Subject: [PATCH] [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 Reviewed-by: James Cook Cr-Commit-Position: refs/heads/master@{#506272} --- ash/resources/vector_icons/BUILD.gn | 2 ++ .../network_mobile_not_connected_x.1x.icon | 19 +++++++++++++ .../network_mobile_not_connected_x.icon | 19 +++++++++++++ ash/system/network/network_list.cc | 27 ++++++++++++++++--- ash/system/tray/hover_highlight_view.cc | 6 ++++- ash/system/tray/hover_highlight_view.h | 6 ++++- ash/system/tray/tray_constants.cc | 2 ++ ash/system/tray/tray_constants.h | 2 ++ 8 files changed, 77 insertions(+), 6 deletions(-) create mode 100644 ash/resources/vector_icons/network_mobile_not_connected_x.1x.icon create mode 100644 ash/resources/vector_icons/network_mobile_not_connected_x.icon diff --git a/ash/resources/vector_icons/BUILD.gn b/ash/resources/vector_icons/BUILD.gn index 95971f786a5b51..cf6d3c8800f2d7 100644 --- a/ash/resources/vector_icons/BUILD.gn +++ b/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", diff --git a/ash/resources/vector_icons/network_mobile_not_connected_x.1x.icon b/ash/resources/vector_icons/network_mobile_not_connected_x.1x.icon new file mode 100644 index 00000000000000..cfd01f5020900f --- /dev/null +++ b/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 diff --git a/ash/resources/vector_icons/network_mobile_not_connected_x.icon b/ash/resources/vector_icons/network_mobile_not_connected_x.icon new file mode 100644 index 00000000000000..5b3dc345323f1b --- /dev/null +++ b/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 diff --git a/ash/system/network/network_list.cc b/ash/system/network/network_list.cc index 6531f5786761b9..8f3deadd04e8fd 100644 --- a/ash/system/network/network_list.cc +++ b/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())); diff --git a/ash/system/tray/hover_highlight_view.cc b/ash/system/tray/hover_highlight_view.cc index 7f7da58572f54f..5a2901538c0759 100644 --- a/ash/system/tray/hover_highlight_view.cc +++ b/ash/system/tray/hover_highlight_view.cc @@ -38,7 +38,8 @@ 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 border) { DCHECK(is_populated_); DCHECK(!right_view_); @@ -46,6 +47,9 @@ void HoverHighlightView::AddRightView(views::View* view) { // 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_); diff --git a/ash/system/tray/hover_highlight_view.h b/ash/system/tray/hover_highlight_view.h index 1602cad3dfb89d..c797a4f3946cd4 100644 --- a/ash/system/tray/hover_highlight_view.h +++ b/ash/system/tray/hover_highlight_view.h @@ -5,6 +5,8 @@ #ifndef ASH_SYSTEM_TRAY_HOVER_HIGHLIGHT_VIEW_H_ #define ASH_SYSTEM_TRAY_HOVER_HIGHLIGHT_VIEW_H_ +#include + #include "ash/system/tray/actionable_view.h" #include "ash/system/tray/tray_popup_item_style.h" #include "base/macros.h" @@ -12,6 +14,7 @@ #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 border = nullptr); // Hides or shows the right view for an already populated view. void SetRightViewVisible(bool visible); diff --git a/ash/system/tray/tray_constants.cc b/ash/system/tray/tray_constants.cc index adb0f54ad2f49a..dfc4dddb6a539f 100644 --- a/ash/system/tray/tray_constants.cc +++ b/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; diff --git a/ash/system/tray/tray_constants.h b/ash/system/tray/tray_constants.h index 0411a3e2beec72..1eb9826f70847f 100644 --- a/ash/system/tray/tray_constants.h +++ b/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;