Add third-party VPN support to network details dialog

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 chrome.networkingPrivate calls.
@@ skipping 197 matching lines @@
     },
 
     /**
      * Auto-activates the network details dialog if network information
      * is included in the URL.
      */
     showNetworkDetails_: function() {
       var guid = parseQueryParams(window.location).guid;
       if (!guid || !guid.length)
         return;
+      chrome.send('updateVPNProviders');
       chrome.networkingPrivate.getManagedProperties(
           guid, DetailsInternetPage.initializeDetailsPage);
     },
 
     /**
      * Initializes the contents of the page.
      */
     initializePageContents_: function() {
       $('details-internet-dismiss').addEventListener('click', function(event) {
         DetailsInternetPage.setDetails();
@@ skipping 521 matching lines @@
     },
 
     /**
      * Helper method called from initializeDetailsPage and updateConnectionData.
      * Updates the fields in the header section of the details frame.
      * @private
      */
     populateHeader_: function() {
       var onc = this.onc_;
 
-      $('network-details-title').textContent = onc.getTranslatedValue('Name');
+      $('network-details-title').textContent =
+          this.networkTitle_ || onc.getTranslatedValue('Name');
+
       var connectionState = onc.getActiveValue('ConnectionState');
       var connectionStateString = onc.getTranslatedValue('ConnectionState');
       $('network-details-subtitle-status').textContent = connectionStateString;
 
       var typeKey;
       var type = this.type_;
       if (type == 'Ethernet')
         typeKey = 'ethernetTitle';
       else if (type == 'WiFi')
         typeKey = 'wifiTitle';
@@ skipping 408 matching lines @@
         var priority = preferredCheckbox.checked ? kPreferredPriority : 0;
         oncData.setProperty('Priority', priority);
         sendChromeMetricsAction('Options_NetworkSetPrefer');
       }
       autoConnectCheckboxId = 'auto-connect-network-wifi';
     } else if (type == 'WiMAX') {
       autoConnectCheckboxId = 'auto-connect-network-wimax';
     } else if (type == 'Cellular') {
       autoConnectCheckboxId = 'auto-connect-network-cellular';
     } else if (type == 'VPN') {
-      oncData.setProperty('VPN.Host', $('inet-server-hostname').value);
+      var providerType = detailsPage.onc_.getActiveValue('VPN.Type');
+      if (providerType != 'ThirdPartyVPN') {
+        oncData.setProperty('VPN.Type', providerType);
+        oncData.setProperty('VPN.Host', $('inet-server-hostname').value);
+      }
       autoConnectCheckboxId = 'auto-connect-network-vpn';
     }
     if (autoConnectCheckboxId != '') {
       var autoConnectCheckbox =
           assertInstanceof($(autoConnectCheckboxId), HTMLInputElement);
       if (!autoConnectCheckbox.hidden && !autoConnectCheckbox.disabled) {
         var autoConnectKey = type + '.AutoConnect';
         oncData.setProperty(autoConnectKey, !!autoConnectCheckbox.checked);
         sendChromeMetricsAction('Options_NetworkAutoConnect');
       }
@@ skipping 99 matching lines @@
   DetailsInternetPage.initializeDetailsPage = function(oncData) {
     var onc = new OncData(oncData);
 
     var detailsPage = DetailsInternetPage.getInstance();
     detailsPage.onc_ = onc;
     var type = onc.getActiveValue('Type');
     detailsPage.type_ = type;
 
     sendShowDetailsMetrics(type, onc.getActiveValue('ConnectionState'));
 
+    if (type == 'VPN') {
+      // Cache the dialog title, which will contain the provider name in the
+      // case of a third-party VPN provider. This caching is important as the
+      // provider may go away while the details dialog is being shown, causing
+      // subsequent updates to be unable to determine the correct title.
+      detailsPage.networkTitle_ = options.VPNProviders.formatNetworkName(onc);
+    } else {
+      detailsPage.networkTitle_ = undefined;

[pneubeck (no reviews), 2015/03/18 20:41:30]

I think it's more idiomatic to do

delete detailsPage.networkTitle_;
or
... = none;

[bartfab (slow), 2015/03/18 21:10:48]

Done.

+    }
+
     detailsPage.populateHeader_();
     detailsPage.updateConnectionButtonVisibilty_();
     detailsPage.updateDetails_();
 
     // Inform chrome which network to pass events for in InternetOptionsHandler.
     chrome.send('setNetworkGuid', [detailsPage.onc_.guid()]);
 
     // TODO(stevenjb): Some of the setup below should be moved to
     // updateDetails_() so that updates are reflected in the UI.
 
@@ skipping 311 matching lines @@
       if (isGsm) {
         $('iccid').textContent = onc.getActiveValue('Cellular.ICCID');
         $('imsi').textContent = onc.getActiveValue('Cellular.IMSI');
         detailsPage.initializeApnList_();
       }
       $('auto-connect-network-cellular').checked =
           onc.getActiveValue('Cellular.AutoConnect');
       $('auto-connect-network-cellular').disabled = false;
     } else if (type == 'VPN') {
       OptionsPage.showTab($('vpn-nav-tab'));
+      var providerType = onc.getActiveValue('VPN.Type');
+      var thirdPartyVPN = providerType == 'ThirdPartyVPN';

[pneubeck (no reviews), 2015/03/18 20:41:30]

nit: rename to isThirdPartyVPN

[bartfab (slow), 2015/03/18 21:10:48]

Done.

+      $('vpn-tab').classList.toggle('third-party-vpn-provider', thirdPartyVPN);
+
       $('inet-service-name').textContent = networkName;
       $('inet-provider-type').textContent =
           onc.getTranslatedValue('VPN.Type');
-      var providerType = onc.getActiveValue('VPN.Type');
-      var usernameKey;
-      if (providerType == 'OpenVPN')
-        usernameKey = 'VPN.OpenVPN.Username';
-      else if (providerType == 'L2TP-IPsec')
-        usernameKey = 'VPN.L2TP.Username';
 
-      if (usernameKey) {
-        $('inet-username').parentElement.hidden = false;
-        $('inet-username').textContent = onc.getActiveValue(usernameKey);
+      if (thirdPartyVPN) {
+        $('inet-provider-name').textContent = '';
+        var extensionID = onc.getActiveValue('VPN.ThirdPartyVPN.ExtensionID');
+        var providers = options.VPNProviders.getProviders();
+        for (var i = 0; i < providers.length; ++i) {

[pneubeck (no reviews), 2015/03/18 20:41:30]

if this is the only use of getProviders(), then you could as well move this loop
into VPNProviders (where you have it at another place) and expose something like
'getProviderName(extensionId)'

[bartfab (slow), 2015/03/18 21:10:48]

CL 1017443002 will add another use which needs to access al the information
about each provider.

+          if (extensionID == providers[i].extensionID) {
+            $('inet-provider-name').textContent = providers[i].name;
+            break;
+          }
+        }
       } else {
-        $('inet-username').parentElement.hidden = true;
+        var usernameKey;
+        if (providerType == 'OpenVPN')
+          usernameKey = 'VPN.OpenVPN.Username';
+        else if (providerType == 'L2TP-IPsec')
+          usernameKey = 'VPN.L2TP.Username';
+
+        if (usernameKey) {
+          $('inet-username').parentElement.hidden = false;
+          $('inet-username').textContent = onc.getActiveValue(usernameKey);
+        } else {
+          $('inet-username').parentElement.hidden = true;
+        }
+        var inetServerHostname = $('inet-server-hostname');
+        inetServerHostname.value = onc.getActiveValue('VPN.Host');
+        inetServerHostname.resetHandler = function() {
+          PageManager.hideBubble();
+          var recommended = onc.getRecommendedValue('VPN.Host');
+          if (recommended != undefined)
+            inetServerHostname.value = recommended;
+        };
+        $('auto-connect-network-vpn').checked =
+            onc.getActiveValue('VPN.AutoConnect');
+        $('auto-connect-network-vpn').disabled = false;
       }
-      var inetServerHostname = $('inet-server-hostname');
-      inetServerHostname.value = onc.getActiveValue('VPN.Host');
-      inetServerHostname.resetHandler = function() {
-        PageManager.hideBubble();
-        var recommended = onc.getRecommendedValue('VPN.Host');
-        if (recommended != undefined)
-          inetServerHostname.value = recommended;
-      };
-      $('auto-connect-network-vpn').checked =
-          onc.getActiveValue('VPN.AutoConnect');
-      $('auto-connect-network-vpn').disabled = false;
     } else {
       OptionsPage.showTab($('internet-nav-tab'));
     }
 
     // Update controlled option indicators.
     var indicators = cr.doc.querySelectorAll(
         '#details-internet-page .controlled-setting-indicator');
     for (var i = 0; i < indicators.length; i++) {
       var managed = indicators[i].hasAttribute('managed');
       // TODO(stevenjb): Eliminate support for 'data' once 39 is stable.
@@ skipping 28 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
   };
 });