add an header for client / server labels in the packets list

chrome/content/inspector-window.xul

@@ -44,5 +44,29 @@
     <script type="application/x-javascript">
     window.gFindBar = document.getElementById("FindToolbar");
     </script>
+
+    <script type="application/x-javascript">
+    <![CDATA[
+    const MIN_WIDTH=700, MIN_HEIGHT=600;
+    let resizeTaskID;
+
+    window.addEventListener("resize", (event) => {
+      let { outerWidth, outerHeight } = window;
+
+      let newWidth = outerWidth >= MIN_WIDTH ? outerWidth : MIN_WIDTH;
+      let newHeight = outerHeight >= MIN_HEIGHT ? outerHeight : MIN_HEIGHT;
+
+      if (outerWidth < MIN_WIDTH || outerHeight < MIN_HEIGHT) {
+        event.preventDefault();
+        if (resizeTaskID) {
+          clearTimeout(resizeTaskID);
+        }
+        resizeTaskID = setTimeout(() => window.resizeTo(newWidth, newHeight), 200);
+        return false;
+      }
+    }, false)
+    ]]>
+    </script>
+
   </vbox>
 </window>

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

@@ -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,

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;
 }

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;
+}