#32 WAMP support

Author: janodvarko

chrome/locale/en-US/websocket-monitor.properties

@@ -15,8 +15,17 @@ websocketmonitor.Time=Time
 websocketmonitor.SocketIO=Socket.IO
 websocketmonitor.SockJS=SockJS
 websocketmonitor.JSON=JSON
+
+# LOCALIZATION NOTE (websocketmonitor.WAMP): A label used as a title for side
+# panel that displays WAMP WS messages.
+websocketmonitor.WAMP=WAMP
+
+# LOCALIZATION NOTE (websocketmonitor.option.tabularView): A label and tooltip
+# used for a toolbar button that allows switching the frame list to
+# Tabular view
 websocketmonitor.option.tabularView=Tabular View
 websocketmonitor.option.tip.tabularView=Use tabular view for list of sent and received frames.
+
 pluralRule=1
 
 websocketmonitor.summary.frameCount=%1$S frame;%1$S frames

data/components/sidebar.js

@@ -18,6 +18,7 @@ const { PayloadTab } = createFactories(require("./payload-tab"));
 const { SocketIOTab } = createFactories(require("./socketio-tab"));
 const { SockJSTab } = createFactories(require("./sockjs-tab"));
 const { JSONTab } = createFactories(require("./json-tab"));
+const { WampTab } = createFactories(require("./wamp-tab"));
 
 /**
  * @template This template represents a list of packets displayed
@@ -69,6 +70,14 @@ var Sidebar = React.createClass({
       ));
     }
 
+    if (selectedFrame && selectedFrame.wamp) {
+      tabs.push(
+        TabPanel({className: "wamp", key: "wamp",
+          title: Locale.$STR("websocketmonitor.WAMP")},
+          WampTab(this.props)
+      ));
+    }
+
     if (selectedFrame && selectedFrame.json) {
       tabs.push(
         TabPanel({className: "json", key: "json",

data/components/wamp-tab.js

@@ -0,0 +1,40 @@
+/* See license.txt for terms of usage */
+
+define(function(require, exports/*, module*/) {
+
+"use strict";
+
+// Dependencies
+const React = require("react");
+
+// Firebug SDK
+const { Reps } = require("reps/repository");
+const { TreeView } = require("reps/tree-view");
+
+// Shortcuts
+const { DIV } = Reps.DOM;
+
+/**
+ * Component responsible for rendering the WAMP tab.
+ */
+var WampTab = React.createClass({
+/** @lends WampTab */
+
+  displayName: "WampTab",
+
+  render: function() {
+    var selectedFrame = this.props.selection || {};
+    var data = selectedFrame.wamp;
+
+    return (
+      DIV({className: "details"},
+        TreeView({key: "WampTabTree", data: data})
+      )
+    );
+  }
+});
+
+// Exports from this module
+exports.WampTab = WampTab;
+});
+