Move network settings metrics to JS

chrome/browser/resources/options/chromeos/internet_detail.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // require: onc_data.js
 
 // NOTE(stevenjb): This code is in the process of being converted to be
 // compatible with the networkingPrivate extension API:
 // * The network property dictionaries are being converted to use ONC values.
 // * chrome.send calls will be replaced with an API object that simulates the
@@ skipping 54 matching lines @@
    * Simple helper method for converting a field to a string. It is used to
    * easily assign an empty string from fields that may be unknown or undefined.
    * @param {object} value that should be converted to a string.
    * @return {string} the result.
    */
   function stringFromValue(value) {
     return value ? String(value) : '';
   }
 
   /**
+   * @param {string} action An action to send to coreOptionsUserMetricsAction.
+   */
+  function sendChromeMetricsAction(action) {
+    chrome.send('coreOptionsUserMetricsAction', [action]);
+  }
+
+  /**
    * Sends the 'checked' state of a control to chrome for a network.
    * @param {string} path The service path of the network.
    * @param {string} message The message to send to chrome.
    * @param {HTMLInputElement} checkbox The checkbox storing the value to send.
+   * @param {string=} opt_action Optional action to record.
    */
-  function sendCheckedIfEnabled(path, message, checkbox) {
-    if (!checkbox.hidden && !checkbox.disabled)
+  function sendCheckedIfEnabled(path, message, checkbox, opt_action) {
+    if (!checkbox.hidden && !checkbox.disabled) {
       chrome.send(message, [path, checkbox.checked ? 'true' : 'false']);
+      if (opt_action)
+        sendChromeMetricsAction(opt_action);
+    }
   }
 
   /**
+   * Send metrics to Chrome when the detailed page is opened.
+   * @param {string} type The ONC type of the network being shown.
+   * @param {string} state The ONC network state.
+   */
+  function sendMetrics(type, state) {

[armansito, 2014/09/15 14:44:52]

Should this be called "sendShowDetailsStateMetrics" or something along those
lines? I think "sendMetrics" is a bit too generic and this function seems to be
getting used for technology + connection state.

[stevenjb, 2014/09/15 22:51:51]

Done.

+    if (type == 'WiFi') {
+      sendChromeMetricsAction('Options_NetworkShowDetailsWifi');
+      if (state != 'NotConnected')
+        sendChromeMetricsAction('Options_NetworkShowDetailsWifiConnected');
+    } else if (type == 'Cellular') {
+      sendChromeMetricsAction('Options_NetworkShowDetailsCellular');
+      if (state != 'NotConnected')
+        sendChromeMetricsAction('Options_NetworkShowDetailsCellularConnected');
+    }
+    if (type == 'VPN') {

[armansito, 2014/09/15 14:44:52]

else if?

[stevenjb, 2014/09/15 22:51:51]

Done.

+      sendChromeMetricsAction('Options_NetworkShowDetailsVPN');
+      if (state != 'NotConnected')
+        sendChromeMetricsAction('Options_NetworkShowDetailsVPNConnected');
+    }

[armansito, 2014/09/15 14:44:52]

Maybe you could reduce the repetitions here. Something like:

   if (type === undefined)
     return;

   var technology = (type == 'WiFi') ? 'Wifi' : type;
   sendChromeMetricsAction('Options_NetworkShowDetails' + technology);
   if (state != 'NotConnected')
     sendChromeMetricsAction('Options_NetworkShowDetails' + technology +
'Connected');

Up to you though, since this is mostly cosmetic.

[stevenjb, 2014/09/15 22:51:51]

I prefer not to concatenate strings here for searchability.

+  }
+
+  /**
    * Returns the netmask as a string for a given prefix length.
    * @param {string} prefixLength The ONC routing prefix length.
    * @return {string} The corresponding netmask.
    */
   function prefixLengthToNetmask(prefixLength) {
     // Return the empty string for invalid inputs.
     if (prefixLength < 0 || prefixLength > 32)
       return '';
     var netmask = '';
     for (var i = 0; i < 4; ++i) {
@@ skipping 424 matching lines @@
       $('ftp-proxy').disabled = true;
       $('ftp-proxy-port').disabled = true;
       $('socks-host').disabled = true;
       $('socks-port').disabled = true;
       $('proxy-use-pac-url').disabled = $('auto-proxy').disabled ||
                                         !$('auto-proxy').checked;
       $('proxy-pac-url').disabled = $('proxy-use-pac-url').disabled ||
                                     !$('proxy-use-pac-url').checked;
       $('auto-proxy-parms').hidden = !$('auto-proxy').checked;
       $('manual-proxy-parms').hidden = !$('manual-proxy').checked;
-      chrome.send('coreOptionsUserMetricsAction',
-                  ['Options_NetworkManualProxy_Disable']);
+      sendChromeMetricsAction('Options_NetworkManualProxy_Disable');
     },
 
     /**
      * Handler for selecting a radio button that will enable the manual
      * controls.
      * @private
      * @param {Event} e Click event.
      */
     enableManualProxy_: function(e) {
       $('ignored-host-list').redraw();
@@ skipping 10 matching lines @@
       $('secure-proxy-host-name').disabled = allDisabled;
       $('secure-proxy-port').disabled = allDisabled;
       $('ftp-proxy').disabled = allDisabled;
       $('ftp-proxy-port').disabled = allDisabled;
       $('socks-host').disabled = allDisabled;
       $('socks-port').disabled = allDisabled;
       $('proxy-use-pac-url').disabled = true;
       $('proxy-pac-url').disabled = true;
       $('auto-proxy-parms').hidden = !$('auto-proxy').checked;
       $('manual-proxy-parms').hidden = !$('manual-proxy').checked;
-      chrome.send('coreOptionsUserMetricsAction',
-                  ['Options_NetworkManualProxy_Enable']);
+      sendChromeMetricsAction('Options_NetworkManualProxy_Enable');
     },
 
     updateConnectionButtonVisibilty_: function() {
       var onc = this.onc_;
       if (this.type_ == 'Ethernet') {
         // Ethernet can never be connected or disconnected and can always be
         // configured (e.g. to set security).
         $('details-internet-login').hidden = true;
         $('details-internet-disconnect').hidden = true;
         $('details-internet-configure').hidden = false;
@@ skipping 310 matching lines @@
     $('network-details-header').hidden = true;
     $('activate-details').hidden = true;
     $('view-account-details').hidden = true;
     $('web-proxy-auto-discovery').hidden = true;
     detailsPage.showProxy_ = true;
     updateHidden('#internet-tab', true);
     updateHidden('#details-tab-strip', true);
     updateHidden('#details-internet-page .action-area', true);
     detailsPage.updateControls();
     detailsPage.visible = true;
-    chrome.send('coreOptionsUserMetricsAction',
-                ['Options_NetworkShowProxyTab']);
+    sendChromeMetricsAction('Options_NetworkShowProxyTab');
   };
 
   /**
    * Initializes even handling for keyboard driven flow.
    */
   DetailsInternetPage.initializeKeyboardFlow = function() {
     keyboard.initializeKeyboardFlow();
   };
 
   DetailsInternetPage.updateProxySettings = function(type) {
@@ skipping 28 matching lines @@
         }
       }
   };
 
   DetailsInternetPage.updateCarrier = function() {
     DetailsInternetPage.showCarrierChangeSpinner(false);
   };
 
   DetailsInternetPage.loginFromDetails = function() {
     var detailsPage = DetailsInternetPage.getInstance();
+    if (detailsPage.type_ == 'WiFi')
+      sendChromeMetricsAction('Options_NetworkConnectToWifi');
+    else if (detailsPage.type_ == 'VPN')
+      sendChromeMetricsAction('Options_NetworkConnectToVPN');
     chrome.send('networkCommand',
                 [detailsPage.type_, detailsPage.servicePath_, 'connect']);
     PageManager.closeOverlay();
   };
 
   DetailsInternetPage.disconnectNetwork = function() {
     var detailsPage = DetailsInternetPage.getInstance();
+    if (detailsPage.type_ == 'WiFi')
+      sendChromeMetricsAction('Options_NetworkDisconnectWifi');
+    else if (detailsPage.type_ == 'VPN')
+      sendChromeMetricsAction('Options_NetworkDisconnectVPN');
     chrome.send('networkCommand',
                 [detailsPage.type_, detailsPage.servicePath_, 'disconnect']);
     PageManager.closeOverlay();
   };
 
   DetailsInternetPage.configureNetwork = function() {
     var detailsPage = DetailsInternetPage.getInstance();
     chrome.send('networkCommand',
                 [detailsPage.type_, detailsPage.servicePath_, 'configure']);
     PageManager.closeOverlay();
   };
 
   DetailsInternetPage.activateFromDetails = function() {
     var detailsPage = DetailsInternetPage.getInstance();
     if (detailsPage.type_ == 'Cellular') {
       chrome.send('networkCommand',
                   [detailsPage.type_, detailsPage.servicePath_, 'activate']);
     }
     PageManager.closeOverlay();
   };
 
   DetailsInternetPage.setDetails = function() {
     var detailsPage = DetailsInternetPage.getInstance();
     var type = detailsPage.type_;
     var servicePath = detailsPage.servicePath_;
     if (type == 'WiFi') {
-      sendCheckedIfEnabled(servicePath, 'setPreferNetwork',
-                           $('prefer-network-wifi'));
-      sendCheckedIfEnabled(servicePath, 'setAutoConnect',
-                           $('auto-connect-network-wifi'));
+      sendCheckedIfEnabled(servicePath,
+                           'setPreferNetwork',
+                           $('prefer-network-wifi'),
+                           'Options_NetworkSetPrefer');
+      sendCheckedIfEnabled(servicePath,
+                           'setAutoConnect',
+                           $('auto-connect-network-wifi'),
+                           'Options_NetworkAutoConnect');
     } else if (type == 'Wimax') {
-      sendCheckedIfEnabled(servicePath, 'setAutoConnect',
-                           $('auto-connect-network-wimax'));
+      sendCheckedIfEnabled(servicePath,
+                           'setAutoConnect',
+                           $('auto-connect-network-wimax'),
+                           'Options_NetworkAutoConnect');
     } else if (type == 'Cellular') {
-      sendCheckedIfEnabled(servicePath, 'setAutoConnect',
-                           $('auto-connect-network-cellular'));
+      sendCheckedIfEnabled(servicePath,
+                           'setAutoConnect',
+                           $('auto-connect-network-cellular'),
+                           'Options_NetworkAutoConnect');
     } else if (type == 'VPN') {
       chrome.send('setServerHostname',
-                  [servicePath,
-                   $('inet-server-hostname').value]);
-      sendCheckedIfEnabled(servicePath, 'setAutoConnect',
-                           $('auto-connect-network-vpn'));
+                  [servicePath, $('inet-server-hostname').value]);
+      sendCheckedIfEnabled(servicePath,
+                           'setAutoConnect',
+                           $('auto-connect-network-vpn'),
+                           'Options_NetworkAutoConnect');
     }
 
     var nameServerTypes = ['automatic', 'google', 'user'];
     var nameServerType = 'automatic';
     for (var i = 0; i < nameServerTypes.length; ++i) {
       if ($(nameServerTypes[i] + '-dns-radio').checked) {
         nameServerType = nameServerTypes[i];
         break;
       }
     }
@@ skipping 71 matching lines @@
 
   DetailsInternetPage.showDetailedInfo = function(data) {
     var onc = new OncData(data);
 
     var detailsPage = DetailsInternetPage.getInstance();
     detailsPage.onc_ = onc;
     var type = onc.getActiveValue('Type');
     detailsPage.type_ = type;
     detailsPage.servicePath_ = data.servicePath;
 
+    sendMetrics(type, onc.getActiveValue('ConnectionState'));
+
     detailsPage.populateHeader_();
     detailsPage.updateConnectionButtonVisibilty_();
     detailsPage.updateDetails_(data);
 
     // TODO(stevenjb): Some of the setup below should be moved to
     // updateDetails_() so that updates are reflected in the UI.
 
     // Only show proxy for remembered networks.
     var remembered = onc.getSource() != 'None';
     if (remembered) {
@@ skipping 344 matching lines @@
 
     // Don't show page name in address bar and in history to prevent people
     // navigate here by hand and solve issue with page session restore.
     PageManager.showPageByName('detailsInternetPage', false);
   };
 
   return {
     DetailsInternetPage: DetailsInternetPage
   };
 });