Bug 1665306 - Process "network updates" in console with only one `networkUpdateRequest` action call. r=jdescottes

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

devtools/client/webconsole/actions/messages.js

@@ -18,7 +18,7 @@ const {
 const {
   MESSAGES_ADD,
   NETWORK_MESSAGES_UPDATE,
-  NETWORK_UPDATE_REQUEST,
+  NETWORK_UPDATES_REQUEST,
   MESSAGES_CLEAR,
   MESSAGES_CLEAR_LOGPOINT,
   MESSAGE_OPEN,
@@ -159,11 +159,10 @@ function networkMessageUpdates(packets, idGenerator = null) {
   };
 }
 
-function networkUpdateRequest(id, data) {
+function networkUpdateRequests(updates) {
   return {
-    type: NETWORK_UPDATE_REQUEST,
-    id,
-    data,
+    type: NETWORK_UPDATES_REQUEST,
+    updates,
   };
 }
 
@@ -177,6 +176,6 @@ module.exports = {
   messageGetMatchingElements,
   messageUpdatePayload,
   networkMessageUpdates,
-  networkUpdateRequest,
+  networkUpdateRequests,
   privateMessagesClear,
 };

devtools/client/webconsole/constants.js

@@ -32,7 +32,7 @@ const actionTypes = {
   MESSAGES_CLEAR: "MESSAGES_CLEAR",
   MESSAGES_CLEAR_LOGPOINT: "MESSAGES_CLEAR_LOGPOINT",
   NETWORK_MESSAGES_UPDATE: "NETWORK_MESSAGES_UPDATE",
-  NETWORK_UPDATE_REQUEST: "NETWORK_UPDATE_REQUEST",
+  NETWORK_UPDATES_REQUEST: "NETWORK_UPDATES_REQUEST",
   PERSIST_TOGGLE: "PERSIST_TOGGLE",
   PRIVATE_MESSAGES_CLEAR: "PRIVATE_MESSAGES_CLEAR",
   REMOVE_NOTIFICATION: "REMOVE_NOTIFICATION",

devtools/client/webconsole/reducers/messages.js

@@ -543,18 +543,17 @@ function messages(
           ...networkMessagesUpdateById,
         },
       };
-      let firstNetworkError = null;
+      let hasNetworkError = 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 (!hasNetworkError && isMessageNetworkError(message)) {
+          hasNetworkError = true;
         }
       }
 
-      // If the request status code is a 4XX or 5XX, then we may have to display the
-      // message (as an error).
-      if (firstNetworkError) {
+      // If the message updates contained a network error, then we may have to display it.
+      if (hasNetworkError) {
         return setVisibleMessages({
           messagesState: updatedState,
           filtersState,
@@ -566,22 +565,30 @@ function messages(
       return updatedState;
 
     case UPDATE_REQUEST:
-    case constants.NETWORK_UPDATE_REQUEST: {
-      const request = networkMessagesUpdateById[action.id];
-      if (!request) {
-        return state;
-      }
-
-      return {
+    case constants.NETWORK_UPDATES_REQUEST: {
+      newState = {
         ...state,
         networkMessagesUpdateById: {
           ...networkMessagesUpdateById,
-          [action.id]: {
-            ...request,
-            ...processNetworkUpdates(action.data, request),
-          },
         },
       };
+
+      // Netmonitor's UPDATE_REQUEST action comes for only one request
+      const updates =
+        action.type == UPDATE_REQUEST
+          ? [{ id: action.id, data: action.data }]
+          : action.updates;
+      for (const { id, data } of updates) {
+        const request = networkMessagesUpdateById[id];
+        if (!request) {
+          continue;
+        }
+        newState.networkMessagesUpdateById[id] = {
+          ...request,
+          ...processNetworkUpdates(data, request),
+        };
+      }
+      return newState;
     }
 
     case constants.FRONTS_TO_RELEASE_CLEAR:

devtools/client/webconsole/test/browser/browser_webconsole_network_messages_expand.js

@@ -344,7 +344,7 @@ async function waitForSourceEditor(panel) {
 }
 
 async function waitForRequestUpdates(hud) {
-  return hud.ui.once("network-message-updated");
+  return hud.ui.once("network-messages-updated");
 }
 
 function expandXhrMessage(node) {

devtools/client/webconsole/test/browser/browser_webconsole_network_messages_status_code.js

@@ -28,11 +28,7 @@ registerCleanupFunction(async function() {
 add_task(async function task() {
   const hud = await openNewTabAndConsole(TEST_URI);
 
-  const currentTab = gBrowser.selectedTab;
-  const target = await TargetFactory.forTab(currentTab);
-  const toolbox = gDevTools.getToolbox(target);
-  const { ui } = toolbox.getCurrentPanel().hud;
-  const onNetworkMessageUpdate = ui.once("network-message-updated");
+  const onNetworkMessageUpdate = hud.ui.once("network-messages-updated");
 
   // Fire an XHR POST request.
   await SpecialPowers.spawn(gBrowser.selectedBrowser, [], function() {

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

@@ -47,9 +47,14 @@ describe("Network message reducer:", () => {
       };
 
       dispatch(
-        actions.networkUpdateRequest("message1", {
-          requestHeaders: headers,
-        })
+        actions.networkUpdateRequests([
+          {
+            id: "message1",
+            data: {
+              requestHeaders: headers,
+            },
+          },
+        ])
       );
 
       const networkUpdates = getAllNetworkMessagesUpdateById(getState());
@@ -62,9 +67,14 @@ describe("Network message reducer:", () => {
       };
 
       dispatch(
-        actions.networkUpdateRequest("message1", {
-          securityInfo: securityInfo,
-        })
+        actions.networkUpdateRequests([
+          {
+            id: "message1",
+            data: {
+              securityInfo: securityInfo,
+            },
+          },
+        ])
       );
 
       const networkUpdates = getAllNetworkMessagesUpdateById(getState());
@@ -82,9 +92,14 @@ describe("Network message reducer:", () => {
       };
 
       dispatch(
-        actions.networkUpdateRequest("message1", {
-          requestPostData,
-        })
+        actions.networkUpdateRequests([
+          {
+            id: "message1",
+            data: {
+              requestPostData,
+            },
+          },
+        ])
       );
 
       const { message1 } = getAllNetworkMessagesUpdateById(getState());

devtools/client/webconsole/webconsole-wrapper.js

@@ -332,15 +332,13 @@ class WebConsoleWrapper {
           await store.dispatch(
             actions.networkMessageUpdates(this.queuedMessageUpdates, null)
           );
-          for (const message of this.queuedMessageUpdates) {
-            this.webConsoleUI.emitForTests("network-message-updated", message);
-          }
+          this.webConsoleUI.emitForTests("network-messages-updated");
           this.queuedMessageUpdates = [];
         }
         if (this.queuedRequestUpdates.length > 0) {
-          for (const { id, data } of this.queuedRequestUpdates) {
-            await store.dispatch(actions.networkUpdateRequest(id, data));
-          }
+          await store.dispatch(
+            actions.networkUpdateRequests(this.queuedRequestUpdates)
+          );
           this.queuedRequestUpdates = [];
 
           // Fire an event indicating that all data fetched from