Bug 1371721 - Wait for redux store events before dispatching network-request-payload-ready and network-message-updated events. r=nchevobbe draft
authorAlexandre Poirot <poirot.alex@gmail.com>
Mon, 18 Sep 2017 19:26:28 +0200
changeset 666454 d93d271c901eee7b3a9e882d8dbcdd050aded4b6
parent 666377 66992843bfae3fab22aa5b344ae7d65e0c05e372
child 666854 5428795cc85e54b78a2d4f8aebf8263302ac40db
push id80412
push userbmo:poirot.alex@gmail.com
push dateMon, 18 Sep 2017 19:22:49 +0000
reviewersnchevobbe
bugs1371721
milestone57.0a1
Bug 1371721 - Wait for redux store events before dispatching network-request-payload-ready and network-message-updated events. r=nchevobbe MozReview-Commit-ID: LJGiuNI44QB
devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
--- a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
+++ b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
@@ -12,32 +12,33 @@ const actions = require("devtools/client
 const { createContextMenu } = require("devtools/client/webconsole/new-console-output/utils/context-menu");
 const { configureStore } = require("devtools/client/webconsole/new-console-output/store");
 
 const EventEmitter = require("devtools/shared/old-event-emitter");
 const ConsoleOutput = React.createFactory(require("devtools/client/webconsole/new-console-output/components/console-output"));
 const FilterBar = React.createFactory(require("devtools/client/webconsole/new-console-output/components/filter-bar"));
 
 let store = null;
-let queuedMessageAdds = [];
-let queuedMessageUpdates = [];
-let queuedRequestUpdates = [];
-let throttledDispatchTimeout = false;
 
 function NewConsoleOutputWrapper(parentNode, jsterm, toolbox, owner, document) {
   EventEmitter.decorate(this);
 
   this.parentNode = parentNode;
   this.jsterm = jsterm;
   this.toolbox = toolbox;
   this.owner = owner;
   this.document = document;
 
   this.init = this.init.bind(this);
 
+  this.queuedMessageAdds = [];
+  this.queuedMessageUpdates = [];
+  this.queuedRequestUpdates = [];
+  this.throttledDispatchTimeout = false;
+
   store = configureStore(this.jsterm.hud);
 }
 NewConsoleOutputWrapper.prototype = {
   init: function () {
     const attachRefToHud = (id, node) => {
       this.jsterm.hud[id] = node;
     };
     // Focus the input line whenever the output area is clicked.
@@ -177,17 +178,17 @@ NewConsoleOutputWrapper.prototype = {
         filterBar,
         childComponent
     ));
     this.body = ReactDOM.render(provider, this.parentNode);
 
     this.jsterm.focus();
   },
   dispatchMessageAdd: function (message, waitForResponse) {
-    batchedMessagesAdd(message);
+    this.batchedMessagesAdd(message);
     // Wait for the message to render to resolve with the DOM node.
     // This is just for backwards compatibility with old tests, and should
     // be removed once it's not needed anymore.
     // Can only wait for response if the action contains a valid message.
     if (waitForResponse) {
       let {timeStamp} = message;
       return new Promise(resolve => {
         let jsterm = this.jsterm;
@@ -219,67 +220,74 @@ NewConsoleOutputWrapper.prototype = {
   },
 
   dispatchMessageUpdate: function (message, res) {
     // network-message-updated will emit when all the update message arrives.
     // Since we can't ensure the order of the network update, we check
     // that networkInfo.updates has all we need.
     const NUMBER_OF_NETWORK_UPDATE = 8;
     if (res.networkInfo.updates.length === NUMBER_OF_NETWORK_UPDATE) {
-      batchedMessageUpdates(message);
-      this.jsterm.hud.emit("network-message-updated", res);
+      this.batchedMessageUpdates({ res, message });
     }
   },
 
   dispatchRequestUpdate: function (id, data) {
-    batchedRequestUpdates({ id, data });
+    this.batchedRequestUpdates({ id, data });
+  },
+
+  batchedMessageUpdates: function (info) {
+    this.queuedMessageUpdates.push(info);
+    this.setTimeoutIfNeeded();
+  },
+
+  batchedRequestUpdates: function (message) {
+    this.queuedRequestUpdates.push(message);
+    this.setTimeoutIfNeeded();
+  },
+
+  batchedMessagesAdd: function (message) {
+    this.queuedMessageAdds.push(message);
+    this.setTimeoutIfNeeded();
+  },
+
+  setTimeoutIfNeeded: function () {
+    if (this.throttledDispatchTimeout) {
+      return;
+    }
+
+    this.throttledDispatchTimeout = setTimeout(() => {
+      this.throttledDispatchTimeout = null;
 
-    // Fire an event indicating that all data fetched from
-    // the backend has been received. This is based on
-    // 'FirefoxDataProvider.isQueuePayloadReady', see more
-    // comments in that method.
-    // (netmonitor/src/connector/firefox-data-provider).
-    // This event might be utilized in tests to find the right
-    // time when to finish.
-    this.jsterm.hud.emit("network-request-payload-ready", {id, data});
+      store.dispatch(actions.messagesAdd(this.queuedMessageAdds));
+      this.queuedMessageAdds = [];
+
+      if (this.queuedMessageUpdates.length > 0) {
+        this.queuedMessageUpdates.forEach(({ message, res }) => {
+          actions.networkMessageUpdate(message);
+          this.jsterm.hud.emit("network-message-updated", res);
+        });
+        this.queuedMessageUpdates = [];
+      }
+      if (this.queuedRequestUpdates.length > 0) {
+        this.queuedRequestUpdates.forEach(({ id, data}) => {
+          actions.networkUpdateRequest(id, data);
+        });
+        this.queuedRequestUpdates = [];
+        // Fire an event indicating that all data fetched from
+        // the backend has been received. This is based on
+        // 'FirefoxDataProvider.isQueuePayloadReady', see more
+        // comments in that method.
+        // (netmonitor/src/connector/firefox-data-provider).
+        // This event might be utilized in tests to find the right
+        // time when to finish.
+        this.jsterm.hud.emit("network-request-payload-ready", {id, data});
+      }
+    }, 50);
   },
 
   // Should be used for test purpose only.
   getStore: function () {
     return store;
   }
 };
 
-function setTimeoutIfNeeded() {
-  if (!throttledDispatchTimeout) {
-    throttledDispatchTimeout = setTimeout(() => {
-      store.dispatch(actions.messagesAdd(queuedMessageAdds));
-      queuedMessageUpdates.forEach(message => {
-        actions.networkMessageUpdate(message);
-      });
-      queuedRequestUpdates.forEach(({ id, data}) => {
-        actions.networkUpdateRequest(id, data);
-      });
-      queuedMessageAdds = [];
-      queuedMessageUpdates = [];
-      queuedRequestUpdates = [];
-      throttledDispatchTimeout = null;
-    }, 50);
-  }
-}
-
-function batchedMessageUpdates(message) {
-  queuedMessageUpdates.push(message);
-  setTimeoutIfNeeded();
-}
-
-function batchedRequestUpdates(message) {
-  queuedRequestUpdates.push(message);
-  setTimeoutIfNeeded();
-}
-
-function batchedMessagesAdd(message) {
-  queuedMessageAdds.push(message);
-  setTimeoutIfNeeded();
-}
-
 // Exports from this module
 module.exports = NewConsoleOutputWrapper;