diff --git a/devtools/client/framework/test/browser_ignore_toolbox_network_requests.js b/devtools/client/framework/test/browser_ignore_toolbox_network_requests.js index 2bb532fa188e..1cfc22f7e09b 100644 --- a/devtools/client/framework/test/browser_ignore_toolbox_network_requests.js +++ b/devtools/client/framework/test/browser_ignore_toolbox_network_requests.js @@ -23,9 +23,8 @@ add_task(function* () { is(panel.UI.editors.length, 1, "correct number of editors opened"); let monitor = yield toolbox.selectTool("netmonitor"); - let { gStore } = monitor.panelWin; - - is(gStore.getState().requests.requests.size, 0, "No network requests appear in the network panel"); + let { RequestsMenu } = monitor.panelWin.NetMonitorView; + is(RequestsMenu.itemCount, 0, "No network requests appear in the network panel"); yield gDevTools.closeToolbox(target); tab = target = toolbox = panel = null; diff --git a/devtools/client/netmonitor/actions/selection.js b/devtools/client/netmonitor/actions/selection.js index 35a459ec709d..de5fde0b042a 100644 --- a/devtools/client/netmonitor/actions/selection.js +++ b/devtools/client/netmonitor/actions/selection.js @@ -4,13 +4,8 @@ "use strict"; +const { getDisplayedRequests } = require("../selectors/index"); const { SELECT_REQUEST } = require("../constants"); -const { - getDisplayedRequests, - getSortedRequests, -} = require("../selectors/index"); - -const PAGE_SIZE_ITEM_COUNT_RATIO = 5; /** * Select request with a given id. @@ -18,23 +13,11 @@ const PAGE_SIZE_ITEM_COUNT_RATIO = 5; function selectRequest(id) { return { type: SELECT_REQUEST, - id, + id }; } -/** - * 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)); - }; -} +const PAGE_SIZE_ITEM_COUNT_RATIO = 5; /** * Move the selection up to down according to the "delta" parameter. Possible values: @@ -67,6 +50,5 @@ function selectDelta(delta) { module.exports = { selectRequest, - selectRequestByIndex, selectDelta, }; diff --git a/devtools/client/netmonitor/actions/ui.js b/devtools/client/netmonitor/actions/ui.js index c68ec43dc86e..47eb49571df2 100644 --- a/devtools/client/netmonitor/actions/ui.js +++ b/devtools/client/netmonitor/actions/ui.js @@ -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) { return { @@ -66,11 +66,10 @@ function toggleNetworkDetails() { } /** - * Toggle performance statistics panel. + * Toggle to show/hide performance statistics view. */ function toggleStatistics() { - return (dispatch, getState) => - dispatch(openStatistics(!getState().ui.statisticsOpen)); + return (dispatch, getState) => dispatch(openStatistics(!getState().ui.statisticsOpen)); } module.exports = { diff --git a/devtools/client/netmonitor/components/moz.build b/devtools/client/netmonitor/components/moz.build index a8852dfd98e5..273349314c5d 100644 --- a/devtools/client/netmonitor/components/moz.build +++ b/devtools/client/netmonitor/components/moz.build @@ -7,6 +7,7 @@ DevToolsModules( 'request-list-empty.js', 'request-list-header.js', 'request-list-item.js', + 'request-list-tooltip.js', 'request-list.js', 'statistics-panel.js', 'toolbar.js', diff --git a/devtools/client/netmonitor/components/request-list-content.js b/devtools/client/netmonitor/components/request-list-content.js index 74a4c5af7704..1a0efdf45fd8 100644 --- a/devtools/client/netmonitor/components/request-list-content.js +++ b/devtools/client/netmonitor/components/request-list-content.js @@ -1,36 +1,21 @@ /* 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 NetMonitorController */ +/* globals NetMonitorView */ "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 Actions = require("../actions/index"); -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 { createClass, createFactory, DOM, PropTypes } = require("devtools/client/shared/vendor/react"); 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 const REQUESTS_TOOLTIP_TOGGLE_DELAY = 500; @@ -42,10 +27,9 @@ const RequestListContent = createClass({ displayName: "RequestListContent", propTypes: { - contextMenu: PropTypes.object.isRequired, - dispatch: PropTypes.func.isRequired, displayedRequests: PropTypes.object.isRequired, firstRequestStartedMillis: PropTypes.number.isRequired, + onItemContextMenu: PropTypes.func.isRequired, onItemMouseDown: PropTypes.func.isRequired, onSecurityIconClick: PropTypes.func.isRequired, onSelectDelta: PropTypes.func.isRequired, @@ -58,21 +42,12 @@ const RequestListContent = createClass({ }).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() { // Set the CSS variables for waterfall scaling this.setScalingStyles(); // 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, interactive: true }); @@ -103,7 +78,7 @@ const RequestListContent = createClass({ this.refs.contentEl.removeEventListener("scroll", this.onScroll, true); // 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. */ 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 * scrolled to bottom, but allow scrolling up with the selection. @@ -241,57 +211,61 @@ const RequestListContent = createClass({ }, render() { - const { - displayedRequests, - firstRequestStartedMillis, - selectedRequestId, - onItemMouseDown, - onSecurityIconClick, - } = this.props; + const { selectedRequestId, + displayedRequests, + firstRequestStartedMillis, + onItemMouseDown, + onItemContextMenu, + onSecurityIconClick } = this.props; - return ( - div({ + return div( + { ref: "contentEl", className: "requests-menu-contents", tabIndex: 0, onKeyDown: this.onKeyDown, }, - displayedRequests.map((item, index) => RequestListItem({ - key: item.id, - item, - index, - isSelected: item.id === selectedRequestId, - firstRequestStartedMillis, - onMouseDown: () => onItemMouseDown(item.id), - onContextMenu: this.onContextMenu, - onFocusedNodeChange: this.onFocusedNodeChange, - onFocusedNodeUnmount: this.onFocusedNodeUnmount, - onSecurityIconClick: () => onSecurityIconClick(item.securityState), - })) - ) + displayedRequests.map((item, index) => RequestListItem({ + key: item.id, + item, + index, + isSelected: item.id === selectedRequestId, + firstRequestStartedMillis, + onMouseDown: e => onItemMouseDown(e, item.id), + onContextMenu: e => onItemContextMenu(e, item.id), + onSecurityIconClick: e => onSecurityIconClick(e, item), + onFocusedNodeChange: this.onFocusedNodeChange, + onFocusedNodeUnmount: this.onFocusedNodeUnmount, + })) ); }, }); module.exports = connect( - (state) => ({ + state => ({ displayedRequests: getDisplayedRequests(state), - firstRequestStartedMillis: state.requests.firstStartedMillis, selectedRequestId: state.requests.selectedId, scale: getWaterfallScale(state), + firstRequestStartedMillis: state.requests.firstStartedMillis, + tooltip: NetMonitorView.RequestsMenu.tooltip, }), - (dispatch) => ({ - dispatch, - onItemMouseDown: (id) => dispatch(Actions.selectRequest(id)), + dispatch => ({ + onItemMouseDown: (e, item) => dispatch(Actions.selectRequest(item)), + 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 * broken security indicator is clicked. */ - onSecurityIconClick: (securityState) => { + onSecurityIconClick: (e, item) => { + const { securityState } = item; + // Choose the security tab. if (securityState && securityState !== "insecure") { dispatch(Actions.selectDetailsPanelTab("security")); } }, - onSelectDelta: (delta) => dispatch(Actions.selectDelta(delta)), - }), + }) )(RequestListContent); diff --git a/devtools/client/netmonitor/components/request-list-empty.js b/devtools/client/netmonitor/components/request-list-empty.js index c9f4fdac31de..5574c078bb1d 100644 --- a/devtools/client/netmonitor/components/request-list-empty.js +++ b/devtools/client/netmonitor/components/request-list-empty.js @@ -67,8 +67,8 @@ const RequestListEmptyNotice = createClass({ module.exports = connect( undefined, dispatch => ({ - onPerfClick: () => dispatch(Actions.openStatistics(true)), - onReloadClick: () => + onPerfClick: e => dispatch(Actions.openStatistics(true)), + onReloadClick: e => NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT), }) )(RequestListEmptyNotice); diff --git a/devtools/client/netmonitor/components/request-list-item.js b/devtools/client/netmonitor/components/request-list-item.js index 21f4ef66d96f..24392de143a7 100644 --- a/devtools/client/netmonitor/components/request-list-item.js +++ b/devtools/client/netmonitor/components/request-list-item.js @@ -6,17 +6,11 @@ "use strict"; -const { - createClass, - createFactory, - DOM, - PropTypes, -} = require("devtools/client/shared/vendor/react"); +const { createClass, createFactory, PropTypes, DOM } = require("devtools/client/shared/vendor/react"); +const { div, span, img } = DOM; const { L10N } = require("../l10n"); -const { getAbbreviatedMimeType } = require("../request-utils"); const { getFormattedSize } = require("../utils/format-utils"); - -const { div, img, span } = DOM; +const { getAbbreviatedMimeType } = require("../request-utils"); /** * Compare two objects on a subset of their properties @@ -53,7 +47,7 @@ const UPDATED_REQ_ITEM_PROPS = [ const UPDATED_REQ_PROPS = [ "index", "isSelected", - "firstRequestStartedMillis", + "firstRequestStartedMillis" ]; /** @@ -82,7 +76,7 @@ const RequestListItem = createClass({ shouldComponentUpdate(nextProps) { return !propertiesEqual(UPDATED_REQ_ITEM_PROPS, this.props.item, nextProps.item) || - !propertiesEqual(UPDATED_REQ_PROPS, this.props, nextProps); + !propertiesEqual(UPDATED_REQ_PROPS, this.props, nextProps); }, componentDidUpdate(prevProps) { @@ -125,8 +119,8 @@ const RequestListItem = createClass({ } classList.push(index % 2 ? "odd" : "even"); - return ( - div({ + return div( + { ref: "el", className: classList.join(" "), "data-id": item.id, @@ -134,16 +128,15 @@ const RequestListItem = createClass({ onContextMenu, onMouseDown, }, - StatusColumn({ item }), - MethodColumn({ item }), - FileColumn({ item }), - DomainColumn({ item, onSecurityIconClick }), - CauseColumn({ item }), - TypeColumn({ item }), - TransferredSizeColumn({ item }), - ContentSizeColumn({ item }), - WaterfallColumn({ item, firstRequestStartedMillis }), - ) + StatusColumn({ item }), + MethodColumn({ item }), + FileColumn({ item }), + DomainColumn({ item, onSecurityIconClick }), + CauseColumn({ item }), + TypeColumn({ item }), + TransferredSizeColumn({ item }), + ContentSizeColumn({ item }), + WaterfallColumn({ item, firstRequestStartedMillis }) ); } }); @@ -156,8 +149,6 @@ const UPDATED_STATUS_PROPS = [ ]; const StatusColumn = createFactory(createClass({ - displayName: "StatusColumn", - shouldComponentUpdate(nextProps) { return !propertiesEqual(UPDATED_STATUS_PROPS, this.props.item, nextProps.item); }, @@ -187,28 +178,22 @@ const StatusColumn = createFactory(createClass({ } } - return ( - div({ className: "requests-menu-subitem requests-menu-status", title }, - div({ className: "requests-menu-status-icon", "data-code": code }), - span({ className: "subitem-label requests-menu-status-code" }, status), - ) + return div({ className: "requests-menu-subitem requests-menu-status", title }, + div({ className: "requests-menu-status-icon", "data-code": code }), + span({ className: "subitem-label requests-menu-status-code" }, status) ); } })); const MethodColumn = createFactory(createClass({ - displayName: "MethodColumn", - shouldComponentUpdate(nextProps) { return this.props.item.method !== nextProps.item.method; }, render() { const { method } = this.props.item; - return ( - div({ className: "requests-menu-subitem requests-menu-method-box" }, - span({ className: "subitem-label requests-menu-method" }, method) - ) + return div({ className: "requests-menu-subitem requests-menu-method-box" }, + span({ className: "subitem-label requests-menu-method" }, method) ); } })); @@ -219,8 +204,6 @@ const UPDATED_FILE_PROPS = [ ]; const FileColumn = createFactory(createClass({ - displayName: "FileColumn", - shouldComponentUpdate(nextProps) { return !propertiesEqual(UPDATED_FILE_PROPS, this.props.item, nextProps.item); }, @@ -228,20 +211,19 @@ const FileColumn = createFactory(createClass({ render() { const { urlDetails, responseContentDataUri } = this.props.item; - return ( - div({ className: "requests-menu-subitem requests-menu-icon-and-file" }, - img({ - className: "requests-menu-icon", - src: responseContentDataUri, - hidden: !responseContentDataUri, - "data-type": responseContentDataUri ? "thumbnail" : undefined, - }), - div({ + return div({ className: "requests-menu-subitem requests-menu-icon-and-file" }, + img({ + className: "requests-menu-icon", + src: responseContentDataUri, + hidden: !responseContentDataUri, + "data-type": responseContentDataUri ? "thumbnail" : undefined + }), + div( + { 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({ - displayName: "DomainColumn", - shouldComponentUpdate(nextProps) { return !propertiesEqual(UPDATED_DOMAIN_PROPS, this.props.item, nextProps.item); }, @@ -276,22 +256,19 @@ const DomainColumn = createFactory(createClass({ let title = urlDetails.host + (remoteAddress ? ` (${remoteAddress})` : ""); - return ( - div({ className: "requests-menu-subitem requests-menu-security-and-domain" }, - div({ - className: iconClassList.join(" "), - title: iconTitle, - onClick: onSecurityIconClick, - }), - span({ className: "subitem-label requests-menu-domain", title }, urlDetails.host), - ) + return div( + { className: "requests-menu-subitem requests-menu-security-and-domain" }, + div({ + className: iconClassList.join(" "), + title: iconTitle, + onClick: onSecurityIconClick, + }), + span({ className: "subitem-label requests-menu-domain", title }, urlDetails.host) ); } })); const CauseColumn = createFactory(createClass({ - displayName: "CauseColumn", - shouldComponentUpdate(nextProps) { return this.props.item.cause !== nextProps.item.cause; }, @@ -310,17 +287,10 @@ const CauseColumn = createFactory(createClass({ causeHasStack = cause.stacktrace && cause.stacktrace.length > 0; } - return ( - div({ - className: "requests-menu-subitem requests-menu-cause", - title: causeUri, - }, - span({ - className: "requests-menu-cause-stack", - hidden: !causeHasStack, - }, "JS"), - span({ className: "subitem-label" }, causeType), - ) + return div( + { className: "requests-menu-subitem requests-menu-cause", title: causeUri }, + 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({ - displayName: "TypeColumn", - shouldComponentUpdate(nextProps) { return this.props.item.mimeType !== nextProps.item.mimeType; }, @@ -346,13 +314,9 @@ const TypeColumn = createFactory(createClass({ abbrevType = CONTENT_MIME_TYPE_ABBREVIATIONS[abbrevType] || abbrevType; } - return ( - div({ - className: "requests-menu-subitem requests-menu-type", - title: mimeType, - }, - span({ className: "subitem-label" }, abbrevType), - ) + return div( + { className: "requests-menu-subitem requests-menu-type", title: mimeType }, + span({ className: "subitem-label" }, abbrevType) ); } })); @@ -364,8 +328,6 @@ const UPDATED_TRANSFERRED_PROPS = [ ]; const TransferredSizeColumn = createFactory(createClass({ - displayName: "TransferredSizeColumn", - shouldComponentUpdate(nextProps) { return !propertiesEqual(UPDATED_TRANSFERRED_PROPS, this.props.item, nextProps.item); }, @@ -387,20 +349,14 @@ const TransferredSizeColumn = createFactory(createClass({ text = L10N.getStr("networkMenu.sizeUnavailable"); } - return ( - div({ - className: "requests-menu-subitem requests-menu-transferred", - title: text, - }, - span({ className }, text), - ) + return div( + { className: "requests-menu-subitem requests-menu-transferred", title: text }, + span({ className }, text) ); } })); const ContentSizeColumn = createFactory(createClass({ - displayName: "ContentSizeColumn", - shouldComponentUpdate(nextProps) { return this.props.item.contentSize !== nextProps.item.contentSize; }, @@ -413,13 +369,12 @@ const ContentSizeColumn = createFactory(createClass({ text = getFormattedSize(contentSize); } - return ( - div({ + return div( + { className: "requests-menu-subitem subitem-label requests-menu-size", - title: text, + title: text }, - span({ className: "subitem-label" }, text), - ) + span({ className: "subitem-label" }, text) ); } })); @@ -432,26 +387,20 @@ const UPDATED_WATERFALL_PROPS = [ ]; const WaterfallColumn = createFactory(createClass({ - displayName: "WaterfallColumn", - shouldComponentUpdate(nextProps) { return this.props.firstRequestStartedMillis !== nextProps.firstRequestStartedMillis || - !propertiesEqual(UPDATED_WATERFALL_PROPS, this.props.item, nextProps.item); + !propertiesEqual(UPDATED_WATERFALL_PROPS, this.props.item, nextProps.item); }, render() { const { item, firstRequestStartedMillis } = this.props; + const startedDeltaMillis = item.startedMillis - firstRequestStartedMillis; + const paddingInlineStart = `${startedDeltaMillis}px`; - return ( - div({ className: "requests-menu-subitem requests-menu-waterfall" }, - div({ - className: "requests-menu-timings", - style: { - paddingInlineStart: `${item.startedMillis - firstRequestStartedMillis}px`, - }, - }, - timingBoxes(item), - ) + return div({ className: "requests-menu-subitem requests-menu-waterfall" }, + div( + { className: "requests-menu-timings", style: { paddingInlineStart } }, + timingBoxes(item) ) ); } diff --git a/devtools/client/netmonitor/request-list-tooltip.js b/devtools/client/netmonitor/components/request-list-tooltip.js similarity index 93% rename from devtools/client/netmonitor/request-list-tooltip.js rename to devtools/client/netmonitor/components/request-list-tooltip.js index 623b2cfaeaa1..ec090fa20512 100644 --- a/devtools/client/netmonitor/request-list-tooltip.js +++ b/devtools/client/netmonitor/components/request-list-tooltip.js @@ -7,12 +7,10 @@ "use strict"; const { Task } = require("devtools/shared/task"); -const { - setImageTooltip, - getImageDimensions, -} = require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper"); -const { WEBCONSOLE_L10N } = require("./l10n"); -const { formDataURI } = require("./request-utils"); +const { formDataURI } = require("../request-utils"); +const { WEBCONSOLE_L10N } = require("../l10n"); +const { setImageTooltip, + getImageDimensions } = require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper"); // px const REQUESTS_TOOLTIP_IMAGE_MAX_DIM = 400; diff --git a/devtools/client/netmonitor/components/request-list.js b/devtools/client/netmonitor/components/request-list.js index b1a330c290ac..7048fdb4b629 100644 --- a/devtools/client/netmonitor/components/request-list.js +++ b/devtools/client/netmonitor/components/request-list.js @@ -2,126 +2,33 @@ * 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/. */ -/* eslint-env browser */ -/* globals gNetwork */ - "use strict"; -const { - 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 { createFactory, PropTypes, DOM } = require("devtools/client/shared/vendor/react"); 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({ - displayName: "RequestList", +const RequestList = function ({ isEmpty }) { + return div({ className: "request-list-container" }, + RequestListHeader(), + isEmpty ? RequestListEmptyNotice() : RequestListContent() + ); +}; - propTypes: { - activeFilters: PropTypes.array, - dispatch: PropTypes.func, - isEmpty: PropTypes.bool.isRequired, - request: PropTypes.object, - networkDetailsOpen: PropTypes.bool, - }, +RequestList.displayName = "RequestList"; - 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(), - this.props.isEmpty ? RequestListEmptyNotice() : RequestListContent(), - ) - ); - } -}); +RequestList.propTypes = { + isEmpty: PropTypes.bool.isRequired, +}; module.exports = connect( - (state) => ({ - activeFilters: getActiveFilters(state), - isEmpty: state.requests.requests.isEmpty(), - request: getSelectedRequest(state), - networkDetailsOpen: state.ui.networkDetailsOpen, + state => ({ + isEmpty: state.requests.requests.isEmpty() }) )(RequestList); diff --git a/devtools/client/netmonitor/components/toolbar.js b/devtools/client/netmonitor/components/toolbar.js index ef33b955a20b..e4e725828b11 100644 --- a/devtools/client/netmonitor/components/toolbar.js +++ b/devtools/client/netmonitor/components/toolbar.js @@ -116,7 +116,7 @@ function Toolbar({ title: networkDetailsOpen ? COLLPASE_DETAILS_PANE : EXPAND_DETAILS_PANE, disabled: networkDetailsToggleDisabled, tabIndex: "0", - onClick: toggleNetworkDetails, + onMouseDown: toggleNetworkDetails, }), ) ) diff --git a/devtools/client/netmonitor/har/har-builder.js b/devtools/client/netmonitor/har/har-builder.js index 06226a89fa6b..698be8dcfd01 100644 --- a/devtools/client/netmonitor/har/har-builder.js +++ b/devtools/client/netmonitor/har/har-builder.js @@ -30,7 +30,8 @@ const HAR_VERSION = "1.1"; * * 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. * diff --git a/devtools/client/netmonitor/har/har-exporter.js b/devtools/client/netmonitor/har/har-exporter.js index 840f87470cba..363ff6b33bba 100644 --- a/devtools/client/netmonitor/har/har-exporter.js +++ b/devtools/client/netmonitor/har/har-exporter.js @@ -46,7 +46,8 @@ const HarExporter = { * are also included in the HAR file (can produce significantly bigger * 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 * for JSONP syntax). diff --git a/devtools/client/netmonitor/har/test/browser_net_har_copy_all_as_har.js b/devtools/client/netmonitor/har/test/browser_net_har_copy_all_as_har.js index d51f18e7c4e1..10df7aba6e06 100644 --- a/devtools/client/netmonitor/har/test/browser_net_har_copy_all_as_har.js +++ b/devtools/client/netmonitor/har/test/browser_net_har_copy_all_as_har.js @@ -11,19 +11,16 @@ add_task(function* () { info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let RequestListContextMenu = windowRequire( - "devtools/client/netmonitor/request-list-context-menu"); + let { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); tab.linkedBrowser.reload(); yield wait; - let contextMenu = new RequestListContextMenu({}); - yield contextMenu.copyAllAsHar(); + yield RequestsMenu.contextMenu.copyAllAsHar(); let jsonString = SpecialPowers.getClipboardData("text/unicode"); let har = JSON.parse(jsonString); diff --git a/devtools/client/netmonitor/moz.build b/devtools/client/netmonitor/moz.build index 2d0bcfcd9499..69b5d497d401 100644 --- a/devtools/client/netmonitor/moz.build +++ b/devtools/client/netmonitor/moz.build @@ -23,8 +23,8 @@ DevToolsModules( 'panel.js', 'prefs.js', 'request-list-context-menu.js', - 'request-list-tooltip.js', 'request-utils.js', + 'requests-menu-view.js', 'sort-predicates.js', 'store.js', 'waterfall-background.js', diff --git a/devtools/client/netmonitor/netmonitor-controller.js b/devtools/client/netmonitor/netmonitor-controller.js index 03af05e4b300..0c2b4f4b633b 100644 --- a/devtools/client/netmonitor/netmonitor-controller.js +++ b/devtools/client/netmonitor/netmonitor-controller.js @@ -3,28 +3,28 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /* eslint-disable mozilla/reject-some-requires */ -/* globals window, NetMonitorView, gStore, gNetwork, dumpn */ +/* globals window, NetMonitorView, gStore, dumpn */ "use strict"; const promise = require("promise"); const Services = require("Services"); +const {XPCOMUtils} = require("resource://gre/modules/XPCOMUtils.jsm"); const EventEmitter = require("devtools/shared/event-emitter"); -const { TimelineFront } = require("devtools/shared/fronts/timeline"); -const { CurlUtils } = require("devtools/client/shared/curl"); -const { Task } = require("devtools/shared/task"); +const Editor = require("devtools/client/sourceeditor/editor"); +const {TimelineFront} = require("devtools/shared/fronts/timeline"); +const {Task} = require("devtools/shared/task"); const { ACTIVITY_TYPE } = require("./constants"); const { EVENTS } = require("./events"); const { configureStore } = require("./store"); const Actions = require("./actions/index"); -const { - fetchHeaders, - formDataURI, -} = require("./request-utils"); -const { - getRequestById, - getDisplayedRequestById, -} = require("./selectors/index"); +const { getDisplayedRequestById } = require("./selectors/index"); +const { Prefs } = require("./prefs"); + +XPCOMUtils.defineConstant(window, "EVENTS", EVENTS); +XPCOMUtils.defineConstant(window, "ACTIVITY_TYPE", ACTIVITY_TYPE); +XPCOMUtils.defineConstant(window, "Editor", Editor); +XPCOMUtils.defineConstant(window, "Prefs", Prefs); // Initialize the global Redux store window.gStore = configureStore(); @@ -418,8 +418,7 @@ TargetEventsHandler.prototype = { case "will-navigate": { // Reset UI. if (!Services.prefs.getBoolPref("devtools.webconsole.persistlog")) { - gStore.dispatch(Actions.batchReset()); - gStore.dispatch(Actions.clearRequests()); + NetMonitorView.RequestsMenu.reset(); } else { // If the log is persistent, just clear all accumulated timing markers. gStore.dispatch(Actions.clearTimingMarkers()); @@ -447,8 +446,6 @@ TargetEventsHandler.prototype = { * Functions handling target network events. */ function NetworkEventsHandler() { - this.addRequest = this.addRequest.bind(this); - this.updateRequest = this.updateRequest.bind(this); this._onNetworkEvent = this._onNetworkEvent.bind(this); this._onNetworkEventUpdate = this._onNetworkEventUpdate.bind(this); this._onDocLoadingMarker = this._onDocLoadingMarker.bind(this); @@ -458,7 +455,6 @@ function NetworkEventsHandler() { this._onResponseHeaders = this._onResponseHeaders.bind(this); this._onResponseCookies = this._onResponseCookies.bind(this); this._onResponseContent = this._onResponseContent.bind(this); - this._onSecurityInfo = this._onSecurityInfo.bind(this); this._onEventTimings = this._onEventTimings.bind(this); } @@ -552,153 +548,12 @@ NetworkEventsHandler.prototype = { fromServiceWorker } = networkInfo; - this.addRequest( + NetMonitorView.RequestsMenu.addRequest( actor, {startedDateTime, method, url, isXHR, cause, fromCache, fromServiceWorker} ); 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. * @@ -711,6 +566,7 @@ NetworkEventsHandler.prototype = { */ _onNetworkEventUpdate: function (type, { packet, networkInfo }) { let { actor } = networkInfo; + switch (packet.updateType) { case "requestHeaders": this.webConsoleClient.getRequestHeaders(actor, this._onRequestHeaders); @@ -726,7 +582,7 @@ NetworkEventsHandler.prototype = { window.emit(EVENTS.UPDATING_REQUEST_POST_DATA, actor); break; case "securityInfo": - this.updateRequest(actor, { + NetMonitorView.RequestsMenu.updateRequest(actor, { securityState: networkInfo.securityInfo, }); this.webConsoleClient.getSecurityInfo(actor, this._onSecurityInfo); @@ -743,7 +599,7 @@ NetworkEventsHandler.prototype = { window.emit(EVENTS.UPDATING_RESPONSE_COOKIES, actor); break; case "responseStart": - this.updateRequest(actor, { + NetMonitorView.RequestsMenu.updateRequest(actor, { httpVersion: networkInfo.response.httpVersion, remoteAddress: networkInfo.response.remoteAddress, remotePort: networkInfo.response.remotePort, @@ -754,7 +610,7 @@ NetworkEventsHandler.prototype = { window.emit(EVENTS.STARTED_RECEIVING_RESPONSE, actor); break; case "responseContent": - this.updateRequest(actor, { + NetMonitorView.RequestsMenu.updateRequest(actor, { contentSize: networkInfo.response.bodySize, transferredSize: networkInfo.response.transferredSize, mimeType: networkInfo.response.content.mimeType @@ -764,7 +620,7 @@ NetworkEventsHandler.prototype = { window.emit(EVENTS.UPDATING_RESPONSE_CONTENT, actor); break; case "eventTimings": - this.updateRequest(actor, { + NetMonitorView.RequestsMenu.updateRequest(actor, { totalTime: networkInfo.totalTime }); this.webConsoleClient.getEventTimings(actor, this._onEventTimings); @@ -780,7 +636,7 @@ NetworkEventsHandler.prototype = { * The message received from the server. */ _onRequestHeaders: function (response) { - this.updateRequest(response.from, { + NetMonitorView.RequestsMenu.updateRequest(response.from, { requestHeaders: response }).then(() => { window.emit(EVENTS.RECEIVED_REQUEST_HEADERS, response.from); @@ -794,7 +650,7 @@ NetworkEventsHandler.prototype = { * The message received from the server. */ _onRequestCookies: function (response) { - this.updateRequest(response.from, { + NetMonitorView.RequestsMenu.updateRequest(response.from, { requestCookies: response }).then(() => { window.emit(EVENTS.RECEIVED_REQUEST_COOKIES, response.from); @@ -808,7 +664,7 @@ NetworkEventsHandler.prototype = { * The message received from the server. */ _onRequestPostData: function (response) { - this.updateRequest(response.from, { + NetMonitorView.RequestsMenu.updateRequest(response.from, { requestPostData: response }).then(() => { window.emit(EVENTS.RECEIVED_REQUEST_POST_DATA, response.from); @@ -822,7 +678,7 @@ NetworkEventsHandler.prototype = { * The message received from the server. */ _onSecurityInfo: function (response) { - this.updateRequest(response.from, { + NetMonitorView.RequestsMenu.updateRequest(response.from, { securityInfo: response.securityInfo }).then(() => { window.emit(EVENTS.RECEIVED_SECURITY_INFO, response.from); @@ -836,7 +692,7 @@ NetworkEventsHandler.prototype = { * The message received from the server. */ _onResponseHeaders: function (response) { - this.updateRequest(response.from, { + NetMonitorView.RequestsMenu.updateRequest(response.from, { responseHeaders: response }).then(() => { window.emit(EVENTS.RECEIVED_RESPONSE_HEADERS, response.from); @@ -850,7 +706,7 @@ NetworkEventsHandler.prototype = { * The message received from the server. */ _onResponseCookies: function (response) { - this.updateRequest(response.from, { + NetMonitorView.RequestsMenu.updateRequest(response.from, { responseCookies: response }).then(() => { window.emit(EVENTS.RECEIVED_RESPONSE_COOKIES, response.from); @@ -864,7 +720,7 @@ NetworkEventsHandler.prototype = { * The message received from the server. */ _onResponseContent: function (response) { - this.updateRequest(response.from, { + NetMonitorView.RequestsMenu.updateRequest(response.from, { responseContent: response }).then(() => { window.emit(EVENTS.RECEIVED_RESPONSE_CONTENT, response.from); @@ -878,7 +734,7 @@ NetworkEventsHandler.prototype = { * The message received from the server. */ _onEventTimings: function (response) { - this.updateRequest(response.from, { + NetMonitorView.RequestsMenu.updateRequest(response.from, { eventTimings: response }).then(() => { window.emit(EVENTS.RECEIVED_EVENT_TIMINGS, response.from); diff --git a/devtools/client/netmonitor/netmonitor-view.js b/devtools/client/netmonitor/netmonitor-view.js index 7b18ee7ce2b6..bc00aeb73ffc 100644 --- a/devtools/client/netmonitor/netmonitor-view.js +++ b/devtools/client/netmonitor/netmonitor-view.js @@ -2,11 +2,12 @@ * 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/. */ -/* eslint-env browser */ -/* globals gStore, NetMonitorController */ +/* eslint-disable mozilla/reject-some-requires */ +/* globals $, gStore, NetMonitorController */ "use strict"; +const { RequestsMenuView } = require("./requests-menu-view"); const { ACTIVITY_TYPE } = require("./constants"); const { createFactory } = require("devtools/client/shared/vendor/react"); const ReactDOM = require("devtools/client/shared/vendor/react-dom"); @@ -14,45 +15,42 @@ const Provider = createFactory(require("devtools/client/shared/vendor/react-redu // Components const NetworkDetailsPanel = createFactory(require("./shared/components/network-details-panel")); -const RequestList = createFactory(require("./components/request-list")); const StatisticsPanel = createFactory(require("./components/statistics-panel")); const Toolbar = createFactory(require("./components/toolbar")); /** * Object defining the network monitor view components. */ -exports.NetMonitorView = { +var NetMonitorView = { /** * Initializes the network monitor view. */ 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( { store: gStore }, NetworkDetailsPanel({ toolbox: NetMonitorController._toolbox }), ), this.networkDetailsPanel); - this.requestList = document.querySelector("#react-request-list-hook"); - ReactDOM.render(Provider( - { store: gStore }, - RequestList({ toolbox: NetMonitorController._toolbox }) - ), this.requestList); + this.statisticsPanel = $("#react-statistics-panel-hook"); - this.statisticsPanel = document.querySelector("#react-statistics-panel-hook"); ReactDOM.render(Provider( { store: gStore }, StatisticsPanel(), ), this.statisticsPanel); - this.toolbar = document.querySelector("#react-toolbar-hook"); + this.toolbar = $("#react-toolbar-hook"); + ReactDOM.render(Provider( { store: gStore }, Toolbar(), ), this.toolbar); + this.RequestsMenu.initialize(gStore); + // Store watcher here is for observing the statisticsOpen state change. // It should be removed once we migrate to react and apply react/redex binding. this.unsubscribeStore = gStore.subscribe(storeWatcher( @@ -66,8 +64,8 @@ exports.NetMonitorView = { * Destroys the network monitor view. */ destroy: function () { + this.RequestsMenu.destroy(); ReactDOM.unmountComponentAtNode(this.networkDetailsPanel); - ReactDOM.unmountComponentAtNode(this.requestList); ReactDOM.unmountComponentAtNode(this.statisticsPanel); ReactDOM.unmountComponentAtNode(this.toolbar); this.unsubscribeStore(); @@ -75,10 +73,10 @@ exports.NetMonitorView = { toggleFrontendMode: function () { 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); } 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; diff --git a/devtools/client/netmonitor/netmonitor.xul b/devtools/client/netmonitor/netmonitor.xul index fba438809b2c..68ace92c095b 100644 --- a/devtools/client/netmonitor/netmonitor.xul +++ b/devtools/client/netmonitor/netmonitor.xul @@ -26,7 +26,7 @@ class="devtools-responsive-container" flex="1"> diff --git a/devtools/client/netmonitor/request-list-context-menu.js b/devtools/client/netmonitor/request-list-context-menu.js index 6538deeb1b7d..ab4311670e9c 100644 --- a/devtools/client/netmonitor/request-list-context-menu.js +++ b/devtools/client/netmonitor/request-list-context-menu.js @@ -2,7 +2,7 @@ * 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 NetMonitorController, gNetwork, gStore */ +/* globals NetMonitorController, NetMonitorView, gNetwork */ "use strict"; @@ -19,10 +19,7 @@ const { getUrlQuery, parseQueryString, } = require("./request-utils"); -const { - getSelectedRequest, - getSortedRequests, -} = require("./selectors/index"); +const Actions = require("./actions/index"); loader.lazyRequireGetter(this, "HarExporter", "devtools/client/netmonitor/har/har-exporter", true); @@ -30,21 +27,22 @@ loader.lazyRequireGetter(this, "HarExporter", loader.lazyServiceGetter(this, "clipboardHelper", "@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper"); -function RequestListContextMenu({ - cloneSelectedRequest, - openStatistics, -}) { - this.cloneSelectedRequest = cloneSelectedRequest; - this.openStatistics = openStatistics; -} +function RequestListContextMenu() {} RequestListContextMenu.prototype = { - get selectedRequest() { - return getSelectedRequest(gStore.getState()); + get selectedItem() { + return NetMonitorView.RequestsMenu.selectedItem; }, - get sortedRequests() { - return getSortedRequests(gStore.getState()); + get items() { + 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 */ open({ screenX = 0, screenY = 0 } = {}) { - let selectedRequest = this.selectedRequest; + let selectedItem = this.selectedItem; let menu = new Menu(); menu.append(new MenuItem({ id: "request-menu-context-copy-url", label: L10N.getStr("netmonitor.context.copyUrl"), accesskey: L10N.getStr("netmonitor.context.copyUrl.accesskey"), - visible: !!selectedRequest, + visible: !!selectedItem, click: () => this.copyUrl(), })); @@ -68,7 +66,7 @@ RequestListContextMenu.prototype = { id: "request-menu-context-copy-url-params", label: L10N.getStr("netmonitor.context.copyUrlParams"), accesskey: L10N.getStr("netmonitor.context.copyUrlParams.accesskey"), - visible: !!(selectedRequest && getUrlQuery(selectedRequest.url)), + visible: !!(selectedItem && getUrlQuery(selectedItem.url)), click: () => this.copyUrlParams(), })); @@ -76,7 +74,7 @@ RequestListContextMenu.prototype = { id: "request-menu-context-copy-post-data", label: L10N.getStr("netmonitor.context.copyPostData"), accesskey: L10N.getStr("netmonitor.context.copyPostData.accesskey"), - visible: !!(selectedRequest && selectedRequest.requestPostData), + visible: !!(selectedItem && selectedItem.requestPostData), click: () => this.copyPostData(), })); @@ -84,20 +82,20 @@ RequestListContextMenu.prototype = { id: "request-menu-context-copy-as-curl", label: L10N.getStr("netmonitor.context.copyAsCurl"), accesskey: L10N.getStr("netmonitor.context.copyAsCurl.accesskey"), - visible: !!selectedRequest, + visible: !!selectedItem, click: () => this.copyAsCurl(), })); menu.append(new MenuItem({ type: "separator", - visible: !!selectedRequest, + visible: !!selectedItem, })); menu.append(new MenuItem({ id: "request-menu-context-copy-request-headers", label: L10N.getStr("netmonitor.context.copyRequestHeaders"), accesskey: L10N.getStr("netmonitor.context.copyRequestHeaders.accesskey"), - visible: !!(selectedRequest && selectedRequest.requestHeaders), + visible: !!(selectedItem && selectedItem.requestHeaders), click: () => this.copyRequestHeaders(), })); @@ -105,7 +103,7 @@ RequestListContextMenu.prototype = { id: "response-menu-context-copy-response-headers", label: L10N.getStr("netmonitor.context.copyResponseHeaders"), accesskey: L10N.getStr("netmonitor.context.copyResponseHeaders.accesskey"), - visible: !!(selectedRequest && selectedRequest.responseHeaders), + visible: !!(selectedItem && selectedItem.responseHeaders), click: () => this.copyResponseHeaders(), })); @@ -113,10 +111,10 @@ RequestListContextMenu.prototype = { id: "request-menu-context-copy-response", label: L10N.getStr("netmonitor.context.copyResponse"), accesskey: L10N.getStr("netmonitor.context.copyResponse.accesskey"), - visible: !!(selectedRequest && - selectedRequest.responseContent && - selectedRequest.responseContent.content.text && - selectedRequest.responseContent.content.text.length !== 0), + visible: !!(selectedItem && + selectedItem.responseContent && + selectedItem.responseContent.content.text && + selectedItem.responseContent.content.text.length !== 0), click: () => this.copyResponse(), })); @@ -124,22 +122,22 @@ RequestListContextMenu.prototype = { id: "request-menu-context-copy-image-as-data-uri", label: L10N.getStr("netmonitor.context.copyImageAsDataUri"), accesskey: L10N.getStr("netmonitor.context.copyImageAsDataUri.accesskey"), - visible: !!(selectedRequest && - selectedRequest.responseContent && - selectedRequest.responseContent.content.mimeType.includes("image/")), + visible: !!(selectedItem && + selectedItem.responseContent && + selectedItem.responseContent.content.mimeType.includes("image/")), click: () => this.copyImageAsDataUri(), })); menu.append(new MenuItem({ type: "separator", - visible: !!selectedRequest, + visible: !!selectedItem, })); menu.append(new MenuItem({ id: "request-menu-context-copy-all-as-har", label: L10N.getStr("netmonitor.context.copyAllAsHar"), accesskey: L10N.getStr("netmonitor.context.copyAllAsHar.accesskey"), - visible: this.sortedRequests.size > 0, + visible: this.items.size > 0, click: () => this.copyAllAsHar(), })); @@ -147,13 +145,13 @@ RequestListContextMenu.prototype = { id: "request-menu-context-save-all-as-har", label: L10N.getStr("netmonitor.context.saveAllAsHar"), accesskey: L10N.getStr("netmonitor.context.saveAllAsHar.accesskey"), - visible: this.sortedRequests.size > 0, + visible: this.items.size > 0, click: () => this.saveAllAsHar(), })); menu.append(new MenuItem({ type: "separator", - visible: !!selectedRequest, + visible: !!selectedItem, })); menu.append(new MenuItem({ @@ -161,20 +159,20 @@ RequestListContextMenu.prototype = { label: L10N.getStr("netmonitor.context.editAndResend"), accesskey: L10N.getStr("netmonitor.context.editAndResend.accesskey"), visible: !!(NetMonitorController.supportsCustomRequest && - selectedRequest && !selectedRequest.isCustom), - click: this.cloneSelectedRequest, + selectedItem && !selectedItem.isCustom), + click: () => NetMonitorView.RequestsMenu.cloneSelectedRequest(), })); menu.append(new MenuItem({ type: "separator", - visible: !!selectedRequest, + visible: !!selectedItem, })); menu.append(new MenuItem({ id: "request-menu-context-newtab", label: L10N.getStr("netmonitor.context.newTab"), accesskey: L10N.getStr("netmonitor.context.newTab.accesskey"), - visible: !!selectedRequest, + visible: !!selectedItem, click: () => this.openRequestInTab() })); @@ -183,7 +181,7 @@ RequestListContextMenu.prototype = { label: L10N.getStr("netmonitor.context.perfTools"), accesskey: L10N.getStr("netmonitor.context.perfTools.accesskey"), visible: !!NetMonitorController.supportsPerfStats, - click: () => this.openStatistics(true) + click: () => this.store.dispatch(Actions.openStatistics(true)) })); menu.popup(screenX, screenY, NetMonitorController._toolbox); @@ -195,14 +193,14 @@ RequestListContextMenu.prototype = { */ openRequestInTab() { 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. */ copyUrl() { - clipboardHelper.copyString(this.selectedRequest.url); + clipboardHelper.copyString(this.selectedItem.url); }, /** @@ -210,7 +208,7 @@ RequestListContextMenu.prototype = { * selected item. */ copyUrlParams() { - let { url } = this.selectedRequest; + let { url } = this.selectedItem; let params = getUrlQuery(url).split("&"); let string = params.join(Services.appinfo.OS === "WINNT" ? "\r\n" : "\n"); clipboardHelper.copyString(string); @@ -221,7 +219,7 @@ RequestListContextMenu.prototype = { * the currently selected item. */ copyPostData: Task.async(function* () { - let selected = this.selectedRequest; + let selected = this.selectedItem; // Try to extract any form data parameters. let formDataSections = yield getFormDataSections( @@ -258,7 +256,7 @@ RequestListContextMenu.prototype = { * Copy a cURL command from the currently selected item. */ copyAsCurl: Task.async(function* () { - let selected = this.selectedRequest; + let selected = this.selectedItem; // Create a sanitized object for the Curl command generator. let data = { @@ -288,7 +286,7 @@ RequestListContextMenu.prototype = { * Copy the raw request headers from the currently selected item. */ copyRequestHeaders() { - let rawHeaders = this.selectedRequest.requestHeaders.rawHeaders.trim(); + let rawHeaders = this.selectedItem.requestHeaders.rawHeaders.trim(); if (Services.appinfo.OS !== "WINNT") { rawHeaders = rawHeaders.replace(/\r/g, ""); } @@ -299,7 +297,7 @@ RequestListContextMenu.prototype = { * Copy the raw response headers from the currently selected item. */ copyResponseHeaders() { - let rawHeaders = this.selectedRequest.responseHeaders.rawHeaders.trim(); + let rawHeaders = this.selectedItem.responseHeaders.rawHeaders.trim(); if (Services.appinfo.OS !== "WINNT") { rawHeaders = rawHeaders.replace(/\r/g, ""); } @@ -310,7 +308,7 @@ RequestListContextMenu.prototype = { * Copy image as data uri. */ copyImageAsDataUri() { - const { mimeType, text, encoding } = this.selectedRequest.responseContent.content; + const { mimeType, text, encoding } = this.selectedItem.responseContent.content; gNetwork.getString(text).then(string => { let data = formDataURI(mimeType, encoding, string); @@ -322,7 +320,7 @@ RequestListContextMenu.prototype = { * Copy response data as a string. */ copyResponse() { - const { text } = this.selectedRequest.responseContent.content; + const { text } = this.selectedItem.responseContent.content; gNetwork.getString(text).then(string => { clipboardHelper.copyString(string); @@ -351,7 +349,7 @@ RequestListContextMenu.prototype = { return { getString: gNetwork.getString.bind(gNetwork), - items: this.sortedRequests, + items: this.items, title: title }; } diff --git a/devtools/client/netmonitor/requests-menu-view.js b/devtools/client/netmonitor/requests-menu-view.js new file mode 100644 index 000000000000..cdf4d879ceec --- /dev/null +++ b/devtools/client/netmonitor/requests-menu-view.js @@ -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; diff --git a/devtools/client/netmonitor/test/browser.ini b/devtools/client/netmonitor/test/browser.ini index 9a250ceb7b1e..10de669668fc 100644 --- a/devtools/client/netmonitor/test/browser.ini +++ b/devtools/client/netmonitor/test/browser.ini @@ -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_simple-init.js] [browser_net_simple-request-data.js] +skip-if = true # Bug 1258809 [browser_net_simple-request-details.js] skip-if = true # Bug 1258809 [browser_net_simple-request.js] [browser_net_sort-01.js] +skip-if = true # Redundant for React/Redux version [browser_net_sort-02.js] +[browser_net_sort-03.js] [browser_net_statistics-01.js] [browser_net_statistics-02.js] [browser_net_status-codes.js] diff --git a/devtools/client/netmonitor/test/browser_net_accessibility-01.js b/devtools/client/netmonitor/test/browser_net_accessibility-01.js index 56400ef3a2ac..e2a4e5045b52 100644 --- a/devtools/client/netmonitor/test/browser_net_accessibility-01.js +++ b/devtools/client/netmonitor/test/browser_net_accessibility-01.js @@ -14,17 +14,18 @@ add_task(function* () { // It seems that this test may be slow on Ubuntu builds running on ec2. requestLongerTimeout(2); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); + let { document, NetMonitorView, gStore, windowRequire } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; + + let Actions = windowRequire("devtools/client/netmonitor/actions/index"); let count = 0; function check(selectedIndex, panelVisibility) { info("Performing check " + (count++) + "."); - let requestItems = Array.from(document.querySelectorAll(".request-list-item")); - is(requestItems.findIndex((item) => item.matches(".selected")), selectedIndex, + is(RequestsMenu.selectedIndex, selectedIndex, "The selected item in the requests menu was incorrect."); is(!!document.querySelector(".network-details-panel"), panelVisibility, "The network details panel should render correctly."); diff --git a/devtools/client/netmonitor/test/browser_net_accessibility-02.js b/devtools/client/netmonitor/test/browser_net_accessibility-02.js index 7e4523698259..40c0a39423ae 100644 --- a/devtools/client/netmonitor/test/browser_net_accessibility-02.js +++ b/devtools/client/netmonitor/test/browser_net_accessibility-02.js @@ -14,17 +14,16 @@ add_task(function* () { // It seems that this test may be slow on Ubuntu builds running on ec2. requestLongerTimeout(2); - let { window, document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); + let { window, document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let count = 0; function check(selectedIndex, panelVisibility) { info("Performing check " + (count++) + "."); - let requestItems = Array.from(document.querySelectorAll(".request-list-item")); - is(requestItems.findIndex((item) => item.matches(".selected")), selectedIndex, + is(RequestsMenu.selectedIndex, selectedIndex, "The selected item in the requests menu was incorrect."); is(!!document.querySelector(".network-details-panel"), panelVisibility, "The network details panel should render correctly."); diff --git a/devtools/client/netmonitor/test/browser_net_api-calls.js b/devtools/client/netmonitor/test/browser_net_api-calls.js index 8c04d35c5608..7fd87afe9619 100644 --- a/devtools/client/netmonitor/test/browser_net_api-calls.js +++ b/devtools/client/netmonitor/test/browser_net_api-calls.js @@ -12,14 +12,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(API_CALLS_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; const REQUEST_URIS = [ "http://example.com/api/fileName.xml", @@ -36,13 +32,7 @@ add_task(function* () { yield wait; REQUEST_URIS.forEach(function (uri, index) { - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(index), - "GET", - uri - ); + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(index), "GET", uri); }); yield teardown(monitor); diff --git a/devtools/client/netmonitor/test/browser_net_autoscroll.js b/devtools/client/netmonitor/test/browser_net_autoscroll.js index c0bcf3d32e69..86f9300d8852 100644 --- a/devtools/client/netmonitor/test/browser_net_autoscroll.js +++ b/devtools/client/netmonitor/test/browser_net_autoscroll.js @@ -10,13 +10,12 @@ add_task(function* () { requestLongerTimeout(2); let { monitor } = yield initNetMonitor(INFINITE_GET_URL); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); + let { $ } = monitor.panelWin; // Wait until the first request makes the empty notice disappear yield waitForRequestListToAppear(); - let requestsContainer = document.querySelector(".requests-menu-contents"); + let requestsContainer = $(".requests-menu-contents"); ok(requestsContainer, "Container element exists as expected."); // (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 // do not change the scroll position. - gStore.dispatch(Actions.selectRequestByIndex(0)); + monitor.panelWin.NetMonitorView.RequestsMenu.selectedIndex = 0; yield waitForNetworkEvents(monitor, 8); yield waitSomeTime(); is(requestsContainer.scrollTop, 0, "Did not scroll."); @@ -57,7 +56,7 @@ add_task(function* () { function waitForRequestListToAppear() { 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() { @@ -65,8 +64,6 @@ add_task(function* () { while (true) { info("Waiting for one network request"); yield waitForNetworkEvents(monitor, 1); - console.log(requestsContainer.scrollHeight); - console.log(requestsContainer.clientHeight) if (requestsContainer.scrollHeight > requestsContainer.clientHeight) { info("The list is long enough, returning"); return; diff --git a/devtools/client/netmonitor/test/browser_net_brotli.js b/devtools/client/netmonitor/test/browser_net_brotli.js index d7a54eb63bfa..a59754d6534a 100644 --- a/devtools/client/netmonitor/test/browser_net_brotli.js +++ b/devtools/client/netmonitor/test/browser_net_brotli.js @@ -16,14 +16,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(BROTLI_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, BROTLI_REQUESTS); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -31,10 +27,7 @@ add_task(function* () { }); yield wait; - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(0), + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0), "GET", HTTPS_CONTENT_TYPE_SJS + "?fmt=br", { status: 200, statusText: "Connected", @@ -46,10 +39,9 @@ add_task(function* () { }); wait = waitForDOM(document, "#response-panel .editor-mount iframe"); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#response-tab")); + document.querySelector("#response-tab").click(); let [editorFrame] = yield wait; yield once(editorFrame, "DOMContentLoaded"); diff --git a/devtools/client/netmonitor/test/browser_net_cached-status.js b/devtools/client/netmonitor/test/browser_net_cached-status.js index 5092e9bd37a0..dc522405c655 100644 --- a/devtools/client/netmonitor/test/browser_net_cached-status.js +++ b/devtools/client/netmonitor/test/browser_net_cached-status.js @@ -11,14 +11,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(STATUS_CODES_URL, null, true); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { NetMonitorView } = monitor.panelWin; + let { RequestsMenu, NetworkDetails } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; const REQUEST_DATA = [ { @@ -93,15 +89,11 @@ add_task(function* () { let index = 0; for (let request of REQUEST_DATA) { + let item = RequestsMenu.getItemAtIndex(index); + info("Verifying request #" + index); - yield verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(index), - request.method, - request.uri, - request.details - ); + yield verifyRequestItemTarget(RequestsMenu, item, + request.method, request.uri, request.details); index++; } diff --git a/devtools/client/netmonitor/test/browser_net_cause.js b/devtools/client/netmonitor/test/browser_net_cause.js index 756f6a7d223c..469f779f1606 100644 --- a/devtools/client/netmonitor/test/browser_net_cause.js +++ b/devtools/client/netmonitor/test/browser_net_cause.js @@ -88,33 +88,23 @@ add_task(function* () { // We can't use about:blank here, because initNetMonitor checks that the // page has actually made at least one request. 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); tab.linkedBrowser.loadURI(CAUSE_URL); yield wait; - is(gStore.getState().requests.requests.size, EXPECTED_REQUESTS.length, + is(RequestsMenu.itemCount, EXPECTED_REQUESTS.length, "All the page events should be recorded."); EXPECTED_REQUESTS.forEach((spec, i) => { let { method, url, causeType, causeUri, stack } = spec; - let requestItem = getSortedRequests(gStore.getState()).get(i); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - requestItem, - method, - url, - { cause: { type: causeType, loadingDocumentUri: causeUri } } + let requestItem = RequestsMenu.getItemAtIndex(i); + verifyRequestItemTarget(RequestsMenu, requestItem, + method, url, { cause: { type: causeType, loadingDocumentUri: causeUri } } ); let { stacktrace } = requestItem.cause; @@ -144,11 +134,10 @@ add_task(function* () { }); // Sort the requests by cause and check the order - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#requests-menu-cause-button")); + EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-cause-button")); let expectedOrder = EXPECTED_REQUESTS.map(r => r.causeType).sort(); 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`); }); diff --git a/devtools/client/netmonitor/test/browser_net_cause_redirect.js b/devtools/client/netmonitor/test/browser_net_cause_redirect.js index 59a4e538e6e9..b16e17682551 100644 --- a/devtools/client/netmonitor/test/browser_net_cause_redirect.js +++ b/devtools/client/netmonitor/test/browser_net_cause_redirect.js @@ -19,18 +19,15 @@ add_task(function* () { ]; let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); - let { gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index"); - - gStore.dispatch(Actions.batchEnable(false)); + let { RequestsMenu } = monitor.panelWin.NetMonitorView; + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, EXPECTED_REQUESTS.length); yield performRequests(2, HSTS_SJS); yield wait; 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`); diff --git a/devtools/client/netmonitor/test/browser_net_clear.js b/devtools/client/netmonitor/test/browser_net_clear.js index 4c20a88e7c9c..8ff05872cfee 100644 --- a/devtools/client/netmonitor/test/browser_net_clear.js +++ b/devtools/client/netmonitor/test/browser_net_clear.js @@ -11,20 +11,18 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { EVENTS } = windowRequire("devtools/client/netmonitor/events"); - let detailsPane = document.querySelector("#details-pane"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; let detailsPanelToggleButton = document.querySelector(".network-details-panel-toggle"); let clearButton = document.querySelector("#requests-menu-clear-button"); - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; // Make sure we start in a sane state - assertNoRequestState(); + assertNoRequestState(RequestsMenu, detailsPanelToggleButton); // 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(); yield networkEvent; @@ -35,14 +33,14 @@ add_task(function* () { assertNoRequestState(); // 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(); yield networkEvent; assertSingleRequestState(); // 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") && !detailsPanelToggleButton.classList.contains("pane-collapsed"), @@ -50,9 +48,9 @@ add_task(function* () { // Click clear and make sure the details pane closes EventUtils.sendMouseEvent({ type: "click" }, clearButton); - 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'."); return teardown(monitor); @@ -61,7 +59,7 @@ add_task(function* () { * Asserts the state of the network monitor when one request has loaded */ function assertSingleRequestState() { - is(gStore.getState().requests.requests.size, 1, + is(RequestsMenu.itemCount, 1, "The request menu should have one item at this point."); is(detailsPanelToggleButton.hasAttribute("disabled"), false, "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 */ function assertNoRequestState() { - is(gStore.getState().requests.requests.size, 0, + is(RequestsMenu.itemCount, 0, "The request menu should be empty at this point."); is(detailsPanelToggleButton.hasAttribute("disabled"), true, "The pane toggle button should be disabled when the request menu is cleared."); diff --git a/devtools/client/netmonitor/test/browser_net_complex-params.js b/devtools/client/netmonitor/test/browser_net_complex-params.js index 65db6a74f640..0ad92fe743da 100644 --- a/devtools/client/netmonitor/test/browser_net_complex-params.js +++ b/devtools/client/netmonitor/test/browser_net_complex-params.js @@ -9,14 +9,15 @@ */ add_task(function* () { + let { L10N } = require("devtools/client/netmonitor/l10n"); + let { tab, monitor } = yield initNetMonitor(PARAMS_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { L10N } = windowRequire("devtools/client/netmonitor/l10n"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1, 6); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -25,42 +26,42 @@ add_task(function* () { yield wait; wait = waitForDOM(document, "#params-panel .tree-section", 2); - gStore.dispatch(Actions.selectRequestByIndex(0)); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#params-tab")); + EventUtils.sendMouseEvent({ type: "mousedown" }, + document.querySelector(".network-details-panel-toggle")); + document.querySelector("#params-tab").click(); yield wait; testParamsTab1("a", '""', '{ "foo": "bar" }', '""'); wait = waitForDOM(document, "#params-panel .tree-section", 2); - gStore.dispatch(Actions.selectRequestByIndex(1)); + RequestsMenu.selectedIndex = 1; yield wait; testParamsTab1("a", '"b"', '{ "foo": "bar" }', '""'); wait = waitForDOM(document, "#params-panel .tree-section", 2); - gStore.dispatch(Actions.selectRequestByIndex(2)); + RequestsMenu.selectedIndex = 2; yield wait; testParamsTab1("a", '"b"', "foo", '"bar"'); wait = waitForDOM(document, "#params-panel tr:not(.tree-section).treeRow", 2); - gStore.dispatch(Actions.selectRequestByIndex(3)); + RequestsMenu.selectedIndex = 3; yield wait; testParamsTab2("a", '""', '{ "foo": "bar" }', "js"); wait = waitForDOM(document, "#params-panel tr:not(.tree-section).treeRow", 2); - gStore.dispatch(Actions.selectRequestByIndex(4)); + RequestsMenu.selectedIndex = 4; yield wait; testParamsTab2("a", '"b"', '{ "foo": "bar" }', "js"); // Wait for all tree sections and editor updated by react let waitSections = waitForDOM(document, "#params-panel .tree-section", 2); let waitEditor = waitForDOM(document, "#params-panel .editor-mount iframe"); - gStore.dispatch(Actions.selectRequestByIndex(5)); + RequestsMenu.selectedIndex = 5; let [, editorFrames] = yield Promise.all([waitSections, waitEditor]); yield once(editorFrames[0], "DOMContentLoaded"); yield waitForDOM(editorFrames[0].contentDocument, ".CodeMirror-code"); testParamsTab2("a", '"b"', "?foo=bar", "text"); - gStore.dispatch(Actions.selectRequestByIndex(6)); + RequestsMenu.selectedIndex = 6; testParamsTab3(); yield teardown(monitor); diff --git a/devtools/client/netmonitor/test/browser_net_content-type.js b/devtools/client/netmonitor/test/browser_net_content-type.js index 152621ca7363..d5299ddb418c 100644 --- a/devtools/client/netmonitor/test/browser_net_content-type.js +++ b/devtools/client/netmonitor/test/browser_net_content-type.js @@ -13,14 +13,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -28,13 +24,8 @@ add_task(function* () { }); yield wait; - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(0), - "GET", - CONTENT_TYPE_SJS + "?fmt=xml", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0), + "GET", CONTENT_TYPE_SJS + "?fmt=xml", { status: 200, statusText: "OK", type: "xml", @@ -42,13 +33,8 @@ add_task(function* () { size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 42), time: true }); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(1), - "GET", - CONTENT_TYPE_SJS + "?fmt=css", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(1), + "GET", CONTENT_TYPE_SJS + "?fmt=css", { status: 200, statusText: "OK", type: "css", @@ -56,13 +42,8 @@ add_task(function* () { size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 34), time: true }); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(2), - "GET", - CONTENT_TYPE_SJS + "?fmt=js", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(2), + "GET", CONTENT_TYPE_SJS + "?fmt=js", { status: 200, statusText: "OK", type: "js", @@ -70,13 +51,8 @@ add_task(function* () { size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 34), time: true }); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(3), - "GET", - CONTENT_TYPE_SJS + "?fmt=json", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(3), + "GET", CONTENT_TYPE_SJS + "?fmt=json", { status: 200, statusText: "OK", type: "json", @@ -84,12 +60,8 @@ add_task(function* () { size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29), time: true }); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(4), - "GET", - CONTENT_TYPE_SJS + "?fmt=bogus", { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(4), + "GET", CONTENT_TYPE_SJS + "?fmt=bogus", { status: 404, statusText: "Not Found", type: "html", @@ -97,12 +69,8 @@ add_task(function* () { size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 24), time: true }); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(5), - "GET", - TEST_IMAGE, { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(5), + "GET", TEST_IMAGE, { fuzzyUrl: true, status: 200, statusText: "OK", @@ -111,12 +79,8 @@ add_task(function* () { size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 580), time: true }); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(6), - "GET", - CONTENT_TYPE_SJS + "?fmt=gzip", { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(6), + "GET", CONTENT_TYPE_SJS + "?fmt=gzip", { status: 200, statusText: "OK", type: "plain", @@ -263,12 +227,12 @@ add_task(function* () { let editor = document.querySelector("#response-panel .editor-mount iframe"); if (!editor) { let waitDOM = waitForDOM(document, "#response-panel .editor-mount iframe"); - gStore.dispatch(Actions.selectRequestByIndex(index)); + RequestsMenu.selectedIndex = index; document.querySelector("#response-tab").click(); [editor] = yield waitDOM; yield once(editor, "DOMContentLoaded"); } else { - gStore.dispatch(Actions.selectRequestByIndex(index)); + RequestsMenu.selectedIndex = index; } yield waitForDOM(editor.contentDocument, ".CodeMirror-code"); @@ -277,14 +241,14 @@ add_task(function* () { function* selectIndexAndWaitForJSONView(index) { let tabpanel = document.querySelector("#response-panel"); let waitDOM = waitForDOM(tabpanel, ".treeTable"); - gStore.dispatch(Actions.selectRequestByIndex(index)); + RequestsMenu.selectedIndex = index; yield waitDOM; } function* selectIndexAndWaitForImageView(index) { let tabpanel = document.querySelector("#response-panel"); let waitDOM = waitForDOM(tabpanel, ".response-image"); - gStore.dispatch(Actions.selectRequestByIndex(index)); + RequestsMenu.selectedIndex = index; let [imageNode] = yield waitDOM; yield once(imageNode, "load"); } diff --git a/devtools/client/netmonitor/test/browser_net_copy_as_curl.js b/devtools/client/netmonitor/test/browser_net_copy_as_curl.js index 51bf4548c071..9cf66aa4f739 100644 --- a/devtools/client/netmonitor/test/browser_net_copy_as_curl.js +++ b/devtools/client/netmonitor/test/browser_net_copy_as_curl.js @@ -41,8 +41,9 @@ add_task(function* () { header("Cache-Control: no-cache") ]; - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); + let { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); yield ContentTask.spawn(tab.linkedBrowser, SIMPLE_SJS, function* (url) { @@ -50,16 +51,11 @@ add_task(function* () { }); yield wait; - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[0]); - EventUtils.sendMouseEvent({ type: "contextmenu" }, - document.querySelectorAll(".request-list-item")[0]); + let requestItem = RequestsMenu.getItemAtIndex(0); + RequestsMenu.selectedItem = requestItem; yield waitForClipboardPromise(function setup() { - // Context menu is appending in XUL document, we must select it from - // _toolbox.doc - monitor._toolbox.doc - .querySelector("#request-menu-context-copy-as-curl").click(); + RequestsMenu.contextMenu.copyAsCurl(); }, function validate(result) { if (typeof result !== "string") { return false; diff --git a/devtools/client/netmonitor/test/browser_net_copy_headers.js b/devtools/client/netmonitor/test/browser_net_copy_headers.js index 06f01c404f8d..58a3737d3c39 100644 --- a/devtools/client/netmonitor/test/browser_net_copy_headers.js +++ b/devtools/client/netmonitor/test/browser_net_copy_headers.js @@ -11,22 +11,20 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; + + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); tab.linkedBrowser.reload(); yield wait; - EventUtils.sendMouseEvent({ type: "contextmenu" }, - document.querySelectorAll(".request-list-item")[0]); + let requestItem = RequestsMenu.getItemAtIndex(0); + RequestsMenu.selectedItem = requestItem; - let requestItem = getSortedRequests(gStore.getState()).get(0); let { method, httpVersion, status, statusText } = requestItem; - EventUtils.sendMouseEvent({ type: "contextmenu" }, - document.querySelectorAll(".request-list-item")[0]); - const EXPECTED_REQUEST_HEADERS = [ `${method} ${SIMPLE_URL} ${httpVersion}`, "Host: example.com", @@ -41,10 +39,7 @@ add_task(function* () { ].join("\n"); yield waitForClipboardPromise(function setup() { - // Context menu is appending in XUL document, we must select it from - // _toolbox.doc - monitor._toolbox.doc - .querySelector("#request-menu-context-copy-request-headers").click(); + RequestsMenu.contextMenu.copyRequestHeaders(); }, function validate(result) { // Sometimes, a "Cookie" header is left over from other tests. Remove it: result = String(result).replace(/Cookie: [^\n]+\n/, ""); @@ -62,14 +57,8 @@ add_task(function* () { "Date: Sun, 3 May 2015 11:11:11 GMT" ].join("\n"); - EventUtils.sendMouseEvent({ type: "contextmenu" }, - document.querySelectorAll(".request-list-item")[0]); - yield waitForClipboardPromise(function setup() { - // Context menu is appending in XUL document, we must select it from - // _toolbox.doc - monitor._toolbox.doc - .querySelector("#response-menu-context-copy-response-headers").click(); + RequestsMenu.contextMenu.copyResponseHeaders(); }, function validate(result) { // Fake the "Last-Modified" and "Date" headers because they will vary: result = String(result) diff --git a/devtools/client/netmonitor/test/browser_net_copy_image_as_data_uri.js b/devtools/client/netmonitor/test/browser_net_copy_image_as_data_uri.js index 01691d54d23e..144ced80d800 100644 --- a/devtools/client/netmonitor/test/browser_net_copy_image_as_data_uri.js +++ b/devtools/client/netmonitor/test/browser_net_copy_image_as_data_uri.js @@ -11,7 +11,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL); 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); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -19,16 +22,11 @@ add_task(function* () { }); yield wait; - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[5]); - EventUtils.sendMouseEvent({ type: "contextmenu" }, - document.querySelectorAll(".request-list-item")[5]); + let requestItem = RequestsMenu.getItemAtIndex(5); + RequestsMenu.selectedItem = requestItem; yield waitForClipboardPromise(function setup() { - // Context menu is appending in XUL document, we must select it from - // _toolbox.doc - monitor._toolbox.doc - .querySelector("#request-menu-context-copy-image-as-data-uri").click(); + RequestsMenu.contextMenu.copyImageAsDataUri(); }, TEST_IMAGE_DATA_URI); ok(true, "Clipboard contains the currently selected image as data uri."); diff --git a/devtools/client/netmonitor/test/browser_net_copy_params.js b/devtools/client/netmonitor/test/browser_net_copy_params.js index ebe84b0a943a..1cb6f66200f7 100644 --- a/devtools/client/netmonitor/test/browser_net_copy_params.js +++ b/devtools/client/netmonitor/test/browser_net_copy_params.js @@ -11,10 +11,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(PARAMS_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); + let { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1, 6); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -22,85 +22,76 @@ add_task(function* () { }); yield wait; - yield testCopyUrlParamsHidden(0, false); - yield testCopyUrlParams(0, "a"); - yield testCopyPostDataHidden(0, false); - yield testCopyPostData(0, "{ \"foo\": \"bar\" }"); + RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(0); + yield testCopyUrlParamsHidden(false); + yield testCopyUrlParams("a"); + yield testCopyPostDataHidden(false); + yield testCopyPostData("{ \"foo\": \"bar\" }"); - yield testCopyUrlParamsHidden(1, false); - yield testCopyUrlParams(1, "a=b"); - yield testCopyPostDataHidden(1, false); - yield testCopyPostData(1, "{ \"foo\": \"bar\" }"); + RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(1); + yield testCopyUrlParamsHidden(false); + yield testCopyUrlParams("a=b"); + yield testCopyPostDataHidden(false); + yield testCopyPostData("{ \"foo\": \"bar\" }"); - yield testCopyUrlParamsHidden(2, false); - yield testCopyUrlParams(2, "a=b"); - yield testCopyPostDataHidden(2, false); - yield testCopyPostData(2, "foo=bar"); + RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(2); + yield testCopyUrlParamsHidden(false); + yield testCopyUrlParams("a=b"); + yield testCopyPostDataHidden(false); + yield testCopyPostData("foo=bar"); - yield testCopyUrlParamsHidden(3, false); - yield testCopyUrlParams(3, "a"); - yield testCopyPostDataHidden(3, false); - yield testCopyPostData(3, "{ \"foo\": \"bar\" }"); + RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(3); + yield testCopyUrlParamsHidden(false); + yield testCopyUrlParams("a"); + yield testCopyPostDataHidden(false); + yield testCopyPostData("{ \"foo\": \"bar\" }"); - yield testCopyUrlParamsHidden(4, false); - yield testCopyUrlParams(4, "a=b"); - yield testCopyPostDataHidden(4, false); - yield testCopyPostData(4, "{ \"foo\": \"bar\" }"); + RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(4); + yield testCopyUrlParamsHidden(false); + yield testCopyUrlParams("a=b"); + yield testCopyPostDataHidden(false); + yield testCopyPostData("{ \"foo\": \"bar\" }"); - yield testCopyUrlParamsHidden(5, false); - yield testCopyUrlParams(5, "a=b"); - yield testCopyPostDataHidden(5, false); - yield testCopyPostData(5, "?foo=bar"); + RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(5); + yield testCopyUrlParamsHidden(false); + yield testCopyUrlParams("a=b"); + yield testCopyPostDataHidden(false); + yield testCopyPostData("?foo=bar"); - yield testCopyUrlParamsHidden(6, true); - yield testCopyPostDataHidden(6, true); + RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(6); + yield testCopyUrlParamsHidden(true); + yield testCopyPostDataHidden(true); return teardown(monitor); - function testCopyUrlParamsHidden(index, hidden) { - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[index]); - EventUtils.sendMouseEvent({ type: "contextmenu" }, - document.querySelectorAll(".request-list-item")[index]); - let copyUrlParamsNode = monitor._toolbox.doc - .querySelector("#request-menu-context-copy-url-params"); - is(!!copyUrlParamsNode, !hidden, + function testCopyUrlParamsHidden(hidden) { + let allMenuItems = openContextMenuAndGetAllItems(NetMonitorView); + let copyUrlParamsNode = allMenuItems.find(item => + item.id === "request-menu-context-copy-url-params"); + is(copyUrlParamsNode.visible, !hidden, "The \"Copy URL Parameters\" context menu item should" + (hidden ? " " : " not ") + "be hidden."); } - function* testCopyUrlParams(index, queryString) { - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[index]); - EventUtils.sendMouseEvent({ type: "contextmenu" }, - document.querySelectorAll(".request-list-item")[index]); + function* testCopyUrlParams(queryString) { yield waitForClipboardPromise(function setup() { - monitor._toolbox.doc - .querySelector("#request-menu-context-copy-url-params").click(); + RequestsMenu.contextMenu.copyUrlParams(); }, queryString); ok(true, "The url query string copied from the selected item is correct."); } - function testCopyPostDataHidden(index, hidden) { - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[index]); - EventUtils.sendMouseEvent({ type: "contextmenu" }, - document.querySelectorAll(".request-list-item")[index]); - let copyPostDataNode = monitor._toolbox.doc - .querySelector("#request-menu-context-copy-post-data"); - is(!!copyPostDataNode, !hidden, + function testCopyPostDataHidden(hidden) { + let allMenuItems = openContextMenuAndGetAllItems(NetMonitorView); + let copyPostDataNode = allMenuItems.find(item => + item.id === "request-menu-context-copy-post-data"); + is(copyPostDataNode.visible, !hidden, "The \"Copy POST Data\" context menu item should" + (hidden ? " " : " not ") + "be hidden."); } - function* testCopyPostData(index, postData) { - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[index]); - EventUtils.sendMouseEvent({ type: "contextmenu" }, - document.querySelectorAll(".request-list-item")[index]); + function* testCopyPostData(postData) { yield waitForClipboardPromise(function setup() { - monitor._toolbox.doc - .querySelector("#request-menu-context-copy-post-data").click(); + RequestsMenu.contextMenu.copyPostData(); }, postData); ok(true, "The post data string copied from the selected item is correct."); } diff --git a/devtools/client/netmonitor/test/browser_net_copy_response.js b/devtools/client/netmonitor/test/browser_net_copy_response.js index 2821b61d8133..411fe5cf0d51 100644 --- a/devtools/client/netmonitor/test/browser_net_copy_response.js +++ b/devtools/client/netmonitor/test/browser_net_copy_response.js @@ -13,7 +13,10 @@ add_task(function* () { 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); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -21,16 +24,11 @@ add_task(function* () { }); yield wait; - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[3]); - EventUtils.sendMouseEvent({ type: "contextmenu" }, - document.querySelectorAll(".request-list-item")[3]); + let requestItem = RequestsMenu.getItemAtIndex(3); + RequestsMenu.selectedItem = requestItem; yield waitForClipboardPromise(function setup() { - // Context menu is appending in XUL document, we must select it from - // _toolbox.doc - monitor._toolbox.doc - .querySelector("#request-menu-context-copy-response").click(); + RequestsMenu.contextMenu.copyResponse(); }, EXPECTED_RESULT); yield teardown(monitor); diff --git a/devtools/client/netmonitor/test/browser_net_copy_svg_image_as_data_uri.js b/devtools/client/netmonitor/test/browser_net_copy_svg_image_as_data_uri.js index 3aaa606ce767..252ce92bd5b9 100644 --- a/devtools/client/netmonitor/test/browser_net_copy_svg_image_as_data_uri.js +++ b/devtools/client/netmonitor/test/browser_net_copy_svg_image_as_data_uri.js @@ -13,7 +13,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CURL_URL); info("Starting test... "); - let { document } = monitor.panelWin; + let { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; + + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); yield ContentTask.spawn(tab.linkedBrowser, SVG_URL, function* (url) { @@ -21,16 +24,11 @@ add_task(function* () { }); yield wait; - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[0]); - EventUtils.sendMouseEvent({ type: "contextmenu" }, - document.querySelectorAll(".request-list-item")[0]); + let requestItem = RequestsMenu.getItemAtIndex(0); + RequestsMenu.selectedItem = requestItem; yield waitForClipboardPromise(function setup() { - // Context menu is appending in XUL document, we must select it from - // _toolbox.doc - monitor._toolbox.doc - .querySelector("#request-menu-context-copy-image-as-data-uri").click(); + RequestsMenu.contextMenu.copyImageAsDataUri(); }, function check(text) { return text.startsWith("data:") && !/undefined/.test(text); }); diff --git a/devtools/client/netmonitor/test/browser_net_copy_url.js b/devtools/client/netmonitor/test/browser_net_copy_url.js index 883e3fc1e21b..a4dc37ceb6f2 100644 --- a/devtools/client/netmonitor/test/browser_net_copy_url.js +++ b/devtools/client/netmonitor/test/browser_net_copy_url.js @@ -11,8 +11,8 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; let wait = waitForNetworkEvents(monitor, 1); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -20,18 +20,11 @@ add_task(function* () { }); yield wait; - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[0]); - EventUtils.sendMouseEvent({ type: "contextmenu" }, - document.querySelectorAll(".request-list-item")[0]); - - let requestItem = getSortedRequests(gStore.getState()).get(0); + let requestItem = RequestsMenu.getItemAtIndex(0); + RequestsMenu.selectedItem = requestItem; yield waitForClipboardPromise(function setup() { - // Context menu is appending in XUL document, we must select it from - // _toolbox.doc - monitor._toolbox.doc - .querySelector("#request-menu-context-copy-url").click(); + RequestsMenu.contextMenu.copyUrl(); }, requestItem.url); yield teardown(monitor); diff --git a/devtools/client/netmonitor/test/browser_net_cors_requests.js b/devtools/client/netmonitor/test/browser_net_cors_requests.js index 071894427d0c..7ce4930bb31d 100644 --- a/devtools/client/netmonitor/test/browser_net_cors_requests.js +++ b/devtools/client/netmonitor/test/browser_net_cors_requests.js @@ -9,15 +9,8 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CORS_URL); - - 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 { RequestsMenu } = monitor.panelWin.NetMonitorView; + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1, 1); @@ -31,14 +24,9 @@ add_task(function* () { yield wait; info("Checking the preflight and flight methods"); - ["OPTIONS", "POST"].forEach((method, index) => { - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(index), - method, - requestUrl - ); + ["OPTIONS", "POST"].forEach((method, i) => { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(i), + method, requestUrl); }); yield teardown(monitor); diff --git a/devtools/client/netmonitor/test/browser_net_curl-utils.js b/devtools/client/netmonitor/test/browser_net_curl-utils.js index a21df0a9e7cf..1fd6c3606394 100644 --- a/devtools/client/netmonitor/test/browser_net_curl-utils.js +++ b/devtools/client/netmonitor/test/browser_net_curl-utils.js @@ -13,11 +13,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CURL_UTILS_URL); info("Starting test... "); - let { document, gStore, windowRequire, gNetwork } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { NetMonitorView, gNetwork } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1, 3); yield ContentTask.spawn(tab.linkedBrowser, SIMPLE_SJS, function* (url) { @@ -26,10 +25,10 @@ add_task(function* () { yield wait; let requests = { - get: getSortedRequests(gStore.getState()).get(0), - post: getSortedRequests(gStore.getState()).get(1), - multipart: getSortedRequests(gStore.getState()).get(2), - multipartForm: getSortedRequests(gStore.getState()).get(3), + get: RequestsMenu.getItemAtIndex(0), + post: RequestsMenu.getItemAtIndex(1), + multipart: RequestsMenu.getItemAtIndex(2), + multipartForm: RequestsMenu.getItemAtIndex(3) }; let data = yield createCurlData(requests.get, gNetwork); diff --git a/devtools/client/netmonitor/test/browser_net_cyrillic-01.js b/devtools/client/netmonitor/test/browser_net_cyrillic-01.js index 5e7e1906717c..628073af800e 100644 --- a/devtools/client/netmonitor/test/browser_net_cyrillic-01.js +++ b/devtools/client/netmonitor/test/browser_net_cyrillic-01.js @@ -11,14 +11,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CYRILLIC_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -26,25 +22,16 @@ add_task(function* () { }); yield wait; - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(0), - "GET", - CONTENT_TYPE_SJS + "?fmt=txt", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0), + "GET", CONTENT_TYPE_SJS + "?fmt=txt", { status: 200, 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"); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#response-tab")); + EventUtils.sendMouseEvent({ type: "mousedown" }, + document.querySelector(".network-details-panel-toggle")); + document.querySelector("#response-tab").click(); let [editor] = yield wait; yield once(editor, "DOMContentLoaded"); yield waitForDOM(editor.contentDocument, ".CodeMirror-code"); diff --git a/devtools/client/netmonitor/test/browser_net_cyrillic-02.js b/devtools/client/netmonitor/test/browser_net_cyrillic-02.js index 58094c8a631d..ece623e8e8b3 100644 --- a/devtools/client/netmonitor/test/browser_net_cyrillic-02.js +++ b/devtools/client/netmonitor/test/browser_net_cyrillic-02.js @@ -12,35 +12,25 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CYRILLIC_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; + + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); tab.linkedBrowser.reload(); yield wait; - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(0), - "GET", - CYRILLIC_URL, - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0), + "GET", CYRILLIC_URL, { status: 200, 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"); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#response-tab")); + EventUtils.sendMouseEvent({ type: "mousedown" }, + document.querySelector(".network-details-panel-toggle")); + document.querySelector("#response-tab").click(); let [editor] = yield wait; yield once(editor, "DOMContentLoaded"); yield waitForDOM(editor.contentDocument, ".CodeMirror-code"); diff --git a/devtools/client/netmonitor/test/browser_net_filter-01.js b/devtools/client/netmonitor/test/browser_net_filter-01.js index 4f0b0ac2d4bc..f79bbef2aff4 100644 --- a/devtools/client/netmonitor/test/browser_net_filter-01.js +++ b/devtools/client/netmonitor/test/browser_net_filter-01.js @@ -129,16 +129,10 @@ const EXPECTED_REQUESTS = [ ]; add_task(function* () { - let { monitor } = yield initNetMonitor(FILTERING_URL); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSelectedRequest, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let Actions = require("devtools/client/netmonitor/actions/index"); - gStore.dispatch(Actions.batchEnable(false)); + let { monitor } = yield initNetMonitor(FILTERING_URL); + let { gStore } = monitor.panelWin; function setFreetextFilter(value) { gStore.dispatch(Actions.setRequestFilterText(value)); @@ -146,20 +140,25 @@ add_task(function* () { info("Starting test... "); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; + + RequestsMenu.lazyUpdate = false; + let wait = waitForNetworkEvents(monitor, 9); loadCommonFrameScript(); yield performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS); yield wait; 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."); - is(getSelectedIndex(gStore.getState()), 0, + 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 render correctly."); + "The network details panel should render correctly."); // First test with single filters... testFilterButtons(monitor, "all"); @@ -307,21 +306,16 @@ add_task(function* () { 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) { - isnot(getSelectedRequest(gStore.getState()), undefined, + isnot(RequestsMenu.selectedItem, null, "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."); + is(!!document.querySelector(".network-details-panel"), true, + "The network details panel should render correctly."); - const items = getSortedRequests(gStore.getState()); - const visibleItems = getDisplayedRequests(gStore.getState()); + const items = RequestsMenu.items; + const visibleItems = RequestsMenu.visibleItems; is(items.size, visibility.length, "There should be a specific amount of items in the requests menu."); @@ -337,14 +331,7 @@ add_task(function* () { if (shouldBeVisible) { let { method, url, data } = EXPECTED_REQUESTS[i]; - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(i), - method, - url, - data - ); + verifyRequestItemTarget(RequestsMenu, items.get(i), method, url, data); } } } diff --git a/devtools/client/netmonitor/test/browser_net_filter-02.js b/devtools/client/netmonitor/test/browser_net_filter-02.js index 4b3cdf92ab4b..6d9e442b9bc4 100644 --- a/devtools/client/netmonitor/test/browser_net_filter-02.js +++ b/devtools/client/netmonitor/test/browser_net_filter-02.js @@ -136,15 +136,10 @@ add_task(function* () { // It seems that this test may be slow on Ubuntu builds running on ec2. requestLongerTimeout(2); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSelectedRequest, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 9); loadCommonFrameScript(); @@ -152,11 +147,11 @@ add_task(function* () { yield wait; 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."); - is(getSelectedIndex(gStore.getState()), 0, + 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."); @@ -198,23 +193,16 @@ add_task(function* () { 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) { - isnot(getSelectedRequest(gStore.getState()), null, + isnot(RequestsMenu.selectedItem, null, "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."); is(!!document.querySelector(".network-details-panel"), true, "The network details panel should still be visible after filtering."); - const items = getSortedRequests(gStore.getState()); - const visibleItems = getDisplayedRequests(gStore.getState()); + const items = RequestsMenu.items; + const visibleItems = RequestsMenu.visibleItems; is(items.size, visibility.length, "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]; for (let j = i; j < visibility.length; j += EXPECTED_REQUESTS.length) { if (visibility[j]) { - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(i), - method, - url, - data - ); + verifyRequestItemTarget(RequestsMenu, items.get(j), method, url, data); } } } diff --git a/devtools/client/netmonitor/test/browser_net_filter-03.js b/devtools/client/netmonitor/test/browser_net_filter-03.js index 3421450bc3b6..55f746389afb 100644 --- a/devtools/client/netmonitor/test/browser_net_filter-03.js +++ b/devtools/client/netmonitor/test/browser_net_filter-03.js @@ -27,15 +27,10 @@ add_task(function* () { // It seems that this test may be slow on Ubuntu builds running on ec2. requestLongerTimeout(2); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSelectedRequest, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; // The test assumes that the first HTML request here has a longer response // body than the other HTML requests performed later during the test. @@ -50,11 +45,11 @@ add_task(function* () { yield wait; 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."); - is(getSelectedIndex(gStore.getState()), 0, + 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."); @@ -103,24 +98,17 @@ add_task(function* () { 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) { - isnot(getSelectedRequest(gStore.getState()), null, + isnot(RequestsMenu.selectedItem, null, "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."); is(!!document.querySelector(".network-details-panel"), true, "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."); - is(getDisplayedRequests(gStore.getState()).length, visible, + is(RequestsMenu.visibleItems.length, visible, "There should be a specific amount of visible items in the requests menu."); } }); diff --git a/devtools/client/netmonitor/test/browser_net_filter-04.js b/devtools/client/netmonitor/test/browser_net_filter-04.js index 4578922bb850..e617dbaa96d2 100644 --- a/devtools/client/netmonitor/test/browser_net_filter-04.js +++ b/devtools/client/netmonitor/test/browser_net_filter-04.js @@ -35,11 +35,10 @@ add_task(function* () { let { monitor } = yield initNetMonitor(FILTERING_URL); info("Starting test... "); - let { gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { Prefs } = windowRequire("devtools/client/netmonitor/prefs"); + let { Prefs, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; is(Prefs.filters.length, 2, "All filter types were loaded as an array from the preferences."); diff --git a/devtools/client/netmonitor/test/browser_net_footer-summary.js b/devtools/client/netmonitor/test/browser_net_footer-summary.js index e0b1d6c5757b..cca08eff1fad 100644 --- a/devtools/client/netmonitor/test/browser_net_footer-summary.js +++ b/devtools/client/netmonitor/test/browser_net_footer-summary.js @@ -13,14 +13,15 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(FILTERING_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); + let { $, NetMonitorView, gStore, windowRequire } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; + let { getDisplayedRequestsSummary } = windowRequire("devtools/client/netmonitor/selectors/index"); let { L10N } = windowRequire("devtools/client/netmonitor/l10n"); let { PluralForm } = windowRequire("devtools/shared/plural-form"); - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; testStatus(); for (let i = 0; i < 2; i++) { @@ -35,7 +36,7 @@ add_task(function* () { let buttons = ["html", "css", "js", "xhr", "fonts", "images", "media", "flash"]; 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); testStatus(); } @@ -44,7 +45,7 @@ add_task(function* () { yield teardown(monitor); function testStatus() { - let value = document.querySelector("#requests-menu-network-summary-button").textContent; + let value = $("#requests-menu-network-summary-button").textContent; info("Current summary: " + value); let state = gStore.getState(); diff --git a/devtools/client/netmonitor/test/browser_net_frame.js b/devtools/client/netmonitor/test/browser_net_frame.js index c022a18a51cd..d26958c6e4b0 100644 --- a/devtools/client/netmonitor/test/browser_net_frame.js +++ b/devtools/client/netmonitor/test/browser_net_frame.js @@ -157,21 +157,15 @@ add_task(function* () { // We can't use about:blank here, because initNetMonitor checks that the // page has actually made at least one request. let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); - - 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 { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; + RequestsMenu.lazyUpdate = false; tab.linkedBrowser.loadURI(TOP_URL, null, null); 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."); // 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 currentSub = 0; 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 itemCauseUri = requestItem.cause.loadingDocumentUri; @@ -192,13 +186,8 @@ add_task(function* () { } let { method, url, causeType, causeUri, stack } = spec; - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - requestItem, - method, - url, - { cause: { type: causeType, loadingDocumentUri: causeUri } } + verifyRequestItemTarget(RequestsMenu, requestItem, + method, url, { cause: { type: causeType, loadingDocumentUri: causeUri } } ); let { stacktrace } = requestItem.cause; diff --git a/devtools/client/netmonitor/test/browser_net_header-docs.js b/devtools/client/netmonitor/test/browser_net_header-docs.js index 195596c98202..fff4213909b6 100644 --- a/devtools/client/netmonitor/test/browser_net_header-docs.js +++ b/devtools/client/netmonitor/test/browser_net_header-docs.js @@ -13,14 +13,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(POST_DATA_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 0, 2); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -28,10 +24,13 @@ add_task(function* () { }); yield wait; + let origItem = RequestsMenu.getItemAtIndex(0); + RequestsMenu.selectedItem = origItem; + EventUtils.sendMouseEvent({ type: "click" }, document.querySelectorAll(".request-list-item")[0]); - testShowLearnMore(getSortedRequests(gStore.getState()).get(0)); + testShowLearnMore(origItem); return teardown(monitor); diff --git a/devtools/client/netmonitor/test/browser_net_html-preview.js b/devtools/client/netmonitor/test/browser_net_html-preview.js index f8a2ed22b29b..8eaaea7aa94a 100644 --- a/devtools/client/netmonitor/test/browser_net_html-preview.js +++ b/devtools/client/netmonitor/test/browser_net_html-preview.js @@ -11,10 +11,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 6); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -22,7 +22,7 @@ add_task(function* () { }); yield wait; - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); ok(document.querySelector("#headers-tab[aria-selected=true]"), @@ -42,7 +42,9 @@ add_task(function* () { "The preview panel should be visible now."); let iframe = document.querySelector("#preview-panel iframe"); + console.log(123) yield once(iframe, "DOMContentLoaded"); + console.log(123) ok(iframe, "There should be a response preview iframe available."); diff --git a/devtools/client/netmonitor/test/browser_net_icon-preview.js b/devtools/client/netmonitor/test/browser_net_icon-preview.js index 94998ef607b1..a84111a3f3f5 100644 --- a/devtools/client/netmonitor/test/browser_net_icon-preview.js +++ b/devtools/client/netmonitor/test/browser_net_icon-preview.js @@ -8,16 +8,16 @@ */ add_task(function* () { + let Actions = require("devtools/client/netmonitor/actions/index"); + let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL); info("Starting test... "); - let { document, gStore, windowRequire, NetMonitorController } = - 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 { $, $all, EVENTS, ACTIVITY_TYPE, NetMonitorView, NetMonitorController, + gStore } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForEvents(); yield performRequests(); @@ -63,11 +63,11 @@ add_task(function* () { } 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."); - 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."); - 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."); } }); diff --git a/devtools/client/netmonitor/test/browser_net_image-tooltip.js b/devtools/client/netmonitor/test/browser_net_image-tooltip.js index e8e0dfe1d63e..aa9fe3f27628 100644 --- a/devtools/client/netmonitor/test/browser_net_image-tooltip.js +++ b/devtools/client/netmonitor/test/browser_net_image-tooltip.js @@ -13,33 +13,25 @@ add_task(function* test() { let { tab, monitor } = yield initNetMonitor(IMAGE_TOOLTIP_URL); info("Starting test... "); - let { document, gStore, windowRequire, NetMonitorController } = 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 { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); - let toolboxDoc = monitor._toolbox.doc; - - gStore.dispatch(Actions.batchEnable(false)); + let { $, EVENTS, ACTIVITY_TYPE, NetMonitorView, NetMonitorController } = + monitor.panelWin; + let { RequestsMenu } = NetMonitorView; + RequestsMenu.lazyUpdate = true; let onEvents = waitForNetworkEvents(monitor, IMAGE_TOOLTIP_REQUESTS); let onThumbnail = monitor.panelWin.once(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED); + yield performRequests(); yield onEvents; yield onThumbnail; info("Checking the image thumbnail after a few requests were made..."); - yield showTooltipAndVerify(toolboxDoc, - document.querySelectorAll(".request-list-item")[0]); + yield showTooltipAndVerify(RequestsMenu.tooltip, RequestsMenu.getItemAtIndex(0)); // Hide tooltip before next test, to avoid the situation that tooltip covers // the icon for the request of the next test. info("Checking the image thumbnail gets hidden..."); - yield hideTooltipAndVerify(monitor._toolbox.doc, - document.querySelectorAll(".request-list-item")[0]); + yield hideTooltipAndVerify(RequestsMenu.tooltip, RequestsMenu.getItemAtIndex(0)); // +1 extra document reload onEvents = waitForNetworkEvents(monitor, IMAGE_TOOLTIP_REQUESTS + 1); @@ -52,13 +44,13 @@ add_task(function* test() { yield onThumbnail; info("Checking the image thumbnail after a reload."); - yield showTooltipAndVerify(toolboxDoc, - document.querySelectorAll(".request-list-item")[1]); + yield showTooltipAndVerify(RequestsMenu.tooltip, RequestsMenu.getItemAtIndex(1)); info("Checking if the image thumbnail is hidden when mouse leaves the menu widget"); - let requestsListContents = document.querySelector(".requests-menu-contents"); - EventUtils.synthesizeMouse(requestsListContents, 0, 0, { type: "mouseout" }, monitor.panelWin); - yield waitUntil(() => !toolboxDoc.querySelector(".tooltip-container.tooltip-visible")); + let requestsMenuEl = $(".requests-menu-contents"); + let onHidden = RequestsMenu.tooltip.once("hidden"); + EventUtils.synthesizeMouse(requestsMenuEl, 0, 0, {type: "mouseout"}, monitor.panelWin); + yield onHidden; 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. */ - function* showTooltipAndVerify(toolboxDoc, target) { - let anchor = target.querySelector(".requests-menu-file"); - yield showTooltipOn(toolboxDoc, anchor); + function* showTooltipAndVerify(tooltip, requestItem) { + let anchor = $(".requests-menu-file", getItemTarget(RequestsMenu, requestItem)); + yield showTooltipOn(tooltip, anchor); 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."); } @@ -85,22 +77,25 @@ add_task(function* test() { * Trigger a tooltip over an element by sending mousemove event. * @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; - EventUtils.synthesizeMouseAtCenter(element, { type: "mousemove" }, win); - yield waitUntil(() => toolboxDoc.querySelector(".tooltip-panel img")); + EventUtils.synthesizeMouseAtCenter(element, {type: "mousemove"}, win); + 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. - let anchor = target.querySelector(".requests-menu-method"); - let win = anchor.ownerDocument.defaultView; - EventUtils.synthesizeMouseAtCenter(anchor, { type: "mousemove" }, win); + let anchor = $(".requests-menu-method", getItemTarget(RequestsMenu, requestItem)); + + 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."); } }); diff --git a/devtools/client/netmonitor/test/browser_net_json-b64.js b/devtools/client/netmonitor/test/browser_net_json-b64.js index 9488e55ed72d..11200a0dd13c 100644 --- a/devtools/client/netmonitor/test/browser_net_json-b64.js +++ b/devtools/client/netmonitor/test/browser_net_json-b64.js @@ -12,10 +12,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(JSON_B64_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -24,10 +24,9 @@ add_task(function* () { yield wait; wait = waitForDOM(document, "#response-panel"); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#response-tab")); + document.querySelector("#response-tab").click(); yield wait; let tabpanel = document.querySelector("#response-panel"); diff --git a/devtools/client/netmonitor/test/browser_net_json-long.js b/devtools/client/netmonitor/test/browser_net_json-long.js index 30982857fa2b..92419496af27 100644 --- a/devtools/client/netmonitor/test/browser_net_json-long.js +++ b/devtools/client/netmonitor/test/browser_net_json-long.js @@ -17,14 +17,10 @@ add_task(function* () { // in a variables view instance. Debug builds are slow. requestLongerTimeout(4); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -32,13 +28,8 @@ add_task(function* () { }); yield wait; - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(0), - "GET", - CONTENT_TYPE_SJS + "?fmt=json-long", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0), + "GET", CONTENT_TYPE_SJS + "?fmt=json-long", { status: 200, statusText: "OK", type: "json", @@ -49,10 +40,9 @@ add_task(function* () { }); wait = waitForDOM(document, "#response-panel"); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#response-tab")); + document.querySelector("#response-tab").click(); yield wait; testResponseTab(); diff --git a/devtools/client/netmonitor/test/browser_net_json-malformed.js b/devtools/client/netmonitor/test/browser_net_json-malformed.js index aa9978757250..ecc4beff98a0 100644 --- a/devtools/client/netmonitor/test/browser_net_json-malformed.js +++ b/devtools/client/netmonitor/test/browser_net_json-malformed.js @@ -12,14 +12,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(JSON_MALFORMED_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -27,13 +23,8 @@ add_task(function* () { }); yield wait; - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(0), - "GET", - CONTENT_TYPE_SJS + "?fmt=json-malformed", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0), + "GET", CONTENT_TYPE_SJS + "?fmt=json-malformed", { status: 200, statusText: "OK", type: "json", @@ -41,10 +32,9 @@ add_task(function* () { }); wait = waitForDOM(document, "#response-panel .editor-mount iframe"); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#response-tab")); + document.querySelector("#response-tab").click(); let [editor] = yield wait; yield once(editor, "DOMContentLoaded"); yield waitForDOM(editor.contentDocument, ".CodeMirror-code"); diff --git a/devtools/client/netmonitor/test/browser_net_json-null.js b/devtools/client/netmonitor/test/browser_net_json-null.js index fa4dd3277de1..afe398635ff1 100644 --- a/devtools/client/netmonitor/test/browser_net_json-null.js +++ b/devtools/client/netmonitor/test/browser_net_json-null.js @@ -13,14 +13,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(JSON_BASIC_URL + "?name=null"); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -73,9 +69,10 @@ function checkResponsePanelDisplaysJSON(doc) { */ function openResponsePanel(document) { let onReponsePanelReady = waitForDOM(document, "#response-panel"); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#response-tab")); + EventUtils.sendMouseEvent( + { type: "mousedown" }, + document.querySelector(".network-details-panel-toggle") + ); + document.querySelector("#response-tab").click(); return onReponsePanelReady; } diff --git a/devtools/client/netmonitor/test/browser_net_json_custom_mime.js b/devtools/client/netmonitor/test/browser_net_json_custom_mime.js index ba26639e8420..fc2b732035ce 100644 --- a/devtools/client/netmonitor/test/browser_net_json_custom_mime.js +++ b/devtools/client/netmonitor/test/browser_net_json_custom_mime.js @@ -13,14 +13,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(JSON_CUSTOM_MIME_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -28,13 +24,8 @@ add_task(function* () { }); yield wait; - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(0), - "GET", - CONTENT_TYPE_SJS + "?fmt=json-custom-mime", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0), + "GET", CONTENT_TYPE_SJS + "?fmt=json-custom-mime", { status: 200, statusText: "OK", type: "x-bigcorp-json", @@ -44,10 +35,9 @@ add_task(function* () { }); wait = waitForDOM(document, "#response-panel"); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#response-tab")); + document.querySelector("#response-tab").click(); yield wait; testResponseTab(); diff --git a/devtools/client/netmonitor/test/browser_net_json_text_mime.js b/devtools/client/netmonitor/test/browser_net_json_text_mime.js index 433886869310..5e57aaf95118 100644 --- a/devtools/client/netmonitor/test/browser_net_json_text_mime.js +++ b/devtools/client/netmonitor/test/browser_net_json_text_mime.js @@ -13,14 +13,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(JSON_TEXT_MIME_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -28,13 +24,8 @@ add_task(function* () { }); yield wait; - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(0), - "GET", - CONTENT_TYPE_SJS + "?fmt=json-text-mime", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0), + "GET", CONTENT_TYPE_SJS + "?fmt=json-text-mime", { status: 200, statusText: "OK", type: "plain", @@ -44,10 +35,9 @@ add_task(function* () { }); wait = waitForDOM(document, "#response-panel"); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#response-tab")); + document.querySelector("#response-tab").click(); yield wait; testResponseTab(); diff --git a/devtools/client/netmonitor/test/browser_net_jsonp.js b/devtools/client/netmonitor/test/browser_net_jsonp.js index 8d4adf6f2046..f6156ae67a6c 100644 --- a/devtools/client/netmonitor/test/browser_net_jsonp.js +++ b/devtools/client/netmonitor/test/browser_net_jsonp.js @@ -13,14 +13,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(JSONP_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 2); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -28,13 +24,8 @@ add_task(function* () { }); yield wait; - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(0), - "GET", - CONTENT_TYPE_SJS + "?fmt=jsonp&jsonp=$_0123Fun", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0), + "GET", CONTENT_TYPE_SJS + "?fmt=jsonp&jsonp=$_0123Fun", { status: 200, statusText: "OK", type: "json", @@ -42,13 +33,8 @@ add_task(function* () { size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 41), time: true }); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(1), - "GET", - CONTENT_TYPE_SJS + "?fmt=jsonp2&jsonp=$_4567Sad", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(1), + "GET", CONTENT_TYPE_SJS + "?fmt=jsonp2&jsonp=$_4567Sad", { status: 200, statusText: "OK", type: "json", @@ -58,17 +44,15 @@ add_task(function* () { }); wait = waitForDOM(document, "#response-panel"); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#response-tab")); + document.querySelector("#response-tab").click(); yield wait; testResponseTab("$_0123Fun", "\"Hello JSONP!\""); wait = waitForDOM(document, "#response-panel .tree-section"); - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[1]); + RequestsMenu.selectedIndex = 1; yield wait; testResponseTab("$_4567Sad", "\"Hello weird JSONP!\""); diff --git a/devtools/client/netmonitor/test/browser_net_large-response.js b/devtools/client/netmonitor/test/browser_net_large-response.js index ad37e73604e6..93a899e6184f 100644 --- a/devtools/client/netmonitor/test/browser_net_large-response.js +++ b/devtools/client/netmonitor/test/browser_net_large-response.js @@ -17,14 +17,10 @@ add_task(function* () { // is going to be requested and displayed in the source editor. requestLongerTimeout(2); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); yield ContentTask.spawn(tab.linkedBrowser, HTML_LONG_URL, function* (url) { @@ -32,22 +28,16 @@ add_task(function* () { }); yield wait; - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(0), - "GET", - CONTENT_TYPE_SJS + "?fmt=html-long", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0), + "GET", CONTENT_TYPE_SJS + "?fmt=html-long", { status: 200, statusText: "OK" }); let waitDOM = waitForDOM(document, "#response-panel .editor-mount iframe"); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#response-tab")); + document.querySelector("#response-tab").click(); let [editor] = yield waitDOM; yield once(editor, "DOMContentLoaded"); yield waitForDOM(editor.contentDocument, ".CodeMirror-code"); diff --git a/devtools/client/netmonitor/test/browser_net_open_request_in_tab.js b/devtools/client/netmonitor/test/browser_net_open_request_in_tab.js index 37ac6754a87a..8e7ffcc84cdd 100644 --- a/devtools/client/netmonitor/test/browser_net_open_request_in_tab.js +++ b/devtools/client/netmonitor/test/browser_net_open_request_in_tab.js @@ -11,14 +11,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); info("Starting test..."); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -26,16 +22,11 @@ add_task(function* () { }); yield wait; - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[0]); - EventUtils.sendMouseEvent({ type: "contextmenu" }, - document.querySelectorAll(".request-list-item")[0]); + let requestItem = RequestsMenu.getItemAtIndex(0); + RequestsMenu.selectedItem = requestItem; let onTabOpen = once(gBrowser.tabContainer, "TabOpen", false); - // Context menu is appending in XUL document, we must select it from - // _toolbox.doc - monitor._toolbox.doc - .querySelector("#request-menu-context-newtab").click(); + RequestsMenu.contextMenu.openRequestInTab(); yield onTabOpen; ok(true, "A new tab has been opened"); diff --git a/devtools/client/netmonitor/test/browser_net_page-nav.js b/devtools/client/netmonitor/test/browser_net_page-nav.js index 8ac69ad5fc63..4e99b8e40b2f 100644 --- a/devtools/client/netmonitor/test/browser_net_page-nav.js +++ b/devtools/client/netmonitor/test/browser_net_page-nav.js @@ -12,8 +12,7 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); info("Starting test... "); - let { windowRequire } = monitor.panelWin; - let { EVENTS } = windowRequire("devtools/client/netmonitor/events"); + let { EVENTS } = monitor.panelWin; yield testNavigate(); yield testNavigateBack(); diff --git a/devtools/client/netmonitor/test/browser_net_pane-collapse.js b/devtools/client/netmonitor/test/browser_net_pane-collapse.js index 9888fb74e19d..bc5259e59d8d 100644 --- a/devtools/client/netmonitor/test/browser_net_pane-collapse.js +++ b/devtools/client/netmonitor/test/browser_net_pane-collapse.js @@ -11,8 +11,7 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); info("Starting test... "); - let { document, windowRequire } = monitor.panelWin; - let { Prefs } = windowRequire("devtools/client/netmonitor/prefs"); + let { document, Prefs } = monitor.panelWin; let detailsPaneToggleButton = document.querySelector(".network-details-panel-toggle"); let wait = waitForNetworkEvents(monitor, 1); @@ -23,7 +22,7 @@ add_task(function* () { detailsPaneToggleButton.classList.contains("pane-collapsed"), "The details panel should initially be hidden."); - EventUtils.sendMouseEvent({ type: "click" }, detailsPaneToggleButton); + EventUtils.sendMouseEvent({ type: "mousedown" }, detailsPaneToggleButton); is(~~(document.querySelector(".network-details-panel").clientWidth), Prefs.networkDetailsWidth, @@ -32,13 +31,13 @@ add_task(function* () { !detailsPaneToggleButton.classList.contains("pane-collapsed"), "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") && detailsPaneToggleButton.classList.contains("pane-collapsed"), "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), Prefs.networkDetailsWidth, diff --git a/devtools/client/netmonitor/test/browser_net_pane-toggle.js b/devtools/client/netmonitor/test/browser_net_pane-toggle.js index 3bc386e07433..bee18b4781d0 100644 --- a/devtools/client/netmonitor/test/browser_net_pane-toggle.js +++ b/devtools/client/netmonitor/test/browser_net_pane-toggle.js @@ -11,15 +11,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { EVENTS } = windowRequire("devtools/client/netmonitor/events"); - let { - getSelectedRequest, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); - - gStore.dispatch(Actions.batchEnable(false)); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; + let { NETWORK_EVENT } = monitor.panelWin.EVENTS; + RequestsMenu.lazyUpdate = false; let toggleButton = document.querySelector(".network-details-panel-toggle"); @@ -30,10 +25,10 @@ add_task(function* () { "collapsed when the frontend is opened."); is(!!document.querySelector(".network-details-panel"), false, "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."); - let networkEvent = monitor.panelWin.once(EVENTS.NETWORK_EVENT); + let networkEvent = monitor.panelWin.once(NETWORK_EVENT); tab.linkedBrowser.reload(); yield networkEvent; @@ -44,10 +39,10 @@ add_task(function* () { "collapsed after the first request."); is(!!document.querySelector(".network-details-panel"), false, "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."); - EventUtils.sendMouseEvent({ type: "click" }, toggleButton); + EventUtils.sendMouseEvent({ type: "mousedown" }, toggleButton); is(toggleButton.hasAttribute("disabled"), false, "The pane toggle button should still be enabled after being pressed."); @@ -56,12 +51,12 @@ add_task(function* () { "not collapsed anymore after being pressed."); is(!!document.querySelector(".network-details-panel"), true, "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."); - is(getSelectedIndex(gStore.getState()), 0, + is(RequestsMenu.selectedIndex, 0, "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, "The pane toggle button should still be enabled after being pressed again."); @@ -70,15 +65,8 @@ add_task(function* () { "collapsed after being pressed again."); is(!!document.querySelector(".network-details-panel"), false, "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."); yield teardown(monitor); - - function getSelectedIndex(state) { - if (!state.requests.selectedId) { - return -1; - } - return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId); - } }); diff --git a/devtools/client/netmonitor/test/browser_net_persistent_logs.js b/devtools/client/netmonitor/test/browser_net_persistent_logs.js index 64bc202370cc..ac2371e1fe2f 100644 --- a/devtools/client/netmonitor/test/browser_net_persistent_logs.js +++ b/devtools/client/netmonitor/test/browser_net_persistent_logs.js @@ -12,20 +12,21 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(SINGLE_GET_URL); info("Starting test... "); - let { document, windowRequire } = monitor.panelWin; + let { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; Services.prefs.setBoolPref("devtools.webconsole.persistlog", false); yield reloadAndWait(); - is(document.querySelectorAll(".request-list-item").length, 2, - "The request list should have two items at this point."); + is(RequestsMenu.itemCount, 2, + "The request menu should have two items at this point."); yield reloadAndWait(); // Since the reload clears the log, we still expect two requests in the log - is(document.querySelectorAll(".request-list-item").length, 2, - "The request list should still have two items at this point."); + is(RequestsMenu.itemCount, 2, + "The request menu should still have two items at this point."); // Now we toggle the persistence logs on Services.prefs.setBoolPref("devtools.webconsole.persistlog", true); @@ -33,8 +34,8 @@ add_task(function* () { yield reloadAndWait(); // Since we togged the persistence logs, we expect four items after the reload - is(document.querySelectorAll(".request-list-item").length, 4, - "The request list should now have four items at this point."); + is(RequestsMenu.itemCount, 4, + "The request menu should now have four items at this point."); Services.prefs.setBoolPref("devtools.webconsole.persistlog", false); return teardown(monitor); diff --git a/devtools/client/netmonitor/test/browser_net_post-data-01.js b/devtools/client/netmonitor/test/browser_net_post-data-01.js index 47379d9ca724..4ffcfa4374dc 100644 --- a/devtools/client/netmonitor/test/browser_net_post-data-01.js +++ b/devtools/client/netmonitor/test/browser_net_post-data-01.js @@ -16,14 +16,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(POST_DATA_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 0, 2); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -31,13 +27,8 @@ add_task(function* () { }); yield wait; - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(0), - "POST", - SIMPLE_SJS + "?foo=bar&baz=42&type=urlencoded", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0), + "POST", SIMPLE_SJS + "?foo=bar&baz=42&type=urlencoded", { status: 200, statusText: "Och Aye", type: "plain", @@ -45,13 +36,8 @@ add_task(function* () { size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), time: true }); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(1), - "POST", - SIMPLE_SJS + "?foo=bar&baz=42&type=multipart", - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(1), + "POST", SIMPLE_SJS + "?foo=bar&baz=42&type=multipart", { status: 200, statusText: "Och Aye", type: "plain", @@ -63,17 +49,15 @@ add_task(function* () { // Wait for all tree sections updated by react wait = waitForDOM(document, "#params-panel .tree-section", 2); EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[0]); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#params-tab")); + document.querySelector(".network-details-panel-toggle")); + document.querySelector("#params-tab").click(); yield wait; yield testParamsTab("urlencoded"); // Wait for all tree sections and editor updated by react let waitForSections = waitForDOM(document, "#params-panel .tree-section", 2); let waitForEditor = waitForDOM(document, "#params-panel .editor-mount iframe"); - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[1]); + RequestsMenu.selectedIndex = 1; let [, editorFrames] = yield Promise.all([waitForSections, waitForEditor]); yield once(editorFrames[0], "DOMContentLoaded"); yield waitForDOM(editorFrames[0].contentDocument, ".CodeMirror-code"); diff --git a/devtools/client/netmonitor/test/browser_net_post-data-02.js b/devtools/client/netmonitor/test/browser_net_post-data-02.js index 318817ceaec6..13ac703efece 100644 --- a/devtools/client/netmonitor/test/browser_net_post-data-02.js +++ b/devtools/client/netmonitor/test/browser_net_post-data-02.js @@ -14,14 +14,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(POST_RAW_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 0, 1); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -32,9 +28,8 @@ add_task(function* () { // Wait for all tree view updated by react wait = waitForDOM(document, "#params-panel .tree-section"); EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[0]); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#params-tab")); + document.querySelector(".network-details-panel-toggle")); + document.querySelector("#params-tab").click(); yield wait; let tabpanel = document.querySelector("#params-panel"); diff --git a/devtools/client/netmonitor/test/browser_net_post-data-03.js b/devtools/client/netmonitor/test/browser_net_post-data-03.js index 1218b0a49d77..9f301c06240f 100644 --- a/devtools/client/netmonitor/test/browser_net_post-data-03.js +++ b/devtools/client/netmonitor/test/browser_net_post-data-03.js @@ -14,10 +14,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(POST_RAW_WITH_HEADERS_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 0, 1); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -27,10 +27,9 @@ add_task(function* () { // Wait for all tree view updated by react wait = waitForDOM(document, "#headers-panel"); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#headers-tab")); + document.querySelector("#headers-tab").click(); yield wait; let tabpanel = document.querySelector("#headers-panel"); @@ -59,8 +58,7 @@ add_task(function* () { // Wait for all tree sections updated by react wait = waitForDOM(document, "#params-panel .tree-section"); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#params-tab")); + document.querySelector("#params-tab").click(); yield wait; tabpanel = document.querySelector("#params-panel"); diff --git a/devtools/client/netmonitor/test/browser_net_post-data-04.js b/devtools/client/netmonitor/test/browser_net_post-data-04.js index 14df16f2a0db..30c8fea5a9ed 100644 --- a/devtools/client/netmonitor/test/browser_net_post-data-04.js +++ b/devtools/client/netmonitor/test/browser_net_post-data-04.js @@ -14,10 +14,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(POST_JSON_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 0, 1); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -27,10 +27,9 @@ add_task(function* () { // Wait for all tree view updated by react wait = waitForDOM(document, "#params-panel .tree-section"); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#params-tab")); + document.querySelector("#params-tab").click(); yield wait; let tabpanel = document.querySelector("#params-panel"); diff --git a/devtools/client/netmonitor/test/browser_net_prefs-and-l10n.js b/devtools/client/netmonitor/test/browser_net_prefs-and-l10n.js index 28ef96464a3c..e73f94d6d350 100644 --- a/devtools/client/netmonitor/test/browser_net_prefs-and-l10n.js +++ b/devtools/client/netmonitor/test/browser_net_prefs-and-l10n.js @@ -13,8 +13,8 @@ add_task(function* () { let { monitor } = yield initNetMonitor(SIMPLE_URL); info("Starting test... "); - let { windowRequire } = monitor.panelWin; - let { Prefs } = windowRequire("devtools/client/netmonitor/prefs"); + ok(monitor.panelWin.Prefs, + "Should have a preferences object available on the panel window."); testL10N(); testPrefs(); @@ -29,6 +29,8 @@ add_task(function* () { } function testPrefs() { + let { Prefs } = monitor.panelWin; + is(Prefs.networkDetailsWidth, Services.prefs.getIntPref("devtools.netmonitor.panes-network-details-width"), "Getting a pref should work correctly."); diff --git a/devtools/client/netmonitor/test/browser_net_raw_headers.js b/devtools/client/netmonitor/test/browser_net_raw_headers.js index d5fae8a3cf2f..d7406d628711 100644 --- a/devtools/client/netmonitor/test/browser_net_raw_headers.js +++ b/devtools/client/netmonitor/test/browser_net_raw_headers.js @@ -11,11 +11,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(POST_DATA_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 0, 2); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -23,9 +22,10 @@ add_task(function* () { }); yield wait; + let origItem = RequestsMenu.getItemAtIndex(0); + wait = waitForDOM(document, ".headers-overview"); - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[0]); + RequestsMenu.selectedItem = origItem; yield wait; wait = waitForDOM(document, ".raw-headers-container textarea", 2); @@ -33,7 +33,7 @@ add_task(function* () { document.querySelectorAll(".headers-summary .tool-button")[1]); yield wait; - testShowRawHeaders(getSortedRequests(gStore.getState()).get(0)); + testShowRawHeaders(origItem); EventUtils.sendMouseEvent({ type: "click" }, document.querySelectorAll(".headers-summary .tool-button")[1]); diff --git a/devtools/client/netmonitor/test/browser_net_reload-button.js b/devtools/client/netmonitor/test/browser_net_reload-button.js index b42bb42021c1..02cd4d406623 100644 --- a/devtools/client/netmonitor/test/browser_net_reload-button.js +++ b/devtools/client/netmonitor/test/browser_net_reload-button.js @@ -11,15 +11,15 @@ add_task(function* () { let { monitor } = yield initNetMonitor(SIMPLE_URL); info("Starting test... "); - let { document } = monitor.panelWin; + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; let wait = waitForNetworkEvents(monitor, 1); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#requests-menu-reload-notice-button")); + let button = document.querySelector("#requests-menu-reload-notice-button"); + button.click(); yield wait; - is(document.querySelectorAll(".request-list-item").length, 1, - "The request list should have one item after reloading"); + is(RequestsMenu.itemCount, 1, "The request menu should have one item after reloading"); return teardown(monitor); }); diff --git a/devtools/client/netmonitor/test/browser_net_reload-markers.js b/devtools/client/netmonitor/test/browser_net_reload-markers.js index 9cec9f34ca06..cdba1e672ba4 100644 --- a/devtools/client/netmonitor/test/browser_net_reload-markers.js +++ b/devtools/client/netmonitor/test/browser_net_reload-markers.js @@ -11,8 +11,7 @@ add_task(function* () { let { monitor } = yield initNetMonitor(SIMPLE_URL); info("Starting test... "); - let { document, windowRequire } = monitor.panelWin; - let { EVENTS } = windowRequire("devtools/client/netmonitor/events"); + let { document, EVENTS } = monitor.panelWin; let button = document.querySelector("#requests-menu-reload-notice-button"); button.click(); diff --git a/devtools/client/netmonitor/test/browser_net_req-resp-bodies.js b/devtools/client/netmonitor/test/browser_net_req-resp-bodies.js index 6b68cb8bb6df..1b4f1ae5cfb2 100644 --- a/devtools/client/netmonitor/test/browser_net_req-resp-bodies.js +++ b/devtools/client/netmonitor/test/browser_net_req-resp-bodies.js @@ -13,14 +13,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(JSON_LONG_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; // Perform first batch of requests. let wait = waitForNetworkEvents(monitor, 1); @@ -57,14 +53,9 @@ add_task(function* () { return teardown(monitor); - function verifyRequest(index) { - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(index), - "GET", - CONTENT_TYPE_SJS + "?fmt=json-long", - { + function verifyRequest(offset) { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(offset), + "GET", CONTENT_TYPE_SJS + "?fmt=json-long", { status: 200, statusText: "OK", type: "json", diff --git a/devtools/client/netmonitor/test/browser_net_resend.js b/devtools/client/netmonitor/test/browser_net_resend.js index e52c3c9adbf7..f938ab2a9d44 100644 --- a/devtools/client/netmonitor/test/browser_net_resend.js +++ b/devtools/client/netmonitor/test/browser_net_resend.js @@ -16,14 +16,12 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(POST_DATA_URL); 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 { - getSelectedRequest, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 0, 2); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -31,22 +29,22 @@ add_task(function* () { }); 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 gStore.dispatch(Actions.cloneSelectedRequest()); testCustomForm(origItem); - let customItem = getSelectedRequest(gStore.getState()); + let customItem = RequestsMenu.selectedItem; testCustomItem(customItem, origItem); // edit the custom request yield editCustomForm(); // FIXME: reread the customItem, it's been replaced by a new object (immutable!) - customItem = getSelectedRequest(gStore.getState()); + customItem = RequestsMenu.selectedItem; testCustomItemChanged(customItem, origItem); // send the new request @@ -54,7 +52,7 @@ add_task(function* () { gStore.dispatch(Actions.sendCustomRequest()); yield wait; - let sentItem = getSelectedRequest(gStore.getState()); + let sentItem = RequestsMenu.selectedItem; testSentRequest(sentItem, origItem); return teardown(monitor); @@ -75,7 +73,6 @@ add_task(function* () { * Test that the New Request form was populated correctly */ function testCustomForm(data) { - yield waitUntil(() => document.querySelector(".custom-request-panel")); is(document.getElementById("custom-method-value").value, data.method, "new request form showing correct method"); @@ -100,7 +97,7 @@ add_task(function* () { * Add some params and headers to the request form */ function* editCustomForm() { - monitor.panelWin.focus(); + panelWin.focus(); let query = document.getElementById("custom-query-value"); let queryFocus = once(query, "focus", false); @@ -157,7 +154,7 @@ add_task(function* () { function type(string) { for (let ch of string) { - EventUtils.synthesizeKey(ch, {}, monitor.panelWin); + EventUtils.synthesizeKey(ch, {}, panelWin); } } }); diff --git a/devtools/client/netmonitor/test/browser_net_resend_cors.js b/devtools/client/netmonitor/test/browser_net_resend_cors.js index b4f1ab317bab..d2c08045b885 100644 --- a/devtools/client/netmonitor/test/browser_net_resend_cors.js +++ b/devtools/client/netmonitor/test/browser_net_resend_cors.js @@ -12,14 +12,11 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CORS_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; + let { gStore, NetMonitorView, windowRequire } = monitor.panelWin; let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let requestUrl = "http://test1.example.com" + CORS_SJS_PATH; @@ -31,7 +28,7 @@ add_task(function* () { yield wait; 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 ITEMS.forEach((item, i) => { @@ -44,7 +41,7 @@ add_task(function* () { let onRequests = waitForNetworkEvents(monitor, 1, 0); ITEMS.forEach((item) => { info(`Selecting the ${item.method} request`); - gStore.dispatch(Actions.selectRequest(item.id)) + RequestsMenu.selectedItem = item; info("Cloning the selected request into a custom clone"); gStore.dispatch(Actions.cloneSelectedRequest()); diff --git a/devtools/client/netmonitor/test/browser_net_resend_headers.js b/devtools/client/netmonitor/test/browser_net_resend_headers.js index d118cfc3e81e..9aa46a9c9496 100644 --- a/devtools/client/netmonitor/test/browser_net_resend_headers.js +++ b/devtools/client/netmonitor/test/browser_net_resend_headers.js @@ -11,14 +11,10 @@ add_task(function* () { let { monitor } = yield initNetMonitor(SIMPLE_SJS); info("Starting test... "); - let { document, gStore, windowRequire, NetMonitorController } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { NetMonitorView, NetMonitorController } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let requestUrl = SIMPLE_SJS; let requestHeaders = [ @@ -39,7 +35,7 @@ add_task(function* () { }); 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.url, requestUrl, "The request has the right URL"); diff --git a/devtools/client/netmonitor/test/browser_net_security-details.js b/devtools/client/netmonitor/test/browser_net_security-details.js index 5d174d42d5c3..f12194473edc 100644 --- a/devtools/client/netmonitor/test/browser_net_security-details.js +++ b/devtools/client/netmonitor/test/browser_net_security-details.js @@ -9,10 +9,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; info("Performing a secure request."); const REQUESTS_URL = "https://example.com" + CORS_SJS_PATH; @@ -23,10 +23,9 @@ add_task(function* () { yield wait; wait = waitForDOM(document, "#security-panel"); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#security-tab")); + document.querySelector("#security-tab").click(); yield wait; let tabpanel = document.querySelector("#security-panel"); diff --git a/devtools/client/netmonitor/test/browser_net_security-error.js b/devtools/client/netmonitor/test/browser_net_security-error.js index f7a147c497f5..9329395a73a0 100644 --- a/devtools/client/netmonitor/test/browser_net_security-error.js +++ b/devtools/client/netmonitor/test/browser_net_security-error.js @@ -9,11 +9,9 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { EVENTS } = windowRequire("devtools/client/netmonitor/events"); + let { document, EVENTS, NetMonitorView } = monitor.panelWin; - gStore.dispatch(Actions.batchEnable(false)); + NetMonitorView.RequestsMenu.lazyUpdate = false; info("Requesting a resource that has a certificate problem."); @@ -24,10 +22,9 @@ add_task(function* () { yield wait; wait = waitForDOM(document, "#security-panel"); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#security-tab")); + document.querySelector("#security-tab").click(); yield wait; let errormsg = document.querySelector(".security-info-value"); diff --git a/devtools/client/netmonitor/test/browser_net_security-icon-click.js b/devtools/client/netmonitor/test/browser_net_security-icon-click.js index 15211324c28a..daeab924fc69 100644 --- a/devtools/client/netmonitor/test/browser_net_security-icon-click.js +++ b/devtools/client/netmonitor/test/browser_net_security-icon-click.js @@ -9,25 +9,22 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; 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_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(); +console.log(123) info("Selecting headers panel again."); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector("#headers-tab")); info("Sorting the items by filename."); @@ -35,8 +32,9 @@ add_task(function* () { document.querySelector("#requests-menu-file-button")); info("Testing that security icon can be clicked after the items were sorted."); - +console.log(123) yield clickAndTestSecurityIcon(); +console.log(123) return teardown(monitor); @@ -49,6 +47,7 @@ add_task(function* () { } function* clickAndTestSecurityIcon() { + let item = RequestsMenu.getItemAtIndex(0); let icon = document.querySelector(".requests-security-state-icon"); info("Clicking security icon of the first request and waiting for panel update."); diff --git a/devtools/client/netmonitor/test/browser_net_security-redirect.js b/devtools/client/netmonitor/test/browser_net_security-redirect.js index f56b2b3c0fd5..11280223308a 100644 --- a/devtools/client/netmonitor/test/browser_net_security-redirect.js +++ b/devtools/client/netmonitor/test/browser_net_security-redirect.js @@ -10,14 +10,9 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); - 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 { $, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 2); yield ContentTask.spawn(tab.linkedBrowser, HTTPS_REDIRECT_SJS, function* (url) { @@ -25,13 +20,15 @@ add_task(function* () { }); 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 redirect = getSortedRequests(gStore.getState()).get(1); + let initial = RequestsMenu.getItemAtIndex(0); + let redirect = RequestsMenu.getItemAtIndex(1); - let initialSecurityIcon = document.querySelectorAll(".requests-security-state-icon")[0]; - let redirectSecurityIcon = document.querySelectorAll(".requests-security-state-icon")[1]; + let initialSecurityIcon = + $(".requests-security-state-icon", getItemTarget(RequestsMenu, initial)); + let redirectSecurityIcon = + $(".requests-security-state-icon", getItemTarget(RequestsMenu, redirect)); ok(initialSecurityIcon.classList.contains("security-state-insecure"), "Initial request was marked insecure."); diff --git a/devtools/client/netmonitor/test/browser_net_security-state.js b/devtools/client/netmonitor/test/browser_net_security-state.js index 27476e2d5449..9a91617b21df 100644 --- a/devtools/client/netmonitor/test/browser_net_security-state.js +++ b/devtools/client/netmonitor/test/browser_net_security-state.js @@ -17,25 +17,20 @@ add_task(function* () { }; let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); - 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 { $, EVENTS, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; + RequestsMenu.lazyUpdate = false; yield performRequests(); - for (let subitemNode of Array.from(document.querySelectorAll( - "requests-menu-subitem.requests-menu-security-and-domain"))) { - let domain = subitemNode.querySelector(".requests-menu-domain").textContent; + for (let item of RequestsMenu.items) { + let target = getItemTarget(RequestsMenu, item); + let domain = $(".requests-menu-domain", target).textContent; info("Found a request to " + domain); 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]; info("Classes of security state icon are: " + classes); @@ -90,9 +85,7 @@ add_task(function* () { yield done; const expectedCount = Object.keys(EXPECTED_SECURITY_STATES).length; - is(gStore.getState().requests.requests.size, - expectedCount, - expectedCount + " events logged."); + is(RequestsMenu.itemCount, expectedCount, expectedCount + " events logged."); } /** diff --git a/devtools/client/netmonitor/test/browser_net_security-tab-deselect.js b/devtools/client/netmonitor/test/browser_net_security-tab-deselect.js index ff62488d80da..057e8c43d519 100644 --- a/devtools/client/netmonitor/test/browser_net_security-tab-deselect.js +++ b/devtools/client/netmonitor/test/browser_net_security-tab-deselect.js @@ -10,10 +10,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; info("Performing requests."); let wait = waitForNetworkEvents(monitor, 2); diff --git a/devtools/client/netmonitor/test/browser_net_security-tab-visibility.js b/devtools/client/netmonitor/test/browser_net_security-tab-visibility.js index 503d63453256..6ae18ae725df 100644 --- a/devtools/client/netmonitor/test/browser_net_security-tab-visibility.js +++ b/devtools/client/netmonitor/test/browser_net_security-tab-visibility.js @@ -32,11 +32,10 @@ add_task(function* () { ]; let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { getSelectedRequest } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, EVENTS, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; for (let testcase of TEST_DATA) { info("Testing Security tab visibility for " + testcase.desc); @@ -55,10 +54,9 @@ add_task(function* () { yield onNewItem; info("Selecting the request."); - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[0]); + RequestsMenu.selectedIndex = 0; - is(getSelectedRequest(gStore.getState()).securityState, undefined, + is(RequestsMenu.selectedItem.securityState, undefined, "Security state has not yet arrived."); is(!!document.querySelector("#security-tab"), testcase.visibleOnNewEvent, "Security tab is " + (testcase.visibleOnNewEvent ? "visible" : "hidden") + @@ -67,7 +65,7 @@ add_task(function* () { info("Waiting for security information to arrive."); yield onSecurityInfo; - ok(getSelectedRequest(gStore.getState()).securityState, + ok(RequestsMenu.selectedItem.securityState, "Security state arrived."); is(!!document.querySelector("#security-tab"), testcase.visibleOnSecurityInfo, "Security tab is " + (testcase.visibleOnSecurityInfo ? "visible" : "hidden") + @@ -81,7 +79,7 @@ add_task(function* () { " after request has been completed."); info("Clearing requests."); - gStore.dispatch(Actions.clearRequests()); + RequestsMenu.clear(); } return teardown(monitor); diff --git a/devtools/client/netmonitor/test/browser_net_security-warnings.js b/devtools/client/netmonitor/test/browser_net_security-warnings.js index cf486a533a3f..80ce66cd0736 100644 --- a/devtools/client/netmonitor/test/browser_net_security-warnings.js +++ b/devtools/client/netmonitor/test/browser_net_security-warnings.js @@ -17,10 +17,10 @@ const TEST_CASES = [ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; for (let test of TEST_CASES) { info("Testing site with " + test.desc); @@ -41,8 +41,7 @@ add_task(function* () { if (!document.querySelector("#security-tab[aria-selected=true]")) { info("Selecting security tab."); wait = waitForDOM(document, "#security-panel .properties-view"); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#security-tab")); + document.querySelector("#security-tab").click(); yield wait; } @@ -50,7 +49,7 @@ add_task(function* () { test.warnCipher, "Cipher suite warning is hidden."); - gStore.dispatch(Actions.clearRequests()); + RequestsMenu.clear(); } return teardown(monitor); diff --git a/devtools/client/netmonitor/test/browser_net_send-beacon-other-tab.js b/devtools/client/netmonitor/test/browser_net_send-beacon-other-tab.js index 35049ddcfab4..5e566c134078 100644 --- a/devtools/client/netmonitor/test/browser_net_send-beacon-other-tab.js +++ b/devtools/client/netmonitor/test/browser_net_send-beacon-other-tab.js @@ -9,16 +9,13 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); - let { gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index"); - - gStore.dispatch(Actions.batchEnable(false)); + let { RequestsMenu } = monitor.panelWin.NetMonitorView; + RequestsMenu.lazyUpdate = false; let beaconTab = yield addTab(SEND_BEACON_URL); 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); yield ContentTask.spawn(beaconTab.linkedBrowser, {}, function* () { @@ -27,8 +24,8 @@ add_task(function* () { tab.linkedBrowser.reload(); yield wait; - is(gStore.getState().requests.requests.size, 1, "Only the reload should be recorded."); - let request = getSortedRequests(gStore.getState()).get(0); + is(RequestsMenu.itemCount, 1, "Only the reload should be recorded."); + let request = RequestsMenu.getItemAtIndex(0); is(request.method, "GET", "The method is correct."); is(request.status, "200", "The status is correct."); diff --git a/devtools/client/netmonitor/test/browser_net_send-beacon.js b/devtools/client/netmonitor/test/browser_net_send-beacon.js index 343816bb4750..348a8f0ae7c6 100644 --- a/devtools/client/netmonitor/test/browser_net_send-beacon.js +++ b/devtools/client/netmonitor/test/browser_net_send-beacon.js @@ -9,13 +9,11 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(SEND_BEACON_URL); - let { gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { RequestsMenu } = monitor.panelWin.NetMonitorView; - 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); yield ContentTask.spawn(tab.linkedBrowser, {}, function* () { @@ -23,8 +21,8 @@ add_task(function* () { }); yield wait; - is(gStore.getState().requests.requests.size, 1, "The beacon should be recorded."); - let request = getSortedRequests(gStore.getState()).get(0); + is(RequestsMenu.itemCount, 1, "The beacon should be recorded."); + let request = RequestsMenu.getItemAtIndex(0); is(request.method, "POST", "The method is correct."); ok(request.url.endsWith("beacon_request"), "The URL is correct."); is(request.status, "404", "The status is correct."); diff --git a/devtools/client/netmonitor/test/browser_net_service-worker-status.js b/devtools/client/netmonitor/test/browser_net_service-worker-status.js index 8c1a2e281800..213e4ba9487e 100644 --- a/devtools/client/netmonitor/test/browser_net_service-worker-status.js +++ b/devtools/client/netmonitor/test/browser_net_service-worker-status.js @@ -16,14 +16,8 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(TEST_URL, null, true); info("Starting test... "); - 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 { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; const REQUEST_DATA = [ { @@ -54,17 +48,11 @@ add_task(function* () { let index = 0; for (let request of REQUEST_DATA) { - let item = getSortedRequests(gStore.getState()).get(index); + let item = RequestsMenu.getItemAtIndex(index); info(`Verifying request #${index}`); - yield verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - item, - request.method, - request.uri, - request.details - ); + yield verifyRequestItemTarget(RequestsMenu, item, + request.method, request.uri, request.details); let { stacktrace } = item.cause; let stackLen = stacktrace ? stacktrace.length : 0; diff --git a/devtools/client/netmonitor/test/browser_net_simple-request-data.js b/devtools/client/netmonitor/test/browser_net_simple-request-data.js index 0392a4e9524e..1008acf99be9 100644 --- a/devtools/client/netmonitor/test/browser_net_simple-request-data.js +++ b/devtools/client/netmonitor/test/browser_net_simple-request-data.js @@ -13,30 +13,24 @@ function test() { initNetMonitor(SIMPLE_SJS).then(({ tab, monitor }) => { info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { EVENTS } = windowRequire("devtools/client/netmonitor/events"); - let { - getDisplayedRequests, - getSelectedRequest, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; waitForNetworkEvents(monitor, 1) .then(() => teardown(monitor)) .then(finish); - monitor.panelWin.once(EVENTS.NETWORK_EVENT, () => { - is(getSelectedRequest(gStore.getState()), null, + monitor.panelWin.once(monitor.panelWin.EVENTS.NETWORK_EVENT, () => { + is(RequestsMenu.selectedItem, null, "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."); is(!!document.querySelector(".network-details-panel"), false, "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", "The attached request id is incorrect."); @@ -74,6 +68,8 @@ function test() { is(requestItem.contentSize, undefined, "The contentSize should not yet be set."); + is(requestItem.mimeType, undefined, + "The mimeType should not yet be set."); is(requestItem.responseContent, undefined, "The responseContent should not yet be set."); @@ -82,17 +78,11 @@ function test() { is(requestItem.eventTimings, undefined, "The eventTimings should not yet be set."); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - requestItem, - "GET", - SIMPLE_SJS - ); + verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS); }); - monitor.panelWin.once(EVENTS.RECEIVED_REQUEST_HEADERS, () => { - let requestItem = getSortedRequests(gStore.getState()).get(0); + monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_REQUEST_HEADERS, () => { + let requestItem = RequestsMenu.getItemAtIndex(0); ok(requestItem.requestHeaders, "There should be a requestHeaders data available."); 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 // vary across platforms ("User-Agent" header differs). - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - requestItem, - "GET", - SIMPLE_SJS - ); + verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS); }); - monitor.panelWin.once(EVENTS.RECEIVED_REQUEST_COOKIES, () => { - let requestItem = getSortedRequests(gStore.getState()).get(0); + monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_REQUEST_COOKIES, () => { + let requestItem = RequestsMenu.getItemAtIndex(0); ok(requestItem.requestCookies, "There should be a requestCookies data available."); is(requestItem.requestCookies.cookies.length, 2, "The requestCookies data has an incorrect |cookies| property."); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - requestItem, - "GET", - SIMPLE_SJS - ); + verifyRequestItemTarget(RequestsMenu, 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."); }); - monitor.panelWin.once(EVENTS.RECEIVED_RESPONSE_HEADERS, () => { - let requestItem = getSortedRequests(gStore.getState()).get(0); + monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_RESPONSE_HEADERS, () => { + let requestItem = RequestsMenu.getItemAtIndex(0); ok(requestItem.responseHeaders, "There should be a responseHeaders data available."); @@ -142,34 +120,22 @@ function test() { is(requestItem.responseHeaders.headersSize, 330, "The responseHeaders data has an incorrect |headersSize| property."); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - requestItem, - "GET", - SIMPLE_SJS - ); + verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS); }); - monitor.panelWin.once(EVENTS.RECEIVED_RESPONSE_COOKIES, () => { - let requestItem = getSortedRequests(gStore.getState()).get(0); + monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_RESPONSE_COOKIES, () => { + let requestItem = RequestsMenu.getItemAtIndex(0); ok(requestItem.responseCookies, "There should be a responseCookies data available."); is(requestItem.responseCookies.cookies.length, 2, "The responseCookies data has an incorrect |cookies| property."); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - requestItem, - "GET", - SIMPLE_SJS - ); + verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS); }); - monitor.panelWin.once(EVENTS.STARTED_RECEIVING_RESPONSE, () => { - let requestItem = getSortedRequests(gStore.getState()).get(0); + monitor.panelWin.once(monitor.panelWin.EVENTS.STARTED_RECEIVING_RESPONSE, () => { + let requestItem = RequestsMenu.getItemAtIndex(0); is(requestItem.httpVersion, "HTTP/1.1", "The httpVersion data has an incorrect value."); @@ -180,21 +146,14 @@ function test() { is(requestItem.headersSize, 330, "The headersSize data has an incorrect value."); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - requestItem, - "GET", - SIMPLE_SJS, - { - status: "200", - statusText: "Och Aye" - } - ); + verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS, { + status: "200", + statusText: "Och Aye" + }); }); - monitor.panelWin.once(EVENTS.UPDATING_RESPONSE_CONTENT, () => { - let requestItem = getSortedRequests(gStore.getState()).get(0); + monitor.panelWin.once(monitor.panelWin.EVENTS.UPDATING_RESPONSE_CONTENT, () => { + let requestItem = RequestsMenu.getItemAtIndex(0); is(requestItem.transferredSize, "12", "The transferredSize data has an incorrect value."); @@ -203,23 +162,16 @@ function test() { is(requestItem.mimeType, "text/plain; charset=utf-8", "The mimeType data has an incorrect value."); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - requestItem, - "GET", - SIMPLE_SJS, - { - type: "plain", - fullMimeType: "text/plain; charset=utf-8", - transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), - size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), - } - ); + verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS, { + type: "plain", + fullMimeType: "text/plain; charset=utf-8", + transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), + size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), + }); }); - monitor.panelWin.once(EVENTS.RECEIVED_RESPONSE_CONTENT, () => { - let requestItem = getSortedRequests(gStore.getState()).get(0); + monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_RESPONSE_CONTENT, () => { + let requestItem = RequestsMenu.getItemAtIndex(0); ok(requestItem.responseContent, "There should be a responseContent data available."); @@ -233,43 +185,29 @@ function test() { 12, "The responseContent data has an incorrect |content.size| property."); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - requestItem, - "GET", - SIMPLE_SJS, - { - type: "plain", - fullMimeType: "text/plain; charset=utf-8", - transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), - size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), - } - ); + verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS, { + type: "plain", + fullMimeType: "text/plain; charset=utf-8", + transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), + size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12), + }); }); - monitor.panelWin.once(EVENTS.UPDATING_EVENT_TIMINGS, () => { - let requestItem = getSortedRequests(gStore.getState()).get(0); + monitor.panelWin.once(monitor.panelWin.EVENTS.UPDATING_EVENT_TIMINGS, () => { + let requestItem = RequestsMenu.getItemAtIndex(0); is(typeof requestItem.totalTime, "number", "The attached totalTime is incorrect."); ok(requestItem.totalTime >= 0, "The attached totalTime should be positive."); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - requestItem, - "GET", - SIMPLE_SJS, - { - time: true - } - ); + verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS, { + time: true + }); }); - monitor.panelWin.once(EVENTS.RECEIVED_EVENT_TIMINGS, () => { - let requestItem = getSortedRequests(gStore.getState()).get(0); + monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_EVENT_TIMINGS, () => { + let requestItem = RequestsMenu.getItemAtIndex(0); ok(requestItem.eventTimings, "There should be a eventTimings data available."); @@ -288,16 +226,9 @@ function test() { is(typeof requestItem.eventTimings.totalTime, "number", "The eventTimings data has an incorrect |totalTime| property."); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - requestItem, - "GET", - SIMPLE_SJS, - { - time: true - } - ); + verifyRequestItemTarget(RequestsMenu, requestItem, "GET", SIMPLE_SJS, { + time: true + }); }); tab.linkedBrowser.reload(); diff --git a/devtools/client/netmonitor/test/browser_net_simple-request-details.js b/devtools/client/netmonitor/test/browser_net_simple-request-details.js index 2a6046c2cd4e..cf12b8437d58 100644 --- a/devtools/client/netmonitor/test/browser_net_simple-request-details.js +++ b/devtools/client/netmonitor/test/browser_net_simple-request-details.js @@ -13,33 +13,29 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(SIMPLE_SJS); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { EVENTS } = windowRequire("devtools/client/netmonitor/events"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); - - gStore.dispatch(Actions.batchEnable(false)); + let { document, EVENTS, Editor, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 1); tab.linkedBrowser.reload(); yield wait; - is(getSelectedRequest(gStore.getState()), undefined, + is(RequestsMenu.selectedItem, null, "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."); is(!!document.querySelector(".network-details-panel"), false, "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")); + yield onTabUpdated; - isnot(getSelectedRequest(gStore.getState()), undefined, + isnot(RequestsMenu.selectedItem, null, "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."); is(!!document.querySelector(".network-details-panel"), true, "The network details panel should not be hidden after toggle button was pressed."); @@ -51,13 +47,6 @@ add_task(function* () { testTimingsTab(); return teardown(monitor); - function getSelectedIndex(state) { - if (!state.requests.selectedId) { - return -1; - } - return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId); - } - function testHeadersTab() { let tabEl = document.querySelectorAll("#details-pane tab")[0]; let tabpanel = document.querySelectorAll("#details-pane tabpanel")[0]; diff --git a/devtools/client/netmonitor/test/browser_net_simple-request.js b/devtools/client/netmonitor/test/browser_net_simple-request.js index a866f3e83b75..45db0d412aa2 100644 --- a/devtools/client/netmonitor/test/browser_net_simple-request.js +++ b/devtools/client/netmonitor/test/browser_net_simple-request.js @@ -16,22 +16,17 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(SIMPLE_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { EVENTS } = windowRequire("devtools/client/netmonitor/events"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"), true, "The pane toggle button should be disabled when the frontend is opened."); ok(document.querySelector("#requests-menu-empty-notice"), "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."); is(!!document.querySelector(".network-details-panel"), false, "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."); ok(!document.querySelector("#requests-menu-empty-notice"), "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."); is(!!document.querySelector(".network-details-panel"), false, "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."); ok(!document.querySelector("#requests-menu-empty-notice"), "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."); is(!!document.querySelector(".network-details-panel"), false, "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"), true, "The pane toggle button should be disabled when after clear."); ok(document.querySelector("#requests-menu-empty-notice"), "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."); is(!!document.querySelector(".network-details-panel"), false, "The network details panel should still be hidden after clear."); diff --git a/devtools/client/netmonitor/test/browser_net_sort-01.js b/devtools/client/netmonitor/test/browser_net_sort-01.js index a167c52f1325..30d9b88a6c41 100644 --- a/devtools/client/netmonitor/test/browser_net_sort-01.js +++ b/devtools/client/netmonitor/test/browser_net_sort-01.js @@ -4,233 +4,216 @@ "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* () { let { L10N } = require("devtools/client/netmonitor/l10n"); - let { monitor } = yield initNetMonitor(SORTING_URL); + let { tab, monitor } = yield initNetMonitor(STATUS_CODES_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 { $all, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - 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)); - - // 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 ContentTask.spawn(tab.linkedBrowser, {}, function* () { + content.wrappedJSObject.performRequests(); + }); yield wait; - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector(".network-details-panel-toggle")); + testContents([0, 1, 2, 3, 4]); - isnot(getSelectedRequest(gStore.getState()), undefined, - "There should be a selected item in the requests menu."); - is(getSelectedIndex(gStore.getState()), 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."); + info("Testing swap(0, 0)"); + RequestsMenu.swapItemsAtIndices(0, 0); + RequestsMenu.refreshZebra(); + testContents([0, 1, 2, 3, 4]); - testHeaders(); - testContents([0, 2, 4, 3, 1], 0); + info("Testing swap(0, 1)"); + RequestsMenu.swapItemsAtIndices(0, 1); + RequestsMenu.refreshZebra(); + testContents([1, 0, 2, 3, 4]); - 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("Testing swap(0, 2)"); + RequestsMenu.swapItemsAtIndices(0, 2); + RequestsMenu.refreshZebra(); + testContents([1, 2, 0, 3, 4]); - info("Performing more requests."); - wait = waitForNetworkEvents(monitor, 5); - yield performRequestsInContent(requests); - yield wait; + info("Testing swap(0, 3)"); + RequestsMenu.swapItemsAtIndices(0, 3); + RequestsMenu.refreshZebra(); + testContents([1, 2, 3, 0, 4]); - info("Testing status sort again, ascending."); - testHeaders("status", "ascending"); - testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 0); + info("Testing swap(0, 4)"); + RequestsMenu.swapItemsAtIndices(0, 4); + RequestsMenu.refreshZebra(); + testContents([1, 2, 3, 4, 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("Testing swap(1, 0)"); + RequestsMenu.swapItemsAtIndices(1, 0); + RequestsMenu.refreshZebra(); + testContents([0, 2, 3, 4, 1]); - info("Performing more requests."); - wait = waitForNetworkEvents(monitor, 5); - yield performRequestsInContent(requests); - yield wait; + info("Testing swap(1, 1)"); + RequestsMenu.swapItemsAtIndices(1, 1); + RequestsMenu.refreshZebra(); + testContents([0, 2, 3, 4, 1]); - 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 swap(1, 2)"); + RequestsMenu.swapItemsAtIndices(1, 2); + RequestsMenu.refreshZebra(); + testContents([0, 1, 3, 4, 2]); - 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 swap(1, 3)"); + RequestsMenu.swapItemsAtIndices(1, 3); + RequestsMenu.refreshZebra(); + testContents([0, 3, 1, 4, 2]); - 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); + info("Testing swap(1, 4)"); + RequestsMenu.swapItemsAtIndices(1, 4); + RequestsMenu.refreshZebra(); + testContents([0, 3, 4, 1, 2]); + + 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); - 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 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, + function testContents([a, b, c, d, e]) { + is(RequestsMenu.items.length, 5, + "There should be a total of 5 items in the requests menu."); + is(RequestsMenu.visibleItems.length, 5, + "There should be a total of 5 visbile items in the requests menu."); + is($all(".request-list-item").length, 5, "The visible items in the requests menu are, in fact, visible!"); - for (let i = 0, len = order.length / 5; i < len; i++) { - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(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( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(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( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(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( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(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( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(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 - }); - } + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(a), + "GET", STATUS_CODES_SJS + "?sts=100", { + status: 101, + statusText: "Switching Protocols", + type: "plain", + fullMimeType: "text/plain; charset=utf-8", + transferred: L10N.getStr("networkMenu.sizeUnavailable"), + size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0), + time: true + }); + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(b), + "GET", STATUS_CODES_SJS + "?sts=200", { + status: 202, + statusText: "Created", + type: "plain", + fullMimeType: "text/plain; charset=utf-8", + transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22), + size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22), + time: true + }); + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(c), + "GET", STATUS_CODES_SJS + "?sts=300", { + status: 303, + statusText: "See Other", + type: "plain", + fullMimeType: "text/plain; charset=utf-8", + transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22), + size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0), + time: true + }); + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(d), + "GET", STATUS_CODES_SJS + "?sts=400", { + status: 404, + statusText: "Not Found", + type: "plain", + fullMimeType: "text/plain; charset=utf-8", + transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22), + size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22), + time: true + }); + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(e), + "GET", STATUS_CODES_SJS + "?sts=500", { + status: 501, + statusText: "Not Implemented", + type: "plain", + fullMimeType: "text/plain; charset=utf-8", + transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22), + size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22), + time: true + }); } }); diff --git a/devtools/client/netmonitor/test/browser_net_sort-02.js b/devtools/client/netmonitor/test/browser_net_sort-02.js index 84b77a8feeda..cca0469005ec 100644 --- a/devtools/client/netmonitor/test/browser_net_sort-02.js +++ b/devtools/client/netmonitor/test/browser_net_sort-02.js @@ -17,15 +17,8 @@ add_task(function* () { // of the heavy dom manipulation associated with sorting. requestLongerTimeout(2); - 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 { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; // Loading the frame script and preparing the xhr request URLs so we can // generate some requests later. @@ -47,16 +40,18 @@ add_task(function* () { method: "GET3" }]; + RequestsMenu.lazyUpdate = false; + let wait = waitForNetworkEvents(monitor, 5); yield performRequestsInContent(requests); yield wait; - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, 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."); - is(getSelectedIndex(gStore.getState()), 0, + 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."); @@ -192,13 +187,6 @@ add_task(function* () { 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) { let doc = monitor.panelWin.document; let target = doc.querySelector("#requests-menu-" + sortType + "-button"); @@ -222,24 +210,21 @@ add_task(function* () { } 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."); - is(getSelectedIndex(gStore.getState()), a, + is(RequestsMenu.selectedIndex, a, "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, 5, + is(RequestsMenu.items.length, 5, "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."); is(document.querySelectorAll(".request-list-item").length, 5, "The visible items in the requests menu are, in fact, visible!"); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(a), + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(a), "GET1", SORTING_SJS + "?index=1", { fuzzyUrl: true, status: 101, @@ -250,10 +235,7 @@ add_task(function* () { size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0), time: true }); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(b), + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(b), "GET2", SORTING_SJS + "?index=2", { fuzzyUrl: true, status: 200, @@ -264,10 +246,7 @@ add_task(function* () { size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19), time: true }); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(c), + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(c), "GET3", SORTING_SJS + "?index=3", { fuzzyUrl: true, status: 300, @@ -278,10 +257,7 @@ add_task(function* () { size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29), time: true }); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(d), + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(d), "GET4", SORTING_SJS + "?index=4", { fuzzyUrl: true, status: 400, @@ -292,10 +268,7 @@ add_task(function* () { size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39), time: true }); - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(e), + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(e), "GET5", SORTING_SJS + "?index=5", { fuzzyUrl: true, status: 500, diff --git a/devtools/client/netmonitor/test/browser_net_sort-03.js b/devtools/client/netmonitor/test/browser_net_sort-03.js new file mode 100644 index 000000000000..5da19959505d --- /dev/null +++ b/devtools/client/netmonitor/test/browser_net_sort-03.js @@ -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 + }); + } + } +}); diff --git a/devtools/client/netmonitor/test/browser_net_status-codes.js b/devtools/client/netmonitor/test/browser_net_status-codes.js index 65be070fafda..26b8b226c201 100644 --- a/devtools/client/netmonitor/test/browser_net_status-codes.js +++ b/devtools/client/netmonitor/test/browser_net_status-codes.js @@ -14,17 +14,12 @@ add_task(function* () { info("Starting test... "); - 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 { document, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; let requestItems = []; + RequestsMenu.lazyUpdate = false; + const REQUEST_DATA = [ { // request #0 @@ -108,24 +103,18 @@ add_task(function* () { /** * 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() { info("Verifying requests contain correct information."); let index = 0; for (let request of REQUEST_DATA) { - let item = getSortedRequests(gStore.getState()).get(index); + let item = RequestsMenu.getItemAtIndex(index); requestItems[index] = item; info("Verifying request #" + index); - yield verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - item, - request.method, - request.uri, - request.details - ); + yield verifyRequestItemTarget(RequestsMenu, item, + request.method, request.uri, request.details); index++; } @@ -177,8 +166,7 @@ add_task(function* () { function* testParams(data, index) { EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelectorAll(".request-list-item")[index]); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#params-tab")); + document.querySelector("#params-tab").click(); let panel = document.querySelector("#params-panel"); let statusParamValue = data.uri.split("=").pop(); diff --git a/devtools/client/netmonitor/test/browser_net_streaming-response.js b/devtools/client/netmonitor/test/browser_net_streaming-response.js index 8bdf3b74209c..3a473544b44c 100644 --- a/devtools/client/netmonitor/test/browser_net_streaming-response.js +++ b/devtools/client/netmonitor/test/browser_net_streaming-response.js @@ -12,20 +12,17 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); info("Starting test... "); - 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 { panelWin } = monitor; + let { document, NetMonitorView } = panelWin; + let { RequestsMenu } = NetMonitorView; const REQUESTS = [ [ "hls-m3u8", /^#EXTM3U/ ], [ "mpeg-dash", /^<\?xml/ ] ]; + RequestsMenu.lazyUpdate = false; + let wait = waitForNetworkEvents(monitor, REQUESTS.length); for (let [fmt] of REQUESTS) { let url = CONTENT_TYPE_SJS + "?fmt=" + fmt; @@ -36,26 +33,20 @@ add_task(function* () { yield wait; REQUESTS.forEach(([ fmt ], i) => { - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(i), - "GET", - CONTENT_TYPE_SJS + "?fmt=" + fmt, - { + verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(i), + "GET", CONTENT_TYPE_SJS + "?fmt=" + fmt, { status: 200, statusText: "OK" }); }); wait = waitForDOM(document, "#response-panel"); - EventUtils.sendMouseEvent({ type: "click" }, + EventUtils.sendMouseEvent({ type: "mousedown" }, document.querySelector(".network-details-panel-toggle")); - EventUtils.sendMouseEvent({ type: "click" }, - document.querySelector("#response-tab")); + document.querySelector("#response-tab").click(); yield wait; - gStore.dispatch(Actions.selectRequest(null)); + RequestsMenu.selectedIndex = -1; yield selectIndexAndWaitForEditor(0); // the hls-m3u8 part @@ -71,14 +62,12 @@ add_task(function* () { let editor = document.querySelector("#response-panel .editor-mount iframe"); if (!editor) { let waitDOM = waitForDOM(document, "#response-panel .editor-mount iframe"); - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[index]); + RequestsMenu.selectedIndex = index; document.querySelector("#response-tab").click(); [editor] = yield waitDOM; yield once(editor, "DOMContentLoaded"); } else { - EventUtils.sendMouseEvent({ type: "mousedown" }, - document.querySelectorAll(".request-list-item")[index]); + RequestsMenu.selectedIndex = index; } yield waitForDOM(editor.contentDocument, ".CodeMirror-code"); diff --git a/devtools/client/netmonitor/test/browser_net_throttle.js b/devtools/client/netmonitor/test/browser_net_throttle.js index d05b95306151..2db7ecc6a549 100644 --- a/devtools/client/netmonitor/test/browser_net_throttle.js +++ b/devtools/client/netmonitor/test/browser_net_throttle.js @@ -14,13 +14,7 @@ function* throttleTest(actuallyThrottle) { requestLongerTimeout(2); let { monitor } = yield initNetMonitor(SIMPLE_URL); - let { document, gStore, windowRequire, NetMonitorController } = 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"); + const {ACTIVITY_TYPE, EVENTS, NetMonitorController, NetMonitorView} = monitor.panelWin; info("Starting test... (actuallyThrottle = " + actuallyThrottle + ")"); @@ -51,7 +45,7 @@ function* throttleTest(actuallyThrottle) { yield NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DISABLED); yield eventPromise; - let requestItem = getSortedRequests(gStore.getState()).get(0); + let requestItem = NetMonitorView.RequestsMenu.getItemAtIndex(0); const reportedOneSecond = requestItem.eventTimings.timings.receive > 1000; if (actuallyThrottle) { ok(reportedOneSecond, "download reported as taking more than one second"); diff --git a/devtools/client/netmonitor/test/browser_net_timing-division.js b/devtools/client/netmonitor/test/browser_net_timing-division.js index 1d9cf182e912..684752d02de8 100644 --- a/devtools/client/netmonitor/test/browser_net_timing-division.js +++ b/devtools/client/netmonitor/test/browser_net_timing-division.js @@ -11,11 +11,10 @@ add_task(function* () { let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL); info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { $all, NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; let wait = waitForNetworkEvents(monitor, 2); // Timeout needed for having enough divisions on the time scale. @@ -24,12 +23,9 @@ add_task(function* () { }); yield wait; - let milDivs = document.querySelectorAll( - ".requests-menu-timings-division[data-division-scale=millisecond]"); - let secDivs = document.querySelectorAll( - ".requests-menu-timings-division[data-division-scale=second]"); - let minDivs = document.querySelectorAll( - ".requests-menu-timings-division[data-division-scale=minute]"); + let milDivs = $all(".requests-menu-timings-division[data-division-scale=millisecond]"); + let secDivs = $all(".requests-menu-timings-division[data-division-scale=second]"); + let minDivs = $all(".requests-menu-timings-division[data-division-scale=minute]"); info("Number of millisecond divisions: " + milDivs.length); info("Number of second divisions: " + secDivs.length); @@ -39,10 +35,10 @@ add_task(function* () { secDivs.forEach(div => info(`Second 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 lastRequest = getSortedRequests(gStore.getState()).get(1); + let firstRequest = RequestsMenu.getItemAtIndex(0); + let lastRequest = RequestsMenu.getItemAtIndex(1); info("First request happened at: " + firstRequest.responseHeaders.headers.find(e => e.name == "Date").value); diff --git a/devtools/client/netmonitor/test/browser_net_truncate.js b/devtools/client/netmonitor/test/browser_net_truncate.js index 06a06e8383ce..bfb5c896de9b 100644 --- a/devtools/client/netmonitor/test/browser_net_truncate.js +++ b/devtools/client/netmonitor/test/browser_net_truncate.js @@ -19,33 +19,24 @@ function test() { initNetMonitor(URL).then(({ tab, monitor }) => { info("Starting test... "); - let { document, gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { EVENTS } = windowRequire("devtools/client/netmonitor/events"); - let { - getDisplayedRequests, - getSortedRequests, - } = windowRequire("devtools/client/netmonitor/selectors/index"); + let { NetMonitorView } = monitor.panelWin; + let { RequestsMenu } = NetMonitorView; - gStore.dispatch(Actions.batchEnable(false)); + RequestsMenu.lazyUpdate = false; waitForNetworkEvents(monitor, 1) .then(() => teardown(monitor)) .then(finish); - monitor.panelWin.once(EVENTS.RECEIVED_RESPONSE_CONTENT, () => { - verifyRequestItemTarget( - document, - getDisplayedRequests(gStore.getState()), - getSortedRequests(gStore.getState()).get(0), - "GET", URL, - { - type: "plain", - fullMimeType: "text/plain; charset=utf-8", - transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeMB", 2), - size: L10N.getFormatStrWithNumbers("networkMenu.sizeMB", 2), - } - ); + monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_RESPONSE_CONTENT, () => { + let requestItem = RequestsMenu.getItemAtIndex(0); + + verifyRequestItemTarget(RequestsMenu, requestItem, "GET", URL, { + type: "plain", + fullMimeType: "text/plain; charset=utf-8", + transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeMB", 2), + size: L10N.getFormatStrWithNumbers("networkMenu.sizeMB", 2), + }); }); tab.linkedBrowser.reload(); diff --git a/devtools/client/netmonitor/test/head.js b/devtools/client/netmonitor/test/head.js index a60698b3c9c1..38c42625d1e7 100644 --- a/devtools/client/netmonitor/test/head.js +++ b/devtools/client/netmonitor/test/head.js @@ -10,7 +10,6 @@ Services.scriptloader.loadSubScript( "chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js", this); -const { EVENTS } = require("devtools/client/netmonitor/events"); var { Toolbox } = require("devtools/client/framework/toolbox"); const { decodeUnicodeUrl, @@ -177,10 +176,14 @@ function teardown(monitor) { function waitForNetworkEvents(aMonitor, aGetRequests, aPostRequests = 0) { let deferred = promise.defer(); + let panel = aMonitor.panelWin; + let events = panel.EVENTS; + let progress = {}; let genericEvents = 0; let postEvents = 0; + let awaitedEventsToListeners = [ ["UPDATING_REQUEST_HEADERS", onGenericEvent], ["RECEIVED_REQUEST_HEADERS", onGenericEvent], @@ -207,7 +210,7 @@ function waitForNetworkEvents(aMonitor, aGetRequests, aPostRequests = 0) { function updateProgressForURL(url, event) { 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) { @@ -240,12 +243,12 @@ function waitForNetworkEvents(aMonitor, aGetRequests, aPostRequests = 0) { if (genericEvents >= (aGetRequests + aPostRequests) * 13 && postEvents >= aPostRequests * 2) { - awaitedEventsToListeners.forEach(([e, l]) => panel.off(EVENTS[e], l)); + awaitedEventsToListeners.forEach(([e, l]) => panel.off(events[e], l)); executeSoon(deferred.resolve); } } - awaitedEventsToListeners.forEach(([e, l]) => panel.on(EVENTS[e], l)); + awaitedEventsToListeners.forEach(([e, l]) => panel.on(events[e], l)); return deferred.promise; } @@ -259,18 +262,20 @@ function getItemTarget(requestList, requestItem) { return [...items].find(el => el.dataset.id == requestItem.id); } -function verifyRequestItemTarget(document, requestList, requestItem, aMethod, - aUrl, aData = {}) { +function verifyRequestItemTarget(requestList, requestItem, aMethod, aUrl, aData = {}) { 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); let { fuzzyUrl, status, statusText, cause, type, fullMimeType, transferred, size, time, displayedStatus } = aData; - let target = document.querySelectorAll(".request-list-item")[visibleIndex]; + let target = getItemTarget(requestList, requestItem); + let unicodeUrl = decodeUnicodeUrl(aUrl); let name = getUrlBaseName(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."); } - if (visibleIndex !== -1) { - if (visibleIndex % 2 === 0) { + if (visibleIndex != -1) { + if (visibleIndex % 2 == 0) { ok(target.classList.contains("even"), "Item should have 'even' class."); ok(!target.classList.contains("odd"), "Item shouldn't have 'odd' class."); } else { @@ -372,7 +377,7 @@ function verifyRequestItemTarget(document, requestList, requestItem, aMethod, /** * 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 * The event emitter object that is being listened to. @@ -505,3 +510,23 @@ function waitForContentMessage(name) { }); 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; +} diff --git a/devtools/client/styleeditor/test/browser_styleeditor_fetch-from-cache.js b/devtools/client/styleeditor/test/browser_styleeditor_fetch-from-cache.js index 96705b0e862a..f05ee6bad40f 100644 --- a/devtools/client/styleeditor/test/browser_styleeditor_fetch-from-cache.js +++ b/devtools/client/styleeditor/test/browser_styleeditor_fetch-from-cache.js @@ -13,12 +13,9 @@ add_task(function* () { let tab = yield addTab("about:blank"); let target = TargetFactory.forTab(tab); let toolbox = yield gDevTools.showToolbox(target, "netmonitor"); - let monitor = toolbox.getPanel("netmonitor"); - let { gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index"); - - gStore.dispatch(Actions.batchEnable(false)); + let netmonitor = toolbox.getPanel("netmonitor"); + let { RequestsMenu } = netmonitor.panelWin.NetMonitorView; + RequestsMenu.lazyUpdate = false; info("Navigating to test page"); yield navigateTo(TEST_URL); @@ -31,7 +28,7 @@ add_task(function* () { info("Checking Netmonitor contents."); let items = []; - for (let item of getSortedRequests(gStore.getState())) { + for (let item of RequestsMenu.items) { if (item.url.endsWith("doc_uncached.css")) { items.push(item); } diff --git a/devtools/client/themes/netmonitor.css b/devtools/client/themes/netmonitor.css index 9cf82c9942c8..90743f8535b9 100644 --- a/devtools/client/themes/netmonitor.css +++ b/devtools/client/themes/netmonitor.css @@ -83,8 +83,9 @@ } .request-list-container { - display: flex; - flex-direction: column; + display: -moz-box; + -moz-box-orient: vertical; + -moz-box-flex: 1; } .request-list-empty-notice { @@ -134,16 +135,14 @@ } .requests-menu-contents { - display: flex; - flex-direction: column; + display: -moz-box; + -moz-box-orient: vertical; + -moz-box-flex: 1; overflow-x: hidden; overflow-y: auto; --timings-scale: 1; --timings-rev-scale: 1; - - /* Devtools panel view height - tabbar height - toolbar height */ - height: calc(100vh - 48px); } .requests-menu-subitem { @@ -1332,10 +1331,6 @@ display: none; } -#react-request-list-hook { - -moz-box-flex: 1; -} - #primed-cache-chart, #empty-cache-chart { display: -moz-box; diff --git a/devtools/client/webconsole/test/browser_netmonitor_shows_reqs_in_webconsole.js b/devtools/client/webconsole/test/browser_netmonitor_shows_reqs_in_webconsole.js index 1cfa1cf5167f..c2b65ee56582 100644 --- a/devtools/client/webconsole/test/browser_netmonitor_shows_reqs_in_webconsole.js +++ b/devtools/client/webconsole/test/browser_netmonitor_shows_reqs_in_webconsole.js @@ -62,16 +62,12 @@ function loadDocument(browser) { function testNetmonitor(toolbox) { let monitor = toolbox.getCurrentPanel(); + let { RequestsMenu } = monitor.panelWin.NetMonitorView; + RequestsMenu.lazyUpdate = false; - let { gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index"); + is(RequestsMenu.itemCount, 1, "Network request appears in the network panel"); - gStore.dispatch(Actions.batchEnable(false)); - - is(gStore.getState().requests.requests.size, 1, "Network request appears in the network panel"); - - let item = getSortedRequests(gStore.getState()).get(0); + let item = RequestsMenu.getItemAtIndex(0); is(item.method, "GET", "The attached method is correct."); is(item.url, TEST_PATH, "The attached url is correct."); } diff --git a/devtools/client/webconsole/test/browser_webconsole_netlogging_panel.js b/devtools/client/webconsole/test/browser_webconsole_netlogging_panel.js index b71fe979446f..975df1dfd186 100644 --- a/devtools/client/webconsole/test/browser_webconsole_netlogging_panel.js +++ b/devtools/client/webconsole/test/browser_webconsole_netlogging_panel.js @@ -22,12 +22,7 @@ add_task(function* () { let toolbox = gDevTools.getToolbox(hud.target); is(toolbox.currentToolId, "netmonitor", "Network panel was opened"); let panel = toolbox.getCurrentPanel(); - - let { gStore, windowRequire } = panel.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { getSelectedRequest } = windowRequire("devtools/client/netmonitor/selectors/index"); - - let selected = getSelectedRequest(gStore.getState()); + let selected = panel.panelWin.NetMonitorView.RequestsMenu.selectedItem; is(selected.method, request.request.method, "The correct request is selected"); is(selected.url, request.request.url, diff --git a/devtools/client/webconsole/test/browser_webconsole_netlogging_reset_filter.js b/devtools/client/webconsole/test/browser_webconsole_netlogging_reset_filter.js index e0a2e79a4eaa..9bad80e0aa6d 100644 --- a/devtools/client/webconsole/test/browser_webconsole_netlogging_reset_filter.js +++ b/devtools/client/webconsole/test/browser_webconsole_netlogging_reset_filter.js @@ -16,6 +16,8 @@ const TEST_URI = "data:text/html;charset=utf8,

test file URI"; var hud; add_task(function* () { + let Actions = require("devtools/client/netmonitor/actions/index"); + let requests = []; let { browser } = yield loadTab(TEST_URI); @@ -38,24 +40,20 @@ add_task(function* () { is(toolbox.currentToolId, "netmonitor", "Network panel was opened"); let panel = toolbox.getCurrentPanel(); - let { gStore, windowRequire } = panel.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { getSelectedRequest } = windowRequire("devtools/client/netmonitor/selectors/index"); - - let selected = getSelectedRequest(gStore.getState()); + let selected = panel.panelWin.NetMonitorView.RequestsMenu.selectedItem; is(selected.method, htmlRequest.request.method, "The correct request is selected"); is(selected.url, htmlRequest.request.url, "The correct request is definitely selected"); // Filter out the HTML request. - gStore.dispatch(Actions.toggleRequestFilterType("js")); + panel.panelWin.gStore.dispatch(Actions.toggleRequestFilterType("js")); yield toolbox.selectTool("webconsole"); is(toolbox.currentToolId, "webconsole", "Web console was selected"); yield hud.ui.openNetworkPanel(htmlRequest.actor); - selected = getSelectedRequest(gStore.getState()); + panel.panelWin.NetMonitorView.RequestsMenu.selectedItem; is(selected.method, htmlRequest.request.method, "The correct request is selected"); is(selected.url, htmlRequest.request.url, diff --git a/devtools/client/webconsole/test/browser_webconsole_shows_reqs_in_netmonitor.js b/devtools/client/webconsole/test/browser_webconsole_shows_reqs_in_netmonitor.js index b91e547f4c5b..dae6a34cced0 100644 --- a/devtools/client/webconsole/test/browser_webconsole_shows_reqs_in_netmonitor.js +++ b/devtools/client/webconsole/test/browser_webconsole_shows_reqs_in_netmonitor.js @@ -62,16 +62,11 @@ function loadDocument(browser) { function testNetmonitor(toolbox) { let monitor = toolbox.getCurrentPanel(); + let { RequestsMenu } = monitor.panelWin.NetMonitorView; + RequestsMenu.lazyUpdate = false; + is(RequestsMenu.itemCount, 1, "Network request appears in the network panel"); - let { gStore, windowRequire } = monitor.panelWin; - let Actions = windowRequire("devtools/client/netmonitor/actions/index"); - let { getSortedRequests } = windowRequire("devtools/client/netmonitor/selectors/index"); - - gStore.dispatch(Actions.batchEnable(false)); - - is(gStore.getState().requests.requests.size, 1, "Network request appears in the network panel"); - - let item = getSortedRequests(gStore.getState()).get(0); + let item = RequestsMenu.getItemAtIndex(0); is(item.method, "GET", "The request method is correct."); is(item.url, TEST_PATH, "The request url is correct."); }