Merge branch 'esphen-issue5'

Author: janodvarko

data/components/frame-table.js

@@ -120,13 +120,40 @@ var FrameRow = React.createFactory(React.createClass({
 
   displayName: "FrameRow",
 
+  getInitialState() {
+    return {};
+  },
+
+  /**
+   * Create TreeView sub-components in lifecycle methods so we
+   * only generate them once and don't run into state issues
+   * with the TreeView component.
+   */
+  componentWillMount() {
+    if (this.props.frame) {
+      this.setState({ payload: this.buildPayload(this.props.frame) });
+    }
+  },
+
+  /**
+   * Create TreeView sub-components in lifecycle methods so we
+   * only generate them once and don't run into state issues
+   * with the TreeView component.
+   */
+  componentWillReceiveProps({ frame }) {
+    if (frame !== this.props.frame) {
+      this.setState({ payload: this.buildPayload(this.props.frame) });
+    }
+  },
+
   /**
    * 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;
+    return nextProps.selection !== this.props.selection && (
+      this.props.frame == nextProps.selection ||
+      this.props.frame == this.props.selection);
   },
 
   onClick: function() {
@@ -135,8 +162,35 @@ var FrameRow = React.createFactory(React.createClass({
     }
   },
 
+  buildPayload(frame) {
+    var payload;
+
+    // Test support for inline previews.
+    if (frame.socketIo) {
+      payload = TreeView({
+        key: "preview-socketio",
+        data: {"Socket IO": frame.socketIo},
+      });
+    } else if (frame.sockJs) {
+      payload = TreeView({
+        key: "preview-sockjs",
+        data: {"SockJS": frame.sockJs},
+      });
+    } else if (frame.json) {
+      payload = TreeView({
+        key: "preview-json",
+        data: {"JSON": frame.json},
+      });
+    } else {
+      // Fall back to showing a string
+      payload = Str.cropString(frame.data.payload, 50);
+    }
+    return payload;
+  },
+
   render: function() {
     var frame = this.props.frame;
+    var payload = this.state.payload;
     var data = frame.data;
 
     var className = "frameRow " + (frame.sent ? "send" : "receive");
@@ -146,19 +200,11 @@ var FrameRow = React.createFactory(React.createClass({
       className += " selected";
     }
 
-    var payload = Str.cropString(data.payload, 50);
-    var size = Str.formatSize(data.payload.length);
+    var size =  Str.formatSize(data.payload.length);
     var time = new Date(data.timeStamp / 1000);
     var timeText = time.getHours() + ":" + time.getMinutes() +
       ":" + time.getSeconds() + "." + time.getMilliseconds();
 
-    // Test support for inline previews. The problem is the
-    // state of the TreeView component.
-    /*if (frame.socketIo) {
-      var data = { payload: frame.socketIo };
-      payload = TreeView({key: "detailsTabTree", data: data})
-    }*/
-
     return (
       tr({className: className, onClick: this.onClick},
         td({className: "direction"},

data/css/frame-table.css

@@ -60,6 +60,27 @@
   padding: 1px;
 }
 
+/******************************************************************************/
+/* Inline Packet Details Preview */
+
+.frameRow .preview {
+  overflow: auto;
+  width: 100%;
+  max-height: 200px;
+}
+
+.frameRow .memberRow:hover {
+  background-color: transparent;
+}
+
+.frameRow .domTable {
+  width: auto;
+}
+
+.frameRow .domTable > tbody > tr > td {
+  border-bottom: transparent;
+}
+
 /******************************************************************************/
 /* Events */
 
@@ -148,21 +169,6 @@
   padding-right: 3px;
 }
 
-/******************************************************************************/
-/* Frame Row Selection */
-
-.frameRow:not(.selected):hover td {
-  background: #EFEFEF;
-}
-
-.eventRow.selected .text,
-.eventRow.selected .uri,
-.frameRow.selected td.opcode,
-.frameRow.selected td {
-  background: #3399ff;
-  color: white;
-}
-
 /******************************************************************************/
 /* Summary */
 
@@ -206,15 +212,15 @@
   border-bottom: none;
 }
 
-.theme-light .frameRow:hover td,
-.theme-dark .frameRow:hover td {
-  background-color: var(--theme-selection-background-semitransparent);
+.theme-light .frameRow:hover>td,
+.theme-dark .frameRow:hover>td {
+  background-color: var(--theme-toolbar-background);
 }
 
-.theme-light .frameRow.selected td,
-.theme-dark .frameRow.selected td {
-  color: var(--theme-selection-color);
-  background-color: var(--theme-selection-background);
+.theme-light .frameRow.selected>td,
+.theme-dark .frameRow.selected>td {
+  /* JSON text (blue) must be visible, so we can't use --theme-selection-background */
+  background-color: var(--theme-selection-background-semitransparent);
 }
 
 .theme-light .frameTHead th,