chromeos: Move some network related UI in ui/chromeos/

Move the code responsible for showing network icons into a common component
so that it can be used from both ash and athena. This also moves the relevant
string and image-resources out of ash into separate ui_chromeos_ targets.

R=mmoss@chromium.org, oshima@chromium.org, sky@chromium.org, stevenjb@chromium.org
TBR=derat@ for third_party/cros_system_api owners
BUG=387199

Previously landed in r282837, and reverted in r282839 because it broke non-chromeos builds.

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

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

72 files changed, 1409 insertions, 0 deletions

diff --git a/ui/chromeos/DEPS b/ui/chromeos/DEPS
index df97d67..51f98b8 100644
--- a/ui/chromeos/DEPS
+++ b/ui/chromeos/DEPS
@@ -1,6 +1,11 @@
 include_rules = [
   "+chromeos/dbus",
+  "+chromeos/network",
+  "+grit/ui_chromeos_resources.h",
+  "+grit/ui_chromeos_strings.h",
+  "+third_party/cros_system_api",
   "+ui/aura",
+  "+ui/base",
   "+ui/events",
   "+ui/gfx",
   "+ui/gl",
diff --git a/ui/chromeos/network/network_icon.cc b/ui/chromeos/network/network_icon.cc
new file mode 100644
index 0000000..785b99e
--- /dev/null
+++ b/ui/chromeos/network/network_icon.cc
@@ -0,0 +1,962 @@
+// Copyright (c) 2012 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.
+
+#include "ui/chromeos/network/network_icon.h"
+
+#include "base/strings/utf_string_conversions.h"
+#include "chromeos/network/device_state.h"
+#include "chromeos/network/network_connection_handler.h"
+#include "chromeos/network/network_state.h"
+#include "chromeos/network/network_state_handler.h"
+#include "chromeos/network/portal_detector/network_portal_detector.h"
+#include "grit/ui_chromeos_resources.h"
+#include "grit/ui_chromeos_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"
+#include "ui/base/webui/web_ui_util.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/image/image_skia_operations.h"
+#include "ui/gfx/image/image_skia_source.h"
+#include "ui/gfx/rect.h"
+#include "ui/gfx/size_conversions.h"
+
+using chromeos::DeviceState;
+using chromeos::NetworkConnectionHandler;
+using chromeos::NetworkHandler;
+using chromeos::NetworkPortalDetector;
+using chromeos::NetworkState;
+using chromeos::NetworkStateHandler;
+using chromeos::NetworkTypePattern;
+
+namespace ui {
+namespace network_icon {
+
+namespace {
+
+//------------------------------------------------------------------------------
+// Struct to pass icon badges to NetworkIconImageSource.
+struct Badges {
+  Badges()
+      : top_left(NULL),
+        top_right(NULL),
+        bottom_left(NULL),
+        bottom_right(NULL) {
+  }
+  const gfx::ImageSkia* top_left;
+  const gfx::ImageSkia* top_right;
+  const gfx::ImageSkia* bottom_left;
+  const gfx::ImageSkia* bottom_right;
+};
+
+//------------------------------------------------------------------------------
+// class used for maintaining a map of network state and images.
+class NetworkIconImpl {
+ public:
+  NetworkIconImpl(const std::string& path, IconType icon_type);
+
+  // Determines whether or not the associated network might be dirty and if so
+  // updates and generates the icon. Does nothing if network no longer exists.
+  void Update(const chromeos::NetworkState* network);
+
+  // Returns the cached image url for |image_| based on |scale_factor|.
+  const std::string& GetImageUrl(float scale_factor);
+
+  const gfx::ImageSkia& image() const { return image_; }
+
+ private:
+  typedef std::map<float, std::string> ImageUrlMap;
+
+  // Updates |strength_index_| for wireless networks. Returns true if changed.
+  bool UpdateWirelessStrengthIndex(const chromeos::NetworkState* network);
+
+  // Updates the local state for cellular networks. Returns true if changed.
+  bool UpdateCellularState(const chromeos::NetworkState* network);
+
+  // Updates the portal state for wireless networks. Returns true if changed.
+  bool UpdatePortalState(const chromeos::NetworkState* network);
+
+  // Updates the VPN badge. Returns true if changed.
+  bool UpdateVPNBadge();
+
+  // Gets |badges| based on |network| and the current state.
+  void GetBadges(const NetworkState* network, Badges* badges);
+
+  // Gets the appropriate icon and badges and composites the image.
+  void GenerateImage(const chromeos::NetworkState* network);
+
+  // Network path, used for debugging.
+  std::string network_path_;
+
+  // Defines color theme and VPN badging
+  const IconType icon_type_;
+
+  // Cached state of the network when the icon was last generated.
+  std::string state_;
+
+  // Cached strength index of the network when the icon was last generated.
+  int strength_index_;
+
+  // Cached technology badge for the network when the icon was last generated.
+  const gfx::ImageSkia* technology_badge_;
+
+  // Cached vpn badge for the network when the icon was last generated.
+  const gfx::ImageSkia* vpn_badge_;
+
+  // Cached roaming state of the network when the icon was last generated.
+  std::string roaming_state_;
+
+  // Cached portal state of the network when the icon was last generated.
+  bool behind_captive_portal_;
+
+  // Generated icon image.
+  gfx::ImageSkia image_;
+
+  // Map of cached image urls by scale factor. Cleared whenever image_ is
+  // generated.
+  ImageUrlMap image_urls_;
+
+  DISALLOW_COPY_AND_ASSIGN(NetworkIconImpl);
+};
+
+//------------------------------------------------------------------------------
+// Maintain a static (global) icon map. Note: Icons are never destroyed;
+// it is assumed that a finite and reasonable number of network icons will be
+// created during a session.
+
+typedef std::map<std::string, NetworkIconImpl*> NetworkIconMap;
+
+NetworkIconMap* GetIconMapInstance(IconType icon_type, bool create) {
+  typedef std::map<IconType, NetworkIconMap*> IconTypeMap;
+  static IconTypeMap* s_icon_map = NULL;
+  if (s_icon_map == NULL) {
+    if (!create)
+      return NULL;
+    s_icon_map = new IconTypeMap;
+  }
+  if (s_icon_map->count(icon_type) == 0) {
+    if (!create)
+      return NULL;
+    (*s_icon_map)[icon_type] = new NetworkIconMap;
+  }
+  return (*s_icon_map)[icon_type];
+}
+
+NetworkIconMap* GetIconMap(IconType icon_type) {
+  return GetIconMapInstance(icon_type, true);
+}
+
+void PurgeIconMap(IconType icon_type,
+                  const std::set<std::string>& network_paths) {
+  NetworkIconMap* icon_map = GetIconMapInstance(icon_type, false);
+  if (!icon_map)
+    return;
+  for (NetworkIconMap::iterator loop_iter = icon_map->begin();
+       loop_iter != icon_map->end(); ) {
+    NetworkIconMap::iterator cur_iter = loop_iter++;
+    if (network_paths.count(cur_iter->first) == 0) {
+      delete cur_iter->second;
+      icon_map->erase(cur_iter);
+    }
+  }
+}
+
+//------------------------------------------------------------------------------
+// Utilities for generating icon images.
+
+// 'NONE' will default to ARCS behavior where appropriate (e.g. no network or
+// if a new type gets added).
+enum ImageType {
+  ARCS,
+  BARS,
+  NONE
+};
+
+// Amount to fade icons while connecting.
+const double kConnectingImageAlpha = 0.5;
+
+// Images for strength bars for wired networks.
+const int kNumBarsImages = 5;
+
+// Imagaes for strength arcs for wireless networks.
+const int kNumArcsImages = 5;
+
+// Number of discrete images to use for alpha fade animation
+const int kNumFadeImages = 10;
+
+//------------------------------------------------------------------------------
+// Classes for generating scaled images.
+
+const SkBitmap GetEmptyBitmap(const gfx::Size pixel_size) {
+  typedef std::pair<int, int> SizeKey;
+  typedef std::map<SizeKey, SkBitmap> SizeBitmapMap;
+  static SizeBitmapMap* s_empty_bitmaps = new SizeBitmapMap;
+
+  SizeKey key(pixel_size.width(), pixel_size.height());
+
+  SizeBitmapMap::iterator iter = s_empty_bitmaps->find(key);
+  if (iter != s_empty_bitmaps->end())
+    return iter->second;
+
+  SkBitmap empty;
+  empty.allocN32Pixels(key.first, key.second);
+  empty.eraseARGB(0, 0, 0, 0);
+  (*s_empty_bitmaps)[key] = empty;
+  return empty;
+}
+
+class EmptyImageSource: public gfx::ImageSkiaSource {
+ public:
+  explicit EmptyImageSource(const gfx::Size& size)
+      : size_(size) {
+  }
+
+  virtual gfx::ImageSkiaRep GetImageForScale(float scale) OVERRIDE {
+    gfx::Size pixel_size = gfx::ToFlooredSize(gfx::ScaleSize(size_, scale));
+    SkBitmap empty_bitmap = GetEmptyBitmap(pixel_size);
+    return gfx::ImageSkiaRep(empty_bitmap, scale);
+  }
+
+ private:
+  const gfx::Size size_;
+
+  DISALLOW_COPY_AND_ASSIGN(EmptyImageSource);
+};
+
+// This defines how we assemble a network icon.
+class NetworkIconImageSource : public gfx::ImageSkiaSource {
+ public:
+  NetworkIconImageSource(const gfx::ImageSkia& icon, const Badges& badges)
+      : icon_(icon),
+        badges_(badges) {
+  }
+  virtual ~NetworkIconImageSource() {}
+
+  // TODO(pkotwicz): Figure out what to do when a new image resolution becomes
+  // available.
+  virtual gfx::ImageSkiaRep GetImageForScale(float scale) OVERRIDE {
+    gfx::ImageSkiaRep icon_rep = icon_.GetRepresentation(scale);
+    if (icon_rep.is_null())
+      return gfx::ImageSkiaRep();
+    gfx::Canvas canvas(icon_rep, false);
+    if (badges_.top_left)
+      canvas.DrawImageInt(*badges_.top_left, 0, 0);
+    if (badges_.top_right)
+      canvas.DrawImageInt(*badges_.top_right,
+                          icon_.width() - badges_.top_right->width(), 0);
+    if (badges_.bottom_left) {
+      canvas.DrawImageInt(*badges_.bottom_left,
+                          0, icon_.height() - badges_.bottom_left->height());
+    }
+    if (badges_.bottom_right) {
+      canvas.DrawImageInt(*badges_.bottom_right,
+                          icon_.width() - badges_.bottom_right->width(),
+                          icon_.height() - badges_.bottom_right->height());
+    }
+    return canvas.ExtractImageRep();
+  }
+
+ private:
+  const gfx::ImageSkia icon_;
+  const Badges badges_;
+
+  DISALLOW_COPY_AND_ASSIGN(NetworkIconImageSource);
+};
+
+//------------------------------------------------------------------------------
+// Utilities for extracting icon images.
+
+// A struct used for caching image urls.
+struct ImageIdForNetworkType {
+  ImageIdForNetworkType(IconType icon_type,
+                        const std::string& network_type,
+                        float scale_factor) :
+      icon_type(icon_type),
+      network_type(network_type),
+      scale_factor(scale_factor) {}
+  bool operator<(const ImageIdForNetworkType& other) const {
+    if (icon_type != other.icon_type)
+      return icon_type < other.icon_type;
+    if (network_type != other.network_type)
+      return network_type < other.network_type;
+    return scale_factor < other.scale_factor;
+  }
+  IconType icon_type;
+  std::string network_type;
+  float scale_factor;
+};
+
+typedef std::map<ImageIdForNetworkType, std::string> ImageIdUrlMap;
+
+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;
+}
+
+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);
+  } else {
+    image =  ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
+        IconTypeIsDark(icon_type) ?
+        IDR_AURA_UBER_TRAY_NETWORK_ARCS_DARK :
+        IDR_AURA_UBER_TRAY_NETWORK_ARCS_LIGHT);
+  }
+  return image;
+}
+
+ImageType ImageTypeForNetworkType(const std::string& type) {
+  if (type == shill::kTypeWifi)
+    return ARCS;
+  else if (type == shill::kTypeCellular || type == shill::kTypeWimax)
+    return BARS;
+  return NONE;
+}
+
+gfx::ImageSkia GetImageForIndex(ImageType image_type,
+                                IconType icon_type,
+                                int index) {
+  int num_images = NumImagesForType(image_type);
+  if (index < 0 || index >= num_images)
+    return gfx::ImageSkia();
+  gfx::ImageSkia* images = BaseImageForType(image_type, icon_type);
+  int width = images->width();
+  int height = images->height() / num_images;
+  return gfx::ImageSkiaOperations::ExtractSubset(*images,
+      gfx::Rect(0, index * height, width, height));
+}
+
+const 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);
+  }
+  ImageType image_type = ImageTypeForNetworkType(network_type);
+  const int connected_index = NumImagesForType(image_type) - 1;
+  return GetImageForIndex(image_type, icon_type, connected_index);
+}
+
+const gfx::ImageSkia GetDisconnectedImage(IconType icon_type,
+                                          const std::string& network_type) {
+  if (network_type == shill::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(network_type);
+  const int disconnected_index = 0;
+  return GetImageForIndex(image_type, icon_type, disconnected_index);
+}
+
+gfx::ImageSkia* ConnectingWirelessImage(ImageType image_type,
+                                        IconType icon_type,
+                                        double animation) {
+  static gfx::ImageSkia* s_bars_images_dark[kNumBarsImages - 1];
+  static gfx::ImageSkia* s_bars_images_light[kNumBarsImages - 1];
+  static gfx::ImageSkia* s_arcs_images_dark[kNumArcsImages - 1];
+  static gfx::ImageSkia* s_arcs_images_light[kNumArcsImages - 1];
+  int image_count = NumImagesForType(image_type) - 1;
+  int index = animation * nextafter(static_cast<float>(image_count), 0);
+  index = std::max(std::min(index, image_count - 1), 0);
+  gfx::ImageSkia** images;
+  bool dark = IconTypeIsDark(icon_type);
+  if (image_type == BARS)
+    images = dark ? s_bars_images_dark : s_bars_images_light;
+  else
+    images = dark ? s_arcs_images_dark : s_arcs_images_light;
+  if (!images[index]) {
+    // Lazily cache images.
+    gfx::ImageSkia source = GetImageForIndex(image_type, icon_type, index + 1);
+    images[index] = new gfx::ImageSkia(
+        gfx::ImageSkiaOperations::CreateBlendedImage(
+            gfx::ImageSkia(new EmptyImageSource(source.size()), source.size()),
+            source,
+            kConnectingImageAlpha));
+  }
+  return images[index];
+}
+
+gfx::ImageSkia* ConnectingVpnImage(double animation) {
+  int index = animation * nextafter(static_cast<float>(kNumFadeImages), 0);
+  static gfx::ImageSkia* s_vpn_images[kNumFadeImages];
+  if (!s_vpn_images[index]) {
+    // Lazily cache images.
+    ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
+    gfx::ImageSkia* icon = rb.GetImageSkiaNamed(IDR_AURA_UBER_TRAY_NETWORK_VPN);
+    s_vpn_images[index] = new gfx::ImageSkia(
+        gfx::ImageSkiaOperations::CreateBlendedImage(
+            gfx::ImageSkia(new EmptyImageSource(icon->size()), icon->size()),
+            *icon,
+            animation));
+  }
+  return s_vpn_images[index];
+}
+
+gfx::ImageSkia* ConnectingVpnBadge(double animation) {
+  int index = animation * nextafter(static_cast<float>(kNumFadeImages), 0);
+  static gfx::ImageSkia* s_vpn_badges[kNumFadeImages];
+  if (!s_vpn_badges[index]) {
+    // Lazily cache images.
+    ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
+    gfx::ImageSkia* icon =
+        rb.GetImageSkiaNamed(IDR_AURA_UBER_TRAY_NETWORK_WIRED);  // For size
+    gfx::ImageSkia* badge =
+        rb.GetImageSkiaNamed(IDR_AURA_UBER_TRAY_NETWORK_VPN_BADGE);
+    s_vpn_badges[index] = new gfx::ImageSkia(
+        gfx::ImageSkiaOperations::CreateBlendedImage(
+            gfx::ImageSkia(new EmptyImageSource(icon->size()), icon->size()),
+            *badge,
+            animation));
+  }
+  return s_vpn_badges[index];
+}
+
+int StrengthIndex(int strength, int count) {
+  // Return an index in the range [1, count-1].
+  const float findex = (static_cast<float>(strength) / 100.0f) *
+      nextafter(static_cast<float>(count - 1), 0);
+  int index = 1 + static_cast<int>(findex);
+  index = std::max(std::min(index, count - 1), 1);
+  return index;
+}
+
+int GetStrengthIndex(const NetworkState* network) {
+  ImageType image_type = ImageTypeForNetworkType(network->type());
+  if (image_type == ARCS)
+    return StrengthIndex(network->signal_strength(), kNumArcsImages);
+  else if (image_type == BARS)
+    return StrengthIndex(network->signal_strength(), kNumBarsImages);
+  return 0;
+}
+
+const gfx::ImageSkia* BadgeForNetworkTechnology(const NetworkState* network,
+                                                IconType icon_type) {
+  const int kUnknownBadgeType = -1;
+  int id = kUnknownBadgeType;
+  const std::string& technology = network->network_technology();
+  if (technology == shill::kNetworkTechnologyEvdo) {
+    id = IconTypeIsDark(icon_type) ?
+        IDR_AURA_UBER_TRAY_NETWORK_EVDO_DARK :
+        IDR_AURA_UBER_TRAY_NETWORK_EVDO_LIGHT;
+  } else if (technology == shill::kNetworkTechnology1Xrtt) {
+    id = IDR_AURA_UBER_TRAY_NETWORK_1X;
+  } else if (technology == shill::kNetworkTechnologyGprs) {
+    id = IconTypeIsDark(icon_type) ?
+        IDR_AURA_UBER_TRAY_NETWORK_GPRS_DARK :
+        IDR_AURA_UBER_TRAY_NETWORK_GPRS_LIGHT;
+  } else if (technology == shill::kNetworkTechnologyEdge) {
+    id = IconTypeIsDark(icon_type) ?
+        IDR_AURA_UBER_TRAY_NETWORK_EDGE_DARK :
+        IDR_AURA_UBER_TRAY_NETWORK_EDGE_LIGHT;
+  } else if (technology == shill::kNetworkTechnologyUmts) {
+    id = IconTypeIsDark(icon_type) ?
+        IDR_AURA_UBER_TRAY_NETWORK_3G_DARK :
+        IDR_AURA_UBER_TRAY_NETWORK_3G_LIGHT;
+  } else if (technology == shill::kNetworkTechnologyHspa) {
+    id = IconTypeIsDark(icon_type) ?
+        IDR_AURA_UBER_TRAY_NETWORK_HSPA_DARK :
+        IDR_AURA_UBER_TRAY_NETWORK_HSPA_LIGHT;
+  } else if (technology == shill::kNetworkTechnologyHspaPlus) {
+    id = IconTypeIsDark(icon_type) ?
+        IDR_AURA_UBER_TRAY_NETWORK_HSPA_PLUS_DARK :
+        IDR_AURA_UBER_TRAY_NETWORK_HSPA_PLUS_LIGHT;
+  } else if (technology == shill::kNetworkTechnologyLte) {
+    id = IconTypeIsDark(icon_type) ?
+        IDR_AURA_UBER_TRAY_NETWORK_LTE_DARK :
+        IDR_AURA_UBER_TRAY_NETWORK_LTE_LIGHT;
+  } else if (technology == shill::kNetworkTechnologyLteAdvanced) {
+    id = IconTypeIsDark(icon_type) ?
+        IDR_AURA_UBER_TRAY_NETWORK_LTE_ADVANCED_DARK :
+        IDR_AURA_UBER_TRAY_NETWORK_LTE_ADVANCED_LIGHT;
+  } else if (technology == shill::kNetworkTechnologyGsm) {
+    id = IconTypeIsDark(icon_type) ?
+        IDR_AURA_UBER_TRAY_NETWORK_GPRS_DARK :
+        IDR_AURA_UBER_TRAY_NETWORK_GPRS_LIGHT;
+  }
+  if (id == kUnknownBadgeType)
+    return NULL;
+  else
+    return ui::ResourceBundle::GetSharedInstance().GetImageSkiaNamed(id);
+}
+
+const gfx::ImageSkia* BadgeForVPN(IconType icon_type) {
+  return ui::ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
+      IDR_AURA_UBER_TRAY_NETWORK_VPN_BADGE);
+}
+
+gfx::ImageSkia GetIcon(const NetworkState* network,
+                       IconType icon_type,
+                       int strength_index) {
+  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
+  if (network->Matches(NetworkTypePattern::Ethernet())) {
+    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);
+  } else if (network->Matches(NetworkTypePattern::VPN())) {
+    return *rb.GetImageSkiaNamed(IDR_AURA_UBER_TRAY_NETWORK_VPN);
+  } else {
+    LOG(WARNING) << "Request for icon for unsupported type: "
+                 << network->type();
+    return *rb.GetImageSkiaNamed(IDR_AURA_UBER_TRAY_NETWORK_WIRED);
+  }
+}
+
+//------------------------------------------------------------------------------
+// Get connecting images
+
+gfx::ImageSkia GetConnectingVpnImage(IconType icon_type) {
+  NetworkStateHandler* handler = NetworkHandler::Get()->network_state_handler();
+  const NetworkState* connected_network = NULL;
+  if (icon_type == ICON_TYPE_TRAY) {
+    connected_network =
+        handler->ConnectedNetworkByType(NetworkTypePattern::NonVirtual());
+  }
+  double animation = NetworkIconAnimation::GetInstance()->GetAnimation();
+
+  if (connected_network) {
+    gfx::ImageSkia icon = GetImageForNetwork(connected_network, icon_type);
+    Badges badges;
+    badges.bottom_left = ConnectingVpnBadge(animation);
+    return gfx::ImageSkia(
+        new NetworkIconImageSource(icon, badges), icon.size());
+  } else {
+    gfx::ImageSkia* icon = ConnectingVpnImage(animation);
+    return gfx::ImageSkia(
+        new NetworkIconImageSource(*icon, Badges()), icon->size());
+  }
+}
+
+gfx::ImageSkia GetConnectingImage(IconType icon_type,
+                                  const std::string& network_type) {
+  if (network_type == shill::kTypeVPN)
+    return GetConnectingVpnImage(icon_type);
+
+  ImageType image_type = ImageTypeForNetworkType(network_type);
+  double animation = NetworkIconAnimation::GetInstance()->GetAnimation();
+
+  gfx::ImageSkia* icon = ConnectingWirelessImage(
+      image_type, icon_type, animation);
+  return gfx::ImageSkia(
+      new NetworkIconImageSource(*icon, Badges()), icon->size());
+}
+
+std::string GetConnectingImageUrl(IconType icon_type,
+                                  const std::string& network_type,
+                                  float scale_factor) {
+  // Caching the connecting image is complicated and we will never draw more
+  // than a few per frame, so just generate the image url each time.
+  gfx::ImageSkia image = GetConnectingImage(icon_type, network_type);
+  gfx::ImageSkiaRep image_rep = image.GetRepresentation(scale_factor);
+  return webui::GetBitmapDataUrl(image_rep.sk_bitmap());
+}
+
+}  // namespace
+
+//------------------------------------------------------------------------------
+// NetworkIconImpl
+
+NetworkIconImpl::NetworkIconImpl(const std::string& path, IconType icon_type)
+    : network_path_(path),
+      icon_type_(icon_type),
+      strength_index_(-1),
+      technology_badge_(NULL),
+      vpn_badge_(NULL),
+      behind_captive_portal_(false) {
+  // Default image
+  image_ = GetDisconnectedImage(icon_type, shill::kTypeWifi);
+}
+
+void NetworkIconImpl::Update(const NetworkState* network) {
+  DCHECK(network);
+  // Determine whether or not we need to update the icon.
+  bool dirty = image_.isNull();
+
+  // If the network state has changed, the icon needs updating.
+  if (state_ != network->connection_state()) {
+    state_ = network->connection_state();
+    dirty = true;
+  }
+
+  dirty |= UpdatePortalState(network);
+
+  if (network->Matches(NetworkTypePattern::Wireless())) {
+    dirty |= UpdateWirelessStrengthIndex(network);
+  }
+
+  if (network->Matches(NetworkTypePattern::Cellular()))
+    dirty |= UpdateCellularState(network);
+
+  if (IconTypeHasVPNBadge(icon_type_) &&
+      network->Matches(NetworkTypePattern::NonVirtual())) {
+    dirty |= UpdateVPNBadge();
+  }
+
+  if (dirty) {
+    // Set the icon and badges based on the network and generate the image.
+    GenerateImage(network);
+  }
+}
+
+bool NetworkIconImpl::UpdateWirelessStrengthIndex(const NetworkState* network) {
+  int index = GetStrengthIndex(network);
+  if (index != strength_index_) {
+    strength_index_ = index;
+    return true;
+  }
+  return false;
+}
+
+bool NetworkIconImpl::UpdateCellularState(const NetworkState* network) {
+  bool dirty = false;
+  const gfx::ImageSkia* technology_badge =
+      BadgeForNetworkTechnology(network, icon_type_);
+  if (technology_badge != technology_badge_) {
+    technology_badge_ = technology_badge;
+    dirty = true;
+  }
+  std::string roaming_state = network->roaming();
+  if (roaming_state != roaming_state_) {
+    roaming_state_ = roaming_state;
+    dirty = true;
+  }
+  return dirty;
+}
+
+bool NetworkIconImpl::UpdatePortalState(const NetworkState* network) {
+  bool behind_captive_portal = false;
+  if (network) {
+    NetworkPortalDetector::CaptivePortalState state =
+        NetworkPortalDetector::Get()->GetCaptivePortalState(network->path());
+    behind_captive_portal =
+        state.status == NetworkPortalDetector::CAPTIVE_PORTAL_STATUS_PORTAL;
+  }
+
+  if (behind_captive_portal == behind_captive_portal_)
+    return false;
+  behind_captive_portal_ = behind_captive_portal;
+  return true;
+}
+
+bool NetworkIconImpl::UpdateVPNBadge() {
+  const NetworkState* vpn = NetworkHandler::Get()->network_state_handler()->
+      ConnectedNetworkByType(NetworkTypePattern::VPN());
+  if (vpn && vpn_badge_ == NULL) {
+    vpn_badge_ = BadgeForVPN(icon_type_);
+    return true;
+  } else if (!vpn && vpn_badge_ != NULL) {
+    vpn_badge_ = NULL;
+    return true;
+  }
+  return false;
+}
+
+void NetworkIconImpl::GetBadges(const NetworkState* network, Badges* badges) {
+  DCHECK(network);
+  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
+  NetworkStateHandler* handler = NetworkHandler::Get()->network_state_handler();
+
+  const std::string& type = network->type();
+  if (type == shill::kTypeWifi) {
+    if (network->security() != shill::kSecurityNone &&
+        IconTypeIsDark(icon_type_)) {
+      badges->bottom_right = rb.GetImageSkiaNamed(
+          IDR_AURA_UBER_TRAY_NETWORK_SECURE_DARK);
+    }
+  } else if (type == shill::kTypeWimax) {
+    technology_badge_ = rb.GetImageSkiaNamed(
+        IconTypeIsDark(icon_type_) ?
+        IDR_AURA_UBER_TRAY_NETWORK_4G_DARK :
+        IDR_AURA_UBER_TRAY_NETWORK_4G_LIGHT);
+  } else if (type == shill::kTypeCellular) {
+    if (network->roaming() == shill::kRoamingStateRoaming) {
+      // For networks that are always in roaming don't show roaming badge.
+      const DeviceState* device =
+          handler->GetDeviceState(network->device_path());
+      LOG_IF(WARNING, !device) << "Could not find device state for "
+                               << network->device_path();
+      if (!device || !device->provider_requires_roaming()) {
+        badges->bottom_right = rb.GetImageSkiaNamed(
+            IconTypeIsDark(icon_type_) ?
+            IDR_AURA_UBER_TRAY_NETWORK_ROAMING_DARK :
+            IDR_AURA_UBER_TRAY_NETWORK_ROAMING_LIGHT);
+      }
+    }
+  }
+  if (!network->IsConnectingState()) {
+    badges->top_left = technology_badge_;
+    badges->bottom_left = vpn_badge_;
+  }
+
+  if (behind_captive_portal_) {
+    gfx::ImageSkia* badge = rb.GetImageSkiaNamed(
+       IconTypeIsDark(icon_type_) ?
+       IDR_AURA_UBER_TRAY_NETWORK_PORTAL_DARK :
+       IDR_AURA_UBER_TRAY_NETWORK_PORTAL_LIGHT);
+    badges->bottom_right = badge;
+  }
+}
+
+void NetworkIconImpl::GenerateImage(const NetworkState* network) {
+  DCHECK(network);
+  gfx::ImageSkia icon = GetIcon(network, icon_type_, strength_index_);
+  Badges badges;
+  GetBadges(network, &badges);
+  image_ = gfx::ImageSkia(
+      new NetworkIconImageSource(icon, badges), icon.size());
+  image_urls_.clear();
+}
+
+const std::string& NetworkIconImpl::GetImageUrl(float scale_factor) {
+  ImageUrlMap::iterator iter = image_urls_.find(scale_factor);
+  if (iter != image_urls_.end())
+    return iter->second;
+
+  VLOG(2) << "Generating bitmap URL for: " << network_path_;
+  gfx::ImageSkiaRep image_rep = image_.GetRepresentation(scale_factor);
+  iter = image_urls_.insert(std::make_pair(
+      scale_factor, webui::GetBitmapDataUrl(image_rep.sk_bitmap()))).first;
+  return iter->second;
+}
+
+namespace {
+
+NetworkIconImpl* FindAndUpdateImageImpl(const NetworkState* network,
+                                        IconType icon_type) {
+  // Find or add the icon.
+  NetworkIconMap* icon_map = GetIconMap(icon_type);
+  NetworkIconImpl* icon;
+  NetworkIconMap::iterator iter = icon_map->find(network->path());
+  if (iter == icon_map->end()) {
+    icon = new NetworkIconImpl(network->path(), icon_type);
+    icon_map->insert(std::make_pair(network->path(), icon));
+  } else {
+    icon = iter->second;
+  }
+
+  // Update and return the icon's image.
+  icon->Update(network);
+  return icon;
+}
+
+}  // namespace
+
+//------------------------------------------------------------------------------
+// Public interface
+
+gfx::ImageSkia GetImageForNetwork(const NetworkState* network,
+                                  IconType icon_type) {
+  DCHECK(network);
+  if (!network->visible())
+    return GetDisconnectedImage(icon_type, network->type());
+
+  if (network->IsConnectingState())
+    return GetConnectingImage(icon_type, network->type());
+
+  NetworkIconImpl* icon = FindAndUpdateImageImpl(network, icon_type);
+  return icon->image();
+}
+
+std::string GetImageUrlForNetwork(const NetworkState* network,
+                                  IconType icon_type,
+                                  float scale_factor) {
+  DCHECK(network);
+  // Handle connecting icons.
+  if (network->IsConnectingState())
+    return GetConnectingImageUrl(icon_type, network->type(), scale_factor);
+
+  NetworkIconImpl* icon = FindAndUpdateImageImpl(network, icon_type);
+  return icon->GetImageUrl(scale_factor);
+}
+
+gfx::ImageSkia GetImageForConnectedNetwork(IconType icon_type,
+                                           const std::string& network_type) {
+  return GetConnectedImage(icon_type, network_type);
+}
+
+gfx::ImageSkia GetImageForConnectingNetwork(IconType icon_type,
+                                            const std::string& network_type) {
+  return GetConnectingImage(icon_type, network_type);
+}
+
+gfx::ImageSkia GetImageForDisconnectedNetwork(IconType icon_type,
+                                              const std::string& network_type) {
+  return GetDisconnectedImage(icon_type, network_type);
+}
+
+base::string16 GetLabelForNetwork(const chromeos::NetworkState* network,
+                                  IconType icon_type) {
+  DCHECK(network);
+  std::string activation_state = network->activation_state();
+  if (icon_type == ICON_TYPE_LIST) {
+    // Show "<network>: [Connecting|Activating]..."
+    if (network->IsConnectingState()) {
+      return l10n_util::GetStringFUTF16(
+          IDS_ASH_STATUS_TRAY_NETWORK_LIST_CONNECTING,
+          base::UTF8ToUTF16(network->name()));
+    }
+    if (activation_state == shill::kActivationStateActivating) {
+      return l10n_util::GetStringFUTF16(
+          IDS_ASH_STATUS_TRAY_NETWORK_LIST_ACTIVATING,
+          base::UTF8ToUTF16(network->name()));
+    }
+    // Show "Activate <network>" in list view only.
+    if (activation_state == shill::kActivationStateNotActivated ||
+        activation_state == shill::kActivationStatePartiallyActivated) {
+      return l10n_util::GetStringFUTF16(
+          IDS_ASH_STATUS_TRAY_NETWORK_LIST_ACTIVATE,
+          base::UTF8ToUTF16(network->name()));
+    }
+  } else {
+    // Show "[Connected to|Connecting to|Activating] <network>" (non-list view).
+    if (network->IsConnectedState()) {
+      return l10n_util::GetStringFUTF16(IDS_ASH_STATUS_TRAY_NETWORK_CONNECTED,
+                                        base::UTF8ToUTF16(network->name()));
+    }
+    if (network->IsConnectingState()) {
+      return l10n_util::GetStringFUTF16(IDS_ASH_STATUS_TRAY_NETWORK_CONNECTING,
+                                        base::UTF8ToUTF16(network->name()));
+    }
+    if (activation_state == shill::kActivationStateActivating) {
+      return l10n_util::GetStringFUTF16(IDS_ASH_STATUS_TRAY_NETWORK_ACTIVATING,
+                                        base::UTF8ToUTF16(network->name()));
+    }
+  }
+
+  // Otherwise just show the network name or 'Ethernet'.
+  if (network->Matches(NetworkTypePattern::Ethernet())) {
+    return l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_ETHERNET);
+  } else {
+    return base::UTF8ToUTF16(network->name());
+  }
+}
+
+int GetCellularUninitializedMsg() {
+  static base::Time s_uninitialized_state_time;
+  static int s_uninitialized_msg(0);
+
+  NetworkStateHandler* handler = NetworkHandler::Get()->network_state_handler();
+  if (handler->GetTechnologyState(NetworkTypePattern::Mobile())
+      == NetworkStateHandler::TECHNOLOGY_UNINITIALIZED) {
+    s_uninitialized_msg = IDS_ASH_STATUS_TRAY_INITIALIZING_CELLULAR;
+    s_uninitialized_state_time = base::Time::Now();
+    return s_uninitialized_msg;
+  } else if (handler->GetScanningByType(NetworkTypePattern::Mobile())) {
+    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;
+}
+
+void GetDefaultNetworkImageAndLabel(IconType icon_type,
+                                    gfx::ImageSkia* image,
+                                    base::string16* label,
+                                    bool* animating) {
+  NetworkStateHandler* state_handler =
+      NetworkHandler::Get()->network_state_handler();
+  NetworkConnectionHandler* connect_handler =
+      NetworkHandler::Get()->network_connection_handler();
+  const NetworkState* connected_network =
+      state_handler->ConnectedNetworkByType(NetworkTypePattern::NonVirtual());
+  const NetworkState* connecting_network =
+      state_handler->ConnectingNetworkByType(NetworkTypePattern::Wireless());
+  if (!connecting_network && icon_type == ICON_TYPE_TRAY) {
+    connecting_network =
+        state_handler->ConnectingNetworkByType(NetworkTypePattern::VPN());
+  }
+
+  const NetworkState* network;
+  // If we are connecting to a network, and there is either no connected
+  // network, or the connection was user requested, use the connecting
+  // network.
+  if (connecting_network &&
+      (!connected_network ||
+       connect_handler->HasConnectingNetwork(connecting_network->path()))) {
+    network = connecting_network;
+  } else {
+    network = connected_network;
+  }
+
+  // Don't show ethernet in the tray
+  if (icon_type == ICON_TYPE_TRAY && network &&
+      network->Matches(NetworkTypePattern::Ethernet())) {
+    *image = gfx::ImageSkia();
+    *animating = false;
+    return;
+  }
+
+  if (!network) {
+    // If no connecting network, check if we are activating a network.
+    const NetworkState* mobile_network =
+        state_handler->FirstNetworkByType(NetworkTypePattern::Mobile());
+    if (mobile_network && (mobile_network->activation_state() ==
+                           shill::kActivationStateActivating)) {
+      network = mobile_network;
+    }
+  }
+  if (!network) {
+    // If no connecting network, check for cellular initializing.
+    int uninitialized_msg = GetCellularUninitializedMsg();
+    if (uninitialized_msg != 0) {
+      *image = GetImageForConnectingNetwork(icon_type, shill::kTypeCellular);
+      if (label)
+        *label = l10n_util::GetStringUTF16(uninitialized_msg);
+      *animating = true;
+    } else {
+      // Otherwise show the disconnected wifi icon.
+      *image = GetImageForDisconnectedNetwork(icon_type, shill::kTypeWifi);
+      if (label) {
+        *label = l10n_util::GetStringUTF16(
+            IDS_ASH_STATUS_TRAY_NETWORK_NOT_CONNECTED);
+      }
+      *animating = false;
+    }
+    return;
+  }
+  *animating = network->IsConnectingState();
+  // Get icon and label for connected or connecting network.
+  *image = GetImageForNetwork(network, icon_type);
+  if (label)
+    *label = GetLabelForNetwork(network, icon_type);
+}
+
+void PurgeNetworkIconCache() {
+  NetworkStateHandler::NetworkStateList networks;
+  NetworkHandler::Get()->network_state_handler()->GetVisibleNetworkList(
+      &networks);
+  std::set<std::string> network_paths;
+  for (NetworkStateHandler::NetworkStateList::iterator iter = networks.begin();
+       iter != networks.end(); ++iter) {
+    network_paths.insert((*iter)->path());
+  }
+  PurgeIconMap(ICON_TYPE_TRAY, network_paths);
+  PurgeIconMap(ICON_TYPE_DEFAULT_VIEW, network_paths);
+  PurgeIconMap(ICON_TYPE_LIST, network_paths);
+}
+
+}  // namespace network_icon
+}  // namespace ui
diff --git a/ui/chromeos/network/network_icon.h b/ui/chromeos/network/network_icon.h
new file mode 100644
index 0000000..5227af3
--- /dev/null
+++ b/ui/chromeos/network/network_icon.h
@@ -0,0 +1,83 @@
+// Copyright (c) 2012 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.
+
+#ifndef UI_CHROMEOS_NETWORK_NETWORK_ICON_H_
+#define UI_CHROMEOS_NETWORK_NETWORK_ICON_H_
+
+#include <string>
+
+#include "base/strings/string16.h"
+#include "ui/chromeos/ui_chromeos_export.h"
+#include "ui/gfx/image/image_skia.h"
+
+namespace chromeos {
+class NetworkState;
+}
+
+namespace ui {
+namespace network_icon {
+
+class AnimationObserver;
+
+// Type of icon which dictates color theme and VPN badging
+enum IconType {
+  ICON_TYPE_TRAY,  // light icons with VPN badges
+  ICON_TYPE_DEFAULT_VIEW,  // dark icons with VPN badges
+  ICON_TYPE_LIST,  // dark icons without VPN badges
+};
+
+// Gets the image for the network associated with |service_path|. |network| must
+// not be NULL. |icon_type| determines the color theme and whether or not to
+// show the VPN badge. This caches badged icons per network per |icon_type|.
+UI_CHROMEOS_EXPORT gfx::ImageSkia GetImageForNetwork(
+    const chromeos::NetworkState* network,
+    IconType icon_type);
+
+// Similar to GetImageForNetwork but returns the cached image url based on
+// |scale_factor| instead.
+UI_CHROMEOS_EXPORT std::string GetImageUrlForNetwork(
+    const chromeos::NetworkState* network,
+    IconType icon_type,
+    float scale_factor);
+
+// Gets the fulls strength image for a connected network type.
+UI_CHROMEOS_EXPORT gfx::ImageSkia GetImageForConnectedNetwork(
+    IconType icon_type,
+    const std::string& network_type);
+
+// Gets the image for a connecting network type.
+UI_CHROMEOS_EXPORT gfx::ImageSkia GetImageForConnectingNetwork(
+    IconType icon_type,
+    const std::string& network_type);
+
+// Gets the image for a disconnected network type.
+UI_CHROMEOS_EXPORT gfx::ImageSkia GetImageForDisconnectedNetwork(
+    IconType icon_type,
+    const std::string& network_type);
+
+// Returns the label for |network| based on |icon_type|. |network| can be NULL.
+UI_CHROMEOS_EXPORT base::string16 GetLabelForNetwork(
+    const chromeos::NetworkState* network,
+    IconType icon_type);
+
+// Updates and returns the appropriate message id if the cellular network
+// is uninitialized.
+UI_CHROMEOS_EXPORT int GetCellularUninitializedMsg();
+
+// Gets the correct icon and label for |icon_type|. Also sets |animating|
+// based on whether or not the icon is animating (i.e. connecting).
+UI_CHROMEOS_EXPORT void GetDefaultNetworkImageAndLabel(IconType icon_type,
+                                                       gfx::ImageSkia* image,
+                                                       base::string16* label,
+                                                       bool* animating);
+
+// Called when the list of networks changes. Retreives the list of networks
+// from the global NetworkStateHandler instance and removes cached entries
+// that are no longer in the list.
+UI_CHROMEOS_EXPORT void PurgeNetworkIconCache();
+
+}  // namespace network_icon
+}  // namespace ui
+
+#endif  // UI_CHROMEOS_NETWORK_NETWORK_ICON_H_
diff --git a/ui/chromeos/network/network_icon_animation.cc b/ui/chromeos/network/network_icon_animation.cc
new file mode 100644
index 0000000..055a10b
--- /dev/null
+++ b/ui/chromeos/network/network_icon_animation.cc
@@ -0,0 +1,61 @@
+// Copyright (c) 2013 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.
+
+#include "ui/chromeos/network/network_icon_animation.h"
+
+#include "ui/chromeos/network/network_icon_animation_observer.h"
+
+namespace {
+const int kThrobDurationMs = 750;  // Animation cycle length.
+}
+
+namespace ui {
+namespace network_icon {
+
+NetworkIconAnimation::NetworkIconAnimation()
+    : animation_(this) {
+  // Set up the animation throbber.
+  animation_.SetThrobDuration(kThrobDurationMs);
+  animation_.SetTweenType(gfx::Tween::LINEAR);
+}
+
+NetworkIconAnimation::~NetworkIconAnimation() {
+}
+
+void NetworkIconAnimation::AnimationProgressed(
+    const gfx::Animation* animation) {
+  if (animation != &animation_)
+    return;
+  FOR_EACH_OBSERVER(AnimationObserver, observers_, NetworkIconChanged());
+}
+
+double NetworkIconAnimation::GetAnimation() {
+  if (!animation_.is_animating()) {
+    animation_.Reset();
+    animation_.StartThrobbing(-1 /*throb indefinitely*/);
+    return 0;
+  }
+  return animation_.GetCurrentValue();
+}
+
+void NetworkIconAnimation::AddObserver(AnimationObserver* observer) {
+  if (!observers_.HasObserver(observer))
+    observers_.AddObserver(observer);
+}
+
+void NetworkIconAnimation::RemoveObserver(AnimationObserver* observer) {
+  observers_.RemoveObserver(observer);
+  if (!observers_.might_have_observers())
+    animation_.Reset();  // Stops the animation and resets the current value.
+}
+
+// static
+NetworkIconAnimation* NetworkIconAnimation::GetInstance() {
+  static NetworkIconAnimation* s_icon_animation =
+      new NetworkIconAnimation();
+  return s_icon_animation;
+}
+
+}  // namespace network_icon
+}  // namespace ui
diff --git a/ui/chromeos/network/network_icon_animation.h b/ui/chromeos/network/network_icon_animation.h
new file mode 100644
index 0000000..ad73bb2
--- /dev/null
+++ b/ui/chromeos/network/network_icon_animation.h
@@ -0,0 +1,48 @@
+// Copyright (c) 2013 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.
+
+#ifndef UI_CHROMEOS_NETWORK_NETWORK_ICON_ANIMATION_H_
+#define UI_CHROMEOS_NETWORK_NETWORK_ICON_ANIMATION_H_
+
+#include <set>
+#include <string>
+
+#include "base/observer_list.h"
+#include "ui/chromeos/ui_chromeos_export.h"
+#include "ui/gfx/animation/animation_delegate.h"
+#include "ui/gfx/animation/throb_animation.h"
+
+namespace ui {
+namespace network_icon {
+
+class AnimationObserver;
+
+// Single instance class to handle icon animations and keep them in sync.
+class UI_CHROMEOS_EXPORT NetworkIconAnimation : public gfx::AnimationDelegate {
+ public:
+  NetworkIconAnimation();
+  virtual ~NetworkIconAnimation();
+
+  // Returns the current animation value, [0-1].
+  double GetAnimation();
+
+  // The animation stops when all observers have been removed.
+  // Be sure to remove observers when no associated icons are animating.
+  void AddObserver(AnimationObserver* observer);
+  void RemoveObserver(AnimationObserver* observer);
+
+  // gfx::AnimationDelegate implementation.
+  virtual void AnimationProgressed(const gfx::Animation* animation) OVERRIDE;
+
+  static NetworkIconAnimation* GetInstance();
+
+ private:
+  gfx::ThrobAnimation animation_;
+  ObserverList<AnimationObserver> observers_;
+};
+
+}  // namespace network_icon
+}  // namespace ui
+
+#endif  // UI_CHROMEOS_NETWORK_NETWORK_ICON_ANIMATION_H_
diff --git a/ui/chromeos/network/network_icon_animation_observer.h b/ui/chromeos/network/network_icon_animation_observer.h
new file mode 100644
index 0000000..ad8dd1c
--- /dev/null
+++ b/ui/chromeos/network/network_icon_animation_observer.h
@@ -0,0 +1,27 @@
+// Copyright (c) 2012 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.
+
+#ifndef UI_CHROMEOS_NETWORK_NETWORK_ICON_ANIMATION_OBSERVER_H_
+#define UI_CHROMEOS_NETWORK_NETWORK_ICON_ANIMATION_OBSERVER_H_
+
+#include "ui/chromeos/ui_chromeos_export.h"
+
+namespace ui {
+namespace network_icon {
+
+// Observer interface class for animating network icons.
+class UI_CHROMEOS_EXPORT AnimationObserver {
+ public:
+  // Called when the image has changed due to animation. The callback should
+  // trigger a call to GetImageForNetwork() to retrieve the image.
+  virtual void NetworkIconChanged() = 0;
+
+ protected:
+  virtual ~AnimationObserver() {}
+};
+
+}  // namespace network_icon
+}  // namespace ui
+
+#endif  // UI_CHROMEOS_NETWORK_NETWORK_ICON_ANIMATION_OBSERVER_H_
diff --git a/ui/chromeos/resources/default_100_percent/network/status_network_failed.png b/ui/chromeos/resources/default_100_percent/network/status_network_failed.png
new file mode 100644
index 0000000..c6d2710
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/status_network_failed.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_1x.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_1x.png
new file mode 100644
index 0000000..5a25e1c
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_1x.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_3g_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_3g_dark.png
new file mode 100644
index 0000000..8b9b92a
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_3g_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_3g_light.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_3g_light.png
new file mode 100644
index 0000000..83b5921
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_3g_light.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_4g_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_4g_dark.png
new file mode 100644
index 0000000..daa9f7e4
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_4g_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_4g_light.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_4g_light.png
new file mode 100644
index 0000000..c199a89
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_4g_light.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_active_portal_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_active_portal_dark.png
new file mode 100644
index 0000000..b201c39
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_active_portal_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_active_portal_light.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_active_portal_light.png
new file mode 100644
index 0000000..0079811
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_active_portal_light.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_arcs_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_arcs_dark.png
new file mode 100644
index 0000000..29b6c72
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_arcs_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_arcs_light.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_arcs_light.png
new file mode 100644
index 0000000..2d783f6
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_arcs_light.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_bars_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_bars_dark.png
new file mode 100644
index 0000000..9facf9fe
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_bars_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_bars_light.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_bars_light.png
new file mode 100644
index 0000000..4f77026
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_bars_light.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_edge_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_edge_dark.png
new file mode 100644
index 0000000..8fa7443
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_edge_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_edge_light.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_edge_light.png
new file mode 100644
index 0000000..c9a525c
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_edge_light.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_evdo_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_evdo_dark.png
new file mode 100644
index 0000000..85c0378
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_evdo_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_evdo_light.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_evdo_light.png
new file mode 100644
index 0000000..1ae959b
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_evdo_light.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_gprs_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_gprs_dark.png
new file mode 100644
index 0000000..03357a6
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_gprs_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_gprs_light.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_gprs_light.png
new file mode 100644
index 0000000..3953406
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_gprs_light.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_hspa_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_hspa_dark.png
new file mode 100644
index 0000000..bad20a7
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_hspa_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_hspa_light.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_hspa_light.png
new file mode 100644
index 0000000..1eedc06
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_hspa_light.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_hspa_plus_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_hspa_plus_dark.png
new file mode 100644
index 0000000..2b34e39
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_hspa_plus_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_hspa_plus_light.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_hspa_plus_light.png
new file mode 100644
index 0000000..2ee0809
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_hspa_plus_light.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_lte_advanced_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_lte_advanced_dark.png
new file mode 100644
index 0000000..db3ab77
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_lte_advanced_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_lte_advanced_light.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_lte_advanced_light.png
new file mode 100644
index 0000000..66d25d3
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_lte_advanced_light.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_lte_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_lte_dark.png
new file mode 100644
index 0000000..84b7c7c
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_lte_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_lte_light.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_lte_light.png
new file mode 100644
index 0000000..29cca1d
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_lte_light.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_roaming_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_roaming_dark.png
new file mode 100644
index 0000000..f4d9bec
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_roaming_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_roaming_light.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_roaming_light.png
new file mode 100644
index 0000000..70544b6
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_roaming_light.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_secure_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_secure_dark.png
new file mode 100644
index 0000000..98b0b51
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_secure_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_network_vpn_badge.png b/ui/chromeos/resources/default_100_percent/network/statusbar_network_vpn_badge.png
new file mode 100644
index 0000000..906276e
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_network_vpn_badge.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_vpn_dark.png b/ui/chromeos/resources/default_100_percent/network/statusbar_vpn_dark.png
new file mode 100644
index 0000000..a060df3
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_vpn_dark.png
diff --git a/ui/chromeos/resources/default_100_percent/network/statusbar_wired.png b/ui/chromeos/resources/default_100_percent/network/statusbar_wired.png
new file mode 100644
index 0000000..14335f7
--- /dev/null
+++ b/ui/chromeos/resources/default_100_percent/network/statusbar_wired.png
diff --git a/ui/chromeos/resources/default_200_percent/network/status_network_failed.png b/ui/chromeos/resources/default_200_percent/network/status_network_failed.png
new file mode 100644
index 0000000..803a48e
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/status_network_failed.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_3g_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_3g_dark.png
new file mode 100644
index 0000000..e58ed2a
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_3g_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_3g_light.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_3g_light.png
new file mode 100644
index 0000000..095a889
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_3g_light.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_4g_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_4g_dark.png
new file mode 100644
index 0000000..d17ceb7
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_4g_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_4g_light.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_4g_light.png
new file mode 100644
index 0000000..e783596
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_4g_light.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_active_portal_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_active_portal_dark.png
new file mode 100644
index 0000000..b10d869
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_active_portal_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_active_portal_light.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_active_portal_light.png
new file mode 100644
index 0000000..49930ee
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_active_portal_light.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_arcs_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_arcs_dark.png
new file mode 100644
index 0000000..f3c281f
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_arcs_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_arcs_light.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_arcs_light.png
new file mode 100644
index 0000000..108249c
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_arcs_light.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_bars_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_bars_dark.png
new file mode 100644
index 0000000..548ef5f
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_bars_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_bars_light.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_bars_light.png
new file mode 100644
index 0000000..90f2232
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_bars_light.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_edge_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_edge_dark.png
new file mode 100644
index 0000000..fae8b09
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_edge_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_edge_light.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_edge_light.png
new file mode 100644
index 0000000..445bc95
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_edge_light.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_evdo_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_evdo_dark.png
new file mode 100644
index 0000000..7135146
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_evdo_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_evdo_light.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_evdo_light.png
new file mode 100644
index 0000000..55b89af
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_evdo_light.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_gprs_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_gprs_dark.png
new file mode 100644
index 0000000..c45081d
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_gprs_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_gprs_light.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_gprs_light.png
new file mode 100644
index 0000000..4277cdf
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_gprs_light.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_hspa_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_hspa_dark.png
new file mode 100644
index 0000000..bf424a3
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_hspa_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_hspa_light.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_hspa_light.png
new file mode 100644
index 0000000..ca2f707
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_hspa_light.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_hspa_plus_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_hspa_plus_dark.png
new file mode 100644
index 0000000..a3522894
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_hspa_plus_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_hspa_plus_light.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_hspa_plus_light.png
new file mode 100644
index 0000000..6e2b38b
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_hspa_plus_light.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_lte_advanced_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_lte_advanced_dark.png
new file mode 100644
index 0000000..50c496a
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_lte_advanced_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_lte_advanced_light.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_lte_advanced_light.png
new file mode 100644
index 0000000..ef9f7ce
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_lte_advanced_light.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_lte_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_lte_dark.png
new file mode 100644
index 0000000..1c72085
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_lte_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_lte_light.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_lte_light.png
new file mode 100644
index 0000000..53f9ab1
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_lte_light.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_roaming_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_roaming_dark.png
new file mode 100644
index 0000000..f59974f
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_roaming_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_roaming_light.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_roaming_light.png
new file mode 100644
index 0000000..ae7fade
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_roaming_light.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_secure_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_secure_dark.png
new file mode 100644
index 0000000..1089307
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_secure_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_network_vpn_badge.png b/ui/chromeos/resources/default_200_percent/network/statusbar_network_vpn_badge.png
new file mode 100644
index 0000000..07a0756
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_network_vpn_badge.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_vpn_dark.png b/ui/chromeos/resources/default_200_percent/network/statusbar_vpn_dark.png
new file mode 100644
index 0000000..5503851
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_vpn_dark.png
diff --git a/ui/chromeos/resources/default_200_percent/network/statusbar_wired.png b/ui/chromeos/resources/default_200_percent/network/statusbar_wired.png
new file mode 100644
index 0000000..2db7fa0
--- /dev/null
+++ b/ui/chromeos/resources/default_200_percent/network/statusbar_wired.png
diff --git a/ui/chromeos/resources/ui_chromeos_resources.grd b/ui/chromeos/resources/ui_chromeos_resources.grd
new file mode 100644
index 0000000..dff07fa
--- /dev/null
+++ b/ui/chromeos/resources/ui_chromeos_resources.grd
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<grit latest_public_release="0" current_release="1">
+  <outputs>
+    <output filename="grit/ui_chromeos_resources.h" type="rc_header" context="default_100_percent">
+      <emit emit_type='prepend'></emit>
+    </output>
+    <output filename="ui_chromeos_resources_100_percent.pak" type="data_package" context="default_100_percent" />
+    <output filename="ui_chromeos_resources_200_percent.pak" type="data_package" context="default_200_percent" />
+  </outputs>
+  <release seq="1">
+    <structures fallback_to_low_resolution="true">
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_1X" file="network/statusbar_network_1x.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_3G_DARK" file="network/statusbar_network_3g_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_3G_LIGHT" file="network/statusbar_network_3g_light.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_4G_DARK" file="network/statusbar_network_4g_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_4G_LIGHT" file="network/statusbar_network_4g_light.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_ARCS_DARK" file="network/statusbar_network_arcs_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_ARCS_LIGHT" file="network/statusbar_network_arcs_light.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_BARS_DARK" file="network/statusbar_network_bars_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_BARS_LIGHT" file="network/statusbar_network_bars_light.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_EDGE_DARK" file="network/statusbar_network_edge_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_EDGE_LIGHT" file="network/statusbar_network_edge_light.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_EVDO_DARK" file="network/statusbar_network_evdo_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_EVDO_LIGHT" file="network/statusbar_network_evdo_light.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_FAILED" file="network/status_network_failed.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_GPRS_DARK" file="network/statusbar_network_gprs_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_GPRS_LIGHT" file="network/statusbar_network_gprs_light.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_HSPA_DARK" file="network/statusbar_network_hspa_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_HSPA_LIGHT" file="network/statusbar_network_hspa_light.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_HSPA_PLUS_DARK" file="network/statusbar_network_hspa_plus_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_HSPA_PLUS_LIGHT" file="network/statusbar_network_hspa_plus_light.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_LTE_ADVANCED_DARK" file="network/statusbar_network_lte_advanced_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_LTE_ADVANCED_LIGHT" file="network/statusbar_network_lte_advanced_light.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_LTE_DARK" file="network/statusbar_network_lte_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_LTE_LIGHT" file="network/statusbar_network_lte_light.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_PORTAL_DARK" file="network/statusbar_network_active_portal_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_PORTAL_LIGHT" file="network/statusbar_network_active_portal_light.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_ROAMING_DARK" file="network/statusbar_network_roaming_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_ROAMING_LIGHT" file="network/statusbar_network_roaming_light.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_SECURE_DARK" file="network/statusbar_network_secure_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_VPN" file="network/statusbar_vpn_dark.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_VPN_BADGE" file="network/statusbar_network_vpn_badge.png" />
+      <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_NETWORK_WIRED" file="network/statusbar_wired.png" />
+    </structures>
+  </release>
+</grit>
diff --git a/ui/chromeos/ui_chromeos.gyp b/ui/chromeos/ui_chromeos.gyp
index 9a87672..ad1bf69 100644
--- a/ui/chromeos/ui_chromeos.gyp
+++ b/ui/chromeos/ui_chromeos.gyp
@@ -8,6 +8,40 @@
   },
   'targets': [
     {
+      'target_name': 'ui_chromeos_resources',
+      'type': 'none',
+      'variables': {
+        'grit_out_dir': '<(SHARED_INTERMEDIATE_DIR)/ui/chromeos/resources',
+      },
+      'actions': [
+        {
+          'action_name': 'ui_chromeos_resources',
+          'variables': {
+            'grit_grd_file': 'resources/ui_chromeos_resources.grd',
+          },
+          'includes': [ '../../build/grit_action.gypi' ],
+        },
+      ],
+      'includes': [ '../../build/grit_target.gypi' ],
+    },
+    {
+      'target_name': 'ui_chromeos_strings',
+      'type': 'none',
+      'variables': {
+        'grit_out_dir': '<(SHARED_INTERMEDIATE_DIR)/ui/chromeos/strings',
+      },
+      'actions': [
+        {
+          'action_name': 'generate_ui_chromeos_strings',
+          'variables': {
+            'grit_grd_file': 'ui_chromeos_strings.grd',
+          },
+          'includes': [ '../../build/grit_action.gypi' ],
+        },
+      ],
+      'includes': [ '../../build/grit_target.gypi' ],
+    },
+    {
       'target_name': 'ui_chromeos',
       'type': '<(component)',
       'dependencies': [
@@ -15,12 +49,20 @@
         '../../skia/skia.gyp:skia',
         '../aura/aura.gyp:aura',
         '../events/events.gyp:events',
+        '../events/events.gyp:gesture_detection',
         '../wm/wm.gyp:wm',
+        'ui_chromeos_resources',
+        'ui_chromeos_strings',
       ],
       'defines': [
         'UI_CHROMEOS_IMPLEMENTATION',
       ],
       'sources': [
+        'network/network_icon.cc',
+        'network/network_icon.h',
+        'network/network_icon_animation.cc',
+        'network/network_icon_animation.h',
+        'network/network_icon_animation_observer.h',
         'touch_exploration_controller.cc',
         'touch_exploration_controller.h',
         'user_activity_power_manager_notifier.cc',
diff --git a/ui/chromeos/ui_chromeos_strings.grd b/ui/chromeos/ui_chromeos_strings.grd
new file mode 100644
index 0000000..22a4f8f
--- /dev/null
+++ b/ui/chromeos/ui_chromeos_strings.grd
@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<grit base_dir="." latest_public_release="0" current_release="1"
+      source_lang_id="en" enc_check="möl">
+  <outputs>
+    <output filename="grit/ui_chromeos_strings.h" type="rc_header">
+      <emit emit_type='prepend'></emit>
+    </output>
+    <output filename="ui_chromeos_strings_am.pak" type="data_package" lang="am" />
+    <output filename="ui_chromeos_strings_ar.pak" type="data_package" lang="ar" />
+    <if expr="use_third_party_translations">
+      <output filename="ui_chromeos_strings_ast.pak" type="data_package" lang="ast" />
+    </if>
+    <output filename="ui_chromeos_strings_bg.pak" type="data_package" lang="bg" />
+    <output filename="ui_chromeos_strings_bn.pak" type="data_package" lang="bn" />
+    <if expr="use_third_party_translations">
+      <output filename="ui_chromeos_strings_bs.pak" type="data_package" lang="bs" />
+    </if>
+    <output filename="ui_chromeos_strings_ca.pak" type="data_package" lang="ca" />
+    <if expr="use_third_party_translations">
+      <output filename="ui_chromeos_strings_ca@valencia.pak" type="data_package" lang="ca@valencia" />
+    </if>
+    <output filename="ui_chromeos_strings_cs.pak" type="data_package" lang="cs" />
+    <output filename="ui_chromeos_strings_da.pak" type="data_package" lang="da" />
+    <output filename="ui_chromeos_strings_de.pak" type="data_package" lang="de" />
+    <output filename="ui_chromeos_strings_el.pak" type="data_package" lang="el" />
+    <if expr="use_third_party_translations">
+      <output filename="ui_chromeos_strings_en-AU.pak" type="data_package" lang="en-AU" />
+    </if>
+    <output filename="ui_chromeos_strings_en-GB.pak" type="data_package" lang="en-GB" />
+    <output filename="ui_chromeos_strings_en-US.pak" type="data_package" lang="en" />
+    <if expr="use_third_party_translations">
+      <output filename="ui_chromeos_strings_eo.pak" type="data_package" lang="eo" />
+    </if>
+    <output filename="ui_chromeos_strings_es.pak" type="data_package" lang="es" />
+    <output filename="ui_chromeos_strings_es-419.pak" type="data_package" lang="es-419" />
+    <output filename="ui_chromeos_strings_et.pak" type="data_package" lang="et" />
+    <if expr="use_third_party_translations">
+      <output filename="ui_chromeos_strings_eu.pak" type="data_package" lang="eu" />
+    </if>
+    <output filename="ui_chromeos_strings_fa.pak" type="data_package" lang="fa" />
+    <output filename="ui_chromeos_strings_fake-bidi.pak" type="data_package" lang="fake-bidi" />
+    <output filename="ui_chromeos_strings_fi.pak" type="data_package" lang="fi" />
+    <output filename="ui_chromeos_strings_fil.pak" type="data_package" lang="fil" />
+    <output filename="ui_chromeos_strings_fr.pak" type="data_package" lang="fr" />
+    <if expr="use_third_party_translations">
+      <output filename="ui_chromeos_strings_gl.pak" type="data_package" lang="gl" />
+    </if>
+    <output filename="ui_chromeos_strings_gu.pak" type="data_package" lang="gu" />
+    <output filename="ui_chromeos_strings_he.pak" type="data_package" lang="he" />
+    <output filename="ui_chromeos_strings_hi.pak" type="data_package" lang="hi" />
+    <output filename="ui_chromeos_strings_hr.pak" type="data_package" lang="hr" />
+    <output filename="ui_chromeos_strings_hu.pak" type="data_package" lang="hu" />
+    <if expr="use_third_party_translations">
+      <output filename="ui_chromeos_strings_hy.pak" type="data_package" lang="hy" />
+      <output filename="ui_chromeos_strings_ia.pak" type="data_package" lang="ia" />
+    </if>
+    <output filename="ui_chromeos_strings_id.pak" type="data_package" lang="id" />
+    <output filename="ui_chromeos_strings_it.pak" type="data_package" lang="it" />
+    <output filename="ui_chromeos_strings_ja.pak" type="data_package" lang="ja" />
+    <if expr="use_third_party_translations">
+      <output filename="ui_chromeos_strings_ka.pak" type="data_package" lang="ka" />
+    </if>
+    <output filename="ui_chromeos_strings_kn.pak" type="data_package" lang="kn" />
+    <output filename="ui_chromeos_strings_ko.pak" type="data_package" lang="ko" />
+    <if expr="use_third_party_translations">
+      <output filename="ui_chromeos_strings_ku.pak" type="data_package" lang="ku" />
+      <output filename="ui_chromeos_strings_kw.pak" type="data_package" lang="kw" />
+    </if>
+    <output filename="ui_chromeos_strings_lt.pak" type="data_package" lang="lt" />
+    <output filename="ui_chromeos_strings_lv.pak" type="data_package" lang="lv" />
+    <output filename="ui_chromeos_strings_ml.pak" type="data_package" lang="ml" />
+    <output filename="ui_chromeos_strings_mr.pak" type="data_package" lang="mr" />
+    <output filename="ui_chromeos_strings_ms.pak" type="data_package" lang="ms" />
+    <output filename="ui_chromeos_strings_nl.pak" type="data_package" lang="nl" />
+    <!-- The translation console uses 'no' for Norwegian Bokmål. It should
+         be 'nb'. -->
+    <output filename="ui_chromeos_strings_nb.pak" type="data_package" lang="no" />
+    <output filename="ui_chromeos_strings_pl.pak" type="data_package" lang="pl" />
+    <output filename="ui_chromeos_strings_pt-BR.pak" type="data_package" lang="pt-BR" />
+    <output filename="ui_chromeos_strings_pt-PT.pak" type="data_package" lang="pt-PT" />
+    <output filename="ui_chromeos_strings_ro.pak" type="data_package" lang="ro" />
+    <output filename="ui_chromeos_strings_ru.pak" type="data_package" lang="ru" />
+    <output filename="ui_chromeos_strings_sk.pak" type="data_package" lang="sk" />
+    <output filename="ui_chromeos_strings_sl.pak" type="data_package" lang="sl" />
+    <output filename="ui_chromeos_strings_sr.pak" type="data_package" lang="sr" />
+    <output filename="ui_chromeos_strings_sv.pak" type="data_package" lang="sv" />
+    <output filename="ui_chromeos_strings_sw.pak" type="data_package" lang="sw" />
+    <output filename="ui_chromeos_strings_ta.pak" type="data_package" lang="ta" />
+    <output filename="ui_chromeos_strings_te.pak" type="data_package" lang="te" />
+    <output filename="ui_chromeos_strings_th.pak" type="data_package" lang="th" />
+    <output filename="ui_chromeos_strings_tr.pak" type="data_package" lang="tr" />
+    <if expr="use_third_party_translations">
+      <output filename="ui_chromeos_strings_ug.pak" type="data_package" lang="ug" />
+    </if>
+    <output filename="ui_chromeos_strings_uk.pak" type="data_package" lang="uk" />
+    <output filename="ui_chromeos_strings_vi.pak" type="data_package" lang="vi" />
+    <output filename="ui_chromeos_strings_zh-CN.pak" type="data_package" lang="zh-CN" />
+    <output filename="ui_chromeos_strings_zh-TW.pak" type="data_package" lang="zh-TW" />
+  </outputs>
+  <release seq="1" allow_pseudo="false">
+    <messages fallback_to_english="true">
+      <message name="IDS_ASH_STATUS_TRAY_CELLULAR_SCANNING" desc="Message when scanning for cellular networks">
+        Searching for cellular networks...
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_ETHERNET" desc="The ethernet network device.">
+        Ethernet
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_INITIALIZING_CELLULAR" desc="Message for the status area when initializing the cellular device.">
+        Initializing cellular modem...
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_NETWORK_ACTIVATING" desc="Message for the network tray tooltip and default menu text when activating a network.">
+        Activating <ph name="NAME">$1<ex>YBH Cellular</ex></ph>
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_NETWORK_CONNECTED" desc="Message for the network tray tooltip and default menu text when connected to a network.">
+        Connected to <ph name="NAME">$1<ex>GoogleGuest</ex></ph>
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_NETWORK_CONNECTING" desc="Message for the network tray tooltip and default menu text when connecting to a network.">
+        Connecting to <ph name="NAME">$1<ex>GoogleGuest</ex></ph>
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_NETWORK_LIST_ACTIVATE" desc="Message for the network list to activate the network.">
+        Activate <ph name="NETWORKSERVICE">$1<ex>YBH Cellular</ex></ph>
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_NETWORK_LIST_ACTIVATING" desc="Message for the network list when activating a network.">
+        <ph name="NAME">$1<ex>YBH Cellular</ex></ph>: Activating...
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_NETWORK_LIST_CONNECTING" desc="Message for the network list when connecting to a network.">
+        <ph name="NAME">$1<ex>GoogleGuest</ex></ph>: Connecting...
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_NETWORK_NOT_CONNECTED" desc="Description in status area or network dropdown when no network is connected.">
+        No network
+      </message>
+    </messages>
+  </release>
+</grit>