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

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

 // Copyright 2015 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.
 
 /**
  * @fileoverview A singleton that keeps track of the VPN providers enabled in
  * the primary user's profile.
  */
 
 cr.define('options', function() {
   // ID used for the built-in OpenVPN/L2TP VPN provider. This must be kept in
   // sync with
   //chrome/browser/ui/webui/options/chromeos/internet_options_handler.cc.
   /** @const */ var BuiltInVPNProviderID = 'built-in';
 
   /**
    * @constructor
    */
   function VPNProviders() {
   }
 
   cr.addSingletonGetter(VPNProviders);
 
   VPNProviders.prototype = {
     /**
      * The VPN providers enabled in the primary user's profile. This is a
      * mapping from provider ID to provider name. For third-party VPN providers,
      * the provider ID is an extension ID. For the built-in OpenVPN/L2TP
      * provider, the ID is 'built-in'.
-     * @type {Object<string, string>}
+     * @type {!Object<string, string>}
      * @private
      */
     providers_: {},
 
     /**
+     * Observers who will be notified when the list of VPN providers changes.
+     * @type {!Array<!options.VPNProviders.Observer>}
+     */
+    observers_: [],
+
+    /**
+     * The VPN providers enabled in the primary user's profile.
+     * @type {!Object<string, string>}
+     */
+    get providers() {

[michaelpg, 2015/03/17 19:28:16]

Why do we need these get/setters?

[bartfab (slow), 2015/03/18 21:27:15]

I had to convert |providers_| from a simple member to a get/set pair because
setting has a side effect now - it triggers observers.

+      return this.providers_;
+    },
+    set providers(providers) {
+      this.providers_ = providers;
+      for (var i = 0; i < this.observers_.length; ++i)
+        this.observers_[i].onVPNProvidersChanged();
+    },
+
+    /**
+     * Adds an observer to be notified when the list of VPN providers changes.
+     * @param {!options.VPNProviders.Observer} observer The observer to add.
+     */
+    addObserver: function(observer) {
+      this.observers_.push(observer);
+    },
+
+    /**
      * Determines whether |provider_id| belongs to a third-party VPN provider.
      * @param {string} provider_id The VPN provider ID.
      * @return {boolean} True if the ID belongs to a third-party VPN provider.
      * @private
      */
     isThirdPartyProvider_(provider_id) {
       return provider_id != BuiltInVPNProviderID;
     },
 
     /**
@@ skipping 10 matching lines @@
           !(provider_id in this.providers_)) {
         return network_name;
       }
       return loadTimeData.getStringF('vpnNameTemplate',
                                      this.providers_[provider_id],
                                      network_name);
     },
   };
 
   /**
+   * Adds an observer to be notified when the list of VPN providers changes.
+   * @param {!options.VPNProviders.Observer} observer The observer to add.
+   */
+  VPNProviders.addObserver = function(observer) {
+    VPNProviders.getInstance().addObserver(observer);
+  };
+
+  /**
    * Returns the list of VPN providers enabled in the primary user's profile.
    * @return {Object<string, string>} A mapping from VPN provider ID to name.
    */
   VPNProviders.getProviders = function() {
-    return VPNProviders.getInstance().providers_;
+    return VPNProviders.getInstance().providers;
   };
 
   /**
    * Replaces the list of VPN providers enabled in the primary user's profile.
    * @param {Object<string, string>} providers A mapping from VPN provider ID
    *     to name.
    */
   VPNProviders.setProviders = function(providers) {
-    VPNProviders.getInstance().providers_ = providers;
+    VPNProviders.getInstance().providers = providers;
   };
 
   /**
    * Determines whether |provider_id| belongs to a third-party VPN provider.
    * @param {string} provider_id The VPN provider ID.
    * @return {boolean} True if the ID belongs to a third-party VPN provider.
    */
   VPNProviders.isThirdPartyProvider = function(provider_id) {
     return VPNProviders.getInstance().isThirdPartyProvider_(provider_id);
   };
 
   /**
    * Formats a network name for display purposes. If the network belongs to a
    * third-party VPN provider, the provider name is added to the network name.
    * @param {string} provider_id The VPN provider ID for this network.
    * @param {string} network_name The network name.
    * @return {string} The resulting display name.
    */
   VPNProviders.formatNetworkName = function(provider_id, network_name) {
     return VPNProviders.getInstance().formatNetworkName_(provider_id,
                                                          network_name);
   };
 
+  /**
+   * An observer of VPNProviders.
+   * @interface
+   */
+  VPNProviders.Observer = function() {};
+
+  VPNProviders.Observer.prototype = {
+    /**
+     * Called when the list of VPN providers changes.
+     */
+    onVPNProvidersChanged: function() {},
+  };
+
   // Export
   return {
     VPNProviders: VPNProviders
   };
 });