diff options
Diffstat (limited to 'devtools/client/netmonitor/components')
4 files changed, 152 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/components/filter-buttons.js b/devtools/client/netmonitor/components/filter-buttons.js new file mode 100644 index 000000000..f24db8c53 --- /dev/null +++ b/devtools/client/netmonitor/components/filter-buttons.js @@ -0,0 +1,49 @@ +/* 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 { DOM, PropTypes } = require("devtools/client/shared/vendor/react"); +const { connect } = require("devtools/client/shared/vendor/react-redux"); +const { L10N } = require("../l10n"); +const Actions = require("../actions/index"); + +const { button, div } = DOM; + +function FilterButtons({ + filterTypes, + triggerFilterType, +}) { + const buttons = filterTypes.entrySeq().map(([type, checked]) => { + let classList = ["menu-filter-button"]; + checked && classList.push("checked"); + + return button({ + id: `requests-menu-filter-${type}-button`, + className: classList.join(" "), + "data-key": type, + onClick: triggerFilterType, + onKeyDown: triggerFilterType, + "aria-pressed": checked, + }, L10N.getStr(`netmonitor.toolbar.filter.${type}`)); + }).toArray(); + + return div({ id: "requests-menu-filter-buttons" }, buttons); +} + +FilterButtons.PropTypes = { + state: PropTypes.object.isRequired, + triggerFilterType: PropTypes.func.iRequired, +}; + +module.exports = connect( + (state) => ({ filterTypes: state.filters.types }), + (dispatch) => ({ + triggerFilterType: (evt) => { + if (evt.type === "keydown" && (evt.key !== "" || evt.key !== "Enter")) { + return; + } + dispatch(Actions.toggleFilterType(evt.target.dataset.key)); + }, + }) +)(FilterButtons); diff --git a/devtools/client/netmonitor/components/moz.build b/devtools/client/netmonitor/components/moz.build new file mode 100644 index 000000000..47ef7f026 --- /dev/null +++ b/devtools/client/netmonitor/components/moz.build @@ -0,0 +1,10 @@ +# vim: set filetype=python: +# 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/. + +DevToolsModules( + 'filter-buttons.js', + 'search-box.js', + 'toggle-button.js', +) diff --git a/devtools/client/netmonitor/components/search-box.js b/devtools/client/netmonitor/components/search-box.js new file mode 100644 index 000000000..42400e232 --- /dev/null +++ b/devtools/client/netmonitor/components/search-box.js @@ -0,0 +1,24 @@ +/* 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 { connect } = require("devtools/client/shared/vendor/react-redux"); +const SearchBox = require("devtools/client/shared/components/search-box"); +const { L10N } = require("../l10n"); +const Actions = require("../actions/index"); +const { FREETEXT_FILTER_SEARCH_DELAY } = require("../constants"); + +module.exports = connect( + (state) => ({ + delay: FREETEXT_FILTER_SEARCH_DELAY, + keyShortcut: L10N.getStr("netmonitor.toolbar.filterFreetext.key"), + placeholder: L10N.getStr("netmonitor.toolbar.filterFreetext.label"), + type: "filter", + }), + (dispatch) => ({ + onChange: (url) => { + dispatch(Actions.setFilterText(url)); + }, + }) +)(SearchBox); diff --git a/devtools/client/netmonitor/components/toggle-button.js b/devtools/client/netmonitor/components/toggle-button.js new file mode 100644 index 000000000..db546c55d --- /dev/null +++ b/devtools/client/netmonitor/components/toggle-button.js @@ -0,0 +1,69 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* 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/. */ +/* globals NetMonitorView */ +"use strict"; + +const { DOM, PropTypes } = require("devtools/client/shared/vendor/react"); +const { connect } = require("devtools/client/shared/vendor/react-redux"); +const { L10N } = require("../l10n"); +const Actions = require("../actions/index"); + +// Shortcuts +const { button } = DOM; + +/** + * Button used to toggle sidebar + */ +function ToggleButton({ + disabled, + onToggle, + visible, +}) { + let className = ["devtools-button"]; + if (!visible) { + className.push("pane-collapsed"); + } + let titleMsg = visible ? L10N.getStr("collapseDetailsPane") : + L10N.getStr("expandDetailsPane"); + + return button({ + id: "details-pane-toggle", + className: className.join(" "), + title: titleMsg, + disabled: disabled, + tabIndex: "0", + onMouseDown: onToggle, + }); +} + +ToggleButton.propTypes = { + disabled: PropTypes.bool.isRequired, + onToggle: PropTypes.func.isRequired, + visible: PropTypes.bool.isRequired, +}; + +module.exports = connect( + (state) => ({ + disabled: state.sidebar.toggleButtonDisabled, + visible: state.sidebar.visible, + }), + (dispatch) => ({ + onToggle: () => { + dispatch(Actions.toggleSidebar()); + + let requestsMenu = NetMonitorView.RequestsMenu; + let selectedIndex = requestsMenu.selectedIndex; + + // Make sure there's a selection if the button is pressed, to avoid + // showing an empty network details pane. + if (selectedIndex == -1 && requestsMenu.itemCount) { + requestsMenu.selectedIndex = 0; + } else { + requestsMenu.selectedIndex = -1; + } + }, + }) +)(ToggleButton); |