summaryrefslogtreecommitdiffstats
path: root/devtools/client/netmonitor/src/components/MonitorPanel.js
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/netmonitor/src/components/MonitorPanel.js')
-rw-r--r--devtools/client/netmonitor/src/components/MonitorPanel.js271
1 files changed, 271 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/src/components/MonitorPanel.js b/devtools/client/netmonitor/src/components/MonitorPanel.js
new file mode 100644
index 0000000000..47b3758efe
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/MonitorPanel.js
@@ -0,0 +1,271 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+ Component,
+ createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const { div } = dom;
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+ connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+ findDOMNode,
+} = require("resource://devtools/client/shared/vendor/react-dom.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+ updateFormDataSections,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+ getSelectedRequest,
+ isSelectedRequestVisible,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+// Components
+const SplitBox = createFactory(
+ require("resource://devtools/client/shared/components/splitter/SplitBox.js")
+);
+const RequestList = createFactory(
+ require("resource://devtools/client/netmonitor/src/components/request-list/RequestList.js")
+);
+const Toolbar = createFactory(
+ require("resource://devtools/client/netmonitor/src/components/Toolbar.js")
+);
+
+loader.lazyGetter(this, "NetworkDetailsBar", function () {
+ return createFactory(
+ require("resource://devtools/client/netmonitor/src/components/request-details/NetworkDetailsBar.js")
+ );
+});
+
+loader.lazyGetter(this, "NetworkActionBar", function () {
+ return createFactory(
+ require("resource://devtools/client/netmonitor/src/components/NetworkActionBar.js")
+ );
+});
+
+// MediaQueryList object responsible for switching sidebar splitter
+// between landscape and portrait mode (depending on browser window size).
+const MediaQueryVert = window.matchMedia("(min-width: 700px)");
+
+// MediaQueryList object responsible for switching the toolbar
+// between single and 2-rows layout (depending on browser window size).
+const MediaQuerySingleRow = window.matchMedia("(min-width: 1020px)");
+
+/**
+ * Monitor panel component
+ * The main panel for displaying various network request information
+ */
+class MonitorPanel extends Component {
+ static get propTypes() {
+ return {
+ actions: PropTypes.object.isRequired,
+ connector: PropTypes.object.isRequired,
+ isEmpty: PropTypes.bool.isRequired,
+ networkDetailsOpen: PropTypes.bool.isRequired,
+ openNetworkDetails: PropTypes.func.isRequired,
+ toolboxDoc: PropTypes.object.isRequired,
+ // Callback for opening split console.
+ openSplitConsole: PropTypes.func,
+ onNetworkDetailsResized: PropTypes.func.isRequired,
+ request: PropTypes.object,
+ selectedRequestVisible: PropTypes.bool.isRequired,
+ sourceMapURLService: PropTypes.object,
+ openLink: PropTypes.func,
+ updateRequest: PropTypes.func.isRequired,
+ networkActionOpen: PropTypes.bool.isRequired,
+ };
+ }
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ isSingleRow: MediaQuerySingleRow.matches,
+ isVerticalSpliter: MediaQueryVert.matches,
+ };
+
+ this.onLayoutChange = this.onLayoutChange.bind(this);
+ this.onNetworkDetailsResized = this.onNetworkDetailsResized.bind(this);
+ }
+
+ componentDidMount() {
+ MediaQuerySingleRow.addListener(this.onLayoutChange);
+ MediaQueryVert.addListener(this.onLayoutChange);
+ this.persistDetailsPanelSize();
+ this.persistActionBarSize();
+ }
+
+ // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ updateFormDataSections(nextProps);
+ }
+
+ componentDidUpdate() {
+ const { selectedRequestVisible, openNetworkDetails } = this.props;
+ if (!selectedRequestVisible) {
+ openNetworkDetails(false);
+ }
+ }
+
+ componentWillUnmount() {
+ MediaQuerySingleRow.removeListener(this.onLayoutChange);
+ MediaQueryVert.removeListener(this.onLayoutChange);
+ this.persistDetailsPanelSize();
+ this.persistActionBarSize();
+ }
+
+ persistDetailsPanelSize() {
+ const { clientWidth, clientHeight } = findDOMNode(this.refs.endPanel) || {};
+
+ if (this.state.isVerticalSpliter && clientWidth) {
+ Services.prefs.setIntPref(
+ "devtools.netmonitor.panes-network-details-width",
+ clientWidth
+ );
+ }
+ if (!this.state.isVerticalSpliter && clientHeight) {
+ Services.prefs.setIntPref(
+ "devtools.netmonitor.panes-network-details-height",
+ clientHeight
+ );
+ }
+ }
+
+ persistActionBarSize() {
+ const { clientWidth, clientHeight } =
+ findDOMNode(this.refs.actionBar) || {};
+ if (clientWidth) {
+ Services.prefs.setIntPref(
+ "devtools.netmonitor.panes-search-width",
+ clientWidth
+ );
+ }
+ if (clientHeight) {
+ Services.prefs.setIntPref(
+ "devtools.netmonitor.panes-search-height",
+ clientHeight
+ );
+ }
+ }
+
+ onLayoutChange() {
+ this.setState({
+ isSingleRow: MediaQuerySingleRow.matches,
+ isVerticalSpliter: MediaQueryVert.matches,
+ });
+ }
+
+ onNetworkDetailsResized(width, height) {
+ // Cleaning width and height parameters, because SplitBox passes ALWAYS two values,
+ // while depending on orientation ONLY ONE dimension is managed by it at a time.
+ const { isVerticalSpliter } = this.state;
+ return this.props.onNetworkDetailsResized(
+ isVerticalSpliter ? width : null,
+ isVerticalSpliter ? null : height
+ );
+ }
+
+ renderActionBar() {
+ const { connector, isEmpty, networkActionOpen } = this.props;
+
+ const initialWidth = Services.prefs.getIntPref(
+ "devtools.netmonitor.panes-search-width"
+ );
+ const initialHeight = Services.prefs.getIntPref(
+ "devtools.netmonitor.panes-search-height"
+ );
+
+ return SplitBox({
+ className: "devtools-responsive-container",
+ initialWidth,
+ initialHeight,
+ minSize: "250px",
+ maxSize: "80%",
+ splitterSize: networkActionOpen ? 1 : 0,
+ startPanel:
+ networkActionOpen &&
+ NetworkActionBar({
+ ref: "actionBar",
+ connector,
+ }),
+ endPanel: RequestList({ isEmpty, connector }),
+ endPanelControl: false,
+ vert: true,
+ });
+ }
+
+ render() {
+ const {
+ actions,
+ connector,
+ networkDetailsOpen,
+ openLink,
+ openSplitConsole,
+ sourceMapURLService,
+ toolboxDoc,
+ } = this.props;
+
+ const initialWidth = Services.prefs.getIntPref(
+ "devtools.netmonitor.panes-network-details-width"
+ );
+
+ const initialHeight = Services.prefs.getIntPref(
+ "devtools.netmonitor.panes-network-details-height"
+ );
+
+ return div(
+ { className: "monitor-panel" },
+ Toolbar({
+ actions,
+ connector,
+ openSplitConsole,
+ singleRow: this.state.isSingleRow,
+ toolboxDoc,
+ }),
+ SplitBox({
+ className: "devtools-responsive-container",
+ initialWidth,
+ initialHeight,
+ minSize: "50px",
+ maxSize: "80%",
+ splitterSize: networkDetailsOpen ? 1 : 0,
+ startPanel: this.renderActionBar(),
+ endPanel:
+ networkDetailsOpen &&
+ NetworkDetailsBar({
+ ref: "endPanel",
+ connector,
+ openLink,
+ sourceMapURLService,
+ }),
+ endPanelCollapsed: !networkDetailsOpen,
+ endPanelControl: true,
+ vert: this.state.isVerticalSpliter,
+ onControlledPanelResized: this.onNetworkDetailsResized,
+ })
+ );
+ }
+}
+
+module.exports = connect(
+ state => ({
+ isEmpty: !state.requests.requests.length,
+ networkDetailsOpen: state.ui.networkDetailsOpen,
+ networkActionOpen: state.ui.networkActionOpen,
+ request: getSelectedRequest(state),
+ selectedRequestVisible: isSelectedRequestVisible(state),
+ }),
+ dispatch => ({
+ openNetworkDetails: open => dispatch(Actions.openNetworkDetails(open)),
+ onNetworkDetailsResized: (width, height) =>
+ dispatch(Actions.resizeNetworkDetails(width, height)),
+ updateRequest: (id, data, batch) =>
+ dispatch(Actions.updateRequest(id, data, batch)),
+ })
+)(MonitorPanel);