Use cr-network-icon in Internet Settings

This CL is dependent on https://codereview.chromium.org/874283006/

This eliminates a lot of sub-optimal code which converts icons to urls
and passes them from Chrome to the settings UI.

BUG=459276

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

Cr-Commit-Position: refs/heads/master@{#319312}

7 files changed, 105 insertions, 149 deletions

diff --git a/chrome/browser/resources/chromeos/network_ui/network_ui.js b/chrome/browser/resources/chromeos/network_ui/network_ui.js
index cff1144..35780ea 100644
--- a/chrome/browser/resources/chromeos/network_ui/network_ui.js
+++ b/chrome/browser/resources/chromeos/network_ui/network_ui.js
@@ -36,20 +36,6 @@ var NetworkUI = (function() {
   ];
 
   /**
-   * Creates and returns a typed cr-onc-data Polymer element for connecting to
-   * cr-network-icon elements. Sets the data property of the element to |state|.
-   *
-   * @param {!CrOnc.NetworkConfigType} state The network state properties.
-   * @return {!CrOncDataElement} A cr-onc-data element.
-   */
-  var createNetworkState = function(state) {
-    var oncData = /** @type {!CrOncDataElement} */(
-        document.createElement('cr-onc-data'));
-    oncData.data = state;
-    return oncData;
-  };
-
-  /**
    * Creates and returns a typed HTMLTableCellElement.
    *
    * @return {!HTMLTableCellElement} A new td element.
@@ -124,7 +110,7 @@ var NetworkUI = (function() {
     var icon = /** @type {!CrNetworkIconElement} */(
         document.createElement('cr-network-icon'));
     icon.isListItem = true;
-    icon.networkState = createNetworkState(networkState);
+    icon.networkState = CrOncDataElement.create(networkState);
     cell.appendChild(icon);
     return cell;
   };
@@ -219,7 +205,7 @@ var NetworkUI = (function() {
           loadTimeData.getStringF('defaultNetworkText',
                                   defaultState.Name,
                                   defaultState.ConnectionState);
-      icon.networkState = createNetworkState(defaultState);
+      icon.networkState = CrOncDataElement.create(defaultState);
     } else {
       $('default-network-text').textContent =
           loadTimeData.getString('noNetworkText');
diff --git a/chrome/browser/resources/options/browser_options.css b/chrome/browser/resources/options/browser_options.css
index 6480203..4d9bf4d 100644
--- a/chrome/browser/resources/options/browser_options.css
+++ b/chrome/browser/resources/options/browser_options.css
@@ -244,17 +244,19 @@ list:not([disabled]) > .network-group[selected] {
   padding-top: 3px;
 }
 
-.network-icon,
-.network-menu-item-icon {
+.network-icon {
   -webkit-margin-end: 8px;
   background-position: left top;
   background-size: 25px;
   height: 25px;
+  line-height: normal;
+  white-space: normal;
   width: 25px;
 }
 
-.other-cellulars > .network-menu-item-icon {
-  background-position: left top;
+.network-icon cr-network-icon {
+  height: 100%;
+  width: 100%;
 }
 
 @-webkit-keyframes connecting-animation {
diff --git a/chrome/browser/resources/options/browser_options.html b/chrome/browser/resources/options/browser_options.html
index 1d47e66..9c56f5c 100644
--- a/chrome/browser/resources/options/browser_options.html
+++ b/chrome/browser/resources/options/browser_options.html
@@ -5,6 +5,8 @@
   <include src="reset_profile_settings_banner.html">
   <include src="automatic_settings_reset_banner.html">
 <if expr="chromeos">
+  <link rel="import" href="chrome://resources/cr_elements/cr_network_icon/cr_network_icon.html">
+  <link rel="import" href="chrome://resources/cr_elements/cr_onc/cr_onc_data.html">
   <include src="secondary_user_banner.html">
   <section>
     <div id="network-section-header" class="section-header">
diff --git a/chrome/browser/resources/options/chromeos/network_list.js b/chrome/browser/resources/options/chromeos/network_list.js
index af4bfbc..5086597 100644
--- a/chrome/browser/resources/options/chromeos/network_list.js
+++ b/chrome/browser/resources/options/chromeos/network_list.js
@@ -3,9 +3,13 @@
 // found in the LICENSE file.
 
 /**
+ * This partially describes the network list entries passed to
+ * refreshNetworkData. The contents of those lists actually match
+ * CrOnc.NetworkConfigType with the addition of the policyManaged and
+ * servicePath properties. TODO(stevenjb): Use networkingPrivate.getNetworks.
  * @typedef {{
  *   ConnectionState: string,
- *   iconURL: string,
+ *   Type: string,
  *   policyManaged: boolean,
  *   servicePath: string
  * }}
@@ -36,6 +40,20 @@ cr.define('options.network', function() {
   Constants.ACTIVATION_STATE_PARTIALLY_ACTIVATED = 4;
 
   /**
+   * Valid network type names.
+   */
+  Constants.NETWORK_TYPES = ['Ethernet', 'WiFi', 'WiMAX', 'Cellular', 'VPN'];
+
+  /**
+   * Helper function to check whether |type| is a valid network type.
+   * @param {string} type A string that may contain a valid network type.
+   * @return {boolean} Whether the string represents a valid network type.
+   */
+  function isNetworkType(type) {
+    return (Constants.NETWORK_TYPES.indexOf(type) != -1);
+  }
+
+  /**
    * Order in which controls are to appear in the network list sorted by key.
    */
   Constants.NETWORK_ORDER = ['Ethernet',
@@ -109,13 +127,6 @@ cr.define('options.network', function() {
   var enableDataRoaming_ = false;
 
   /**
-   * Icon to use when not connected to a particular type of network.
-   * @type {!Object<string, string>} Mapping of network type to icon data url.
-   * @private
-   */
-  var defaultIcons_ = {};
-
-  /**
    * Returns the display name for 'network'.
    * @param {Object} data The network data dictionary.
    */
@@ -185,18 +196,11 @@ cr.define('options.network', function() {
     subtitle_: null,
 
     /**
-     * Icon for the network control.
+     * Div containing the list item icon.
      * @type {?Element}
      * @private
      */
-    icon_: null,
-
-    /**
-     * Indicates if in the process of connecting to a network.
-     * @type {boolean}
-     * @private
-     */
-    connecting_: false,
+    iconDiv_: null,
 
     /**
      * Description of the network control.
@@ -217,42 +221,51 @@ cr.define('options.network', function() {
     },
 
     /**
-     * URL for the network icon.
-     * @type {string}
+     * Sets the icon based on a network state object.
+     * @param {!Object} data Object containing network state data.
      */
-    set iconURL(iconURL) {
-      this.icon_.style.backgroundImage = url(iconURL);
+    set iconData(data) {
+      if (!isNetworkType(data.Type))
+        return;
+      var networkIcon = this.getNetworkIcon();
+      networkIcon.networkState = CrOncDataElement.create(
+          /** @type {CrOnc.NetworkConfigType} */ (data));
     },
 
     /**
-     * Type of network icon.  Each type corresponds to a CSS rule.
+     * Sets the icon based on a network type or a special type indecator, e.g.
+     * 'add-connection'
      * @type {string}
      */
     set iconType(type) {
-      if (defaultIcons_[type])
-        this.iconURL = defaultIcons_[type];
-      else
-        this.icon_.classList.add('network-' + type.toLowerCase());
-    },
-
-    /**
-     * Indicates if the network is in the process of being connected.
-     * @type {boolean}
-     */
-    set connecting(state) {
-      this.connecting_ = state;
-      if (state)
-        this.icon_.classList.add('network-connecting');
-      else
-        this.icon_.classList.remove('network-connecting');
+      if (isNetworkType(type)) {
+        var networkIcon = this.getNetworkIcon();
+        networkIcon.networkType = type;
+      } else {
+        // Special cases. e.g. 'add-connection'. Background images are
+        // defined in browser_options.css.
+        var oldIcon = /** @type {CrNetworkIconElement} */ (
+            this.iconDiv_.querySelector('cr-network-icon'));
+        if (oldIcon)
+          this.iconDiv_.removeChild(oldIcon);
+        this.iconDiv_.classList.add('network-' + type.toLowerCase());
+      }
     },
 
     /**
-     * Indicates if the network is in the process of being connected.
-     * @type {boolean}
+     * Returns any existing network icon for the list item or creates a new one.
+     * @return {!CrNetworkIconElement} The network icon for the list item.
      */
-    get connecting() {
-      return this.connecting_;
+    getNetworkIcon: function() {
+      var networkIcon = /** @type {CrNetworkIconElement} */ (
+          this.iconDiv_.querySelector('cr-network-icon'));
+      if (!networkIcon) {
+        networkIcon = /** @type {!CrNetworkIconElement} */ (
+            document.createElement('cr-network-icon'));
+        networkIcon.isListItem = false;
+        this.iconDiv_.appendChild(networkIcon);
+      }
+      return networkIcon;
     },
 
     /**
@@ -281,9 +294,9 @@ cr.define('options.network', function() {
     decorate: function() {
       ListItem.prototype.decorate.call(this);
       this.className = 'network-group';
-      this.icon_ = this.ownerDocument.createElement('div');
-      this.icon_.className = 'network-icon';
-      this.appendChild(this.icon_);
+      this.iconDiv_ = this.ownerDocument.createElement('div');
+      this.iconDiv_.className = 'network-icon';
+      this.appendChild(this.iconDiv_);
       var textContent = this.ownerDocument.createElement('div');
       textContent.className = 'network-group-labels';
       this.appendChild(textContent);
@@ -434,7 +447,7 @@ cr.define('options.network', function() {
       var policyManaged = false;
       this.subtitle = loadTimeData.getString('OncConnectionStateNotConnected');
       var list = this.data_.networkList;
-      var candidateURL = null;
+      var candidateData = null;
       for (var i = 0; i < list.length; i++) {
         var networkDetails = list[i];
         if (networkDetails.ConnectionState == 'Connecting' ||
@@ -442,19 +455,16 @@ cr.define('options.network', function() {
           this.subtitle = getNetworkName(networkDetails);
           this.setSubtitleDirection('ltr');
           policyManaged = networkDetails.policyManaged;
-          candidateURL = networkDetails.iconURL;
+          candidateData = networkDetails;
           // Only break when we see a connecting network as it is possible to
           // have a connected network and a connecting network at the same
           // time.
-          if (networkDetails.ConnectionState == 'Connecting') {
-            this.connecting = true;
-            candidateURL = null;
+          if (networkDetails.ConnectionState == 'Connecting')
             break;
-          }
         }
       }
-      if (candidateURL)
-        this.iconURL = candidateURL;
+      if (candidateData)
+        this.iconData = candidateData;
       else
         this.iconType = this.data.key;
 
@@ -715,8 +725,7 @@ cr.define('options.network', function() {
       var menuItem = createCallback_(parent,
                                      data,
                                      getNetworkName(data),
-                                     showDetails.bind(null, servicePath),
-                                     data.iconURL);
+                                     showDetails.bind(null, servicePath));
       if (data.policyManaged)
         menuItem.appendChild(new ManagedNetworkIndicator());
       if (data.ConnectionState == 'Connected' ||
@@ -753,8 +762,8 @@ cr.define('options.network', function() {
        this.subtitle = null;
       if (this.data.command)
         this.addEventListener('click', this.data.command);
-      if (this.data.iconURL)
-        this.iconURL = this.data.iconURL;
+      if (this.data.iconData)
+        this.iconData = this.data.iconData;
       else if (this.data.iconType)
         this.iconType = this.data.iconType;
       if (this.data.policyManaged)
@@ -768,19 +777,23 @@ cr.define('options.network', function() {
    * @param {Object} data Description of the network.
    * @param {!string} label Display name for the menu item.
    * @param {!Function} command Callback function.
-   * @param {string=} opt_iconURL Optional URL to an icon for the menu item.
    * @return {!Element} The created menu item.
    * @private
    */
-  function createCallback_(menu, data, label, command, opt_iconURL) {
+  function createCallback_(menu, data, label, command) {
     var button = menu.ownerDocument.createElement('div');
     button.className = 'network-menu-item';
 
-    var buttonIcon = menu.ownerDocument.createElement('div');
-    buttonIcon.className = 'network-menu-item-icon';
-    button.appendChild(buttonIcon);
-    if (opt_iconURL)
-      buttonIcon.style.backgroundImage = url(opt_iconURL);
+    var buttonIconDiv = menu.ownerDocument.createElement('div');
+    buttonIconDiv.className = 'network-icon';
+    button.appendChild(buttonIconDiv);
+    if (data && isNetworkType(data.Type)) {
+      var networkIcon = /** @type {!CrNetworkIconElement} */ (
+          document.createElement('cr-network-icon'));
+      buttonIconDiv.appendChild(networkIcon);
+      networkIcon.isListItem = true;
+      networkIcon.networkState = CrOncDataElement.create(data);
+    }
 
     var buttonLabel = menu.ownerDocument.createElement('span');
     buttonLabel.className = 'network-menu-item-label';
@@ -986,23 +999,13 @@ cr.define('options.network', function() {
       var index = this.indexOf(key);
       if (index != undefined) {
         var entry = this.dataModel.item(index);
-        entry.iconType = active ? 'control-active' :
-            'control-inactive';
+        entry.iconType = active ? 'control-active' : 'control-inactive';
         this.update(entry);
       }
     }
   };
 
   /**
-   * Sets the default icon to use for each network type if disconnected.
-   * @param {!Object<string, string>} data Mapping of network type to icon
-   *     data url.
-   */
-  NetworkList.setDefaultNetworkIcons = function(data) {
-    defaultIcons_ = Object.create(data);
-  };
-
-  /**
    * Chrome callback for updating network controls.
    * @param {{cellularAvailable: boolean,
    *          cellularEnabled: boolean,
@@ -1041,7 +1044,7 @@ cr.define('options.network', function() {
       networkList.update(
           { key: 'Ethernet',
             subtitle: loadTimeData.getString('OncConnectionStateConnected'),
-            iconURL: ethernetConnection.iconURL,
+            iconData: ethernetConnection,
             command: ethernetOptions,
             policyManaged: ethernetConnection.policyManaged }
           );
@@ -1089,7 +1092,6 @@ cr.define('options.network', function() {
    */
   function addEnableNetworkButton_(type) {
     var subtitle = loadTimeData.getString('networkDisabled');
-    var icon = (type == 'WiMAX') ? 'Cellular' : type;
     var enableNetwork = function() {
       if (type == 'WiFi')
         sendChromeMetricsAction('Options_NetworkWifiToggle');
@@ -1107,7 +1109,7 @@ cr.define('options.network', function() {
     };
     $('network-list').update({key: type,
                               subtitle: subtitle,
-                              iconType: icon,
+                              iconType: type,
                               command: enableNetwork});
   }
 
diff --git a/chrome/browser/resources/options/compiled_resources.gyp b/chrome/browser/resources/options/compiled_resources.gyp
index 0f578c4..95b97e0 100644
--- a/chrome/browser/resources/options/compiled_resources.gyp
+++ b/chrome/browser/resources/options/compiled_resources.gyp
@@ -8,6 +8,7 @@
       'variables': {
         'depends': [
           '../../../../third_party/jstemplate/compiled_resources.gyp:jstemplate',
+          '../../../../ui/webui/resources/cr_elements/cr_onc/cr_onc_types.js',
           '../../../../ui/webui/resources/css/tree.css.js',
           '../../../../ui/webui/resources/js/action_link.js',
           '../../../../ui/webui/resources/js/cr.js',
@@ -45,7 +46,11 @@
         # options_bundle is included as a complex dependency. Currently there is
         # no possibility to use gyp variable expansion to it, so we don't use
         # <(CLOSURE_DIR) in the "externs" line.
-        'externs': ['../../../../third_party/closure_compiler/externs/chrome_send_externs.js'],
+        'externs': [
+	  '../../../../third_party/closure_compiler/externs/chrome_send_externs.js',
+          '../../../../ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon_externs.js',
+          '../../../../ui/webui/resources/cr_elements/cr_onc/cr_onc_data_externs.js',
+	],
       },
       'includes': ['../../../../third_party/closure_compiler/compile_js.gypi'],
     }
diff --git a/chrome/browser/ui/webui/options/chromeos/internet_options_handler.cc b/chrome/browser/ui/webui/options/chromeos/internet_options_handler.cc
index e642001..239865d 100644
--- a/chrome/browser/ui/webui/options/chromeos/internet_options_handler.cc
+++ b/chrome/browser/ui/webui/options/chromeos/internet_options_handler.cc
@@ -50,13 +50,9 @@
 #include "components/onc/onc_constants.h"
 #include "content/public/browser/web_contents.h"
 #include "content/public/browser/web_ui.h"
-#include "grit/ui_chromeos_resources.h"
 #include "third_party/cros_system_api/dbus/service_constants.h"
-#include "ui/base/resource/resource_bundle.h"
 #include "ui/base/webui/web_ui_util.h"
 #include "ui/chromeos/network/network_connect.h"
-#include "ui/chromeos/network/network_icon.h"
-#include "ui/gfx/image/image_skia.h"
 
 namespace chromeos {
 namespace options {
@@ -70,14 +66,11 @@ const char kNetworkDataKey[] = "networkData";
 
 // Keys for the network description dictionary passed to the web ui. Make sure
 // to keep the strings in sync with what the JavaScript side uses.
-const char kNetworkInfoKeyIconURL[] = "iconURL";
 const char kNetworkInfoKeyPolicyManaged[] = "policyManaged";
 
 // Functions we call in JavaScript.
 const char kRefreshNetworkDataFunction[] =
     "options.network.NetworkList.refreshNetworkData";
-const char kSetDefaultNetworkIconsFunction[] =
-    "options.network.NetworkList.setDefaultNetworkIcons";
 const char kGetManagedPropertiesResultFunction[] =
     "options.internet.DetailsInternetPage.getManagedPropertiesResult";
 const char kUpdateConnectionDataFunction[] =
@@ -151,12 +144,11 @@ const NetworkState* GetNetworkState(const std::string& service_path) {
       GetNetworkState(service_path);
 }
 
-// Builds a dictionary with network information and an icon used for the
-// NetworkList on the settings page. Ownership of the returned pointer is
-// transferred to the caller.
+// Builds a dictionary with network information for the NetworkList on the
+// settings page. Ownership of the returned pointer is transferred to the
+// caller. TODO(stevenjb): Replace with calls to networkingPrivate.getNetworks.
 base::DictionaryValue* BuildNetworkDictionary(
     const NetworkState* network,
-    float icon_scale_factor,
     const PrefService* profile_prefs) {
   scoped_ptr<base::DictionaryValue> network_info =
       network_util::TranslateNetworkStateToONC(network);
@@ -165,10 +157,6 @@ base::DictionaryValue* BuildNetworkDictionary(
       profile_prefs, g_browser_process->local_state(), *network);
   network_info->SetBoolean(kNetworkInfoKeyPolicyManaged, has_policy);
 
-  std::string icon_url = ui::network_icon::GetImageUrlForNetwork(
-      network, ui::network_icon::ICON_TYPE_LIST, icon_scale_factor);
-
-  network_info->SetString(kNetworkInfoKeyIconURL, icon_url);
   network_info->SetString(kNetworkInfoKeyServicePath, network->path());
 
   return network_info.release();
@@ -252,15 +240,6 @@ void InternetOptionsHandler::GetLocalizedValues(
 }
 
 void InternetOptionsHandler::InitializePage() {
-  base::DictionaryValue dictionary;
-  dictionary.SetString(::onc::network_type::kCellular,
-      GetIconDataUrl(IDR_AURA_UBER_TRAY_NETWORK_BARS_DARK));
-  dictionary.SetString(::onc::network_type::kWiFi,
-      GetIconDataUrl(IDR_AURA_UBER_TRAY_NETWORK_ARCS_DARK));
-  dictionary.SetString(::onc::network_type::kVPN,
-      GetIconDataUrl(IDR_AURA_UBER_TRAY_NETWORK_VPN));
-  web_ui()->CallJavascriptFunction(kSetDefaultNetworkIconsFunction,
-                                   dictionary);
   NetworkHandler::Get()->network_state_handler()->RequestScan();
   RefreshNetworkData();
 }
@@ -472,14 +451,6 @@ void InternetOptionsHandler::StartDisconnectCallback(
 
 ////////////////////////////////////////////////////////////////////////////////
 
-std::string InternetOptionsHandler::GetIconDataUrl(int resource_id) const {
-  gfx::ImageSkia* icon =
-      ResourceBundle::GetSharedInstance().GetImageSkiaNamed(resource_id);
-  gfx::ImageSkiaRep image_rep = icon->GetRepresentation(
-      web_ui()->GetDeviceScaleFactor());
-  return webui::GetBitmapDataUrl(image_rep.sk_bitmap());
-}
-
 void InternetOptionsHandler::RefreshNetworkData() {
   base::DictionaryValue dictionary;
   FillNetworkInfo(&dictionary);
@@ -588,10 +559,6 @@ gfx::NativeWindow InternetOptionsHandler::GetNativeWindow() const {
   return web_ui()->GetWebContents()->GetTopLevelNativeWindow();
 }
 
-float InternetOptionsHandler::GetScaleFactor() const {
-  return web_ui()->GetDeviceScaleFactor();
-}
-
 const PrefService* InternetOptionsHandler::GetPrefs() const {
   return Profile::FromWebUI(web_ui())->GetPrefs();
 }
@@ -649,7 +616,7 @@ base::ListValue* InternetOptionsHandler::GetWiredList() {
       FirstNetworkByType(NetworkTypePattern::Ethernet());
   if (!network)
     return list;
-  list->Append(BuildNetworkDictionary(network, GetScaleFactor(), GetPrefs()));
+  list->Append(BuildNetworkDictionary(network, GetPrefs()));
   return list;
 }
 
@@ -661,7 +628,7 @@ base::ListValue* InternetOptionsHandler::GetWirelessList() {
       NetworkTypePattern::Wireless(), &networks);
   for (NetworkStateHandler::NetworkStateList::const_iterator iter =
            networks.begin(); iter != networks.end(); ++iter) {
-    list->Append(BuildNetworkDictionary(*iter, GetScaleFactor(), GetPrefs()));
+    list->Append(BuildNetworkDictionary(*iter, GetPrefs()));
   }
 
   return list;
@@ -675,7 +642,7 @@ base::ListValue* InternetOptionsHandler::GetVPNList() {
       NetworkTypePattern::VPN(), &networks);
   for (NetworkStateHandler::NetworkStateList::const_iterator iter =
            networks.begin(); iter != networks.end(); ++iter) {
-    list->Append(BuildNetworkDictionary(*iter, GetScaleFactor(), GetPrefs()));
+    list->Append(BuildNetworkDictionary(*iter, GetPrefs()));
   }
 
   return list;
@@ -695,12 +662,10 @@ base::ListValue* InternetOptionsHandler::GetRememberedList() {
            networks.begin(); iter != networks.end(); ++iter) {
     const NetworkState* network = *iter;
     if (network->type() != shill::kTypeWifi &&
-        network->type() != shill::kTypeVPN)
+        network->type() != shill::kTypeVPN) {
       continue;
-    list->Append(
-        BuildNetworkDictionary(network,
-                               web_ui()->GetDeviceScaleFactor(),
-                               Profile::FromWebUI(web_ui())->GetPrefs()));
+    }
+    list->Append(BuildNetworkDictionary(network, GetPrefs()));
   }
 
   return list;
diff --git a/chrome/browser/ui/webui/options/chromeos/internet_options_handler.h b/chrome/browser/ui/webui/options/chromeos/internet_options_handler.h
index 81a6cb7..8b13643 100644
--- a/chrome/browser/ui/webui/options/chromeos/internet_options_handler.h
+++ b/chrome/browser/ui/webui/options/chromeos/internet_options_handler.h
@@ -63,9 +63,6 @@ class InternetOptionsHandler
   void StartConnectCallback(const base::ListValue* args);
   void StartDisconnectCallback(const base::ListValue* args);
 
-  // Retrieves a data url for a resource.
-  std::string GetIconDataUrl(int resource_id) const;
-
   // Refreshes the display of network information.
   void RefreshNetworkData();
 
@@ -99,9 +96,6 @@ class InternetOptionsHandler
   // Gets the native window for hosting dialogs, etc.
   gfx::NativeWindow GetNativeWindow() const;
 
-  // Gets the UI scale factor.
-  float GetScaleFactor() const;
-
   // Gets the user PrefService associated with the WebUI.
   const PrefService* GetPrefs() const;