nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Backed out changeset eee8f9b6791d (bug 1336383) for failing browser_net_har_post_data.js. r=backout

Browse source
This commit is contained in:
Sebastian Hengst 2017-02-10 17:52:46 +01:00
parent 339c07ecd3
commit ccc33cc0eb
106 changed files with 1796 additions and 2053 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

5
devtools/client/framework/test/browser_ignore_toolbox_network_requests.js
View file

@ -23,9 +23,8 @@ add_task(function* () {
is(panel.UI.editors.length, 1, "correct number of editors opened"); is(panel.UI.editors.length, 1, "correct number of editors opened");
let monitor = yield toolbox.selectTool("netmonitor"); let monitor = yield toolbox.selectTool("netmonitor");
let { gStore } = monitor.panelWin; let { RequestsMenu } = monitor.panelWin.NetMonitorView;
is(RequestsMenu.itemCount, 0, "No network requests appear in the network panel");
is(gStore.getState().requests.requests.size, 0, "No network requests appear in the network panel");
yield gDevTools.closeToolbox(target); yield gDevTools.closeToolbox(target);
tab = target = toolbox = panel = null; tab = target = toolbox = panel = null;

24
devtools/client/netmonitor/actions/selection.js
View file

@ -4,13 +4,8 @@
"use strict"; "use strict";
const { getDisplayedRequests } = require("../selectors/index");
const { SELECT_REQUEST } = require("../constants"); const { SELECT_REQUEST } = require("../constants");
const {
getDisplayedRequests,
getSortedRequests,
} = require("../selectors/index");
const PAGE_SIZE_ITEM_COUNT_RATIO = 5;
/** /**
* Select request with a given id. * Select request with a given id.
@ -18,23 +13,11 @@ const PAGE_SIZE_ITEM_COUNT_RATIO = 5;
function selectRequest(id) { function selectRequest(id) {
return { return {
type: SELECT_REQUEST, type: SELECT_REQUEST,
id, id
}; };
} }
/** const PAGE_SIZE_ITEM_COUNT_RATIO = 5;
* Select request with a given index (sorted order)
*/
function selectRequestByIndex(index) {
return (dispatch, getState) => {
const requests = getSortedRequests(getState());
let itemId;
if (index >= 0 && index < requests.size) {
itemId = requests.get(index).id;
}
dispatch(selectRequest(itemId));
};
}
/** /**
* Move the selection up to down according to the "delta" parameter. Possible values: * Move the selection up to down according to the "delta" parameter. Possible values:
@ -67,6 +50,5 @@ function selectDelta(delta) {
module.exports = { module.exports = {
selectRequest, selectRequest,
selectRequestByIndex,
selectDelta, selectDelta,
}; };

9
devtools/client/netmonitor/actions/ui.js
View file

@ -24,9 +24,9 @@ function openNetworkDetails(open) {
} }
/** /**
* Change performance statistics panel open state. * Change performance statistics view open state.
* *
* @param {boolean} visible - expected performance statistics panel open state * @param {boolean} visible - expected performance statistics open state
*/ */
function openStatistics(open) { function openStatistics(open) {
return { return {
@ -66,11 +66,10 @@ function toggleNetworkDetails() {
} }
/** /**
* Toggle performance statistics panel. * Toggle to show/hide performance statistics view.
*/ */
function toggleStatistics() { function toggleStatistics() {
return (dispatch, getState) => return (dispatch, getState) => dispatch(openStatistics(!getState().ui.statisticsOpen));
dispatch(openStatistics(!getState().ui.statisticsOpen));
} }
module.exports = { module.exports = {

1
devtools/client/netmonitor/components/moz.build
View file

@ -7,6 +7,7 @@ DevToolsModules(
'request-list-empty.js', 'request-list-empty.js',
'request-list-header.js', 'request-list-header.js',
'request-list-item.js', 'request-list-item.js',
'request-list-tooltip.js',
'request-list.js', 'request-list.js',
'statistics-panel.js', 'statistics-panel.js',
'toolbar.js', 'toolbar.js',

98
devtools/client/netmonitor/components/request-list-content.js
View file

@ -1,36 +1,21 @@
/* This Source Code Form is subject to the terms of the Mozilla Public /* 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 * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* globals NetMonitorView */
/* globals NetMonitorController */
"use strict"; "use strict";
const { KeyCodes } = require("devtools/client/shared/keycodes");
const {
createClass,
createFactory,
DOM,
PropTypes,
} = require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { HTMLTooltip } = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
const { Task } = require("devtools/shared/task"); const { Task } = require("devtools/shared/task");
const Actions = require("../actions/index"); const { createClass, createFactory, DOM, PropTypes } = require("devtools/client/shared/vendor/react");
const {
setTooltipImageContent,
setTooltipStackTraceContent,
} = require("../request-list-tooltip");
const {
getDisplayedRequests,
getWaterfallScale,
} = require("../selectors/index");
// Components
const RequestListItem = createFactory(require("./request-list-item"));
const RequestListContextMenu = require("../request-list-context-menu");
const { div } = DOM; const { div } = DOM;
const Actions = require("../actions/index");
const RequestListItem = createFactory(require("./request-list-item"));
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { setTooltipImageContent,
setTooltipStackTraceContent } = require("./request-list-tooltip");
const { getDisplayedRequests,
getWaterfallScale } = require("../selectors/index");
const { KeyCodes } = require("devtools/client/shared/keycodes");
// tooltip show/hide delay in ms // tooltip show/hide delay in ms
const REQUESTS_TOOLTIP_TOGGLE_DELAY = 500; const REQUESTS_TOOLTIP_TOGGLE_DELAY = 500;
@ -42,10 +27,9 @@ const RequestListContent = createClass({
displayName: "RequestListContent", displayName: "RequestListContent",
propTypes: { propTypes: {
contextMenu: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
displayedRequests: PropTypes.object.isRequired, displayedRequests: PropTypes.object.isRequired,
firstRequestStartedMillis: PropTypes.number.isRequired, firstRequestStartedMillis: PropTypes.number.isRequired,
onItemContextMenu: PropTypes.func.isRequired,
onItemMouseDown: PropTypes.func.isRequired, onItemMouseDown: PropTypes.func.isRequired,
onSecurityIconClick: PropTypes.func.isRequired, onSecurityIconClick: PropTypes.func.isRequired,
onSelectDelta: PropTypes.func.isRequired, onSelectDelta: PropTypes.func.isRequired,
@ -58,21 +42,12 @@ const RequestListContent = createClass({
}).isRequired }).isRequired
}, },
componentWillMount() {
const { dispatch } = this.props;
this.contextMenu = new RequestListContextMenu({
cloneSelectedRequest: () => dispatch(Actions.cloneSelectedRequest()),
openStatistics: (open) => dispatch(Actions.openStatistics(open)),
});
this.tooltip = new HTMLTooltip(NetMonitorController._toolbox.doc, { type: "arrow" });
},
componentDidMount() { componentDidMount() {
// Set the CSS variables for waterfall scaling // Set the CSS variables for waterfall scaling
this.setScalingStyles(); this.setScalingStyles();
// Install event handler for displaying a tooltip // Install event handler for displaying a tooltip
this.tooltip.startTogglingOnHover(this.refs.contentEl, this.onHover, { this.props.tooltip.startTogglingOnHover(this.refs.contentEl, this.onHover, {
toggleDelay: REQUESTS_TOOLTIP_TOGGLE_DELAY, toggleDelay: REQUESTS_TOOLTIP_TOGGLE_DELAY,
interactive: true interactive: true
}); });
@ -103,7 +78,7 @@ const RequestListContent = createClass({
this.refs.contentEl.removeEventListener("scroll", this.onScroll, true); this.refs.contentEl.removeEventListener("scroll", this.onScroll, true);
// Uninstall the tooltip event handler // Uninstall the tooltip event handler
this.tooltip.stopTogglingOnHover(); this.props.tooltip.stopTogglingOnHover();
}, },
/** /**
@ -177,7 +152,7 @@ const RequestListContent = createClass({
* Scroll listener for the requests menu view. * Scroll listener for the requests menu view.
*/ */
onScroll() { onScroll() {
this.tooltip.hide(); this.props.tooltip.hide();
}, },
/** /**
@ -218,11 +193,6 @@ const RequestListContent = createClass({
} }
}, },
onContextMenu(evt) {
evt.preventDefault();
this.contextMenu.open(evt);
},
/** /**
* If selection has just changed (by keyboard navigation), don't keep the list * If selection has just changed (by keyboard navigation), don't keep the list
* scrolled to bottom, but allow scrolling up with the selection. * scrolled to bottom, but allow scrolling up with the selection.
@ -241,16 +211,15 @@ const RequestListContent = createClass({
}, },
render() { render() {
const { const { selectedRequestId,
displayedRequests, displayedRequests,
firstRequestStartedMillis, firstRequestStartedMillis,
selectedRequestId,
onItemMouseDown, onItemMouseDown,
onSecurityIconClick, onItemContextMenu,
} = this.props; onSecurityIconClick } = this.props;
return ( return div(
div({ {
ref: "contentEl", ref: "contentEl",
className: "requests-menu-contents", className: "requests-menu-contents",
tabIndex: 0, tabIndex: 0,
@ -262,36 +231,41 @@ const RequestListContent = createClass({
index, index,
isSelected: item.id === selectedRequestId, isSelected: item.id === selectedRequestId,
firstRequestStartedMillis, firstRequestStartedMillis,
onMouseDown: () => onItemMouseDown(item.id), onMouseDown: e => onItemMouseDown(e, item.id),
onContextMenu: this.onContextMenu, onContextMenu: e => onItemContextMenu(e, item.id),
onSecurityIconClick: e => onSecurityIconClick(e, item),
onFocusedNodeChange: this.onFocusedNodeChange, onFocusedNodeChange: this.onFocusedNodeChange,
onFocusedNodeUnmount: this.onFocusedNodeUnmount, onFocusedNodeUnmount: this.onFocusedNodeUnmount,
onSecurityIconClick: () => onSecurityIconClick(item.securityState),
})) }))
)
); );
}, },
}); });
module.exports = connect( module.exports = connect(
(state) => ({ state => ({
displayedRequests: getDisplayedRequests(state), displayedRequests: getDisplayedRequests(state),
firstRequestStartedMillis: state.requests.firstStartedMillis,
selectedRequestId: state.requests.selectedId, selectedRequestId: state.requests.selectedId,
scale: getWaterfallScale(state), scale: getWaterfallScale(state),
firstRequestStartedMillis: state.requests.firstStartedMillis,
tooltip: NetMonitorView.RequestsMenu.tooltip,
}), }),
(dispatch) => ({ dispatch => ({
dispatch, onItemMouseDown: (e, item) => dispatch(Actions.selectRequest(item)),
onItemMouseDown: (id) => dispatch(Actions.selectRequest(id)), onItemContextMenu: (e, item) => {
e.preventDefault();
NetMonitorView.RequestsMenu.contextMenu.open(e);
},
onSelectDelta: (delta) => dispatch(Actions.selectDelta(delta)),
/** /**
* A handler that opens the security tab in the details view if secure or * A handler that opens the security tab in the details view if secure or
* broken security indicator is clicked. * broken security indicator is clicked.
*/ */
onSecurityIconClick: (securityState) => { onSecurityIconClick: (e, item) => {
const { securityState } = item;
// Choose the security tab.
if (securityState && securityState !== "insecure") { if (securityState && securityState !== "insecure") {
dispatch(Actions.selectDetailsPanelTab("security")); dispatch(Actions.selectDetailsPanelTab("security"));
} }
}, },
onSelectDelta: (delta) => dispatch(Actions.selectDelta(delta)), })
}),
)(RequestListContent); )(RequestListContent);

4
devtools/client/netmonitor/components/request-list-empty.js
View file

@ -67,8 +67,8 @@ const RequestListEmptyNotice = createClass({
module.exports = connect( module.exports = connect(
undefined, undefined,
dispatch => ({ dispatch => ({
onPerfClick: () => dispatch(Actions.openStatistics(true)), onPerfClick: e => dispatch(Actions.openStatistics(true)),
onReloadClick: () => onReloadClick: e =>
NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT), NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT),
}) })
)(RequestListEmptyNotice); )(RequestListEmptyNotice);

129
devtools/client/netmonitor/components/request-list-item.js
View file

@ -6,17 +6,11 @@
"use strict"; "use strict";
const { const { createClass, createFactory, PropTypes, DOM } = require("devtools/client/shared/vendor/react");
createClass, const { div, span, img } = DOM;
createFactory,
DOM,
PropTypes,
} = require("devtools/client/shared/vendor/react");
const { L10N } = require("../l10n"); const { L10N } = require("../l10n");
const { getAbbreviatedMimeType } = require("../request-utils");
const { getFormattedSize } = require("../utils/format-utils"); const { getFormattedSize } = require("../utils/format-utils");
const { getAbbreviatedMimeType } = require("../request-utils");
const { div, img, span } = DOM;
/** /**
* Compare two objects on a subset of their properties * Compare two objects on a subset of their properties
@ -53,7 +47,7 @@ const UPDATED_REQ_ITEM_PROPS = [
const UPDATED_REQ_PROPS = [ const UPDATED_REQ_PROPS = [
"index", "index",
"isSelected", "isSelected",
"firstRequestStartedMillis", "firstRequestStartedMillis"
]; ];
/** /**
@ -125,8 +119,8 @@ const RequestListItem = createClass({
} }
classList.push(index % 2 ? "odd" : "even"); classList.push(index % 2 ? "odd" : "even");
return ( return div(
div({ {
ref: "el", ref: "el",
className: classList.join(" "), className: classList.join(" "),
"data-id": item.id, "data-id": item.id,
@ -142,8 +136,7 @@ const RequestListItem = createClass({
TypeColumn({ item }), TypeColumn({ item }),
TransferredSizeColumn({ item }), TransferredSizeColumn({ item }),
ContentSizeColumn({ item }), ContentSizeColumn({ item }),
WaterfallColumn({ item, firstRequestStartedMillis }), WaterfallColumn({ item, firstRequestStartedMillis })
)
); );
} }
}); });
@ -156,8 +149,6 @@ const UPDATED_STATUS_PROPS = [
]; ];
const StatusColumn = createFactory(createClass({ const StatusColumn = createFactory(createClass({
displayName: "StatusColumn",
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
return !propertiesEqual(UPDATED_STATUS_PROPS, this.props.item, nextProps.item); return !propertiesEqual(UPDATED_STATUS_PROPS, this.props.item, nextProps.item);
}, },
@ -187,28 +178,22 @@ const StatusColumn = createFactory(createClass({
} }
} }
return ( return div({ className: "requests-menu-subitem requests-menu-status", title },
div({ className: "requests-menu-subitem requests-menu-status", title },
div({ className: "requests-menu-status-icon", "data-code": code }), div({ className: "requests-menu-status-icon", "data-code": code }),
span({ className: "subitem-label requests-menu-status-code" }, status), span({ className: "subitem-label requests-menu-status-code" }, status)
)
); );
} }
})); }));
const MethodColumn = createFactory(createClass({ const MethodColumn = createFactory(createClass({
displayName: "MethodColumn",
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
return this.props.item.method !== nextProps.item.method; return this.props.item.method !== nextProps.item.method;
}, },
render() { render() {
const { method } = this.props.item; const { method } = this.props.item;
return ( return div({ className: "requests-menu-subitem requests-menu-method-box" },
div({ className: "requests-menu-subitem requests-menu-method-box" },
span({ className: "subitem-label requests-menu-method" }, method) span({ className: "subitem-label requests-menu-method" }, method)
)
); );
} }
})); }));
@ -219,8 +204,6 @@ const UPDATED_FILE_PROPS = [
]; ];
const FileColumn = createFactory(createClass({ const FileColumn = createFactory(createClass({
displayName: "FileColumn",
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
return !propertiesEqual(UPDATED_FILE_PROPS, this.props.item, nextProps.item); return !propertiesEqual(UPDATED_FILE_PROPS, this.props.item, nextProps.item);
}, },
@ -228,20 +211,19 @@ const FileColumn = createFactory(createClass({
render() { render() {
const { urlDetails, responseContentDataUri } = this.props.item; const { urlDetails, responseContentDataUri } = this.props.item;
return ( return div({ className: "requests-menu-subitem requests-menu-icon-and-file" },
div({ className: "requests-menu-subitem requests-menu-icon-and-file" },
img({ img({
className: "requests-menu-icon", className: "requests-menu-icon",
src: responseContentDataUri, src: responseContentDataUri,
hidden: !responseContentDataUri, hidden: !responseContentDataUri,
"data-type": responseContentDataUri ? "thumbnail" : undefined, "data-type": responseContentDataUri ? "thumbnail" : undefined
}), }),
div({ div(
{
className: "subitem-label requests-menu-file", className: "subitem-label requests-menu-file",
title: urlDetails.unicodeUrl, title: urlDetails.unicodeUrl
}, },
urlDetails.baseNameWithQuery, urlDetails.baseNameWithQuery
),
) )
); );
} }
@ -254,8 +236,6 @@ const UPDATED_DOMAIN_PROPS = [
]; ];
const DomainColumn = createFactory(createClass({ const DomainColumn = createFactory(createClass({
displayName: "DomainColumn",
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
return !propertiesEqual(UPDATED_DOMAIN_PROPS, this.props.item, nextProps.item); return !propertiesEqual(UPDATED_DOMAIN_PROPS, this.props.item, nextProps.item);
}, },
@ -276,22 +256,19 @@ const DomainColumn = createFactory(createClass({
let title = urlDetails.host + (remoteAddress ? ` (${remoteAddress})` : ""); let title = urlDetails.host + (remoteAddress ? ` (${remoteAddress})` : "");
return ( return div(
div({ className: "requests-menu-subitem requests-menu-security-and-domain" }, { className: "requests-menu-subitem requests-menu-security-and-domain" },
div({ div({
className: iconClassList.join(" "), className: iconClassList.join(" "),
title: iconTitle, title: iconTitle,
onClick: onSecurityIconClick, onClick: onSecurityIconClick,
}), }),
span({ className: "subitem-label requests-menu-domain", title }, urlDetails.host), span({ className: "subitem-label requests-menu-domain", title }, urlDetails.host)
)
); );
} }
})); }));
const CauseColumn = createFactory(createClass({ const CauseColumn = createFactory(createClass({
displayName: "CauseColumn",
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
return this.props.item.cause !== nextProps.item.cause; return this.props.item.cause !== nextProps.item.cause;
}, },
@ -310,17 +287,10 @@ const CauseColumn = createFactory(createClass({
causeHasStack = cause.stacktrace && cause.stacktrace.length > 0; causeHasStack = cause.stacktrace && cause.stacktrace.length > 0;
} }
return ( return div(
div({ { className: "requests-menu-subitem requests-menu-cause", title: causeUri },
className: "requests-menu-subitem requests-menu-cause", span({ className: "requests-menu-cause-stack", hidden: !causeHasStack }, "JS"),
title: causeUri, span({ className: "subitem-label" }, causeType)
},
span({
className: "requests-menu-cause-stack",
hidden: !causeHasStack,
}, "JS"),
span({ className: "subitem-label" }, causeType),
)
); );
} }
})); }));
@ -332,8 +302,6 @@ const CONTENT_MIME_TYPE_ABBREVIATIONS = {
}; };
const TypeColumn = createFactory(createClass({ const TypeColumn = createFactory(createClass({
displayName: "TypeColumn",
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
return this.props.item.mimeType !== nextProps.item.mimeType; return this.props.item.mimeType !== nextProps.item.mimeType;
}, },
@ -346,13 +314,9 @@ const TypeColumn = createFactory(createClass({
abbrevType = CONTENT_MIME_TYPE_ABBREVIATIONS[abbrevType] || abbrevType; abbrevType = CONTENT_MIME_TYPE_ABBREVIATIONS[abbrevType] || abbrevType;
} }
return ( return div(
div({ { className: "requests-menu-subitem requests-menu-type", title: mimeType },
className: "requests-menu-subitem requests-menu-type", span({ className: "subitem-label" }, abbrevType)
title: mimeType,
},
span({ className: "subitem-label" }, abbrevType),
)
); );
} }
})); }));
@ -364,8 +328,6 @@ const UPDATED_TRANSFERRED_PROPS = [
]; ];
const TransferredSizeColumn = createFactory(createClass({ const TransferredSizeColumn = createFactory(createClass({
displayName: "TransferredSizeColumn",
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
return !propertiesEqual(UPDATED_TRANSFERRED_PROPS, this.props.item, nextProps.item); return !propertiesEqual(UPDATED_TRANSFERRED_PROPS, this.props.item, nextProps.item);
}, },
@ -387,20 +349,14 @@ const TransferredSizeColumn = createFactory(createClass({
text = L10N.getStr("networkMenu.sizeUnavailable"); text = L10N.getStr("networkMenu.sizeUnavailable");
} }
return ( return div(
div({ { className: "requests-menu-subitem requests-menu-transferred", title: text },
className: "requests-menu-subitem requests-menu-transferred", span({ className }, text)
title: text,
},
span({ className }, text),
)
); );
} }
})); }));
const ContentSizeColumn = createFactory(createClass({ const ContentSizeColumn = createFactory(createClass({
displayName: "ContentSizeColumn",
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
return this.props.item.contentSize !== nextProps.item.contentSize; return this.props.item.contentSize !== nextProps.item.contentSize;
}, },
@ -413,13 +369,12 @@ const ContentSizeColumn = createFactory(createClass({
text = getFormattedSize(contentSize); text = getFormattedSize(contentSize);
} }
return ( return div(
div({ {
className: "requests-menu-subitem subitem-label requests-menu-size", className: "requests-menu-subitem subitem-label requests-menu-size",
title: text, title: text
}, },
span({ className: "subitem-label" }, text), span({ className: "subitem-label" }, text)
)
); );
} }
})); }));
@ -432,8 +387,6 @@ const UPDATED_WATERFALL_PROPS = [
]; ];
const WaterfallColumn = createFactory(createClass({ const WaterfallColumn = createFactory(createClass({
displayName: "WaterfallColumn",
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
return this.props.firstRequestStartedMillis !== nextProps.firstRequestStartedMillis || return this.props.firstRequestStartedMillis !== nextProps.firstRequestStartedMillis ||
!propertiesEqual(UPDATED_WATERFALL_PROPS, this.props.item, nextProps.item); !propertiesEqual(UPDATED_WATERFALL_PROPS, this.props.item, nextProps.item);
@ -441,17 +394,13 @@ const WaterfallColumn = createFactory(createClass({
render() { render() {
const { item, firstRequestStartedMillis } = this.props; const { item, firstRequestStartedMillis } = this.props;
const startedDeltaMillis = item.startedMillis - firstRequestStartedMillis;
const paddingInlineStart = `${startedDeltaMillis}px`;
return ( return div({ className: "requests-menu-subitem requests-menu-waterfall" },
div({ className: "requests-menu-subitem requests-menu-waterfall" }, div(
div({ { className: "requests-menu-timings", style: { paddingInlineStart } },
className: "requests-menu-timings", timingBoxes(item)
style: {
paddingInlineStart: `${item.startedMillis - firstRequestStartedMillis}px`,
},
},
timingBoxes(item),
)
) )
); );
} }

10
devtools/client/netmonitor/request-list-tooltip.js → devtools/client/netmonitor/components/request-list-tooltip.js
View file

@ -7,12 +7,10 @@
"use strict"; "use strict";
const { Task } = require("devtools/shared/task"); const { Task } = require("devtools/shared/task");
const { const { formDataURI } = require("../request-utils");
setImageTooltip, const { WEBCONSOLE_L10N } = require("../l10n");
getImageDimensions, const { setImageTooltip,
} = require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper"); getImageDimensions } = require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper");
const { WEBCONSOLE_L10N } = require("./l10n");
const { formDataURI } = require("./request-utils");
// px // px
const REQUESTS_TOOLTIP_IMAGE_MAX_DIM = 400; const REQUESTS_TOOLTIP_IMAGE_MAX_DIM = 400;

129
devtools/client/netmonitor/components/request-list.js
View file

@ -2,126 +2,33 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* eslint-env browser */
/* globals gNetwork */
"use strict"; "use strict";
const { const { createFactory, PropTypes, DOM } = require("devtools/client/shared/vendor/react");
createClass,
createFactory,
DOM,
PropTypes,
} = require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { setNamedTimeout } = require("devtools/client/shared/widgets/view-helpers");
const Actions = require("../actions/index");
const { Prefs } = require("../prefs");
const { getFormDataSections } = require("../request-utils");
const {
getActiveFilters,
getSelectedRequest,
} = require("../selectors/index");
// Components
const RequestListContent = createFactory(require("./request-list-content"));
const RequestListEmptyNotice = createFactory(require("./request-list-empty"));
const RequestListHeader = createFactory(require("./request-list-header"));
const { div } = DOM; const { div } = DOM;
const { connect } = require("devtools/client/shared/vendor/react-redux");
const RequestListHeader = createFactory(require("./request-list-header"));
const RequestListEmptyNotice = createFactory(require("./request-list-empty"));
const RequestListContent = createFactory(require("./request-list-content"));
/** /**
* Request panel component * Renders the request list - header, empty text, the actual content with rows
*/ */
const RequestList = createClass({ const RequestList = function ({ isEmpty }) {
displayName: "RequestList", return div({ className: "request-list-container" },
propTypes: {
activeFilters: PropTypes.array,
dispatch: PropTypes.func,
isEmpty: PropTypes.bool.isRequired,
request: PropTypes.object,
networkDetailsOpen: PropTypes.bool,
},
componentDidMount() {
const { dispatch } = this.props;
Prefs.filters.forEach((type) => dispatch(Actions.toggleRequestFilterType(type)));
this.splitter = document.querySelector("#network-inspector-view-splitter");
this.splitter.addEventListener("mouseup", this.resize);
window.addEventListener("resize", this.resize);
},
componentWillReceiveProps(nextProps) {
const { dispatch, request = {}, networkDetailsOpen } = this.props;
if (nextProps.request && nextProps.request !== request) {
dispatch(Actions.openNetworkDetails(true));
}
if (nextProps.networkDetailsOpen !== networkDetailsOpen) {
this.resize();
}
const {
formDataSections,
requestHeaders,
requestHeadersFromUploadStream,
requestPostData,
} = nextProps.request || {};
if (!formDataSections && requestHeaders &&
requestHeadersFromUploadStream && requestPostData) {
getFormDataSections(
requestHeaders,
requestHeadersFromUploadStream,
requestPostData,
gNetwork.getString.bind(gNetwork),
).then((newFormDataSections) => {
dispatch(Actions.updateRequest(
request.id,
{ formDataSections: newFormDataSections },
true,
));
});
}
},
componentWillUnmount() {
Prefs.filters = this.props.activeFilters;
this.splitter.removeEventListener("mouseup", this.resize);
window.removeEventListener("resize", this.resize);
},
resize() {
const { dispatch } = this.props;
// Allow requests to settle down first.
setNamedTimeout("resize-events", 50, () => {
const waterfallHeaderEl =
document.querySelector("#requests-menu-waterfall-header-box");
if (waterfallHeaderEl) {
const { width } = waterfallHeaderEl.getBoundingClientRect();
dispatch(Actions.resizeWaterfall(width));
}
});
},
render() {
return (
div({ className: "request-list-container" },
RequestListHeader(), RequestListHeader(),
this.props.isEmpty ? RequestListEmptyNotice() : RequestListContent(), isEmpty ? RequestListEmptyNotice() : RequestListContent()
)
); );
} };
});
RequestList.displayName = "RequestList";
RequestList.propTypes = {
isEmpty: PropTypes.bool.isRequired,
};
module.exports = connect( module.exports = connect(
(state) => ({ state => ({
activeFilters: getActiveFilters(state), isEmpty: state.requests.requests.isEmpty()
isEmpty: state.requests.requests.isEmpty(),
request: getSelectedRequest(state),
networkDetailsOpen: state.ui.networkDetailsOpen,
}) })
)(RequestList); )(RequestList);

2
devtools/client/netmonitor/components/toolbar.js
View file

@ -116,7 +116,7 @@ function Toolbar({
title: networkDetailsOpen ? COLLPASE_DETAILS_PANE : EXPAND_DETAILS_PANE, title: networkDetailsOpen ? COLLPASE_DETAILS_PANE : EXPAND_DETAILS_PANE,
disabled: networkDetailsToggleDisabled, disabled: networkDetailsToggleDisabled,
tabIndex: "0", tabIndex: "0",
onClick: toggleNetworkDetails, onMouseDown: toggleNetworkDetails,
}), }),
) )
) )

3
devtools/client/netmonitor/har/har-builder.js
View file

@ -30,7 +30,8 @@ const HAR_VERSION = "1.1";
* *
* The following options are supported: * The following options are supported:
* *
* - items {Array}: List of Network requests to be exported. * - items {Array}: List of Network requests to be exported. It is possible
* to use directly: NetMonitorView.RequestsMenu.items
* *
* - id {String}: ID of the exported page. * - id {String}: ID of the exported page.
* *

3
devtools/client/netmonitor/har/har-exporter.js
View file

@ -46,7 +46,8 @@ const HarExporter = {
* are also included in the HAR file (can produce significantly bigger * are also included in the HAR file (can produce significantly bigger
* amount of data). * amount of data).
* *
* - items {Array}: List of Network requests to be exported. * - items {Array}: List of Network requests to be exported. It is possible
* to use directly: NetMonitorView.RequestsMenu.items
* *
* - jsonp {Boolean}: If set to true the export format is HARP (support * - jsonp {Boolean}: If set to true the export format is HARP (support
* for JSONP syntax). * for JSONP syntax).

11
devtools/client/netmonitor/har/test/browser_net_har_copy_all_as_har.js
View file

@ -11,19 +11,16 @@ add_task(function* () {
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let RequestListContextMenu = windowRequire(
"devtools/client/netmonitor/request-list-context-menu");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
tab.linkedBrowser.reload(); tab.linkedBrowser.reload();
yield wait; yield wait;
let contextMenu = new RequestListContextMenu({}); yield RequestsMenu.contextMenu.copyAllAsHar();
yield contextMenu.copyAllAsHar();
let jsonString = SpecialPowers.getClipboardData("text/unicode"); let jsonString = SpecialPowers.getClipboardData("text/unicode");
let har = JSON.parse(jsonString); let har = JSON.parse(jsonString);

2
devtools/client/netmonitor/moz.build
View file

@ -23,8 +23,8 @@ DevToolsModules(
'panel.js', 'panel.js',
'prefs.js', 'prefs.js',
'request-list-context-menu.js', 'request-list-context-menu.js',
'request-list-tooltip.js',
'request-utils.js', 'request-utils.js',
'requests-menu-view.js',
'sort-predicates.js', 'sort-predicates.js',
'store.js', 'store.js',
'waterfall-background.js', 'waterfall-background.js',

198
devtools/client/netmonitor/netmonitor-controller.js
View file

@ -3,28 +3,28 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* eslint-disable mozilla/reject-some-requires */ /* eslint-disable mozilla/reject-some-requires */
/* globals window, NetMonitorView, gStore, gNetwork, dumpn */ /* globals window, NetMonitorView, gStore, dumpn */
"use strict"; "use strict";
const promise = require("promise"); const promise = require("promise");
const Services = require("Services"); const Services = require("Services");
const {XPCOMUtils} = require("resource://gre/modules/XPCOMUtils.jsm");
const EventEmitter = require("devtools/shared/event-emitter"); const EventEmitter = require("devtools/shared/event-emitter");
const { TimelineFront } = require("devtools/shared/fronts/timeline"); const Editor = require("devtools/client/sourceeditor/editor");
const { CurlUtils } = require("devtools/client/shared/curl"); const {TimelineFront} = require("devtools/shared/fronts/timeline");
const { Task } = require("devtools/shared/task"); const {Task} = require("devtools/shared/task");
const { ACTIVITY_TYPE } = require("./constants"); const { ACTIVITY_TYPE } = require("./constants");
const { EVENTS } = require("./events"); const { EVENTS } = require("./events");
const { configureStore } = require("./store"); const { configureStore } = require("./store");
const Actions = require("./actions/index"); const Actions = require("./actions/index");
const { const { getDisplayedRequestById } = require("./selectors/index");
fetchHeaders, const { Prefs } = require("./prefs");
formDataURI,
} = require("./request-utils"); XPCOMUtils.defineConstant(window, "EVENTS", EVENTS);
const { XPCOMUtils.defineConstant(window, "ACTIVITY_TYPE", ACTIVITY_TYPE);
getRequestById, XPCOMUtils.defineConstant(window, "Editor", Editor);
getDisplayedRequestById, XPCOMUtils.defineConstant(window, "Prefs", Prefs);
} = require("./selectors/index");
// Initialize the global Redux store // Initialize the global Redux store
window.gStore = configureStore(); window.gStore = configureStore();
@ -418,8 +418,7 @@ TargetEventsHandler.prototype = {
case "will-navigate": { case "will-navigate": {
// Reset UI. // Reset UI.
if (!Services.prefs.getBoolPref("devtools.webconsole.persistlog")) { if (!Services.prefs.getBoolPref("devtools.webconsole.persistlog")) {
gStore.dispatch(Actions.batchReset()); NetMonitorView.RequestsMenu.reset();
gStore.dispatch(Actions.clearRequests());
} else { } else {
// If the log is persistent, just clear all accumulated timing markers. // If the log is persistent, just clear all accumulated timing markers.
gStore.dispatch(Actions.clearTimingMarkers()); gStore.dispatch(Actions.clearTimingMarkers());
@ -447,8 +446,6 @@ TargetEventsHandler.prototype = {
* Functions handling target network events. * Functions handling target network events.
*/ */
function NetworkEventsHandler() { function NetworkEventsHandler() {
this.addRequest = this.addRequest.bind(this);
this.updateRequest = this.updateRequest.bind(this);
this._onNetworkEvent = this._onNetworkEvent.bind(this); this._onNetworkEvent = this._onNetworkEvent.bind(this);
this._onNetworkEventUpdate = this._onNetworkEventUpdate.bind(this); this._onNetworkEventUpdate = this._onNetworkEventUpdate.bind(this);
this._onDocLoadingMarker = this._onDocLoadingMarker.bind(this); this._onDocLoadingMarker = this._onDocLoadingMarker.bind(this);
@ -458,7 +455,6 @@ function NetworkEventsHandler() {
this._onResponseHeaders = this._onResponseHeaders.bind(this); this._onResponseHeaders = this._onResponseHeaders.bind(this);
this._onResponseCookies = this._onResponseCookies.bind(this); this._onResponseCookies = this._onResponseCookies.bind(this);
this._onResponseContent = this._onResponseContent.bind(this); this._onResponseContent = this._onResponseContent.bind(this);
this._onSecurityInfo = this._onSecurityInfo.bind(this);
this._onEventTimings = this._onEventTimings.bind(this); this._onEventTimings = this._onEventTimings.bind(this);
} }
@ -552,153 +548,12 @@ NetworkEventsHandler.prototype = {
fromServiceWorker fromServiceWorker
} = networkInfo; } = networkInfo;
this.addRequest( NetMonitorView.RequestsMenu.addRequest(
actor, {startedDateTime, method, url, isXHR, cause, fromCache, fromServiceWorker} actor, {startedDateTime, method, url, isXHR, cause, fromCache, fromServiceWorker}
); );
window.emit(EVENTS.NETWORK_EVENT, actor); window.emit(EVENTS.NETWORK_EVENT, actor);
}, },
addRequest(id, data) {
let { method, url, isXHR, cause, startedDateTime, fromCache,
fromServiceWorker } = data;
gStore.dispatch(Actions.addRequest(
id,
{
// Convert the received date/time string to a unix timestamp.
startedMillis: Date.parse(startedDateTime),
method,
url,
isXHR,
cause,
fromCache,
fromServiceWorker,
},
true
))
.then(() => window.emit(EVENTS.REQUEST_ADDED, id));
},
updateRequest: Task.async(function* (id, data) {
const action = Actions.updateRequest(id, data, true);
yield gStore.dispatch(action);
let {
responseContent,
responseCookies,
responseHeaders,
requestCookies,
requestHeaders,
requestPostData,
} = action.data;
let request = getRequestById(gStore.getState(), action.id);
if (requestHeaders && requestHeaders.headers && requestHeaders.headers.length) {
let headers = yield fetchHeaders(
requestHeaders, gNetwork.getString.bind(gNetwork));
if (headers) {
yield gStore.dispatch(Actions.updateRequest(
action.id,
{ requestHeaders: headers },
true,
));
}
}
if (responseHeaders && responseHeaders.headers && responseHeaders.headers.length) {
let headers = yield fetchHeaders(
responseHeaders, gNetwork.getString.bind(gNetwork));
if (headers) {
yield gStore.dispatch(Actions.updateRequest(
action.id,
{ responseHeaders: headers },
true,
));
}
}
if (request && responseContent && responseContent.content) {
let { mimeType } = request;
let { text, encoding } = responseContent.content;
let response = yield gNetwork.getString(text);
let payload = {};
if (mimeType.includes("image/")) {
payload.responseContentDataUri = formDataURI(mimeType, encoding, response);
}
responseContent.content.text = response;
payload.responseContent = responseContent;
yield gStore.dispatch(Actions.updateRequest(action.id, payload, true));
if (mimeType.includes("image/")) {
window.emit(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED);
}
}
// Search the POST data upload stream for request headers and add
// them as a separate property, different from the classic headers.
if (requestPostData && requestPostData.postData) {
let { text } = requestPostData.postData;
let postData = yield gNetwork.getString(text);
const headers = CurlUtils.getHeadersFromMultipartText(postData);
const headersSize = headers.reduce((acc, { name, value }) => {
return acc + name.length + value.length + 2;
}, 0);
let payload = {};
requestPostData.postData.text = postData;
payload.requestPostData = Object.assign({}, requestPostData);
payload.requestHeadersFromUploadStream = { headers, headersSize };
yield gStore.dispatch(Actions.updateRequest(action.id, payload, true));
}
// Fetch request and response cookies long value.
// Actor does not provide full sized cookie value when the value is too long
// To display values correctly, we need fetch them in each request.
if (requestCookies) {
let reqCookies = [];
// request store cookies in requestCookies or requestCookies.cookies
let cookies = requestCookies.cookies ?
requestCookies.cookies : requestCookies;
// make sure cookies is iterable
if (typeof cookies[Symbol.iterator] === "function") {
for (let cookie of cookies) {
reqCookies.push(Object.assign({}, cookie, {
value: yield gNetwork.getString(cookie.value),
}));
}
if (reqCookies.length) {
yield gStore.dispatch(Actions.updateRequest(
action.id,
{ requestCookies: reqCookies },
true));
}
}
}
if (responseCookies) {
let resCookies = [];
// response store cookies in responseCookies or responseCookies.cookies
let cookies = responseCookies.cookies ?
responseCookies.cookies : responseCookies;
// make sure cookies is iterable
if (typeof cookies[Symbol.iterator] === "function") {
for (let cookie of cookies) {
resCookies.push(Object.assign({}, cookie, {
value: yield gNetwork.getString(cookie.value),
}));
}
if (resCookies.length) {
yield gStore.dispatch(Actions.updateRequest(
action.id,
{ responseCookies: resCookies },
true));
}
}
}
}),
/** /**
* The "networkEventUpdate" message type handler. * The "networkEventUpdate" message type handler.
* *
@ -711,6 +566,7 @@ NetworkEventsHandler.prototype = {
*/ */
_onNetworkEventUpdate: function (type, { packet, networkInfo }) { _onNetworkEventUpdate: function (type, { packet, networkInfo }) {
let { actor } = networkInfo; let { actor } = networkInfo;
switch (packet.updateType) { switch (packet.updateType) {
case "requestHeaders": case "requestHeaders":
this.webConsoleClient.getRequestHeaders(actor, this._onRequestHeaders); this.webConsoleClient.getRequestHeaders(actor, this._onRequestHeaders);
@ -726,7 +582,7 @@ NetworkEventsHandler.prototype = {
window.emit(EVENTS.UPDATING_REQUEST_POST_DATA, actor); window.emit(EVENTS.UPDATING_REQUEST_POST_DATA, actor);
break; break;
case "securityInfo": case "securityInfo":
this.updateRequest(actor, { NetMonitorView.RequestsMenu.updateRequest(actor, {
securityState: networkInfo.securityInfo, securityState: networkInfo.securityInfo,
}); });
this.webConsoleClient.getSecurityInfo(actor, this._onSecurityInfo); this.webConsoleClient.getSecurityInfo(actor, this._onSecurityInfo);
@ -743,7 +599,7 @@ NetworkEventsHandler.prototype = {
window.emit(EVENTS.UPDATING_RESPONSE_COOKIES, actor); window.emit(EVENTS.UPDATING_RESPONSE_COOKIES, actor);
break; break;
case "responseStart": case "responseStart":
this.updateRequest(actor, { NetMonitorView.RequestsMenu.updateRequest(actor, {
httpVersion: networkInfo.response.httpVersion, httpVersion: networkInfo.response.httpVersion,
remoteAddress: networkInfo.response.remoteAddress, remoteAddress: networkInfo.response.remoteAddress,
remotePort: networkInfo.response.remotePort, remotePort: networkInfo.response.remotePort,
@ -754,7 +610,7 @@ NetworkEventsHandler.prototype = {
window.emit(EVENTS.STARTED_RECEIVING_RESPONSE, actor); window.emit(EVENTS.STARTED_RECEIVING_RESPONSE, actor);
break; break;
case "responseContent": case "responseContent":
this.updateRequest(actor, { NetMonitorView.RequestsMenu.updateRequest(actor, {
contentSize: networkInfo.response.bodySize, contentSize: networkInfo.response.bodySize,
transferredSize: networkInfo.response.transferredSize, transferredSize: networkInfo.response.transferredSize,
mimeType: networkInfo.response.content.mimeType mimeType: networkInfo.response.content.mimeType
@ -764,7 +620,7 @@ NetworkEventsHandler.prototype = {
window.emit(EVENTS.UPDATING_RESPONSE_CONTENT, actor); window.emit(EVENTS.UPDATING_RESPONSE_CONTENT, actor);
break; break;
case "eventTimings": case "eventTimings":
this.updateRequest(actor, { NetMonitorView.RequestsMenu.updateRequest(actor, {
totalTime: networkInfo.totalTime totalTime: networkInfo.totalTime
}); });
this.webConsoleClient.getEventTimings(actor, this._onEventTimings); this.webConsoleClient.getEventTimings(actor, this._onEventTimings);
@ -780,7 +636,7 @@ NetworkEventsHandler.prototype = {
* The message received from the server. * The message received from the server.
*/ */
_onRequestHeaders: function (response) { _onRequestHeaders: function (response) {
this.updateRequest(response.from, { NetMonitorView.RequestsMenu.updateRequest(response.from, {
requestHeaders: response requestHeaders: response
}).then(() => { }).then(() => {
window.emit(EVENTS.RECEIVED_REQUEST_HEADERS, response.from); window.emit(EVENTS.RECEIVED_REQUEST_HEADERS, response.from);
@ -794,7 +650,7 @@ NetworkEventsHandler.prototype = {
* The message received from the server. * The message received from the server.
*/ */
_onRequestCookies: function (response) { _onRequestCookies: function (response) {
this.updateRequest(response.from, { NetMonitorView.RequestsMenu.updateRequest(response.from, {
requestCookies: response requestCookies: response
}).then(() => { }).then(() => {
window.emit(EVENTS.RECEIVED_REQUEST_COOKIES, response.from); window.emit(EVENTS.RECEIVED_REQUEST_COOKIES, response.from);
@ -808,7 +664,7 @@ NetworkEventsHandler.prototype = {
* The message received from the server. * The message received from the server.
*/ */
_onRequestPostData: function (response) { _onRequestPostData: function (response) {
this.updateRequest(response.from, { NetMonitorView.RequestsMenu.updateRequest(response.from, {
requestPostData: response requestPostData: response
}).then(() => { }).then(() => {
window.emit(EVENTS.RECEIVED_REQUEST_POST_DATA, response.from); window.emit(EVENTS.RECEIVED_REQUEST_POST_DATA, response.from);
@ -822,7 +678,7 @@ NetworkEventsHandler.prototype = {
* The message received from the server. * The message received from the server.
*/ */
_onSecurityInfo: function (response) { _onSecurityInfo: function (response) {
this.updateRequest(response.from, { NetMonitorView.RequestsMenu.updateRequest(response.from, {
securityInfo: response.securityInfo securityInfo: response.securityInfo
}).then(() => { }).then(() => {
window.emit(EVENTS.RECEIVED_SECURITY_INFO, response.from); window.emit(EVENTS.RECEIVED_SECURITY_INFO, response.from);
@ -836,7 +692,7 @@ NetworkEventsHandler.prototype = {
* The message received from the server. * The message received from the server.
*/ */
_onResponseHeaders: function (response) { _onResponseHeaders: function (response) {
this.updateRequest(response.from, { NetMonitorView.RequestsMenu.updateRequest(response.from, {
responseHeaders: response responseHeaders: response
}).then(() => { }).then(() => {
window.emit(EVENTS.RECEIVED_RESPONSE_HEADERS, response.from); window.emit(EVENTS.RECEIVED_RESPONSE_HEADERS, response.from);
@ -850,7 +706,7 @@ NetworkEventsHandler.prototype = {
* The message received from the server. * The message received from the server.
*/ */
_onResponseCookies: function (response) { _onResponseCookies: function (response) {
this.updateRequest(response.from, { NetMonitorView.RequestsMenu.updateRequest(response.from, {
responseCookies: response responseCookies: response
}).then(() => { }).then(() => {
window.emit(EVENTS.RECEIVED_RESPONSE_COOKIES, response.from); window.emit(EVENTS.RECEIVED_RESPONSE_COOKIES, response.from);
@ -864,7 +720,7 @@ NetworkEventsHandler.prototype = {
* The message received from the server. * The message received from the server.
*/ */
_onResponseContent: function (response) { _onResponseContent: function (response) {
this.updateRequest(response.from, { NetMonitorView.RequestsMenu.updateRequest(response.from, {
responseContent: response responseContent: response
}).then(() => { }).then(() => {
window.emit(EVENTS.RECEIVED_RESPONSE_CONTENT, response.from); window.emit(EVENTS.RECEIVED_RESPONSE_CONTENT, response.from);
@ -878,7 +734,7 @@ NetworkEventsHandler.prototype = {
* The message received from the server. * The message received from the server.
*/ */
_onEventTimings: function (response) { _onEventTimings: function (response) {
this.updateRequest(response.from, { NetMonitorView.RequestsMenu.updateRequest(response.from, {
eventTimings: response eventTimings: response
}).then(() => { }).then(() => {
window.emit(EVENTS.RECEIVED_EVENT_TIMINGS, response.from); window.emit(EVENTS.RECEIVED_EVENT_TIMINGS, response.from);

39
devtools/client/netmonitor/netmonitor-view.js
View file

@ -2,11 +2,12 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* eslint-env browser */ /* eslint-disable mozilla/reject-some-requires */
/* globals gStore, NetMonitorController */ /* globals $, gStore, NetMonitorController */
"use strict"; "use strict";
const { RequestsMenuView } = require("./requests-menu-view");
const { ACTIVITY_TYPE } = require("./constants"); const { ACTIVITY_TYPE } = require("./constants");
const { createFactory } = require("devtools/client/shared/vendor/react"); const { createFactory } = require("devtools/client/shared/vendor/react");
const ReactDOM = require("devtools/client/shared/vendor/react-dom"); const ReactDOM = require("devtools/client/shared/vendor/react-dom");
@ -14,45 +15,42 @@ const Provider = createFactory(require("devtools/client/shared/vendor/react-redu
// Components // Components
const NetworkDetailsPanel = createFactory(require("./shared/components/network-details-panel")); const NetworkDetailsPanel = createFactory(require("./shared/components/network-details-panel"));
const RequestList = createFactory(require("./components/request-list"));
const StatisticsPanel = createFactory(require("./components/statistics-panel")); const StatisticsPanel = createFactory(require("./components/statistics-panel"));
const Toolbar = createFactory(require("./components/toolbar")); const Toolbar = createFactory(require("./components/toolbar"));
/** /**
* Object defining the network monitor view components. * Object defining the network monitor view components.
*/ */
exports.NetMonitorView = { var NetMonitorView = {
/** /**
* Initializes the network monitor view. * Initializes the network monitor view.
*/ */
initialize: function () { initialize: function () {
this._body = document.querySelector("#body"); this._body = $("#body");
this.networkDetailsPanel = $("#react-network-details-panel-hook");
this.networkDetailsPanel = document.querySelector(
"#react-network-details-panel-hook");
ReactDOM.render(Provider( ReactDOM.render(Provider(
{ store: gStore }, { store: gStore },
NetworkDetailsPanel({ toolbox: NetMonitorController._toolbox }), NetworkDetailsPanel({ toolbox: NetMonitorController._toolbox }),
), this.networkDetailsPanel); ), this.networkDetailsPanel);
this.requestList = document.querySelector("#react-request-list-hook"); this.statisticsPanel = $("#react-statistics-panel-hook");
ReactDOM.render(Provider(
{ store: gStore },
RequestList({ toolbox: NetMonitorController._toolbox })
), this.requestList);
this.statisticsPanel = document.querySelector("#react-statistics-panel-hook");
ReactDOM.render(Provider( ReactDOM.render(Provider(
{ store: gStore }, { store: gStore },
StatisticsPanel(), StatisticsPanel(),
), this.statisticsPanel); ), this.statisticsPanel);
this.toolbar = document.querySelector("#react-toolbar-hook"); this.toolbar = $("#react-toolbar-hook");
ReactDOM.render(Provider( ReactDOM.render(Provider(
{ store: gStore }, { store: gStore },
Toolbar(), Toolbar(),
), this.toolbar); ), this.toolbar);
this.RequestsMenu.initialize(gStore);
// Store watcher here is for observing the statisticsOpen state change. // Store watcher here is for observing the statisticsOpen state change.
// It should be removed once we migrate to react and apply react/redex binding. // It should be removed once we migrate to react and apply react/redex binding.
this.unsubscribeStore = gStore.subscribe(storeWatcher( this.unsubscribeStore = gStore.subscribe(storeWatcher(
@ -66,8 +64,8 @@ exports.NetMonitorView = {
* Destroys the network monitor view. * Destroys the network monitor view.
*/ */
destroy: function () { destroy: function () {
this.RequestsMenu.destroy();
ReactDOM.unmountComponentAtNode(this.networkDetailsPanel); ReactDOM.unmountComponentAtNode(this.networkDetailsPanel);
ReactDOM.unmountComponentAtNode(this.requestList);
ReactDOM.unmountComponentAtNode(this.statisticsPanel); ReactDOM.unmountComponentAtNode(this.statisticsPanel);
ReactDOM.unmountComponentAtNode(this.toolbar); ReactDOM.unmountComponentAtNode(this.toolbar);
this.unsubscribeStore(); this.unsubscribeStore();
@ -75,10 +73,10 @@ exports.NetMonitorView = {
toggleFrontendMode: function () { toggleFrontendMode: function () {
if (gStore.getState().ui.statisticsOpen) { if (gStore.getState().ui.statisticsOpen) {
this._body.selectedPanel = document.querySelector("#react-statistics-panel-hook"); this._body.selectedPanel = $("#react-statistics-panel-hook");
NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED); NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
} else { } else {
this._body.selectedPanel = document.querySelector("#inspector-panel"); this._body.selectedPanel = $("#inspector-panel");
} }
}, },
}; };
@ -95,3 +93,10 @@ function storeWatcher(initialValue, reduceValue, onChange) {
} }
}; };
} }
/**
* Preliminary setup for the NetMonitorView object.
*/
NetMonitorView.RequestsMenu = new RequestsMenuView();
exports.NetMonitorView = NetMonitorView;

2
devtools/client/netmonitor/netmonitor.xul
View file

@ -26,7 +26,7 @@
class="devtools-responsive-container" class="devtools-responsive-container"
flex="1"> flex="1">
<html:div xmlns="http://www.w3.org/1999/xhtml" <html:div xmlns="http://www.w3.org/1999/xhtml"
id="react-request-list-hook" id="network-table"
class="devtools-main-content"> class="devtools-main-content">
</html:div> </html:div>

98
devtools/client/netmonitor/request-list-context-menu.js
View file

@ -2,7 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* globals NetMonitorController, gNetwork, gStore */ /* globals NetMonitorController, NetMonitorView, gNetwork */
"use strict"; "use strict";
@ -19,10 +19,7 @@ const {
getUrlQuery, getUrlQuery,
parseQueryString, parseQueryString,
} = require("./request-utils"); } = require("./request-utils");
const { const Actions = require("./actions/index");
getSelectedRequest,
getSortedRequests,
} = require("./selectors/index");
loader.lazyRequireGetter(this, "HarExporter", loader.lazyRequireGetter(this, "HarExporter",
"devtools/client/netmonitor/har/har-exporter", true); "devtools/client/netmonitor/har/har-exporter", true);
@ -30,21 +27,22 @@ loader.lazyRequireGetter(this, "HarExporter",
loader.lazyServiceGetter(this, "clipboardHelper", loader.lazyServiceGetter(this, "clipboardHelper",
"@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper"); "@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper");
function RequestListContextMenu({ function RequestListContextMenu() {}
cloneSelectedRequest,
openStatistics,
}) {
this.cloneSelectedRequest = cloneSelectedRequest;
this.openStatistics = openStatistics;
}
RequestListContextMenu.prototype = { RequestListContextMenu.prototype = {
get selectedRequest() { get selectedItem() {
return getSelectedRequest(gStore.getState()); return NetMonitorView.RequestsMenu.selectedItem;
}, },
get sortedRequests() { get items() {
return getSortedRequests(gStore.getState()); return NetMonitorView.RequestsMenu.items;
},
/**
* Initialization function, called when the RequestsMenu is initialized.
*/
initialize: function (store) {
this.store = store;
}, },
/** /**
@ -53,14 +51,14 @@ RequestListContextMenu.prototype = {
* return undefined, we use !! to force convert any object to boolean * return undefined, we use !! to force convert any object to boolean
*/ */
open({ screenX = 0, screenY = 0 } = {}) { open({ screenX = 0, screenY = 0 } = {}) {
let selectedRequest = this.selectedRequest; let selectedItem = this.selectedItem;
let menu = new Menu(); let menu = new Menu();
menu.append(new MenuItem({ menu.append(new MenuItem({
id: "request-menu-context-copy-url", id: "request-menu-context-copy-url",
label: L10N.getStr("netmonitor.context.copyUrl"), label: L10N.getStr("netmonitor.context.copyUrl"),
accesskey: L10N.getStr("netmonitor.context.copyUrl.accesskey"), accesskey: L10N.getStr("netmonitor.context.copyUrl.accesskey"),
visible: !!selectedRequest, visible: !!selectedItem,
click: () => this.copyUrl(), click: () => this.copyUrl(),
})); }));
@ -68,7 +66,7 @@ RequestListContextMenu.prototype = {
id: "request-menu-context-copy-url-params", id: "request-menu-context-copy-url-params",
label: L10N.getStr("netmonitor.context.copyUrlParams"), label: L10N.getStr("netmonitor.context.copyUrlParams"),
accesskey: L10N.getStr("netmonitor.context.copyUrlParams.accesskey"), accesskey: L10N.getStr("netmonitor.context.copyUrlParams.accesskey"),
visible: !!(selectedRequest && getUrlQuery(selectedRequest.url)), visible: !!(selectedItem && getUrlQuery(selectedItem.url)),
click: () => this.copyUrlParams(), click: () => this.copyUrlParams(),
})); }));
@ -76,7 +74,7 @@ RequestListContextMenu.prototype = {
id: "request-menu-context-copy-post-data", id: "request-menu-context-copy-post-data",
label: L10N.getStr("netmonitor.context.copyPostData"), label: L10N.getStr("netmonitor.context.copyPostData"),
accesskey: L10N.getStr("netmonitor.context.copyPostData.accesskey"), accesskey: L10N.getStr("netmonitor.context.copyPostData.accesskey"),
visible: !!(selectedRequest && selectedRequest.requestPostData), visible: !!(selectedItem && selectedItem.requestPostData),
click: () => this.copyPostData(), click: () => this.copyPostData(),
})); }));
@ -84,20 +82,20 @@ RequestListContextMenu.prototype = {
id: "request-menu-context-copy-as-curl", id: "request-menu-context-copy-as-curl",
label: L10N.getStr("netmonitor.context.copyAsCurl"), label: L10N.getStr("netmonitor.context.copyAsCurl"),
accesskey: L10N.getStr("netmonitor.context.copyAsCurl.accesskey"), accesskey: L10N.getStr("netmonitor.context.copyAsCurl.accesskey"),
visible: !!selectedRequest, visible: !!selectedItem,
click: () => this.copyAsCurl(), click: () => this.copyAsCurl(),
})); }));
menu.append(new MenuItem({ menu.append(new MenuItem({
type: "separator", type: "separator",
visible: !!selectedRequest, visible: !!selectedItem,
})); }));
menu.append(new MenuItem({ menu.append(new MenuItem({
id: "request-menu-context-copy-request-headers", id: "request-menu-context-copy-request-headers",
label: L10N.getStr("netmonitor.context.copyRequestHeaders"), label: L10N.getStr("netmonitor.context.copyRequestHeaders"),
accesskey: L10N.getStr("netmonitor.context.copyRequestHeaders.accesskey"), accesskey: L10N.getStr("netmonitor.context.copyRequestHeaders.accesskey"),
visible: !!(selectedRequest && selectedRequest.requestHeaders), visible: !!(selectedItem && selectedItem.requestHeaders),
click: () => this.copyRequestHeaders(), click: () => this.copyRequestHeaders(),
})); }));
@ -105,7 +103,7 @@ RequestListContextMenu.prototype = {
id: "response-menu-context-copy-response-headers", id: "response-menu-context-copy-response-headers",
label: L10N.getStr("netmonitor.context.copyResponseHeaders"), label: L10N.getStr("netmonitor.context.copyResponseHeaders"),
accesskey: L10N.getStr("netmonitor.context.copyResponseHeaders.accesskey"), accesskey: L10N.getStr("netmonitor.context.copyResponseHeaders.accesskey"),
visible: !!(selectedRequest && selectedRequest.responseHeaders), visible: !!(selectedItem && selectedItem.responseHeaders),
click: () => this.copyResponseHeaders(), click: () => this.copyResponseHeaders(),
})); }));
@ -113,10 +111,10 @@ RequestListContextMenu.prototype = {
id: "request-menu-context-copy-response", id: "request-menu-context-copy-response",
label: L10N.getStr("netmonitor.context.copyResponse"), label: L10N.getStr("netmonitor.context.copyResponse"),
accesskey: L10N.getStr("netmonitor.context.copyResponse.accesskey"), accesskey: L10N.getStr("netmonitor.context.copyResponse.accesskey"),
visible: !!(selectedRequest && visible: !!(selectedItem &&
selectedRequest.responseContent && selectedItem.responseContent &&
selectedRequest.responseContent.content.text && selectedItem.responseContent.content.text &&
selectedRequest.responseContent.content.text.length !== 0), selectedItem.responseContent.content.text.length !== 0),
click: () => this.copyResponse(), click: () => this.copyResponse(),
})); }));
@ -124,22 +122,22 @@ RequestListContextMenu.prototype = {
id: "request-menu-context-copy-image-as-data-uri", id: "request-menu-context-copy-image-as-data-uri",
label: L10N.getStr("netmonitor.context.copyImageAsDataUri"), label: L10N.getStr("netmonitor.context.copyImageAsDataUri"),
accesskey: L10N.getStr("netmonitor.context.copyImageAsDataUri.accesskey"), accesskey: L10N.getStr("netmonitor.context.copyImageAsDataUri.accesskey"),
visible: !!(selectedRequest && visible: !!(selectedItem &&
selectedRequest.responseContent && selectedItem.responseContent &&
selectedRequest.responseContent.content.mimeType.includes("image/")), selectedItem.responseContent.content.mimeType.includes("image/")),
click: () => this.copyImageAsDataUri(), click: () => this.copyImageAsDataUri(),
})); }));
menu.append(new MenuItem({ menu.append(new MenuItem({
type: "separator", type: "separator",
visible: !!selectedRequest, visible: !!selectedItem,
})); }));
menu.append(new MenuItem({ menu.append(new MenuItem({
id: "request-menu-context-copy-all-as-har", id: "request-menu-context-copy-all-as-har",
label: L10N.getStr("netmonitor.context.copyAllAsHar"), label: L10N.getStr("netmonitor.context.copyAllAsHar"),
accesskey: L10N.getStr("netmonitor.context.copyAllAsHar.accesskey"), accesskey: L10N.getStr("netmonitor.context.copyAllAsHar.accesskey"),
visible: this.sortedRequests.size > 0, visible: this.items.size > 0,
click: () => this.copyAllAsHar(), click: () => this.copyAllAsHar(),
})); }));
@ -147,13 +145,13 @@ RequestListContextMenu.prototype = {
id: "request-menu-context-save-all-as-har", id: "request-menu-context-save-all-as-har",
label: L10N.getStr("netmonitor.context.saveAllAsHar"), label: L10N.getStr("netmonitor.context.saveAllAsHar"),
accesskey: L10N.getStr("netmonitor.context.saveAllAsHar.accesskey"), accesskey: L10N.getStr("netmonitor.context.saveAllAsHar.accesskey"),
visible: this.sortedRequests.size > 0, visible: this.items.size > 0,
click: () => this.saveAllAsHar(), click: () => this.saveAllAsHar(),
})); }));
menu.append(new MenuItem({ menu.append(new MenuItem({
type: "separator", type: "separator",
visible: !!selectedRequest, visible: !!selectedItem,
})); }));
menu.append(new MenuItem({ menu.append(new MenuItem({
@ -161,20 +159,20 @@ RequestListContextMenu.prototype = {
label: L10N.getStr("netmonitor.context.editAndResend"), label: L10N.getStr("netmonitor.context.editAndResend"),
accesskey: L10N.getStr("netmonitor.context.editAndResend.accesskey"), accesskey: L10N.getStr("netmonitor.context.editAndResend.accesskey"),
visible: !!(NetMonitorController.supportsCustomRequest && visible: !!(NetMonitorController.supportsCustomRequest &&
selectedRequest && !selectedRequest.isCustom), selectedItem && !selectedItem.isCustom),
click: this.cloneSelectedRequest, click: () => NetMonitorView.RequestsMenu.cloneSelectedRequest(),
})); }));
menu.append(new MenuItem({ menu.append(new MenuItem({
type: "separator", type: "separator",
visible: !!selectedRequest, visible: !!selectedItem,
})); }));
menu.append(new MenuItem({ menu.append(new MenuItem({
id: "request-menu-context-newtab", id: "request-menu-context-newtab",
label: L10N.getStr("netmonitor.context.newTab"), label: L10N.getStr("netmonitor.context.newTab"),
accesskey: L10N.getStr("netmonitor.context.newTab.accesskey"), accesskey: L10N.getStr("netmonitor.context.newTab.accesskey"),
visible: !!selectedRequest, visible: !!selectedItem,
click: () => this.openRequestInTab() click: () => this.openRequestInTab()
})); }));
@ -183,7 +181,7 @@ RequestListContextMenu.prototype = {
label: L10N.getStr("netmonitor.context.perfTools"), label: L10N.getStr("netmonitor.context.perfTools"),
accesskey: L10N.getStr("netmonitor.context.perfTools.accesskey"), accesskey: L10N.getStr("netmonitor.context.perfTools.accesskey"),
visible: !!NetMonitorController.supportsPerfStats, visible: !!NetMonitorController.supportsPerfStats,
click: () => this.openStatistics(true) click: () => this.store.dispatch(Actions.openStatistics(true))
})); }));
menu.popup(screenX, screenY, NetMonitorController._toolbox); menu.popup(screenX, screenY, NetMonitorController._toolbox);
@ -195,14 +193,14 @@ RequestListContextMenu.prototype = {
*/ */
openRequestInTab() { openRequestInTab() {
let win = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType); let win = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
win.openUILinkIn(this.selectedRequest.url, "tab", { relatedToCurrent: true }); win.openUILinkIn(this.selectedItem.url, "tab", { relatedToCurrent: true });
}, },
/** /**
* Copy the request url from the currently selected item. * Copy the request url from the currently selected item.
*/ */
copyUrl() { copyUrl() {
clipboardHelper.copyString(this.selectedRequest.url); clipboardHelper.copyString(this.selectedItem.url);
}, },
/** /**
@ -210,7 +208,7 @@ RequestListContextMenu.prototype = {
* selected item. * selected item.
*/ */
copyUrlParams() { copyUrlParams() {
let { url } = this.selectedRequest; let { url } = this.selectedItem;
let params = getUrlQuery(url).split("&"); let params = getUrlQuery(url).split("&");
let string = params.join(Services.appinfo.OS === "WINNT" ? "\r\n" : "\n"); let string = params.join(Services.appinfo.OS === "WINNT" ? "\r\n" : "\n");
clipboardHelper.copyString(string); clipboardHelper.copyString(string);
@ -221,7 +219,7 @@ RequestListContextMenu.prototype = {
* the currently selected item. * the currently selected item.
*/ */
copyPostData: Task.async(function* () { copyPostData: Task.async(function* () {
let selected = this.selectedRequest; let selected = this.selectedItem;
// Try to extract any form data parameters. // Try to extract any form data parameters.
let formDataSections = yield getFormDataSections( let formDataSections = yield getFormDataSections(
@ -258,7 +256,7 @@ RequestListContextMenu.prototype = {
* Copy a cURL command from the currently selected item. * Copy a cURL command from the currently selected item.
*/ */
copyAsCurl: Task.async(function* () { copyAsCurl: Task.async(function* () {
let selected = this.selectedRequest; let selected = this.selectedItem;
// Create a sanitized object for the Curl command generator. // Create a sanitized object for the Curl command generator.
let data = { let data = {
@ -288,7 +286,7 @@ RequestListContextMenu.prototype = {
* Copy the raw request headers from the currently selected item. * Copy the raw request headers from the currently selected item.
*/ */
copyRequestHeaders() { copyRequestHeaders() {
let rawHeaders = this.selectedRequest.requestHeaders.rawHeaders.trim(); let rawHeaders = this.selectedItem.requestHeaders.rawHeaders.trim();
if (Services.appinfo.OS !== "WINNT") { if (Services.appinfo.OS !== "WINNT") {
rawHeaders = rawHeaders.replace(/\r/g, ""); rawHeaders = rawHeaders.replace(/\r/g, "");
} }
@ -299,7 +297,7 @@ RequestListContextMenu.prototype = {
* Copy the raw response headers from the currently selected item. * Copy the raw response headers from the currently selected item.
*/ */
copyResponseHeaders() { copyResponseHeaders() {
let rawHeaders = this.selectedRequest.responseHeaders.rawHeaders.trim(); let rawHeaders = this.selectedItem.responseHeaders.rawHeaders.trim();
if (Services.appinfo.OS !== "WINNT") { if (Services.appinfo.OS !== "WINNT") {
rawHeaders = rawHeaders.replace(/\r/g, ""); rawHeaders = rawHeaders.replace(/\r/g, "");
} }
@ -310,7 +308,7 @@ RequestListContextMenu.prototype = {
* Copy image as data uri. * Copy image as data uri.
*/ */
copyImageAsDataUri() { copyImageAsDataUri() {
const { mimeType, text, encoding } = this.selectedRequest.responseContent.content; const { mimeType, text, encoding } = this.selectedItem.responseContent.content;
gNetwork.getString(text).then(string => { gNetwork.getString(text).then(string => {
let data = formDataURI(mimeType, encoding, string); let data = formDataURI(mimeType, encoding, string);
@ -322,7 +320,7 @@ RequestListContextMenu.prototype = {
* Copy response data as a string. * Copy response data as a string.
*/ */
copyResponse() { copyResponse() {
const { text } = this.selectedRequest.responseContent.content; const { text } = this.selectedItem.responseContent.content;
gNetwork.getString(text).then(string => { gNetwork.getString(text).then(string => {
clipboardHelper.copyString(string); clipboardHelper.copyString(string);
@ -351,7 +349,7 @@ RequestListContextMenu.prototype = {
return { return {
getString: gNetwork.getString.bind(gNetwork), getString: gNetwork.getString.bind(gNetwork),
items: this.sortedRequests, items: this.items,
title: title title: title
}; };
} }

410
devtools/client/netmonitor/requests-menu-view.js Normal file
View file

@ -0,0 +1,410 @@
/* 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/. */
/* globals window, dumpn, $, gNetwork, NetMonitorController */
"use strict";
const { Task } = require("devtools/shared/task");
const { HTMLTooltip } = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
const { setNamedTimeout } = require("devtools/client/shared/widgets/view-helpers");
const { CurlUtils } = require("devtools/client/shared/curl");
const { L10N } = require("./l10n");
const { EVENTS } = require("./events");
const { createElement, createFactory } = require("devtools/client/shared/vendor/react");
const ReactDOM = require("devtools/client/shared/vendor/react-dom");
const { Provider } = require("devtools/client/shared/vendor/react-redux");
const RequestList = createFactory(require("./components/request-list"));
const RequestListContextMenu = require("./request-list-context-menu");
const Actions = require("./actions/index");
const { Prefs } = require("./prefs");
const {
fetchHeaders,
formDataURI,
getFormDataSections,
} = require("./request-utils");
const {
getActiveFilters,
getDisplayedRequests,
getRequestById,
getSelectedRequest,
getSortedRequests,
} = require("./selectors/index");
// ms
const RESIZE_REFRESH_RATE = 50;
// A smart store watcher to notify store changes as necessary
function storeWatcher(initialValue, reduceValue, onChange) {
let currentValue = initialValue;
return () => {
const oldValue = currentValue;
const newValue = reduceValue(currentValue);
if (newValue !== oldValue) {
currentValue = newValue;
onChange(newValue, oldValue);
}
};
}
/**
* Functions handling the requests menu (containing details about each request,
* like status, method, file, domain, as well as a waterfall representing
* timing information).
*/
function RequestsMenuView() {
dumpn("RequestsMenuView was instantiated");
}
RequestsMenuView.prototype = {
/**
* Initialization function, called when the network monitor is started.
*/
initialize: function (store) {
dumpn("Initializing the RequestsMenuView");
this.store = store;
this.contextMenu = new RequestListContextMenu();
this.contextMenu.initialize(store);
Prefs.filters.forEach(type => store.dispatch(Actions.toggleRequestFilterType(type)));
// Watch selection changes
this.store.subscribe(storeWatcher(
null,
() => getSelectedRequest(this.store.getState()),
(newSelected, oldSelected) => this.onSelectionUpdate(newSelected, oldSelected)
));
// Watch the network details panel toggle and resize the waterfall column on change
this.store.subscribe(storeWatcher(
false,
() => this.store.getState().ui.networkDetailsOpen,
() => this.onResize()
));
// Watch the requestHeaders, requestHeadersFromUploadStream and requestPostData
// in order to update formDataSections for composing form data
this.store.subscribe(storeWatcher(
false,
(currentRequest) => {
const request = getSelectedRequest(this.store.getState());
if (!request) {
return {};
}
const isChanged = request.requestHeaders !== currentRequest.requestHeaders ||
request.requestHeadersFromUploadStream !==
currentRequest.requestHeadersFromUploadStream ||
request.requestPostData !== currentRequest.requestPostData;
if (isChanged) {
return {
id: request.id,
requestHeaders: request.requestHeaders,
requestHeadersFromUploadStream: request.requestHeadersFromUploadStream,
requestPostData: request.requestPostData,
};
}
return currentRequest;
},
(newRequest) => {
const {
id,
requestHeaders,
requestHeadersFromUploadStream,
requestPostData,
} = newRequest;
if (requestHeaders && requestHeadersFromUploadStream && requestPostData) {
getFormDataSections(
requestHeaders,
requestHeadersFromUploadStream,
requestPostData,
gNetwork.getString.bind(gNetwork),
).then((formDataSections) => {
this.store.dispatch(Actions.updateRequest(
id,
{ formDataSections },
true,
));
});
}
},
));
this._summary = $("#requests-menu-network-summary-button");
this._summary.setAttribute("label", L10N.getStr("networkMenu.empty"));
this.onResize = this.onResize.bind(this);
this._splitter = $("#network-inspector-view-splitter");
this._splitter.addEventListener("mouseup", this.onResize);
window.addEventListener("resize", this.onResize);
this.tooltip = new HTMLTooltip(NetMonitorController._toolbox.doc, { type: "arrow" });
this.mountPoint = $("#network-table");
ReactDOM.render(createElement(Provider,
{ store: this.store },
RequestList()
), this.mountPoint);
},
/**
* Destruction function, called when the network monitor is closed.
*/
destroy() {
dumpn("Destroying the RequestsMenuView");
Prefs.filters = getActiveFilters(this.store.getState());
this._splitter.removeEventListener("mouseup", this.onResize);
window.removeEventListener("resize", this.onResize);
this.tooltip.destroy();
ReactDOM.unmountComponentAtNode(this.mountPoint);
},
/**
* Resets this container (removes all the networking information).
*/
reset() {
this.store.dispatch(Actions.batchReset());
this.store.dispatch(Actions.clearRequests());
},
/**
* Removes all network requests and closes the network details panel if open.
*/
clear() {
this.store.dispatch(Actions.clearRequests());
},
addRequest(id, data) {
let { method, url, isXHR, cause, startedDateTime, fromCache,
fromServiceWorker } = data;
// Convert the received date/time string to a unix timestamp.
let startedMillis = Date.parse(startedDateTime);
const action = Actions.addRequest(
id,
{
startedMillis,
method,
url,
isXHR,
cause,
fromCache,
fromServiceWorker,
},
true
);
this.store.dispatch(action).then(() => window.emit(EVENTS.REQUEST_ADDED, action.id));
},
updateRequest: Task.async(function* (id, data) {
const action = Actions.updateRequest(id, data, true);
yield this.store.dispatch(action);
let {
responseContent,
responseCookies,
responseHeaders,
requestCookies,
requestHeaders,
requestPostData,
} = action.data;
let request = getRequestById(this.store.getState(), action.id);
if (requestHeaders && requestHeaders.headers && requestHeaders.headers.length) {
let headers = yield fetchHeaders(
requestHeaders, gNetwork.getString.bind(gNetwork));
if (headers) {
yield this.store.dispatch(Actions.updateRequest(
action.id,
{ requestHeaders: headers },
true,
));
}
}
if (responseHeaders && responseHeaders.headers && responseHeaders.headers.length) {
let headers = yield fetchHeaders(
responseHeaders, gNetwork.getString.bind(gNetwork));
if (headers) {
yield this.store.dispatch(Actions.updateRequest(
action.id,
{ responseHeaders: headers },
true,
));
}
}
if (request && responseContent && responseContent.content) {
let { mimeType } = request;
let { text, encoding } = responseContent.content;
let response = yield gNetwork.getString(text);
let payload = {};
if (mimeType.includes("image/")) {
payload.responseContentDataUri = formDataURI(mimeType, encoding, response);
}
responseContent.content.text = response;
payload.responseContent = responseContent;
yield this.store.dispatch(Actions.updateRequest(action.id, payload, true));
if (mimeType.includes("image/")) {
window.emit(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED);
}
}
// Search the POST data upload stream for request headers and add
// them as a separate property, different from the classic headers.
if (requestPostData && requestPostData.postData) {
let { text } = requestPostData.postData;
let postData = yield gNetwork.getString(text);
const headers = CurlUtils.getHeadersFromMultipartText(postData);
const headersSize = headers.reduce((acc, { name, value }) => {
return acc + name.length + value.length + 2;
}, 0);
let payload = {};
requestPostData.postData.text = postData;
payload.requestPostData = Object.assign({}, requestPostData);
payload.requestHeadersFromUploadStream = { headers, headersSize };
yield this.store.dispatch(Actions.updateRequest(action.id, payload, true));
}
// Fetch request and response cookies long value.
// Actor does not provide full sized cookie value when the value is too long
// To display values correctly, we need fetch them in each request.
if (requestCookies) {
let reqCookies = [];
// request store cookies in requestCookies or requestCookies.cookies
let cookies = requestCookies.cookies ?
requestCookies.cookies : requestCookies;
// make sure cookies is iterable
if (typeof cookies[Symbol.iterator] === "function") {
for (let cookie of cookies) {
reqCookies.push(Object.assign({}, cookie, {
value: yield gNetwork.getString(cookie.value),
}));
}
if (reqCookies.length) {
yield this.store.dispatch(Actions.updateRequest(
action.id,
{ requestCookies: reqCookies },
true));
}
}
}
if (responseCookies) {
let resCookies = [];
// response store cookies in responseCookies or responseCookies.cookies
let cookies = responseCookies.cookies ?
responseCookies.cookies : responseCookies;
// make sure cookies is iterable
if (typeof cookies[Symbol.iterator] === "function") {
for (let cookie of cookies) {
resCookies.push(Object.assign({}, cookie, {
value: yield gNetwork.getString(cookie.value),
}));
}
if (resCookies.length) {
yield this.store.dispatch(Actions.updateRequest(
action.id,
{ responseCookies: resCookies },
true));
}
}
}
}),
/**
* Disable batched updates. Used by tests.
*/
set lazyUpdate(value) {
this.store.dispatch(Actions.batchEnable(value));
},
get items() {
return getSortedRequests(this.store.getState());
},
get visibleItems() {
return getDisplayedRequests(this.store.getState());
},
get itemCount() {
return this.store.getState().requests.requests.size;
},
getItemAtIndex(index) {
return getSortedRequests(this.store.getState()).get(index);
},
get selectedIndex() {
const state = this.store.getState();
if (!state.requests.selectedId) {
return -1;
}
return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
},
set selectedIndex(index) {
const requests = getSortedRequests(this.store.getState());
let itemId = null;
if (index >= 0 && index < requests.size) {
itemId = requests.get(index).id;
}
this.store.dispatch(Actions.selectRequest(itemId));
},
get selectedItem() {
return getSelectedRequest(this.store.getState());
},
set selectedItem(item) {
this.store.dispatch(Actions.selectRequest(item ? item.id : null));
},
/**
* Updates the network details panel state when something about the selection changes
*/
onSelectionUpdate(newSelected, oldSelected) {
if (newSelected) {
// Another item just got selected
this.store.dispatch(Actions.openNetworkDetails(true));
} else {
// Selection just got empty
this.store.dispatch(Actions.openNetworkDetails(false));
}
},
/**
* The resize listener for this container's window.
*/
onResize() {
// Allow requests to settle down first.
setNamedTimeout("resize-events", RESIZE_REFRESH_RATE, () => {
const waterfallHeaderEl = $("#requests-menu-waterfall-header-box");
if (waterfallHeaderEl) {
const { width } = waterfallHeaderEl.getBoundingClientRect();
this.store.dispatch(Actions.resizeWaterfall(width));
}
});
}
};
exports.RequestsMenuView = RequestsMenuView;

3
devtools/client/netmonitor/test/browser.ini
View file

@ -148,11 +148,14 @@ skip-if = true # bug 1309183, it should be fixed by SplitBox support
[browser_net_send-beacon-other-tab.js] [browser_net_send-beacon-other-tab.js]
[browser_net_simple-init.js] [browser_net_simple-init.js]
[browser_net_simple-request-data.js] [browser_net_simple-request-data.js]
skip-if = true # Bug 1258809
[browser_net_simple-request-details.js] [browser_net_simple-request-details.js]
skip-if = true # Bug 1258809 skip-if = true # Bug 1258809
[browser_net_simple-request.js] [browser_net_simple-request.js]
[browser_net_sort-01.js] [browser_net_sort-01.js]
skip-if = true # Redundant for React/Redux version
[browser_net_sort-02.js] [browser_net_sort-02.js]
[browser_net_sort-03.js]
[browser_net_statistics-01.js] [browser_net_statistics-01.js]
[browser_net_statistics-02.js] [browser_net_statistics-02.js]
[browser_net_status-codes.js] [browser_net_status-codes.js]

11
devtools/client/netmonitor/test/browser_net_accessibility-01.js
View file

@ -14,17 +14,18 @@ add_task(function* () {
// It seems that this test may be slow on Ubuntu builds running on ec2. // It seems that this test may be slow on Ubuntu builds running on ec2.
requestLongerTimeout(2); requestLongerTimeout(2);
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView, gStore, windowRequire } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let Actions = windowRequire("devtools/client/netmonitor/actions/index");
let count = 0; let count = 0;
function check(selectedIndex, panelVisibility) { function check(selectedIndex, panelVisibility) {
info("Performing check " + (count++) + "."); info("Performing check " + (count++) + ".");
let requestItems = Array.from(document.querySelectorAll(".request-list-item")); is(RequestsMenu.selectedIndex, selectedIndex,
is(requestItems.findIndex((item) => item.matches(".selected")), selectedIndex,
"The selected item in the requests menu was incorrect."); "The selected item in the requests menu was incorrect.");
is(!!document.querySelector(".network-details-panel"), panelVisibility, is(!!document.querySelector(".network-details-panel"), panelVisibility,
"The network details panel should render correctly."); "The network details panel should render correctly.");

9
devtools/client/netmonitor/test/browser_net_accessibility-02.js
View file

@ -14,17 +14,16 @@ add_task(function* () {
// It seems that this test may be slow on Ubuntu builds running on ec2. // It seems that this test may be slow on Ubuntu builds running on ec2.
requestLongerTimeout(2); requestLongerTimeout(2);
let { window, document, gStore, windowRequire } = monitor.panelWin; let { window, document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let count = 0; let count = 0;
function check(selectedIndex, panelVisibility) { function check(selectedIndex, panelVisibility) {
info("Performing check " + (count++) + "."); info("Performing check " + (count++) + ".");
let requestItems = Array.from(document.querySelectorAll(".request-list-item")); is(RequestsMenu.selectedIndex, selectedIndex,
is(requestItems.findIndex((item) => item.matches(".selected")), selectedIndex,
"The selected item in the requests menu was incorrect."); "The selected item in the requests menu was incorrect.");
is(!!document.querySelector(".network-details-panel"), panelVisibility, is(!!document.querySelector(".network-details-panel"), panelVisibility,
"The network details panel should render correctly."); "The network details panel should render correctly.");

18
devtools/client/netmonitor/test/browser_net_api-calls.js
View file

@ -12,14 +12,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(API_CALLS_URL); let { tab, monitor } = yield initNetMonitor(API_CALLS_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
const REQUEST_URIS = [ const REQUEST_URIS = [
"http://example.com/api/fileName.xml", "http://example.com/api/fileName.xml",
@ -36,13 +32,7 @@ add_task(function* () {
yield wait; yield wait;
REQUEST_URIS.forEach(function (uri, index) { REQUEST_URIS.forEach(function (uri, index) {
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(index), "GET", uri);
document,
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(index),
"GET",
uri
);
}); });
yield teardown(monitor); yield teardown(monitor);

11
devtools/client/netmonitor/test/browser_net_autoscroll.js
View file

@ -10,13 +10,12 @@ add_task(function* () {
requestLongerTimeout(2); requestLongerTimeout(2);
let { monitor } = yield initNetMonitor(INFINITE_GET_URL); let { monitor } = yield initNetMonitor(INFINITE_GET_URL);
let { document, gStore, windowRequire } = monitor.panelWin; let { $ } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index");
// Wait until the first request makes the empty notice disappear // Wait until the first request makes the empty notice disappear
yield waitForRequestListToAppear(); yield waitForRequestListToAppear();
let requestsContainer = document.querySelector(".requests-menu-contents"); let requestsContainer = $(".requests-menu-contents");
ok(requestsContainer, "Container element exists as expected."); ok(requestsContainer, "Container element exists as expected.");
// (1) Check that the scroll position is maintained at the bottom // (1) Check that the scroll position is maintained at the bottom
@ -47,7 +46,7 @@ add_task(function* () {
// (4) Now select an item in the list and check that additional requests // (4) Now select an item in the list and check that additional requests
// do not change the scroll position. // do not change the scroll position.
gStore.dispatch(Actions.selectRequestByIndex(0)); monitor.panelWin.NetMonitorView.RequestsMenu.selectedIndex = 0;
yield waitForNetworkEvents(monitor, 8); yield waitForNetworkEvents(monitor, 8);
yield waitSomeTime(); yield waitSomeTime();
is(requestsContainer.scrollTop, 0, "Did not scroll."); is(requestsContainer.scrollTop, 0, "Did not scroll.");
@ -57,7 +56,7 @@ add_task(function* () {
function waitForRequestListToAppear() { function waitForRequestListToAppear() {
info("Waiting until the empty notice disappears and is replaced with the list"); info("Waiting until the empty notice disappears and is replaced with the list");
return waitUntil(() => !!document.querySelector(".requests-menu-contents")); return waitUntil(() => !!$(".requests-menu-contents"));
} }
function* waitForRequestsToOverflowContainer() { function* waitForRequestsToOverflowContainer() {
@ -65,8 +64,6 @@ add_task(function* () {
while (true) { while (true) {
info("Waiting for one network request"); info("Waiting for one network request");
yield waitForNetworkEvents(monitor, 1); yield waitForNetworkEvents(monitor, 1);
console.log(requestsContainer.scrollHeight);
console.log(requestsContainer.clientHeight)
if (requestsContainer.scrollHeight > requestsContainer.clientHeight) { if (requestsContainer.scrollHeight > requestsContainer.clientHeight) {
info("The list is long enough, returning"); info("The list is long enough, returning");
return; return;

20
devtools/client/netmonitor/test/browser_net_brotli.js
View file

@ -16,14 +16,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(BROTLI_URL); let { tab, monitor } = yield initNetMonitor(BROTLI_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, BROTLI_REQUESTS); let wait = waitForNetworkEvents(monitor, BROTLI_REQUESTS);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -31,10 +27,7 @@ add_task(function* () {
}); });
yield wait; yield wait;
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
document,
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(0),
"GET", HTTPS_CONTENT_TYPE_SJS + "?fmt=br", { "GET", HTTPS_CONTENT_TYPE_SJS + "?fmt=br", {
status: 200, status: 200,
statusText: "Connected", statusText: "Connected",
@ -46,10 +39,9 @@ add_task(function* () {
}); });
wait = waitForDOM(document, "#response-panel .editor-mount iframe"); wait = waitForDOM(document, "#response-panel .editor-mount iframe");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#response-tab").click();
document.querySelector("#response-tab"));
let [editorFrame] = yield wait; let [editorFrame] = yield wait;
yield once(editorFrame, "DOMContentLoaded"); yield once(editorFrame, "DOMContentLoaded");

22
devtools/client/netmonitor/test/browser_net_cached-status.js
View file

@ -11,14 +11,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(STATUS_CODES_URL, null, true); let { tab, monitor } = yield initNetMonitor(STATUS_CODES_URL, null, true);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu, NetworkDetails } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
const REQUEST_DATA = [ const REQUEST_DATA = [
{ {
@ -93,15 +89,11 @@ add_task(function* () {
let index = 0; let index = 0;
for (let request of REQUEST_DATA) { for (let request of REQUEST_DATA) {
let item = RequestsMenu.getItemAtIndex(index);
info("Verifying request #" + index); info("Verifying request #" + index);
yield verifyRequestItemTarget( yield verifyRequestItemTarget(RequestsMenu, item,
document, request.method, request.uri, request.details);
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(index),
request.method,
request.uri,
request.details
);
index++; index++;
} }

29
devtools/client/netmonitor/test/browser_net_cause.js
View file

@ -88,33 +88,23 @@ add_task(function* () {
// We can't use about:blank here, because initNetMonitor checks that the // We can't use about:blank here, because initNetMonitor checks that the
// page has actually made at least one request. // page has actually made at least one request.
let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
let { $, NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
RequestsMenu.lazyUpdate = false;
let { document, gStore, windowRequire } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index");
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
let wait = waitForNetworkEvents(monitor, EXPECTED_REQUESTS.length); let wait = waitForNetworkEvents(monitor, EXPECTED_REQUESTS.length);
tab.linkedBrowser.loadURI(CAUSE_URL); tab.linkedBrowser.loadURI(CAUSE_URL);
yield wait; yield wait;
is(gStore.getState().requests.requests.size, EXPECTED_REQUESTS.length, is(RequestsMenu.itemCount, EXPECTED_REQUESTS.length,
"All the page events should be recorded."); "All the page events should be recorded.");
EXPECTED_REQUESTS.forEach((spec, i) => { EXPECTED_REQUESTS.forEach((spec, i) => {
let { method, url, causeType, causeUri, stack } = spec; let { method, url, causeType, causeUri, stack } = spec;
let requestItem = getSortedRequests(gStore.getState()).get(i); let requestItem = RequestsMenu.getItemAtIndex(i);
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, requestItem,
document, method, url, { cause: { type: causeType, loadingDocumentUri: causeUri } }
getDisplayedRequests(gStore.getState()),
requestItem,
method,
url,
{ cause: { type: causeType, loadingDocumentUri: causeUri } }
); );
let { stacktrace } = requestItem.cause; let { stacktrace } = requestItem.cause;
@ -144,11 +134,10 @@ add_task(function* () {
}); });
// Sort the requests by cause and check the order // Sort the requests by cause and check the order
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-cause-button"));
document.querySelector("#requests-menu-cause-button"));
let expectedOrder = EXPECTED_REQUESTS.map(r => r.causeType).sort(); let expectedOrder = EXPECTED_REQUESTS.map(r => r.causeType).sort();
expectedOrder.forEach((expectedCause, i) => { expectedOrder.forEach((expectedCause, i) => {
const cause = getSortedRequests(gStore.getState()).get(i).cause.type; const cause = RequestsMenu.getItemAtIndex(i).cause.type;
is(cause, expectedCause, `The request #${i} has the expected cause after sorting`); is(cause, expectedCause, `The request #${i} has the expected cause after sorting`);
}); });

9
devtools/client/netmonitor/test/browser_net_cause_redirect.js
View file

@ -19,18 +19,15 @@ add_task(function* () {
]; ];
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
let { gStore, windowRequire } = monitor.panelWin; let { RequestsMenu } = monitor.panelWin.NetMonitorView;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); RequestsMenu.lazyUpdate = false;
let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
let wait = waitForNetworkEvents(monitor, EXPECTED_REQUESTS.length); let wait = waitForNetworkEvents(monitor, EXPECTED_REQUESTS.length);
yield performRequests(2, HSTS_SJS); yield performRequests(2, HSTS_SJS);
yield wait; yield wait;
EXPECTED_REQUESTS.forEach(({status, hasStack}, i) => { EXPECTED_REQUESTS.forEach(({status, hasStack}, i) => {
let item = getSortedRequests(gStore.getState()).get(i); let item = RequestsMenu.getItemAtIndex(i);
is(item.status, status, `Request #${i} has the expected status`); is(item.status, status, `Request #${i} has the expected status`);

24
devtools/client/netmonitor/test/browser_net_clear.js
View file

@ -11,20 +11,18 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { EVENTS } = windowRequire("devtools/client/netmonitor/events");
let detailsPane = document.querySelector("#details-pane");
let detailsPanelToggleButton = document.querySelector(".network-details-panel-toggle"); let detailsPanelToggleButton = document.querySelector(".network-details-panel-toggle");
let clearButton = document.querySelector("#requests-menu-clear-button"); let clearButton = document.querySelector("#requests-menu-clear-button");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
// Make sure we start in a sane state // Make sure we start in a sane state
assertNoRequestState(); assertNoRequestState(RequestsMenu, detailsPanelToggleButton);
// Load one request and assert it shows up in the list // Load one request and assert it shows up in the list
let networkEvent = monitor.panelWin.once(EVENTS.NETWORK_EVENT); let networkEvent = monitor.panelWin.once(monitor.panelWin.EVENTS.NETWORK_EVENT);
tab.linkedBrowser.reload(); tab.linkedBrowser.reload();
yield networkEvent; yield networkEvent;
@ -35,14 +33,14 @@ add_task(function* () {
assertNoRequestState(); assertNoRequestState();
// Load a second request and make sure they still show up // Load a second request and make sure they still show up
networkEvent = monitor.panelWin.once(EVENTS.NETWORK_EVENT); networkEvent = monitor.panelWin.once(monitor.panelWin.EVENTS.NETWORK_EVENT);
tab.linkedBrowser.reload(); tab.linkedBrowser.reload();
yield networkEvent; yield networkEvent;
assertSingleRequestState(); assertSingleRequestState();
// Make sure we can now open the network details panel // Make sure we can now open the network details panel
EventUtils.sendMouseEvent({ type: "click" }, detailsPanelToggleButton); EventUtils.sendMouseEvent({ type: "mousedown" }, detailsPanelToggleButton);
ok(document.querySelector(".network-details-panel") && ok(document.querySelector(".network-details-panel") &&
!detailsPanelToggleButton.classList.contains("pane-collapsed"), !detailsPanelToggleButton.classList.contains("pane-collapsed"),
@ -50,9 +48,9 @@ add_task(function* () {
// Click clear and make sure the details pane closes // Click clear and make sure the details pane closes
EventUtils.sendMouseEvent({ type: "click" }, clearButton); EventUtils.sendMouseEvent({ type: "click" }, clearButton);
assertNoRequestState(); assertNoRequestState();
ok(!document.querySelector(".network-details-panel"), ok(!document.querySelector(".network-details-panel") &&
detailsPanelToggleButton.classList.contains("pane-collapsed"),
"The details pane should not be visible clicking 'clear'."); "The details pane should not be visible clicking 'clear'.");
return teardown(monitor); return teardown(monitor);
@ -61,7 +59,7 @@ add_task(function* () {
* Asserts the state of the network monitor when one request has loaded * Asserts the state of the network monitor when one request has loaded
*/ */
function assertSingleRequestState() { function assertSingleRequestState() {
is(gStore.getState().requests.requests.size, 1, is(RequestsMenu.itemCount, 1,
"The request menu should have one item at this point."); "The request menu should have one item at this point.");
is(detailsPanelToggleButton.hasAttribute("disabled"), false, is(detailsPanelToggleButton.hasAttribute("disabled"), false,
"The pane toggle button should be enabled after a request is made."); "The pane toggle button should be enabled after a request is made.");
@ -71,7 +69,7 @@ add_task(function* () {
* Asserts the state of the network monitor when no requests have loaded * Asserts the state of the network monitor when no requests have loaded
*/ */
function assertNoRequestState() { function assertNoRequestState() {
is(gStore.getState().requests.requests.size, 0, is(RequestsMenu.itemCount, 0,
"The request menu should be empty at this point."); "The request menu should be empty at this point.");
is(detailsPanelToggleButton.hasAttribute("disabled"), true, is(detailsPanelToggleButton.hasAttribute("disabled"), true,
"The pane toggle button should be disabled when the request menu is cleared."); "The pane toggle button should be disabled when the request menu is cleared.");

27
devtools/client/netmonitor/test/browser_net_complex-params.js
View file

@ -9,14 +9,15 @@
*/ */
add_task(function* () { add_task(function* () {
let { L10N } = require("devtools/client/netmonitor/l10n");
let { tab, monitor } = yield initNetMonitor(PARAMS_URL); let { tab, monitor } = yield initNetMonitor(PARAMS_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { L10N } = windowRequire("devtools/client/netmonitor/l10n");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1, 6); let wait = waitForNetworkEvents(monitor, 1, 6);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -25,42 +26,42 @@ add_task(function* () {
yield wait; yield wait;
wait = waitForDOM(document, "#params-panel .tree-section", 2); wait = waitForDOM(document, "#params-panel .tree-section", 2);
gStore.dispatch(Actions.selectRequestByIndex(0)); EventUtils.sendMouseEvent({ type: "mousedown" },
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector(".network-details-panel-toggle"));
document.querySelector("#params-tab")); document.querySelector("#params-tab").click();
yield wait; yield wait;
testParamsTab1("a", '""', '{ "foo": "bar" }', '""'); testParamsTab1("a", '""', '{ "foo": "bar" }', '""');
wait = waitForDOM(document, "#params-panel .tree-section", 2); wait = waitForDOM(document, "#params-panel .tree-section", 2);
gStore.dispatch(Actions.selectRequestByIndex(1)); RequestsMenu.selectedIndex = 1;
yield wait; yield wait;
testParamsTab1("a", '"b"', '{ "foo": "bar" }', '""'); testParamsTab1("a", '"b"', '{ "foo": "bar" }', '""');
wait = waitForDOM(document, "#params-panel .tree-section", 2); wait = waitForDOM(document, "#params-panel .tree-section", 2);
gStore.dispatch(Actions.selectRequestByIndex(2)); RequestsMenu.selectedIndex = 2;
yield wait; yield wait;
testParamsTab1("a", '"b"', "foo", '"bar"'); testParamsTab1("a", '"b"', "foo", '"bar"');
wait = waitForDOM(document, "#params-panel tr:not(.tree-section).treeRow", 2); wait = waitForDOM(document, "#params-panel tr:not(.tree-section).treeRow", 2);
gStore.dispatch(Actions.selectRequestByIndex(3)); RequestsMenu.selectedIndex = 3;
yield wait; yield wait;
testParamsTab2("a", '""', '{ "foo": "bar" }', "js"); testParamsTab2("a", '""', '{ "foo": "bar" }', "js");
wait = waitForDOM(document, "#params-panel tr:not(.tree-section).treeRow", 2); wait = waitForDOM(document, "#params-panel tr:not(.tree-section).treeRow", 2);
gStore.dispatch(Actions.selectRequestByIndex(4)); RequestsMenu.selectedIndex = 4;
yield wait; yield wait;
testParamsTab2("a", '"b"', '{ "foo": "bar" }', "js"); testParamsTab2("a", '"b"', '{ "foo": "bar" }', "js");
// Wait for all tree sections and editor updated by react // Wait for all tree sections and editor updated by react
let waitSections = waitForDOM(document, "#params-panel .tree-section", 2); let waitSections = waitForDOM(document, "#params-panel .tree-section", 2);
let waitEditor = waitForDOM(document, "#params-panel .editor-mount iframe"); let waitEditor = waitForDOM(document, "#params-panel .editor-mount iframe");
gStore.dispatch(Actions.selectRequestByIndex(5)); RequestsMenu.selectedIndex = 5;
let [, editorFrames] = yield Promise.all([waitSections, waitEditor]); let [, editorFrames] = yield Promise.all([waitSections, waitEditor]);
yield once(editorFrames[0], "DOMContentLoaded"); yield once(editorFrames[0], "DOMContentLoaded");
yield waitForDOM(editorFrames[0].contentDocument, ".CodeMirror-code"); yield waitForDOM(editorFrames[0].contentDocument, ".CodeMirror-code");
testParamsTab2("a", '"b"', "?foo=bar", "text"); testParamsTab2("a", '"b"', "?foo=bar", "text");
gStore.dispatch(Actions.selectRequestByIndex(6)); RequestsMenu.selectedIndex = 6;
testParamsTab3(); testParamsTab3();
yield teardown(monitor); yield teardown(monitor);

78
devtools/client/netmonitor/test/browser_net_content-type.js
View file

@ -13,14 +13,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL); let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS); let wait = waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -28,13 +24,8 @@ add_task(function* () {
}); });
yield wait; yield wait;
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
document, "GET", CONTENT_TYPE_SJS + "?fmt=xml", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(0),
"GET",
CONTENT_TYPE_SJS + "?fmt=xml",
{
status: 200, status: 200,
statusText: "OK", statusText: "OK",
type: "xml", type: "xml",
@ -42,13 +33,8 @@ add_task(function* () {
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 42), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 42),
time: true time: true
}); });
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(1),
document, "GET", CONTENT_TYPE_SJS + "?fmt=css", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(1),
"GET",
CONTENT_TYPE_SJS + "?fmt=css",
{
status: 200, status: 200,
statusText: "OK", statusText: "OK",
type: "css", type: "css",
@ -56,13 +42,8 @@ add_task(function* () {
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 34), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 34),
time: true time: true
}); });
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(2),
document, "GET", CONTENT_TYPE_SJS + "?fmt=js", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(2),
"GET",
CONTENT_TYPE_SJS + "?fmt=js",
{
status: 200, status: 200,
statusText: "OK", statusText: "OK",
type: "js", type: "js",
@ -70,13 +51,8 @@ add_task(function* () {
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 34), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 34),
time: true time: true
}); });
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(3),
document, "GET", CONTENT_TYPE_SJS + "?fmt=json", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(3),
"GET",
CONTENT_TYPE_SJS + "?fmt=json",
{
status: 200, status: 200,
statusText: "OK", statusText: "OK",
type: "json", type: "json",
@ -84,12 +60,8 @@ add_task(function* () {
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29),
time: true time: true
}); });
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(4),
document, "GET", CONTENT_TYPE_SJS + "?fmt=bogus", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(4),
"GET",
CONTENT_TYPE_SJS + "?fmt=bogus", {
status: 404, status: 404,
statusText: "Not Found", statusText: "Not Found",
type: "html", type: "html",
@ -97,12 +69,8 @@ add_task(function* () {
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 24), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 24),
time: true time: true
}); });
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(5),
document, "GET", TEST_IMAGE, {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(5),
"GET",
TEST_IMAGE, {
fuzzyUrl: true, fuzzyUrl: true,
status: 200, status: 200,
statusText: "OK", statusText: "OK",
@ -111,12 +79,8 @@ add_task(function* () {
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 580), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 580),
time: true time: true
}); });
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(6),
document, "GET", CONTENT_TYPE_SJS + "?fmt=gzip", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(6),
"GET",
CONTENT_TYPE_SJS + "?fmt=gzip", {
status: 200, status: 200,
statusText: "OK", statusText: "OK",
type: "plain", type: "plain",
@ -263,12 +227,12 @@ add_task(function* () {
let editor = document.querySelector("#response-panel .editor-mount iframe"); let editor = document.querySelector("#response-panel .editor-mount iframe");
if (!editor) { if (!editor) {
let waitDOM = waitForDOM(document, "#response-panel .editor-mount iframe"); let waitDOM = waitForDOM(document, "#response-panel .editor-mount iframe");
gStore.dispatch(Actions.selectRequestByIndex(index)); RequestsMenu.selectedIndex = index;
document.querySelector("#response-tab").click(); document.querySelector("#response-tab").click();
[editor] = yield waitDOM; [editor] = yield waitDOM;
yield once(editor, "DOMContentLoaded"); yield once(editor, "DOMContentLoaded");
} else { } else {
gStore.dispatch(Actions.selectRequestByIndex(index)); RequestsMenu.selectedIndex = index;
} }
yield waitForDOM(editor.contentDocument, ".CodeMirror-code"); yield waitForDOM(editor.contentDocument, ".CodeMirror-code");
@ -277,14 +241,14 @@ add_task(function* () {
function* selectIndexAndWaitForJSONView(index) { function* selectIndexAndWaitForJSONView(index) {
let tabpanel = document.querySelector("#response-panel"); let tabpanel = document.querySelector("#response-panel");
let waitDOM = waitForDOM(tabpanel, ".treeTable"); let waitDOM = waitForDOM(tabpanel, ".treeTable");
gStore.dispatch(Actions.selectRequestByIndex(index)); RequestsMenu.selectedIndex = index;
yield waitDOM; yield waitDOM;
} }
function* selectIndexAndWaitForImageView(index) { function* selectIndexAndWaitForImageView(index) {
let tabpanel = document.querySelector("#response-panel"); let tabpanel = document.querySelector("#response-panel");
let waitDOM = waitForDOM(tabpanel, ".response-image"); let waitDOM = waitForDOM(tabpanel, ".response-image");
gStore.dispatch(Actions.selectRequestByIndex(index)); RequestsMenu.selectedIndex = index;
let [imageNode] = yield waitDOM; let [imageNode] = yield waitDOM;
yield once(imageNode, "load"); yield once(imageNode, "load");
} }

16
devtools/client/netmonitor/test/browser_net_copy_as_curl.js
View file

@ -41,8 +41,9 @@ add_task(function* () {
header("Cache-Control: no-cache") header("Cache-Control: no-cache")
]; ];
let { document, gStore, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, SIMPLE_SJS, function* (url) { yield ContentTask.spawn(tab.linkedBrowser, SIMPLE_SJS, function* (url) {
@ -50,16 +51,11 @@ add_task(function* () {
}); });
yield wait; yield wait;
EventUtils.sendMouseEvent({ type: "mousedown" }, let requestItem = RequestsMenu.getItemAtIndex(0);
document.querySelectorAll(".request-list-item")[0]); RequestsMenu.selectedItem = requestItem;
EventUtils.sendMouseEvent({ type: "contextmenu" },
document.querySelectorAll(".request-list-item")[0]);
yield waitForClipboardPromise(function setup() { yield waitForClipboardPromise(function setup() {
// Context menu is appending in XUL document, we must select it from RequestsMenu.contextMenu.copyAsCurl();
// _toolbox.doc
monitor._toolbox.doc
.querySelector("#request-menu-context-copy-as-curl").click();
}, function validate(result) { }, function validate(result) {
if (typeof result !== "string") { if (typeof result !== "string") {
return false; return false;

27
devtools/client/netmonitor/test/browser_net_copy_headers.js
View file

@ -11,22 +11,20 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index"); let { RequestsMenu } = NetMonitorView;
RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
tab.linkedBrowser.reload(); tab.linkedBrowser.reload();
yield wait; yield wait;
EventUtils.sendMouseEvent({ type: "contextmenu" }, let requestItem = RequestsMenu.getItemAtIndex(0);
document.querySelectorAll(".request-list-item")[0]); RequestsMenu.selectedItem = requestItem;
let requestItem = getSortedRequests(gStore.getState()).get(0);
let { method, httpVersion, status, statusText } = requestItem; let { method, httpVersion, status, statusText } = requestItem;
EventUtils.sendMouseEvent({ type: "contextmenu" },
document.querySelectorAll(".request-list-item")[0]);
const EXPECTED_REQUEST_HEADERS = [ const EXPECTED_REQUEST_HEADERS = [
`${method} ${SIMPLE_URL} ${httpVersion}`, `${method} ${SIMPLE_URL} ${httpVersion}`,
"Host: example.com", "Host: example.com",
@ -41,10 +39,7 @@ add_task(function* () {
].join("\n"); ].join("\n");
yield waitForClipboardPromise(function setup() { yield waitForClipboardPromise(function setup() {
// Context menu is appending in XUL document, we must select it from RequestsMenu.contextMenu.copyRequestHeaders();
// _toolbox.doc
monitor._toolbox.doc
.querySelector("#request-menu-context-copy-request-headers").click();
}, function validate(result) { }, function validate(result) {
// Sometimes, a "Cookie" header is left over from other tests. Remove it: // Sometimes, a "Cookie" header is left over from other tests. Remove it:
result = String(result).replace(/Cookie: [^\n]+\n/, ""); result = String(result).replace(/Cookie: [^\n]+\n/, "");
@ -62,14 +57,8 @@ add_task(function* () {
"Date: Sun, 3 May 2015 11:11:11 GMT" "Date: Sun, 3 May 2015 11:11:11 GMT"
].join("\n"); ].join("\n");
EventUtils.sendMouseEvent({ type: "contextmenu" },
document.querySelectorAll(".request-list-item")[0]);
yield waitForClipboardPromise(function setup() { yield waitForClipboardPromise(function setup() {
// Context menu is appending in XUL document, we must select it from RequestsMenu.contextMenu.copyResponseHeaders();
// _toolbox.doc
monitor._toolbox.doc
.querySelector("#response-menu-context-copy-response-headers").click();
}, function validate(result) { }, function validate(result) {
// Fake the "Last-Modified" and "Date" headers because they will vary: // Fake the "Last-Modified" and "Date" headers because they will vary:
result = String(result) result = String(result)

16
devtools/client/netmonitor/test/browser_net_copy_image_as_data_uri.js
View file

@ -11,7 +11,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL); let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS); let wait = waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -19,16 +22,11 @@ add_task(function* () {
}); });
yield wait; yield wait;
EventUtils.sendMouseEvent({ type: "mousedown" }, let requestItem = RequestsMenu.getItemAtIndex(5);
document.querySelectorAll(".request-list-item")[5]); RequestsMenu.selectedItem = requestItem;
EventUtils.sendMouseEvent({ type: "contextmenu" },
document.querySelectorAll(".request-list-item")[5]);
yield waitForClipboardPromise(function setup() { yield waitForClipboardPromise(function setup() {
// Context menu is appending in XUL document, we must select it from RequestsMenu.contextMenu.copyImageAsDataUri();
// _toolbox.doc
monitor._toolbox.doc
.querySelector("#request-menu-context-copy-image-as-data-uri").click();
}, TEST_IMAGE_DATA_URI); }, TEST_IMAGE_DATA_URI);
ok(true, "Clipboard contains the currently selected image as data uri."); ok(true, "Clipboard contains the currently selected image as data uri.");

109
devtools/client/netmonitor/test/browser_net_copy_params.js
View file

@ -11,10 +11,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(PARAMS_URL); let { tab, monitor } = yield initNetMonitor(PARAMS_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1, 6); let wait = waitForNetworkEvents(monitor, 1, 6);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -22,85 +22,76 @@ add_task(function* () {
}); });
yield wait; yield wait;
yield testCopyUrlParamsHidden(0, false); RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(0);
yield testCopyUrlParams(0, "a"); yield testCopyUrlParamsHidden(false);
yield testCopyPostDataHidden(0, false); yield testCopyUrlParams("a");
yield testCopyPostData(0, "{ \"foo\": \"bar\" }"); yield testCopyPostDataHidden(false);
yield testCopyPostData("{ \"foo\": \"bar\" }");
yield testCopyUrlParamsHidden(1, false); RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(1);
yield testCopyUrlParams(1, "a=b"); yield testCopyUrlParamsHidden(false);
yield testCopyPostDataHidden(1, false); yield testCopyUrlParams("a=b");
yield testCopyPostData(1, "{ \"foo\": \"bar\" }"); yield testCopyPostDataHidden(false);
yield testCopyPostData("{ \"foo\": \"bar\" }");
yield testCopyUrlParamsHidden(2, false); RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(2);
yield testCopyUrlParams(2, "a=b"); yield testCopyUrlParamsHidden(false);
yield testCopyPostDataHidden(2, false); yield testCopyUrlParams("a=b");
yield testCopyPostData(2, "foo=bar"); yield testCopyPostDataHidden(false);
yield testCopyPostData("foo=bar");
yield testCopyUrlParamsHidden(3, false); RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(3);
yield testCopyUrlParams(3, "a"); yield testCopyUrlParamsHidden(false);
yield testCopyPostDataHidden(3, false); yield testCopyUrlParams("a");
yield testCopyPostData(3, "{ \"foo\": \"bar\" }"); yield testCopyPostDataHidden(false);
yield testCopyPostData("{ \"foo\": \"bar\" }");
yield testCopyUrlParamsHidden(4, false); RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(4);
yield testCopyUrlParams(4, "a=b"); yield testCopyUrlParamsHidden(false);
yield testCopyPostDataHidden(4, false); yield testCopyUrlParams("a=b");
yield testCopyPostData(4, "{ \"foo\": \"bar\" }"); yield testCopyPostDataHidden(false);
yield testCopyPostData("{ \"foo\": \"bar\" }");
yield testCopyUrlParamsHidden(5, false); RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(5);
yield testCopyUrlParams(5, "a=b"); yield testCopyUrlParamsHidden(false);
yield testCopyPostDataHidden(5, false); yield testCopyUrlParams("a=b");
yield testCopyPostData(5, "?foo=bar"); yield testCopyPostDataHidden(false);
yield testCopyPostData("?foo=bar");
yield testCopyUrlParamsHidden(6, true); RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(6);
yield testCopyPostDataHidden(6, true); yield testCopyUrlParamsHidden(true);
yield testCopyPostDataHidden(true);
return teardown(monitor); return teardown(monitor);
function testCopyUrlParamsHidden(index, hidden) { function testCopyUrlParamsHidden(hidden) {
EventUtils.sendMouseEvent({ type: "mousedown" }, let allMenuItems = openContextMenuAndGetAllItems(NetMonitorView);
document.querySelectorAll(".request-list-item")[index]); let copyUrlParamsNode = allMenuItems.find(item =>
EventUtils.sendMouseEvent({ type: "contextmenu" }, item.id === "request-menu-context-copy-url-params");
document.querySelectorAll(".request-list-item")[index]); is(copyUrlParamsNode.visible, !hidden,
let copyUrlParamsNode = monitor._toolbox.doc
.querySelector("#request-menu-context-copy-url-params");
is(!!copyUrlParamsNode, !hidden,
"The \"Copy URL Parameters\" context menu item should" + (hidden ? " " : " not ") + "The \"Copy URL Parameters\" context menu item should" + (hidden ? " " : " not ") +
"be hidden."); "be hidden.");
} }
function* testCopyUrlParams(index, queryString) { function* testCopyUrlParams(queryString) {
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[index]);
EventUtils.sendMouseEvent({ type: "contextmenu" },
document.querySelectorAll(".request-list-item")[index]);
yield waitForClipboardPromise(function setup() { yield waitForClipboardPromise(function setup() {
monitor._toolbox.doc RequestsMenu.contextMenu.copyUrlParams();
.querySelector("#request-menu-context-copy-url-params").click();
}, queryString); }, queryString);
ok(true, "The url query string copied from the selected item is correct."); ok(true, "The url query string copied from the selected item is correct.");
} }
function testCopyPostDataHidden(index, hidden) { function testCopyPostDataHidden(hidden) {
EventUtils.sendMouseEvent({ type: "mousedown" }, let allMenuItems = openContextMenuAndGetAllItems(NetMonitorView);
document.querySelectorAll(".request-list-item")[index]); let copyPostDataNode = allMenuItems.find(item =>
EventUtils.sendMouseEvent({ type: "contextmenu" }, item.id === "request-menu-context-copy-post-data");
document.querySelectorAll(".request-list-item")[index]); is(copyPostDataNode.visible, !hidden,
let copyPostDataNode = monitor._toolbox.doc
.querySelector("#request-menu-context-copy-post-data");
is(!!copyPostDataNode, !hidden,
"The \"Copy POST Data\" context menu item should" + (hidden ? " " : " not ") + "The \"Copy POST Data\" context menu item should" + (hidden ? " " : " not ") +
"be hidden."); "be hidden.");
} }
function* testCopyPostData(index, postData) { function* testCopyPostData(postData) {
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[index]);
EventUtils.sendMouseEvent({ type: "contextmenu" },
document.querySelectorAll(".request-list-item")[index]);
yield waitForClipboardPromise(function setup() { yield waitForClipboardPromise(function setup() {
monitor._toolbox.doc RequestsMenu.contextMenu.copyPostData();
.querySelector("#request-menu-context-copy-post-data").click();
}, postData); }, postData);
ok(true, "The post data string copied from the selected item is correct."); ok(true, "The post data string copied from the selected item is correct.");
} }

16
devtools/client/netmonitor/test/browser_net_copy_response.js
View file

@ -13,7 +13,10 @@ add_task(function* () {
const EXPECTED_RESULT = '{ "greeting": "Hello JSON!" }'; const EXPECTED_RESULT = '{ "greeting": "Hello JSON!" }';
let { document } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS); let wait = waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -21,16 +24,11 @@ add_task(function* () {
}); });
yield wait; yield wait;
EventUtils.sendMouseEvent({ type: "mousedown" }, let requestItem = RequestsMenu.getItemAtIndex(3);
document.querySelectorAll(".request-list-item")[3]); RequestsMenu.selectedItem = requestItem;
EventUtils.sendMouseEvent({ type: "contextmenu" },
document.querySelectorAll(".request-list-item")[3]);
yield waitForClipboardPromise(function setup() { yield waitForClipboardPromise(function setup() {
// Context menu is appending in XUL document, we must select it from RequestsMenu.contextMenu.copyResponse();
// _toolbox.doc
monitor._toolbox.doc
.querySelector("#request-menu-context-copy-response").click();
}, EXPECTED_RESULT); }, EXPECTED_RESULT);
yield teardown(monitor); yield teardown(monitor);

16
devtools/client/netmonitor/test/browser_net_copy_svg_image_as_data_uri.js
View file

@ -13,7 +13,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CURL_URL); let { tab, monitor } = yield initNetMonitor(CURL_URL);
info("Starting test... "); info("Starting test... ");
let { document } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, SVG_URL, function* (url) { yield ContentTask.spawn(tab.linkedBrowser, SVG_URL, function* (url) {
@ -21,16 +24,11 @@ add_task(function* () {
}); });
yield wait; yield wait;
EventUtils.sendMouseEvent({ type: "mousedown" }, let requestItem = RequestsMenu.getItemAtIndex(0);
document.querySelectorAll(".request-list-item")[0]); RequestsMenu.selectedItem = requestItem;
EventUtils.sendMouseEvent({ type: "contextmenu" },
document.querySelectorAll(".request-list-item")[0]);
yield waitForClipboardPromise(function setup() { yield waitForClipboardPromise(function setup() {
// Context menu is appending in XUL document, we must select it from RequestsMenu.contextMenu.copyImageAsDataUri();
// _toolbox.doc
monitor._toolbox.doc
.querySelector("#request-menu-context-copy-image-as-data-uri").click();
}, function check(text) { }, function check(text) {
return text.startsWith("data:") && !/undefined/.test(text); return text.startsWith("data:") && !/undefined/.test(text);
}); });

17
devtools/client/netmonitor/test/browser_net_copy_url.js
View file

@ -11,8 +11,8 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index"); let { RequestsMenu } = NetMonitorView;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -20,18 +20,11 @@ add_task(function* () {
}); });
yield wait; yield wait;
EventUtils.sendMouseEvent({ type: "mousedown" }, let requestItem = RequestsMenu.getItemAtIndex(0);
document.querySelectorAll(".request-list-item")[0]); RequestsMenu.selectedItem = requestItem;
EventUtils.sendMouseEvent({ type: "contextmenu" },
document.querySelectorAll(".request-list-item")[0]);
let requestItem = getSortedRequests(gStore.getState()).get(0);
yield waitForClipboardPromise(function setup() { yield waitForClipboardPromise(function setup() {
// Context menu is appending in XUL document, we must select it from RequestsMenu.contextMenu.copyUrl();
// _toolbox.doc
monitor._toolbox.doc
.querySelector("#request-menu-context-copy-url").click();
}, requestItem.url); }, requestItem.url);
yield teardown(monitor); yield teardown(monitor);

22
devtools/client/netmonitor/test/browser_net_cors_requests.js
View file

@ -9,15 +9,8 @@
add_task(function* () { add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CORS_URL); let { tab, monitor } = yield initNetMonitor(CORS_URL);
let { RequestsMenu } = monitor.panelWin.NetMonitorView;
let { document, gStore, windowRequire } = monitor.panelWin; RequestsMenu.lazyUpdate = false;
let Actions = windowRequire("devtools/client/netmonitor/actions/index");
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
let wait = waitForNetworkEvents(monitor, 1, 1); let wait = waitForNetworkEvents(monitor, 1, 1);
@ -31,14 +24,9 @@ add_task(function* () {
yield wait; yield wait;
info("Checking the preflight and flight methods"); info("Checking the preflight and flight methods");
["OPTIONS", "POST"].forEach((method, index) => { ["OPTIONS", "POST"].forEach((method, i) => {
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(i),
document, method, requestUrl);
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(index),
method,
requestUrl
);
}); });
yield teardown(monitor); yield teardown(monitor);

15
devtools/client/netmonitor/test/browser_net_curl-utils.js
View file

@ -13,11 +13,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CURL_UTILS_URL); let { tab, monitor } = yield initNetMonitor(CURL_UTILS_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire, gNetwork } = monitor.panelWin; let { NetMonitorView, gNetwork } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1, 3); let wait = waitForNetworkEvents(monitor, 1, 3);
yield ContentTask.spawn(tab.linkedBrowser, SIMPLE_SJS, function* (url) { yield ContentTask.spawn(tab.linkedBrowser, SIMPLE_SJS, function* (url) {
@ -26,10 +25,10 @@ add_task(function* () {
yield wait; yield wait;
let requests = { let requests = {
get: getSortedRequests(gStore.getState()).get(0), get: RequestsMenu.getItemAtIndex(0),
post: getSortedRequests(gStore.getState()).get(1), post: RequestsMenu.getItemAtIndex(1),
multipart: getSortedRequests(gStore.getState()).get(2), multipart: RequestsMenu.getItemAtIndex(2),
multipartForm: getSortedRequests(gStore.getState()).get(3), multipartForm: RequestsMenu.getItemAtIndex(3)
}; };
let data = yield createCurlData(requests.get, gNetwork); let data = yield createCurlData(requests.get, gNetwork);

31
devtools/client/netmonitor/test/browser_net_cyrillic-01.js
View file

@ -11,14 +11,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CYRILLIC_URL); let { tab, monitor } = yield initNetMonitor(CYRILLIC_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -26,25 +22,16 @@ add_task(function* () {
}); });
yield wait; yield wait;
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
document, "GET", CONTENT_TYPE_SJS + "?fmt=txt", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(0),
"GET",
CONTENT_TYPE_SJS + "?fmt=txt",
{
status: 200, status: 200,
statusText: "DA DA DA" statusText: "DA DA DA"
} });
);
wait = waitForDOM(document, "#headers-panel");
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[0]);
yield wait;
wait = waitForDOM(document, "#response-panel .editor-mount iframe"); wait = waitForDOM(document, "#response-panel .editor-mount iframe");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector("#response-tab")); document.querySelector(".network-details-panel-toggle"));
document.querySelector("#response-tab").click();
let [editor] = yield wait; let [editor] = yield wait;
yield once(editor, "DOMContentLoaded"); yield once(editor, "DOMContentLoaded");
yield waitForDOM(editor.contentDocument, ".CodeMirror-code"); yield waitForDOM(editor.contentDocument, ".CodeMirror-code");

28
devtools/client/netmonitor/test/browser_net_cyrillic-02.js
View file

@ -12,35 +12,25 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CYRILLIC_URL); let { tab, monitor } = yield initNetMonitor(CYRILLIC_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests, RequestsMenu.lazyUpdate = false;
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
tab.linkedBrowser.reload(); tab.linkedBrowser.reload();
yield wait; yield wait;
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
document, "GET", CYRILLIC_URL, {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(0),
"GET",
CYRILLIC_URL,
{
status: 200, status: 200,
statusText: "OK" statusText: "OK"
}); });
wait = waitForDOM(document, "#headers-panel");
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[0]);
yield wait;
wait = waitForDOM(document, "#response-panel .editor-mount iframe"); wait = waitForDOM(document, "#response-panel .editor-mount iframe");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector("#response-tab")); document.querySelector(".network-details-panel-toggle"));
document.querySelector("#response-tab").click();
let [editor] = yield wait; let [editor] = yield wait;
yield once(editor, "DOMContentLoaded"); yield once(editor, "DOMContentLoaded");
yield waitForDOM(editor.contentDocument, ".CodeMirror-code"); yield waitForDOM(editor.contentDocument, ".CodeMirror-code");

49
devtools/client/netmonitor/test/browser_net_filter-01.js
View file

@ -129,16 +129,10 @@ const EXPECTED_REQUESTS = [
]; ];
add_task(function* () { add_task(function* () {
let { monitor } = yield initNetMonitor(FILTERING_URL); let Actions = require("devtools/client/netmonitor/actions/index");
let { document, gStore, windowRequire } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index");
let {
getDisplayedRequests,
getSelectedRequest,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); let { monitor } = yield initNetMonitor(FILTERING_URL);
let { gStore } = monitor.panelWin;
function setFreetextFilter(value) { function setFreetextFilter(value) {
gStore.dispatch(Actions.setRequestFilterText(value)); gStore.dispatch(Actions.setRequestFilterText(value));
@ -146,17 +140,22 @@ add_task(function* () {
info("Starting test... "); info("Starting test... ");
let { document, NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 9); let wait = waitForNetworkEvents(monitor, 9);
loadCommonFrameScript(); loadCommonFrameScript();
yield performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS); yield performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS);
yield wait; yield wait;
EventUtils.sendMouseEvent({ type: "mousedown" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[0]); document.querySelector(".network-details-panel-toggle"));
isnot(getSelectedRequest(gStore.getState()), null, isnot(RequestsMenu.selectedItem, null,
"There should be a selected item in the requests menu."); "There should be a selected item in the requests menu.");
is(getSelectedIndex(gStore.getState()), 0, is(RequestsMenu.selectedIndex, 0,
"The first item should be selected in the requests menu."); "The first item should be selected in the requests menu.");
is(!!document.querySelector(".network-details-panel"), true, is(!!document.querySelector(".network-details-panel"), true,
"The network details panel should render correctly."); "The network details panel should render correctly.");
@ -307,21 +306,16 @@ add_task(function* () {
yield teardown(monitor); yield teardown(monitor);
function getSelectedIndex(state) {
if (!state.requests.selectedId) {
return -1;
}
return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
}
function testContents(visibility) { function testContents(visibility) {
isnot(getSelectedRequest(gStore.getState()), undefined, isnot(RequestsMenu.selectedItem, null,
"There should still be a selected item after filtering."); "There should still be a selected item after filtering.");
is(getSelectedIndex(gStore.getState()), 0, is(RequestsMenu.selectedIndex, 0,
"The first item should be still selected after filtering."); "The first item should be still selected after filtering.");
is(!!document.querySelector(".network-details-panel"), true,
"The network details panel should render correctly.");
const items = getSortedRequests(gStore.getState()); const items = RequestsMenu.items;
const visibleItems = getDisplayedRequests(gStore.getState()); const visibleItems = RequestsMenu.visibleItems;
is(items.size, visibility.length, is(items.size, visibility.length,
"There should be a specific amount of items in the requests menu."); "There should be a specific amount of items in the requests menu.");
@ -337,14 +331,7 @@ add_task(function* () {
if (shouldBeVisible) { if (shouldBeVisible) {
let { method, url, data } = EXPECTED_REQUESTS[i]; let { method, url, data } = EXPECTED_REQUESTS[i];
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, items.get(i), method, url, data);
document,
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(i),
method,
url,
data
);
} }
} }
} }

41
devtools/client/netmonitor/test/browser_net_filter-02.js
View file

@ -136,15 +136,10 @@ add_task(function* () {
// It seems that this test may be slow on Ubuntu builds running on ec2. // It seems that this test may be slow on Ubuntu builds running on ec2.
requestLongerTimeout(2); requestLongerTimeout(2);
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSelectedRequest,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 9); let wait = waitForNetworkEvents(monitor, 9);
loadCommonFrameScript(); loadCommonFrameScript();
@ -152,11 +147,11 @@ add_task(function* () {
yield wait; yield wait;
EventUtils.sendMouseEvent({ type: "mousedown" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[0]); document.querySelector(".network-details-panel-toggle"));
isnot(getSelectedRequest(gStore.getState()), null, isnot(RequestsMenu.selectedItem, null,
"There should be a selected item in the requests menu."); "There should be a selected item in the requests menu.");
is(getSelectedIndex(gStore.getState()), 0, is(RequestsMenu.selectedIndex, 0,
"The first item should be selected in the requests menu."); "The first item should be selected in the requests menu.");
is(!!document.querySelector(".network-details-panel"), true, is(!!document.querySelector(".network-details-panel"), true,
"The network details panel should be visible after toggle button was pressed."); "The network details panel should be visible after toggle button was pressed.");
@ -198,23 +193,16 @@ add_task(function* () {
yield teardown(monitor); yield teardown(monitor);
function getSelectedIndex(state) {
if (!state.requests.selectedId) {
return -1;
}
return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
}
function testContents(visibility) { function testContents(visibility) {
isnot(getSelectedRequest(gStore.getState()), null, isnot(RequestsMenu.selectedItem, null,
"There should still be a selected item after filtering."); "There should still be a selected item after filtering.");
is(getSelectedIndex(gStore.getState()), 0, is(RequestsMenu.selectedIndex, 0,
"The first item should be still selected after filtering."); "The first item should be still selected after filtering.");
is(!!document.querySelector(".network-details-panel"), true, is(!!document.querySelector(".network-details-panel"), true,
"The network details panel should still be visible after filtering."); "The network details panel should still be visible after filtering.");
const items = getSortedRequests(gStore.getState()); const items = RequestsMenu.items;
const visibleItems = getDisplayedRequests(gStore.getState()); const visibleItems = RequestsMenu.visibleItems;
is(items.size, visibility.length, is(items.size, visibility.length,
"There should be a specific amount of items in the requests menu."); "There should be a specific amount of items in the requests menu.");
@ -233,14 +221,7 @@ add_task(function* () {
let { method, url, data } = EXPECTED_REQUESTS[i]; let { method, url, data } = EXPECTED_REQUESTS[i];
for (let j = i; j < visibility.length; j += EXPECTED_REQUESTS.length) { for (let j = i; j < visibility.length; j += EXPECTED_REQUESTS.length) {
if (visibility[j]) { if (visibility[j]) {
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, items.get(j), method, url, data);
document,
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(i),
method,
url,
data
);
} }
} }
} }

32
devtools/client/netmonitor/test/browser_net_filter-03.js
View file

@ -27,15 +27,10 @@ add_task(function* () {
// It seems that this test may be slow on Ubuntu builds running on ec2. // It seems that this test may be slow on Ubuntu builds running on ec2.
requestLongerTimeout(2); requestLongerTimeout(2);
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSelectedRequest,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
// The test assumes that the first HTML request here has a longer response // The test assumes that the first HTML request here has a longer response
// body than the other HTML requests performed later during the test. // body than the other HTML requests performed later during the test.
@ -50,11 +45,11 @@ add_task(function* () {
yield wait; yield wait;
EventUtils.sendMouseEvent({ type: "mousedown" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[0]); document.querySelector(".network-details-panel-toggle"));
isnot(getSelectedRequest(gStore.getState()), null, isnot(RequestsMenu.selectedItem, null,
"There should be a selected item in the requests menu."); "There should be a selected item in the requests menu.");
is(getSelectedIndex(gStore.getState()), 0, is(RequestsMenu.selectedIndex, 0,
"The first item should be selected in the requests menu."); "The first item should be selected in the requests menu.");
is(!!document.querySelector(".network-details-panel"), true, is(!!document.querySelector(".network-details-panel"), true,
"The network details panel should be visible after toggle button was pressed."); "The network details panel should be visible after toggle button was pressed.");
@ -103,24 +98,17 @@ add_task(function* () {
document.querySelector("#requests-menu-size-button")); document.querySelector("#requests-menu-size-button"));
} }
function getSelectedIndex(state) {
if (!state.requests.selectedId) {
return -1;
}
return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
}
function testContents(order, visible, selection) { function testContents(order, visible, selection) {
isnot(getSelectedRequest(gStore.getState()), null, isnot(RequestsMenu.selectedItem, null,
"There should still be a selected item after filtering."); "There should still be a selected item after filtering.");
is(getSelectedIndex(gStore.getState()), selection, is(RequestsMenu.selectedIndex, selection,
"The first item should be still selected after filtering."); "The first item should be still selected after filtering.");
is(!!document.querySelector(".network-details-panel"), true, is(!!document.querySelector(".network-details-panel"), true,
"The network details panel should still be visible after filtering."); "The network details panel should still be visible after filtering.");
is(getSortedRequests(gStore.getState()).length, order.length, is(RequestsMenu.items.length, order.length,
"There should be a specific amount of items in the requests menu."); "There should be a specific amount of items in the requests menu.");
is(getDisplayedRequests(gStore.getState()).length, visible, is(RequestsMenu.visibleItems.length, visible,
"There should be a specific amount of visible items in the requests menu."); "There should be a specific amount of visible items in the requests menu.");
} }
}); });

7
devtools/client/netmonitor/test/browser_net_filter-04.js
View file

@ -35,11 +35,10 @@ add_task(function* () {
let { monitor } = yield initNetMonitor(FILTERING_URL); let { monitor } = yield initNetMonitor(FILTERING_URL);
info("Starting test... "); info("Starting test... ");
let { gStore, windowRequire } = monitor.panelWin; let { Prefs, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { Prefs } = windowRequire("devtools/client/netmonitor/prefs");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
is(Prefs.filters.length, 2, is(Prefs.filters.length, 2,
"All filter types were loaded as an array from the preferences."); "All filter types were loaded as an array from the preferences.");

11
devtools/client/netmonitor/test/browser_net_footer-summary.js
View file

@ -13,14 +13,15 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(FILTERING_URL); let { tab, monitor } = yield initNetMonitor(FILTERING_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { $, NetMonitorView, gStore, windowRequire } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { getDisplayedRequestsSummary } = let { getDisplayedRequestsSummary } =
windowRequire("devtools/client/netmonitor/selectors/index"); windowRequire("devtools/client/netmonitor/selectors/index");
let { L10N } = windowRequire("devtools/client/netmonitor/l10n"); let { L10N } = windowRequire("devtools/client/netmonitor/l10n");
let { PluralForm } = windowRequire("devtools/shared/plural-form"); let { PluralForm } = windowRequire("devtools/shared/plural-form");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
testStatus(); testStatus();
for (let i = 0; i < 2; i++) { for (let i = 0; i < 2; i++) {
@ -35,7 +36,7 @@ add_task(function* () {
let buttons = ["html", "css", "js", "xhr", "fonts", "images", "media", "flash"]; let buttons = ["html", "css", "js", "xhr", "fonts", "images", "media", "flash"];
for (let button of buttons) { for (let button of buttons) {
let buttonEl = document.querySelector(`#requests-menu-filter-${button}-button`); let buttonEl = $(`#requests-menu-filter-${button}-button`);
EventUtils.sendMouseEvent({ type: "click" }, buttonEl); EventUtils.sendMouseEvent({ type: "click" }, buttonEl);
testStatus(); testStatus();
} }
@ -44,7 +45,7 @@ add_task(function* () {
yield teardown(monitor); yield teardown(monitor);
function testStatus() { function testStatus() {
let value = document.querySelector("#requests-menu-network-summary-button").textContent; let value = $("#requests-menu-network-summary-button").textContent;
info("Current summary: " + value); info("Current summary: " + value);
let state = gStore.getState(); let state = gStore.getState();

25
devtools/client/netmonitor/test/browser_net_frame.js
View file

@ -157,21 +157,15 @@ add_task(function* () {
// We can't use about:blank here, because initNetMonitor checks that the // We can't use about:blank here, because initNetMonitor checks that the
// page has actually made at least one request. // page has actually made at least one request.
let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
let { NetMonitorView } = monitor.panelWin;
let { document, gStore, windowRequire } = monitor.panelWin; let { RequestsMenu } = NetMonitorView;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); RequestsMenu.lazyUpdate = false;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
tab.linkedBrowser.loadURI(TOP_URL, null, null); tab.linkedBrowser.loadURI(TOP_URL, null, null);
yield waitForNetworkEvents(monitor, REQUEST_COUNT); yield waitForNetworkEvents(monitor, REQUEST_COUNT);
is(gStore.getState().requests.requests.size, REQUEST_COUNT, is(RequestsMenu.itemCount, REQUEST_COUNT,
"All the page events should be recorded."); "All the page events should be recorded.");
// While there is a defined order for requests in each document separately, the requests // While there is a defined order for requests in each document separately, the requests
@ -180,7 +174,7 @@ add_task(function* () {
let currentTop = 0; let currentTop = 0;
let currentSub = 0; let currentSub = 0;
for (let i = 0; i < REQUEST_COUNT; i++) { for (let i = 0; i < REQUEST_COUNT; i++) {
let requestItem = getSortedRequests(gStore.getState()).get(i); let requestItem = RequestsMenu.getItemAtIndex(i);
let itemUrl = requestItem.url; let itemUrl = requestItem.url;
let itemCauseUri = requestItem.cause.loadingDocumentUri; let itemCauseUri = requestItem.cause.loadingDocumentUri;
@ -192,13 +186,8 @@ add_task(function* () {
} }
let { method, url, causeType, causeUri, stack } = spec; let { method, url, causeType, causeUri, stack } = spec;
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, requestItem,
document, method, url, { cause: { type: causeType, loadingDocumentUri: causeUri } }
getDisplayedRequests(gStore.getState()),
requestItem,
method,
url,
{ cause: { type: causeType, loadingDocumentUri: causeUri } }
); );
let { stacktrace } = requestItem.cause; let { stacktrace } = requestItem.cause;

15
devtools/client/netmonitor/test/browser_net_header-docs.js
View file

@ -13,14 +13,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(POST_DATA_URL); let { tab, monitor } = yield initNetMonitor(POST_DATA_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 0, 2); let wait = waitForNetworkEvents(monitor, 0, 2);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -28,10 +24,13 @@ add_task(function* () {
}); });
yield wait; yield wait;
let origItem = RequestsMenu.getItemAtIndex(0);
RequestsMenu.selectedItem = origItem;
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "click" },
document.querySelectorAll(".request-list-item")[0]); document.querySelectorAll(".request-list-item")[0]);
testShowLearnMore(getSortedRequests(gStore.getState()).get(0)); testShowLearnMore(origItem);
return teardown(monitor); return teardown(monitor);

10
devtools/client/netmonitor/test/browser_net_html-preview.js
View file

@ -11,10 +11,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_URL); let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 6); let wait = waitForNetworkEvents(monitor, 6);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -22,7 +22,7 @@ add_task(function* () {
}); });
yield wait; yield wait;
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
ok(document.querySelector("#headers-tab[aria-selected=true]"), ok(document.querySelector("#headers-tab[aria-selected=true]"),
@ -42,7 +42,9 @@ add_task(function* () {
"The preview panel should be visible now."); "The preview panel should be visible now.");
let iframe = document.querySelector("#preview-panel iframe"); let iframe = document.querySelector("#preview-panel iframe");
console.log(123)
yield once(iframe, "DOMContentLoaded"); yield once(iframe, "DOMContentLoaded");
console.log(123)
ok(iframe, ok(iframe,
"There should be a response preview iframe available."); "There should be a response preview iframe available.");

18
devtools/client/netmonitor/test/browser_net_icon-preview.js
View file

@ -8,16 +8,16 @@
*/ */
add_task(function* () { add_task(function* () {
let Actions = require("devtools/client/netmonitor/actions/index");
let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL); let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire, NetMonitorController } = let { $, $all, EVENTS, ACTIVITY_TYPE, NetMonitorView, NetMonitorController,
monitor.panelWin; gStore } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { ACTIVITY_TYPE } = windowRequire("devtools/client/netmonitor/constants");
let { EVENTS } = windowRequire("devtools/client/netmonitor/events");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForEvents(); let wait = waitForEvents();
yield performRequests(); yield performRequests();
@ -63,11 +63,11 @@ add_task(function* () {
} }
function checkImageThumbnail() { function checkImageThumbnail() {
is(document.querySelectorAll(".requests-menu-icon[data-type=thumbnail]").length, 1, is($all(".requests-menu-icon[data-type=thumbnail]").length, 1,
"There should be only one image request with a thumbnail displayed."); "There should be only one image request with a thumbnail displayed.");
is(document.querySelector(".requests-menu-icon[data-type=thumbnail]").src, TEST_IMAGE_DATA_URI, is($(".requests-menu-icon[data-type=thumbnail]").src, TEST_IMAGE_DATA_URI,
"The image requests-menu-icon thumbnail is displayed correctly."); "The image requests-menu-icon thumbnail is displayed correctly.");
is(document.querySelector(".requests-menu-icon[data-type=thumbnail]").hidden, false, is($(".requests-menu-icon[data-type=thumbnail]").hidden, false,
"The image requests-menu-icon thumbnail should not be hidden."); "The image requests-menu-icon thumbnail should not be hidden.");
} }
}); });

63
devtools/client/netmonitor/test/browser_net_image-tooltip.js
View file

@ -13,33 +13,25 @@ add_task(function* test() {
let { tab, monitor } = yield initNetMonitor(IMAGE_TOOLTIP_URL); let { tab, monitor } = yield initNetMonitor(IMAGE_TOOLTIP_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire, NetMonitorController } = monitor.panelWin; let { $, EVENTS, ACTIVITY_TYPE, NetMonitorView, NetMonitorController } =
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); monitor.panelWin;
let { ACTIVITY_TYPE } = windowRequire("devtools/client/netmonitor/constants"); let { RequestsMenu } = NetMonitorView;
let { EVENTS } = windowRequire("devtools/client/netmonitor/events"); RequestsMenu.lazyUpdate = true;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
let toolboxDoc = monitor._toolbox.doc;
gStore.dispatch(Actions.batchEnable(false));
let onEvents = waitForNetworkEvents(monitor, IMAGE_TOOLTIP_REQUESTS); let onEvents = waitForNetworkEvents(monitor, IMAGE_TOOLTIP_REQUESTS);
let onThumbnail = monitor.panelWin.once(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED); let onThumbnail = monitor.panelWin.once(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED);
yield performRequests(); yield performRequests();
yield onEvents; yield onEvents;
yield onThumbnail; yield onThumbnail;
info("Checking the image thumbnail after a few requests were made..."); info("Checking the image thumbnail after a few requests were made...");
yield showTooltipAndVerify(toolboxDoc, yield showTooltipAndVerify(RequestsMenu.tooltip, RequestsMenu.getItemAtIndex(0));
document.querySelectorAll(".request-list-item")[0]);
// Hide tooltip before next test, to avoid the situation that tooltip covers // Hide tooltip before next test, to avoid the situation that tooltip covers
// the icon for the request of the next test. // the icon for the request of the next test.
info("Checking the image thumbnail gets hidden..."); info("Checking the image thumbnail gets hidden...");
yield hideTooltipAndVerify(monitor._toolbox.doc, yield hideTooltipAndVerify(RequestsMenu.tooltip, RequestsMenu.getItemAtIndex(0));
document.querySelectorAll(".request-list-item")[0]);
// +1 extra document reload // +1 extra document reload
onEvents = waitForNetworkEvents(monitor, IMAGE_TOOLTIP_REQUESTS + 1); onEvents = waitForNetworkEvents(monitor, IMAGE_TOOLTIP_REQUESTS + 1);
@ -52,13 +44,13 @@ add_task(function* test() {
yield onThumbnail; yield onThumbnail;
info("Checking the image thumbnail after a reload."); info("Checking the image thumbnail after a reload.");
yield showTooltipAndVerify(toolboxDoc, yield showTooltipAndVerify(RequestsMenu.tooltip, RequestsMenu.getItemAtIndex(1));
document.querySelectorAll(".request-list-item")[1]);
info("Checking if the image thumbnail is hidden when mouse leaves the menu widget"); info("Checking if the image thumbnail is hidden when mouse leaves the menu widget");
let requestsListContents = document.querySelector(".requests-menu-contents"); let requestsMenuEl = $(".requests-menu-contents");
EventUtils.synthesizeMouse(requestsListContents, 0, 0, { type: "mouseout" }, monitor.panelWin); let onHidden = RequestsMenu.tooltip.once("hidden");
yield waitUntil(() => !toolboxDoc.querySelector(".tooltip-container.tooltip-visible")); EventUtils.synthesizeMouse(requestsMenuEl, 0, 0, {type: "mouseout"}, monitor.panelWin);
yield onHidden;
yield teardown(monitor); yield teardown(monitor);
@ -69,15 +61,15 @@ add_task(function* test() {
} }
/** /**
* Show a tooltip on the {target} and verify that it was displayed * Show a tooltip on the {requestItem} and verify that it was displayed
* with the expected content. * with the expected content.
*/ */
function* showTooltipAndVerify(toolboxDoc, target) { function* showTooltipAndVerify(tooltip, requestItem) {
let anchor = target.querySelector(".requests-menu-file"); let anchor = $(".requests-menu-file", getItemTarget(RequestsMenu, requestItem));
yield showTooltipOn(toolboxDoc, anchor); yield showTooltipOn(tooltip, anchor);
info("Tooltip was successfully opened for the image request."); info("Tooltip was successfully opened for the image request.");
is(toolboxDoc.querySelector(".tooltip-panel img").src, TEST_IMAGE_DATA_URI, is(tooltip.panel.querySelector("img").src, TEST_IMAGE_DATA_URI,
"The tooltip's image content is displayed correctly."); "The tooltip's image content is displayed correctly.");
} }
@ -85,22 +77,25 @@ add_task(function* test() {
* Trigger a tooltip over an element by sending mousemove event. * Trigger a tooltip over an element by sending mousemove event.
* @return a promise that resolves when the tooltip is shown * @return a promise that resolves when the tooltip is shown
*/ */
function* showTooltipOn(toolboxDoc, element) { function showTooltipOn(tooltip, element) {
let onShown = tooltip.once("shown");
let win = element.ownerDocument.defaultView; let win = element.ownerDocument.defaultView;
EventUtils.synthesizeMouseAtCenter(element, { type: "mousemove" }, win); EventUtils.synthesizeMouseAtCenter(element, {type: "mousemove"}, win);
yield waitUntil(() => toolboxDoc.querySelector(".tooltip-panel img")); return onShown;
} }
/** /**
* Hide a tooltip on the {target} and verify that it was closed. * Hide a tooltip on the {requestItem} and verify that it was closed.
*/ */
function* hideTooltipAndVerify(toolboxDoc, target) { function* hideTooltipAndVerify(tooltip, requestItem) {
// Hovering over the "method" column hides the tooltip. // Hovering over the "method" column hides the tooltip.
let anchor = target.querySelector(".requests-menu-method"); let anchor = $(".requests-menu-method", getItemTarget(RequestsMenu, requestItem));
let win = anchor.ownerDocument.defaultView;
EventUtils.synthesizeMouseAtCenter(anchor, { type: "mousemove" }, win); let onTooltipHidden = tooltip.once("hidden");
let win = anchor.ownerDocument.defaultView;
EventUtils.synthesizeMouseAtCenter(anchor, {type: "mousemove"}, win);
yield onTooltipHidden;
yield waitUntil(() => !toolboxDoc.querySelector(".tooltip-container.tooltip-visible"));
info("Tooltip was successfully closed."); info("Tooltip was successfully closed.");
} }
}); });

11
devtools/client/netmonitor/test/browser_net_json-b64.js
View file

@ -12,10 +12,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(JSON_B64_URL); let { tab, monitor } = yield initNetMonitor(JSON_B64_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -24,10 +24,9 @@ add_task(function* () {
yield wait; yield wait;
wait = waitForDOM(document, "#response-panel"); wait = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#response-tab").click();
document.querySelector("#response-tab"));
yield wait; yield wait;
let tabpanel = document.querySelector("#response-panel"); let tabpanel = document.querySelector("#response-panel");

24
devtools/client/netmonitor/test/browser_net_json-long.js
View file

@ -17,14 +17,10 @@ add_task(function* () {
// in a variables view instance. Debug builds are slow. // in a variables view instance. Debug builds are slow.
requestLongerTimeout(4); requestLongerTimeout(4);
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -32,13 +28,8 @@ add_task(function* () {
}); });
yield wait; yield wait;
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
document, "GET", CONTENT_TYPE_SJS + "?fmt=json-long", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(0),
"GET",
CONTENT_TYPE_SJS + "?fmt=json-long",
{
status: 200, status: 200,
statusText: "OK", statusText: "OK",
type: "json", type: "json",
@ -49,10 +40,9 @@ add_task(function* () {
}); });
wait = waitForDOM(document, "#response-panel"); wait = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#response-tab").click();
document.querySelector("#response-tab"));
yield wait; yield wait;
testResponseTab(); testResponseTab();

24
devtools/client/netmonitor/test/browser_net_json-malformed.js
View file

@ -12,14 +12,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(JSON_MALFORMED_URL); let { tab, monitor } = yield initNetMonitor(JSON_MALFORMED_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -27,13 +23,8 @@ add_task(function* () {
}); });
yield wait; yield wait;
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
document, "GET", CONTENT_TYPE_SJS + "?fmt=json-malformed", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(0),
"GET",
CONTENT_TYPE_SJS + "?fmt=json-malformed",
{
status: 200, status: 200,
statusText: "OK", statusText: "OK",
type: "json", type: "json",
@ -41,10 +32,9 @@ add_task(function* () {
}); });
wait = waitForDOM(document, "#response-panel .editor-mount iframe"); wait = waitForDOM(document, "#response-panel .editor-mount iframe");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#response-tab").click();
document.querySelector("#response-tab"));
let [editor] = yield wait; let [editor] = yield wait;
yield once(editor, "DOMContentLoaded"); yield once(editor, "DOMContentLoaded");
yield waitForDOM(editor.contentDocument, ".CodeMirror-code"); yield waitForDOM(editor.contentDocument, ".CodeMirror-code");

19
devtools/client/netmonitor/test/browser_net_json-null.js
View file

@ -13,14 +13,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(JSON_BASIC_URL + "?name=null"); let { tab, monitor } = yield initNetMonitor(JSON_BASIC_URL + "?name=null");
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -73,9 +69,10 @@ function checkResponsePanelDisplaysJSON(doc) {
*/ */
function openResponsePanel(document) { function openResponsePanel(document) {
let onReponsePanelReady = waitForDOM(document, "#response-panel"); let onReponsePanelReady = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent(
document.querySelector(".network-details-panel-toggle")); { type: "mousedown" },
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector(".network-details-panel-toggle")
document.querySelector("#response-tab")); );
document.querySelector("#response-tab").click();
return onReponsePanelReady; return onReponsePanelReady;
} }

24
devtools/client/netmonitor/test/browser_net_json_custom_mime.js
View file

@ -13,14 +13,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(JSON_CUSTOM_MIME_URL); let { tab, monitor } = yield initNetMonitor(JSON_CUSTOM_MIME_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -28,13 +24,8 @@ add_task(function* () {
}); });
yield wait; yield wait;
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
document, "GET", CONTENT_TYPE_SJS + "?fmt=json-custom-mime", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(0),
"GET",
CONTENT_TYPE_SJS + "?fmt=json-custom-mime",
{
status: 200, status: 200,
statusText: "OK", statusText: "OK",
type: "x-bigcorp-json", type: "x-bigcorp-json",
@ -44,10 +35,9 @@ add_task(function* () {
}); });
wait = waitForDOM(document, "#response-panel"); wait = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#response-tab").click();
document.querySelector("#response-tab"));
yield wait; yield wait;
testResponseTab(); testResponseTab();

24
devtools/client/netmonitor/test/browser_net_json_text_mime.js
View file

@ -13,14 +13,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(JSON_TEXT_MIME_URL); let { tab, monitor } = yield initNetMonitor(JSON_TEXT_MIME_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -28,13 +24,8 @@ add_task(function* () {
}); });
yield wait; yield wait;
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
document, "GET", CONTENT_TYPE_SJS + "?fmt=json-text-mime", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(0),
"GET",
CONTENT_TYPE_SJS + "?fmt=json-text-mime",
{
status: 200, status: 200,
statusText: "OK", statusText: "OK",
type: "plain", type: "plain",
@ -44,10 +35,9 @@ add_task(function* () {
}); });
wait = waitForDOM(document, "#response-panel"); wait = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#response-tab").click();
document.querySelector("#response-tab"));
yield wait; yield wait;
testResponseTab(); testResponseTab();

36
devtools/client/netmonitor/test/browser_net_jsonp.js
View file

@ -13,14 +13,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(JSONP_URL); let { tab, monitor } = yield initNetMonitor(JSONP_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 2); let wait = waitForNetworkEvents(monitor, 2);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -28,13 +24,8 @@ add_task(function* () {
}); });
yield wait; yield wait;
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
document, "GET", CONTENT_TYPE_SJS + "?fmt=jsonp&jsonp=$_0123Fun", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(0),
"GET",
CONTENT_TYPE_SJS + "?fmt=jsonp&jsonp=$_0123Fun",
{
status: 200, status: 200,
statusText: "OK", statusText: "OK",
type: "json", type: "json",
@ -42,13 +33,8 @@ add_task(function* () {
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 41), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 41),
time: true time: true
}); });
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(1),
document, "GET", CONTENT_TYPE_SJS + "?fmt=jsonp2&jsonp=$_4567Sad", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(1),
"GET",
CONTENT_TYPE_SJS + "?fmt=jsonp2&jsonp=$_4567Sad",
{
status: 200, status: 200,
statusText: "OK", statusText: "OK",
type: "json", type: "json",
@ -58,17 +44,15 @@ add_task(function* () {
}); });
wait = waitForDOM(document, "#response-panel"); wait = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#response-tab").click();
document.querySelector("#response-tab"));
yield wait; yield wait;
testResponseTab("$_0123Fun", "\"Hello JSONP!\""); testResponseTab("$_0123Fun", "\"Hello JSONP!\"");
wait = waitForDOM(document, "#response-panel .tree-section"); wait = waitForDOM(document, "#response-panel .tree-section");
EventUtils.sendMouseEvent({ type: "mousedown" }, RequestsMenu.selectedIndex = 1;
document.querySelectorAll(".request-list-item")[1]);
yield wait; yield wait;
testResponseTab("$_4567Sad", "\"Hello weird JSONP!\""); testResponseTab("$_4567Sad", "\"Hello weird JSONP!\"");

24
devtools/client/netmonitor/test/browser_net_large-response.js
View file

@ -17,14 +17,10 @@ add_task(function* () {
// is going to be requested and displayed in the source editor. // is going to be requested and displayed in the source editor.
requestLongerTimeout(2); requestLongerTimeout(2);
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, HTML_LONG_URL, function* (url) { yield ContentTask.spawn(tab.linkedBrowser, HTML_LONG_URL, function* (url) {
@ -32,22 +28,16 @@ add_task(function* () {
}); });
yield wait; yield wait;
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
document, "GET", CONTENT_TYPE_SJS + "?fmt=html-long", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(0),
"GET",
CONTENT_TYPE_SJS + "?fmt=html-long",
{
status: 200, status: 200,
statusText: "OK" statusText: "OK"
}); });
let waitDOM = waitForDOM(document, "#response-panel .editor-mount iframe"); let waitDOM = waitForDOM(document, "#response-panel .editor-mount iframe");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#response-tab").click();
document.querySelector("#response-tab"));
let [editor] = yield waitDOM; let [editor] = yield waitDOM;
yield once(editor, "DOMContentLoaded"); yield once(editor, "DOMContentLoaded");
yield waitForDOM(editor.contentDocument, ".CodeMirror-code"); yield waitForDOM(editor.contentDocument, ".CodeMirror-code");

21
devtools/client/netmonitor/test/browser_net_open_request_in_tab.js
View file

@ -11,14 +11,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
info("Starting test..."); info("Starting test...");
let { document, gStore, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -26,16 +22,11 @@ add_task(function* () {
}); });
yield wait; yield wait;
EventUtils.sendMouseEvent({ type: "mousedown" }, let requestItem = RequestsMenu.getItemAtIndex(0);
document.querySelectorAll(".request-list-item")[0]); RequestsMenu.selectedItem = requestItem;
EventUtils.sendMouseEvent({ type: "contextmenu" },
document.querySelectorAll(".request-list-item")[0]);
let onTabOpen = once(gBrowser.tabContainer, "TabOpen", false); let onTabOpen = once(gBrowser.tabContainer, "TabOpen", false);
// Context menu is appending in XUL document, we must select it from RequestsMenu.contextMenu.openRequestInTab();
// _toolbox.doc
monitor._toolbox.doc
.querySelector("#request-menu-context-newtab").click();
yield onTabOpen; yield onTabOpen;
ok(true, "A new tab has been opened"); ok(true, "A new tab has been opened");

3
devtools/client/netmonitor/test/browser_net_page-nav.js
View file

@ -12,8 +12,7 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
info("Starting test... "); info("Starting test... ");
let { windowRequire } = monitor.panelWin; let { EVENTS } = monitor.panelWin;
let { EVENTS } = windowRequire("devtools/client/netmonitor/events");
yield testNavigate(); yield testNavigate();
yield testNavigateBack(); yield testNavigateBack();

9
devtools/client/netmonitor/test/browser_net_pane-collapse.js
View file

@ -11,8 +11,7 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
info("Starting test... "); info("Starting test... ");
let { document, windowRequire } = monitor.panelWin; let { document, Prefs } = monitor.panelWin;
let { Prefs } = windowRequire("devtools/client/netmonitor/prefs");
let detailsPaneToggleButton = document.querySelector(".network-details-panel-toggle"); let detailsPaneToggleButton = document.querySelector(".network-details-panel-toggle");
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
@ -23,7 +22,7 @@ add_task(function* () {
detailsPaneToggleButton.classList.contains("pane-collapsed"), detailsPaneToggleButton.classList.contains("pane-collapsed"),
"The details panel should initially be hidden."); "The details panel should initially be hidden.");
EventUtils.sendMouseEvent({ type: "click" }, detailsPaneToggleButton); EventUtils.sendMouseEvent({ type: "mousedown" }, detailsPaneToggleButton);
is(~~(document.querySelector(".network-details-panel").clientWidth), is(~~(document.querySelector(".network-details-panel").clientWidth),
Prefs.networkDetailsWidth, Prefs.networkDetailsWidth,
@ -32,13 +31,13 @@ add_task(function* () {
!detailsPaneToggleButton.classList.contains("pane-collapsed"), !detailsPaneToggleButton.classList.contains("pane-collapsed"),
"The details panel should at this point be visible."); "The details panel should at this point be visible.");
EventUtils.sendMouseEvent({ type: "click" }, detailsPaneToggleButton); EventUtils.sendMouseEvent({ type: "mousedown" }, detailsPaneToggleButton);
ok(!document.querySelector(".network-details-panel") && ok(!document.querySelector(".network-details-panel") &&
detailsPaneToggleButton.classList.contains("pane-collapsed"), detailsPaneToggleButton.classList.contains("pane-collapsed"),
"The details panel should not be visible after collapsing."); "The details panel should not be visible after collapsing.");
EventUtils.sendMouseEvent({ type: "click" }, detailsPaneToggleButton); EventUtils.sendMouseEvent({ type: "mousedown" }, detailsPaneToggleButton);
is(~~(document.querySelector(".network-details-panel").clientWidth), is(~~(document.querySelector(".network-details-panel").clientWidth),
Prefs.networkDetailsWidth, Prefs.networkDetailsWidth,

36
devtools/client/netmonitor/test/browser_net_pane-toggle.js
View file

@ -11,15 +11,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { EVENTS } = windowRequire("devtools/client/netmonitor/events"); let { NETWORK_EVENT } = monitor.panelWin.EVENTS;
let { RequestsMenu.lazyUpdate = false;
getSelectedRequest,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
let toggleButton = document.querySelector(".network-details-panel-toggle"); let toggleButton = document.querySelector(".network-details-panel-toggle");
@ -30,10 +25,10 @@ add_task(function* () {
"collapsed when the frontend is opened."); "collapsed when the frontend is opened.");
is(!!document.querySelector(".network-details-panel"), false, is(!!document.querySelector(".network-details-panel"), false,
"The details pane should be hidden when the frontend is opened."); "The details pane should be hidden when the frontend is opened.");
is(getSelectedRequest(gStore.getState()), null, is(RequestsMenu.selectedItem, null,
"There should be no selected item in the requests menu."); "There should be no selected item in the requests menu.");
let networkEvent = monitor.panelWin.once(EVENTS.NETWORK_EVENT); let networkEvent = monitor.panelWin.once(NETWORK_EVENT);
tab.linkedBrowser.reload(); tab.linkedBrowser.reload();
yield networkEvent; yield networkEvent;
@ -44,10 +39,10 @@ add_task(function* () {
"collapsed after the first request."); "collapsed after the first request.");
is(!!document.querySelector(".network-details-panel"), false, is(!!document.querySelector(".network-details-panel"), false,
"The details pane should still be hidden after the first request."); "The details pane should still be hidden after the first request.");
is(getSelectedRequest(gStore.getState()), null, is(RequestsMenu.selectedItem, null,
"There should still be no selected item in the requests menu."); "There should still be no selected item in the requests menu.");
EventUtils.sendMouseEvent({ type: "click" }, toggleButton); EventUtils.sendMouseEvent({ type: "mousedown" }, toggleButton);
is(toggleButton.hasAttribute("disabled"), false, is(toggleButton.hasAttribute("disabled"), false,
"The pane toggle button should still be enabled after being pressed."); "The pane toggle button should still be enabled after being pressed.");
@ -56,12 +51,12 @@ add_task(function* () {
"not collapsed anymore after being pressed."); "not collapsed anymore after being pressed.");
is(!!document.querySelector(".network-details-panel"), true, is(!!document.querySelector(".network-details-panel"), true,
"The details pane should not be hidden after toggle button was pressed."); "The details pane should not be hidden after toggle button was pressed.");
isnot(getSelectedRequest(gStore.getState()), null, isnot(RequestsMenu.selectedItem, null,
"There should be a selected item in the requests menu."); "There should be a selected item in the requests menu.");
is(getSelectedIndex(gStore.getState()), 0, is(RequestsMenu.selectedIndex, 0,
"The first item should be selected in the requests menu."); "The first item should be selected in the requests menu.");
EventUtils.sendMouseEvent({ type: "click" }, toggleButton); EventUtils.sendMouseEvent({ type: "mousedown" }, toggleButton);
is(toggleButton.hasAttribute("disabled"), false, is(toggleButton.hasAttribute("disabled"), false,
"The pane toggle button should still be enabled after being pressed again."); "The pane toggle button should still be enabled after being pressed again.");
@ -70,15 +65,8 @@ add_task(function* () {
"collapsed after being pressed again."); "collapsed after being pressed again.");
is(!!document.querySelector(".network-details-panel"), false, is(!!document.querySelector(".network-details-panel"), false,
"The details pane should now be hidden after the toggle button was pressed again."); "The details pane should now be hidden after the toggle button was pressed again.");
is(getSelectedRequest(gStore.getState()), null, is(RequestsMenu.selectedItem, null,
"There should now be no selected item in the requests menu."); "There should now be no selected item in the requests menu.");
yield teardown(monitor); yield teardown(monitor);
function getSelectedIndex(state) {
if (!state.requests.selectedId) {
return -1;
}
return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
}
}); });

15
devtools/client/netmonitor/test/browser_net_persistent_logs.js
View file

@ -12,20 +12,21 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(SINGLE_GET_URL); let { tab, monitor } = yield initNetMonitor(SINGLE_GET_URL);
info("Starting test... "); info("Starting test... ");
let { document, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
Services.prefs.setBoolPref("devtools.webconsole.persistlog", false); Services.prefs.setBoolPref("devtools.webconsole.persistlog", false);
yield reloadAndWait(); yield reloadAndWait();
is(document.querySelectorAll(".request-list-item").length, 2, is(RequestsMenu.itemCount, 2,
"The request list should have two items at this point."); "The request menu should have two items at this point.");
yield reloadAndWait(); yield reloadAndWait();
// Since the reload clears the log, we still expect two requests in the log // Since the reload clears the log, we still expect two requests in the log
is(document.querySelectorAll(".request-list-item").length, 2, is(RequestsMenu.itemCount, 2,
"The request list should still have two items at this point."); "The request menu should still have two items at this point.");
// Now we toggle the persistence logs on // Now we toggle the persistence logs on
Services.prefs.setBoolPref("devtools.webconsole.persistlog", true); Services.prefs.setBoolPref("devtools.webconsole.persistlog", true);
@ -33,8 +34,8 @@ add_task(function* () {
yield reloadAndWait(); yield reloadAndWait();
// Since we togged the persistence logs, we expect four items after the reload // Since we togged the persistence logs, we expect four items after the reload
is(document.querySelectorAll(".request-list-item").length, 4, is(RequestsMenu.itemCount, 4,
"The request list should now have four items at this point."); "The request menu should now have four items at this point.");
Services.prefs.setBoolPref("devtools.webconsole.persistlog", false); Services.prefs.setBoolPref("devtools.webconsole.persistlog", false);
return teardown(monitor); return teardown(monitor);

36
devtools/client/netmonitor/test/browser_net_post-data-01.js
View file

@ -16,14 +16,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(POST_DATA_URL); let { tab, monitor } = yield initNetMonitor(POST_DATA_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 0, 2); let wait = waitForNetworkEvents(monitor, 0, 2);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -31,13 +27,8 @@ add_task(function* () {
}); });
yield wait; yield wait;
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
document, "POST", SIMPLE_SJS + "?foo=bar&baz=42&type=urlencoded", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(0),
"POST",
SIMPLE_SJS + "?foo=bar&baz=42&type=urlencoded",
{
status: 200, status: 200,
statusText: "Och Aye", statusText: "Och Aye",
type: "plain", type: "plain",
@ -45,13 +36,8 @@ add_task(function* () {
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12),
time: true time: true
}); });
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(1),
document, "POST", SIMPLE_SJS + "?foo=bar&baz=42&type=multipart", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(1),
"POST",
SIMPLE_SJS + "?foo=bar&baz=42&type=multipart",
{
status: 200, status: 200,
statusText: "Och Aye", statusText: "Och Aye",
type: "plain", type: "plain",
@ -63,17 +49,15 @@ add_task(function* () {
// Wait for all tree sections updated by react // Wait for all tree sections updated by react
wait = waitForDOM(document, "#params-panel .tree-section", 2); wait = waitForDOM(document, "#params-panel .tree-section", 2);
EventUtils.sendMouseEvent({ type: "mousedown" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[0]); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#params-tab").click();
document.querySelector("#params-tab"));
yield wait; yield wait;
yield testParamsTab("urlencoded"); yield testParamsTab("urlencoded");
// Wait for all tree sections and editor updated by react // Wait for all tree sections and editor updated by react
let waitForSections = waitForDOM(document, "#params-panel .tree-section", 2); let waitForSections = waitForDOM(document, "#params-panel .tree-section", 2);
let waitForEditor = waitForDOM(document, "#params-panel .editor-mount iframe"); let waitForEditor = waitForDOM(document, "#params-panel .editor-mount iframe");
EventUtils.sendMouseEvent({ type: "mousedown" }, RequestsMenu.selectedIndex = 1;
document.querySelectorAll(".request-list-item")[1]);
let [, editorFrames] = yield Promise.all([waitForSections, waitForEditor]); let [, editorFrames] = yield Promise.all([waitForSections, waitForEditor]);
yield once(editorFrames[0], "DOMContentLoaded"); yield once(editorFrames[0], "DOMContentLoaded");
yield waitForDOM(editorFrames[0].contentDocument, ".CodeMirror-code"); yield waitForDOM(editorFrames[0].contentDocument, ".CodeMirror-code");

15
devtools/client/netmonitor/test/browser_net_post-data-02.js
View file

@ -14,14 +14,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(POST_RAW_URL); let { tab, monitor } = yield initNetMonitor(POST_RAW_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 0, 1); let wait = waitForNetworkEvents(monitor, 0, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -32,9 +28,8 @@ add_task(function* () {
// Wait for all tree view updated by react // Wait for all tree view updated by react
wait = waitForDOM(document, "#params-panel .tree-section"); wait = waitForDOM(document, "#params-panel .tree-section");
EventUtils.sendMouseEvent({ type: "mousedown" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[0]); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#params-tab").click();
document.querySelector("#params-tab"));
yield wait; yield wait;
let tabpanel = document.querySelector("#params-panel"); let tabpanel = document.querySelector("#params-panel");

14
devtools/client/netmonitor/test/browser_net_post-data-03.js
View file

@ -14,10 +14,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(POST_RAW_WITH_HEADERS_URL); let { tab, monitor } = yield initNetMonitor(POST_RAW_WITH_HEADERS_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 0, 1); let wait = waitForNetworkEvents(monitor, 0, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -27,10 +27,9 @@ add_task(function* () {
// Wait for all tree view updated by react // Wait for all tree view updated by react
wait = waitForDOM(document, "#headers-panel"); wait = waitForDOM(document, "#headers-panel");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#headers-tab").click();
document.querySelector("#headers-tab"));
yield wait; yield wait;
let tabpanel = document.querySelector("#headers-panel"); let tabpanel = document.querySelector("#headers-panel");
@ -59,8 +58,7 @@ add_task(function* () {
// Wait for all tree sections updated by react // Wait for all tree sections updated by react
wait = waitForDOM(document, "#params-panel .tree-section"); wait = waitForDOM(document, "#params-panel .tree-section");
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#params-tab").click();
document.querySelector("#params-tab"));
yield wait; yield wait;
tabpanel = document.querySelector("#params-panel"); tabpanel = document.querySelector("#params-panel");

11
devtools/client/netmonitor/test/browser_net_post-data-04.js
View file

@ -14,10 +14,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(POST_JSON_URL); let { tab, monitor } = yield initNetMonitor(POST_JSON_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 0, 1); let wait = waitForNetworkEvents(monitor, 0, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -27,10 +27,9 @@ add_task(function* () {
// Wait for all tree view updated by react // Wait for all tree view updated by react
wait = waitForDOM(document, "#params-panel .tree-section"); wait = waitForDOM(document, "#params-panel .tree-section");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#params-tab").click();
document.querySelector("#params-tab"));
yield wait; yield wait;
let tabpanel = document.querySelector("#params-panel"); let tabpanel = document.querySelector("#params-panel");

6
devtools/client/netmonitor/test/browser_net_prefs-and-l10n.js
View file

@ -13,8 +13,8 @@ add_task(function* () {
let { monitor } = yield initNetMonitor(SIMPLE_URL); let { monitor } = yield initNetMonitor(SIMPLE_URL);
info("Starting test... "); info("Starting test... ");
let { windowRequire } = monitor.panelWin; ok(monitor.panelWin.Prefs,
let { Prefs } = windowRequire("devtools/client/netmonitor/prefs"); "Should have a preferences object available on the panel window.");
testL10N(); testL10N();
testPrefs(); testPrefs();
@ -29,6 +29,8 @@ add_task(function* () {
} }
function testPrefs() { function testPrefs() {
let { Prefs } = monitor.panelWin;
is(Prefs.networkDetailsWidth, is(Prefs.networkDetailsWidth,
Services.prefs.getIntPref("devtools.netmonitor.panes-network-details-width"), Services.prefs.getIntPref("devtools.netmonitor.panes-network-details-width"),
"Getting a pref should work correctly."); "Getting a pref should work correctly.");

14
devtools/client/netmonitor/test/browser_net_raw_headers.js
View file

@ -11,11 +11,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(POST_DATA_URL); let { tab, monitor } = yield initNetMonitor(POST_DATA_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 0, 2); let wait = waitForNetworkEvents(monitor, 0, 2);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -23,9 +22,10 @@ add_task(function* () {
}); });
yield wait; yield wait;
let origItem = RequestsMenu.getItemAtIndex(0);
wait = waitForDOM(document, ".headers-overview"); wait = waitForDOM(document, ".headers-overview");
EventUtils.sendMouseEvent({ type: "mousedown" }, RequestsMenu.selectedItem = origItem;
document.querySelectorAll(".request-list-item")[0]);
yield wait; yield wait;
wait = waitForDOM(document, ".raw-headers-container textarea", 2); wait = waitForDOM(document, ".raw-headers-container textarea", 2);
@ -33,7 +33,7 @@ add_task(function* () {
document.querySelectorAll(".headers-summary .tool-button")[1]); document.querySelectorAll(".headers-summary .tool-button")[1]);
yield wait; yield wait;
testShowRawHeaders(getSortedRequests(gStore.getState()).get(0)); testShowRawHeaders(origItem);
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "click" },
document.querySelectorAll(".headers-summary .tool-button")[1]); document.querySelectorAll(".headers-summary .tool-button")[1]);

10
devtools/client/netmonitor/test/browser_net_reload-button.js
View file

@ -11,15 +11,15 @@ add_task(function* () {
let { monitor } = yield initNetMonitor(SIMPLE_URL); let { monitor } = yield initNetMonitor(SIMPLE_URL);
info("Starting test... "); info("Starting test... ");
let { document } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
EventUtils.sendMouseEvent({ type: "click" }, let button = document.querySelector("#requests-menu-reload-notice-button");
document.querySelector("#requests-menu-reload-notice-button")); button.click();
yield wait; yield wait;
is(document.querySelectorAll(".request-list-item").length, 1, is(RequestsMenu.itemCount, 1, "The request menu should have one item after reloading");
"The request list should have one item after reloading");
return teardown(monitor); return teardown(monitor);
}); });

3
devtools/client/netmonitor/test/browser_net_reload-markers.js
View file

@ -11,8 +11,7 @@ add_task(function* () {
let { monitor } = yield initNetMonitor(SIMPLE_URL); let { monitor } = yield initNetMonitor(SIMPLE_URL);
info("Starting test... "); info("Starting test... ");
let { document, windowRequire } = monitor.panelWin; let { document, EVENTS } = monitor.panelWin;
let { EVENTS } = windowRequire("devtools/client/netmonitor/events");
let button = document.querySelector("#requests-menu-reload-notice-button"); let button = document.querySelector("#requests-menu-reload-notice-button");
button.click(); button.click();

21
devtools/client/netmonitor/test/browser_net_req-resp-bodies.js
View file

@ -13,14 +13,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(JSON_LONG_URL); let { tab, monitor } = yield initNetMonitor(JSON_LONG_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
// Perform first batch of requests. // Perform first batch of requests.
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
@ -57,14 +53,9 @@ add_task(function* () {
return teardown(monitor); return teardown(monitor);
function verifyRequest(index) { function verifyRequest(offset) {
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(offset),
document, "GET", CONTENT_TYPE_SJS + "?fmt=json-long", {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(index),
"GET",
CONTENT_TYPE_SJS + "?fmt=json-long",
{
status: 200, status: 200,
statusText: "OK", statusText: "OK",
type: "json", type: "json",

25
devtools/client/netmonitor/test/browser_net_resend.js
View file

@ -16,14 +16,12 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(POST_DATA_URL); let { tab, monitor } = yield initNetMonitor(POST_DATA_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { panelWin } = monitor;
let { document, gStore, NetMonitorView, windowRequire } = panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let Actions = windowRequire("devtools/client/netmonitor/actions/index");
let { let { RequestsMenu } = NetMonitorView;
getSelectedRequest,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 0, 2); let wait = waitForNetworkEvents(monitor, 0, 2);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -31,22 +29,22 @@ add_task(function* () {
}); });
yield wait; yield wait;
let origItem = getSortedRequests(gStore.getState()).get(0); let origItem = RequestsMenu.getItemAtIndex(0);
gStore.dispatch(Actions.selectRequest(origItem.id)); RequestsMenu.selectedItem = origItem;
// add a new custom request cloned from selected request // add a new custom request cloned from selected request
gStore.dispatch(Actions.cloneSelectedRequest()); gStore.dispatch(Actions.cloneSelectedRequest());
testCustomForm(origItem); testCustomForm(origItem);
let customItem = getSelectedRequest(gStore.getState()); let customItem = RequestsMenu.selectedItem;
testCustomItem(customItem, origItem); testCustomItem(customItem, origItem);
// edit the custom request // edit the custom request
yield editCustomForm(); yield editCustomForm();
// FIXME: reread the customItem, it's been replaced by a new object (immutable!) // FIXME: reread the customItem, it's been replaced by a new object (immutable!)
customItem = getSelectedRequest(gStore.getState()); customItem = RequestsMenu.selectedItem;
testCustomItemChanged(customItem, origItem); testCustomItemChanged(customItem, origItem);
// send the new request // send the new request
@ -54,7 +52,7 @@ add_task(function* () {
gStore.dispatch(Actions.sendCustomRequest()); gStore.dispatch(Actions.sendCustomRequest());
yield wait; yield wait;
let sentItem = getSelectedRequest(gStore.getState()); let sentItem = RequestsMenu.selectedItem;
testSentRequest(sentItem, origItem); testSentRequest(sentItem, origItem);
return teardown(monitor); return teardown(monitor);
@ -75,7 +73,6 @@ add_task(function* () {
* Test that the New Request form was populated correctly * Test that the New Request form was populated correctly
*/ */
function testCustomForm(data) { function testCustomForm(data) {
yield waitUntil(() => document.querySelector(".custom-request-panel"));
is(document.getElementById("custom-method-value").value, data.method, is(document.getElementById("custom-method-value").value, data.method,
"new request form showing correct method"); "new request form showing correct method");
@ -100,7 +97,7 @@ add_task(function* () {
* Add some params and headers to the request form * Add some params and headers to the request form
*/ */
function* editCustomForm() { function* editCustomForm() {
monitor.panelWin.focus(); panelWin.focus();
let query = document.getElementById("custom-query-value"); let query = document.getElementById("custom-query-value");
let queryFocus = once(query, "focus", false); let queryFocus = once(query, "focus", false);
@ -157,7 +154,7 @@ add_task(function* () {
function type(string) { function type(string) {
for (let ch of string) { for (let ch of string) {
EventUtils.synthesizeKey(ch, {}, monitor.panelWin); EventUtils.synthesizeKey(ch, {}, panelWin);
} }
} }
}); });

13
devtools/client/netmonitor/test/browser_net_resend_cors.js
View file

@ -12,14 +12,11 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CORS_URL); let { tab, monitor } = yield initNetMonitor(CORS_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { gStore, NetMonitorView, windowRequire } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let Actions = windowRequire("devtools/client/netmonitor/actions/index");
let { let { RequestsMenu } = NetMonitorView;
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let requestUrl = "http://test1.example.com" + CORS_SJS_PATH; let requestUrl = "http://test1.example.com" + CORS_SJS_PATH;
@ -31,7 +28,7 @@ add_task(function* () {
yield wait; yield wait;
const METHODS = ["OPTIONS", "POST"]; const METHODS = ["OPTIONS", "POST"];
const ITEMS = METHODS.map((val, i) => getSortedRequests(gStore.getState()).get(i)); const ITEMS = METHODS.map((val, i) => RequestsMenu.getItemAtIndex(i));
// Check the requests that were sent // Check the requests that were sent
ITEMS.forEach((item, i) => { ITEMS.forEach((item, i) => {
@ -44,7 +41,7 @@ add_task(function* () {
let onRequests = waitForNetworkEvents(monitor, 1, 0); let onRequests = waitForNetworkEvents(monitor, 1, 0);
ITEMS.forEach((item) => { ITEMS.forEach((item) => {
info(`Selecting the ${item.method} request`); info(`Selecting the ${item.method} request`);
gStore.dispatch(Actions.selectRequest(item.id)) RequestsMenu.selectedItem = item;
info("Cloning the selected request into a custom clone"); info("Cloning the selected request into a custom clone");
gStore.dispatch(Actions.cloneSelectedRequest()); gStore.dispatch(Actions.cloneSelectedRequest());

12
devtools/client/netmonitor/test/browser_net_resend_headers.js
View file

@ -11,14 +11,10 @@ add_task(function* () {
let { monitor } = yield initNetMonitor(SIMPLE_SJS); let { monitor } = yield initNetMonitor(SIMPLE_SJS);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire, NetMonitorController } = monitor.panelWin; let { NetMonitorView, NetMonitorController } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let requestUrl = SIMPLE_SJS; let requestUrl = SIMPLE_SJS;
let requestHeaders = [ let requestHeaders = [
@ -39,7 +35,7 @@ add_task(function* () {
}); });
yield wait; yield wait;
let item = getSortedRequests(gStore.getState()).get(0); let item = RequestsMenu.getItemAtIndex(0);
is(item.method, "POST", "The request has the right method"); is(item.method, "POST", "The request has the right method");
is(item.url, requestUrl, "The request has the right URL"); is(item.url, requestUrl, "The request has the right URL");

11
devtools/client/netmonitor/test/browser_net_security-details.js
View file

@ -9,10 +9,10 @@
add_task(function* () { add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
info("Performing a secure request."); info("Performing a secure request.");
const REQUESTS_URL = "https://example.com" + CORS_SJS_PATH; const REQUESTS_URL = "https://example.com" + CORS_SJS_PATH;
@ -23,10 +23,9 @@ add_task(function* () {
yield wait; yield wait;
wait = waitForDOM(document, "#security-panel"); wait = waitForDOM(document, "#security-panel");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#security-tab").click();
document.querySelector("#security-tab"));
yield wait; yield wait;
let tabpanel = document.querySelector("#security-panel"); let tabpanel = document.querySelector("#security-panel");

11
devtools/client/netmonitor/test/browser_net_security-error.js
View file

@ -9,11 +9,9 @@
add_task(function* () { add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
let { document, gStore, windowRequire } = monitor.panelWin; let { document, EVENTS, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index");
let { EVENTS } = windowRequire("devtools/client/netmonitor/events");
gStore.dispatch(Actions.batchEnable(false)); NetMonitorView.RequestsMenu.lazyUpdate = false;
info("Requesting a resource that has a certificate problem."); info("Requesting a resource that has a certificate problem.");
@ -24,10 +22,9 @@ add_task(function* () {
yield wait; yield wait;
wait = waitForDOM(document, "#security-panel"); wait = waitForDOM(document, "#security-panel");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#security-tab").click();
document.querySelector("#security-tab"));
yield wait; yield wait;
let errormsg = document.querySelector(".security-info-value"); let errormsg = document.querySelector(".security-info-value");

21
devtools/client/netmonitor/test/browser_net_security-icon-click.js
View file

@ -9,25 +9,22 @@
add_task(function* () { add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
info("Requesting a resource over HTTPS."); info("Requesting a resource over HTTPS.");
yield performRequestAndWait("https://example.com" + CORS_SJS_PATH + "?request_2"); yield performRequestAndWait("https://example.com" + CORS_SJS_PATH + "?request_2");
yield performRequestAndWait("https://example.com" + CORS_SJS_PATH + "?request_1"); yield performRequestAndWait("https://example.com" + CORS_SJS_PATH + "?request_1");
is(gStore.getState().requests.requests.size, 2, "Two events event logged."); is(RequestsMenu.itemCount, 2, "Two events event logged.");
console.log(123)
yield clickAndTestSecurityIcon(); yield clickAndTestSecurityIcon();
console.log(123)
info("Selecting headers panel again."); info("Selecting headers panel again.");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector("#headers-tab")); document.querySelector("#headers-tab"));
info("Sorting the items by filename."); info("Sorting the items by filename.");
@ -35,8 +32,9 @@ add_task(function* () {
document.querySelector("#requests-menu-file-button")); document.querySelector("#requests-menu-file-button"));
info("Testing that security icon can be clicked after the items were sorted."); info("Testing that security icon can be clicked after the items were sorted.");
console.log(123)
yield clickAndTestSecurityIcon(); yield clickAndTestSecurityIcon();
console.log(123)
return teardown(monitor); return teardown(monitor);
@ -49,6 +47,7 @@ add_task(function* () {
} }
function* clickAndTestSecurityIcon() { function* clickAndTestSecurityIcon() {
let item = RequestsMenu.getItemAtIndex(0);
let icon = document.querySelector(".requests-security-state-icon"); let icon = document.querySelector(".requests-security-state-icon");
info("Clicking security icon of the first request and waiting for panel update."); info("Clicking security icon of the first request and waiting for panel update.");

23
devtools/client/netmonitor/test/browser_net_security-redirect.js
View file

@ -10,14 +10,9 @@
add_task(function* () { add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
let { document, gStore, windowRequire } = monitor.panelWin; let { $, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { RequestsMenu.lazyUpdate = false;
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
let wait = waitForNetworkEvents(monitor, 2); let wait = waitForNetworkEvents(monitor, 2);
yield ContentTask.spawn(tab.linkedBrowser, HTTPS_REDIRECT_SJS, function* (url) { yield ContentTask.spawn(tab.linkedBrowser, HTTPS_REDIRECT_SJS, function* (url) {
@ -25,13 +20,15 @@ add_task(function* () {
}); });
yield wait; yield wait;
is(gStore.getState().requests.requests.size, 2, "There were two requests due to redirect."); is(RequestsMenu.itemCount, 2, "There were two requests due to redirect.");
let initial = getSortedRequests(gStore.getState()).get(0); let initial = RequestsMenu.getItemAtIndex(0);
let redirect = getSortedRequests(gStore.getState()).get(1); let redirect = RequestsMenu.getItemAtIndex(1);
let initialSecurityIcon = document.querySelectorAll(".requests-security-state-icon")[0]; let initialSecurityIcon =
let redirectSecurityIcon = document.querySelectorAll(".requests-security-state-icon")[1]; $(".requests-security-state-icon", getItemTarget(RequestsMenu, initial));
let redirectSecurityIcon =
$(".requests-security-state-icon", getItemTarget(RequestsMenu, redirect));
ok(initialSecurityIcon.classList.contains("security-state-insecure"), ok(initialSecurityIcon.classList.contains("security-state-insecure"),
"Initial request was marked insecure."); "Initial request was marked insecure.");

23
devtools/client/netmonitor/test/browser_net_security-state.js
View file

@ -17,25 +17,20 @@ add_task(function* () {
}; };
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
let { document, gStore, windowRequire } = monitor.panelWin; let { $, EVENTS, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { RequestsMenu.lazyUpdate = false;
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
yield performRequests(); yield performRequests();
for (let subitemNode of Array.from(document.querySelectorAll( for (let item of RequestsMenu.items) {
"requests-menu-subitem.requests-menu-security-and-domain"))) { let target = getItemTarget(RequestsMenu, item);
let domain = subitemNode.querySelector(".requests-menu-domain").textContent; let domain = $(".requests-menu-domain", target).textContent;
info("Found a request to " + domain); info("Found a request to " + domain);
ok(domain in EXPECTED_SECURITY_STATES, "Domain " + domain + " was expected."); ok(domain in EXPECTED_SECURITY_STATES, "Domain " + domain + " was expected.");
let classes = subitemNode.querySelector(".requests-security-state-icon").classList; let classes = $(".requests-security-state-icon", target).classList;
let expectedClass = EXPECTED_SECURITY_STATES[domain]; let expectedClass = EXPECTED_SECURITY_STATES[domain];
info("Classes of security state icon are: " + classes); info("Classes of security state icon are: " + classes);
@ -90,9 +85,7 @@ add_task(function* () {
yield done; yield done;
const expectedCount = Object.keys(EXPECTED_SECURITY_STATES).length; const expectedCount = Object.keys(EXPECTED_SECURITY_STATES).length;
is(gStore.getState().requests.requests.size, is(RequestsMenu.itemCount, expectedCount, expectedCount + " events logged.");
expectedCount,
expectedCount + " events logged.");
} }
/** /**

6
devtools/client/netmonitor/test/browser_net_security-tab-deselect.js
View file

@ -10,10 +10,10 @@
add_task(function* () { add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
info("Performing requests."); info("Performing requests.");
let wait = waitForNetworkEvents(monitor, 2); let wait = waitForNetworkEvents(monitor, 2);

16
devtools/client/netmonitor/test/browser_net_security-tab-visibility.js
View file

@ -32,11 +32,10 @@ add_task(function* () {
]; ];
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
let { document, gStore, windowRequire } = monitor.panelWin; let { document, EVENTS, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { getSelectedRequest } = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
for (let testcase of TEST_DATA) { for (let testcase of TEST_DATA) {
info("Testing Security tab visibility for " + testcase.desc); info("Testing Security tab visibility for " + testcase.desc);
@ -55,10 +54,9 @@ add_task(function* () {
yield onNewItem; yield onNewItem;
info("Selecting the request."); info("Selecting the request.");
EventUtils.sendMouseEvent({ type: "mousedown" }, RequestsMenu.selectedIndex = 0;
document.querySelectorAll(".request-list-item")[0]);
is(getSelectedRequest(gStore.getState()).securityState, undefined, is(RequestsMenu.selectedItem.securityState, undefined,
"Security state has not yet arrived."); "Security state has not yet arrived.");
is(!!document.querySelector("#security-tab"), testcase.visibleOnNewEvent, is(!!document.querySelector("#security-tab"), testcase.visibleOnNewEvent,
"Security tab is " + (testcase.visibleOnNewEvent ? "visible" : "hidden") + "Security tab is " + (testcase.visibleOnNewEvent ? "visible" : "hidden") +
@ -67,7 +65,7 @@ add_task(function* () {
info("Waiting for security information to arrive."); info("Waiting for security information to arrive.");
yield onSecurityInfo; yield onSecurityInfo;
ok(getSelectedRequest(gStore.getState()).securityState, ok(RequestsMenu.selectedItem.securityState,
"Security state arrived."); "Security state arrived.");
is(!!document.querySelector("#security-tab"), testcase.visibleOnSecurityInfo, is(!!document.querySelector("#security-tab"), testcase.visibleOnSecurityInfo,
"Security tab is " + (testcase.visibleOnSecurityInfo ? "visible" : "hidden") + "Security tab is " + (testcase.visibleOnSecurityInfo ? "visible" : "hidden") +
@ -81,7 +79,7 @@ add_task(function* () {
" after request has been completed."); " after request has been completed.");
info("Clearing requests."); info("Clearing requests.");
gStore.dispatch(Actions.clearRequests()); RequestsMenu.clear();
} }
return teardown(monitor); return teardown(monitor);

11
devtools/client/netmonitor/test/browser_net_security-warnings.js
View file

@ -17,10 +17,10 @@ const TEST_CASES = [
add_task(function* () { add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
for (let test of TEST_CASES) { for (let test of TEST_CASES) {
info("Testing site with " + test.desc); info("Testing site with " + test.desc);
@ -41,8 +41,7 @@ add_task(function* () {
if (!document.querySelector("#security-tab[aria-selected=true]")) { if (!document.querySelector("#security-tab[aria-selected=true]")) {
info("Selecting security tab."); info("Selecting security tab.");
wait = waitForDOM(document, "#security-panel .properties-view"); wait = waitForDOM(document, "#security-panel .properties-view");
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#security-tab").click();
document.querySelector("#security-tab"));
yield wait; yield wait;
} }
@ -50,7 +49,7 @@ add_task(function* () {
test.warnCipher, test.warnCipher,
"Cipher suite warning is hidden."); "Cipher suite warning is hidden.");
gStore.dispatch(Actions.clearRequests()); RequestsMenu.clear();
} }
return teardown(monitor); return teardown(monitor);

13
devtools/client/netmonitor/test/browser_net_send-beacon-other-tab.js
View file

@ -9,16 +9,13 @@
add_task(function* () { add_task(function* () {
let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
let { gStore, windowRequire } = monitor.panelWin; let { RequestsMenu } = monitor.panelWin.NetMonitorView;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); RequestsMenu.lazyUpdate = false;
let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
let beaconTab = yield addTab(SEND_BEACON_URL); let beaconTab = yield addTab(SEND_BEACON_URL);
info("Beacon tab added successfully."); info("Beacon tab added successfully.");
is(gStore.getState().requests.requests.size, 0, "The requests menu should be empty."); is(RequestsMenu.itemCount, 0, "The requests menu should be empty.");
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(beaconTab.linkedBrowser, {}, function* () { yield ContentTask.spawn(beaconTab.linkedBrowser, {}, function* () {
@ -27,8 +24,8 @@ add_task(function* () {
tab.linkedBrowser.reload(); tab.linkedBrowser.reload();
yield wait; yield wait;
is(gStore.getState().requests.requests.size, 1, "Only the reload should be recorded."); is(RequestsMenu.itemCount, 1, "Only the reload should be recorded.");
let request = getSortedRequests(gStore.getState()).get(0); let request = RequestsMenu.getItemAtIndex(0);
is(request.method, "GET", "The method is correct."); is(request.method, "GET", "The method is correct.");
is(request.status, "200", "The status is correct."); is(request.status, "200", "The status is correct.");

12
devtools/client/netmonitor/test/browser_net_send-beacon.js
View file

@ -9,13 +9,11 @@
add_task(function* () { add_task(function* () {
let { tab, monitor } = yield initNetMonitor(SEND_BEACON_URL); let { tab, monitor } = yield initNetMonitor(SEND_BEACON_URL);
let { gStore, windowRequire } = monitor.panelWin; let { RequestsMenu } = monitor.panelWin.NetMonitorView;
let Actions = windowRequire("devtools/client/netmonitor/actions/index");
let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
is(gStore.getState().requests.requests.size, 0, "The requests menu should be empty."); is(RequestsMenu.itemCount, 0, "The requests menu should be empty.");
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
@ -23,8 +21,8 @@ add_task(function* () {
}); });
yield wait; yield wait;
is(gStore.getState().requests.requests.size, 1, "The beacon should be recorded."); is(RequestsMenu.itemCount, 1, "The beacon should be recorded.");
let request = getSortedRequests(gStore.getState()).get(0); let request = RequestsMenu.getItemAtIndex(0);
is(request.method, "POST", "The method is correct."); is(request.method, "POST", "The method is correct.");
ok(request.url.endsWith("beacon_request"), "The URL is correct."); ok(request.url.endsWith("beacon_request"), "The URL is correct.");
is(request.status, "404", "The status is correct."); is(request.status, "404", "The status is correct.");

22
devtools/client/netmonitor/test/browser_net_service-worker-status.js
View file

@ -16,14 +16,8 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(TEST_URL, null, true); let { tab, monitor } = yield initNetMonitor(TEST_URL, null, true);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
const REQUEST_DATA = [ const REQUEST_DATA = [
{ {
@ -54,17 +48,11 @@ add_task(function* () {
let index = 0; let index = 0;
for (let request of REQUEST_DATA) { for (let request of REQUEST_DATA) {
let item = getSortedRequests(gStore.getState()).get(index); let item = RequestsMenu.getItemAtIndex(index);
info(`Verifying request #${index}`); info(`Verifying request #${index}`);
yield verifyRequestItemTarget( yield verifyRequestItemTarget(RequestsMenu, item,
document, request.method, request.uri, request.details);
getDisplayedRequests(gStore.getState()),
item,
request.method,
request.uri,
request.details
);
let { stacktrace } = item.cause; let { stacktrace } = item.cause;
let stackLen = stacktrace ? stacktrace.length : 0; let stackLen = stacktrace ? stacktrace.length : 0;

155
devtools/client/netmonitor/test/browser_net_simple-request-data.js
View file

@ -13,30 +13,24 @@ function test() {
initNetMonitor(SIMPLE_SJS).then(({ tab, monitor }) => { initNetMonitor(SIMPLE_SJS).then(({ tab, monitor }) => {
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { EVENTS } = windowRequire("devtools/client/netmonitor/events");
let {
getDisplayedRequests,
getSelectedRequest,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
waitForNetworkEvents(monitor, 1) waitForNetworkEvents(monitor, 1)
.then(() => teardown(monitor)) .then(() => teardown(monitor))
.then(finish); .then(finish);
monitor.panelWin.once(EVENTS.NETWORK_EVENT, () => { monitor.panelWin.once(monitor.panelWin.EVENTS.NETWORK_EVENT, () => {
is(getSelectedRequest(gStore.getState()), null, is(RequestsMenu.selectedItem, null,
"There shouldn't be any selected item in the requests menu."); "There shouldn't be any selected item in the requests menu.");
is(gStore.getState().requests.requests.size, 1, is(RequestsMenu.itemCount, 1,
"The requests menu should not be empty after the first request."); "The requests menu should not be empty after the first request.");
is(!!document.querySelector(".network-details-panel"), false, is(!!document.querySelector(".network-details-panel"), false,
"The network details panel should still be hidden after first request."); "The network details panel should still be hidden after first request.");
let requestItem = getSortedRequests(gStore.getState()).get(0); let requestItem = RequestsMenu.getItemAtIndex(0);
is(typeof requestItem.id, "string", is(typeof requestItem.id, "string",
"The attached request id is incorrect."); "The attached request id is incorrect.");
@ -74,6 +68,8 @@ function test() {
is(requestItem.contentSize, undefined, is(requestItem.contentSize, undefined,
"The contentSize should not yet be set."); "The contentSize should not yet be set.");
is(requestItem.mimeType, undefined,
"The mimeType should not yet be set.");
is(requestItem.responseContent, undefined, is(requestItem.responseContent, undefined,
"The responseContent should not yet be set."); "The responseContent should not yet be set.");
@ -82,17 +78,11 @@ function test() {
is(requestItem.eventTimings, undefined, is(requestItem.eventTimings, undefined,
"The eventTimings should not yet be set."); "The eventTimings should not yet be set.");
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS);
document,
getDisplayedRequests(gStore.getState()),
requestItem,
"GET",
SIMPLE_SJS
);
}); });
monitor.panelWin.once(EVENTS.RECEIVED_REQUEST_HEADERS, () => { monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_REQUEST_HEADERS, () => {
let requestItem = getSortedRequests(gStore.getState()).get(0); let requestItem = RequestsMenu.getItemAtIndex(0);
ok(requestItem.requestHeaders, ok(requestItem.requestHeaders,
"There should be a requestHeaders data available."); "There should be a requestHeaders data available.");
is(requestItem.requestHeaders.headers.length, 10, is(requestItem.requestHeaders.headers.length, 10,
@ -102,38 +92,26 @@ function test() {
// Can't test for the exact request headers size because the value may // Can't test for the exact request headers size because the value may
// vary across platforms ("User-Agent" header differs). // vary across platforms ("User-Agent" header differs).
verifyRequestItemTarget( verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS);
document,
getDisplayedRequests(gStore.getState()),
requestItem,
"GET",
SIMPLE_SJS
);
}); });
monitor.panelWin.once(EVENTS.RECEIVED_REQUEST_COOKIES, () => { monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_REQUEST_COOKIES, () => {
let requestItem = getSortedRequests(gStore.getState()).get(0); let requestItem = RequestsMenu.getItemAtIndex(0);
ok(requestItem.requestCookies, ok(requestItem.requestCookies,
"There should be a requestCookies data available."); "There should be a requestCookies data available.");
is(requestItem.requestCookies.cookies.length, 2, is(requestItem.requestCookies.cookies.length, 2,
"The requestCookies data has an incorrect |cookies| property."); "The requestCookies data has an incorrect |cookies| property.");
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS);
document,
getDisplayedRequests(gStore.getState()),
requestItem,
"GET",
SIMPLE_SJS
);
}); });
monitor.panelWin.once(EVENTS.RECEIVED_REQUEST_POST_DATA, () => { monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_REQUEST_POST_DATA, () => {
ok(false, "Trap listener: this request doesn't have any post data."); ok(false, "Trap listener: this request doesn't have any post data.");
}); });
monitor.panelWin.once(EVENTS.RECEIVED_RESPONSE_HEADERS, () => { monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_RESPONSE_HEADERS, () => {
let requestItem = getSortedRequests(gStore.getState()).get(0); let requestItem = RequestsMenu.getItemAtIndex(0);
ok(requestItem.responseHeaders, ok(requestItem.responseHeaders,
"There should be a responseHeaders data available."); "There should be a responseHeaders data available.");
@ -142,34 +120,22 @@ function test() {
is(requestItem.responseHeaders.headersSize, 330, is(requestItem.responseHeaders.headersSize, 330,
"The responseHeaders data has an incorrect |headersSize| property."); "The responseHeaders data has an incorrect |headersSize| property.");
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS);
document,
getDisplayedRequests(gStore.getState()),
requestItem,
"GET",
SIMPLE_SJS
);
}); });
monitor.panelWin.once(EVENTS.RECEIVED_RESPONSE_COOKIES, () => { monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_RESPONSE_COOKIES, () => {
let requestItem = getSortedRequests(gStore.getState()).get(0); let requestItem = RequestsMenu.getItemAtIndex(0);
ok(requestItem.responseCookies, ok(requestItem.responseCookies,
"There should be a responseCookies data available."); "There should be a responseCookies data available.");
is(requestItem.responseCookies.cookies.length, 2, is(requestItem.responseCookies.cookies.length, 2,
"The responseCookies data has an incorrect |cookies| property."); "The responseCookies data has an incorrect |cookies| property.");
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS);
document,
getDisplayedRequests(gStore.getState()),
requestItem,
"GET",
SIMPLE_SJS
);
}); });
monitor.panelWin.once(EVENTS.STARTED_RECEIVING_RESPONSE, () => { monitor.panelWin.once(monitor.panelWin.EVENTS.STARTED_RECEIVING_RESPONSE, () => {
let requestItem = getSortedRequests(gStore.getState()).get(0); let requestItem = RequestsMenu.getItemAtIndex(0);
is(requestItem.httpVersion, "HTTP/1.1", is(requestItem.httpVersion, "HTTP/1.1",
"The httpVersion data has an incorrect value."); "The httpVersion data has an incorrect value.");
@ -180,21 +146,14 @@ function test() {
is(requestItem.headersSize, 330, is(requestItem.headersSize, 330,
"The headersSize data has an incorrect value."); "The headersSize data has an incorrect value.");
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS, {
document,
getDisplayedRequests(gStore.getState()),
requestItem,
"GET",
SIMPLE_SJS,
{
status: "200", status: "200",
statusText: "Och Aye" statusText: "Och Aye"
} });
);
}); });
monitor.panelWin.once(EVENTS.UPDATING_RESPONSE_CONTENT, () => { monitor.panelWin.once(monitor.panelWin.EVENTS.UPDATING_RESPONSE_CONTENT, () => {
let requestItem = getSortedRequests(gStore.getState()).get(0); let requestItem = RequestsMenu.getItemAtIndex(0);
is(requestItem.transferredSize, "12", is(requestItem.transferredSize, "12",
"The transferredSize data has an incorrect value."); "The transferredSize data has an incorrect value.");
@ -203,23 +162,16 @@ function test() {
is(requestItem.mimeType, "text/plain; charset=utf-8", is(requestItem.mimeType, "text/plain; charset=utf-8",
"The mimeType data has an incorrect value."); "The mimeType data has an incorrect value.");
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS, {
document,
getDisplayedRequests(gStore.getState()),
requestItem,
"GET",
SIMPLE_SJS,
{
type: "plain", type: "plain",
fullMimeType: "text/plain; charset=utf-8", fullMimeType: "text/plain; charset=utf-8",
transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12),
} });
);
}); });
monitor.panelWin.once(EVENTS.RECEIVED_RESPONSE_CONTENT, () => { monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_RESPONSE_CONTENT, () => {
let requestItem = getSortedRequests(gStore.getState()).get(0); let requestItem = RequestsMenu.getItemAtIndex(0);
ok(requestItem.responseContent, ok(requestItem.responseContent,
"There should be a responseContent data available."); "There should be a responseContent data available.");
@ -233,43 +185,29 @@ function test() {
12, 12,
"The responseContent data has an incorrect |content.size| property."); "The responseContent data has an incorrect |content.size| property.");
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS, {
document,
getDisplayedRequests(gStore.getState()),
requestItem,
"GET",
SIMPLE_SJS,
{
type: "plain", type: "plain",
fullMimeType: "text/plain; charset=utf-8", fullMimeType: "text/plain; charset=utf-8",
transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12),
} });
);
}); });
monitor.panelWin.once(EVENTS.UPDATING_EVENT_TIMINGS, () => { monitor.panelWin.once(monitor.panelWin.EVENTS.UPDATING_EVENT_TIMINGS, () => {
let requestItem = getSortedRequests(gStore.getState()).get(0); let requestItem = RequestsMenu.getItemAtIndex(0);
is(typeof requestItem.totalTime, "number", is(typeof requestItem.totalTime, "number",
"The attached totalTime is incorrect."); "The attached totalTime is incorrect.");
ok(requestItem.totalTime >= 0, ok(requestItem.totalTime >= 0,
"The attached totalTime should be positive."); "The attached totalTime should be positive.");
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS, {
document,
getDisplayedRequests(gStore.getState()),
requestItem,
"GET",
SIMPLE_SJS,
{
time: true time: true
} });
);
}); });
monitor.panelWin.once(EVENTS.RECEIVED_EVENT_TIMINGS, () => { monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_EVENT_TIMINGS, () => {
let requestItem = getSortedRequests(gStore.getState()).get(0); let requestItem = RequestsMenu.getItemAtIndex(0);
ok(requestItem.eventTimings, ok(requestItem.eventTimings,
"There should be a eventTimings data available."); "There should be a eventTimings data available.");
@ -288,16 +226,9 @@ function test() {
is(typeof requestItem.eventTimings.totalTime, "number", is(typeof requestItem.eventTimings.totalTime, "number",
"The eventTimings data has an incorrect |totalTime| property."); "The eventTimings data has an incorrect |totalTime| property.");
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS, {
document,
getDisplayedRequests(gStore.getState()),
requestItem,
"GET",
SIMPLE_SJS,
{
time: true time: true
} });
);
}); });
tab.linkedBrowser.reload(); tab.linkedBrowser.reload();

31
devtools/client/netmonitor/test/browser_net_simple-request-details.js
View file

@ -13,33 +13,29 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(SIMPLE_SJS); let { tab, monitor } = yield initNetMonitor(SIMPLE_SJS);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, EVENTS, Editor, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { EVENTS } = windowRequire("devtools/client/netmonitor/events"); RequestsMenu.lazyUpdate = false;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
let wait = waitForNetworkEvents(monitor, 1); let wait = waitForNetworkEvents(monitor, 1);
tab.linkedBrowser.reload(); tab.linkedBrowser.reload();
yield wait; yield wait;
is(getSelectedRequest(gStore.getState()), undefined, is(RequestsMenu.selectedItem, null,
"There shouldn't be any selected item in the requests menu."); "There shouldn't be any selected item in the requests menu.");
is(gStore.getState().requests.requests.size, 1, is(RequestsMenu.itemCount, 1,
"The requests menu should not be empty after the first request."); "The requests menu should not be empty after the first request.");
is(!!document.querySelector(".network-details-panel"), false, is(!!document.querySelector(".network-details-panel"), false,
"The network details panel should still be hidden after first request."); "The network details panel should still be hidden after first request.");
EventUtils.sendMouseEvent({ type: "click" }, let onTabUpdated = monitor.panelWin.once(EVENTS.TAB_UPDATED);
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
yield onTabUpdated;
isnot(getSelectedRequest(gStore.getState()), undefined, isnot(RequestsMenu.selectedItem, null,
"There should be a selected item in the requests menu."); "There should be a selected item in the requests menu.");
is(getSelectedIndex(gStore.getState()), 0, is(RequestsMenu.selectedIndex, 0,
"The first item should be selected in the requests menu."); "The first item should be selected in the requests menu.");
is(!!document.querySelector(".network-details-panel"), true, is(!!document.querySelector(".network-details-panel"), true,
"The network details panel should not be hidden after toggle button was pressed."); "The network details panel should not be hidden after toggle button was pressed.");
@ -51,13 +47,6 @@ add_task(function* () {
testTimingsTab(); testTimingsTab();
return teardown(monitor); return teardown(monitor);
function getSelectedIndex(state) {
if (!state.requests.selectedId) {
return -1;
}
return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
}
function testHeadersTab() { function testHeadersTab() {
let tabEl = document.querySelectorAll("#details-pane tab")[0]; let tabEl = document.querySelectorAll("#details-pane tab")[0];
let tabpanel = document.querySelectorAll("#details-pane tabpanel")[0]; let tabpanel = document.querySelectorAll("#details-pane tabpanel")[0];

21
devtools/client/netmonitor/test/browser_net_simple-request.js
View file

@ -16,22 +16,17 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { EVENTS } = windowRequire("devtools/client/netmonitor/events");
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"), is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
true, true,
"The pane toggle button should be disabled when the frontend is opened."); "The pane toggle button should be disabled when the frontend is opened.");
ok(document.querySelector("#requests-menu-empty-notice"), ok(document.querySelector("#requests-menu-empty-notice"),
"An empty notice should be displayed when the frontend is opened."); "An empty notice should be displayed when the frontend is opened.");
is(gStore.getState().requests.requests.size, 0, is(RequestsMenu.itemCount, 0,
"The requests menu should be empty when the frontend is opened."); "The requests menu should be empty when the frontend is opened.");
is(!!document.querySelector(".network-details-panel"), false, is(!!document.querySelector(".network-details-panel"), false,
"The network details panel should be hidden when the frontend is opened."); "The network details panel should be hidden when the frontend is opened.");
@ -43,7 +38,7 @@ add_task(function* () {
"The pane toggle button should be enabled after the first request."); "The pane toggle button should be enabled after the first request.");
ok(!document.querySelector("#requests-menu-empty-notice"), ok(!document.querySelector("#requests-menu-empty-notice"),
"The empty notice should be hidden after the first request."); "The empty notice should be hidden after the first request.");
is(gStore.getState().requests.requests.size, 1, is(RequestsMenu.itemCount, 1,
"The requests menu should not be empty after the first request."); "The requests menu should not be empty after the first request.");
is(!!document.querySelector(".network-details-panel"), false, is(!!document.querySelector(".network-details-panel"), false,
"The network details panel should still be hidden after the first request."); "The network details panel should still be hidden after the first request.");
@ -55,19 +50,19 @@ add_task(function* () {
"The pane toggle button should be still be enabled after a reload."); "The pane toggle button should be still be enabled after a reload.");
ok(!document.querySelector("#requests-menu-empty-notice"), ok(!document.querySelector("#requests-menu-empty-notice"),
"The empty notice should be still hidden after a reload."); "The empty notice should be still hidden after a reload.");
is(gStore.getState().requests.requests.size, 1, is(RequestsMenu.itemCount, 1,
"The requests menu should not be empty after a reload."); "The requests menu should not be empty after a reload.");
is(!!document.querySelector(".network-details-panel"), false, is(!!document.querySelector(".network-details-panel"), false,
"The network details panel should still be hidden after a reload."); "The network details panel should still be hidden after a reload.");
gStore.dispatch(Actions.clearRequests()); RequestsMenu.clear();
is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"), is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
true, true,
"The pane toggle button should be disabled when after clear."); "The pane toggle button should be disabled when after clear.");
ok(document.querySelector("#requests-menu-empty-notice"), ok(document.querySelector("#requests-menu-empty-notice"),
"An empty notice should be displayed again after clear."); "An empty notice should be displayed again after clear.");
is(gStore.getState().requests.requests.size, 0, is(RequestsMenu.itemCount, 0,
"The requests menu should be empty after clear."); "The requests menu should be empty after clear.");
is(!!document.querySelector(".network-details-panel"), false, is(!!document.querySelector(".network-details-panel"), false,
"The network details panel should still be hidden after clear."); "The network details panel should still be hidden after clear.");

359
devtools/client/netmonitor/test/browser_net_sort-01.js
View file

@ -4,233 +4,216 @@
"use strict"; "use strict";
/** /**
* Test if sorting columns in the network table works correctly with new requests. * Test if the sorting mechanism works correctly.
*/ */
add_task(function* () { add_task(function* () {
let { L10N } = require("devtools/client/netmonitor/l10n"); let { L10N } = require("devtools/client/netmonitor/l10n");
let { monitor } = yield initNetMonitor(SORTING_URL); let { tab, monitor } = yield initNetMonitor(STATUS_CODES_URL);
info("Starting test... "); info("Starting test... ");
// It seems that this test may be slow on debug builds. This could be because let { $all, NetMonitorView } = monitor.panelWin;
// of the heavy dom manipulation associated with sorting. let { RequestsMenu } = NetMonitorView;
requestLongerTimeout(2);
let { document, gStore, windowRequire } = monitor.panelWin; RequestsMenu.lazyUpdate = false;
let Actions = windowRequire("devtools/client/netmonitor/actions/index");
let {
getDisplayedRequests,
getSelectedRequest,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
// Loading the frame script and preparing the xhr request URLs so we can
// generate some requests later.
loadCommonFrameScript();
let requests = [{
url: "sjs_sorting-test-server.sjs?index=1&" + Math.random(),
method: "GET1"
}, {
url: "sjs_sorting-test-server.sjs?index=5&" + Math.random(),
method: "GET5"
}, {
url: "sjs_sorting-test-server.sjs?index=2&" + Math.random(),
method: "GET2"
}, {
url: "sjs_sorting-test-server.sjs?index=4&" + Math.random(),
method: "GET4"
}, {
url: "sjs_sorting-test-server.sjs?index=3&" + Math.random(),
method: "GET3"
}];
let wait = waitForNetworkEvents(monitor, 5); let wait = waitForNetworkEvents(monitor, 5);
yield performRequestsInContent(requests); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
content.wrappedJSObject.performRequests();
});
yield wait; yield wait;
EventUtils.sendMouseEvent({ type: "click" }, testContents([0, 1, 2, 3, 4]);
document.querySelector(".network-details-panel-toggle"));
isnot(getSelectedRequest(gStore.getState()), undefined, info("Testing swap(0, 0)");
"There should be a selected item in the requests menu."); RequestsMenu.swapItemsAtIndices(0, 0);
is(getSelectedIndex(gStore.getState()), 0, RequestsMenu.refreshZebra();
"The first item should be selected in the requests menu."); testContents([0, 1, 2, 3, 4]);
is(!!document.querySelector(".network-details-panel"), true,
"The network details panel should be visible after toggle button was pressed.");
testHeaders(); info("Testing swap(0, 1)");
testContents([0, 2, 4, 3, 1], 0); RequestsMenu.swapItemsAtIndices(0, 1);
RequestsMenu.refreshZebra();
testContents([1, 0, 2, 3, 4]);
info("Testing status sort, ascending."); info("Testing swap(0, 2)");
EventUtils.sendMouseEvent({ type: "click" }, RequestsMenu.swapItemsAtIndices(0, 2);
document.querySelector("#requests-menu-status-button")); RequestsMenu.refreshZebra();
testHeaders("status", "ascending"); testContents([1, 2, 0, 3, 4]);
testContents([0, 1, 2, 3, 4], 0);
info("Performing more requests."); info("Testing swap(0, 3)");
wait = waitForNetworkEvents(monitor, 5); RequestsMenu.swapItemsAtIndices(0, 3);
yield performRequestsInContent(requests); RequestsMenu.refreshZebra();
yield wait; testContents([1, 2, 3, 0, 4]);
info("Testing status sort again, ascending."); info("Testing swap(0, 4)");
testHeaders("status", "ascending"); RequestsMenu.swapItemsAtIndices(0, 4);
testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 0); RequestsMenu.refreshZebra();
testContents([1, 2, 3, 4, 0]);
info("Testing status sort, descending."); info("Testing swap(1, 0)");
EventUtils.sendMouseEvent({ type: "click" }, RequestsMenu.swapItemsAtIndices(1, 0);
document.querySelector("#requests-menu-status-button")); RequestsMenu.refreshZebra();
testHeaders("status", "descending"); testContents([0, 2, 3, 4, 1]);
testContents([9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 9);
info("Performing more requests."); info("Testing swap(1, 1)");
wait = waitForNetworkEvents(monitor, 5); RequestsMenu.swapItemsAtIndices(1, 1);
yield performRequestsInContent(requests); RequestsMenu.refreshZebra();
yield wait; testContents([0, 2, 3, 4, 1]);
info("Testing status sort again, descending."); info("Testing swap(1, 2)");
testHeaders("status", "descending"); RequestsMenu.swapItemsAtIndices(1, 2);
testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14); RequestsMenu.refreshZebra();
testContents([0, 1, 3, 4, 2]);
info("Testing status sort yet again, ascending."); info("Testing swap(1, 3)");
EventUtils.sendMouseEvent({ type: "click" }, RequestsMenu.swapItemsAtIndices(1, 3);
document.querySelector("#requests-menu-status-button")); RequestsMenu.refreshZebra();
testHeaders("status", "ascending"); testContents([0, 3, 1, 4, 2]);
testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], 0);
info("Testing status sort yet again, descending."); info("Testing swap(1, 4)");
EventUtils.sendMouseEvent({ type: "click" }, RequestsMenu.swapItemsAtIndices(1, 4);
document.querySelector("#requests-menu-status-button")); RequestsMenu.refreshZebra();
testHeaders("status", "descending"); testContents([0, 3, 4, 1, 2]);
testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14);
info("Testing swap(2, 0)");
RequestsMenu.swapItemsAtIndices(2, 0);
RequestsMenu.refreshZebra();
testContents([2, 3, 4, 1, 0]);
info("Testing swap(2, 1)");
RequestsMenu.swapItemsAtIndices(2, 1);
RequestsMenu.refreshZebra();
testContents([1, 3, 4, 2, 0]);
info("Testing swap(2, 2)");
RequestsMenu.swapItemsAtIndices(2, 2);
RequestsMenu.refreshZebra();
testContents([1, 3, 4, 2, 0]);
info("Testing swap(2, 3)");
RequestsMenu.swapItemsAtIndices(2, 3);
RequestsMenu.refreshZebra();
testContents([1, 2, 4, 3, 0]);
info("Testing swap(2, 4)");
RequestsMenu.swapItemsAtIndices(2, 4);
RequestsMenu.refreshZebra();
testContents([1, 4, 2, 3, 0]);
info("Testing swap(3, 0)");
RequestsMenu.swapItemsAtIndices(3, 0);
RequestsMenu.refreshZebra();
testContents([1, 4, 2, 0, 3]);
info("Testing swap(3, 1)");
RequestsMenu.swapItemsAtIndices(3, 1);
RequestsMenu.refreshZebra();
testContents([3, 4, 2, 0, 1]);
info("Testing swap(3, 2)");
RequestsMenu.swapItemsAtIndices(3, 2);
RequestsMenu.refreshZebra();
testContents([2, 4, 3, 0, 1]);
info("Testing swap(3, 3)");
RequestsMenu.swapItemsAtIndices(3, 3);
RequestsMenu.refreshZebra();
testContents([2, 4, 3, 0, 1]);
info("Testing swap(3, 4)");
RequestsMenu.swapItemsAtIndices(3, 4);
RequestsMenu.refreshZebra();
testContents([2, 3, 4, 0, 1]);
info("Testing swap(4, 0)");
RequestsMenu.swapItemsAtIndices(4, 0);
RequestsMenu.refreshZebra();
testContents([2, 3, 0, 4, 1]);
info("Testing swap(4, 1)");
RequestsMenu.swapItemsAtIndices(4, 1);
RequestsMenu.refreshZebra();
testContents([2, 3, 0, 1, 4]);
info("Testing swap(4, 2)");
RequestsMenu.swapItemsAtIndices(4, 2);
RequestsMenu.refreshZebra();
testContents([4, 3, 0, 1, 2]);
info("Testing swap(4, 3)");
RequestsMenu.swapItemsAtIndices(4, 3);
RequestsMenu.refreshZebra();
testContents([3, 4, 0, 1, 2]);
info("Testing swap(4, 4)");
RequestsMenu.swapItemsAtIndices(4, 4);
RequestsMenu.refreshZebra();
testContents([3, 4, 0, 1, 2]);
info("Clearing sort.");
RequestsMenu.sortBy();
testContents([0, 1, 2, 3, 4]);
return teardown(monitor); return teardown(monitor);
function testHeaders(sortType, direction) { function testContents([a, b, c, d, e]) {
let doc = monitor.panelWin.document; is(RequestsMenu.items.length, 5,
let target = doc.querySelector("#requests-menu-" + sortType + "-button"); "There should be a total of 5 items in the requests menu.");
let headers = doc.querySelectorAll(".requests-menu-header-button"); is(RequestsMenu.visibleItems.length, 5,
"There should be a total of 5 visbile items in the requests menu.");
for (let header of headers) { is($all(".request-list-item").length, 5,
if (header != target) {
ok(!header.hasAttribute("data-sorted"),
"The " + header.id + " header does not have a 'data-sorted' attribute.");
ok(!header.getAttribute("title"),
"The " + header.id + " header does not have a 'title' attribute.");
} else {
is(header.getAttribute("data-sorted"), direction,
"The " + header.id + " header has a correct 'data-sorted' attribute.");
is(header.getAttribute("title"), direction == "ascending"
? L10N.getStr("networkMenu.sortedAsc")
: L10N.getStr("networkMenu.sortedDesc"),
"The " + header.id + " header has a correct 'title' attribute.");
}
}
}
function getSelectedIndex(state) {
if (!state.requests.selectedId) {
return -1;
}
return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
}
function testContents(order, selection) {
isnot(getSelectedRequest(gStore.getState()), undefined,
"There should still be a selected item after sorting.");
is(getSelectedIndex(gStore.getState()), selection,
"The first item should be still selected after sorting.");
is(!!document.querySelector(".network-details-panel"), true,
"The network details panel should still be visible after sorting.");
is(getSortedRequests(gStore.getState()).length, order.length,
"There should be a specific number of items in the requests menu.");
is(getDisplayedRequests(gStore.getState()).length, order.length,
"There should be a specific number of visbile items in the requests menu.");
is(document.querySelectorAll(".request-list-item").length, order.length,
"The visible items in the requests menu are, in fact, visible!"); "The visible items in the requests menu are, in fact, visible!");
for (let i = 0, len = order.length / 5; i < len; i++) { verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(a),
verifyRequestItemTarget( "GET", STATUS_CODES_SJS + "?sts=100", {
document,
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(order[i]),
"GET1", SORTING_SJS + "?index=1", {
fuzzyUrl: true,
status: 101, status: 101,
statusText: "Meh", statusText: "Switching Protocols",
type: "1", type: "plain",
fullMimeType: "text/1", fullMimeType: "text/plain; charset=utf-8",
transferred: L10N.getStr("networkMenu.sizeUnavailable"), transferred: L10N.getStr("networkMenu.sizeUnavailable"),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0),
time: true time: true
}); });
} verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(b),
for (let i = 0, len = order.length / 5; i < len; i++) { "GET", STATUS_CODES_SJS + "?sts=200", {
verifyRequestItemTarget( status: 202,
document, statusText: "Created",
getDisplayedRequests(gStore.getState()), type: "plain",
getSortedRequests(gStore.getState()).get(order[i + len]), fullMimeType: "text/plain; charset=utf-8",
"GET2", SORTING_SJS + "?index=2", { transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
fuzzyUrl: true, size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
status: 200,
statusText: "Meh",
type: "2",
fullMimeType: "text/2",
transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19),
time: true time: true
}); });
} verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(c),
for (let i = 0, len = order.length / 5; i < len; i++) { "GET", STATUS_CODES_SJS + "?sts=300", {
verifyRequestItemTarget( status: 303,
document, statusText: "See Other",
getDisplayedRequests(gStore.getState()), type: "plain",
getSortedRequests(gStore.getState()).get(order[i + len * 2]), fullMimeType: "text/plain; charset=utf-8",
"GET3", SORTING_SJS + "?index=3", { transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
fuzzyUrl: true, size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0),
status: 300,
statusText: "Meh",
type: "3",
fullMimeType: "text/3",
transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29),
time: true time: true
}); });
} verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(d),
for (let i = 0, len = order.length / 5; i < len; i++) { "GET", STATUS_CODES_SJS + "?sts=400", {
verifyRequestItemTarget( status: 404,
document, statusText: "Not Found",
getDisplayedRequests(gStore.getState()), type: "plain",
getSortedRequests(gStore.getState()).get(order[i + len * 3]), fullMimeType: "text/plain; charset=utf-8",
"GET4", SORTING_SJS + "?index=4", { transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
fuzzyUrl: true, size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
status: 400,
statusText: "Meh",
type: "4",
fullMimeType: "text/4",
transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39),
time: true time: true
}); });
} verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(e),
for (let i = 0, len = order.length / 5; i < len; i++) { "GET", STATUS_CODES_SJS + "?sts=500", {
verifyRequestItemTarget( status: 501,
document, statusText: "Not Implemented",
getDisplayedRequests(gStore.getState()), type: "plain",
getSortedRequests(gStore.getState()).get(order[i + len * 4]), fullMimeType: "text/plain; charset=utf-8",
"GET5", SORTING_SJS + "?index=5", { transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
fuzzyUrl: true, size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
status: 500,
statusText: "Meh",
type: "5",
fullMimeType: "text/5",
transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 49),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 49),
time: true time: true
}); });
} }
}
}); });

59
devtools/client/netmonitor/test/browser_net_sort-02.js
View file

@ -17,15 +17,8 @@ add_task(function* () {
// of the heavy dom manipulation associated with sorting. // of the heavy dom manipulation associated with sorting.
requestLongerTimeout(2); requestLongerTimeout(2);
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSelectedRequest,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
// Loading the frame script and preparing the xhr request URLs so we can // Loading the frame script and preparing the xhr request URLs so we can
// generate some requests later. // generate some requests later.
@ -47,16 +40,18 @@ add_task(function* () {
method: "GET3" method: "GET3"
}]; }];
RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 5); let wait = waitForNetworkEvents(monitor, 5);
yield performRequestsInContent(requests); yield performRequestsInContent(requests);
yield wait; yield wait;
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
isnot(getSelectedRequest(gStore.getState()), undefined, isnot(RequestsMenu.selectedItem, null,
"There should be a selected item in the requests menu."); "There should be a selected item in the requests menu.");
is(getSelectedIndex(gStore.getState()), 0, is(RequestsMenu.selectedIndex, 0,
"The first item should be selected in the requests menu."); "The first item should be selected in the requests menu.");
is(!!document.querySelector(".network-details-panel"), true, is(!!document.querySelector(".network-details-panel"), true,
"The network details panel should be visible after toggle button was pressed."); "The network details panel should be visible after toggle button was pressed.");
@ -192,13 +187,6 @@ add_task(function* () {
return teardown(monitor); return teardown(monitor);
function getSelectedIndex(state) {
if (!state.requests.selectedId) {
return -1;
}
return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
}
function testHeaders(sortType, direction) { function testHeaders(sortType, direction) {
let doc = monitor.panelWin.document; let doc = monitor.panelWin.document;
let target = doc.querySelector("#requests-menu-" + sortType + "-button"); let target = doc.querySelector("#requests-menu-" + sortType + "-button");
@ -222,24 +210,21 @@ add_task(function* () {
} }
function testContents([a, b, c, d, e]) { function testContents([a, b, c, d, e]) {
isnot(getSelectedRequest(gStore.getState()), undefined, isnot(RequestsMenu.selectedItem, null,
"There should still be a selected item after sorting."); "There should still be a selected item after sorting.");
is(getSelectedIndex(gStore.getState()), a, is(RequestsMenu.selectedIndex, a,
"The first item should be still selected after sorting."); "The first item should be still selected after sorting.");
is(!!document.querySelector(".network-details-panel"), true, is(!!document.querySelector(".network-details-panel"), true,
"The network details panel should still be visible after sorting."); "The network details panel should still be visible after sorting.");
is(getSortedRequests(gStore.getState()).length, 5, is(RequestsMenu.items.length, 5,
"There should be a total of 5 items in the requests menu."); "There should be a total of 5 items in the requests menu.");
is(getDisplayedRequests(gStore.getState()).length, 5, is(RequestsMenu.visibleItems.length, 5,
"There should be a total of 5 visible items in the requests menu."); "There should be a total of 5 visible items in the requests menu.");
is(document.querySelectorAll(".request-list-item").length, 5, is(document.querySelectorAll(".request-list-item").length, 5,
"The visible items in the requests menu are, in fact, visible!"); "The visible items in the requests menu are, in fact, visible!");
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(a),
document,
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(a),
"GET1", SORTING_SJS + "?index=1", { "GET1", SORTING_SJS + "?index=1", {
fuzzyUrl: true, fuzzyUrl: true,
status: 101, status: 101,
@ -250,10 +235,7 @@ add_task(function* () {
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0),
time: true time: true
}); });
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(b),
document,
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(b),
"GET2", SORTING_SJS + "?index=2", { "GET2", SORTING_SJS + "?index=2", {
fuzzyUrl: true, fuzzyUrl: true,
status: 200, status: 200,
@ -264,10 +246,7 @@ add_task(function* () {
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19),
time: true time: true
}); });
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(c),
document,
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(c),
"GET3", SORTING_SJS + "?index=3", { "GET3", SORTING_SJS + "?index=3", {
fuzzyUrl: true, fuzzyUrl: true,
status: 300, status: 300,
@ -278,10 +257,7 @@ add_task(function* () {
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29),
time: true time: true
}); });
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(d),
document,
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(d),
"GET4", SORTING_SJS + "?index=4", { "GET4", SORTING_SJS + "?index=4", {
fuzzyUrl: true, fuzzyUrl: true,
status: 400, status: 400,
@ -292,10 +268,7 @@ add_task(function* () {
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39), size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39),
time: true time: true
}); });
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(e),
document,
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(e),
"GET5", SORTING_SJS + "?index=5", { "GET5", SORTING_SJS + "?index=5", {
fuzzyUrl: true, fuzzyUrl: true,
status: 500, status: 500,

214
devtools/client/netmonitor/test/browser_net_sort-03.js Normal file
View file

@ -0,0 +1,214 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
/**
* Test if sorting columns in the network table works correctly with new requests.
*/
add_task(function* () {
let { L10N } = require("devtools/client/netmonitor/l10n");
let { monitor } = yield initNetMonitor(SORTING_URL);
info("Starting test... ");
// It seems that this test may be slow on debug builds. This could be because
// of the heavy dom manipulation associated with sorting.
requestLongerTimeout(2);
let { document, NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
// Loading the frame script and preparing the xhr request URLs so we can
// generate some requests later.
loadCommonFrameScript();
let requests = [{
url: "sjs_sorting-test-server.sjs?index=1&" + Math.random(),
method: "GET1"
}, {
url: "sjs_sorting-test-server.sjs?index=5&" + Math.random(),
method: "GET5"
}, {
url: "sjs_sorting-test-server.sjs?index=2&" + Math.random(),
method: "GET2"
}, {
url: "sjs_sorting-test-server.sjs?index=4&" + Math.random(),
method: "GET4"
}, {
url: "sjs_sorting-test-server.sjs?index=3&" + Math.random(),
method: "GET3"
}];
RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 5);
yield performRequestsInContent(requests);
yield wait;
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle"));
isnot(RequestsMenu.selectedItem, null,
"There should be a selected item in the requests menu.");
is(RequestsMenu.selectedIndex, 0,
"The first item should be selected in the requests menu.");
is(!!document.querySelector(".network-details-panel"), true,
"The network details panel should be visible after toggle button was pressed.");
testHeaders();
testContents([0, 2, 4, 3, 1], 0);
info("Testing status sort, ascending.");
EventUtils.sendMouseEvent({ type: "click" },
document.querySelector("#requests-menu-status-button"));
testHeaders("status", "ascending");
testContents([0, 1, 2, 3, 4], 0);
info("Performing more requests.");
wait = waitForNetworkEvents(monitor, 5);
yield performRequestsInContent(requests);
yield wait;
info("Testing status sort again, ascending.");
testHeaders("status", "ascending");
testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 0);
info("Testing status sort, descending.");
EventUtils.sendMouseEvent({ type: "click" },
document.querySelector("#requests-menu-status-button"));
testHeaders("status", "descending");
testContents([9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 9);
info("Performing more requests.");
wait = waitForNetworkEvents(monitor, 5);
yield performRequestsInContent(requests);
yield wait;
info("Testing status sort again, descending.");
testHeaders("status", "descending");
testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14);
info("Testing status sort yet again, ascending.");
EventUtils.sendMouseEvent({ type: "click" },
document.querySelector("#requests-menu-status-button"));
testHeaders("status", "ascending");
testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], 0);
info("Testing status sort yet again, descending.");
EventUtils.sendMouseEvent({ type: "click" },
document.querySelector("#requests-menu-status-button"));
testHeaders("status", "descending");
testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14);
return teardown(monitor);
function testHeaders(sortType, direction) {
let doc = monitor.panelWin.document;
let target = doc.querySelector("#requests-menu-" + sortType + "-button");
let headers = doc.querySelectorAll(".requests-menu-header-button");
for (let header of headers) {
if (header != target) {
ok(!header.hasAttribute("data-sorted"),
"The " + header.id + " header does not have a 'data-sorted' attribute.");
ok(!header.getAttribute("title"),
"The " + header.id + " header does not have a 'title' attribute.");
} else {
is(header.getAttribute("data-sorted"), direction,
"The " + header.id + " header has a correct 'data-sorted' attribute.");
is(header.getAttribute("title"), direction == "ascending"
? L10N.getStr("networkMenu.sortedAsc")
: L10N.getStr("networkMenu.sortedDesc"),
"The " + header.id + " header has a correct 'title' attribute.");
}
}
}
function testContents(order, selection) {
isnot(RequestsMenu.selectedItem, null,
"There should still be a selected item after sorting.");
is(RequestsMenu.selectedIndex, selection,
"The first item should be still selected after sorting.");
is(!!document.querySelector(".network-details-panel"), true,
"The network details panel should still be visible after sorting.");
is(RequestsMenu.items.length, order.length,
"There should be a specific number of items in the requests menu.");
is(RequestsMenu.visibleItems.length, order.length,
"There should be a specific number of visbile items in the requests menu.");
is(document.querySelectorAll(".request-list-item").length, order.length,
"The visible items in the requests menu are, in fact, visible!");
for (let i = 0, len = order.length / 5; i < len; i++) {
verifyRequestItemTarget(RequestsMenu,
RequestsMenu.getItemAtIndex(order[i]),
"GET1", SORTING_SJS + "?index=1", {
fuzzyUrl: true,
status: 101,
statusText: "Meh",
type: "1",
fullMimeType: "text/1",
transferred: L10N.getStr("networkMenu.sizeUnavailable"),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0),
time: true
});
}
for (let i = 0, len = order.length / 5; i < len; i++) {
verifyRequestItemTarget(RequestsMenu,
RequestsMenu.getItemAtIndex(order[i + len]),
"GET2", SORTING_SJS + "?index=2", {
fuzzyUrl: true,
status: 200,
statusText: "Meh",
type: "2",
fullMimeType: "text/2",
transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19),
time: true
});
}
for (let i = 0, len = order.length / 5; i < len; i++) {
verifyRequestItemTarget(RequestsMenu,
RequestsMenu.getItemAtIndex(order[i + len * 2]),
"GET3", SORTING_SJS + "?index=3", {
fuzzyUrl: true,
status: 300,
statusText: "Meh",
type: "3",
fullMimeType: "text/3",
transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29),
time: true
});
}
for (let i = 0, len = order.length / 5; i < len; i++) {
verifyRequestItemTarget(RequestsMenu,
RequestsMenu.getItemAtIndex(order[i + len * 3]),
"GET4", SORTING_SJS + "?index=4", {
fuzzyUrl: true,
status: 400,
statusText: "Meh",
type: "4",
fullMimeType: "text/4",
transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39),
time: true
});
}
for (let i = 0, len = order.length / 5; i < len; i++) {
verifyRequestItemTarget(RequestsMenu,
RequestsMenu.getItemAtIndex(order[i + len * 4]),
"GET5", SORTING_SJS + "?index=5", {
fuzzyUrl: true,
status: 500,
statusText: "Meh",
type: "5",
fullMimeType: "text/5",
transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 49),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 49),
time: true
});
}
}
});

30
devtools/client/netmonitor/test/browser_net_status-codes.js
View file

@ -14,17 +14,12 @@ add_task(function* () {
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { document, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
let requestItems = []; let requestItems = [];
RequestsMenu.lazyUpdate = false;
const REQUEST_DATA = [ const REQUEST_DATA = [
{ {
// request #0 // request #0
@ -108,24 +103,18 @@ add_task(function* () {
/** /**
* A helper that verifies all requests show the correct information and caches * A helper that verifies all requests show the correct information and caches
* request list items to requestItems array. * RequestsMenu items to requestItems array.
*/ */
function* verifyRequests() { function* verifyRequests() {
info("Verifying requests contain correct information."); info("Verifying requests contain correct information.");
let index = 0; let index = 0;
for (let request of REQUEST_DATA) { for (let request of REQUEST_DATA) {
let item = getSortedRequests(gStore.getState()).get(index); let item = RequestsMenu.getItemAtIndex(index);
requestItems[index] = item; requestItems[index] = item;
info("Verifying request #" + index); info("Verifying request #" + index);
yield verifyRequestItemTarget( yield verifyRequestItemTarget(RequestsMenu, item,
document, request.method, request.uri, request.details);
getDisplayedRequests(gStore.getState()),
item,
request.method,
request.uri,
request.details
);
index++; index++;
} }
@ -177,8 +166,7 @@ add_task(function* () {
function* testParams(data, index) { function* testParams(data, index) {
EventUtils.sendMouseEvent({ type: "mousedown" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[index]); document.querySelectorAll(".request-list-item")[index]);
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#params-tab").click();
document.querySelector("#params-tab"));
let panel = document.querySelector("#params-panel"); let panel = document.querySelector("#params-panel");
let statusParamValue = data.uri.split("=").pop(); let statusParamValue = data.uri.split("=").pop();

35
devtools/client/netmonitor/test/browser_net_streaming-response.js
View file

@ -12,20 +12,17 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { panelWin } = monitor;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { document, NetMonitorView } = panelWin;
let { let { RequestsMenu } = NetMonitorView;
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false));
const REQUESTS = [ const REQUESTS = [
[ "hls-m3u8", /^#EXTM3U/ ], [ "hls-m3u8", /^#EXTM3U/ ],
[ "mpeg-dash", /^<\?xml/ ] [ "mpeg-dash", /^<\?xml/ ]
]; ];
RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, REQUESTS.length); let wait = waitForNetworkEvents(monitor, REQUESTS.length);
for (let [fmt] of REQUESTS) { for (let [fmt] of REQUESTS) {
let url = CONTENT_TYPE_SJS + "?fmt=" + fmt; let url = CONTENT_TYPE_SJS + "?fmt=" + fmt;
@ -36,26 +33,20 @@ add_task(function* () {
yield wait; yield wait;
REQUESTS.forEach(([ fmt ], i) => { REQUESTS.forEach(([ fmt ], i) => {
verifyRequestItemTarget( verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(i),
document, "GET", CONTENT_TYPE_SJS + "?fmt=" + fmt, {
getDisplayedRequests(gStore.getState()),
getSortedRequests(gStore.getState()).get(i),
"GET",
CONTENT_TYPE_SJS + "?fmt=" + fmt,
{
status: 200, status: 200,
statusText: "OK" statusText: "OK"
}); });
}); });
wait = waitForDOM(document, "#response-panel"); wait = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent({ type: "click" }, EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector(".network-details-panel-toggle")); document.querySelector(".network-details-panel-toggle"));
EventUtils.sendMouseEvent({ type: "click" }, document.querySelector("#response-tab").click();
document.querySelector("#response-tab"));
yield wait; yield wait;
gStore.dispatch(Actions.selectRequest(null)); RequestsMenu.selectedIndex = -1;
yield selectIndexAndWaitForEditor(0); yield selectIndexAndWaitForEditor(0);
// the hls-m3u8 part // the hls-m3u8 part
@ -71,14 +62,12 @@ add_task(function* () {
let editor = document.querySelector("#response-panel .editor-mount iframe"); let editor = document.querySelector("#response-panel .editor-mount iframe");
if (!editor) { if (!editor) {
let waitDOM = waitForDOM(document, "#response-panel .editor-mount iframe"); let waitDOM = waitForDOM(document, "#response-panel .editor-mount iframe");
EventUtils.sendMouseEvent({ type: "mousedown" }, RequestsMenu.selectedIndex = index;
document.querySelectorAll(".request-list-item")[index]);
document.querySelector("#response-tab").click(); document.querySelector("#response-tab").click();
[editor] = yield waitDOM; [editor] = yield waitDOM;
yield once(editor, "DOMContentLoaded"); yield once(editor, "DOMContentLoaded");
} else { } else {
EventUtils.sendMouseEvent({ type: "mousedown" }, RequestsMenu.selectedIndex = index;
document.querySelectorAll(".request-list-item")[index]);
} }
yield waitForDOM(editor.contentDocument, ".CodeMirror-code"); yield waitForDOM(editor.contentDocument, ".CodeMirror-code");

10
devtools/client/netmonitor/test/browser_net_throttle.js
View file

@ -14,13 +14,7 @@ function* throttleTest(actuallyThrottle) {
requestLongerTimeout(2); requestLongerTimeout(2);
let { monitor } = yield initNetMonitor(SIMPLE_URL); let { monitor } = yield initNetMonitor(SIMPLE_URL);
let { document, gStore, windowRequire, NetMonitorController } = monitor.panelWin; const {ACTIVITY_TYPE, EVENTS, NetMonitorController, NetMonitorView} = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index");
let { ACTIVITY_TYPE } = windowRequire("devtools/client/netmonitor/constants");
let { EVENTS } = windowRequire("devtools/client/netmonitor/events");
let {
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
info("Starting test... (actuallyThrottle = " + actuallyThrottle + ")"); info("Starting test... (actuallyThrottle = " + actuallyThrottle + ")");
@ -51,7 +45,7 @@ function* throttleTest(actuallyThrottle) {
yield NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DISABLED); yield NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DISABLED);
yield eventPromise; yield eventPromise;
let requestItem = getSortedRequests(gStore.getState()).get(0); let requestItem = NetMonitorView.RequestsMenu.getItemAtIndex(0);
const reportedOneSecond = requestItem.eventTimings.timings.receive > 1000; const reportedOneSecond = requestItem.eventTimings.timings.receive > 1000;
if (actuallyThrottle) { if (actuallyThrottle) {
ok(reportedOneSecond, "download reported as taking more than one second"); ok(reportedOneSecond, "download reported as taking more than one second");

22
devtools/client/netmonitor/test/browser_net_timing-division.js
View file

@ -11,11 +11,10 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { $all, NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 2); let wait = waitForNetworkEvents(monitor, 2);
// Timeout needed for having enough divisions on the time scale. // Timeout needed for having enough divisions on the time scale.
@ -24,12 +23,9 @@ add_task(function* () {
}); });
yield wait; yield wait;
let milDivs = document.querySelectorAll( let milDivs = $all(".requests-menu-timings-division[data-division-scale=millisecond]");
".requests-menu-timings-division[data-division-scale=millisecond]"); let secDivs = $all(".requests-menu-timings-division[data-division-scale=second]");
let secDivs = document.querySelectorAll( let minDivs = $all(".requests-menu-timings-division[data-division-scale=minute]");
".requests-menu-timings-division[data-division-scale=second]");
let minDivs = document.querySelectorAll(
".requests-menu-timings-division[data-division-scale=minute]");
info("Number of millisecond divisions: " + milDivs.length); info("Number of millisecond divisions: " + milDivs.length);
info("Number of second divisions: " + secDivs.length); info("Number of second divisions: " + secDivs.length);
@ -39,10 +35,10 @@ add_task(function* () {
secDivs.forEach(div => info(`Second division: ${div.textContent}`)); secDivs.forEach(div => info(`Second division: ${div.textContent}`));
minDivs.forEach(div => info(`Minute division: ${div.textContent}`)); minDivs.forEach(div => info(`Minute division: ${div.textContent}`));
is(gStore.getState().requests.requests.size, 2, "There should be only two requests made."); is(RequestsMenu.itemCount, 2, "There should be only two requests made.");
let firstRequest = getSortedRequests(gStore.getState()).get(0); let firstRequest = RequestsMenu.getItemAtIndex(0);
let lastRequest = getSortedRequests(gStore.getState()).get(1); let lastRequest = RequestsMenu.getItemAtIndex(1);
info("First request happened at: " + info("First request happened at: " +
firstRequest.responseHeaders.headers.find(e => e.name == "Date").value); firstRequest.responseHeaders.headers.find(e => e.name == "Date").value);

25
devtools/client/netmonitor/test/browser_net_truncate.js
View file

@ -19,33 +19,24 @@ function test() {
initNetMonitor(URL).then(({ tab, monitor }) => { initNetMonitor(URL).then(({ tab, monitor }) => {
info("Starting test... "); info("Starting test... ");
let { document, gStore, windowRequire } = monitor.panelWin; let { NetMonitorView } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let { RequestsMenu } = NetMonitorView;
let { EVENTS } = windowRequire("devtools/client/netmonitor/events");
let {
getDisplayedRequests,
getSortedRequests,
} = windowRequire("devtools/client/netmonitor/selectors/index");
gStore.dispatch(Actions.batchEnable(false)); RequestsMenu.lazyUpdate = false;
waitForNetworkEvents(monitor, 1) waitForNetworkEvents(monitor, 1)
.then(() => teardown(monitor)) .then(() => teardown(monitor))
.then(finish); .then(finish);
monitor.panelWin.once(EVENTS.RECEIVED_RESPONSE_CONTENT, () => { monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_RESPONSE_CONTENT, () => {
verifyRequestItemTarget( let requestItem = RequestsMenu.getItemAtIndex(0);
document,
getDisplayedRequests(gStore.getState()), verifyRequestItemTarget(RequestsMenu, requestItem, "GET", URL, {
getSortedRequests(gStore.getState()).get(0),
"GET", URL,
{
type: "plain", type: "plain",
fullMimeType: "text/plain; charset=utf-8", fullMimeType: "text/plain; charset=utf-8",
transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeMB", 2), transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeMB", 2),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeMB", 2), size: L10N.getFormatStrWithNumbers("networkMenu.sizeMB", 2),
} });
);
}); });
tab.linkedBrowser.reload(); tab.linkedBrowser.reload();

47
devtools/client/netmonitor/test/head.js
View file

@ -10,7 +10,6 @@ Services.scriptloader.loadSubScript(
"chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js", "chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js",
this); this);
const { EVENTS } = require("devtools/client/netmonitor/events");
var { Toolbox } = require("devtools/client/framework/toolbox"); var { Toolbox } = require("devtools/client/framework/toolbox");
const { const {
decodeUnicodeUrl, decodeUnicodeUrl,
@ -177,10 +176,14 @@ function teardown(monitor) {
function waitForNetworkEvents(aMonitor, aGetRequests, aPostRequests = 0) { function waitForNetworkEvents(aMonitor, aGetRequests, aPostRequests = 0) {
let deferred = promise.defer(); let deferred = promise.defer();
let panel = aMonitor.panelWin; let panel = aMonitor.panelWin;
let events = panel.EVENTS;
let progress = {}; let progress = {};
let genericEvents = 0; let genericEvents = 0;
let postEvents = 0; let postEvents = 0;
let awaitedEventsToListeners = [ let awaitedEventsToListeners = [
["UPDATING_REQUEST_HEADERS", onGenericEvent], ["UPDATING_REQUEST_HEADERS", onGenericEvent],
["RECEIVED_REQUEST_HEADERS", onGenericEvent], ["RECEIVED_REQUEST_HEADERS", onGenericEvent],
@ -207,7 +210,7 @@ function waitForNetworkEvents(aMonitor, aGetRequests, aPostRequests = 0) {
function updateProgressForURL(url, event) { function updateProgressForURL(url, event) {
initProgressForURL(url); initProgressForURL(url);
progress[url][Object.keys(EVENTS).find(e => EVENTS[e] == event)] = 1; progress[url][Object.keys(events).find(e => events[e] == event)] = 1;
} }
function onGenericEvent(event, actor) { function onGenericEvent(event, actor) {
@ -240,12 +243,12 @@ function waitForNetworkEvents(aMonitor, aGetRequests, aPostRequests = 0) {
if (genericEvents >= (aGetRequests + aPostRequests) * 13 && if (genericEvents >= (aGetRequests + aPostRequests) * 13 &&
postEvents >= aPostRequests * 2) { postEvents >= aPostRequests * 2) {
awaitedEventsToListeners.forEach(([e, l]) => panel.off(EVENTS[e], l)); awaitedEventsToListeners.forEach(([e, l]) => panel.off(events[e], l));
executeSoon(deferred.resolve); executeSoon(deferred.resolve);
} }
} }
awaitedEventsToListeners.forEach(([e, l]) => panel.on(EVENTS[e], l)); awaitedEventsToListeners.forEach(([e, l]) => panel.on(events[e], l));
return deferred.promise; return deferred.promise;
} }
@ -259,18 +262,20 @@ function getItemTarget(requestList, requestItem) {
return [...items].find(el => el.dataset.id == requestItem.id); return [...items].find(el => el.dataset.id == requestItem.id);
} }
function verifyRequestItemTarget(document, requestList, requestItem, aMethod, function verifyRequestItemTarget(requestList, requestItem, aMethod, aUrl, aData = {}) {
aUrl, aData = {}) {
info("> Verifying: " + aMethod + " " + aUrl + " " + aData.toSource()); info("> Verifying: " + aMethod + " " + aUrl + " " + aData.toSource());
// This bloats log sizes significantly in automation (bug 992485)
// info("> Request: " + requestItem.toSource());
let visibleIndex = requestList.indexOf(requestItem); let visibleIndex = requestList.visibleItems.indexOf(requestItem);
info("Visible index of item: " + visibleIndex); info("Visible index of item: " + visibleIndex);
let { fuzzyUrl, status, statusText, cause, type, fullMimeType, let { fuzzyUrl, status, statusText, cause, type, fullMimeType,
transferred, size, time, displayedStatus } = aData; transferred, size, time, displayedStatus } = aData;
let target = document.querySelectorAll(".request-list-item")[visibleIndex]; let target = getItemTarget(requestList, requestItem);
let unicodeUrl = decodeUnicodeUrl(aUrl); let unicodeUrl = decodeUnicodeUrl(aUrl);
let name = getUrlBaseName(aUrl); let name = getUrlBaseName(aUrl);
let query = getUrlQuery(aUrl); let query = getUrlQuery(aUrl);
@ -359,8 +364,8 @@ function verifyRequestItemTarget(document, requestList, requestItem, aMethod,
ok(~~(tooltip.match(/[0-9]+/)) >= 0, "The tooltip time is correct."); ok(~~(tooltip.match(/[0-9]+/)) >= 0, "The tooltip time is correct.");
} }
if (visibleIndex !== -1) { if (visibleIndex != -1) {
if (visibleIndex % 2 === 0) { if (visibleIndex % 2 == 0) {
ok(target.classList.contains("even"), "Item should have 'even' class."); ok(target.classList.contains("even"), "Item should have 'even' class.");
ok(!target.classList.contains("odd"), "Item shouldn't have 'odd' class."); ok(!target.classList.contains("odd"), "Item shouldn't have 'odd' class.");
} else { } else {
@ -372,7 +377,7 @@ function verifyRequestItemTarget(document, requestList, requestItem, aMethod,
/** /**
* Helper function for waiting for an event to fire before resolving a promise. * Helper function for waiting for an event to fire before resolving a promise.
* Example: waitFor(aMonitor.panelWin, EVENT_NAME); * Example: waitFor(aMonitor.panelWin, aMonitor.panelWin.EVENTS.TAB_UPDATED);
* *
* @param object subject * @param object subject
* The event emitter object that is being listened to. * The event emitter object that is being listened to.
@ -505,3 +510,23 @@ function waitForContentMessage(name) {
}); });
return def.promise; return def.promise;
} }
/**
* Open the requestMenu menu and return all of it's items in a flat array
* @param {netmonitorPanel} netmonitor
* @param {Event} event mouse event with screenX and screenX coordinates
* @return An array of MenuItems
*/
function openContextMenuAndGetAllItems(netmonitor, event) {
let menu = netmonitor.RequestsMenu.contextMenu.open(event);
// Flatten all menu items into a single array to make searching through it easier
let allItems = [].concat.apply([], menu.items.map(function addItem(item) {
if (item.submenu) {
return addItem(item.submenu.items);
}
return item;
}));
return allItems;
}

Some files were not shown because too many files have changed in this diff Show more