[CrOS Tether] Update network iconography in settings page.

This CL changes icons such that:
(1) If no networks exist for the network type, a light-grey "0-bar" icon
    is displayed.
(2) If at least one network exists for the network type but none of them
    are connected, a light-grey icon with an X is displayed.
(3) If the network type is disabled, a darker strikethrough icon is
    displayed.
(4) If a network is connecting, the icon is animated.
(5) If a network is connected, an icon displaying the signal strength is
    displayed.

Bug: 764110, 672263
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ie433e21017bda469da81f7a297f08cf3cd515fd6
Reviewed-on: https://chromium-review.googlesource.com/762598Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#515446}

chrome/browser/resources/settings/internet_page/network_summary_item.html

@@ -36,7 +36,8 @@
     </style>
     <div actionable class="settings-box two-line" on-tap="onShowDetailsTap_">
       <div id="details" no-flex$="[[showSimInfo_(deviceState)]]">
-        <cr-network-icon network-state="[[activeNetworkState]]">
+        <cr-network-icon network-state="[[activeNetworkState]]"
+            device-state="[[deviceState]]">
         </cr-network-icon>
         <div class="flex">
           <div id="networkName">[[getNetworkName_(activeNetworkState)]]</div>

ui/webui/resources/cr_elements/chromeos/network/cellular_0_with_x.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g fill="none" transform="translate(2 2)">
+    <polygon fill="#000" fill-opacity=".3" points="0 17 17 17 17 0"/>
+    <polygon fill="#B2B2B2" points="5.917 .671 5.329 .083 3 2.413 .671 .083 .083 .671 2.413 3 .083 5.329 .671 5.917 3 3.587 5.329 5.917 5.917 5.329 3.587 3"/>
+  </g>
+</svg>

ui/webui/resources/cr_elements/chromeos/network/cr_network_icon.html

@@ -50,6 +50,11 @@
       }
 
       /* Wi-Fi images */
+      #icon.wifi-not-connected {
+        background: url(wifi_0_with_x.svg);
+      }
+
+      #icon.wifi-no-network,
       #icon.wifi-0 {
         background: url(wifi_0.svg);
       }
@@ -89,6 +94,11 @@
       }
 
       /* Cellular images */
+      #icon.cellular-not-connected {
+        background: url(cellular_0_with_x.svg);
+      }
+
+      #icon.cellular-no-network,
       #icon.cellular-0 {
         background: url(cellular_0.svg);
       }

ui/webui/resources/cr_elements/chromeos/network/cr_network_icon.js

@@ -19,6 +19,12 @@ Polymer({
      */
     networkState: Object,
 
+    /**
+     * If set, the device state for the network type.
+     * @type {!CrOnc.DeviceStateProperties|undefined}
+     */
+    deviceState: Object,
+
     /**
      * If true, the icon is part of a list of networks and may be displayed
      * differently, e.g. the disconnected image will never be shown for
@@ -46,17 +52,26 @@ Polymer({
     var prefix = (type == CrOnc.Type.CELLULAR || type == CrOnc.Type.TETHER) ?
         'cellular-' :
         'wifi-';
+    if (!this.isListItem && !this.networkState.GUID) {
+      var deviceState = this.deviceState;
+      if (!deviceState || deviceState.State == 'Enabled' ||
+          deviceState.State == 'Enabling') {
+        return prefix + 'no-network';
+      }
+      return prefix + 'off';
+    }
+
     var connectionState = this.networkState.ConnectionState;
     if (connectionState == CrOnc.ConnectionState.CONNECTING)
       return prefix + 'connecting';
-    var strength;
+
     if (!this.isListItem &&
         (!connectionState ||
          connectionState == CrOnc.ConnectionState.NOT_CONNECTED)) {
-      return prefix + 'off';
-    } else {
-      strength = CrOnc.getSignalStrength(this.networkState);
+      return prefix + 'not-connected';
     }
+
+    var strength = CrOnc.getSignalStrength(this.networkState);
     return prefix + this.strengthToIndex_(strength).toString(10);
   },
 

ui/webui/resources/cr_elements/chromeos/network/wifi_0_with_x.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#000" fill-opacity=".3" fill-rule="nonzero" d="M14.6412814,12 L19.7888889,5.58888889 C19.4111111,5.3 15.6444444,2.22222222 10,2.22222222 C4.35555556,2.22222222 0.588888889,5.3 0.211111111,5.58888889 L9.98888889,17.7666667 L10.0111111,17.7666667 L12,15.289596 L12,12 L14.6412814,12 Z"/>
+    <polygon points="0 0 20 0 20 20 0 20"/>
+    <polygon fill="#B2B2B2" fill-rule="nonzero" points="18.833 13.588 18.246 13 15.917 15.329 13.588 13 13 13.588 15.329 15.917 13 18.246 13.588 18.833 15.917 16.504 18.246 18.833 18.833 18.246 16.504 15.917"/>
+  </g>
+</svg>

ui/webui/resources/cr_elements_images.grdp

@@ -56,6 +56,9 @@
     <include name="IDR_CR_ELEMENTS_VIDEOCAM_SHUTTER_ICON_SVG"
              file="cr_elements/chromeos/cr_picture/videocam_shutter_icon.svg"
              type="BINDATA" />
+    <include name="IDR_CR_ELEMENTS_CELLULAR_0_WITH_X_SVG"
+             file="cr_elements/chromeos/network/cellular_0_with_x.svg"
+             type="BINDATA" />
     <include name="IDR_CR_ELEMENTS_CELLULAR_0_SVG"
              file="cr_elements/chromeos/network/cellular_0.svg"
              type="BINDATA" />
@@ -78,6 +81,9 @@
              file="cr_elements/chromeos/network/ethernet.svg" type="BINDATA" />
     <include name="IDR_CR_ELEMENTS_VPN_SVG"
              file="cr_elements/chromeos/network/vpn.svg" type="BINDATA" />
+    <include name="IDR_CR_ELEMENTS_WIFI_0_WITH_X_SVG"
+             file="cr_elements/chromeos/network/wifi_0_with_x.svg"
+             type="BINDATA" />
     <include name="IDR_CR_ELEMENTS_WIFI_0_SVG"
              file="cr_elements/chromeos/network/wifi_0.svg" type="BINDATA" />
     <include name="IDR_CR_ELEMENTS_WIFI_1_SVG"