diff options
Diffstat (limited to 'devtools/client/webconsole/components/FilterBar')
5 files changed, 714 insertions, 0 deletions
diff --git a/devtools/client/webconsole/components/FilterBar/ConsoleSettings.js b/devtools/client/webconsole/components/FilterBar/ConsoleSettings.js new file mode 100644 index 0000000000..dbff800baa --- /dev/null +++ b/devtools/client/webconsole/components/FilterBar/ConsoleSettings.js @@ -0,0 +1,194 @@ +/* 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"; + +// React & Redux +const { + Component, +} = require("resource://devtools/client/shared/vendor/react.js"); +const { + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const actions = require("resource://devtools/client/webconsole/actions/index.js"); +const { + l10n, +} = require("resource://devtools/client/webconsole/utils/messages.js"); + +// Additional Components +const MenuButton = createFactory( + require("resource://devtools/client/shared/components/menu/MenuButton.js") +); + +loader.lazyGetter(this, "MenuItem", function () { + return createFactory( + require("resource://devtools/client/shared/components/menu/MenuItem.js") + ); +}); + +loader.lazyGetter(this, "MenuList", function () { + return createFactory( + require("resource://devtools/client/shared/components/menu/MenuList.js") + ); +}); + +class ConsoleSettings extends Component { + static get propTypes() { + return { + dispatch: PropTypes.func.isRequired, + eagerEvaluation: PropTypes.bool.isRequired, + groupWarnings: PropTypes.bool.isRequired, + persistLogs: PropTypes.bool.isRequired, + timestampsVisible: PropTypes.bool.isRequired, + webConsoleUI: PropTypes.object.isRequired, + autocomplete: PropTypes.bool.isRequired, + enableNetworkMonitoring: PropTypes.bool.isRequired, + }; + } + + renderMenuItems() { + const { + dispatch, + eagerEvaluation, + groupWarnings, + persistLogs, + timestampsVisible, + autocomplete, + webConsoleUI, + enableNetworkMonitoring, + } = this.props; + + const items = []; + + if ( + !webConsoleUI.isBrowserConsole && + !webConsoleUI.isBrowserToolboxConsole + ) { + // Persist Logs + items.push( + MenuItem({ + key: "webconsole-console-settings-menu-item-persistent-logs", + checked: persistLogs, + className: + "menu-item webconsole-console-settings-menu-item-persistentLogs", + label: l10n.getStr( + "webconsole.console.settings.menu.item.enablePersistentLogs.label" + ), + tooltip: l10n.getStr( + "webconsole.console.settings.menu.item.enablePersistentLogs.tooltip" + ), + onClick: () => dispatch(actions.persistToggle()), + }) + ); + } + + if (webConsoleUI.isBrowserConsole || webConsoleUI.isBrowserToolboxConsole) { + // Enable network monitoring + items.push( + MenuItem({ + key: "webconsole-console-settings-menu-item-enable-network-monitoring", + checked: enableNetworkMonitoring, + className: + "menu-item webconsole-console-settings-menu-item-enableNetworkMonitoring", + label: l10n.getStr("browserconsole.enableNetworkMonitoring.label"), + tooltip: l10n.getStr( + "browserconsole.enableNetworkMonitoring.tooltip" + ), + onClick: () => dispatch(actions.networkMonitoringToggle()), + }) + ); + } + + // Timestamps + items.push( + MenuItem({ + key: "webconsole-console-settings-menu-item-timestamps", + checked: timestampsVisible, + className: "menu-item webconsole-console-settings-menu-item-timestamps", + label: l10n.getStr( + "webconsole.console.settings.menu.item.timestamps.label" + ), + tooltip: l10n.getStr( + "webconsole.console.settings.menu.item.timestamps.tooltip" + ), + onClick: () => dispatch(actions.timestampsToggle()), + }) + ); + + // Warning Groups + items.push( + MenuItem({ + key: "webconsole-console-settings-menu-item-warning-groups", + checked: groupWarnings, + className: + "menu-item webconsole-console-settings-menu-item-warning-groups", + label: l10n.getStr( + "webconsole.console.settings.menu.item.warningGroups.label" + ), + tooltip: l10n.getStr( + "webconsole.console.settings.menu.item.warningGroups.tooltip" + ), + onClick: () => dispatch(actions.warningGroupsToggle()), + }) + ); + + // autocomplete + items.push( + MenuItem({ + key: "webconsole-console-settings-menu-item-autocomplete", + checked: autocomplete, + className: + "menu-item webconsole-console-settings-menu-item-autocomplete", + label: l10n.getStr( + "webconsole.console.settings.menu.item.autocomplete.label" + ), + tooltip: l10n.getStr( + "webconsole.console.settings.menu.item.autocomplete.tooltip" + ), + onClick: () => dispatch(actions.autocompleteToggle()), + }) + ); + + // Eager Evaluation + items.push( + MenuItem({ + key: "webconsole-console-settings-menu-item-eager-evaluation", + checked: eagerEvaluation, + className: + "menu-item webconsole-console-settings-menu-item-eager-evaluation", + label: l10n.getStr( + "webconsole.console.settings.menu.item.instantEvaluation.label" + ), + tooltip: l10n.getStr( + "webconsole.console.settings.menu.item.instantEvaluation.tooltip" + ), + onClick: () => dispatch(actions.eagerEvaluationToggle()), + }) + ); + + return MenuList({ id: "webconsole-console-settings-menu-list" }, items); + } + + render() { + const { webConsoleUI } = this.props; + const doc = webConsoleUI.document; + const { toolbox } = webConsoleUI.wrapper; + + return MenuButton( + { + menuId: "webconsole-console-settings-menu-button", + toolboxDoc: toolbox ? toolbox.doc : doc, + className: "devtools-button webconsole-console-settings-menu-button", + title: l10n.getStr("webconsole.console.settings.menu.button.tooltip"), + }, + // We pass the children in a function so we don't require the MenuItem and MenuList + // components until we need to display them (i.e. when the button is clicked). + () => this.renderMenuItems() + ); + } +} + +module.exports = ConsoleSettings; diff --git a/devtools/client/webconsole/components/FilterBar/FilterBar.js b/devtools/client/webconsole/components/FilterBar/FilterBar.js new file mode 100644 index 0000000000..fa9ab15e87 --- /dev/null +++ b/devtools/client/webconsole/components/FilterBar/FilterBar.js @@ -0,0 +1,441 @@ +/* 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"; + +// React & Redux +const { + Component, + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const { + connect, +} = require("resource://devtools/client/shared/vendor/react-redux.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +// Actions +const actions = require("resource://devtools/client/webconsole/actions/index.js"); + +// Selectors +const { + getAllFilters, +} = require("resource://devtools/client/webconsole/selectors/filters.js"); +const { + getFilteredMessagesCount, +} = require("resource://devtools/client/webconsole/selectors/messages.js"); +const { + getAllPrefs, +} = require("resource://devtools/client/webconsole/selectors/prefs.js"); +const { + getAllUi, +} = require("resource://devtools/client/webconsole/selectors/ui.js"); + +// Utilities +const { + l10n, +} = require("resource://devtools/client/webconsole/utils/messages.js"); +const { PluralForm } = require("resource://devtools/shared/plural-form.js"); + +// Constants +const { + FILTERS, + FILTERBAR_DISPLAY_MODES, +} = require("resource://devtools/client/webconsole/constants.js"); + +// Additional Components +const FilterButton = require("resource://devtools/client/webconsole/components/FilterBar/FilterButton.js"); +const ConsoleSettings = createFactory( + require("resource://devtools/client/webconsole/components/FilterBar/ConsoleSettings.js") +); +const SearchBox = createFactory( + require("resource://devtools/client/shared/components/SearchBox.js") +); + +loader.lazyRequireGetter( + this, + "PropTypes", + "resource://devtools/client/shared/vendor/react-prop-types.js" +); + +const disabledCssFilterButtonTitle = l10n.getStr( + "webconsole.cssFilterButton.inactive.tooltip" +); + +class FilterBar extends Component { + static get propTypes() { + return { + closeButtonVisible: PropTypes.bool, + closeSplitConsole: PropTypes.func, + dispatch: PropTypes.func.isRequired, + displayMode: PropTypes.oneOf([...Object.values(FILTERBAR_DISPLAY_MODES)]) + .isRequired, + enableNetworkMonitoring: PropTypes.bool.isRequired, + filter: PropTypes.object.isRequired, + filteredMessagesCount: PropTypes.object.isRequired, + groupWarnings: PropTypes.bool.isRequired, + persistLogs: PropTypes.bool.isRequired, + eagerEvaluation: PropTypes.bool.isRequired, + timestampsVisible: PropTypes.bool.isRequired, + webConsoleUI: PropTypes.object.isRequired, + autocomplete: PropTypes.bool.isRequired, + }; + } + + constructor(props) { + super(props); + this.renderFiltersConfigBar = this.renderFiltersConfigBar.bind(this); + this.maybeUpdateLayout = this.maybeUpdateLayout.bind(this); + this.resizeObserver = new ResizeObserver(this.maybeUpdateLayout); + } + + componentDidMount() { + this.filterInputMinWidth = 150; + try { + const filterInput = this.wrapperNode.querySelector(".devtools-searchbox"); + this.filterInputMinWidth = Number( + window.getComputedStyle(filterInput)["min-width"].replace("px", "") + ); + } catch (e) { + // If the min-width of the filter input isn't set, or is set in a different unit + // than px. + console.error("min-width of the filter input couldn't be retrieved.", e); + } + + this.maybeUpdateLayout(); + this.resizeObserver.observe(this.wrapperNode); + } + + shouldComponentUpdate(nextProps, nextState) { + const { + closeButtonVisible, + displayMode, + enableNetworkMonitoring, + filter, + filteredMessagesCount, + groupWarnings, + persistLogs, + timestampsVisible, + eagerEvaluation, + autocomplete, + } = this.props; + + if ( + nextProps.closeButtonVisible !== closeButtonVisible || + nextProps.displayMode !== displayMode || + nextProps.enableNetworkMonitoring !== enableNetworkMonitoring || + nextProps.filter !== filter || + nextProps.groupWarnings !== groupWarnings || + nextProps.persistLogs !== persistLogs || + nextProps.timestampsVisible !== timestampsVisible || + nextProps.eagerEvaluation !== eagerEvaluation || + nextProps.autocomplete !== autocomplete + ) { + return true; + } + + if ( + JSON.stringify(nextProps.filteredMessagesCount) !== + JSON.stringify(filteredMessagesCount) + ) { + return true; + } + + return false; + } + + /** + * Update the boolean state that informs where the filter buttons should be rendered. + * If the filter buttons are rendered inline with the filter input and the filter + * input width is reduced below a threshold, the filter buttons are rendered on a new + * row. When the filter buttons are on a separate row and the filter input grows + * wide enough to display the filter buttons without dropping below the threshold, + * the filter buttons are rendered inline. + */ + maybeUpdateLayout() { + const { dispatch, displayMode } = this.props; + + // If we don't have the wrapperNode reference, or if the wrapperNode isn't connected + // anymore, we disconnect the resize observer (componentWillUnmount is never called + // on this component, so we have to do it here). + if (!this.wrapperNode || !this.wrapperNode.isConnected) { + this.resizeObserver.disconnect(); + return; + } + + const filterInput = this.wrapperNode.querySelector(".devtools-searchbox"); + const { width: filterInputWidth } = filterInput.getBoundingClientRect(); + + if (displayMode === FILTERBAR_DISPLAY_MODES.WIDE) { + if (filterInputWidth <= this.filterInputMinWidth) { + dispatch( + actions.filterBarDisplayModeSet(FILTERBAR_DISPLAY_MODES.NARROW) + ); + } + + return; + } + + if (displayMode === FILTERBAR_DISPLAY_MODES.NARROW) { + const filterButtonsToolbar = this.wrapperNode.querySelector( + ".webconsole-filterbar-secondary" + ); + + const buttonMargin = 5; + const filterButtonsToolbarWidth = Array.from( + filterButtonsToolbar.children + ).reduce( + (width, el) => width + el.getBoundingClientRect().width + buttonMargin, + 0 + ); + + if ( + filterInputWidth - this.filterInputMinWidth > + filterButtonsToolbarWidth + ) { + dispatch(actions.filterBarDisplayModeSet(FILTERBAR_DISPLAY_MODES.WIDE)); + } + } + } + + renderSeparator() { + return dom.div({ + className: "devtools-separator", + }); + } + + renderClearButton() { + return dom.button({ + className: "devtools-button devtools-clear-icon", + title: l10n.getStr("webconsole.clearButton.tooltip"), + onClick: () => this.props.dispatch(actions.messagesClear()), + }); + } + + renderFiltersConfigBar() { + const { dispatch, filter, filteredMessagesCount } = this.props; + + const getLabel = (baseLabel, filterKey) => { + const count = filteredMessagesCount[filterKey]; + if (filter[filterKey] || count === 0) { + return baseLabel; + } + return `${baseLabel} (${count})`; + }; + + return dom.div( + { + className: "devtools-toolbar webconsole-filterbar-secondary", + key: "config-bar", + }, + FilterButton({ + active: filter[FILTERS.ERROR], + label: getLabel( + l10n.getStr("webconsole.errorsFilterButton.label"), + FILTERS.ERROR + ), + filterKey: FILTERS.ERROR, + dispatch, + }), + FilterButton({ + active: filter[FILTERS.WARN], + label: getLabel( + l10n.getStr("webconsole.warningsFilterButton.label"), + FILTERS.WARN + ), + filterKey: FILTERS.WARN, + dispatch, + }), + FilterButton({ + active: filter[FILTERS.LOG], + label: getLabel( + l10n.getStr("webconsole.logsFilterButton.label"), + FILTERS.LOG + ), + filterKey: FILTERS.LOG, + dispatch, + }), + FilterButton({ + active: filter[FILTERS.INFO], + label: getLabel( + l10n.getStr("webconsole.infoFilterButton.label"), + FILTERS.INFO + ), + filterKey: FILTERS.INFO, + dispatch, + }), + FilterButton({ + active: filter[FILTERS.DEBUG], + label: getLabel( + l10n.getStr("webconsole.debugFilterButton.label"), + FILTERS.DEBUG + ), + filterKey: FILTERS.DEBUG, + dispatch, + }), + dom.div({ + className: "devtools-separator", + }), + FilterButton({ + active: filter[FILTERS.CSS], + title: filter[FILTERS.CSS] ? undefined : disabledCssFilterButtonTitle, + label: l10n.getStr("webconsole.cssFilterButton.label"), + filterKey: FILTERS.CSS, + dispatch, + }), + FilterButton({ + active: filter[FILTERS.NETXHR], + label: l10n.getStr("webconsole.xhrFilterButton.label"), + filterKey: FILTERS.NETXHR, + dispatch, + }), + FilterButton({ + active: filter[FILTERS.NET], + label: l10n.getStr("webconsole.requestsFilterButton.label"), + filterKey: FILTERS.NET, + dispatch, + }) + ); + } + + renderSearchBox() { + const { dispatch, filteredMessagesCount } = this.props; + + let searchBoxSummary; + let searchBoxSummaryTooltip; + if (filteredMessagesCount.text > 0) { + searchBoxSummary = l10n.getStr("webconsole.filteredMessagesByText.label"); + searchBoxSummary = PluralForm.get( + filteredMessagesCount.text, + searchBoxSummary + ).replace("#1", filteredMessagesCount.text); + + searchBoxSummaryTooltip = l10n.getStr( + "webconsole.filteredMessagesByText.tooltip" + ); + searchBoxSummaryTooltip = PluralForm.get( + filteredMessagesCount.text, + searchBoxSummaryTooltip + ).replace("#1", filteredMessagesCount.text); + } + + return SearchBox({ + type: "filter", + placeholder: l10n.getStr("webconsole.filterInput.placeholder"), + keyShortcut: l10n.getStr("webconsole.find.key"), + onChange: text => dispatch(actions.filterTextSet(text)), + summary: searchBoxSummary, + summaryTooltip: searchBoxSummaryTooltip, + }); + } + + renderSettingsButton() { + const { + dispatch, + enableNetworkMonitoring, + eagerEvaluation, + groupWarnings, + persistLogs, + timestampsVisible, + webConsoleUI, + autocomplete, + } = this.props; + + return ConsoleSettings({ + dispatch, + enableNetworkMonitoring, + eagerEvaluation, + groupWarnings, + persistLogs, + timestampsVisible, + webConsoleUI, + autocomplete, + }); + } + + renderCloseButton() { + const { closeSplitConsole } = this.props; + + return dom.div( + { + className: "devtools-toolbar split-console-close-button-wrapper", + key: "wrapper", + }, + dom.button({ + id: "split-console-close-button", + key: "split-console-close-button", + className: "devtools-button", + title: l10n.getStr("webconsole.closeSplitConsoleButton.tooltip"), + onClick: () => { + closeSplitConsole(); + }, + }) + ); + } + + render() { + const { closeButtonVisible, displayMode } = this.props; + + const isNarrow = displayMode === FILTERBAR_DISPLAY_MODES.NARROW; + const isWide = displayMode === FILTERBAR_DISPLAY_MODES.WIDE; + + const separator = this.renderSeparator(); + const clearButton = this.renderClearButton(); + const searchBox = this.renderSearchBox(); + const filtersConfigBar = this.renderFiltersConfigBar(); + const settingsButton = this.renderSettingsButton(); + + const children = [ + dom.div( + { + className: + "devtools-toolbar devtools-input-toolbar webconsole-filterbar-primary", + key: "primary-bar", + }, + clearButton, + separator, + searchBox, + isWide && separator, + isWide && filtersConfigBar, + separator, + settingsButton + ), + ]; + + if (closeButtonVisible) { + children.push(this.renderCloseButton()); + } + + if (isNarrow) { + children.push(filtersConfigBar); + } + + return dom.div( + { + className: `webconsole-filteringbar-wrapper ${displayMode}`, + "aria-live": "off", + ref: node => { + this.wrapperNode = node; + }, + }, + children + ); + } +} + +function mapStateToProps(state) { + const uiState = getAllUi(state); + const prefsState = getAllPrefs(state); + return { + closeButtonVisible: uiState.closeButtonVisible, + filter: getAllFilters(state), + filteredMessagesCount: getFilteredMessagesCount(state), + groupWarnings: prefsState.groupWarnings, + persistLogs: uiState.persistLogs, + eagerEvaluation: prefsState.eagerEvaluation, + timestampsVisible: uiState.timestampsVisible, + autocomplete: prefsState.autocomplete, + enableNetworkMonitoring: uiState.enableNetworkMonitoring, + }; +} + +module.exports = connect(mapStateToProps)(FilterBar); diff --git a/devtools/client/webconsole/components/FilterBar/FilterButton.js b/devtools/client/webconsole/components/FilterBar/FilterButton.js new file mode 100644 index 0000000000..2a2ad6bf70 --- /dev/null +++ b/devtools/client/webconsole/components/FilterBar/FilterButton.js @@ -0,0 +1,37 @@ +/* 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 PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const actions = require("resource://devtools/client/webconsole/actions/index.js"); + +FilterButton.displayName = "FilterButton"; + +FilterButton.propTypes = { + label: PropTypes.string.isRequired, + filterKey: PropTypes.string.isRequired, + active: PropTypes.bool.isRequired, + dispatch: PropTypes.func.isRequired, + title: PropTypes.string, +}; + +function FilterButton(props) { + const { active, label, filterKey, dispatch, title } = props; + + return dom.button( + { + "aria-pressed": active === true, + className: "devtools-togglebutton", + "data-category": filterKey, + title, + onClick: () => { + dispatch(actions.filterToggle(filterKey)); + }, + }, + label + ); +} + +module.exports = FilterButton; diff --git a/devtools/client/webconsole/components/FilterBar/FilterCheckbox.js b/devtools/client/webconsole/components/FilterBar/FilterCheckbox.js new file mode 100644 index 0000000000..f36788e998 --- /dev/null +++ b/devtools/client/webconsole/components/FilterBar/FilterCheckbox.js @@ -0,0 +1,31 @@ +/* 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 PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +FilterCheckbox.displayName = "FilterCheckbox"; + +FilterCheckbox.propTypes = { + label: PropTypes.string.isRequired, + title: PropTypes.string, + checked: PropTypes.bool.isRequired, + onChange: PropTypes.func.isRequired, +}; + +function FilterCheckbox(props) { + const { checked, label, title, onChange } = props; + return dom.label( + { title, className: "filter-checkbox" }, + dom.input({ + type: "checkbox", + checked, + onChange, + }), + label + ); +} + +module.exports = FilterCheckbox; diff --git a/devtools/client/webconsole/components/FilterBar/moz.build b/devtools/client/webconsole/components/FilterBar/moz.build new file mode 100644 index 0000000000..46ef681317 --- /dev/null +++ b/devtools/client/webconsole/components/FilterBar/moz.build @@ -0,0 +1,11 @@ +# 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( + "ConsoleSettings.js", + "FilterBar.js", + "FilterButton.js", + "FilterCheckbox.js", +) |