MD Settings: Switch cr_network_icon to use svg icons

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

Index: ui/webui/resources/cr_elements/network/cr_network_icon.js
diff --git a/ui/webui/resources/cr_elements/network/cr_network_icon.js b/ui/webui/resources/cr_elements/network/cr_network_icon.js
index 4bccaf7dd08e9fd4da44e921a9c86acc0b0aadb3..3f946aac45287b17bb7012037d554d355b3f72f2 100644
--- a/ui/webui/resources/cr_elements/network/cr_network_icon.js
+++ b/ui/webui/resources/cr_elements/network/cr_network_icon.js
@@ -7,292 +7,143 @@
  * state properties.
  */
 
-/**
- * @typedef {{
- *   showBadges: boolean,
- *   showDisconnected: boolean,
- *   strength: number
- * }}
- */
-var NetworkIconParamType;
-
-(function() {
-  /** @const {string} */ var RESOURCE_IMAGE_BASE =
-      'chrome://resources/cr_elements/network/';
-
-  /** @const {string} */ var RESOURCE_IMAGE_EXT = '.png';
-
-  /**
- * Gets the icon type from the network type. This allows multiple types
- * (i.e. Cellular, WiMAX) to map to the same icon type (i.e. mobile).
- * @param {chrome.networkingPrivate.NetworkType} networkType
- * @return {string} The icon type: ethernet, wifi, mobile, or vpn.
- */
-  function getIconTypeFromNetworkType(networkType) {
-    if (!networkType || networkType == CrOnc.Type.ETHERNET)
-      return 'ethernet';
-    else if (networkType == CrOnc.Type.WI_FI)
-      return 'wifi';
-    else if (networkType == CrOnc.Type.CELLULAR)
-      return 'mobile';
-    else if (networkType == CrOnc.Type.WI_MAX)
-      return 'mobile';
-    else if (networkType == CrOnc.Type.VPN)
-      return 'vpn';
-
-    console.error('Unrecognized network type for icon: ' + networkType);
-    return 'ethernet';
-  }
-
-  /**
-   * Polymer class definition for 'cr-network-icon'.
-   */
-  Polymer({
-    is: 'cr-network-icon',
-
-    properties: {
-      /**
-       * If set, the ONC properties will be used to display the icon. This may
-       * either be the complete set of NetworkProperties or the subset of
-       * NetworkStateProperties.
-       * @type
-       * {!CrOnc.NetworkProperties|!CrOnc.NetworkStateProperties|undefined}
-       */
-      networkState: {
-        type: Object,
-        observer: 'networkStateChanged_',
-      },
-
-      /**
-       * If set, the ONC network type will be used to display the icon.
-       * @type {?chrome.networkingPrivate.NetworkType}
-       */
-      networkType: {
-        type: String,
-        value: null,
-        observer: 'networkTypeChanged_',
-      },
-
-      /**
-       * 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
-       * list items.
-       */
-      isListItem: {
-        type: Boolean,
-        value: false,
-        observer: 'isListItemChanged_',
-      },
-
-      /** The icon type to use for the base image of the icon. */
-      iconType_: {
-        type: String,
-        value: 'ethernet',
-      },
-
-      /** Set to true to show a badge for roaming networks. */
-      roaming_: {
-        type: Boolean,
-        value: false,
-      },
-
-      /** Set to true to show a badge for secure networks. */
-      secure_: {
-        type: Boolean,
-        value: false,
-      },
-
-      /** Set to the name of a technology to show show a badge. */
-      technology_: {
-        type: String,
-        value: '',
-      },
-    },
-
-    /**
-     * Polymer networkState changed method. Updates the icon based on the
-     * network state.
-     * @private
-     */
-    networkStateChanged_: function() {
-      if (!this.networkState)
-        return;
-
-      this.networkType = null;
-      this.iconType_ = getIconTypeFromNetworkType(this.networkState.Type);
-      var strength = CrOnc.getSignalStrength(this.networkState);
-      var params = /** @type {NetworkIconParamType} */ {
-        showBadges: true,
-        showDisconnected: !this.isListItem,
-        strength: strength
-      };
-      this.setIcon_(params);
-    },
+Polymer({
+  is: 'cr-network-icon',
 
+  properties: {
     /**
-     * Polymer networkType changed method. Updates the icon based on the type
-     * of network, showing a disconnected icon where appropriate and no badges.
-     * @private
+     * If set, the ONC properties will be used to display the icon. This may
+     * either be the complete set of NetworkProperties or the subset of
+     * NetworkStateProperties.
+     * @type {!CrOnc.NetworkProperties|!CrOnc.NetworkStateProperties|undefined}
      */
-    networkTypeChanged_: function() {
-      if (!this.networkType)
-        return;
-
-      this.networkState = undefined;
-      this.iconType_ = getIconTypeFromNetworkType(this.networkType);
-      var params = /** @type {NetworkIconParamType} */ {
-        showBadges: false,
-        showDisconnected: true,
-        strength: 0,
-      };
-      this.setIcon_(params);
-    },
+    networkState: Object,
 
     /**
-     * Polymer isListItem changed method.
-     * @private
+     * 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
+     * list items.
      */
-    isListItemChanged_: function() {
-      if (this.networkState)
-        this.networkStateChanged_();
-      else if (this.networkType)
-        this.networkTypeChanged_();
+    isListItem: {
+      type: Boolean,
+      value: false,
     },
+  },
 
-    /**
-   * Returns the url for an image based on identifier |id|.
-   * @param {string} id The identifier describing the image.
-   * @return {string} The url to use for the image 'src' property.
+  /**
+   * @return {string} The name of the svg icon image to show.
    * @private
    */
-    toImageSrc_: function(id) {
-      return id ? RESOURCE_IMAGE_BASE + id + RESOURCE_IMAGE_EXT : '';
-    },
+  getIcon_: function() {
+    let showDisconnected =
+        !this.isListItem && (!this.networkState.ConnectionState ||
+                             this.networkState.ConnectionState ==
+                                 CrOnc.ConnectionState.NOT_CONNECTED);
+
+    switch (this.networkState.Type) {
+      case CrOnc.Type.ETHERNET: {
+        return 'network:settings-ethernet';
+      }
+      case CrOnc.Type.VPN: {
+        return 'network:vpn-key';
+      }
+      case CrOnc.Type.CELLULAR: {
+        let strength =
+            showDisconnected ? 0 : CrOnc.getSignalStrength(this.networkState);
+        let index = this.strengthToIndex_(strength);
+        return 'network:signal-cellular-' + index.toString(10) + '-bar';
+      }
+      case CrOnc.Type.WI_FI:
+      case CrOnc.Type.WI_MAX: {
+        if (showDisconnected)
+          return 'network:signal-wifi-off';
+        let strength = CrOnc.getSignalStrength(this.networkState);
+        let index = this.strengthToIndex_(strength);
+        return 'network:signal-wifi-' + index.toString(10) + '-bar';
+      }
+      default:
+        assertNotReached();
+    }
+    return '';
+  },
 
-    /**
-   * Returns the url for a badge image based on identifier |id|.
-   * @param {string} id The identifier describing the badge.
-   * @return {string} The url to use for the badge image 'src' property.
+  /**
+   * @param {number} strength The signal strength from [0 - 100].
+   * @return {number} An index from 0-4 corresponding to |strength|.
    * @private
    */
-    toBadgeImageSrc_: function(id) {
-      return id ? this.toImageSrc_('badge_' + id) : '';
-    },
-
-    /**
-     * Sets the icon and badge based on the current state and |strength|.
-     * @param {!NetworkIconParamType} params Set of params describing the icon.
-     * @private
-     */
-    setIcon_: function(params) {
-      var icon = this.$.icon;
-
-      var multiLevel = (this.iconType_ == 'wifi' || this.iconType_ == 'mobile');
-
-      if (this.networkState && multiLevel) {
-        this.setMultiLevelIcon_(params);
-      } else {
-        icon.classList.toggle('multi-level', multiLevel);
-        icon.classList.toggle('level0', multiLevel);
-        icon.classList.toggle('level1', false);
-        icon.classList.toggle('level2', false);
-        icon.classList.toggle('level3', false);
-        icon.classList.toggle('level4', false);
-      }
-
-      this.setIconBadges_(params);
-    },
-
-    /**
-     * Toggles icon classes based on strength and connecting properties.
-     * |this.networkState| is expected to be specified.
-     * @param {!NetworkIconParamType} params Set of params describing the icon.
-     * @private
-     */
-    setMultiLevelIcon_: function(params) {
-      // Set the strength or connecting properties.
-      var networkState = this.networkState;
+  strengthToIndex_: function(strength) {
+    if (strength == 0)
+      return 0;
+    return Math.min(Math.trunc((strength - 1) / 25) + 1, 4);
+  },
 
-      var connectionState = networkState.ConnectionState;
-      var connecting = false;
-      var strength = -1;
-      if (connectionState == CrOnc.ConnectionState.CONNECTING) {
-        strength = 0;
-        connecting = true;
-      } else if (
-          connectionState == CrOnc.ConnectionState.CONNECTED ||
-          !params.showDisconnected) {
-        strength = params.strength || 0;
-      }
+  /**
+   * @return {boolean}
+   * @private
+   */
+  showTechnology_: function() {

[Dan Beam, 2017/01/05 02:49:13]

you can probably use [[getTechnology_()]] directly in a binding

[stevenjb, 2017/01/05 17:37:37]

Acknowledged.

+    return this.getTechnology_() != '';
+  },
 
-      var icon = this.$.icon;
-      icon.classList.toggle('multi-level', true);
-      icon.classList.toggle('connecting', connecting);
-      icon.classList.toggle('level0', strength < 0);
-      icon.classList.toggle('level1', strength >= 0 && strength <= 25);
-      icon.classList.toggle('level2', strength > 25 && strength <= 50);
-      icon.classList.toggle('level3', strength > 50 && strength <= 75);
-      icon.classList.toggle('level4', strength > 75);
-    },
+  /**
+   * @return {string}
+   * @private
+   */
+  getTechnology_: function() {
+    let networkState = this.networkState;
+    let type = networkState.Type;
+    if (type == CrOnc.Type.WI_MAX)
+      return 'network:4g';
+    if (type == CrOnc.Type.CELLULAR && networkState.Cellular) {
+      let technology =
+          this.getTechnologyId_(networkState.Cellular.NetworkTechnology);
+      if (technology != '')
+        return 'network:' + technology;
+    }
+    return '';
+  },
 
-    /**
-     * Sets the icon badge visibility properties: roaming, secure, technology.
-     * @param {!NetworkIconParamType} params Set of params describing the icon.
-     * @private
-     */
-    setIconBadges_: function(params) {
-      var networkState = this.networkState;
+  /**
+   * @param {string|undefined} networkTechnology
+   * @return {string}
+   * @private
+   */
+  getTechnologyId_: function(networkTechnology) {
+    switch (networkTechnology) {
+      case CrOnc.NetworkTechnology.CDMA1XRTT:
+        return 'badge-1x';
+      case CrOnc.NetworkTechnology.EDGE:
+        return 'badge-edge';
+      case CrOnc.NetworkTechnology.EVDO:
+        return 'badge-evdo';
+      case CrOnc.NetworkTechnology.GPRS:
+      case CrOnc.NetworkTechnology.GSM:
+        return 'badge-gsm';
+      case CrOnc.NetworkTechnology.HSPA:
+        return 'badge-hspa';
+      case CrOnc.NetworkTechnology.HSPA_PLUS:
+        return 'badge-hspa-plus';
+      case CrOnc.NetworkTechnology.LTE:
+        return 'badge-lte';
+      case CrOnc.NetworkTechnology.LTE_ADVANCED:
+        return 'badge-lte-advanced';
+      case CrOnc.NetworkTechnology.UMTS:
+        return 'badge-3g';
+    }
+    return '';
+  },
 
-      var type = (params.showBadges && networkState) ? networkState.Type : '';
-      if (type == CrOnc.Type.WI_FI) {
-        this.roaming_ = false;
-        var security = networkState.WiFi ? networkState.WiFi.Security : '';
-        this.secure_ = !!security && security != 'None';
-        this.technology_ = '';
-      } else if (type == CrOnc.Type.WI_MAX) {
-        this.roaming_ = false;
-        this.secure_ = false;
-        this.technology_ = '4g';
-      } else if (type == CrOnc.Type.CELLULAR && networkState.Cellular) {
-        this.roaming_ =
-            networkState.Cellular.RoamingState == CrOnc.RoamingState.ROAMING;
-        this.secure_ = false;
-        var oncTechnology = networkState.Cellular.NetworkTechnology;
-        switch (oncTechnology) {
-          case CrOnc.NetworkTechnology.CDMA1XRTT:
-            this.technology_ = '1x';
-            break;
-          case CrOnc.NetworkTechnology.EDGE:
-            this.technology_ = 'edge';
-            break;
-          case CrOnc.NetworkTechnology.EVDO:
-            this.technology_ = 'evdo';
-            break;
-          case CrOnc.NetworkTechnology.GPRS:
-          case CrOnc.NetworkTechnology.GSM:
-            this.technology_ = 'gsm';
-            break;
-          case CrOnc.NetworkTechnology.HSPA:
-            this.technology_ = 'hspa';
-            break;
-          case CrOnc.NetworkTechnology.HSPA_PLUS:
-            this.technology_ = 'hspa_plus';
-            break;
-          case CrOnc.NetworkTechnology.LTE:
-            this.technology_ = 'lte';
-            break;
-          case CrOnc.NetworkTechnology.LTE_ADVANCED:
-            this.technology_ = 'lte_advanced';
-            break;
-          case CrOnc.NetworkTechnology.UMTS:
-            this.technology_ = '3g';
-            break;
-        }
-      } else {
-        this.roaming_ = false;
-        this.secure_ = false;
-        this.technology_ = '';
-      }
-    },
-  });
-})();
+  /**
+   * @return {boolean}
+   * @private
+   */
+  showSecure_: function() {
+    let networkState = this.networkState;
+    if (networkState.Type == CrOnc.Type.WI_FI && networkState.WiFi) {
+      let security = networkState.WiFi.Security;
+      return !!security && security != 'None';
+    }
+    return false;
+  },
+});