#36 Display connect and disconnect events in the frame list

Author: janodvarko

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

@@ -38,3 +38,10 @@ websocketmonitor.perspective.tableView=Show Table
 # A label and tooltip used for a filter toolbar button displayed in the Network panel.
 webSockets.network.filter.label=WS
 webSockets.network.filter.tip=Show WebSockets upgrade requests
+
+# LOCALIZATION NOTE (websocketmonitor.event.connected, websocketmonitor.event.disconnected,
+# websocketmonitor.event.code): A label used for WS events that are also displayed
+# in the frame list.
+websocketmonitor.event.connected=Connected to:
+websocketmonitor.event.disconnected=Disconnected
+websocketmonitor.event.code=code:

data/components/frame-list.js

@@ -78,7 +78,7 @@ var FrameList = React.createClass({
     // Render all frames.
     for (var i in frames) {
       var frame = frames[i];
-      output.push(FrameBubble({
+      output.push(this.getFrameTag(frame)({
         key: "frame-" + frame.id,
         frame: frame,
         selection: this.props.selection,
@@ -99,6 +99,15 @@ var FrameList = React.createClass({
         div({}, output)
       )
     );
+  },
+
+  getFrameTag: function(frame) {
+    switch (frame.type) {
+    case "event":
+      return EventBubble;
+    case "frame":
+      return FrameBubble;
+    }
   }
 });
 
@@ -219,6 +228,77 @@ var FrameBubble = React.createFactory(React.createClass({
   },
 }));
 
+/**
+ * Template for WS events (connect and disconnect) displayed in the
+ * frame list (list view)
+ */
+var EventBubble = React.createFactory(React.createClass({
+/** @lends FrameBubble */
+
+  displayName: "FrameBubble",
+
+  /**
+   * Frames need to be re-rendered only if the selection changes.
+   * This is an optimization that makes the list rendering a lot faster.
+   */
+  shouldComponentUpdate: function(nextProps, nextState) {
+    return this.props.frame == nextProps.selection ||
+      this.props.frame == this.props.selection;
+  },
+
+  // Event Handlers
+
+  onClick: function(event) {
+    var target = event.target;
+
+    event.stopPropagation();
+    event.preventDefault();
+
+    // If a 'memberLabel' is clicked inside the inline preview
+    // tree, let's process it by the tree, so expansion and
+    // collapsing works. Otherwise just select the frame.
+    if (!target.classList.contains("memberLabel")) {
+      if (this.props.frame != this.props.selection) {
+        this.props.dispatch(selectFrame(this.props.frame));
+      }
+    }
+  },
+
+  render: function() {
+    var frame = this.props.frame;
+
+    // Frame classes
+    var classNames = ["frameBubble", "eventBubble", frame.type];
+    if (this.props.selection == frame) {
+      classNames.push("selected");
+    }
+
+    var label = frame.uri ?
+      Locale.$STR("websocketmonitor.event.connected") :
+      Locale.$STR("websocketmonitor.event.disconnected");
+
+    var uri = frame.uri ? frame.uri :
+      Locale.$STR("websocketmonitor.event.code") + " " + frame.code;
+
+    var socketIdLabel = Locale.$STR("websocketmonitor.SocketID") +
+      ": " + frame.webSocketSerialID;
+
+    return (
+      div({className: classNames.join(" "), onClick: this.onClick},
+        div({className: "frameBox"},
+          div({className: "frameContent"},
+            div({className: "body"},
+              div({className: "text"}, label),
+              div({className: "uri"}, uri),
+              div({className: "socketId"}, socketIdLabel)
+            )
+          )
+        )
+      )
+    );
+  }
+}));
+
 /**
  * @template This template is responsible for rendering a message
  * at the top of the frame list that informs the user about reaching

data/components/frame-table.js

@@ -53,7 +53,7 @@ var FrameTable = React.createClass({
     summary = filter.summary || summary;
 
     // Render list of frames.
-    var rows = frames.map(frame => FrameRow({
+    var rows = frames.map(frame => this.getFrameTag(frame)({
       key: frame.id,
       selection: this.props.selection,
       frame: frame,
@@ -100,6 +100,15 @@ var FrameTable = React.createClass({
         tableFooter
       )
     );
+  },
+
+  getFrameTag: function(frame) {
+    switch (frame.type) {
+    case "event":
+      return EventRow;
+    case "frame":
+      return FrameRow;
+    }
   }
 });
 
@@ -167,6 +176,60 @@ var FrameRow = React.createFactory(React.createClass({
   }
 }));
 
+/**
+ * Template for WS events (connect and disconnect) displayed in the
+ * frame list (table view)
+ */
+var EventRow = React.createFactory(React.createClass({
+/** @lends FrameRow */
+
+  displayName: "EventRow",
+
+  /**
+   * Frames need to be re-rendered only if the selection changes.
+   * This is an optimization that makes the list rendering a lot faster.
+   */
+  shouldComponentUpdate: function(nextProps, nextState) {
+    return this.props.frame == nextProps.selection ||
+      this.props.frame == this.props.selection;
+  },
+
+  onClick: function() {
+    if (this.props.frame != this.props.selection) {
+      this.props.dispatch(selectFrame(this.props.frame));
+    }
+  },
+
+  render: function() {
+    var frame = this.props.frame;
+    var className = "frameRow eventRow";
+
+    if (this.props.selection == frame) {
+      className += " selected";
+    }
+
+    var label = frame.uri ?
+      Locale.$STR("websocketmonitor.event.connected") :
+      Locale.$STR("websocketmonitor.event.disconnected");
+
+    var uri = frame.uri ? frame.uri :
+      Locale.$STR("websocketmonitor.event.code") + " " + frame.code;
+
+    return (
+      tr({className: className, onClick: this.onClick},
+        td({}),
+        td({className: "socketId"},
+          frame.webSocketSerialID
+        ),
+        td({className: "", colSpan: 6},
+          span({className: "text"}, label),
+          span({className: "uri"}, uri)
+        )
+      )
+    );
+  }
+}));
+
 /**
  * Used to display a warning if "@mozilla.org/websocketevent/service;1"
  * needed by this extension isn't available on the platform.

data/css/frame-list.css

@@ -235,3 +235,27 @@
   width: 10px;
   text-align: center;
 }
+
+/******************************************************************************/
+/* Frame Events */
+
+.frameBubble.event .body {
+  min-width: 200px;
+}
+
+.frameBubble.event {
+  text-align: center;
+}
+
+.frameBubble.event .uri {
+  color: green;
+}
+
+.frameBubble.event .text {
+  color: black;
+  font-weight: bold;
+}
+
+.frameBubble.event .socketId {
+  color: gray;
+}

data/css/frame-table.css

@@ -60,6 +60,20 @@
   padding: 1px;
 }
 
+/******************************************************************************/
+/* Events */
+
+.eventRow .uri {
+  color: gray;
+  padding-left: 5px;
+}
+
+.eventRow .text {
+  color: black;
+  font-weight: bold;
+  padding-left: 20px;
+}
+
 /******************************************************************************/
 /* Frame Columns */
 
@@ -141,6 +155,8 @@
   background: #EFEFEF;
 }
 
+.eventRow.selected .text,
+.eventRow.selected .uri,
 .frameRow.selected td.opcode,
 .frameRow.selected td {
   background: #3399ff;

data/reducers/frames.js

@@ -72,10 +72,15 @@ function addFrames(state, newFrames) {
   // Update summary info
   newFrames.forEach(frame => {
     var data = frame.data;
-    totalSize += data.payload.length;
-    startTime = startTime ? startTime : data.timeStamp;
-    endTime = data.timeStamp;
-    frameCount++;
+    if (data) {
+      totalSize += data.payload ? data.payload.length : 0;
+      startTime = startTime ? startTime : data.timeStamp;
+      endTime = data.timeStamp;
+    }
+
+    if (frame.type == "frame") {
+      frameCount++;
+    }
   });
 
   // Return new state
@@ -110,7 +115,7 @@ function filterFrames(state, filter) {
   if (filter.text) {
     frames = state.frames.filter(frame => {
       var data = frame.data;
-      if (data.payload.indexOf(filter.text) != -1) {
+      if (data.payload && data.payload.indexOf(filter.text) != -1) {
         summary.totalSize += data.payload.length;
         summary.startTime = summary.startTime ? summary.startTime : data.timeStamp;
         summary.endTime = data.timeStamp;

data/view.js

@@ -66,6 +66,19 @@ var WebSocketsView = createView(PanelView,
 
   // nsIWebSocketEventService events
 
+  webSocketCreated: function(data) {
+    data.type = "event";
+    this.lazyAdd(data);
+  },
+
+  webSocketOpened: function(data) {
+  },
+
+  webSocketClosed: function(data) {
+    data.type = "event";
+    this.lazyAdd(data);
+  },
+
   /**
    * Event handlers are executed directly according to the
    * event types sent from the chrome scope.
@@ -75,12 +88,14 @@ var WebSocketsView = createView(PanelView,
   frameReceived: function(frame) {
     frame = JSON.parse(frame);
     frame.received = true;
+    frame.type = "frame";
     this.lazyAdd(frame);
   },
 
   frameSent: function(frame) {
     frame = JSON.parse(frame);
     frame.sent = true;
+    frame.type = "frame";
     this.lazyAdd(frame);
   },
 

lib/wsm-panel.js

@@ -190,19 +190,18 @@ const WsmPanel = Class(
   // nsIWebSocketEventService events
 
   onWebSocketCreated: function(data) {
-    FBTrace.sysout("onWebSocketCreated", data);
+    this.postContentMessage("webSocketCreated", data);
   },
 
   onWebSocketOpened: function(data) {
-    FBTrace.sysout("onWebSocketOpened", data);
+    this.postContentMessage("webSocketOpened", data);
   },
 
   onWebSocketClosed: function(data) {
-    FBTrace.sysout("onWebSocketClosed", data);
+    this.postContentMessage("webSocketClosed", data);
   },
 
   onWebSocketMessageAvailable: function(data) {
-    FBTrace.sysout("onWebSocketMessageAvailable", data);
   },
 
   onFrameReceived: function(frame) {