Added comments for telnet, updated icon and README

telnet/README.md

@@ -1,12 +1,22 @@
-# Telnet in your teh browser!
+# Telnet
 
-Try connecting to aardmud.org on port 4000.
+Uses the Socket API to connect as a TCP client to aardmud.org on port 4000.
+Renders it in glorious ANSIColor for your viewing joy.
 
 * TCP client
-* DNS resolver
 * ANSI color renderer
+* DNS resolver [Deprecated]
+
+## Resources
+
+* [Socket API](http://developer.chrome.com/trunk/apps/socket.html)
+* [Runtime](http://developer.chrome.com/trunk/apps/app.runtime.html)
+* [Window](http://developer.chrome.com/trunk/apps/app.window.html)
 
 ## Credits
 
 Networking stuff, ANSI colors by Boris Smus.
 Terminal by Eric Bidelman: http://www.htmlfivewow.com/demos/terminal/terminal.html
+
+---
+Last updated: 2012-08-14 by paullewis

telnet/ansi-converter.js

@@ -36,6 +36,8 @@ Author: Boris Smus (smus@chromium.org)
 
   /**
    * Given an ANSI string, format it in HTML.
+   *
+   * @param {String} ansiString The string to format
    */
   A.prototype.formatAnsi = function(ansiString) {
     var out = ansiString;
@@ -49,23 +51,25 @@ Author: Boris Smus (smus@chromium.org)
   };
 
   /**
-   * Given a string and a color, return an ANSI string.
+   * Replaces an ANSI Code in the string
+   * with a span-wrapped version. Used as
+   * a callback in the formatAnsi function
+   *
+   * @param {String} matched The substring that matched
+   * @param {String} ansiString The actual matched string
+   * @param {Number} index The offset of the match within the overall string
+   * @param {String} s The overall string
    */
-  A.prototype.colorizeString = function(string, color) {
-    // TODO: implement me!
-  };
-
-
   A.prototype._replaceCodeWithHTML = function(matched, ansiString, index, s) {
     // Extract the ansiCode from the string.
     var split = ansiString.split(';');
-    var ansiCode = parseInt(split[split.length - 1]);
+    var ansiCode = parseInt(split[split.length - 1], 10);
     // Convert code to color code.
     var colorCode = ansiCode - 30;
     // Lookup the corresponding style.
     var style = 'color: ' + COLOR_TABLE[colorCode];
     return '<span style="' + style + ';">';
-  }
+  };
 
   exports.AnsiConverter = A;
 })(window);

telnet/launch.js

@@ -1,6 +1,12 @@
+/**
+ * Listens for the app launching then creates the window
+ *
+ * @see http://developer.chrome.com/trunk/apps/app.runtime.html
+ * @see http://developer.chrome.com/trunk/apps/app.window.html
+ */
 chrome.app.runtime.onLaunched.addListener(function() {
   chrome.app.window.create('terminal.html', {
-    width: 680,
+    width: 880,
     height: 480
   });
 });

telnet/main.js

@@ -1,12 +1,18 @@
+/**
+ * Shows and hides the help panel
+ */
 function toggleHelp() {
   document.querySelector('.help').classList.toggle('hidden');
   document.body.classList.toggle('dim');
 }
 
 (function() {
+
+  // Create and init the terminal
   var term = new Terminal('container');
   term.initFS(false, 1024 * 1024);
 
+  // Capture key presses
   document.body.addEventListener('keydown', function(e) {
     if (e.keyCode == 27) { // Esc
       toggleHelp();
@@ -28,14 +34,22 @@ function toggleHelp() {
   // Bind the connect dialog to real stuff.
   var button = document.getElementById('connect');
   button.addEventListener('click', function() {
+
     // Disconnect from previous socket.
     var host = document.getElementById('host').value;
-    var port = parseInt(document.getElementById('port').value);
+    var port = parseInt(document.getElementById('port').value, 10);
     tcpClient.disconnect();
     connect(host, port);
     toggleHelp();
+
   });
 
+  /**
+   * Connects to a host and port
+   *
+   * @param {String} host The remote host to connect to
+   * @param {Number} port The port to connect to at the remote host
+   */
   function connect(host, port) {
     tcpClient = new TcpClient(host, port);
     tcpClient.connect(function() {

telnet/manifest.json

@@ -4,7 +4,6 @@
   "manifest_version": 2,
   "minimum_chrome_version": "23",
   "icons": {
-    "16": "icon_16.png",
     "128": "icon_128.png"
   },
   "app": {

telnet/tcp-client.js

@@ -17,12 +17,17 @@ Author: Boris Smus (smus@chromium.org)
 */
 
 (function(exports) {
-  /**
-   * Define some local variables here.
-   */
+
+  // Define some local variables here.
   var socket = chrome.socket || chrome.experimental.socket;
   var dns = chrome.experimental.dns;
 
+  /**
+   * Creates an instance of the client
+   *
+   * @param {String} host The remote host to connect to
+   * @param {Number} port The port to connect to at the remote host
+   */
   function TcpClient(host, port) {
     this.host = host;
     this.port = port;
@@ -44,6 +49,9 @@ Author: Boris Smus (smus@chromium.org)
 
   /**
    * Connects to the TCP socket, and creates an open socket.
+   *
+   * @see http://developer.chrome.com/trunk/apps/socket.html#method-create
+   * @param {Function} callback The function to call on connection
    */
   TcpClient.prototype.connect = function(callback) {
     // First resolve the hostname to an IP.
@@ -54,27 +62,53 @@ Author: Boris Smus (smus@chromium.org)
       // Register connect callback.
       this.callbacks.connect = callback;
     }.bind(this));
-  }
+  };
 
+  /**
+   * Sends a message down the wire to the remote side
+   *
+   * @see http://developer.chrome.com/trunk/apps/socket.html#method-write
+   * @param {String} msg The message to send
+   * @param {Function} callback The function to call when the message has sent
+   */
   TcpClient.prototype.sendMessage = function(msg, callback) {
     this._stringToArrayBuffer(msg + '\n', function(arrayBuffer) {
       socket.write(this.socketId, arrayBuffer, this._onWriteComplete.bind(this));
     }.bind(this));
 
     // Register sent callback.
     this.callbacks.sent = callback;
-  }
+  };
 
+  /**
+   * Sets the callback for when a message is received
+   *
+   * @param {Function} callback The function to call when a message has arrived
+   */
   TcpClient.prototype.addResponseListener = function(callback) {
     // Register received callback.
     this.callbacks.recv = callback;
-  }
+  };
 
+  /**
+   * Disconnects from the remote side
+   *
+   * @see http://developer.chrome.com/trunk/apps/socket.html#method-disconnect
+   */
   TcpClient.prototype.disconnect = function() {
     socket.disconnect(this.socketId);
     this.isConnected = false;
-  }
+  };
 
+  /**
+   * The callback function used for when we attempt to have Chrome
+   * create a socket. If the socket is successfully created
+   * we go ahead and connect to the remote side.
+   *
+   * @private
+   * @see http://developer.chrome.com/trunk/apps/socket.html#method-connect
+   * @param {Object} createInfo The socket details
+   */
   TcpClient.prototype._onCreate = function(createInfo) {
     this.socketId = createInfo.socketId;
     if (this.socketId > 0) {
@@ -83,23 +117,46 @@ Author: Boris Smus (smus@chromium.org)
     } else {
       error('Unable to create socket');
     }
-  }
+  };
 
+  /**
+   * The callback function used for when we attempt to have Chrome
+   * connect to the remote side. If a successful connection is
+   * made then polling starts to check for data to read
+   *
+   * @private
+   * @param {Number} resultCode Indicates whether the connection was successful
+   */
   TcpClient.prototype._onConnectComplete = function(resultCode) {
     // Start polling for reads.
-    setInterval(this._periodicallyRead.bind(this), 500)
+    setInterval(this._periodicallyRead.bind(this), 500);
 
     if (this.callbacks.connect) {
       console.log('connect complete');
       this.callbacks.connect();
     }
     log('onConnectComplete');
-  }
+  };
 
+  /**
+   * Checks for new data to read from the socket
+   *
+   * @see http://developer.chrome.com/trunk/apps/socket.html#method-read
+   */
   TcpClient.prototype._periodicallyRead = function() {
     socket.read(this.socketId, null, this._onDataRead.bind(this));
-  }
+  };
 
+  /**
+   * Callback function for when data has been read from the socket.
+   * Converts the array buffer that is read in to a string
+   * and sends it on for further processing by passing it to
+   * the previously assigned callback function.
+   *
+   * @private
+   * @see TcpClient.prototype.addResponseListener
+   * @param {Object} readInfo The incoming message
+   */
   TcpClient.prototype._onDataRead = function(readInfo) {
     // Call received callback if there's data in the response.
     if (readInfo.resultCode > 0 && this.callbacks.recv) {
@@ -109,43 +166,66 @@ Author: Boris Smus (smus@chromium.org)
         this.callbacks.recv(str);
       }.bind(this));
     }
-  }
+  };
 
+  /**
+   * Callback for when data has been successfully
+   * written to the socket.
+   *
+   * @private
+   * @param {Object} writeInfo The outgoing message
+   */
   TcpClient.prototype._onWriteComplete = function(writeInfo) {
     log('onWriteComplete');
     // Call sent callback.
     if (this.callbacks.sent) {
       this.callbacks.sent(writeInfo);
     }
-  }
+  };
 
+  /**
+   * Converts an array buffer to a string
+   *
+   * @private
+   * @param {ArrayBuffer} buf The buffer to convert
+   * @param {Function} callback The function to call when conversion is complete
+   */
   TcpClient.prototype._arrayBufferToString = function(buf, callback) {
-    var bb = new WebKitBlobBuilder();
-    bb.append(buf);
+    var bb = new Blob([new Uint8Array(buf)]);
     var f = new FileReader();
     f.onload = function(e) {
-      callback(e.target.result)
-    }
-    f.readAsText(bb.getBlob());
-  }
+      callback(e.target.result);
+    };
+    f.readAsText(bb);
+  };
 
+  /**
+   * Converts a string to an array buffer
+   *
+   * @private
+   * @param {String} str The string to convert
+   * @param {Function} callback The function to call when conversion is complete
+   */
   TcpClient.prototype._stringToArrayBuffer = function(str, callback) {
-    var bb = new WebKitBlobBuilder();
-    bb.append(str);
+    var bb = new Blob([str]);
     var f = new FileReader();
     f.onload = function(e) {
         callback(e.target.result);
-    }
-    f.readAsArrayBuffer(bb.getBlob());
-  }
+    };
+    f.readAsArrayBuffer(bb);
+  };
 
+  /**
+   * Wrapper function for logging
+   */
   function log(msg) {
-    //document.getElementById('log').innerHTML += msg + '<br/>';
     console.log(msg);
   }
 
+  /**
+   * Wrapper function for error logging
+   */
   function error(msg) {
-    //document.getElementById('log').innerHTML += '<strong>Error: </strong>' + msg + '<br/>';
     console.error(msg);
   }
 

telnet/terminal.css

@@ -63,9 +63,7 @@ html, body {
 body {
   font-family: Inconsolata, monospace;
   color: white;
-  background: -webkit-radial-gradient(center center, contain, rgba(0,150,0,1), black) center center no-repeat, black; /*center center for the gradient scrolls with the page :(*/
-  /*background: -webkit-radial-gradient(center 75%, contain, rgba(0,75,0,0.8), black) center center no-repeat, black;*/
-  -webkit-background-size: 110% 100%;
+  background: #222;
 }
 .offscreen {
   background: -webkit-linear-gradient(top, #000, #333);
@@ -99,8 +97,7 @@ body {
     rgb(251,173,51) 57%,
     rgb(255,208,77) 79%
   );*/
-  background: -webkit-radial-gradient(center center, contain, rgba(0,175,0,1), black) center center no-repeat;
-  -webkit-background-size: 125% 125%;
+  background: #333;
 }
 /*
 .crt {