--- a/devtools/client/webconsole/new-console-output/components/FilterBar.js
+++ b/devtools/client/webconsole/new-console-output/components/FilterBar.js
@@ -26,20 +26,27 @@ class FilterBar extends Component {
return {
dispatch: PropTypes.func.isRequired,
filter: PropTypes.object.isRequired,
serviceContainer: PropTypes.shape({
attachRefToHud: PropTypes.func.isRequired,
}).isRequired,
filterBarVisible: PropTypes.bool.isRequired,
persistLogs: PropTypes.bool.isRequired,
+ hidePersistLogsCheckbox: PropTypes.bool.isRequired,
filteredMessagesCount: PropTypes.object.isRequired,
};
}
+ static get defaultProps() {
+ return {
+ hidePersistLogsCheckbox: false,
+ };
+ }
+
constructor(props) {
super(props);
this.onClickMessagesClear = this.onClickMessagesClear.bind(this);
this.onClickFilterBarToggle = this.onClickFilterBarToggle.bind(this);
this.onClickRemoveAllFilters = this.onClickRemoveAllFilters.bind(this);
this.onClickRemoveTextFilter = this.onClickRemoveTextFilter.bind(this);
this.onSearchInput = this.onSearchInput.bind(this);
this.onChangePersistToggle = this.onChangePersistToggle.bind(this);
@@ -215,16 +222,17 @@ class FilterBar extends Component {
}
render() {
const {
filter,
filterBarVisible,
persistLogs,
filteredMessagesCount,
+ hidePersistLogsCheckbox,
} = this.props;
let children = [
dom.div({
className: "devtools-toolbar webconsole-filterbar-primary",
key: "primary-bar",
},
dom.button({
@@ -243,17 +251,17 @@ class FilterBar extends Component {
}),
dom.input({
className: "devtools-plaininput text-filter",
type: "search",
value: filter.text,
placeholder: l10n.getStr("webconsole.filterInput.placeholder"),
onInput: this.onSearchInput
}),
- FilterCheckbox({
+ !hidePersistLogsCheckbox && FilterCheckbox({
label: l10n.getStr("webconsole.enablePersistentLogs.label"),
title: l10n.getStr("webconsole.enablePersistentLogs.tooltip"),
onChange: this.onChangePersistToggle,
checked: persistLogs,
}),
)
];
--- a/devtools/client/webconsole/new-console-output/test/components/filter-bar.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/filter-bar.test.js
@@ -28,20 +28,21 @@ const ServicesMock = require("Services")
describe("FilterBar component:", () => {
afterEach(() => {
ServicesMock.prefs.testHelpers.clearPrefs();
});
it("initial render", () => {
const store = setupStore();
- const wrapper = render(Provider({store}, FilterBar({ serviceContainer })));
- const toolbar = wrapper.find(
- ".devtools-toolbar.webconsole-filterbar-primary"
- );
+ const wrapper = render(Provider({store}, FilterBar({
+ serviceContainer,
+ hidePersistLogsCheckbox: false,
+ })));
+ const toolbar = wrapper.find(".devtools-toolbar.webconsole-filterbar-primary");
// Clear button
const clearButton = toolbar.children().eq(0);
expect(clearButton.attr("class")).toBe("devtools-button devtools-clear-icon");
expect(clearButton.attr("title")).toBe("Clear the Web Console output");
// Separator
expect(toolbar.children().eq(1).attr("class")).toBe("devtools-separator");
@@ -52,26 +53,32 @@ describe("FilterBar component:", () => {
expect(filterBarButton.attr("title")).toBe("Toggle filter bar");
// Text filter
const textFilter = toolbar.children().eq(3);
expect(textFilter.attr("class")).toBe("devtools-plaininput text-filter");
expect(textFilter.attr("placeholder")).toBe("Filter output");
expect(textFilter.attr("type")).toBe("search");
expect(textFilter.attr("value")).toBe("");
+
+ // "Persist logs" checkbox
+ expect(wrapper.find(".filter-checkbox input").length).toBe(1);
});
it("displays the number of hidden messages when there are one hidden message", () => {
const store = setupStore([
"console.log('foobar', 'test')"
]);
// Filter-out LOG messages
store.dispatch(actions.filterToggle(FILTERS.LOG));
- const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+ const wrapper = mount(Provider({store}, FilterBar({
+ serviceContainer,
+ hidePersistLogsCheckbox: false,
+ })));
const toolbar = wrapper.find(".webconsole-filterbar-filtered-messages");
expect(toolbar.exists()).toBeTruthy();
const message = toolbar.find(".filter-message-text");
expect(message.text()).toBe("1 item hidden by filters");
expect(message.prop("title")).toBe("log: 1");
});
@@ -98,17 +105,20 @@ describe("FilterBar component:", () => {
"console.log('foobar', 'test')",
"console.info('info message');",
"console.warn('danger, will robinson!')",
"console.debug('debug message');",
"console.error('error message');",
]);
store.dispatch(actions.filterTextSet("qwerty"));
- const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+ const wrapper = mount(Provider({store}, FilterBar({
+ serviceContainer,
+ hidePersistLogsCheckbox: false,
+ })));
const toolbar = wrapper.find(".webconsole-filterbar-filtered-messages");
expect(toolbar.exists()).toBeTruthy();
const message = toolbar.find(".filter-message-text");
expect(message.text()).toBe("5 items hidden by filters");
expect(message.prop("title")).toBe("text: 5");
});
@@ -128,17 +138,20 @@ describe("FilterBar component:", () => {
store.dispatch(actions.filterToggle(FILTERS.ERROR));
store.dispatch(actions.filterToggle(FILTERS.WARN));
store.dispatch(actions.filterToggle(FILTERS.LOG));
store.dispatch(actions.filterToggle(FILTERS.INFO));
store.dispatch(actions.filterToggle(FILTERS.DEBUG));
store.dispatch(actions.filterTextSet("qwerty"));
- const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+ const wrapper = mount(Provider({store}, FilterBar({
+ serviceContainer,
+ hidePersistLogsCheckbox: false,
+ })));
const message = wrapper.find(".filter-message-text");
expect(message.prop("title")).toBe("text: 10");
});
it("displays expected tooltip when there is text & level hidden-messages", () => {
const store = setupStore([
"console.log('foobar', 'test')",
@@ -154,39 +167,48 @@ describe("FilterBar component:", () => {
]);
store.dispatch(actions.filterToggle(FILTERS.ERROR));
store.dispatch(actions.filterToggle(FILTERS.WARN));
store.dispatch(actions.filterToggle(FILTERS.LOG));
store.dispatch(actions.filterToggle(FILTERS.INFO));
store.dispatch(actions.filterToggle(FILTERS.DEBUG));
- const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+ const wrapper = mount(Provider({store}, FilterBar({
+ serviceContainer,
+ hidePersistLogsCheckbox: false,
+ })));
const toolbar = wrapper.find(".webconsole-filterbar-filtered-messages");
expect(toolbar.exists()).toBeTruthy();
const message = toolbar.find(".filter-message-text");
expect(message.text()).toBe("10 items hidden by filters");
expect(message.prop("title")).toBe("error: 2, warn: 2, log: 2, info: 2, debug: 2");
});
it("does not display the number of hidden messages when there are no messages", () => {
const store = setupStore();
- const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+ const wrapper = mount(Provider({store}, FilterBar({
+ serviceContainer,
+ hidePersistLogsCheckbox: false,
+ })));
const toolbar = wrapper.find(".webconsole-filterbar-filtered-messages");
expect(toolbar.exists()).toBeFalsy();
});
it("does not display the number of hidden non-default filters (CSS, Network,…)", () => {
const store = setupStore([
"Unknown property ‘such-unknown-property’. Declaration dropped.",
"GET request",
"XHR GET request"
]);
- const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+ const wrapper = mount(Provider({store}, FilterBar({
+ serviceContainer,
+ hidePersistLogsCheckbox: false,
+ })));
// Let's make sure those non-default filters are off.
const filters = getAllFilters(store.getState());
expect(filters[FILTERS.CSS]).toBe(false);
expect(filters[FILTERS.NET]).toBe(false);
expect(filters[FILTERS.NETXHR]).toBe(false);
const toolbar = wrapper.find(".webconsole-filterbar-filtered-messages");
@@ -194,17 +216,20 @@ describe("FilterBar component:", () => {
});
it("displays filter bar when button is clicked", () => {
const store = setupStore();
expect(getAllUi(store.getState()).filterBarVisible).toBe(false);
expect(ServicesMock.prefs.getBoolPref(PREFS.UI.FILTER_BAR), false);
- const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+ const wrapper = mount(Provider({store}, FilterBar({
+ serviceContainer,
+ hidePersistLogsCheckbox: false,
+ })));
wrapper.find(".devtools-filter-icon").simulate("click");
expect(getAllUi(store.getState()).filterBarVisible).toBe(true);
expect(ServicesMock.prefs.getBoolPref(PREFS.UI.FILTER_BAR), true);
const secondaryBar = wrapper.find(".webconsole-filterbar-secondary");
expect(secondaryBar.length).toBe(1);
@@ -234,37 +259,56 @@ describe("FilterBar component:", () => {
expect(child.html()).toEqual(shallow(buttons[index]).html());
});
});
it("fires MESSAGES_CLEAR action when clear button is clicked", () => {
const store = setupStore();
store.dispatch = sinon.spy();
- const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+ const wrapper = mount(Provider({store}, FilterBar({
+ serviceContainer,
+ hidePersistLogsCheckbox: false,
+ })));
wrapper.find(".devtools-clear-icon").simulate("click");
const call = store.dispatch.getCall(0);
expect(call.args[0]).toEqual({
type: MESSAGES_CLEAR
});
});
it("sets filter text when text is typed", () => {
const store = setupStore();
- const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+ const wrapper = mount(Provider({store}, FilterBar({
+ serviceContainer,
+ hidePersistLogsCheckbox: false,
+ })));
wrapper.find(".devtools-plaininput").simulate("input", { target: { value: "a" } });
expect(store.getState().filters.text).toBe("a");
});
it("toggles persist logs when checkbox is clicked", () => {
const store = setupStore();
expect(getAllUi(store.getState()).persistLogs).toBe(false);
expect(ServicesMock.prefs.getBoolPref(PREFS.UI.PERSIST), false);
- const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+ const wrapper = mount(Provider({store}, FilterBar({
+ serviceContainer,
+ hidePersistLogsCheckbox: false,
+ })));
wrapper.find(".filter-checkbox input").simulate("change");
expect(getAllUi(store.getState()).persistLogs).toBe(true);
expect(ServicesMock.prefs.getBoolPref(PREFS.UI.PERSIST), true);
});
+
+ it(`doesn't render "Persist logs" input when "hidePersistLogsCheckbox" is true`, () => {
+ const store = setupStore();
+
+ const wrapper = render(Provider({store}, FilterBar({
+ serviceContainer,
+ hidePersistLogsCheckbox: true,
+ })));
+ expect(wrapper.find(".filter-checkbox input").length).toBe(0);
+ });
});