Allow users to add third-party VPNs from the settings page

chrome/browser/resources/options/chromeos/network_list.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.
 
 /**
  * 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 property.
  * TODO(stevenjb): Use networkingPrivate.getNetworks.
  * @typedef {{
@@ skipping 357 matching lines @@
         Menu.decorate(menu);
         for (var i = 0; i < this.data.menu.length; i++) {
           var entry = this.data.menu[i];
           createCallback_(menu, null, entry.label, entry.command);
         }
         return menu;
       }
       return null;
     },
 
+    /**
+     * Determines if a menu can be updated on the fly. Menus that cannot be
+     * updated are fully regenerated using createMenu. The advantage of
+     * updating a menu is that it can preserve ordering of networks avoiding
+     * entries from jumping around after an update.
+     * @return {boolean} Whether the menu can be updated on the fly.
+     */
     canUpdateMenu: function() {
       return false;
     },
 
     /**
+     * Removes the current menu contents, causing it to be regenerated when the
+     * menu is shown the next time. If the menu is showing right now, its
+     * contents are regenerated immediately and the menu remains visible.
+     */
+    refreshMenu: function() {
+      this.menu_ = null;
+      if (activeMenu_ == this.getMenuName())
+        this.showMenu();
+    },
+
+    /**
      * Displays a popup menu.
      */
     showMenu: function() {
       var rebuild = false;
       // Force a rescan if opening the menu for WiFi networks to ensure the
       // list is up to date. Networks are periodically rescanned, but depending
       // on timing, there could be an excessive delay before the first rescan
       // unless forced.
       var rescan = !activeMenu_ && this.data_.key == 'WiFi';
       if (!this.menu_) {
         rebuild = true;
         var existing = $(this.getMenuName());
         if (existing) {
-          if (this.updateMenu())
+          if (this.canUpdateMenu() && this.updateMenu())
             return;
           closeMenu_();
         }
         this.menu_ = this.createMenu();
         this.menu_.addEventListener('mousedown', function(e) {
           // Prevent blurring of list, which would close the menu.
           e.preventDefault();
         });
         var parent = $('network-menus');
         if (existing)
@@ skipping 83 matching lines @@
     createMenu: function() {
       var menu = this.ownerDocument.createElement('div');
       menu.id = this.getMenuName();
       menu.className = 'network-menu';
       menu.hidden = true;
       Menu.decorate(menu);
       var addendum = [];
       if (this.data_.key == 'WiFi') {
         addendum.push({
           label: loadTimeData.getString('joinOtherNetwork'),
-          command: createAddConnectionCallback_('WiFi'),
+          command: createAddNonVPNConnectionCallback_('WiFi'),
           data: {}
         });
       } else if (this.data_.key == 'Cellular') {
         if (cellularEnabled_ && cellularSupportsScan_) {
           addendum.push({
             label: loadTimeData.getString('otherCellularNetworks'),
-            command: createAddConnectionCallback_('Cellular'),
+            command: createAddNonVPNConnectionCallback_('Cellular'),
             addClass: ['other-cellulars'],
             data: {}
           });
         }
 
         var label = enableDataRoaming_ ? 'disableDataRoaming' :
             'enableDataRoaming';
         var disabled = !loadTimeData.getValue('loggedInAsOwner');
         var entry = {label: loadTimeData.getString(label),
                      data: {}};
         if (disabled) {
           entry.command = null;
           entry.tooltip =
               loadTimeData.getString('dataRoamingDisableToggleTooltip');
         } else {
           var self = this;
           entry.command = function() {
             options.Preferences.setBooleanPref(
                 'cros.signed.data_roaming_enabled',
                 !enableDataRoaming_, true);
             // Force revalidation of the menu the next time it is displayed.
             self.menu_ = null;
           };
         }
         addendum.push(entry);
       } else if (this.data_.key == 'VPN') {
-        addendum.push({
-          label: loadTimeData.getString('joinOtherNetwork'),
-          command: createAddConnectionCallback_('VPN'),
-          data: {}
-        });
+        addendum = addendum.concat(createAddVPNConnectionEntries_());
       }
 
       var list = this.data.rememberedNetworks;
       if (list && list.length > 0) {
         var callback = function(list) {
           $('remembered-network-list').clear();
           var dialog = options.PreferredNetworks.getInstance();
           PageManager.showPageByName('preferredNetworksPage', false);
           dialog.update(list);
           sendChromeMetricsAction('Options_NetworkShowPreferred');
@@ skipping 78 matching lines @@
             separator = false;
           } else if (!separator) {
             menu.appendChild(MenuItem.createSeparator());
             separator = true;
           }
         }
       }
       return menu;
     },
 
-    /**
-     * Determines if a menu can be updated on the fly. Menus that cannot be
-     * updated are fully regenerated using createMenu. The advantage of
-     * updating a menu is that it can preserve ordering of networks avoiding
-     * entries from jumping around after an update.
-     */
+    /** @override */
     canUpdateMenu: function() {
       return this.data_.key == 'WiFi' && activeMenu_ == this.getMenuName();
     },
 
     /**
      * Updates an existing menu.  Updated menus preserve ordering of prior
      * entries.  During the update process, the ordering may differ from the
      * preferred ordering as determined by the network library.  If the
      * ordering becomes potentially out of sync, then the updated menu is
      * marked for disposal on close.  Reopening the menu will force a
-     * regeneration, which will in turn fix the ordering.
+     * regeneration, which will in turn fix the ordering. This method must only
+     * be called if canUpdateMenu() returned |true|.
      * @return {boolean} True if successfully updated.
      */
     updateMenu: function() {
-      if (!this.canUpdateMenu())
-        return false;
       var oldMenu = $(this.getMenuName());
       var group = oldMenu.getElementsByClassName('network-menu-group')[0];
       if (!group)
         return false;
       var newMenu = this.createMenu();
       var discardOnClose = false;
       var oldNetworkButtons = this.extractNetworkConnectButtons_(oldMenu);
       var newNetworkButtons = this.extractNetworkConnectButtons_(newMenu);
       for (var key in oldNetworkButtons) {
         if (newNetworkButtons[key]) {
@@ skipping 166 matching lines @@
       this.autoExpands = true;
       this.dataModel = new ArrayDataModel([]);
       this.selectionModel = new ListSingleSelectionModel();
       this.addEventListener('blur', this.onBlur_.bind(this));
       this.selectionModel.addEventListener('change',
                                            this.onSelectionChange_.bind(this));
 
       // Wi-Fi control is always visible.
       this.update({key: 'WiFi', networkList: []});
 
-      var entryAddWifi = {
-        label: loadTimeData.getString('addConnectionWifi'),
-        command: createAddConnectionCallback_('WiFi')
-      };
-      var entryAddVPN = {
-        label: loadTimeData.getString('addConnectionVPN'),
-        command: createAddConnectionCallback_('VPN')
-      };
-      this.update({key: 'addConnection',
-                   iconType: 'add-connection',
-                   menu: [entryAddWifi, entryAddVPN]
-                  });
+      this.updateAddConnectionMenuEntries_();
 
       var prefs = options.Preferences.getInstance();
       prefs.addEventListener('cros.signed.data_roaming_enabled',
           function(event) {
             enableDataRoaming_ = event.value.value;
           });
       this.endBatchUpdates();
+
+      options.VPNProviders.addObserver(this.onVPNProvidersChanged_.bind(this));
     },
 
     /**
+     * Called when the list of VPN providers changes. Refreshes the contents of
+     * menus that list VPN providers.
+     * @private
+     */
+    onVPNProvidersChanged_() {

[Dan Beam, 2015/03/19 19:01:52]

please try your code before you land it

[bartfab (slow), 2015/03/20 00:10:25]

This is valid JavaScript and works just fine. I did try it before landing the CL
of course.

The problem is that this is ECMAScript 6 syntax but our Closure bot is set up to
accept ECMAScript 5 only, causing the bot to complain.

[Dan Beam, 2015/03/20 01:27:58]

ah, bummer, my bad (I've just never seen it before)

maybe we can turn on ES6 in closure?

+      // Refresh the contents of the VPN menu.
+      var index = this.indexOf('VPN');
+      if (index != undefined)
+        this.getListItemByIndex(index).refreshMenu();
+
+      // Refresh the contents of the "add connection" menu.
+      this.updateAddConnectionMenuEntries_();
+      index = this.indexOf('addConnection');
+      if (index != undefined)
+        this.getListItemByIndex(index).refreshMenu();
+    },
+
+    /**
+     * Updates the entries in the "add connection" menu, based on the VPN
+     * providers currently enabled in the primary user's profile.
+     * @private
+     */
+    updateAddConnectionMenuEntries_() {
+      var entries = [{
+        label: loadTimeData.getString('addConnectionWifi'),
+        command: createAddNonVPNConnectionCallback_('WiFi')
+      }];
+      entries = entries.concat(createAddVPNConnectionEntries_());
+      this.update({key: 'addConnection',
+                   iconType: 'add-connection',
+                   menu: entries
+                  });
+    },
+
+    /**
      * When the list loses focus, unselect all items in the list and close the
      * active menu.
      * @private
      */
     onBlur_: function() {
       this.selectionModel.unselectAll();
       closeMenu_();
     },
 
     /**
@@ skipping 334 matching lines @@
     for (var i = 0; i < networkList.length; i++) {
       var entry = networkList[i];
       if (entry.ConnectionState == 'Connected' ||
           entry.ConnectionState == 'Connecting')
         return entry;
     }
     return null;
   }
 
   /**
-   * Create a callback function that adds a new connection of the given type.
+   * Creates a callback function that adds a new connection of the given type.
+   * This method may be used for all network types except VPN.
    * @param {string} type An ONC network type
    * @return {function()} The created callback.
    * @private
    */
-  function createAddConnectionCallback_(type) {
+  function createAddNonVPNConnectionCallback_(type) {
     return function() {
       if (type == 'WiFi')
         sendChromeMetricsAction('Options_NetworkJoinOtherWifi');
-      else if (type == 'VPN')
-        sendChromeMetricsAction('Options_NetworkJoinOtherVPN');
-      chrome.send('addConnection', [type]);
+      chrome.send('addNonVPNConnection', [type]);
     };
   }
 
   /**
+   * Creates a callback function that shows the "add network" dialog for the
+   * built-in OpenVPN/L2TP VPN provider.
+   * @return {function()} The created callback.
+   * @private
+   */
+  function createVPNConnectionWithAddBuiltInProviderCallback_() {

[michaelpg, 2015/03/19 19:48:28]

Could these be simplified into one function? e.g.,

function createVPNConnectionCallbackForProvider_(opt_extensionID) {
  return function() {
    sendChromeMetricsAction(opt_extensionID ? 'Options_NetworkAddVPNThirdParty'
: 'Options_NetworkAddVPNBuiltIn');
    chrome.send('addVPNConnection', extensionID ? [extensionID] : undefined);
  };
}

[bartfab (slow), 2015/03/20 00:10:25]

Done.

[michaelpg, 2015/03/20 00:27:28]

Thanks!

+    return function() {
+      sendChromeMetricsAction('Options_NetworkAddVPNBuiltIn');
+      chrome.send('addVPNConnection');
+    };
+  }
+
+  /**
+   * Creates a callback function that asks the third-party VPN provider
+   * identified by |extensionID| to show its "add network" dialog.
+   * @param {string} providerID The VPN provider's extension ID.
+   * @return {function()} The created callback.
+   * @private
+   */
+  function createAddVPNConnectionWithThirdPartyProviderCallback_(extensionID) {
+    return function() {
+      sendChromeMetricsAction('Options_NetworkAddVPNThirdParty');
+      chrome.send('addVPNConnection', [extensionID]);
+    };
+  }
+
+  /**
+   * Generates an "add network" entry for each VPN provider currently enabled in
+   * the primary user's profile.
+   * @return {!Array<{label: string, command: function(), data: !Object}>} The
+   *     list of entries.
+   * @private
+   */
+  function createAddVPNConnectionEntries_() {
+    var entries = [];
+    var providers = options.VPNProviders.getProviders();
+    for (var i = 0; i < providers.length; ++i) {
+      entries.push({
+        label: loadTimeData.getStringF('addConnectionVPNTemplate',
+                                       providers[i].name),
+        command: providers[i].extensionID ?

[michaelpg, 2015/03/19 19:48:28]

Then this would just be
createVPNConnectionCallbackForProvider(providers[i].extensionID);

Up to you whether that's preferred or not.

[bartfab (slow), 2015/03/20 00:10:25]

Done.

+            createAddVPNConnectionWithThirdPartyProviderCallback_(
+                providers[i].extensionID) :
+            createVPNConnectionWithAddBuiltInProviderCallback_(),
+        data: {}
+      });
+    }
+    return entries;
+  }
+
+  /**
    * Whether the Network list is disabled. Only used for display purpose.
    */
   cr.defineProperty(NetworkList, 'disabled', cr.PropertyKind.BOOL_ATTR);
 
   // Export
   return {
     NetworkList: NetworkList
   };
 });