diff --git a/chrome/content/inspector-window.xul b/chrome/content/inspector-window.xul
index e0f5bea..2657be3 100644
--- a/chrome/content/inspector-window.xul
+++ b/chrome/content/inspector-window.xul
@@ -44,5 +44,29 @@
+
+
+
diff --git a/chrome/locale/en-US/inspector.properties b/chrome/locale/en-US/inspector.properties
index 9491fb5..ee688d5 100644
--- a/chrome/locale/en-US/inspector.properties
+++ b/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
diff --git a/data/inspector/components/packets-panel.js b/data/inspector/components/packets-panel.js
index 23f1ef2..fe64aca 100644
--- a/data/inspector/components/packets-panel.js
+++ b/data/inspector/components/packets-panel.js
@@ -17,7 +17,40 @@ const { PacketsToolbar } = require("./packets-toolbar");
const { Splitter } = require("./splitter");
// Shortcuts
-const { DIV } = Reps.DOM;
+const { DIV, SPAN } = Reps.DOM;
+
+var PacketsParticipantsBar = React.createClass({
+/** @lends PacketsParticipantsBar */
+
+ displayName: "PacketsParticipantsBar",
+
+ render: function() {
+ return DIV({
+ id: "packetsParticipantsBar",
+ style: {
+ position: "relative",
+ height: "24px",
+ borderBottom: "1px solid #aaaaaa",
+ boxShadow: "0px 2px 2px 0px #aaaaaa",
+ zIndex: "900"
+ }
+ }, SPAN({ style: {
+ position: "absolute",
+ top: "0px",
+ left: "10px",
+ fontWeight: "bold",
+ fontSize: "1.2em"
+ }, key: "serverParticipant"}, Locale.$STR("rdpInspector.label.serverParticipant")),
+ SPAN({ style: {
+ position: "absolute",
+ top: "0px",
+ right: "10px",
+ fontWeight: "bold",
+ fontSize: "1.2em"
+ }, key: "clientParticipant"}, Locale.$STR("rdpInspector.label.clientParticipant"))
+ );
+ }
+});
/**
* @template This template renders 'Packets' tab body.
@@ -42,6 +75,7 @@ var PacketsPanel = React.createClass({
packetCacheEnabled: this.props.packetCacheEnabled,
paused: this.props.paused
}),
+ React.createElement(PacketsParticipantsBar, {}),
PacketList({
data: this.props.packets,
actions: this.props.actions,
diff --git a/data/inspector/css/packets-panel.css b/data/inspector/css/packets-panel.css
index 4fe9915..75590fd 100644
--- a/data/inspector/css/packets-panel.css
+++ b/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;
}
diff --git a/data/inspector/css/tree-editor-view.css b/data/inspector/css/tree-editor-view.css
index ffec34b..a393717 100644
--- a/data/inspector/css/tree-editor-view.css
+++ b/data/inspector/css/tree-editor-view.css
@@ -66,3 +66,8 @@
background: yellow;
color: black;
}
+
+/* FIX: missing close button on hover */
+.closeButton:hover {
+ filter: url("resource://rdpinspector-at-getfirebug-dot-com/node_modules/firebug.sdk/skin/classic/shared/filters.svg#darken") !important;
+}