mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 00:05:36 +00:00
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
This commit is contained in:
parent
066945c7bc
commit
fe0cebfc8b
@ -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 {
|
||||
|
@ -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();
|
||||
|
@ -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 () {
|
||||
|
@ -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");
|
||||
|
@ -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");
|
||||
|
@ -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");
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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");
|
||||
|
@ -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");
|
||||
|
@ -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");
|
||||
|
@ -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");
|
||||
|
@ -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 {
|
||||
|
@ -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");
|
||||
|
@ -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.
|
@ -16,4 +16,5 @@ DIRS += [
|
||||
|
||||
DevToolsModules(
|
||||
'constants.js',
|
||||
'create-store.js',
|
||||
)
|
||||
|
@ -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'
|
||||
|
28
devtools/client/netmonitor/src/utils/redux-connect.js
Normal file
28
devtools/client/netmonitor/src/utils/redux-connect.js
Normal file
@ -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
|
||||
};
|
@ -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]
|
||||
|
@ -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;
|
||||
}
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user