Bug 1665305 - Process "message network updates" in console with only one `networkMessageUpdate` action call. r=jdescottes

This help modifying redux state only once and prevent many uncesarry copies of the whole messages/network events Maps.
This will also later help getting rid of WebConsoleWrapper throttling in favor of upcoming ResourceWatcher one,
as we could call only one action from onResourceAvailable/Updated.

Differential Revision: https://phabricator.services.mozilla.com/D90367

devtools/client/webconsole/actions/messages.js

@@ -17,7 +17,7 @@ const {
 
 const {
   MESSAGES_ADD,
-  NETWORK_MESSAGE_UPDATE,
+  NETWORK_MESSAGES_UPDATE,
   NETWORK_UPDATE_REQUEST,
   MESSAGES_CLEAR,
   MESSAGES_CLEAR_LOGPOINT,
@@ -146,16 +146,16 @@ function messageRemove(id) {
   };
 }
 
-function networkMessageUpdate(packet, idGenerator = null) {
+function networkMessageUpdates(packets, idGenerator = null) {
   if (idGenerator == null) {
     idGenerator = defaultIdGenerator;
   }
 
-  const message = prepareMessage(packet, idGenerator);
+  const messages = packets.map(packet => prepareMessage(packet, idGenerator));
 
   return {
-    type: NETWORK_MESSAGE_UPDATE,
-    message,
+    type: NETWORK_MESSAGES_UPDATE,
+    messages,
   };
 }
 
@@ -176,7 +176,7 @@ module.exports = {
   messageRemove,
   messageGetMatchingElements,
   messageUpdatePayload,
-  networkMessageUpdate,
+  networkMessageUpdates,
   networkUpdateRequest,
   privateMessagesClear,
 };

devtools/client/webconsole/constants.js

@@ -31,7 +31,7 @@ const actionTypes = {
   MESSAGES_ADD: "MESSAGES_ADD",
   MESSAGES_CLEAR: "MESSAGES_CLEAR",
   MESSAGES_CLEAR_LOGPOINT: "MESSAGES_CLEAR_LOGPOINT",
-  NETWORK_MESSAGE_UPDATE: "NETWORK_MESSAGE_UPDATE",
+  NETWORK_MESSAGES_UPDATE: "NETWORK_MESSAGES_UPDATE",
   NETWORK_UPDATE_REQUEST: "NETWORK_UPDATE_REQUEST",
   PERSIST_TOGGLE: "PERSIST_TOGGLE",
   PRIVATE_MESSAGES_CLEAR: "PRIVATE_MESSAGES_CLEAR",

devtools/client/webconsole/enhancers/net-provider.js

@@ -15,7 +15,7 @@ const {
 
 const {
   MESSAGE_OPEN,
-  NETWORK_MESSAGE_UPDATE,
+  NETWORK_MESSAGES_UPDATE,
 } = require("devtools/client/webconsole/constants");
 
 /**
@@ -45,7 +45,7 @@ function enableNetProvider(webConsoleUI) {
       // from the backend. It can happen (especially in test) that
       // the message is opened before all network event updates are
       // received. The rest of updates will be handled below, see:
-      // NETWORK_MESSAGE_UPDATE action handler.
+      // NETWORK_MESSAGES_UPDATE action handler.
       if (type == MESSAGE_OPEN) {
         const updates = getAllNetworkMessagesUpdateById(newState);
         const message = updates[action.id];
@@ -63,14 +63,16 @@ function enableNetProvider(webConsoleUI) {
       // NETWORK_MESSAGES_UPDATE action.
       // Make sure to call `dataProvider.onNetworkResourceUpdated`
       // to fetch data from the backend.
-      if (type == NETWORK_MESSAGE_UPDATE) {
-        const { actor } = action.message;
-        const open = getAllMessagesUiById(newState).includes(actor);
-        if (open) {
-          const message = getMessage(newState, actor);
-          message.updates.forEach(updateType => {
-            dataProvider.onNetworkResourceUpdated(message, { updateType });
-          });
+      if (type == NETWORK_MESSAGES_UPDATE) {
+        const allMessages = getAllMessagesUiById(newState);
+        for (const { actor } of action.messages) {
+          const open = allMessages.includes(actor);
+          if (open) {
+            const message = getMessage(newState, actor);
+            message.updates.forEach(updateType => {
+              dataProvider.onNetworkResourceUpdated(message, { updateType });
+            });
+          }
         }
       }
 

devtools/client/webconsole/reducers/messages.js

@@ -534,23 +534,27 @@ function messages(
         ),
       };
 
-    case constants.NETWORK_MESSAGE_UPDATE:
+    case constants.NETWORK_MESSAGES_UPDATE:
       const updatedState = {
         ...state,
         // Update messagesById since the nested object of message might be changed.
-        messagesById: new Map(messagesById).set(
-          action.message.id,
-          action.message
-        ),
+        messagesById: new Map(messagesById),
         networkMessagesUpdateById: {
           ...networkMessagesUpdateById,
-          [action.message.id]: action.message,
         },
       };
+      let firstNetworkError = null;
+      for (const message of action.messages) {
+        updatedState.messagesById.set(message.id, message);
+        updatedState.networkMessagesUpdateById[message.id] = message;
+        if (!firstNetworkError && isMessageNetworkError(message)) {
+          firstNetworkError = message;
+        }
+      }
 
       // If the request status code is a 4XX or 5XX, then we may have to display the
       // message (as an error).
-      if (isMessageNetworkError(action.message)) {
+      if (firstNetworkError) {
         return setVisibleMessages({
           messagesState: updatedState,
           filtersState,

devtools/client/webconsole/test/node/store/messages.test.js

@@ -883,7 +883,7 @@ describe("Message reducer:", () => {
       packet.actor = "message1";
       updatePacket.actor = "message1";
       dispatch(actions.messagesAdd([packet]));
-      dispatch(actions.networkMessageUpdate(updatePacket, null));
+      dispatch(actions.networkMessageUpdates([updatePacket], null));
 
       let networkUpdates = getAllNetworkMessagesUpdateById(getState());
       expect(Object.keys(networkUpdates)).toEqual(["message1"]);
@@ -893,7 +893,7 @@ describe("Message reducer:", () => {
       packet.actor = "message2";
       updatePacket.actor = "message2";
       dispatch(actions.messagesAdd([packet]));
-      dispatch(actions.networkMessageUpdate(updatePacket, null));
+      dispatch(actions.networkMessageUpdates([updatePacket], null));
 
       networkUpdates = getAllNetworkMessagesUpdateById(getState());
       expect(Object.keys(networkUpdates)).toEqual(["message1", "message2"]);
@@ -903,7 +903,7 @@ describe("Message reducer:", () => {
       const { dispatch, getState } = setupStore(["XHR GET request"]);
 
       const updatePacket = stubPackets.get("XHR GET request update");
-      dispatch(actions.networkMessageUpdate(updatePacket, null));
+      dispatch(actions.networkMessageUpdates([updatePacket], null));
 
       let networkUpdates = getAllNetworkMessagesUpdateById(getState());
       expect(Object.keys(networkUpdates).length > 0).toBe(true);
@@ -929,17 +929,17 @@ describe("Message reducer:", () => {
       packet.actor = "message1";
       updatePacket.actor = "message1";
       dispatch(actions.messagesAdd([packet]));
-      dispatch(actions.networkMessageUpdate(updatePacket, null));
+      dispatch(actions.networkMessageUpdates([updatePacket], null));
 
       packet.actor = "message2";
       updatePacket.actor = "message2";
       dispatch(actions.messagesAdd([packet]));
-      dispatch(actions.networkMessageUpdate(updatePacket, null));
+      dispatch(actions.networkMessageUpdates([updatePacket], null));
 
       packet.actor = "message3";
       updatePacket.actor = "message3";
       dispatch(actions.messagesAdd([packet]));
-      dispatch(actions.networkMessageUpdate(updatePacket, null));
+      dispatch(actions.networkMessageUpdates([updatePacket], null));
 
       // Check that we have the expected data.
       const messages = getAllMessagesById(getState());

devtools/client/webconsole/test/node/store/network-messages.test.js

@@ -37,7 +37,7 @@ describe("Network message reducer:", () => {
     packet.actor = "message1";
     updatePacket.actor = "message1";
     dispatch(actions.messagesAdd([packet]));
-    dispatch(actions.networkMessageUpdate(updatePacket, null));
+    dispatch(actions.networkMessageUpdates([updatePacket], null));
   });
 
   describe("networkMessagesUpdateById", () => {

devtools/client/webconsole/webconsole-wrapper.js

@@ -329,8 +329,10 @@ class WebConsoleWrapper {
         this.queuedMessageAdds = [];
 
         if (this.queuedMessageUpdates.length > 0) {
+          await store.dispatch(
+            actions.networkMessageUpdates(this.queuedMessageUpdates, null)
+          );
           for (const message of this.queuedMessageUpdates) {
-            await store.dispatch(actions.networkMessageUpdate(message, null));
             this.webConsoleUI.emitForTests("network-message-updated", message);
           }
           this.queuedMessageUpdates = [];