tweak the participants header bar in the packets list

- extract labels into locales
- rename to PacketsParticipantsBar
- add bottom border and box shadow to the header bar
- change proposed labels to: Actors (Server) and Toolbox (Client)

chrome/locale/en-US/inspector.properties

@@ -84,3 +84,8 @@ rdpInspector.menu.File=File
 rdpInspector.menu.Options=Options
 rdpInspector.cmd.load=Load
 rdpInspector.cmd.save=Save
+
+# LOCALIZATION NOTE (rdpInspector.label.serverParticipant, rdpInspector.label.clientParticipant):
+# Labels for the participant header bar in the packets panel main area.
+rdpInspector.label.serverParticipant=Actors
+rdpInspector.label.clientParticipant=Toolbox

data/inspector/components/packets-panel.js

@@ -19,32 +19,35 @@ const { Splitter } = require("./splitter");
 // Shortcuts
 const { DIV, SPAN } = Reps.DOM;
 
-var PacketsDirectionsBar = React.createClass({
-/** @lends PacketsDirectionsBar */
+var PacketsParticipantsBar = React.createClass({
+/** @lends PacketsParticipantsBar */
 
-  displayName: "PacketsDirectionsBar",
+  displayName: "PacketsParticipantsBar",
 
   render: function() {
     return DIV({
-      id: "packetsDirectionsBar",
+      id: "packetsParticipantsBar",
       style: {
         position: "relative",
-        height: "24px"
+        height: "24px",
+        borderBottom: "1px solid #aaaaaa",
+        boxShadow: "0px 2px 2px 0px #aaaaaa",
+        zIndex: "1000"
       }
     }, SPAN({ style: {
           position: "absolute",
           top: "0px",
           left: "10px",
           fontWeight: "bold",
           fontSize: "1.2em"
-        }, key: "server"}, "Server"),
+        }, key: "serverParticipant"}, Locale.$STR("rdpInspector.label.serverParticipant")),
         SPAN({ style: {
           position: "absolute",
           top: "0px",
           right: "10px",
           fontWeight: "bold",
           fontSize: "1.2em"
-        }, key: "client"}, "Client")
+        }, key: "clientParticipant"}, Locale.$STR("rdpInspector.label.clientParticipant"))
     );
   }
 });
@@ -72,7 +75,7 @@ var PacketsPanel = React.createClass({
         packetCacheEnabled: this.props.packetCacheEnabled,
         paused: this.props.paused
       }),
-      React.createElement(PacketsDirectionsBar, {}),
+      React.createElement(PacketsParticipantsBar, {}),
       PacketList({
         data: this.props.packets,
         actions: this.props.actions,