Bug 1304900 - New console frontend: Add network messages filtering in the filter bar. r=linclark
authorNicolas Chevobbe <chevobbe.nicolas@gmail.com>
Fri, 23 Sep 2016 10:10:06 -0700
changeset 315137 5a9ce5f4d4d6b16aba8456635f664c2f87574e86
parent 315136 a18668c1ff8da7e0b6b6945a4186448762064d7c
child 315138 a1130cc17d4c09d8e2f32f7d6934b824902fc89c
push id32563
push userihsiao@mozilla.com
push dateMon, 26 Sep 2016 11:18:33 +0000
treeherderautoland@eb840c87b5fd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerslinclark
bugs1304900
milestone52.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1304900 - New console frontend: Add network messages filtering in the filter bar. r=linclark MozReview-Commit-ID: Lb597iSUyWj
devtools/client/webconsole/new-console-output/components/filter-bar.js
devtools/client/webconsole/new-console-output/reducers/filters.js
devtools/client/webconsole/new-console-output/selectors/messages.js
devtools/client/webconsole/new-console-output/store.js
devtools/client/webconsole/new-console-output/test/store/filters.test.js
--- a/devtools/client/webconsole/new-console-output/components/filter-bar.js
+++ b/devtools/client/webconsole/new-console-output/components/filter-bar.js
@@ -98,16 +98,31 @@ const FilterBar = createClass({
             filterKey: MESSAGE_LEVEL.INFO,
             dispatch
           }),
           FilterButton({
             active: filter.debug,
             label: "Debug",
             filterKey: MESSAGE_LEVEL.DEBUG,
             dispatch
+          }),
+          dom.span({
+            className: "devtools-separator",
+          }),
+          FilterButton({
+            active: filter.netxhr,
+            label: "XHR",
+            filterKey: "netxhr",
+            dispatch
+          }),
+          FilterButton({
+            active: filter.network,
+            label: "Requests",
+            filterKey: "network",
+            dispatch
           })
         )
       );
     }
 
     if (ui.filteredMessageVisible) {
       children.push(
         dom.div({className: "devtools-toolbar"},
--- a/devtools/client/webconsole/new-console-output/reducers/filters.js
+++ b/devtools/client/webconsole/new-console-output/reducers/filters.js
@@ -8,16 +8,18 @@
 const Immutable = require("devtools/client/shared/vendor/immutable");
 const constants = require("devtools/client/webconsole/new-console-output/constants");
 
 const FilterState = Immutable.Record({
   debug: true,
   error: true,
   info: true,
   log: true,
+  network: true,
+  netxhr: true,
   text: "",
   warn: true,
 });
 
 function filters(state = new FilterState(), action) {
   switch (action.type) {
     case constants.FILTER_TOGGLE:
       const {filter} = action;
--- a/devtools/client/webconsole/new-console-output/selectors/messages.js
+++ b/devtools/client/webconsole/new-console-output/selectors/messages.js
@@ -4,27 +4,31 @@
  * 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 { l10n } = require("devtools/client/webconsole/new-console-output/utils/messages");
 const { getAllFilters } = require("devtools/client/webconsole/new-console-output/selectors/filters");
 const { getLogLimit } = require("devtools/client/webconsole/new-console-output/selectors/prefs");
 const {
-  MESSAGE_TYPE
+  MESSAGE_TYPE,
+  MESSAGE_SOURCE
 } = require("devtools/client/webconsole/new-console-output/constants");
 
 function getAllMessages(state) {
   let messages = state.messages.messagesById;
   let logLimit = getLogLimit(state);
   let filters = getAllFilters(state);
 
   return prune(
     search(
-      filterLevel(messages, filters),
+      filterNetwork(
+        filterLevel(messages, filters),
+        filters
+      ),
       filters.text
     ),
     logLimit
   );
 }
 
 function getAllMessagesUiById(state) {
   return state.messages.messagesUiById;
@@ -32,16 +36,27 @@ function getAllMessagesUiById(state) {
 
 function filterLevel(messages, filters) {
   return messages.filter((message) => {
     return filters.get(message.level) === true
       || [MESSAGE_TYPE.COMMAND, MESSAGE_TYPE.RESULT].includes(message.type);
   });
 }
 
+function filterNetwork(messages, filters) {
+  return messages.filter((message) => {
+    return (
+      message.source !== MESSAGE_SOURCE.NETWORK
+      || (filters.get("network") === true && message.isXHR === false)
+      || (filters.get("netxhr") === true && message.isXHR === true)
+      || [MESSAGE_TYPE.COMMAND, MESSAGE_TYPE.RESULT].includes(message.type)
+    );
+  });
+}
+
 function search(messages, text = "") {
   if (text === "") {
     return messages;
   }
 
   return messages.filter(function (message) {
     // Evaluation Results and Console Commands are never filtered.
     if ([ MESSAGE_TYPE.RESULT, MESSAGE_TYPE.COMMAND ].includes(message.type)) {
--- a/devtools/client/webconsole/new-console-output/store.js
+++ b/devtools/client/webconsole/new-console-output/store.js
@@ -15,16 +15,18 @@ function configureStore() {
     prefs: new PrefState({
       logLimit: Math.max(Services.prefs.getIntPref("devtools.hud.loglimit"), 1),
     }),
     filters: new FilterState({
       error: Services.prefs.getBoolPref("devtools.webconsole.filter.error"),
       warn: Services.prefs.getBoolPref("devtools.webconsole.filter.warn"),
       info: Services.prefs.getBoolPref("devtools.webconsole.filter.info"),
       log: Services.prefs.getBoolPref("devtools.webconsole.filter.log"),
+      network: Services.prefs.getBoolPref("devtools.webconsole.filter.network"),
+      netxhr: Services.prefs.getBoolPref("devtools.webconsole.filter.netxhr"),
     })
   };
 
   return createStore(
     combineReducers(reducers),
     initialState,
     applyMiddleware(thunk)
   );
--- a/devtools/client/webconsole/new-console-output/test/store/filters.test.js
+++ b/devtools/client/webconsole/new-console-output/test/store/filters.test.js
@@ -8,16 +8,17 @@ const expect = require("expect");
 const actions = require("devtools/client/webconsole/new-console-output/actions/filters");
 const { messageAdd } = require("devtools/client/webconsole/new-console-output/actions/messages");
 const { ConsoleCommand } = require("devtools/client/webconsole/new-console-output/types");
 const { getAllMessages } = require("devtools/client/webconsole/new-console-output/selectors/messages");
 const { getAllFilters } = require("devtools/client/webconsole/new-console-output/selectors/filters");
 const { setupStore } = require("devtools/client/webconsole/new-console-output/test/helpers");
 const { MESSAGE_LEVEL } = require("devtools/client/webconsole/new-console-output/constants");
 const { stubPackets } = require("devtools/client/webconsole/new-console-output/test/fixtures/stubs/index");
+const { stubPreparedMessages } = require("devtools/client/webconsole/new-console-output/test/fixtures/stubs/index");
 
 describe("Filtering", () => {
   let store;
   let numMessages;
   // Number of messages in prepareBaseStore which are not filtered out, i.e. Evaluation
   // Results and console commands .
   const numUnfilterableMessages = 2;
 
@@ -53,16 +54,40 @@ describe("Filtering", () => {
     });
 
     it("filters error messages", () => {
       store.dispatch(actions.filterToggle(MESSAGE_LEVEL.ERROR));
 
       let messages = getAllMessages(store.getState());
       expect(messages.size).toEqual(numMessages - 1);
     });
+
+    it("filters xhr messages", () => {
+      let message = stubPreparedMessages.get("XHR GET request");
+      store.dispatch(messageAdd(message));
+
+      let messages = getAllMessages(store.getState());
+      expect(messages.size).toEqual(numMessages + 1);
+
+      store.dispatch(actions.filterToggle("netxhr"));
+      messages = getAllMessages(store.getState());
+      expect(messages.size).toEqual(numMessages);
+    });
+
+    it("filters network messages", () => {
+      let message = stubPreparedMessages.get("GET request");
+      store.dispatch(messageAdd(message));
+
+      let messages = getAllMessages(store.getState());
+      expect(messages.size).toEqual(numMessages + 1);
+
+      store.dispatch(actions.filterToggle("network"));
+      messages = getAllMessages(store.getState());
+      expect(messages.size).toEqual(numMessages);
+    });
   });
 
   describe("Text filter", () => {
     it("matches on value grips", () => {
       store.dispatch(actions.filterTextSet("danger"));
 
       let messages = getAllMessages(store.getState());
       expect(messages.size - numUnfilterableMessages).toEqual(1);
@@ -132,35 +157,41 @@ describe("Filtering", () => {
 });
 
 describe("Clear filters", () => {
   it("clears all filters", () => {
     const store = setupStore([]);
 
     // Setup test case
     store.dispatch(actions.filterToggle(MESSAGE_LEVEL.ERROR));
+    store.dispatch(actions.filterToggle("netxhr"));
     store.dispatch(actions.filterTextSet("foobar"));
+
     let filters = getAllFilters(store.getState());
     expect(filters.toJS()).toEqual({
       "debug": true,
       "error": false,
       "info": true,
       "log": true,
+      "network": true,
+      "netxhr": false,
       "warn": true,
       "text": "foobar"
     });
 
     store.dispatch(actions.filtersClear());
 
     filters = getAllFilters(store.getState());
     expect(filters.toJS()).toEqual({
       "debug": true,
       "error": true,
       "info": true,
       "log": true,
+      "network": true,
+      "netxhr": true,
       "warn": true,
       "text": ""
     });
   });
 });
 
 function prepareBaseStore() {
   const store = setupStore([