add packets destinations (server and client) in packets list as header bar

Author: rpl

data/inspector/components/packets-panel.js

@@ -17,7 +17,37 @@ const { PacketsToolbar } = require("./packets-toolbar");
 const { Splitter } = require("./splitter");
 
 // Shortcuts
-const { DIV } = Reps.DOM;
+const { DIV, SPAN } = Reps.DOM;
+
+var PacketsDirectionsBar = React.createClass({
+/** @lends PacketsDirectionsBar */
+
+  displayName: "PacketsDirectionsBar",
+
+  render: function() {
+    return DIV({
+      id: "packetsDirectionsBar",
+      style: {
+        position: "relative",
+        height: "24px"
+      }
+    }, SPAN({ style: {
+          position: "absolute",
+          top: "0px",
+          left: "10px",
+          fontWeight: "bold",
+          fontSize: "1.2em"
+        }, key: "server"}, "Server"),
+        SPAN({ style: {
+          position: "absolute",
+          top: "0px",
+          right: "10px",
+          fontWeight: "bold",
+          fontSize: "1.2em"
+        }, key: "client"}, "Client")
+    );
+  }
+});
 
 /**
  * @template This template renders 'Packets' tab body.
@@ -42,6 +72,7 @@ var PacketsPanel = React.createClass({
         packetCacheEnabled: this.props.packetCacheEnabled,
         paused: this.props.paused
       }),
+      React.createElement(PacketsDirectionsBar, {}),
       PacketList({
         data: this.props.packets,
         actions: this.props.actions,

data/inspector/css/packets-panel.css

@@ -155,7 +155,7 @@
 
 .packetsPanelBox .list {
   /* xxxHonza: minus the toolbar height*/
-  height: calc(100% - 30px);
+  height: calc(100% - 54px);
   overflow: auto;
   padding: 10px;
 }