From fe0cebfc8be637501b3197ea5265ebb8a133d52c Mon Sep 17 00:00:00 2001
From: Jan Odvarko <odvarko@gmail.com>
Date: Thu, 1 Mar 2018 10:48:26 +0100
Subject: [PATCH] Bug 1419350 - Stop doing React updates while netmonitor is in
 background; r=ochameau

MozReview-Commit-ID: FvKFDiM8xNB

--HG--
rename : devtools/client/netmonitor/src/utils/create-store.js => devtools/client/netmonitor/src/create-store.js
extra : rebase_source : 4e2c4d9cc66e2ae4e8c03f5419922903d717f858
---
 devtools/client/netmonitor/initializer.js     |  2 +-
 devtools/client/netmonitor/launchpad.js       |  2 +-
 .../client/netmonitor/src/components/App.js   |  2 +-
 .../src/components/CustomRequestPanel.js      |  2 +-
 .../netmonitor/src/components/MonitorPanel.js |  2 +-
 .../src/components/NetworkDetailsPanel.js     |  2 +-
 .../netmonitor/src/components/ParamsPanel.js  |  2 +-
 .../src/components/RequestListContent.js      |  2 +-
 .../src/components/RequestListEmptyNotice.js  |  2 +-
 .../src/components/RequestListHeader.js       |  2 +-
 .../src/components/StatisticsPanel.js         |  2 +-
 .../netmonitor/src/components/StatusBar.js    |  2 +-
 .../netmonitor/src/components/Toolbar.js      |  2 +-
 .../src/{utils => }/create-store.js           | 20 +++----
 devtools/client/netmonitor/src/moz.build      |  1 +
 .../client/netmonitor/src/utils/moz.build     |  2 +-
 .../netmonitor/src/utils/redux-connect.js     | 28 ++++++++++
 devtools/client/netmonitor/test/browser.ini   |  1 +
 .../test/browser_net_background_update.js     | 56 +++++++++++++++++++
 devtools/client/shared/browser-loader.js      |  1 +
 20 files changed, 111 insertions(+), 24 deletions(-)
 rename devtools/client/netmonitor/src/{utils => }/create-store.js (76%)
 create mode 100644 devtools/client/netmonitor/src/utils/redux-connect.js
 create mode 100644 devtools/client/netmonitor/test/browser_net_background_update.js

diff --git a/devtools/client/netmonitor/initializer.js b/devtools/client/netmonitor/initializer.js
index e4edc958de51..c6b4d02815d8 100644
--- a/devtools/client/netmonitor/initializer.js
+++ b/devtools/client/netmonitor/initializer.js
@@ -22,7 +22,7 @@ const { render, unmountComponentAtNode } = require("devtools/client/shared/vendo
 const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
 const { bindActionCreators } = require("devtools/client/shared/vendor/redux");
 const { Connector } = require("./src/connector/index");
-const { configureStore } = require("./src/utils/create-store");
+const { configureStore } = require("./src/create-store");
 const App = createFactory(require("./src/components/App"));
 const { EVENTS } = require("./src/constants");
 const {
diff --git a/devtools/client/netmonitor/launchpad.js b/devtools/client/netmonitor/launchpad.js
index 4ebe469b0ed1..4756767a484e 100644
--- a/devtools/client/netmonitor/launchpad.js
+++ b/devtools/client/netmonitor/launchpad.js
@@ -43,7 +43,7 @@ require("./src/assets/styles/netmonitor.css");
 const EventEmitter = require("devtools-modules/src/utils/event-emitter");
 EventEmitter.decorate(window);
 
-const { configureStore } = require("./src/utils/create-store");
+const { configureStore } = require("./src/create-store");
 const App = require("./src/components/App");
 const { Connector } = require("./src/connector/index");
 const connector = new Connector();
diff --git a/devtools/client/netmonitor/src/components/App.js b/devtools/client/netmonitor/src/components/App.js
index 9616aaa6a2bb..6a97ac590819 100644
--- a/devtools/client/netmonitor/src/components/App.js
+++ b/devtools/client/netmonitor/src/components/App.js
@@ -7,7 +7,7 @@
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { connect } = require("../utils/redux-connect");
 
 // Components
 loader.lazyGetter(this, "MonitorPanel", function () {
diff --git a/devtools/client/netmonitor/src/components/CustomRequestPanel.js b/devtools/client/netmonitor/src/components/CustomRequestPanel.js
index 4f88a1edc089..d111d1fc08c4 100644
--- a/devtools/client/netmonitor/src/components/CustomRequestPanel.js
+++ b/devtools/client/netmonitor/src/components/CustomRequestPanel.js
@@ -7,7 +7,7 @@
 const { Component } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { connect } = require("../utils/redux-connect");
 const { L10N } = require("../utils/l10n");
 const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 const Actions = require("../actions/index");
diff --git a/devtools/client/netmonitor/src/components/MonitorPanel.js b/devtools/client/netmonitor/src/components/MonitorPanel.js
index 40728620c0d9..c314acd9d1a1 100644
--- a/devtools/client/netmonitor/src/components/MonitorPanel.js
+++ b/devtools/client/netmonitor/src/components/MonitorPanel.js
@@ -9,7 +9,7 @@ const { Component, createFactory } = require("devtools/client/shared/vendor/reac
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { div } = dom;
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { connect } = require("../utils/redux-connect");
 const { findDOMNode } = require("devtools/client/shared/vendor/react-dom");
 const Actions = require("../actions/index");
 const { updateFormDataSections } = require("../utils/request-utils");
diff --git a/devtools/client/netmonitor/src/components/NetworkDetailsPanel.js b/devtools/client/netmonitor/src/components/NetworkDetailsPanel.js
index 979f65a3279c..f1eb57c4c453 100644
--- a/devtools/client/netmonitor/src/components/NetworkDetailsPanel.js
+++ b/devtools/client/netmonitor/src/components/NetworkDetailsPanel.js
@@ -7,7 +7,7 @@
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { connect } = require("../utils/redux-connect");
 const Actions = require("../actions/index");
 const { getSelectedRequest } = require("../selectors/index");
 
diff --git a/devtools/client/netmonitor/src/components/ParamsPanel.js b/devtools/client/netmonitor/src/components/ParamsPanel.js
index b822d7c8cd50..f93fe28c4fc2 100644
--- a/devtools/client/netmonitor/src/components/ParamsPanel.js
+++ b/devtools/client/netmonitor/src/components/ParamsPanel.js
@@ -7,7 +7,7 @@
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { connect } = require("../utils/redux-connect");
 const { L10N } = require("../utils/l10n");
 const {
   fetchNetworkUpdatePacket,
diff --git a/devtools/client/netmonitor/src/components/RequestListContent.js b/devtools/client/netmonitor/src/components/RequestListContent.js
index 7408262bc806..12d8c983bf7e 100644
--- a/devtools/client/netmonitor/src/components/RequestListContent.js
+++ b/devtools/client/netmonitor/src/components/RequestListContent.js
@@ -7,7 +7,7 @@
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { connect } = require("../utils/redux-connect");
 const { HTMLTooltip } = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
 
 const Actions = require("../actions/index");
diff --git a/devtools/client/netmonitor/src/components/RequestListEmptyNotice.js b/devtools/client/netmonitor/src/components/RequestListEmptyNotice.js
index c43ba80f8e4c..fbe0c198345a 100644
--- a/devtools/client/netmonitor/src/components/RequestListEmptyNotice.js
+++ b/devtools/client/netmonitor/src/components/RequestListEmptyNotice.js
@@ -7,7 +7,7 @@
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { connect } = require("../utils/redux-connect");
 const Actions = require("../actions/index");
 const { ACTIVITY_TYPE } = require("../constants");
 const { L10N } = require("../utils/l10n");
diff --git a/devtools/client/netmonitor/src/components/RequestListHeader.js b/devtools/client/netmonitor/src/components/RequestListHeader.js
index 0aea8c84c290..3f970d357b36 100644
--- a/devtools/client/netmonitor/src/components/RequestListHeader.js
+++ b/devtools/client/netmonitor/src/components/RequestListHeader.js
@@ -7,7 +7,7 @@
 const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { connect } = require("../utils/redux-connect");
 const { getTheme, addThemeObserver, removeThemeObserver } =
   require("devtools/client/shared/theme");
 const Actions = require("../actions/index");
diff --git a/devtools/client/netmonitor/src/components/StatisticsPanel.js b/devtools/client/netmonitor/src/components/StatisticsPanel.js
index 822282ff1668..b4134c602f6b 100644
--- a/devtools/client/netmonitor/src/components/StatisticsPanel.js
+++ b/devtools/client/netmonitor/src/components/StatisticsPanel.js
@@ -9,7 +9,7 @@ const { FILTER_TAGS } = require("../constants");
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { connect } = require("../utils/redux-connect");
 const { Chart } = require("devtools/client/shared/widgets/Chart");
 const { PluralForm } = require("devtools/shared/plural-form");
 const Actions = require("../actions/index");
diff --git a/devtools/client/netmonitor/src/components/StatusBar.js b/devtools/client/netmonitor/src/components/StatusBar.js
index 01e38ca4db17..4e9b703fb5e2 100644
--- a/devtools/client/netmonitor/src/components/StatusBar.js
+++ b/devtools/client/netmonitor/src/components/StatusBar.js
@@ -6,7 +6,7 @@
 
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { connect } = require("../utils/redux-connect");
 const { PluralForm } = require("devtools/shared/plural-form");
 const Actions = require("../actions/index");
 const {
diff --git a/devtools/client/netmonitor/src/components/Toolbar.js b/devtools/client/netmonitor/src/components/Toolbar.js
index f150fc834a5c..f8d5938daa02 100644
--- a/devtools/client/netmonitor/src/components/Toolbar.js
+++ b/devtools/client/netmonitor/src/components/Toolbar.js
@@ -8,7 +8,7 @@ const Services = require("Services");
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { connect } = require("../utils/redux-connect");
 
 const Actions = require("../actions/index");
 const { FILTER_SEARCH_DELAY, FILTER_TAGS } = require("../constants");
diff --git a/devtools/client/netmonitor/src/utils/create-store.js b/devtools/client/netmonitor/src/create-store.js
similarity index 76%
rename from devtools/client/netmonitor/src/utils/create-store.js
rename to devtools/client/netmonitor/src/create-store.js
index af1941da1141..b30a6af8d7a7 100644
--- a/devtools/client/netmonitor/src/utils/create-store.js
+++ b/devtools/client/netmonitor/src/create-store.js
@@ -8,18 +8,18 @@ const Services = require("Services");
 const { applyMiddleware, createStore } = require("devtools/client/shared/vendor/redux");
 
 // Middleware
-const batching = require("../middleware/batching");
-const prefs = require("../middleware/prefs");
-const thunk = require("../middleware/thunk");
-const recording = require("../middleware/recording");
+const batching = require("./middleware/batching");
+const prefs = require("./middleware/prefs");
+const thunk = require("./middleware/thunk");
+const recording = require("./middleware/recording");
 
 // Reducers
-const rootReducer = require("../reducers/index");
-const { FilterTypes, Filters } = require("../reducers/filters");
-const { Requests } = require("../reducers/requests");
-const { Sort } = require("../reducers/sort");
-const { TimingMarkers } = require("../reducers/timing-markers");
-const { UI, Columns } = require("../reducers/ui");
+const rootReducer = require("./reducers/index");
+const { FilterTypes, Filters } = require("./reducers/filters");
+const { Requests } = require("./reducers/requests");
+const { Sort } = require("./reducers/sort");
+const { TimingMarkers } = require("./reducers/timing-markers");
+const { UI, Columns } = require("./reducers/ui");
 
 /**
  * Configure state and middleware for the Network monitor tool.
diff --git a/devtools/client/netmonitor/src/moz.build b/devtools/client/netmonitor/src/moz.build
index feff904c1e05..ddaa7a426c44 100644
--- a/devtools/client/netmonitor/src/moz.build
+++ b/devtools/client/netmonitor/src/moz.build
@@ -16,4 +16,5 @@ DIRS += [
 
 DevToolsModules(
     'constants.js',
+    'create-store.js',
 )
diff --git a/devtools/client/netmonitor/src/utils/moz.build b/devtools/client/netmonitor/src/utils/moz.build
index 55c260b43653..d0e412cf9eba 100644
--- a/devtools/client/netmonitor/src/utils/moz.build
+++ b/devtools/client/netmonitor/src/utils/moz.build
@@ -8,7 +8,6 @@ DIRS += [
 ]
 
 DevToolsModules(
-    'create-store.js',
     'filter-autocomplete-provider.js',
     'filter-predicates.js',
     'filter-text-utils.js',
@@ -19,6 +18,7 @@ DevToolsModules(
     'menu.js',
     'open-request-in-tab.js',
     'prefs.js',
+    'redux-connect.js',
     'request-utils.js',
     'sort-predicates.js',
     'sort-utils.js'
diff --git a/devtools/client/netmonitor/src/utils/redux-connect.js b/devtools/client/netmonitor/src/utils/redux-connect.js
new file mode 100644
index 000000000000..0a1bf15005a0
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/redux-connect.js
@@ -0,0 +1,28 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 { createFactory, createElement } = require("devtools/client/shared/vendor/react");
+const VisibilityHandler = createFactory(require("devtools/client/shared/components/VisibilityHandler"));
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+
+/**
+ * This helper is wrapping Redux's connect() method and applying
+ * HOC (VisibilityHandler component) on whatever component is
+ * originally passed in. The HOC is responsible for not causing
+ * rendering if the owner panel runs in the background.
+ */
+function connectWrapper() {
+  let args = [].slice.call(arguments);
+  return component => {
+    return connect(...args)(props => {
+      return VisibilityHandler(null, createElement(component, props));
+    });
+  };
+}
+
+module.exports = {
+  connect: connectWrapper
+};
diff --git a/devtools/client/netmonitor/test/browser.ini b/devtools/client/netmonitor/test/browser.ini
index 14ecefef3df3..928b167a9c56 100644
--- a/devtools/client/netmonitor/test/browser.ini
+++ b/devtools/client/netmonitor/test/browser.ini
@@ -60,6 +60,7 @@ support-files =
 [browser_net_accessibility-01.js]
 [browser_net_accessibility-02.js]
 [browser_net_api-calls.js]
+[browser_net_background_update.js]
 [browser_net_autoscroll.js]
 [browser_net_cached-status.js]
 [browser_net_cause.js]
diff --git a/devtools/client/netmonitor/test/browser_net_background_update.js b/devtools/client/netmonitor/test/browser_net_background_update.js
new file mode 100644
index 000000000000..e143627d4682
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_background_update.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Check that network logs created when the Net panel is not visible
+ * are displayed when the user shows the panel again.
+ */
+add_task(async () => {
+  let { tab, monitor, toolbox } = await initNetMonitor(CUSTOM_GET_URL);
+  info("Starting test... ");
+
+  let { document, store, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  // Execute two requests
+  await performRequests(monitor, tab, 2);
+
+  // Wait for two logs
+  await waitUntil(() => document.querySelectorAll(".request-list-item").length == 2);
+
+  info("Select the inspector");
+  await toolbox.selectTool("inspector");
+
+  info("Wait for Net panel to be hidden");
+  await waitUntil(() => (document.visibilityState == "hidden"));
+
+  // Execute another two requests
+  await performRequests(monitor, tab, 2);
+
+  // The number of rendered requests should be the same since
+  // requests shouldn't be rendered while the net panel is in
+  // background
+  is(document.querySelectorAll(".request-list-item").length, 2,
+    "There should be expected number of requests");
+
+  info("Select the Net panel again");
+  await toolbox.selectTool("netmonitor");
+
+  // Wait for another two logs to be rendered since the panel
+  // is selected now.
+  await waitUntil(() => document.querySelectorAll(".request-list-item").length == 4);
+
+  return teardown(monitor);
+});
+
+async function performRequests(monitor, tab, count) {
+  let wait = waitForNetworkEvents(monitor, count);
+  await ContentTask.spawn(tab.linkedBrowser, count, requestCount => {
+    content.wrappedJSObject.performRequests(requestCount);
+  });
+  await wait;
+}
diff --git a/devtools/client/shared/browser-loader.js b/devtools/client/shared/browser-loader.js
index c1e9e4fc74ef..1043e593717a 100644
--- a/devtools/client/shared/browser-loader.js
+++ b/devtools/client/shared/browser-loader.js
@@ -19,6 +19,7 @@ const BROWSER_BASED_DIRS = [
   "resource://devtools/client/inspector/grids",
   "resource://devtools/client/inspector/layout",
   "resource://devtools/client/jsonview",
+  "resource://devtools/client/netmonitor/src/utils",
   "resource://devtools/client/shared/source-map",
   "resource://devtools/client/shared/redux",
   "resource://devtools/client/shared/vendor",