MD/vectorize wifi icons.

ui/chromeos/network/network_icon.cc

Index: ui/chromeos/network/network_icon.cc
diff --git a/ui/chromeos/network/network_icon.cc b/ui/chromeos/network/network_icon.cc
index 591ee14a453b6bfe93b01c961bda86d8660215d5..8be8fdb7fbc9e5b8bf2442928a3a4bb536c0dc8f 100644
--- a/ui/chromeos/network/network_icon.cc
+++ b/ui/chromeos/network/network_icon.cc
@@ -17,13 +17,18 @@
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/base/webui/web_ui_util.h"
+#include "ui/chromeos/material_design_icon_controller.h"
 #include "ui/chromeos/network/network_icon_animation.h"
 #include "ui/chromeos/network/network_icon_animation_observer.h"
 #include "ui/gfx/canvas.h"
+#include "ui/gfx/color_palette.h"
+#include "ui/gfx/geometry/insets.h"
 #include "ui/gfx/geometry/rect.h"
 #include "ui/gfx/geometry/size_conversions.h"
+#include "ui/gfx/image/canvas_image_source.h"
 #include "ui/gfx/image/image_skia_operations.h"
 #include "ui/gfx/image/image_skia_source.h"
+#include "ui/gfx/skia_util.h"
 
 using chromeos::DeviceState;
 using chromeos::NetworkConnectionHandler;
@@ -38,6 +43,9 @@ namespace network_icon {
 
 namespace {
 
+// Size of the network connectivity icons in dip.
+const int kNetworkIconSize = 16;

[tdanderson, 2016/07/28 22:00:49]

Note the icon should be 16dp when displayed in the system tray but 20dp when
displayed in the system menu.

+
 //------------------------------------------------------------------------------
 // Struct to pass icon badges to NetworkIconImageSource.
 struct Badges {
@@ -173,12 +181,24 @@ const double kConnectingImageAlpha = 0.5;
 // Images for strength bars for wired networks.
 const int kNumBarsImages = 5;
 
-// Imagaes for strength arcs for wireless networks.
+// Images for strength arcs for wireless networks.
 const int kNumArcsImages = 5;
 
 // Number of discrete images to use for alpha fade animation
 const int kNumFadeImages = 10;
 
+bool IconTypeIsDark(IconType icon_type) {
+  return (icon_type != ICON_TYPE_TRAY);
+}
+
+bool IconTypeHasVPNBadge(IconType icon_type) {
+  return (icon_type != ICON_TYPE_LIST);
+}
+
+int NumImagesForType(ImageType type) {
+  return (type == BARS) ? kNumBarsImages : kNumArcsImages;
+}
+
 //------------------------------------------------------------------------------
 // Classes for generating scaled images.
 
@@ -257,33 +277,80 @@ class NetworkIconImageSource : public gfx::ImageSkiaSource {
   DISALLOW_COPY_AND_ASSIGN(NetworkIconImageSource);
 };
 
-//------------------------------------------------------------------------------
-// Utilities for extracting icon images.
+// Depicts a given signal strength using arcs (for WiFi connections).
+class ArcsImageSource : public gfx::CanvasImageSource {
+ public:
+  explicit ArcsImageSource(IconType icon_type, float signal_strength)

[oshima, 2016/07/28 21:02:16]

nit: no explicit

[Evan Stade, 2016/07/29 16:59:13]

Done.

+      : CanvasImageSource(gfx::Size(kNetworkIconSize, kNetworkIconSize), false),
+        icon_type_(icon_type),
+        signal_strength_(signal_strength) {
+    DCHECK_GE(signal_strength, 0);
+    DCHECK_LE(signal_strength, kMaxSignalStrength);
+  }
+  ~ArcsImageSource() override {}
+

[oshima, 2016/07/28 21:02:15]

nit: // gfx::CanvasImageSource:

[Evan Stade, 2016/07/29 16:59:13]

Done.

+  void Draw(gfx::Canvas* canvas) override {
+    gfx::RectF oval_bounds((gfx::Rect(size())));

[tdanderson, 2016/07/28 22:00:49]

nit: one layer of () not needed.

[Evan Stade, 2016/07/29 16:59:13]

no, it's needed. Something about disambiguating function call bla bla

+    // Padding between top of arc and top of canvas.
+    const int kIconInset = 2;
+    oval_bounds.Inset(gfx::Insets(kIconInset));
+    // Double the width and height. The new midpoint should be the former
+    // bottom center.
+    oval_bounds.Inset(-oval_bounds.width() / 2, 0, -oval_bounds.width() / 2,
+                      -oval_bounds.height());
+
+    const SkScalar angle_above_horizontal = 51.f;

[oshima, 2016/07/28 21:02:16]

nit:

kAngleAbove..
same for below.

[Evan Stade, 2016/07/29 16:59:13]

Done.

+    const SkScalar start_angle = 180.f + angle_above_horizontal;
+    const SkScalar sweep_angle = 180.f - 2 * angle_above_horizontal;
+
+    SkPaint paint;
+    paint.setAntiAlias(true);
+    paint.setStyle(SkPaint::kFill_Style);
+    const SkColor base_color =
+        IconTypeIsDark(icon_type_) ? gfx::kChromeIconGrey : SK_ColorWHITE;
+    // Background. Skip drawing for full signal.
+    if (signal_strength_ != kMaxSignalStrength) {
+      paint.setColor(SkColorSetA(base_color, 0x4D));

[tdanderson, 2016/07/28 22:00:49]

Can we move the 0x4D somewhere common so it can be used by the battery, wifi,
and cellular network icons?

[Evan Stade, 2016/07/29 16:59:13]

yes, and I see that you rounded 0.3*255 down instead of up and got 0x4C :) We
should share that (and the base colors) but it seems like that belongs in ash/.
I'm not sure why this file is not also in ash/ but currently it doesn't depend
on ash/. We could create a new file for cros constants but I'd rather use one of
the ones that's already in ash. Can we move this file (and the whole directory)
to ash/common/system/chromeos/network/? Perhaps a task for a future CL?

the base color and size constants should also be shared --- I've sprinkled some
TODOs around.

[stevenjb, 2016/07/29 17:09:19]

This code is used in src/chrome by network_menu.cc and network_dropdown.cc.
(src/chrome does not depend on src/ash). At some point those will be replaced
with HTML, but that day is still a ways off.

+      canvas->sk_canvas()->drawArc(gfx::RectFToSkRect(oval_bounds), start_angle,
+                                   sweep_angle, true, paint);
+    }
+    // Foreground (signal strength).
+    if (signal_strength_ != 0) {
+      paint.setColor(base_color);
+      // Percent of the height of the background wedge that we draw the
+      // foreground wedge, indexed by signal strength.
+      static const float kWedgeHeightPercentages[] = {0.f, 0.375f, 0.5833f,
+                                                      0.75f, 1.f};
+      const float wedge_percent = kWedgeHeightPercentages[signal_strength_];
+      float size_reduction = (oval_bounds.height() / 2) * (1.f - wedge_percent);

[tdanderson, 2016/07/28 22:00:49]

nit: const

[Evan Stade, 2016/07/29 16:59:13]

inlined this

+      oval_bounds.Inset(size_reduction, size_reduction);
+      canvas->sk_canvas()->drawArc(gfx::RectFToSkRect(oval_bounds), start_angle,
+                                   sweep_angle, true, paint);
+    }
+  }
 
-bool IconTypeIsDark(IconType icon_type) {
-  return (icon_type != ICON_TYPE_TRAY);
-}
+ private:
+  IconType icon_type_;
+  // On a scale of 0 to kMaxSignalStrength, how connected we are.
+  int signal_strength_;
+  static const int kMaxSignalStrength = kNumArcsImages - 1;
 
-bool IconTypeHasVPNBadge(IconType icon_type) {
-  return (icon_type != ICON_TYPE_LIST);
-}
+  DISALLOW_COPY_AND_ASSIGN(ArcsImageSource);
+};
 
-int NumImagesForType(ImageType type) {
-  return (type == BARS) ? kNumBarsImages : kNumArcsImages;
-}
+//------------------------------------------------------------------------------
+// Utilities for extracting icon images.
 
 gfx::ImageSkia* BaseImageForType(ImageType image_type, IconType icon_type) {
   gfx::ImageSkia* image;
   if (image_type == BARS) {
-    image =  ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
-        IconTypeIsDark(icon_type) ?
-        IDR_AURA_UBER_TRAY_NETWORK_BARS_DARK :
-        IDR_AURA_UBER_TRAY_NETWORK_BARS_LIGHT);
+    image = ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
+        IconTypeIsDark(icon_type) ? IDR_AURA_UBER_TRAY_NETWORK_BARS_DARK
+                                  : IDR_AURA_UBER_TRAY_NETWORK_BARS_LIGHT);
   } else {
-    image =  ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
-        IconTypeIsDark(icon_type) ?
-        IDR_AURA_UBER_TRAY_NETWORK_ARCS_DARK :
-        IDR_AURA_UBER_TRAY_NETWORK_ARCS_LIGHT);
+    image = ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
+        IconTypeIsDark(icon_type) ? IDR_AURA_UBER_TRAY_NETWORK_ARCS_DARK
+                                  : IDR_AURA_UBER_TRAY_NETWORK_ARCS_LIGHT);
   }
   return image;
 }
@@ -299,6 +366,12 @@ ImageType ImageTypeForNetworkType(const std::string& type) {
 gfx::ImageSkia GetImageForIndex(ImageType image_type,
                                 IconType icon_type,
                                 int index) {
+  if (md_icon_controller::UseMaterialDesignNetworkIcons()) {
+    if (image_type == ARCS)

[oshima, 2016/07/28 21:02:16]

consolidate into single if?

[Evan Stade, 2016/07/29 16:59:13]

well I anticipate very soon adding vectorized versions of the other image types,
but I'll combine for now.

[oshima, 2016/07/29 18:17:38]

Ah, i see. You may keep it as is then. sorry for noise.

+      return gfx::ImageSkia(new ArcsImageSource(icon_type, index),
+                            gfx::Size(kNetworkIconSize, kNetworkIconSize));
+  }
+
   int num_images = NumImagesForType(image_type);
   if (index < 0 || index >= num_images)
     return gfx::ImageSkia();
@@ -309,8 +382,8 @@ gfx::ImageSkia GetImageForIndex(ImageType image_type,
       gfx::Rect(0, index * height, width, height));
 }
 
-const gfx::ImageSkia GetConnectedImage(IconType icon_type,
-                                       const std::string& network_type) {
+gfx::ImageSkia GetConnectedImage(IconType icon_type,
+                                 const std::string& network_type) {
   if (network_type == shill::kTypeVPN) {
     return *ui::ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
         IDR_AURA_UBER_TRAY_NETWORK_VPN);
@@ -476,8 +549,8 @@ gfx::ImageSkia GetIcon(const NetworkState* network,
     return *rb.GetImageSkiaNamed(IDR_AURA_UBER_TRAY_NETWORK_WIRED);
   } else if (network->Matches(NetworkTypePattern::Wireless())) {
     DCHECK(strength_index > 0);
-    return GetImageForIndex(
-        ImageTypeForNetworkType(network->type()), icon_type, strength_index);
+    return GetImageForIndex(ImageTypeForNetworkType(network->type()), icon_type,
+                            strength_index);
   } else if (network->Matches(NetworkTypePattern::VPN())) {
     return *rb.GetImageSkiaNamed(IDR_AURA_UBER_TRAY_NETWORK_VPN);
   } else {