Adds debug logging.

estos_log.js

@@ -0,0 +1,23 @@
+Strophe.addConnectionPlugin('logger', {
+    // logs raw stanzas and makes them available for download as JSON
+    connection: null,
+    log: [],
+    init: function (conn) {
+        this.connection = conn;
+        this.connection.rawInput = this.log_incoming.bind(this);;
+        this.connection.rawOutput = this.log_outgoing.bind(this);;
+    },
+    log_incoming: function (stanza) {
+        this.log.push([new Date().getTime(), 'incoming', stanza]);
+    },
+    log_outgoing: function (stanza) {
+        this.log.push([new Date().getTime(), 'outgoing', stanza]);
+    },
+    // <a onclick="connection.logger.dump(event.target);">my download button</a>
+    dump: function (what, filename){
+        what.download = filename || 'xmpplog.json';
+        what.href = 'data:application/json;charset=utf-8,\n';
+        what.href += encodeURIComponent(JSON.stringify(this.log, null, '  '));
+        return true;
+    }
+});

index.html

@@ -5,6 +5,7 @@
     <script src="libs/strophejingle.bundle.js"></script><!-- strophe.jingle bundle -->
     <script src="libs/colibri.js"></script><!-- colibri focus implementation -->
     <script src="muc.js"></script><!-- simple MUC library -->
+    <script src="estos_log.js"></script><!-- simple stanza logger -->
     <script src="app.js"></script><!-- application logic -->
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
@@ -61,7 +62,7 @@
         <div id="chatconversation"></div>
         <textarea id="usermsg" class= "animated" placeholder='Enter text...' autofocus></textarea>
     </div>
-
+    <a id="downloadlog" class="fa fa-cloud-download" title="Download logfile for support" onclick="connection.logger.dump(event.target);" style="position: absolute; bottom: 5; left: 5; overflow: visible; z-index: 100;"></a>
     <script>
     </script>
   </body>