ppapi: PPB_VpnProvider: Add a simple NaCl SDK example.

native_client_sdk/src/examples/api/vpn_provider/example.js

Index: native_client_sdk/src/examples/api/vpn_provider/example.js
diff --git a/native_client_sdk/src/examples/api/vpn_provider/example.js b/native_client_sdk/src/examples/api/vpn_provider/example.js
new file mode 100644
index 0000000000000000000000000000000000000000..927272c10bad624bf503f0cfbf703bded18d7b23
--- /dev/null
+++ b/native_client_sdk/src/examples/api/vpn_provider/example.js
@@ -0,0 +1,132 @@
+// Copyright 2016 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.
+
+// VPN Configuration identification.
+var configName = "Mock configuration";

[emaxx, 2016/07/18 13:46:58]

nit: Google JS style guide suggests to prefer the single quotes over the double
quotes.

[adrian.belgun, 2016/07/19 13:57:22]

Done.

+var configId;
+
+// Example configuration.
+vpnParams = {

[emaxx, 2016/07/18 13:46:58]

nit: add "var".

[adrian.belgun, 2016/07/19 13:57:22]

Done.

+  "address": "127.0.0.1/32",
+  "mtu": "1000",
+  "exclusionList": ["127.0.0.1/32"],
+  "inclusionList": ["0.0.0.0/0"],
+  "dnsServers": ["8.8.8.8"],
+  "reconnect": "true"
+};
+
+// Simple log to HTML
+function wlog(message) {
+  var logEl = document.getElementById('log');
+  logEl.innerHTML += message + "<br />"; // Append to log.
+  logEl.scrollTop = logEl.scrollHeight;  // Scroll log to bottom.
+}
+
+// Create a VPN configurations using the createConfig method.

[emaxx, 2016/07/18 13:46:58]

nit: s/configurations/configuration/.

[adrian.belgun, 2016/07/19 13:57:22]

Done.

+// A VPN configuration is a persistent entry shown to the user in a native
+// Chrome OS UI. The user can select a VPN configuration from a list and
+// connect to it or disconnect from it.
+function create() {
+  chrome.vpnProvider.createConfig(configName, function(id) {
+    configId = id;
+    wlog("Created configuration with name='" + configName + "'" +
+         " and id='" + configId + "'");
+  });
+}
+
+// Bind connection to NaCl.
+function bind() {
+  common.naclModule.postMessage({cmd: 'bind', name: configName, id: configId});
+}
+
+function onSetParameters() {
+  chrome.vpnProvider.setParameters(
+      vpnParams,
+      function() {
+        wlog("setParameters set!");
+
+        // Bind connection to NaCl.
+        bind();
+      }
+  );

[emaxx, 2016/07/18 13:46:58]

nit: the closing bracket usually stays on the same line as the last argument.

[adrian.belgun, 2016/07/19 13:57:22]

Done.

+}
+
+function onBindSuccess() {
+  // Notify the connection state as "connected".
+  chrome.vpnProvider.notifyConnectionStateChanged(
+      "connected",
+      function() {
+        wlog("notifyConnectionStateChanged connected!");
+      }
+  );
+}
+
+// VpnProviders handlers.
+function onPlatformMessageListener(id, message, error) {
+  wlog("onPlatformMessage id='" + id + "' message='" + message + "' error='" +
+       error + "'");
+
+  if (message == "connected") {
+    wlog("onPlatformMessage  connected!");
+
+    // Notify NaCl module to connect to the VPN tunnel.
+   common.naclModule.postMessage({cmd: 'connected'});

[emaxx, 2016/07/18 13:46:58]

nit: Please correct the indentation here and in line 80.

[adrian.belgun, 2016/07/19 13:57:22]

Done.

+
+  } else if (message == "disconnected") {
+    wlog("onPlatformMessage  disconnected!");
+
+    // Notify NaCl module to disconnect from the VPN tunnel.
+   common.naclModule.postMessage({cmd: 'disconnected'});
+  }
+}
+
+// This function is called by common.js when a message is received from the
+// NaCl module.
+function handleMessage(message) {
+  if (typeof message.data === "string") {
+    wlog(message.data);
+  } else if (message.data['cmd'] == 'setParameters') {
+    onSetParameters();
+  } else if (message.data['cmd'] == 'bindSuccess') {
+    onBindSuccess();
+  }
+}
+
+// setupHandlers VpnProviders handlers.
+function setupHandlers() {
+  // Add listeners to the events onPlatformMessage, onPacketReceived and
+  // onConfigRemoved.
+  chrome.vpnProvider.onPlatformMessage.addListener(onPlatformMessageListener);
+
+  chrome.vpnProvider.onPacketReceived.addListener(function(data) {

[emaxx, 2016/07/18 13:46:58]

Is it correct that this JavaScript event should never occur in this example?
Then it makes sense to show this explicitly (e.g. by logging an error message or
by throwing an exception).

[adrian.belgun, 2016/07/19 13:57:22]

Yes. That's what I'm doing here. It's logging to the HTML file.
Added extra logging - also to the console.

+    wlog("onPacketRecevied - JS");

[emaxx, 2016/07/18 13:46:58]

nit: s/onPacketRecevied/onPacketReceived/

[adrian.belgun, 2016/07/19 13:57:22]

Done.

+  });
+
+  chrome.vpnProvider.onConfigRemoved.addListener(function(id) {
+    wlog("onConfigRemoved id='" + id + "'");
+  });
+
+  chrome.vpnProvider.onConfigCreated.addListener(function(id, name, data) {
+    wlog("onConfigCreated id='" + id + "' name='" + name + "'" +
+        " data='" + data + "'");

[emaxx, 2016/07/18 13:46:58]

nit: the data argument is not a string, so it should be serialized differently
(e.g. through JSON.stringify) and it shouldn't be surrounded with quotes.

[emaxx, 2016/07/18 13:46:58]

nit: please fix the indentation.

[adrian.belgun, 2016/07/19 13:57:22]

Done.

[adrian.belgun, 2016/07/19 13:57:22]

Acknowledged.

+  });
+
+  chrome.vpnProvider.onUIEvent.addListener(function(event, id) {
+    wlog("onUIEvent event='" + event + "' id='" + id + "'");
+  });
+}
+
+// This function is called by common.js when the NaCl module is
+// loaded.
+function moduleDidLoad() {
+  // Once we load, hide the plugin. In this example, we don't display anything
+  // in the plugin, so it is fine to hide it.
+  common.hideModule();
+
+  // Setup VpnProvider handlers.
+  setupHandlers();
+
+  // All done, create the connection entry in the VPN UI.
+  create();
+}