diff options
Diffstat (limited to 'devtools/client/netmonitor/src/components/messages/Toolbar.js')
-rw-r--r-- | devtools/client/netmonitor/src/components/messages/Toolbar.js | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/src/components/messages/Toolbar.js b/devtools/client/netmonitor/src/components/messages/Toolbar.js new file mode 100644 index 0000000000..7b71c9aa06 --- /dev/null +++ b/devtools/client/netmonitor/src/components/messages/Toolbar.js @@ -0,0 +1,152 @@ +/* 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 { + connect, +} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js"); +const { + CHANNEL_TYPE, + FILTER_SEARCH_DELAY, +} = require("resource://devtools/client/netmonitor/src/constants.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const { + L10N, +} = require("resource://devtools/client/netmonitor/src/utils/l10n.js"); +const { button, span, div } = dom; + +// Components +const MessageFilterMenu = createFactory( + require("resource://devtools/client/netmonitor/src/components/messages/MessageFilterMenu.js") +); +const SearchBox = createFactory( + require("resource://devtools/client/shared/components/SearchBox.js") +); + +// Localization +const MSG_TOOLBAR_CLEAR = L10N.getStr("netmonitor.ws.toolbar.clear"); +const MSG_SEARCH_KEY_SHORTCUT = L10N.getStr( + "netmonitor.ws.toolbar.filterFreetext.key" +); +const MSG_SEARCH_PLACE_HOLDER = L10N.getStr( + "netmonitor.ws.toolbar.filterFreetext.label" +); + +/** + * MessagesPanel toolbar component. + * + * Toolbar contains a set of useful tools that clear the list of + * existing messages as well as filter content. + */ +class Toolbar extends Component { + static get propTypes() { + return { + searchboxRef: PropTypes.object.isRequired, + toggleMessageFilterType: PropTypes.func.isRequired, + toggleControlFrames: PropTypes.func.isRequired, + clearMessages: PropTypes.func.isRequired, + setMessageFilterText: PropTypes.func.isRequired, + messageFilterType: PropTypes.string.isRequired, + showControlFrames: PropTypes.bool.isRequired, + channelType: PropTypes.string, + }; + } + + componentWillUnmount() { + const { setMessageFilterText } = this.props; + setMessageFilterText(""); + } + + /** + * Render a separator. + */ + renderSeparator() { + return span({ className: "devtools-separator" }); + } + + /** + * Render a clear button. + */ + renderClearButton(clearMessages) { + return button({ + className: + "devtools-button devtools-clear-icon message-list-clear-button", + title: MSG_TOOLBAR_CLEAR, + onClick: () => { + clearMessages(); + }, + }); + } + + /** + * Render the message filter menu button. + */ + renderMessageFilterMenu() { + const { + messageFilterType, + toggleMessageFilterType, + showControlFrames, + toggleControlFrames, + } = this.props; + + return MessageFilterMenu({ + messageFilterType, + toggleMessageFilterType, + showControlFrames, + toggleControlFrames, + }); + } + + /** + * Render filter Searchbox. + */ + renderFilterBox(setMessageFilterText) { + return SearchBox({ + delay: FILTER_SEARCH_DELAY, + keyShortcut: MSG_SEARCH_KEY_SHORTCUT, + placeholder: MSG_SEARCH_PLACE_HOLDER, + type: "filter", + ref: this.props.searchboxRef, + onChange: setMessageFilterText, + }); + } + + render() { + const { clearMessages, setMessageFilterText, channelType } = this.props; + const isWs = channelType === CHANNEL_TYPE.WEB_SOCKET; + return div( + { + id: "netmonitor-toolbar-container", + className: "devtools-toolbar devtools-input-toolbar", + }, + this.renderClearButton(clearMessages), + isWs ? this.renderSeparator() : null, + isWs ? this.renderMessageFilterMenu() : null, + this.renderSeparator(), + this.renderFilterBox(setMessageFilterText) + ); + } +} + +module.exports = connect( + state => ({ + messageFilterType: state.messages.messageFilterType, + showControlFrames: state.messages.showControlFrames, + channelType: state.messages.currentChannelType, + }), + dispatch => ({ + clearMessages: () => dispatch(Actions.clearMessages()), + toggleMessageFilterType: filter => + dispatch(Actions.toggleMessageFilterType(filter)), + toggleControlFrames: () => dispatch(Actions.toggleControlFrames()), + setMessageFilterText: text => dispatch(Actions.setMessageFilterText(text)), + }) +)(Toolbar); |