Network config: Add Metered property to UI

This allows users to view and toggle the Metered property for WiFi and
Cellular networks. (See issue for more details).

Bug: 971704
Change-Id: I6ad441b4781d65875d4d6a44184e9287a789f230
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2216854
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: James Vecore <vecore@google.com>
Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#772403}

chrome/app/os_settings_strings.grdp

@@ -1761,6 +1761,9 @@
   <message name="IDS_SETTINGS_INTERNET_NETWORK_IP_CONFIG_AUTO" desc="Settings > Internet > Network details: Label for the checkbox determining whether to automatically configure the network IP config.">
     Configure IP address automatically
   </message>
+  <message name="IDS_SETTINGS_INTERNET_NETWORK_METERED" desc="Settings > Internet > Network details: Label for the toggle indicating whether a network is metered.">
+    Metered network
+  </message>
   <message name="IDS_SETTINGS_INTERNET_NETWORK_PREFER" desc="Settings > Internet > Network details: Label for the checkbox determining whether a network is preferred over other networks.">
     Prefer this network
   </message>

chrome/browser/resources/settings/chromeos/internet_page/internet_detail_page.html

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/network_apnlist.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/network_choose_mobile.html">
+<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_config_toggle.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/network_icon.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/network_ip_config.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/network_listener_behavior.html">
@@ -50,6 +51,11 @@
         margin-inline-start: var(--settings-control-label-spacing);
       }
 
+      network-config-toggle {
+        display: flex;
+        padding: 0 var(--cr-section-padding);
+      }
+
       cr-policy-network-indicator-mojo,
       cr-policy-indicator,
       cr-policy-pref-indicator {
@@ -234,19 +240,26 @@
           </div>
         </template>
       </template>
+      <!-- Metered (WiFi and Cellular only). -->
+      <template is="dom-if" if="[[showMetered_(managedProperties_)]]">
+        <network-config-toggle id="meteredToggle" class="hr"
+            label="$i18n{networkMetered}"
+            checked="{{meteredOverride_}}"
+            property="[[managedProperties_.metered]]"
+            on-checked-changed="meteredChanged_">
+        </network-config-toggle>
+      </template>
       <!-- Always-on VPN. -->
       <template is="dom-if"
           if="[[showAlwaysOnVpn_(managedProperties_)]]">
-        <settings-toggle-button id="alwaysOnVpnToggle"
-            class="hr"
+        <settings-toggle-button id="alwaysOnVpnToggle" class="hr"
             pref="{{alwaysOnVpn_}}"
             label="$i18n{networkAlwaysOnVpn}">
         </settings-toggle-button>
       </template>
       <!-- Data roaming (Cellular only). -->
       <template is="dom-if" if="[[isCellular_(managedProperties_)]]">
-        <settings-toggle-button id="allowDataRoaming"
-            class="hr"
+        <settings-toggle-button id="allowDataRoaming" class="hr"
             pref="{{prefs.cros.signed.data_roaming_enabled}}"
             label="$i18n{networkAllowDataRoaming}"
             sub-label="[[getRoamingDetails_(managedProperties_)]]">

chrome/browser/resources/settings/chromeos/internet_page/internet_detail_page.js

@@ -139,6 +139,17 @@ Polymer({
       },
     },
 
+    /**
+     * This gets initialized to managedProperties_.metered.activeValue.
+     * When this is changed from the UI, a change event will update the
+     * property and setMojoNetworkProperties will be called.
+     * @private
+     */
+    meteredOverride_: {
+      type: Boolean,
+      value: false,
+    },
+
     /**
      * The network preferred state.
      * @private
@@ -383,6 +394,11 @@ Polymer({
     }
     this.updateAutoConnectPref_();
 
+    const metered = this.managedProperties_.metered;
+    if (metered && metered.activeValue != this.meteredOverride_) {
+      this.meteredOverride_ = metered.activeValue;
+    }
+
     const priority = this.managedProperties_.priority;
     if (priority) {
       const preferNetwork = priority.activeValue > 0;
@@ -509,6 +525,19 @@ Polymer({
     this.autoConnectPref_ = newPrefValue;
   },
 
+  /**
+   * @param {!CustomEvent<boolean>} e
+   * @private
+   */
+  meteredChanged_(e) {
+    if (!this.propertiesReceived_) {
+      return;
+    }
+    const config = this.getDefaultConfigProperties_();
+    config.metered = {value: e.detail.value};
+    this.setMojoNetworkProperties_(config);
+  },
+
   /** @private */
   preferNetworkChanged_() {
     if (!this.propertiesReceived_) {
@@ -1503,6 +1532,17 @@ Polymer({
             managedProperties, globalPolicy, managedNetworkAvailable);
   },
 
+  /**
+   * @param {!mojom.ManagedProperties} managedProperties
+   * @return {boolean}
+   * @private
+   */
+  showMetered_(managedProperties) {
+    return !!managedProperties && this.isRemembered_(managedProperties) &&
+        (managedProperties.type == mojom.NetworkType.kCellular ||
+         managedProperties.type == mojom.NetworkType.kWiFi);
+  },
+
   /**
    * @param {!mojom.ManagedProperties} managedProperties
    * @return {boolean} Whether the toggle for the Always-on VPN feature is

chrome/browser/ui/webui/settings/chromeos/internet_section.cc

@@ -532,6 +532,7 @@ void InternetSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
       {"networkConnectNotAllowed", IDS_SETTINGS_INTERNET_CONNECT_NOT_ALLOWED},
       {"networkIPAddress", IDS_SETTINGS_INTERNET_NETWORK_IP_ADDRESS},
       {"networkIPConfigAuto", IDS_SETTINGS_INTERNET_NETWORK_IP_CONFIG_AUTO},
+      {"networkMetered", IDS_SETTINGS_INTERNET_NETWORK_METERED},
       {"networkNameserversLearnMore", IDS_LEARN_MORE},
       {"networkPrefer", IDS_SETTINGS_INTERNET_NETWORK_PREFER},
       {"networkPrimaryUserControlled",