Merge pull request #62 from firebug/feature/query-string-parsing

Query String parsing

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

@@ -47,6 +47,10 @@ websocketmonitor.WAMP=WAMP
 # panel that displays MQTT messages.
 websocketmonitor.MQTT=MQTT
 
+# LOCALIZATION NOTE (websocketmonitor.QueryString): A label used as a title for
+# side panel that displays messages formatted as a Query String (foo?bar=baz).
+websocketmonitor.QueryString=Query String
+
 # LOCALIZATION NOTE (websocketmonitor.option.tabularView): A label and tooltip
 # used for a toolbar button that allows switching the frame list to
 # Tabular view

data/components/frame-list.js

@@ -211,6 +211,13 @@ define(function (require, exports) {
           data: {"MQTT": mqtt},
           mode: "tiny"
         });
+      } else if (this.props.config.enableQueryString !== false
+                 && frame.queryString) {
+        preview = TreeView({
+          key: "preview-query",
+          data: {"Query String": frame.queryString},
+          mode: "tiny"
+        });
       }
 
       const label = (type == "send") ?

data/components/frame-table.js

@@ -208,6 +208,12 @@ define(function (require, exports) {
           key: "preview-mqtt",
           data: {"MQTT": frame.mqtt},
         });
+      } else if (this.props.config.enableQueryString !== false
+                 && frame.queryString) {
+        payload = TreeView({
+          key: "preview-query",
+          data: {"Query String": frame.queryString},
+        });
       } else {
         // Fall back to showing a string
         payload = Str.cropString(frame.data.payload, 50);

data/components/query-string-tab.js

@@ -0,0 +1,39 @@
+/* See license.txt for terms of usage */
+
+"use strict";
+
+define(function (require, exports) {
+  // 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 Query String tab.
+   */
+  let QueryStringTab = React.createClass({
+  /** @lends QueryStringTab */
+
+    displayName: "QueryStringTab",
+
+    render: function () {
+      let selectedFrame = this.props.selection || {};
+      let data = selectedFrame.queryString;
+
+      return (
+        DIV({className: "details"},
+          TreeView({key: "QueryStringTabTree", data: data})
+        )
+      );
+    }
+  });
+
+  // Exports from this module
+  exports.QueryStringTab = QueryStringTab;
+});
+

data/components/sidebar.js

@@ -18,6 +18,7 @@ define(function (require, exports) {
   const { JSONTab } = createFactories(require("./json-tab"));
   const { WampTab } = createFactories(require("./wamp-tab"));
   const { MQTTTab } = createFactories(require("./mqtt-tab"));
+  const { QueryStringTab } = createFactories(require("./query-string-tab"));
 
   /**
    * @template This template represents a list of packets displayed
@@ -93,6 +94,14 @@ define(function (require, exports) {
         ));
       }
 
+      if (selectedFrame && selectedFrame.queryString) {
+        tabs.push(
+          TabPanel({className: "mqtt", key: "queryString",
+            title: Locale.$STR("websocketmonitor.QueryString")},
+            QueryStringTab(this.props)
+        ));
+      }
+
       tabActive = Math.min(tabActive, tabs.length);
 
       return (

data/view.js

@@ -61,6 +61,7 @@ define(function (require) {
             enableSockJs: Options.get("enableSockJs"),
             enableJson: Options.get("enableJson"),
             enableMqtt: Options.get("enableMqtt"),
+            enableQueryString: Options.get("enableQueryString"),
           }
         });
 

lib/wsm-panel.js

@@ -223,6 +223,7 @@ const WsmPanel = Class(
     data.wamp = this.decodeWampPacket(payload);
     data.json = this.decodeJsonPacket(payload);
     data.mqtt = this.decodeMqttPacket(payload);
+    data.queryString = this.decodeQueryString(payload);
   },
 
   // Socket.IO Parser
@@ -335,6 +336,36 @@ const WsmPanel = Class(
     }
   },
 
+  /**
+   * Parse query strings
+   */
+  decodeQueryString: function(data) {
+    if (!prefs.enableQueryString) {
+      return;
+    }
+
+    // Check if the data matches foo?bar
+    if (!/\w+\?.+/.test(data)) {
+      return;
+    }
+
+    const result = {};
+
+    var vars = data.substr(data.indexOf('?') + 1).split('&');
+    vars.forEach(function(item) {
+      var pair = item.split('=');
+
+      // ?foo&bar&baz is valid
+      if (pair.length === 2) {
+        result[pair[0]] = decodeURIComponent(pair[1]);
+      } else {
+        result[pair[0]] = undefined;
+      }
+    });
+
+    return result;
+  },
+
   // NetMonitor Overlay
 
   /**

package.json

@@ -82,6 +82,13 @@
       "description": "Parse MQTT frames",
       "type": "bool",
       "value": true
+    },
+    {
+      "name": "enableQueryString",
+      "title": "Query string support",
+      "description": "Parse query string frames (frames that look like foo&bar=baz)",
+      "type": "bool",
+      "value": true
     }
   ]
 }