p2b: using the new [encode/decode]AsNameElement feature to ensure we can
support arbitrary plugin names, which fixes remote plugins not working issue.

Slashes are reserved characters in Vanadium names and they have special
meaning. In P2B the name/address of a plugins can be anything specially
remote plugins which are urls and have / in them.

Now we expect the name of the plguin to be encoded as a name part which
percent encodes / in the name and we decode on the receiving side.

Change-Id: Ic60613d3d29937535aa04fb141493a17692ea6ad
diff --git a/browser/services/pipe-to-browser-server.js b/browser/services/pipe-to-browser-server.js
index 22c90c1..12f8554 100644
--- a/browser/services/pipe-to-browser-server.js
+++ b/browser/services/pipe-to-browser-server.js
@@ -66,8 +66,11 @@
 
     pipe(ctx, serverCall, $stream) {
       var secCall = serverCall.securityCall;
+      // Since p2b's suffixes can be an arbitrary string representing a plugin name or address,
+      // we expect them to come in encoded so we can handle / in the plugin names as well.
+      var plugin = vanadium.naming.decodeAsNameElement(secCall.suffix);
       return new Promise(function(resolve, reject) {
-        log.debug('received pipe request for:', secCall.suffix);
+        log.debug('received pipe request for:', plugin);
         var numBytesForThisCall = 0;
 
         var bufferStream = new ByteObjectStreamAdapter();
@@ -98,7 +101,7 @@
 
         state.numPipes++;
         try {
-          pipeRequestHandler(secCall.suffix, stream);
+          pipeRequestHandler(plugin, stream);
         } catch(e) {
           // TODO(aghassemi) envyor issue #50
           // we want to reject but because of #50 we can't
@@ -112,6 +115,10 @@
 
   var p2b = new Service();
   var dispatcher = function(suffix) {
+    // Since p2b's suffixes can be an arbitrary string representing a plugin name or address,
+    // we expect them to come in encoded so we can handle / in the plugin names as well.
+    suffix = vanadium.naming.decodeAsNameElement(suffix);
+
     // Ensure we can handle the suffix
     return getPipeViewer(suffix).then(() => {
       var defaultAuthorizer = null;
diff --git a/browser/views/help/component.html b/browser/views/help/component.html
index bbf7e65..f7f2dbe 100644
--- a/browser/views/help/component.html
+++ b/browser/views/help/component.html
@@ -44,13 +44,13 @@
   <pre class="code">cat /dev/urandom | p2b {{publishedName}}/dev/null</pre>
 
   <h3>Remote Viewers</h3>
-  <p>In addition to built-in viewers, ad-hoc remote viewers can be hosted anywhere and used with P2B. Remote viewers are referenced by the Url of the plug-in JavaScript file</p>
-  <pre class="code">echo "Hello World" | p2b {{publishedName}}/http://googledrive.com/host/0BzmT5cnKdCAKa3hzNEVCU2tnd3c/helloworld.js</pre>
+  <p>In addition to built-in viewers, ad-hoc remote viewers can be hosted anywhere and used with P2B. Remote viewers are referenced by the Url of the plug-in's JavaScript file. Url must be Url encoded when passed as the plugin name.</p>
+  <pre class="code">echo "Hello World" | p2b {{publishedName}}/http%3A%2F%2Fgoogledrive.com%2Fhost%2F0BzmT5cnKdCAKa3hzNEVCU2tnd3c%2Fhelloworld.js</pre>
   <p>Writing remote viewers is not different than writing built-in ones and basic plug-ins are pretty straight forward to write.</p>
   <p>At high level, plug-ins are expected to implement a <span class="mono">PipeViewer</span> interface which has a <span class="mono">play(stream)</span> method. A <span class="mono">view</span> (which is a wrapper for a DOM element) is expected to be returned from <span class="mono">play(stream)</span>. You can look at the hello world remote plug-in <a href="http://googledrive.com/host/0BzmT5cnKdCAKa3hzNEVCU2tnd3c/helloworld.js" target="_blank">code on Google drive</a> to get started on writing new remote plug-ins</p>
   <p>It is also possible to write the UI layer of your plug-in in HTML and CSS as a Web Component to avoid mixing logic and layout/styling in a single file.</p>
   <p>Grumpy cat meme plug-in takes that approach. You can look at the <a href="http://googledrive.com/host/0BzmT5cnKdCAKV1p6Q0pjak5Kams/meme.js" target="_blank">JavaScript</a> and <a onClick="window.open('view-source:' + 'http://googledrive.com/host/0BzmT5cnKdCAKV1p6Q0pjak5Kams/meme.html');">HTML Web Component</a> source files.</p>
-  <pre class="code">echo "I take stuff from stdin, and send them to /dev/null" | p2b {{publishedName}}/http://googledrive.com/host/0BzmT5cnKdCAKV1p6Q0pjak5Kams/meme.js</pre>
+  <pre class="code">echo "I take stuff from stdin, and send them to /dev/null" | p2b {{publishedName}}/http%3A%2F%2Fgoogledrive.com%2Fhost%2F0BzmT5cnKdCAKV1p6Q0pjak5Kams%2Fmeme.js</pre>
 </template>
 <script>
   Polymer('p2b-help', {