Update icons for network settings.

BUG=chromium:113685
TEST=

Review URL: https://chromiumcodereview.appspot.com/9816018

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

chrome/app/theme/theme_resources.grd

@@ -480,6 +480,7 @@
         <include name="IDR_STATUSBAR_BATTERY_LARGE_ALL" file="statusbar_battery_large_all.png" type="BINDATA" />
         <include name="IDR_STATUSBAR_BATTERY_SMALL_ALL" file="statusbar_battery_small_all.png" type="BINDATA" />
         <include name="IDR_STATUSBAR_CAPS_LOCK" file="statusbar_caps_lock.png" type="BINDATA" />
+        <include name="IDR_STATUSBAR_EDIT" file="statusbar_edit.png" type="BINDATA" />
         <include name="IDR_STATUSBAR_MENU" file="statusbar_menu.png" type="BINDATA" />
         <include name="IDR_STATUSBAR_NETWORK_3G" file="statusbar_network_3g.png" type="BINDATA" />
         <include name="IDR_STATUSBAR_NETWORK_3G_WARN" file="statusbar_network_3g_warn.png" type="BINDATA" />
@@ -510,6 +511,7 @@
         <include name="IDR_STATUSBAR_VOLUME_SLIDER_EMPTY" file="statusbar_volume_slider_empty.png" type="BINDATA" />
         <include name="IDR_STATUSBAR_VOLUME_SLIDER_FULL" file="statusbar_volume_slider_full.png" type="BINDATA" />
         <include name="IDR_STATUSBAR_VOLUME_SLIDER_THUMB" file="statusbar_volume_slider_thumb.png" type="BINDATA" />
+        <include name="IDR_STATUSBAR_VPN" file="statusbar_vpn_dark.png" type="BINDATA" />
         <include name="IDR_STATUSBAR_WINDOW_MAXIMIZE" file="statusbar_window_maximize.png" type="BINDATA" />
         <include name="IDR_STATUSBAR_WINDOW_RESTORE" file="statusbar_window_restore.png" type="BINDATA" />
         <include name="IDR_STATUSBAR_WIRED" file="statusbar_wired.png" type="BINDATA" />

chrome/browser/resources/options2/browser_options.css

@@ -187,6 +187,10 @@ list:not([disabled]) > .network-group[selected] {
   background-image: url('chrome://theme/IDR_STATUSBAR_NETWORK_BARS');
 }
 
+.network-vpn {
+  background-image: url('chrome://theme/IDR_STATUSBAR_VPN');
+}
+
 .network-add-connection,
 .network-control-active,
 .network-control-inactive {
@@ -211,13 +215,18 @@ list:not([disabled]) > .network-group[selected] {
 .network-options-button {
   -webkit-box-flex: 0;
   -webkit-transform: scale(0.6);
-  background-image: url('chrome://theme/IDR_INFOBAR_QUESTION_MARK');
+  background-image: none;
   background-position: center center;
   display: block;
+  opacity: 0.5;
   vertical-align: middle;
   width: 19px;
 }
 
+.network-menu-item:hover .network-options-button {
+  background-image: url('chrome://theme/IDR_STATUSBAR_EDIT');
+}
+
 .network-group > .controlled-setting-indicator,
 .network-menu-item > .controlled-setting-indicator {
   -webkit-box-flex: 0;
@@ -233,16 +242,26 @@ list:not([disabled]) > .network-group[selected] {
 }
 
 .network-options-button:hover {
-  /* TODO(kevers): Update once proper assets received for the options
-     button. */
-  border: 2px solid #333;
-  border-radius: 10px;
+  opacity: 1;
+}
+
+@-webkit-keyframes vpn-connecting-animation {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.2;
+  }
 }
 
 .network-connecting {
   -webkit-animation: connecting-animation 1s step-end infinite;
 }
 
+.network-vpn.network-connecting {
+  -webkit-animation: vpn-connecting-animation 500ms alternate infinite;
+}
+
 .network-title {
   font-weight: 600;
   line-height: 120%;

chrome/browser/resources/options2/chromeos/network_list.js

@@ -886,7 +886,6 @@ cr.define('options.network', function() {
       loadData_('vpn', data.vpnList, data.rememberedList);
     else
       networkList.deleteItem('vpn');
-
     networkList.updateToggleControl('airplaneMode', data.airplaneMode);
 
     networkList.invalidate();