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