From 17b3ac16f4a654c7805a030fad0a8fd09b55a35b Mon Sep 17 00:00:00 2001 From: Luca Greco Date: Mon, 13 Jul 2015 14:17:49 +0200 Subject: [PATCH 1/5] add packets destinations (server and client) in packets list as header bar --- data/inspector/components/packets-panel.js | 33 +++++++++++++++++++++- data/inspector/css/packets-panel.css | 2 +- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/data/inspector/components/packets-panel.js b/data/inspector/components/packets-panel.js index 23f1ef2..893c906 100644 --- a/data/inspector/components/packets-panel.js +++ b/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, 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; } From 36060f8c9d67fe7c85a5a793458ea9f27ffaa116 Mon Sep 17 00:00:00 2001 From: Luca Greco Date: Mon, 13 Jul 2015 14:19:04 +0200 Subject: [PATCH 2/5] force minimum inspector window size on window resize events --- chrome/content/inspector-window.xul | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) 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 @@ + + + From cce12b60ce923bc0035f8b46b396a834aad4ceb5 Mon Sep 17 00:00:00 2001 From: Luca Greco Date: Fri, 17 Jul 2015 15:42:56 +0200 Subject: [PATCH 3/5] 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 | 5 +++++ data/inspector/components/packets-panel.js | 19 +++++++++++-------- 2 files changed, 16 insertions(+), 8 deletions(-) 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 893c906..e144e82 100644 --- a/data/inspector/components/packets-panel.js +++ b/data/inspector/components/packets-panel.js @@ -19,17 +19,20 @@ 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", @@ -37,14 +40,14 @@ var PacketsDirectionsBar = React.createClass({ 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, From e31d7dc3e7395f11f102964fc2510c520b0ebfbb Mon Sep 17 00:00:00 2001 From: Luca Greco Date: Tue, 28 Jul 2015 13:59:57 +0200 Subject: [PATCH 4/5] fix packets participants bar rendered over toolbar dropdown menus --- data/inspector/components/packets-panel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/data/inspector/components/packets-panel.js b/data/inspector/components/packets-panel.js index e144e82..fe64aca 100644 --- a/data/inspector/components/packets-panel.js +++ b/data/inspector/components/packets-panel.js @@ -32,7 +32,7 @@ var PacketsParticipantsBar = React.createClass({ height: "24px", borderBottom: "1px solid #aaaaaa", boxShadow: "0px 2px 2px 0px #aaaaaa", - zIndex: "1000" + zIndex: "900" } }, SPAN({ style: { position: "absolute", From 99c6f9d8248c39d8aa460e9d4cf65ee3a9e8c34f Mon Sep 17 00:00:00 2001 From: Luca Greco Date: Tue, 28 Jul 2015 15:14:59 +0200 Subject: [PATCH 5/5] fix missing close button on hover in the TreeEditorView component --- data/inspector/css/tree-editor-view.css | 5 +++++ 1 file changed, 5 insertions(+) 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; +}