--- a/devtools/client/netmonitor/actions/ui.js
+++ b/devtools/client/netmonitor/actions/ui.js
@@ -1,37 +1,37 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const {
- OPEN_SIDEBAR,
+ OPEN_NETWORK_DETAILS,
OPEN_STATISTICS,
SELECT_DETAILS_PANEL_TAB,
WATERFALL_RESIZE,
} = require("../constants");
/**
- * Change sidebar open state.
+ * Change network details panel.
*
- * @param {boolean} open - open state
+ * @param {boolean} open - expected network details panel open state
*/
-function openSidebar(open) {
+function openNetworkDetails(open) {
return {
- type: OPEN_SIDEBAR,
+ type: OPEN_NETWORK_DETAILS,
open,
};
}
/**
* Change performance statistics view open state.
*
- * @param {boolean} visible - expected sidebar open state
+ * @param {boolean} visible - expected performance statistics open state
*/
function openStatistics(open) {
return {
type: OPEN_STATISTICS,
open,
};
}
@@ -41,41 +41,42 @@ function openStatistics(open) {
function resizeWaterfall(width) {
return {
type: WATERFALL_RESIZE,
width
};
}
/**
- * Change the selected tab for details panel.
+ * Change the selected tab for network details panel.
*
* @param {string} id - tab id to be selected
*/
function selectDetailsPanelTab(id) {
return {
type: SELECT_DETAILS_PANEL_TAB,
id,
};
}
/**
- * Toggle sidebar open state.
+ * Toggle network details panel.
*/
-function toggleSidebar() {
- return (dispatch, getState) => dispatch(openSidebar(!getState().ui.sidebarOpen));
+function toggleNetworkDetails() {
+ return (dispatch, getState) =>
+ dispatch(openNetworkDetails(!getState().ui.networkDetailsOpen));
}
/**
* Toggle to show/hide performance statistics view.
*/
function toggleStatistics() {
return (dispatch, getState) => dispatch(openStatistics(!getState().ui.statisticsOpen));
}
module.exports = {
- openSidebar,
+ openNetworkDetails,
openStatistics,
resizeWaterfall,
selectDetailsPanelTab,
- toggleSidebar,
+ toggleNetworkDetails,
toggleStatistics,
};
--- a/devtools/client/netmonitor/components/request-list-empty.js
+++ b/devtools/client/netmonitor/components/request-list-empty.js
@@ -1,20 +1,27 @@
/* 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 NetMonitorView */
+
+/* globals NetMonitorController */
"use strict";
-const { createClass, PropTypes, DOM } = require("devtools/client/shared/vendor/react");
-const { L10N } = require("../l10n");
-const { div, span, button } = DOM;
+const {
+ createClass,
+ DOM,
+ PropTypes,
+} = require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const Actions = require("../actions/index");
+const { ACTIVITY_TYPE } = require("../constants");
+const { L10N } = require("../l10n");
+
+const { button, div, span } = DOM;
/**
* UI displayed when the request list is empty. Contains instructions on reloading
* the page and on triggering performance analysis of the page.
*/
const RequestListEmptyNotice = createClass({
displayName: "RequestListEmptyNotice",
@@ -56,11 +63,12 @@ const RequestListEmptyNotice = createCla
);
}
});
module.exports = connect(
undefined,
dispatch => ({
onPerfClick: e => dispatch(Actions.openStatistics(true)),
- onReloadClick: e => NetMonitorView.reloadPage(),
+ onReloadClick: e =>
+ NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT),
})
)(RequestListEmptyNotice);
--- a/devtools/client/netmonitor/components/request-list-item.js
+++ b/devtools/client/netmonitor/components/request-list-item.js
@@ -18,17 +18,17 @@ const { getAbbreviatedMimeType } = requi
function propertiesEqual(props, item1, item2) {
return item1 === item2 || props.every(p => item1[p] === item2[p]);
}
/**
* Used by shouldComponentUpdate: compare two items, and compare only properties
* relevant for rendering the RequestListItem. Other properties (like request and
* response headers, cookies, bodies) are ignored. These are very useful for the
- * sidebar details, but not here.
+ * network details, but not here.
*/
const UPDATED_REQ_ITEM_PROPS = [
"mimeType",
"eventTimings",
"securityState",
"responseContentDataUri",
"status",
"statusText",
--- a/devtools/client/netmonitor/components/toolbar.js
+++ b/devtools/client/netmonitor/components/toolbar.js
@@ -10,17 +10,17 @@ const {
PropTypes,
} = require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { PluralForm } = require("devtools/shared/plural-form");
const Actions = require("../actions/index");
const { L10N } = require("../l10n");
const {
getDisplayedRequestsSummary,
- isSidebarToggleButtonDisabled,
+ isNetworkDetailsToggleButtonDisabled,
} = require("../selectors/index");
const {
getSizeWithDecimals,
getTimeWithDecimals,
} = require("../utils/format-utils");
const { FILTER_SEARCH_DELAY } = require("../constants");
// Components
@@ -38,24 +38,27 @@ const TOOLBAR_CLEAR = L10N.getStr("netmo
* Network monitor toolbar component
* Toolbar contains a set of useful tools to control network requests
*/
function Toolbar({
clearRequests,
openStatistics,
requestFilterTypes,
setRequestFilterText,
- sidebarToggleDisabled,
- sidebarOpen,
+ networkDetailsToggleDisabled,
+ networkDetailsOpen,
summary,
+ toggleNetworkDetails,
toggleRequestFilterType,
- toggleSidebar,
}) {
- let toggleButtonClassName = ["devtools-button"];
- if (!sidebarOpen) {
+ let toggleButtonClassName = [
+ "network-details-panel-toggle",
+ "devtools-button",
+ ];
+ if (!networkDetailsOpen) {
toggleButtonClassName.push("pane-collapsed");
}
let { count, bytes, millis } = summary;
const text = (count === 0) ? L10N.getStr("networkMenu.empty") :
PluralForm.get(count, L10N.getStr("networkMenu.summary"))
.replace("#1", count)
.replace("#2", getSizeWithDecimals(bytes / 1024))
@@ -104,54 +107,53 @@ function Toolbar({
SearchBox({
delay: FILTER_SEARCH_DELAY,
keyShortcut: SEARCH_KEY_SHORTCUT,
placeholder: SEARCH_PLACE_HOLDER,
type: "filter",
onChange: setRequestFilterText,
}),
button({
- id: "details-pane-toggle",
className: toggleButtonClassName.join(" "),
- title: sidebarOpen ? COLLPASE_DETAILS_PANE : EXPAND_DETAILS_PANE,
- disabled: sidebarToggleDisabled,
+ title: networkDetailsOpen ? COLLPASE_DETAILS_PANE : EXPAND_DETAILS_PANE,
+ disabled: networkDetailsToggleDisabled,
tabIndex: "0",
- onMouseDown: toggleSidebar,
+ onMouseDown: toggleNetworkDetails,
}),
)
)
);
}
Toolbar.displayName = "Toolbar";
Toolbar.propTypes = {
clearRequests: PropTypes.func.isRequired,
openStatistics: PropTypes.func.isRequired,
requestFilterTypes: PropTypes.object.isRequired,
setRequestFilterText: PropTypes.func.isRequired,
- sidebarToggleDisabled: PropTypes.bool.isRequired,
- sidebarOpen: PropTypes.bool.isRequired,
+ networkDetailsToggleDisabled: PropTypes.bool.isRequired,
+ networkDetailsOpen: PropTypes.bool.isRequired,
summary: PropTypes.object.isRequired,
+ toggleNetworkDetails: PropTypes.func.isRequired,
toggleRequestFilterType: PropTypes.func.isRequired,
- toggleSidebar: PropTypes.func.isRequired,
};
module.exports = connect(
(state) => ({
- sidebarToggleDisabled: isSidebarToggleButtonDisabled(state),
- sidebarOpen: state.ui.sidebarOpen,
+ networkDetailsToggleDisabled: isNetworkDetailsToggleButtonDisabled(state),
+ networkDetailsOpen: state.ui.networkDetailsOpen,
requestFilterTypes: state.filters.requestFilterTypes,
summary: getDisplayedRequestsSummary(state),
}),
(dispatch) => ({
clearRequests: () => dispatch(Actions.clearRequests()),
openStatistics: () => dispatch(Actions.openStatistics(true)),
setRequestFilterText: (text) => dispatch(Actions.setRequestFilterText(text)),
toggleRequestFilterType: (evt) => {
if (evt.type === "keydown" && (evt.key !== "" || evt.key !== "Enter")) {
return;
}
dispatch(Actions.toggleRequestFilterType(evt.target.dataset.key));
},
- toggleSidebar: () => dispatch(Actions.toggleSidebar()),
+ toggleNetworkDetails: () => dispatch(Actions.toggleNetworkDetails()),
})
)(Toolbar);
--- a/devtools/client/netmonitor/constants.js
+++ b/devtools/client/netmonitor/constants.js
@@ -14,17 +14,17 @@ const actionTypes = {
ADD_REQUEST: "ADD_REQUEST",
ADD_TIMING_MARKER: "ADD_TIMING_MARKER",
BATCH_ACTIONS: "BATCH_ACTIONS",
BATCH_ENABLE: "BATCH_ENABLE",
CLEAR_REQUESTS: "CLEAR_REQUESTS",
CLEAR_TIMING_MARKERS: "CLEAR_TIMING_MARKERS",
CLONE_SELECTED_REQUEST: "CLONE_SELECTED_REQUEST",
ENABLE_REQUEST_FILTER_TYPE_ONLY: "ENABLE_REQUEST_FILTER_TYPE_ONLY",
- OPEN_SIDEBAR: "OPEN_SIDEBAR",
+ OPEN_NETWORK_DETAILS: "OPEN_NETWORK_DETAILS",
OPEN_STATISTICS: "OPEN_STATISTICS",
REMOVE_SELECTED_CUSTOM_REQUEST: "REMOVE_SELECTED_CUSTOM_REQUEST",
SELECT_REQUEST: "SELECT_REQUEST",
SELECT_DETAILS_PANEL_TAB: "SELECT_DETAILS_PANEL_TAB",
SEND_CUSTOM_REQUEST: "SEND_CUSTOM_REQUEST",
SET_REQUEST_FILTER_TEXT: "SET_REQUEST_FILTER_TEXT",
SORT_BY: "SORT_BY",
TOGGLE_REQUEST_FILTER_TYPE: "TOGGLE_REQUEST_FILTER_TYPE",
--- a/devtools/client/netmonitor/events.js
+++ b/devtools/client/netmonitor/events.js
@@ -54,19 +54,16 @@ const EVENTS = {
// When the request post params are displayed in the UI.
REQUEST_POST_PARAMS_DISPLAYED: "NetMonitor:RequestPostParamsAvailable",
// When the image response thumbnail is displayed in the UI.
RESPONSE_IMAGE_THUMBNAIL_DISPLAYED:
"NetMonitor:ResponseImageThumbnailAvailable",
- // Fired when Sidebar has finished being populated.
- SIDEBAR_POPULATED: "NetMonitor:SidebarPopulated",
-
// Fired when charts have been displayed in the PerformanceStatisticsView.
PLACEHOLDER_CHARTS_DISPLAYED: "NetMonitor:PlaceholderChartsDisplayed",
PRIMED_CACHE_CHART_DISPLAYED: "NetMonitor:PrimedChartsDisplayed",
EMPTY_CACHE_CHART_DISPLAYED: "NetMonitor:EmptyChartsDisplayed",
// Fired once the NetMonitorController establishes a connection to the debug
// target.
CONNECTED: "connected",
--- a/devtools/client/netmonitor/moz.build
+++ b/devtools/client/netmonitor/moz.build
@@ -20,17 +20,16 @@ DevToolsModules(
'l10n.js',
'netmonitor-controller.js',
'netmonitor-view.js',
'panel.js',
'prefs.js',
'request-list-context-menu.js',
'request-utils.js',
'requests-menu-view.js',
- 'sidebar-view.js',
'sort-predicates.js',
'store.js',
'waterfall-background.js',
)
BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
with Files('**'):
--- a/devtools/client/netmonitor/netmonitor-view.js
+++ b/devtools/client/netmonitor/netmonitor-view.js
@@ -1,58 +1,46 @@
/* 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 $, gStore, NetMonitorController, dumpn */
+/* eslint-disable mozilla/reject-some-requires */
+/* globals $, gStore, NetMonitorController */
"use strict";
-const { Task } = require("devtools/shared/task");
-const { ViewHelpers } = require("devtools/client/shared/widgets/view-helpers");
const { RequestsMenuView } = require("./requests-menu-view");
-const { SidebarView } = require("./sidebar-view");
const { ACTIVITY_TYPE } = require("./constants");
-const { Prefs } = require("./prefs");
const { createFactory } = require("devtools/client/shared/vendor/react");
-const Actions = require("./actions/index");
const ReactDOM = require("devtools/client/shared/vendor/react-dom");
const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
// Components
-const CustomRequestPanel = createFactory(require("./shared/components/custom-request-panel"));
-const DetailsPanel = createFactory(require("./shared/components/details-panel"));
+const NetworkDetailsPanel = createFactory(require("./shared/components/network-details-panel"));
const StatisticsPanel = createFactory(require("./components/statistics-panel"));
const Toolbar = createFactory(require("./components/toolbar"));
/**
* Object defining the network monitor view components.
*/
var NetMonitorView = {
/**
* Initializes the network monitor view.
*/
initialize: function () {
- this._initializePanes();
+ this._body = $("#body");
- this.customRequestPanel = $("#react-custom-request-panel-hook");
+ this.networkDetailsPanel = $("#react-network-details-panel-hook");
ReactDOM.render(Provider(
{ store: gStore },
- CustomRequestPanel(),
- ), this.customRequestPanel);
-
- this.detailsPanel = $("#react-details-panel-hook");
+ NetworkDetailsPanel({ toolbox: NetMonitorController._toolbox }),
+ ), this.networkDetailsPanel);
- ReactDOM.render(Provider(
- { store: gStore },
- DetailsPanel({ toolbox: NetMonitorController._toolbox }),
- ), this.detailsPanel);
-
- this.statisticsPanel = $("#statistics-panel");
+ this.statisticsPanel = $("#react-statistics-panel-hook");
ReactDOM.render(Provider(
{ store: gStore },
StatisticsPanel(),
), this.statisticsPanel);
this.toolbar = $("#react-toolbar-hook");
@@ -71,121 +59,31 @@ var NetMonitorView = {
this.toggleFrontendMode.bind(this)
));
},
/**
* Destroys the network monitor view.
*/
destroy: function () {
- this._isDestroyed = true;
this.RequestsMenu.destroy();
- ReactDOM.unmountComponentAtNode(this.customRequestPanel);
- ReactDOM.unmountComponentAtNode(this.detailsPanel);
+ ReactDOM.unmountComponentAtNode(this.networkDetailsPanel);
ReactDOM.unmountComponentAtNode(this.statisticsPanel);
ReactDOM.unmountComponentAtNode(this.toolbar);
this.unsubscribeStore();
-
- this._destroyPanes();
- },
-
- /**
- * Initializes the UI for all the displayed panes.
- */
- _initializePanes: function () {
- dumpn("Initializing the NetMonitorView panes");
-
- this._body = $("#body");
- this._detailsPane = $("#details-pane");
-
- this._detailsPane.setAttribute("width", Prefs.networkDetailsWidth);
- this._detailsPane.setAttribute("height", Prefs.networkDetailsHeight);
- this.toggleDetailsPane({ visible: false });
- },
-
- /**
- * Destroys the UI for all the displayed panes.
- */
- _destroyPanes: Task.async(function* () {
- dumpn("Destroying the NetMonitorView panes");
-
- Prefs.networkDetailsWidth = this._detailsPane.getAttribute("width");
- Prefs.networkDetailsHeight = this._detailsPane.getAttribute("height");
-
- this._detailsPane = null;
- }),
-
- /**
- * Gets the visibility state of the network details pane.
- * @return boolean
- */
- get detailsPaneHidden() {
- return this._detailsPane.classList.contains("pane-collapsed");
- },
-
- /**
- * Sets the network details pane hidden or visible.
- *
- * @param object flags
- * An object containing some of the following properties:
- * - visible: true if the pane should be shown, false to hide
- * - animated: true to display an animation on toggle
- * - delayed: true to wait a few cycles before toggle
- * - callback: a function to invoke when the toggle finishes
- * @param number tabIndex [optional]
- * The index of the intended selected tab in the details pane.
- */
- toggleDetailsPane: function (flags, tabIndex) {
- ViewHelpers.togglePane(flags, this._detailsPane);
-
- if (flags.visible) {
- this._body.classList.remove("pane-collapsed");
- gStore.dispatch(Actions.openSidebar(true));
- } else {
- this._body.classList.add("pane-collapsed");
- gStore.dispatch(Actions.openSidebar(false));
- }
-
- if (tabIndex !== undefined) {
- $("#event-details-pane").selectedIndex = tabIndex;
- }
- },
-
- get currentFrontendMode() {
- // The getter may be called from a timeout after the panel is destroyed.
- if (!this._body.selectedPanel) {
- return null;
- }
- return this._body.selectedPanel.id;
},
toggleFrontendMode: function () {
if (gStore.getState().ui.statisticsOpen) {
- this.showNetworkStatisticsView();
+ this._body.selectedPanel = $("#react-statistics-panel-hook");
+ NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
} else {
- this.showNetworkInspectorView();
+ this._body.selectedPanel = $("#inspector-panel");
}
},
-
- showNetworkInspectorView: function () {
- this._body.selectedPanel = $("#inspector-panel");
- },
-
- showNetworkStatisticsView: function () {
- this._body.selectedPanel = $("#statistics-panel");
- NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
- },
-
- reloadPage: function () {
- NetMonitorController.triggerActivity(
- ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT);
- },
-
- _body: null,
- _detailsPane: null,
};
// A smart store watcher to notify store changes as necessary
function storeWatcher(initialValue, reduceValue, onChange) {
let currentValue = initialValue;
return () => {
const newValue = reduceValue();
@@ -194,12 +92,11 @@ function storeWatcher(initialValue, redu
currentValue = newValue;
}
};
}
/**
* Preliminary setup for the NetMonitorView object.
*/
-NetMonitorView.Sidebar = new SidebarView();
NetMonitorView.RequestsMenu = new RequestsMenuView();
exports.NetMonitorView = NetMonitorView;
--- a/devtools/client/netmonitor/netmonitor.xul
+++ b/devtools/client/netmonitor/netmonitor.xul
@@ -28,25 +28,24 @@
<html:div xmlns="http://www.w3.org/1999/xhtml"
id="network-table"
class="devtools-main-content">
</html:div>
<splitter id="network-inspector-view-splitter"
class="devtools-side-splitter"/>
- <deck id="details-pane"
- hidden="true">
+ <box id="splitter-adjustable-box"
+ hidden="true">
<html:div xmlns="http://www.w3.org/1999/xhtml"
- id="react-custom-request-panel-hook"/>
- <html:div xmlns="http://www.w3.org/1999/xhtml"
- id="react-details-panel-hook"/>
- </deck>
+ id="react-network-details-panel-hook">
+ </html:div>
+ </box>
</hbox>
</vbox>
<html:div xmlns="http://www.w3.org/1999/xhtml"
- id="statistics-panel">
+ id="react-statistics-panel-hook">
</html:div>
</deck>
</window>
--- a/devtools/client/netmonitor/reducers/requests.js
+++ b/devtools/client/netmonitor/reducers/requests.js
@@ -5,17 +5,17 @@
"use strict";
const I = require("devtools/client/shared/vendor/immutable");
const { getUrlDetails } = require("../request-utils");
const {
ADD_REQUEST,
CLEAR_REQUESTS,
CLONE_SELECTED_REQUEST,
- OPEN_SIDEBAR,
+ OPEN_NETWORK_DETAILS,
REMOVE_SELECTED_CUSTOM_REQUEST,
SELECT_REQUEST,
SEND_CUSTOM_REQUEST,
UPDATE_REQUEST,
} = require("../constants");
const Request = I.Record({
id: null,
@@ -223,17 +223,17 @@ function requestsReducer(state = new Req
return closeCustomRequest(state);
}
case SEND_CUSTOM_REQUEST: {
// When a new request with a given id is added in future, select it immediately.
// where we know in advance the ID of the request, at a time when it
// wasn't sent yet.
return closeCustomRequest(state.set("preselectedId", action.id));
}
- case OPEN_SIDEBAR: {
+ case OPEN_NETWORK_DETAILS: {
if (!action.open) {
return state.set("selectedId", null);
}
if (!state.selectedId && !state.requests.isEmpty()) {
return state.set("selectedId", state.requests.first().id);
}
--- a/devtools/client/netmonitor/reducers/ui.js
+++ b/devtools/client/netmonitor/reducers/ui.js
@@ -1,52 +1,52 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const I = require("devtools/client/shared/vendor/immutable");
const {
- OPEN_SIDEBAR,
+ OPEN_NETWORK_DETAILS,
OPEN_STATISTICS,
SELECT_DETAILS_PANEL_TAB,
WATERFALL_RESIZE,
} = require("../constants");
const UI = I.Record({
detailsPanelSelectedTab: "headers",
- sidebarOpen: false,
+ networkDetailsOpen: false,
statisticsOpen: false,
waterfallWidth: null,
});
// Safe bounds for waterfall width (px)
const REQUESTS_WATERFALL_SAFE_BOUNDS = 90;
function resizeWaterfall(state, action) {
return state.set("waterfallWidth", action.width - REQUESTS_WATERFALL_SAFE_BOUNDS);
}
-function openSidebar(state, action) {
- return state.set("sidebarOpen", action.open);
+function openNetworkDetails(state, action) {
+ return state.set("networkDetailsOpen", action.open);
}
function openStatistics(state, action) {
return state.set("statisticsOpen", action.open);
}
function setDetailsPanelTab(state, action) {
return state.set("detailsPanelSelectedTab", action.id);
}
function ui(state = new UI(), action) {
switch (action.type) {
- case OPEN_SIDEBAR:
- return openSidebar(state, action);
+ case OPEN_NETWORK_DETAILS:
+ return openNetworkDetails(state, action);
case OPEN_STATISTICS:
return openStatistics(state, action);
case SELECT_DETAILS_PANEL_TAB:
return setDetailsPanelTab(state, action);
case WATERFALL_RESIZE:
return resizeWaterfall(state, action);
default:
return state;
--- a/devtools/client/netmonitor/requests-menu-view.js
+++ b/devtools/client/netmonitor/requests-menu-view.js
@@ -1,13 +1,13 @@
/* 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, NetMonitorView */
+/* 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");
@@ -76,20 +76,20 @@ RequestsMenuView.prototype = {
// Watch selection changes
this.store.subscribe(storeWatcher(
null,
() => getSelectedRequest(this.store.getState()),
(newSelected, oldSelected) => this.onSelectionUpdate(newSelected, oldSelected)
));
- // Watch the sidebar status and resize the waterfall column on change
+ // Watch the network details panel toggle and resize the waterfall column on change
this.store.subscribe(storeWatcher(
false,
- () => this.store.getState().ui.sidebarOpen,
+ () => 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) => {
@@ -176,17 +176,17 @@ RequestsMenuView.prototype = {
* 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 sidebar if open.
+ * 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;
@@ -375,26 +375,25 @@ RequestsMenuView.prototype = {
return getSelectedRequest(this.store.getState());
},
set selectedItem(item) {
this.store.dispatch(Actions.selectRequest(item ? item.id : null));
},
/**
- * Updates the sidebar status when something about the selection changes
+ * Updates the network details panel state when something about the selection changes
*/
onSelectionUpdate(newSelected, oldSelected) {
if (newSelected) {
// Another item just got selected
- NetMonitorView.Sidebar.populate(newSelected);
- NetMonitorView.Sidebar.toggle(true);
+ this.store.dispatch(Actions.openNetworkDetails(true));
} else {
// Selection just got empty
- NetMonitorView.Sidebar.toggle(false);
+ this.store.dispatch(Actions.openNetworkDetails(false));
}
},
/**
* The resize listener for this container's window.
*/
onResize() {
// Allow requests to settle down first.
--- a/devtools/client/netmonitor/selectors/ui.js
+++ b/devtools/client/netmonitor/selectors/ui.js
@@ -1,17 +1,17 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const { getDisplayedRequests } = require("./requests");
-function isSidebarToggleButtonDisabled(state) {
+function isNetworkDetailsToggleButtonDisabled(state) {
return getDisplayedRequests(state).isEmpty();
}
const EPSILON = 0.001;
function getWaterfallScale(state) {
const { requests, timingMarkers, ui } = state;
@@ -26,11 +26,11 @@ function getWaterfallScale(state) {
const lastEventMillis = Math.max(requests.lastEndedMillis,
timingMarkers.firstDocumentDOMContentLoadedTimestamp,
timingMarkers.firstDocumentLoadTimestamp);
const longestWidth = lastEventMillis - requests.firstStartedMillis;
return Math.min(Math.max(ui.waterfallWidth / longestWidth, EPSILON), 1);
}
module.exports = {
- isSidebarToggleButtonDisabled,
+ isNetworkDetailsToggleButtonDisabled,
getWaterfallScale,
};
deleted file mode 100644
--- a/devtools/client/netmonitor/shared/components/details-panel.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-const {
- createFactory,
- PropTypes,
-} = require("devtools/client/shared/vendor/react");
-const { connect } = require("devtools/client/shared/vendor/react-redux");
-const Actions = require("../../actions/index");
-const { Filters } = require("../../filter-predicates");
-const { L10N } = require("../../l10n");
-const { getSelectedRequest } = require("../../selectors/index");
-
-// Components
-const Tabbar = createFactory(require("devtools/client/shared/components/tabs/tabbar"));
-const TabPanel = createFactory(require("devtools/client/shared/components/tabs/tabs").TabPanel);
-const CookiesPanel = createFactory(require("./cookies-panel"));
-const HeadersPanel = createFactory(require("./headers-panel"));
-const ParamsPanel = createFactory(require("./params-panel"));
-const PreviewPanel = createFactory(require("./preview-panel"));
-const ResponsePanel = createFactory(require("./response-panel"));
-const SecurityPanel = createFactory(require("./security-panel"));
-const TimingsPanel = createFactory(require("./timings-panel"));
-
-const HEADERS_TITLE = L10N.getStr("netmonitor.tab.headers");
-const COOKIES_TITLE = L10N.getStr("netmonitor.tab.cookies");
-const PARAMS_TITLE = L10N.getStr("netmonitor.tab.params");
-const RESPONSE_TITLE = L10N.getStr("netmonitor.tab.response");
-const TIMINGS_TITLE = L10N.getStr("netmonitor.tab.timings");
-const SECURITY_TITLE = L10N.getStr("netmonitor.tab.security");
-const PREVIEW_TITLE = L10N.getStr("netmonitor.tab.preview");
-
-/*
- * Details panel component
- * Display the network request details
- */
-function DetailsPanel({
- activeTabId,
- cloneSelectedRequest,
- request,
- selectTab,
- toolbox,
-}) {
- if (!request) {
- return null;
- }
-
- return (
- Tabbar({
- activeTabId,
- onSelect: selectTab,
- renderOnlySelected: true,
- showAllTabsMenu: true,
- toolbox,
- },
- TabPanel({
- id: "headers",
- title: HEADERS_TITLE,
- },
- HeadersPanel({ request, cloneSelectedRequest }),
- ),
- TabPanel({
- id: "cookies",
- title: COOKIES_TITLE,
- },
- CookiesPanel({ request }),
- ),
- TabPanel({
- id: "params",
- title: PARAMS_TITLE,
- },
- ParamsPanel({ request }),
- ),
- TabPanel({
- id: "response",
- title: RESPONSE_TITLE,
- },
- ResponsePanel({ request }),
- ),
- TabPanel({
- id: "timings",
- title: TIMINGS_TITLE,
- },
- TimingsPanel({ request }),
- ),
- request.securityState && request.securityState !== "insecure" &&
- TabPanel({
- id: "security",
- title: SECURITY_TITLE,
- },
- SecurityPanel({ request }),
- ),
- Filters.html(request) &&
- TabPanel({
- id: "preview",
- title: PREVIEW_TITLE,
- },
- PreviewPanel({ request }),
- ),
- )
- );
-}
-
-DetailsPanel.displayName = "DetailsPanel";
-
-DetailsPanel.propTypes = {
- cloneSelectedRequest: PropTypes.func.isRequired,
- request: PropTypes.object,
- setTabIndex: PropTypes.func.isRequired,
- selectedTab: PropTypes.number.isRequired,
- toolbox: PropTypes.object.isRequired,
-};
-
-module.exports = connect(
- (state) => ({
- activeTabId: state.ui.detailsPanelSelectedTab,
- request: getSelectedRequest(state),
- }),
- (dispatch) => ({
- cloneSelectedRequest: () => dispatch(Actions.cloneSelectedRequest()),
- selectTab: (tabId) => dispatch(Actions.selectDetailsPanelTab(tabId)),
- }),
-)(DetailsPanel);
--- a/devtools/client/netmonitor/shared/components/moz.build
+++ b/devtools/client/netmonitor/shared/components/moz.build
@@ -1,18 +1,19 @@
# 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/.
DevToolsModules(
'cookies-panel.js',
'custom-request-panel.js',
- 'details-panel.js',
'editor.js',
'headers-mdn.js',
'headers-panel.js',
+ 'network-details-panel.js',
'params-panel.js',
'preview-panel.js',
'properties-view.js',
'response-panel.js',
'security-panel.js',
+ 'tabbox-panel.js',
'timings-panel.js',
)
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/shared/components/network-details-panel.js
@@ -0,0 +1,102 @@
+/* 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 document */
+
+"use strict";
+
+const {
+ createClass,
+ createFactory,
+ DOM,
+ PropTypes,
+} = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const Actions = require("../../actions/index");
+const { getSelectedRequest } = require("../../selectors/index");
+const { Prefs } = require("../../prefs");
+
+// Components
+const CustomRequestPanel = createFactory(require("./custom-request-panel"));
+const TabboxPanel = createFactory(require("./tabbox-panel"));
+
+const { div } = DOM;
+/*
+ * Network details panel component
+ */
+const NetworkDetailsPanel = createClass({
+ displayName: "NetworkDetailsPanel",
+
+ propTypes: {
+ activeTabId: PropTypes.string,
+ cloneSelectedRequest: PropTypes.func.isRequired,
+ open: PropTypes.bool,
+ request: PropTypes.object,
+ selectTab: PropTypes.func.isRequired,
+ toolbox: PropTypes.object.isRequired,
+ },
+
+ componentDidMount() {
+ // FIXME: Workaround should be removed in bug 1309183
+ document.getElementById("splitter-adjustable-box")
+ .setAttribute("width", Prefs.networkDetailsWidth);
+ document.getElementById("splitter-adjustable-box")
+ .setAttribute("height", Prefs.networkDetailsHeight);
+ },
+
+ componentWillUnmount() {
+ // FIXME: Workaround should be removed in bug 1309183
+ Prefs.networkDetailsWidth =
+ document.getElementById("splitter-adjustable-box").getAttribute("width");
+ Prefs.networkDetailsHeight =
+ document.getElementById("splitter-adjustable-box").getAttribute("height");
+ },
+
+ render() {
+ let {
+ activeTabId,
+ cloneSelectedRequest,
+ open,
+ request,
+ selectTab,
+ toolbox,
+ } = this.props;
+
+ if (!open || !request) {
+ // FIXME: Workaround should be removed in bug 1309183
+ document.getElementById("splitter-adjustable-box").setAttribute("hidden", true);
+ return null;
+ }
+ // FIXME: Workaround should be removed in bug 1309183
+ document.getElementById("splitter-adjustable-box").removeAttribute("hidden");
+
+ return (
+ div({ className: "network-details-panel" },
+ !request.isCustom ?
+ TabboxPanel({
+ activeTabId,
+ request,
+ selectTab,
+ toolbox,
+ }) :
+ CustomRequestPanel({
+ cloneSelectedRequest,
+ request,
+ })
+ )
+ );
+ }
+});
+
+module.exports = connect(
+ (state) => ({
+ activeTabId: state.ui.detailsPanelSelectedTab,
+ open: state.ui.networkDetailsOpen,
+ request: getSelectedRequest(state),
+ }),
+ (dispatch) => ({
+ cloneSelectedRequest: () => dispatch(Actions.cloneSelectedRequest()),
+ selectTab: (tabId) => dispatch(Actions.selectDetailsPanelTab(tabId)),
+ }),
+)(NetworkDetailsPanel);
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/shared/components/tabbox-panel.js
@@ -0,0 +1,126 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+ createFactory,
+ PropTypes,
+} = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const Actions = require("../../actions/index");
+const { Filters } = require("../../filter-predicates");
+const { L10N } = require("../../l10n");
+const { getSelectedRequest } = require("../../selectors/index");
+
+// Components
+const Tabbar = createFactory(require("devtools/client/shared/components/tabs/tabbar"));
+const TabPanel = createFactory(require("devtools/client/shared/components/tabs/tabs").TabPanel);
+const CookiesPanel = createFactory(require("./cookies-panel"));
+const HeadersPanel = createFactory(require("./headers-panel"));
+const ParamsPanel = createFactory(require("./params-panel"));
+const PreviewPanel = createFactory(require("./preview-panel"));
+const ResponsePanel = createFactory(require("./response-panel"));
+const SecurityPanel = createFactory(require("./security-panel"));
+const TimingsPanel = createFactory(require("./timings-panel"));
+
+const HEADERS_TITLE = L10N.getStr("netmonitor.tab.headers");
+const COOKIES_TITLE = L10N.getStr("netmonitor.tab.cookies");
+const PARAMS_TITLE = L10N.getStr("netmonitor.tab.params");
+const RESPONSE_TITLE = L10N.getStr("netmonitor.tab.response");
+const TIMINGS_TITLE = L10N.getStr("netmonitor.tab.timings");
+const SECURITY_TITLE = L10N.getStr("netmonitor.tab.security");
+const PREVIEW_TITLE = L10N.getStr("netmonitor.tab.preview");
+
+/*
+ * Tabbox panel component
+ * Display the network request details
+ */
+function TabboxPanel({
+ activeTabId,
+ cloneSelectedRequest,
+ request,
+ selectTab,
+ toolbox,
+}) {
+ if (!request) {
+ return null;
+ }
+
+ return (
+ Tabbar({
+ activeTabId,
+ onSelect: selectTab,
+ renderOnlySelected: true,
+ showAllTabsMenu: true,
+ toolbox,
+ },
+ TabPanel({
+ id: "headers",
+ title: HEADERS_TITLE,
+ },
+ HeadersPanel({ request, cloneSelectedRequest }),
+ ),
+ TabPanel({
+ id: "cookies",
+ title: COOKIES_TITLE,
+ },
+ CookiesPanel({ request }),
+ ),
+ TabPanel({
+ id: "params",
+ title: PARAMS_TITLE,
+ },
+ ParamsPanel({ request }),
+ ),
+ TabPanel({
+ id: "response",
+ title: RESPONSE_TITLE,
+ },
+ ResponsePanel({ request }),
+ ),
+ TabPanel({
+ id: "timings",
+ title: TIMINGS_TITLE,
+ },
+ TimingsPanel({ request }),
+ ),
+ request.securityState && request.securityState !== "insecure" &&
+ TabPanel({
+ id: "security",
+ title: SECURITY_TITLE,
+ },
+ SecurityPanel({ request }),
+ ),
+ Filters.html(request) &&
+ TabPanel({
+ id: "preview",
+ title: PREVIEW_TITLE,
+ },
+ PreviewPanel({ request }),
+ ),
+ )
+ );
+}
+
+TabboxPanel.displayName = "TabboxPanel";
+
+TabboxPanel.propTypes = {
+ activeTabId: PropTypes.string,
+ cloneSelectedRequest: PropTypes.func.isRequired,
+ request: PropTypes.object,
+ selectTab: PropTypes.func.isRequired,
+ toolbox: PropTypes.object.isRequired,
+};
+
+module.exports = connect(
+ (state) => ({
+ activeTabId: state.ui.detailsPanelSelectedTab,
+ request: getSelectedRequest(state),
+ }),
+ (dispatch) => ({
+ cloneSelectedRequest: () => dispatch(Actions.cloneSelectedRequest()),
+ selectTab: (tabId) => dispatch(Actions.selectDetailsPanelTab(tabId)),
+ }),
+)(TabboxPanel);
deleted file mode 100644
--- a/devtools/client/netmonitor/sidebar-view.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/* 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, $, NetMonitorView */
-
-"use strict";
-
-const { Task } = require("devtools/shared/task");
-const { EVENTS } = require("./events");
-
-/**
- * Functions handling the sidebar details view.
- */
-function SidebarView() {
- dumpn("SidebarView was instantiated");
-}
-
-SidebarView.prototype = {
- /**
- * Sets this view hidden or visible. It's visible by default.
- *
- * @param boolean visibleFlag
- * Specifies the intended visibility.
- */
- toggle: function (visibleFlag) {
- NetMonitorView.toggleDetailsPane({ visible: visibleFlag });
- },
-
- /**
- * Populates this view with the specified data.
- *
- * @param object data
- * The data source (this should be the attachment of a request item).
- * @return object
- * Returns a promise that resolves upon population of the subview.
- */
- populate: Task.async(function* (data) {
- let isCustom = data.isCustom;
-
- $("#details-pane").selectedIndex = isCustom ? 0 : 1;
-
- window.emit(EVENTS.SIDEBAR_POPULATED);
- })
-
-};
-
-exports.SidebarView = SidebarView;
--- a/devtools/client/netmonitor/test/browser.ini
+++ b/devtools/client/netmonitor/test/browser.ini
@@ -123,16 +123,17 @@ skip-if = (os == 'linux' && debug && bit
[browser_net_pane-collapse.js]
[browser_net_pane-toggle.js]
[browser_net_post-data-01.js]
[browser_net_post-data-02.js]
[browser_net_post-data-03.js]
[browser_net_post-data-04.js]
[browser_net_prefs-and-l10n.js]
[browser_net_prefs-reload.js]
+skip-if = true # bug 1309183, it should be fixed by SplitBox support
[browser_net_raw_headers.js]
[browser_net_reload-button.js]
[browser_net_reload-markers.js]
[browser_net_req-resp-bodies.js]
[browser_net_resend_cors.js]
[browser_net_resend_headers.js]
[browser_net_resend.js]
[browser_net_security-details.js]
--- a/devtools/client/netmonitor/test/browser_net_accessibility-01.js
+++ b/devtools/client/netmonitor/test/browser_net_accessibility-01.js
@@ -9,31 +9,31 @@
add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
info("Starting test... ");
// It seems that this test may be slow on Ubuntu builds running on ec2.
requestLongerTimeout(2);
- let { NetMonitorView, gStore, windowRequire } = monitor.panelWin;
+ let { document, NetMonitorView, gStore, windowRequire } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
RequestsMenu.lazyUpdate = false;
let Actions = windowRequire("devtools/client/netmonitor/actions/index");
let count = 0;
- function check(selectedIndex, paneVisibility) {
+ function check(selectedIndex, panelVisibility) {
info("Performing check " + (count++) + ".");
is(RequestsMenu.selectedIndex, selectedIndex,
"The selected item in the requests menu was incorrect.");
- is(NetMonitorView.detailsPaneHidden, !paneVisibility,
- "The network requests details pane visibility state was incorrect.");
+ is(!!document.querySelector(".network-details-panel"), panelVisibility,
+ "The network details panel should render correctly.");
}
let wait = waitForNetworkEvents(monitor, 2);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
content.wrappedJSObject.performRequests(2);
});
yield wait;
--- a/devtools/client/netmonitor/test/browser_net_accessibility-02.js
+++ b/devtools/client/netmonitor/test/browser_net_accessibility-02.js
@@ -9,38 +9,38 @@
add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
info("Starting test... ");
// It seems that this test may be slow on Ubuntu builds running on ec2.
requestLongerTimeout(2);
- let { window, $, NetMonitorView } = monitor.panelWin;
+ let { window, document, NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
RequestsMenu.lazyUpdate = false;
let count = 0;
- function check(selectedIndex, paneVisibility) {
+ function check(selectedIndex, panelVisibility) {
info("Performing check " + (count++) + ".");
is(RequestsMenu.selectedIndex, selectedIndex,
"The selected item in the requests menu was incorrect.");
- is(NetMonitorView.detailsPaneHidden, !paneVisibility,
- "The network requests details pane visibility state was incorrect.");
+ is(!!document.querySelector(".network-details-panel"), panelVisibility,
+ "The network details panel should render correctly.");
}
let wait = waitForNetworkEvents(monitor, 2);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
content.wrappedJSObject.performRequests(2);
});
yield wait;
- $(".requests-menu-contents").focus();
+ document.querySelector(".requests-menu-contents").focus();
check(-1, false);
EventUtils.sendKey("DOWN", window);
check(0, true);
EventUtils.sendKey("UP", window);
check(0, true);
@@ -117,13 +117,14 @@ add_task(function* () {
check(0, true);
EventUtils.sendKey("DOWN", window);
check(1, true);
EventUtils.sendKey("END", window);
check(19, true);
EventUtils.sendKey("DOWN", window);
check(19, true);
- EventUtils.sendMouseEvent({ type: "mousedown" }, $(".request-list-item"));
+ EventUtils.sendMouseEvent({ type: "mousedown" },
+ document.querySelector(".request-list-item"));
check(0, true);
yield teardown(monitor);
});
--- a/devtools/client/netmonitor/test/browser_net_brotli.js
+++ b/devtools/client/netmonitor/test/browser_net_brotli.js
@@ -35,17 +35,17 @@ add_task(function* () {
fullMimeType: "text/plain",
transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 10),
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 64),
time: true
});
wait = waitForDOM(document, "#response-panel .editor-mount iframe");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
document.querySelector("#response-tab").click();
let [editorFrame] = yield wait;
yield once(editorFrame, "DOMContentLoaded");
yield waitForDOM(editorFrame.contentDocument, ".CodeMirror-code");
yield testResponse("br");
yield teardown(monitor);
--- a/devtools/client/netmonitor/test/browser_net_clear.js
+++ b/devtools/client/netmonitor/test/browser_net_clear.js
@@ -6,26 +6,25 @@
/**
* Tests if the clear button empties the request menu.
*/
add_task(function* () {
let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
info("Starting test... ");
- let { $, NetMonitorView } = monitor.panelWin;
+ let { document, NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
- let detailsPane = $("#details-pane");
- let detailsPaneToggleButton = $("#details-pane-toggle");
- let clearButton = $("#requests-menu-clear-button");
+ let detailsPanelToggleButton = document.querySelector(".network-details-panel-toggle");
+ let clearButton = document.querySelector("#requests-menu-clear-button");
RequestsMenu.lazyUpdate = false;
// Make sure we start in a sane state
- assertNoRequestState(RequestsMenu, detailsPaneToggleButton);
+ assertNoRequestState(RequestsMenu, detailsPanelToggleButton);
// Load one request and assert it shows up in the list
let networkEvent = monitor.panelWin.once(monitor.panelWin.EVENTS.NETWORK_EVENT);
tab.linkedBrowser.reload();
yield networkEvent;
assertSingleRequestState();
@@ -35,43 +34,44 @@ add_task(function* () {
// Load a second request and make sure they still show up
networkEvent = monitor.panelWin.once(monitor.panelWin.EVENTS.NETWORK_EVENT);
tab.linkedBrowser.reload();
yield networkEvent;
assertSingleRequestState();
- // Make sure we can now open the details pane
- NetMonitorView.toggleDetailsPane({ visible: true, animated: false });
- ok(!detailsPane.classList.contains("pane-collapsed") &&
- !detailsPaneToggleButton.classList.contains("pane-collapsed"),
+ // Make sure we can now open the network details panel
+ EventUtils.sendMouseEvent({ type: "mousedown" }, detailsPanelToggleButton);
+
+ ok(document.querySelector(".network-details-panel") &&
+ !detailsPanelToggleButton.classList.contains("pane-collapsed"),
"The details pane should be visible after clicking the toggle button.");
// Click clear and make sure the details pane closes
EventUtils.sendMouseEvent({ type: "click" }, clearButton);
assertNoRequestState();
- ok(detailsPane.classList.contains("pane-collapsed") &&
- detailsPaneToggleButton.classList.contains("pane-collapsed"),
+ ok(!document.querySelector(".network-details-panel") &&
+ detailsPanelToggleButton.classList.contains("pane-collapsed"),
"The details pane should not be visible clicking 'clear'.");
return teardown(monitor);
/**
* Asserts the state of the network monitor when one request has loaded
*/
function assertSingleRequestState() {
is(RequestsMenu.itemCount, 1,
"The request menu should have one item at this point.");
- is(detailsPaneToggleButton.hasAttribute("disabled"), false,
+ is(detailsPanelToggleButton.hasAttribute("disabled"), false,
"The pane toggle button should be enabled after a request is made.");
}
/**
* Asserts the state of the network monitor when no requests have loaded
*/
function assertNoRequestState() {
is(RequestsMenu.itemCount, 0,
"The request menu should be empty at this point.");
- is(detailsPaneToggleButton.hasAttribute("disabled"), true,
+ is(detailsPanelToggleButton.hasAttribute("disabled"), true,
"The pane toggle button should be disabled when the request menu is cleared.");
}
});
--- a/devtools/client/netmonitor/test/browser_net_complex-params.js
+++ b/devtools/client/netmonitor/test/browser_net_complex-params.js
@@ -22,17 +22,17 @@ add_task(function* () {
let wait = waitForNetworkEvents(monitor, 1, 6);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
content.wrappedJSObject.performRequests();
});
yield wait;
wait = waitForDOM(document, "#params-panel .tree-section", 2);
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ 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);
RequestsMenu.selectedIndex = 1;
yield wait;
testParamsTab1("a", '"b"', '{ "foo": "bar" }', '""');
@@ -56,19 +56,17 @@ add_task(function* () {
let waitSections = waitForDOM(document, "#params-panel .tree-section", 2);
let waitEditor = waitForDOM(document, "#params-panel .editor-mount iframe");
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");
- wait = waitForDOM(document, "#params-panel .empty-notice");
RequestsMenu.selectedIndex = 6;
- yield wait;
testParamsTab3();
yield teardown(monitor);
function testParamsTab1(queryStringParamName, queryStringParamValue,
formDataParamName, formDataParamValue) {
let tabpanel = document.querySelector("#params-panel");
--- a/devtools/client/netmonitor/test/browser_net_cyrillic-01.js
+++ b/devtools/client/netmonitor/test/browser_net_cyrillic-01.js
@@ -25,17 +25,17 @@ add_task(function* () {
verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
"GET", CONTENT_TYPE_SJS + "?fmt=txt", {
status: 200,
statusText: "DA DA DA"
});
wait = waitForDOM(document, "#response-panel .editor-mount iframe");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ 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");
let text = editor.contentDocument
.querySelector(".CodeMirror-line").textContent;
ok(text.includes("\u0411\u0440\u0430\u0442\u0430\u043d"),
--- a/devtools/client/netmonitor/test/browser_net_cyrillic-02.js
+++ b/devtools/client/netmonitor/test/browser_net_cyrillic-02.js
@@ -24,17 +24,17 @@ add_task(function* () {
verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
"GET", CYRILLIC_URL, {
status: 200,
statusText: "OK"
});
wait = waitForDOM(document, "#response-panel .editor-mount iframe");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ 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");
let text = editor.contentDocument
.querySelector(".CodeMirror-code").textContent;
ok(text.includes("\u0411\u0440\u0430\u0442\u0430\u043d"),
--- a/devtools/client/netmonitor/test/browser_net_filter-01.js
+++ b/devtools/client/netmonitor/test/browser_net_filter-01.js
@@ -135,156 +135,189 @@ add_task(function* () {
let { gStore } = monitor.panelWin;
function setFreetextFilter(value) {
gStore.dispatch(Actions.setRequestFilterText(value));
}
info("Starting test... ");
- let { $, NetMonitorView } = monitor.panelWin;
+ 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" }, $("#details-pane-toggle"));
+ 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(NetMonitorView.detailsPaneHidden, false,
- "The details pane should not be hidden after toggle button was pressed.");
+ is(!!document.querySelector(".network-details-panel"), true,
+ "The network details panel should render correctly.");
// First test with single filters...
testFilterButtons(monitor, "all");
testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-html-button"));
testFilterButtons(monitor, "html");
testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
// Reset filters
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-css-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-css-button"));
testFilterButtons(monitor, "css");
testContents([0, 1, 0, 0, 0, 0, 0, 0, 0]);
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-js-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-js-button"));
testFilterButtons(monitor, "js");
testContents([0, 0, 1, 0, 0, 0, 0, 0, 0]);
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-xhr-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-xhr-button"));
testFilterButtons(monitor, "xhr");
testContents([1, 1, 1, 1, 1, 1, 1, 1, 0]);
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-fonts-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-fonts-button"));
testFilterButtons(monitor, "fonts");
testContents([0, 0, 0, 1, 0, 0, 0, 0, 0]);
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-images-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-images-button"));
testFilterButtons(monitor, "images");
testContents([0, 0, 0, 0, 1, 0, 0, 0, 0]);
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-media-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-media-button"));
testFilterButtons(monitor, "media");
testContents([0, 0, 0, 0, 0, 1, 1, 0, 0]);
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-flash-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-flash-button"));
testFilterButtons(monitor, "flash");
testContents([0, 0, 0, 0, 0, 0, 0, 1, 0]);
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-ws-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-ws-button"));
testFilterButtons(monitor, "ws");
testContents([0, 0, 0, 0, 0, 0, 0, 0, 1]);
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
testFilterButtons(monitor, "all");
testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
// Text in filter box that matches nothing should hide all.
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
setFreetextFilter("foobar");
testContents([0, 0, 0, 0, 0, 0, 0, 0, 0]);
// Text in filter box that matches should filter out everything else.
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
setFreetextFilter("sample");
testContents([1, 1, 1, 0, 0, 0, 0, 0, 0]);
// Text in filter box that matches should filter out everything else.
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
setFreetextFilter("SAMPLE");
testContents([1, 1, 1, 0, 0, 0, 0, 0, 0]);
// Test negative filtering (only show unmatched items)
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
setFreetextFilter("-sample");
testContents([0, 0, 0, 1, 1, 1, 1, 1, 1]);
// ...then combine multiple filters together.
// Enable filtering for html and css; should show request of both type.
setFreetextFilter("");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-css-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-html-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-css-button"));
testFilterButtonsCustom(monitor, [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
testContents([1, 1, 0, 0, 0, 0, 0, 0, 0]);
// Html and css filter enabled and text filter should show just the html and css match.
// Should not show both the items matching the button plus the items matching the text.
setFreetextFilter("sample");
testContents([1, 1, 0, 0, 0, 0, 0, 0, 0]);
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-flash-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-flash-button"));
setFreetextFilter("");
testFilterButtonsCustom(monitor, [0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0]);
testContents([1, 1, 0, 0, 0, 0, 0, 1, 0]);
// Disable some filters. Only one left active.
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-css-button"));
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-flash-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-css-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-flash-button"));
testFilterButtons(monitor, "html");
testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
// Disable last active filter. Should toggle to all.
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-html-button"));
testFilterButtons(monitor, "all");
testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
// Enable few filters and click on all. Only "all" should be checked.
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-css-button"));
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-ws-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-html-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-css-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-ws-button"));
testFilterButtonsCustom(monitor, [0, 1, 1, 0, 0, 0, 0, 0, 0, 1]);
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
testFilterButtons(monitor, "all");
testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
yield teardown(monitor);
function testContents(visibility) {
isnot(RequestsMenu.selectedItem, null,
"There should still be a selected item after filtering.");
is(RequestsMenu.selectedIndex, 0,
"The first item should be still selected after filtering.");
- is(NetMonitorView.detailsPaneHidden, false,
- "The details pane should still be visible after filtering.");
+ is(!!document.querySelector(".network-details-panel"), true,
+ "The network details panel should render correctly.");
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.");
is(visibleItems.size, visibility.filter(e => e).length,
"There should be a specific amount of visible items in the requests menu.");
--- a/devtools/client/netmonitor/test/browser_net_filter-02.js
+++ b/devtools/client/netmonitor/test/browser_net_filter-02.js
@@ -131,40 +131,42 @@ const EXPECTED_REQUESTS = [
add_task(function* () {
let { monitor } = yield initNetMonitor(FILTERING_URL);
info("Starting test... ");
// It seems that this test may be slow on Ubuntu builds running on ec2.
requestLongerTimeout(2);
- let { $, NetMonitorView } = monitor.panelWin;
+ 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" }, $("#details-pane-toggle"));
+ 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(NetMonitorView.detailsPaneHidden, false,
- "The details pane should not be hidden after toggle button was pressed.");
+ is(!!document.querySelector(".network-details-panel"), true,
+ "The network details panel should be visible after toggle button was pressed.");
testFilterButtons(monitor, "all");
testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
info("Testing html filtering.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-html-button"));
testFilterButtons(monitor, "html");
testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
info("Performing more requests.");
wait = waitForNetworkEvents(monitor, 9);
yield performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS);
yield wait;
@@ -178,30 +180,31 @@ add_task(function* () {
yield wait;
info("Testing html filtering again.");
testFilterButtons(monitor, "html");
testContents([1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0,
0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
info("Resetting filters.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-all-button"));
testFilterButtons(monitor, "all");
testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
yield teardown(monitor);
function testContents(visibility) {
isnot(RequestsMenu.selectedItem, null,
"There should still be a selected item after filtering.");
is(RequestsMenu.selectedIndex, 0,
"The first item should be still selected after filtering.");
- is(NetMonitorView.detailsPaneHidden, false,
- "The details pane should still be visible after filtering.");
+ is(!!document.querySelector(".network-details-panel"), true,
+ "The network details panel should still be visible after filtering.");
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.");
is(visibleItems.size, visibility.filter(e => e).length,
"There should be a specific amount of visible items in the requests menu.");
--- a/devtools/client/netmonitor/test/browser_net_filter-03.js
+++ b/devtools/client/netmonitor/test/browser_net_filter-03.js
@@ -22,52 +22,55 @@ const REQUESTS_WITH_MEDIA = BASIC_REQUES
add_task(function* () {
let { monitor } = yield initNetMonitor(FILTERING_URL);
info("Starting test... ");
// It seems that this test may be slow on Ubuntu builds running on ec2.
requestLongerTimeout(2);
- let { $, NetMonitorView } = monitor.panelWin;
+ let { document, NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
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.
let requests = Cu.cloneInto(REQUESTS_WITH_MEDIA, {});
let newres = "res=<p>" + new Array(10).join(Math.random(10)) + "</p>";
requests[0].url = requests[0].url.replace("res=undefined", newres);
loadCommonFrameScript();
let wait = waitForNetworkEvents(monitor, 7);
yield performRequestsInContent(requests);
yield wait;
- EventUtils.sendMouseEvent({ type: "mousedown" }, $("#details-pane-toggle"));
+ 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(NetMonitorView.detailsPaneHidden, false,
- "The details pane should not be hidden after toggle button was pressed.");
+ is(!!document.querySelector(".network-details-panel"), true,
+ "The network details panel should be visible after toggle button was pressed.");
testFilterButtons(monitor, "all");
testContents([0, 1, 2, 3, 4, 5, 6], 7, 0);
info("Sorting by size, ascending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-size-button"));
testFilterButtons(monitor, "all");
testContents([6, 4, 5, 0, 1, 2, 3], 7, 6);
info("Testing html filtering.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-filter-html-button"));
testFilterButtons(monitor, "html");
testContents([6, 4, 5, 0, 1, 2, 3], 1, 6);
info("Performing more requests.");
wait = waitForNetworkEvents(monitor, 7);
performRequestsInContent(REQUESTS_WITH_MEDIA);
yield wait;
@@ -84,26 +87,28 @@ add_task(function* () {
resetSorting();
testFilterButtons(monitor, "html");
testContents([12, 13, 20, 14, 16, 18, 15, 17, 19, 0, 4, 8, 1, 5, 9, 2, 6, 10, 3, 7, 11],
3, 20);
yield teardown(monitor);
function resetSorting() {
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-waterfall-button"));
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-waterfall-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-size-button"));
}
function testContents(order, visible, selection) {
isnot(RequestsMenu.selectedItem, null,
"There should still be a selected item after filtering.");
is(RequestsMenu.selectedIndex, selection,
"The first item should be still selected after filtering.");
- is(NetMonitorView.detailsPaneHidden, false,
- "The details pane should still be visible after filtering.");
+ is(!!document.querySelector(".network-details-panel"), true,
+ "The network details panel should still be visible after filtering.");
is(RequestsMenu.items.length, order.length,
"There should be a specific amount of items in the requests menu.");
is(RequestsMenu.visibleItems.length, visible,
"There should be a specific amount of visible items in the requests menu.");
}
});
--- a/devtools/client/netmonitor/test/browser_net_html-preview.js
+++ b/devtools/client/netmonitor/test/browser_net_html-preview.js
@@ -18,39 +18,38 @@ add_task(function* () {
let wait = waitForNetworkEvents(monitor, 6);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
content.wrappedJSObject.performRequests();
});
yield wait;
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
ok(document.querySelector("#headers-tab[aria-selected=true]"),
"The headers tab in the details panel should be selected.");
ok(!document.querySelector("#preview-tab"),
"The preview tab should be hidden for non html responses.");
ok(!document.querySelector("#preview-panel"),
"The preview panel is hidden for non html responses.");
- wait = waitForDOM(document, ".tabs");
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[4]);
- yield wait;
-
document.querySelector("#preview-tab").click();
ok(document.querySelector("#preview-tab[aria-selected=true]"),
"The preview tab in the details panel should be selected.");
ok(document.querySelector("#preview-panel"),
"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.");
ok(iframe.contentDocument,
"The iframe's content document should be available.");
is(iframe.contentDocument.querySelector("blink").textContent, "Not Found",
"The iframe's content document should be loaded and correct.");
--- a/devtools/client/netmonitor/test/browser_net_json-b64.js
+++ b/devtools/client/netmonitor/test/browser_net_json-b64.js
@@ -20,17 +20,17 @@ add_task(function* () {
let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
content.wrappedJSObject.performRequests();
});
yield wait;
wait = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
document.querySelector("#response-tab").click();
yield wait;
let tabpanel = document.querySelector("#response-panel");
is(tabpanel.querySelector(".response-error-header") === null, true,
"The response error header doesn't have the intended visibility.");
let jsonView = tabpanel.querySelector(".tree-section .treeLabel") || {};
--- a/devtools/client/netmonitor/test/browser_net_json-long.js
+++ b/devtools/client/netmonitor/test/browser_net_json-long.js
@@ -36,17 +36,17 @@ add_task(function* () {
fullMimeType: "text/json; charset=utf-8",
size: L10N.getFormatStr("networkMenu.sizeKB",
L10N.numberWithDecimals(85975 / 1024, 2)),
time: true
});
wait = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
document.querySelector("#response-tab").click();
yield wait;
testResponseTab();
yield teardown(monitor);
function testResponseTab() {
--- a/devtools/client/netmonitor/test/browser_net_json-malformed.js
+++ b/devtools/client/netmonitor/test/browser_net_json-malformed.js
@@ -28,17 +28,17 @@ add_task(function* () {
status: 200,
statusText: "OK",
type: "json",
fullMimeType: "text/json; charset=utf-8"
});
wait = waitForDOM(document, "#response-panel .editor-mount iframe");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ 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");
let tabpanel = document.querySelector("#response-panel");
is(tabpanel.querySelector(".response-error-header") === null, false,
"The response error header doesn't have the intended visibility.");
--- a/devtools/client/netmonitor/test/browser_net_json-null.js
+++ b/devtools/client/netmonitor/test/browser_net_json-null.js
@@ -62,17 +62,17 @@ function checkResponsePanelDisplaysJSON(
is(tabpanel.querySelector(".response-image-box") === null, true,
"The response image box doesn't have the intended visibility.");
}
/**
* Open the netmonitor details panel and switch to the response tab.
* Returns a promise that will resolve when the response panel DOM element is available.
*/
-function openResponsePanel(doc) {
- let onReponsePanelReady = waitForDOM(doc, "#response-panel");
+function openResponsePanel(document) {
+ let onReponsePanelReady = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent(
{ type: "mousedown" },
- doc.getElementById("details-pane-toggle")
+ document.querySelector(".network-details-panel-toggle")
);
- doc.querySelector("#response-tab").click();
+ document.querySelector("#response-tab").click();
return onReponsePanelReady;
}
--- a/devtools/client/netmonitor/test/browser_net_json_custom_mime.js
+++ b/devtools/client/netmonitor/test/browser_net_json_custom_mime.js
@@ -31,17 +31,17 @@ add_task(function* () {
type: "x-bigcorp-json",
fullMimeType: "text/x-bigcorp-json; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 41),
time: true
});
wait = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
document.querySelector("#response-tab").click();
yield wait;
testResponseTab();
yield teardown(monitor);
function testResponseTab() {
--- a/devtools/client/netmonitor/test/browser_net_json_text_mime.js
+++ b/devtools/client/netmonitor/test/browser_net_json_text_mime.js
@@ -31,17 +31,17 @@ add_task(function* () {
type: "plain",
fullMimeType: "text/plain; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 41),
time: true
});
wait = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
document.querySelector("#response-tab").click();
yield wait;
testResponseTab();
yield teardown(monitor);
function testResponseTab() {
--- a/devtools/client/netmonitor/test/browser_net_jsonp.js
+++ b/devtools/client/netmonitor/test/browser_net_jsonp.js
@@ -40,17 +40,17 @@ add_task(function* () {
type: "json",
fullMimeType: "text/json; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 54),
time: true
});
wait = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
document.querySelector("#response-tab").click();
yield wait;
testResponseTab("$_0123Fun", "\"Hello JSONP!\"");
wait = waitForDOM(document, "#response-panel .tree-section");
RequestsMenu.selectedIndex = 1;
yield wait;
--- a/devtools/client/netmonitor/test/browser_net_large-response.js
+++ b/devtools/client/netmonitor/test/browser_net_large-response.js
@@ -31,17 +31,17 @@ add_task(function* () {
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: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
document.querySelector("#response-tab").click();
let [editor] = yield waitDOM;
yield once(editor, "DOMContentLoaded");
yield waitForDOM(editor.contentDocument, ".CodeMirror-code");
let text = editor.contentDocument
.querySelector(".CodeMirror-line").textContent;
--- a/devtools/client/netmonitor/test/browser_net_pane-collapse.js
+++ b/devtools/client/netmonitor/test/browser_net_pane-collapse.js
@@ -3,70 +3,48 @@
"use strict";
/**
* Tests if the network monitor panes collapse properly.
*/
add_task(function* () {
- let { monitor } = yield initNetMonitor(SIMPLE_URL);
+ let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
info("Starting test... ");
- let { document, Prefs, NetMonitorView } = monitor.panelWin;
- let detailsPane = document.getElementById("details-pane");
- let detailsPaneToggleButton = document.getElementById("details-pane-toggle");
-
- ok(detailsPane.classList.contains("pane-collapsed") &&
- detailsPaneToggleButton.classList.contains("pane-collapsed"),
- "The details pane should initially be hidden.");
-
- NetMonitorView.toggleDetailsPane({ visible: true, animated: false });
+ let { document, Prefs } = monitor.panelWin;
+ let detailsPaneToggleButton = document.querySelector(".network-details-panel-toggle");
- let width = ~~(detailsPane.getAttribute("width"));
- is(width, Prefs.networkDetailsWidth,
- "The details pane has an incorrect width.");
- is(detailsPane.style.marginLeft, "0px",
- "The details pane has an incorrect left margin.");
- is(detailsPane.style.marginRight, "0px",
- "The details pane has an incorrect right margin.");
- ok(!detailsPane.hasAttribute("animated"),
- "The details pane has an incorrect animated attribute.");
- ok(!detailsPane.classList.contains("pane-collapsed") &&
- !detailsPaneToggleButton.classList.contains("pane-collapsed"),
- "The details pane should at this point be visible.");
+ let wait = waitForNetworkEvents(monitor, 1);
+ tab.linkedBrowser.reload();
+ yield wait;
- // Trigger reflow to make sure the UI is in required state.
- document.documentElement.getBoundingClientRect();
+ ok(!document.querySelector(".network-details-panel") &&
+ detailsPaneToggleButton.classList.contains("pane-collapsed"),
+ "The details panel should initially be hidden.");
- NetMonitorView.toggleDetailsPane({ visible: false, animated: true });
+ EventUtils.sendMouseEvent({ type: "mousedown" }, detailsPaneToggleButton);
- yield once(detailsPane, "transitionend");
+ is(~~(document.querySelector(".network-details-panel").clientWidth),
+ Prefs.networkDetailsWidth,
+ "The details panel has an incorrect width.");
+ ok(document.querySelector(".network-details-panel") &&
+ !detailsPaneToggleButton.classList.contains("pane-collapsed"),
+ "The details panel should at this point be visible.");
- let margin = -(width + 1) + "px";
- is(width, Prefs.networkDetailsWidth,
- "The details pane has an incorrect width after collapsing.");
- is(detailsPane.style.marginLeft, margin,
- "The details pane has an incorrect left margin after collapsing.");
- is(detailsPane.style.marginRight, margin,
- "The details pane has an incorrect right margin after collapsing.");
- ok(!detailsPane.hasAttribute("animated"),
- "The details pane has an incorrect attribute after an animated collapsing.");
- ok(detailsPane.classList.contains("pane-collapsed") &&
+ EventUtils.sendMouseEvent({ type: "mousedown" }, detailsPaneToggleButton);
+
+ ok(!document.querySelector(".network-details-panel") &&
detailsPaneToggleButton.classList.contains("pane-collapsed"),
- "The details pane should not be visible after collapsing.");
+ "The details panel should not be visible after collapsing.");
- NetMonitorView.toggleDetailsPane({ visible: true, animated: false });
+ EventUtils.sendMouseEvent({ type: "mousedown" }, detailsPaneToggleButton);
- is(width, Prefs.networkDetailsWidth,
- "The details pane has an incorrect width after uncollapsing.");
- is(detailsPane.style.marginLeft, "0px",
- "The details pane has an incorrect left margin after uncollapsing.");
- is(detailsPane.style.marginRight, "0px",
- "The details pane has an incorrect right margin after uncollapsing.");
- ok(!detailsPane.hasAttribute("animated"),
- "The details pane has an incorrect attribute after an unanimated uncollapsing.");
- ok(!detailsPane.classList.contains("pane-collapsed") &&
+ is(~~(document.querySelector(".network-details-panel").clientWidth),
+ Prefs.networkDetailsWidth,
+ "The details panel has an incorrect width after uncollapsing.");
+ ok(document.querySelector(".network-details-panel") &&
!detailsPaneToggleButton.classList.contains("pane-collapsed"),
- "The details pane should be visible again after uncollapsing.");
+ "The details panel should be visible again after uncollapsing.");
yield teardown(monitor);
});
--- a/devtools/client/netmonitor/test/browser_net_pane-toggle.js
+++ b/devtools/client/netmonitor/test/browser_net_pane-toggle.js
@@ -11,64 +11,62 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
info("Starting test... ");
let { document, NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
let { NETWORK_EVENT } = monitor.panelWin.EVENTS;
RequestsMenu.lazyUpdate = false;
- let toggleButton = document.querySelector("#details-pane-toggle");
+ let toggleButton = document.querySelector(".network-details-panel-toggle");
is(toggleButton.hasAttribute("disabled"), true,
"The pane toggle button should be disabled when the frontend is opened.");
is(toggleButton.classList.contains("pane-collapsed"), true,
"The pane toggle button should indicate that the details pane is " +
"collapsed when the frontend is opened.");
- is(NetMonitorView.detailsPaneHidden, true,
+ is(!!document.querySelector(".network-details-panel"), false,
"The details pane should be hidden when the frontend is opened.");
is(RequestsMenu.selectedItem, null,
"There should be no selected item in the requests menu.");
let networkEvent = monitor.panelWin.once(NETWORK_EVENT);
tab.linkedBrowser.reload();
yield networkEvent;
is(toggleButton.hasAttribute("disabled"), false,
"The pane toggle button should be enabled after the first request.");
is(toggleButton.classList.contains("pane-collapsed"), true,
"The pane toggle button should still indicate that the details pane is " +
"collapsed after the first request.");
- is(NetMonitorView.detailsPaneHidden, true,
+ is(!!document.querySelector(".network-details-panel"), false,
"The details pane should still be hidden after the first request.");
is(RequestsMenu.selectedItem, null,
"There should still be no selected item in the requests menu.");
- wait = waitForDOM(document, ".panel-container");
EventUtils.sendMouseEvent({ type: "mousedown" }, toggleButton);
- yield wait;
is(toggleButton.hasAttribute("disabled"), false,
"The pane toggle button should still be enabled after being pressed.");
is(toggleButton.classList.contains("pane-collapsed"), false,
"The pane toggle button should now indicate that the details pane is " +
"not collapsed anymore after being pressed.");
- is(NetMonitorView.detailsPaneHidden, false,
+ is(!!document.querySelector(".network-details-panel"), true,
"The details pane should not be hidden after toggle button was pressed.");
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.");
EventUtils.sendMouseEvent({ type: "mousedown" }, toggleButton);
is(toggleButton.hasAttribute("disabled"), false,
"The pane toggle button should still be enabled after being pressed again.");
is(toggleButton.classList.contains("pane-collapsed"), true,
"The pane toggle button should now indicate that the details pane is " +
"collapsed after being pressed again.");
- is(NetMonitorView.detailsPaneHidden, true,
+ is(!!document.querySelector(".network-details-panel"), false,
"The details pane should now be hidden after the toggle button was pressed again.");
is(RequestsMenu.selectedItem, null,
"There should now be no selected item in the requests menu.");
yield teardown(monitor);
});
--- a/devtools/client/netmonitor/test/browser_net_post-data-01.js
+++ b/devtools/client/netmonitor/test/browser_net_post-data-01.js
@@ -44,17 +44,17 @@ add_task(function* () {
fullMimeType: "text/plain; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12),
time: true
});
// Wait for all tree sections updated by react
wait = waitForDOM(document, "#params-panel .tree-section", 2);
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ 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");
RequestsMenu.selectedIndex = 1;
--- a/devtools/client/netmonitor/test/browser_net_post-data-02.js
+++ b/devtools/client/netmonitor/test/browser_net_post-data-02.js
@@ -23,17 +23,17 @@ add_task(function* () {
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
content.wrappedJSObject.performRequests();
});
yield wait;
// Wait for all tree view updated by react
wait = waitForDOM(document, "#params-panel .tree-section");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
document.querySelector("#params-tab").click();
yield wait;
let tabpanel = document.querySelector("#params-panel");
ok(tabpanel.querySelector(".treeTable"),
"The request params doesn't have the indended visibility.");
ok(tabpanel.querySelector(".editor-mount") === null,
--- a/devtools/client/netmonitor/test/browser_net_post-data-03.js
+++ b/devtools/client/netmonitor/test/browser_net_post-data-03.js
@@ -23,17 +23,17 @@ add_task(function* () {
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
content.wrappedJSObject.performRequests();
});
yield wait;
// Wait for all tree view updated by react
wait = waitForDOM(document, "#headers-panel");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
document.querySelector("#headers-tab").click();
yield wait;
let tabpanel = document.querySelector("#headers-panel");
is(tabpanel.querySelectorAll(".tree-section .treeLabel").length, 3,
"There should be 3 header sections displayed in this tabpanel.");
--- a/devtools/client/netmonitor/test/browser_net_post-data-04.js
+++ b/devtools/client/netmonitor/test/browser_net_post-data-04.js
@@ -23,17 +23,17 @@ add_task(function* () {
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
content.wrappedJSObject.performRequests();
});
yield wait;
// Wait for all tree view updated by react
wait = waitForDOM(document, "#params-panel .tree-section");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
document.querySelector("#params-tab").click();
yield wait;
let tabpanel = document.querySelector("#params-panel");
ok(tabpanel.querySelector(".treeTable"),
"The request params doesn't have the indended visibility.");
ok(tabpanel.querySelector(".editor-mount") === null,
--- a/devtools/client/netmonitor/test/browser_net_prefs-reload.js
+++ b/devtools/client/netmonitor/test/browser_net_prefs-reload.js
@@ -7,143 +7,148 @@
* Tests if the prefs that should survive across tool reloads work.
*/
add_task(function* () {
let Actions = require("devtools/client/netmonitor/actions/index");
let { getActiveFilters } = require("devtools/client/netmonitor/selectors/index");
let { monitor } = yield initNetMonitor(SIMPLE_URL);
+ let { document, gStore, Prefs } = monitor.panelWin;
info("Starting test... ");
// This test reopens the network monitor a bunch of times, for different
// hosts (bottom, side, window). This seems to be slow on debug builds.
requestLongerTimeout(3);
// Use these getters instead of caching instances inside the panel win,
// since the tool is reopened a bunch of times during this test
// and the instances will differ.
- let getStore = () => monitor.panelWin.gStore;
+ let getStore = () => gStore;
let getState = () => getStore().getState();
let prefsToCheck = {
filters: {
// A custom new value to be used for the verified preference.
newValue: ["html", "css"],
// Getter used to retrieve the current value from the frontend, in order
// to verify that the pref was applied properly.
- validateValue: ($) => getActiveFilters(getState()),
+ validateValue: () => getActiveFilters(getState()),
// Predicate used to modify the frontend when setting the new pref value,
// before trying to validate the changes.
- modifyFrontend: ($, value) => value.forEach(e =>
+ modifyFrontend: (value) => value.forEach(e =>
getStore().dispatch(Actions.toggleRequestFilterType(e)))
},
networkDetailsWidth: {
newValue: ~~(Math.random() * 200 + 100),
- validateValue: ($) => ~~$("#details-pane").getAttribute("width"),
- modifyFrontend: ($, value) => $("#details-pane").setAttribute("width", value)
+ validateValue: () =>
+ ~~document.querySelector(".network-details-panel").getAttribute("width"),
+ modifyFrontend: (value) =>
+ document.querySelector(".network-details-panel").setAttribute("width", value)
},
networkDetailsHeight: {
newValue: ~~(Math.random() * 300 + 100),
- validateValue: ($) => ~~$("#details-pane").getAttribute("height"),
- modifyFrontend: ($, value) => $("#details-pane").setAttribute("height", value)
+ validateValue: () =>
+ ~~document.querySelector(".network-details-panel").getAttribute("height"),
+ modifyFrontend: (value) =>
+ document.querySelector(".network-details-panel").setAttribute("height", value)
}
/* add more prefs here... */
};
yield testBottom();
yield testSide();
yield testWindow();
info("Moving toolbox back to the bottom...");
yield monitor._toolbox.switchHost(Toolbox.HostType.BOTTOM);
return teardown(monitor);
function storeFirstPrefValues() {
info("Caching initial pref values.");
for (let name in prefsToCheck) {
- let currentValue = monitor.panelWin.Prefs[name];
+ let currentValue = Prefs[name];
prefsToCheck[name].firstValue = currentValue;
}
}
function validateFirstPrefValues() {
info("Validating current pref values to the UI elements.");
for (let name in prefsToCheck) {
- let currentValue = monitor.panelWin.Prefs[name];
+ let currentValue = Prefs[name];
let firstValue = prefsToCheck[name].firstValue;
let validateValue = prefsToCheck[name].validateValue;
is(currentValue.toSource(), firstValue.toSource(),
"Pref " + name + " should be equal to first value: " + firstValue);
- is(currentValue.toSource(), validateValue(monitor.panelWin.$).toSource(),
+ is(currentValue.toSource(), validateValue().toSource(),
"Pref " + name + " should validate: " + currentValue);
}
}
function modifyFrontend() {
info("Modifying UI elements to the specified new values.");
for (let name in prefsToCheck) {
- let currentValue = monitor.panelWin.Prefs[name];
+ let currentValue = Prefs[name];
let firstValue = prefsToCheck[name].firstValue;
let newValue = prefsToCheck[name].newValue;
let validateValue = prefsToCheck[name].validateValue;
let modFrontend = prefsToCheck[name].modifyFrontend;
- modFrontend(monitor.panelWin.$, newValue);
+ modFrontend(newValue);
info("Modified UI element affecting " + name + " to: " + newValue);
is(currentValue.toSource(), firstValue.toSource(),
"Pref " + name + " should still be equal to first value: " + firstValue);
isnot(currentValue.toSource(), newValue.toSource(),
"Pref " + name + " should't yet be equal to second value: " + newValue);
- is(newValue.toSource(), validateValue(monitor.panelWin.$).toSource(),
+ is(newValue.toSource(), validateValue().toSource(),
"The UI element affecting " + name + " should validate: " + newValue);
}
}
function validateNewPrefValues() {
info("Invalidating old pref values to the modified UI elements.");
for (let name in prefsToCheck) {
- let currentValue = monitor.panelWin.Prefs[name];
+ let currentValue = Prefs[name];
let firstValue = prefsToCheck[name].firstValue;
let newValue = prefsToCheck[name].newValue;
let validateValue = prefsToCheck[name].validateValue;
isnot(currentValue.toSource(), firstValue.toSource(),
"Pref " + name + " should't be equal to first value: " + firstValue);
is(currentValue.toSource(), newValue.toSource(),
"Pref " + name + " should now be equal to second value: " + newValue);
- is(newValue.toSource(), validateValue(monitor.panelWin.$).toSource(),
+ is(newValue.toSource(), validateValue().toSource(),
"The UI element affecting " + name + " should validate: " + newValue);
}
}
function resetFrontend() {
info("Resetting UI elements to the cached initial pref values.");
for (let name in prefsToCheck) {
- let currentValue = monitor.panelWin.Prefs[name];
+ let currentValue = Prefs[name];
let firstValue = prefsToCheck[name].firstValue;
let newValue = prefsToCheck[name].newValue;
let validateValue = prefsToCheck[name].validateValue;
let modFrontend = prefsToCheck[name].modifyFrontend;
- modFrontend(monitor.panelWin.$, firstValue);
+ modFrontend(firstValue);
info("Modified UI element affecting " + name + " to: " + firstValue);
isnot(currentValue.toSource(), firstValue.toSource(),
"Pref " + name + " should't yet be equal to first value: " + firstValue);
is(currentValue.toSource(), newValue.toSource(),
"Pref " + name + " should still be equal to second value: " + newValue);
- is(firstValue.toSource(), validateValue(monitor.panelWin.$).toSource(),
+ is(firstValue.toSource(), validateValue().toSource(),
"The UI element affecting " + name + " should validate: " + firstValue);
}
}
function* testBottom() {
info("Testing prefs reload for a bottom host.");
storeFirstPrefValues();
--- a/devtools/client/netmonitor/test/browser_net_security-details.js
+++ b/devtools/client/netmonitor/test/browser_net_security-details.js
@@ -19,17 +19,17 @@ add_task(function* () {
let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, REQUESTS_URL, function* (url) {
content.wrappedJSObject.performRequests(1, url);
});
yield wait;
wait = waitForDOM(document, "#security-panel");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.querySelector("#details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
document.querySelector("#security-tab").click();
yield wait;
let tabpanel = document.querySelector("#security-panel");
let textboxes = tabpanel.querySelectorAll(".textbox-input");
// Connection
// The protocol will be TLS but the exact version depends on which protocol
--- a/devtools/client/netmonitor/test/browser_net_security-error.js
+++ b/devtools/client/netmonitor/test/browser_net_security-error.js
@@ -18,17 +18,17 @@ add_task(function* () {
let wait = waitForSecurityBrokenNetworkEvent();
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
content.wrappedJSObject.performRequests(1, "https://nocert.example.com");
});
yield wait;
wait = waitForDOM(document, "#security-panel");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.querySelector("#details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
document.querySelector("#security-tab").click();
yield wait;
let errormsg = document.querySelector(".security-info-value");
isnot(errormsg.textContent, "", "Error message is not empty.");
return teardown(monitor);
--- a/devtools/client/netmonitor/test/browser_net_security-icon-click.js
+++ b/devtools/client/netmonitor/test/browser_net_security-icon-click.js
@@ -14,44 +14,45 @@ add_task(function* () {
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(RequestsMenu.itemCount, 2, "Two events event logged.");
-
+console.log(123)
yield clickAndTestSecurityIcon();
+console.log(123)
info("Selecting headers panel again.");
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelector("#headers-tab"));
info("Sorting the items by filename.");
EventUtils.sendMouseEvent({ type: "click" },
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);
function* performRequestAndWait(url) {
let wait = waitForNetworkEvents(monitor, 1);
yield ContentTask.spawn(tab.linkedBrowser, { url }, function* (args) {
content.wrappedJSObject.performRequests(1, args.url);
});
return wait;
}
function* clickAndTestSecurityIcon() {
let item = RequestsMenu.getItemAtIndex(0);
let icon = document.querySelector(".requests-security-state-icon");
- let wait = waitForDOM(document, "#security-panel");
info("Clicking security icon of the first request and waiting for panel update.");
EventUtils.synthesizeMouseAtCenter(icon, {}, monitor.panelWin);
- yield wait;
ok(document.querySelector("#security-tab[aria-selected=true]"), "Security tab is selected.");
}
});
--- a/devtools/client/netmonitor/test/browser_net_simple-request-data.js
+++ b/devtools/client/netmonitor/test/browser_net_simple-request-data.js
@@ -22,18 +22,18 @@ function test() {
.then(() => teardown(monitor))
.then(finish);
monitor.panelWin.once(monitor.panelWin.EVENTS.NETWORK_EVENT, () => {
is(RequestsMenu.selectedItem, null,
"There shouldn't be any selected item in the requests menu.");
is(RequestsMenu.itemCount, 1,
"The requests menu should not be empty after the first request.");
- is(NetMonitorView.detailsPaneHidden, true,
- "The details pane should still be hidden after the first request.");
+ is(!!document.querySelector(".network-details-panel"), false,
+ "The network details panel should still be hidden after first request.");
let requestItem = RequestsMenu.getItemAtIndex(0);
is(typeof requestItem.id, "string",
"The attached request id is incorrect.");
isnot(requestItem.id, "",
"The attached request id should not be empty.");
--- a/devtools/client/netmonitor/test/browser_net_simple-request-details.js
+++ b/devtools/client/netmonitor/test/browser_net_simple-request-details.js
@@ -20,30 +20,30 @@ add_task(function* () {
let wait = waitForNetworkEvents(monitor, 1);
tab.linkedBrowser.reload();
yield wait;
is(RequestsMenu.selectedItem, null,
"There shouldn't be any selected item in the requests menu.");
is(RequestsMenu.itemCount, 1,
"The requests menu should not be empty after the first request.");
- is(NetMonitorView.detailsPaneHidden, true,
- "The details pane should still be hidden after the first request.");
+ is(!!document.querySelector(".network-details-panel"), false,
+ "The network details panel should still be hidden after first request.");
let onTabUpdated = monitor.panelWin.once(EVENTS.TAB_UPDATED);
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
yield onTabUpdated;
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(NetMonitorView.detailsPaneHidden, false,
- "The details pane should not be hidden after toggle button was pressed.");
+ is(!!document.querySelector(".network-details-panel"), true,
+ "The network details panel should not be hidden after toggle button was pressed.");
testHeadersTab();
yield testCookiesTab();
testParamsTab();
yield testResponseTab();
testTimingsTab();
return teardown(monitor);
--- a/devtools/client/netmonitor/test/browser_net_simple-request.js
+++ b/devtools/client/netmonitor/test/browser_net_simple-request.js
@@ -16,57 +16,61 @@ add_task(function* () {
let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
info("Starting test... ");
let { document, NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
RequestsMenu.lazyUpdate = false;
- is(document.querySelector("#details-pane-toggle").hasAttribute("disabled"), true,
+ 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(RequestsMenu.itemCount, 0,
"The requests menu should be empty when the frontend is opened.");
- is(NetMonitorView.detailsPaneHidden, true,
- "The details pane should be hidden when the frontend is opened.");
+ is(!!document.querySelector(".network-details-panel"), false,
+ "The network details panel should be hidden when the frontend is opened.");
yield reloadAndWait();
- is(document.querySelector("#details-pane-toggle").hasAttribute("disabled"), false,
+ is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
+ false,
"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(RequestsMenu.itemCount, 1,
"The requests menu should not be empty after the first request.");
- is(NetMonitorView.detailsPaneHidden, true,
- "The details pane should still be hidden after the first request.");
+ is(!!document.querySelector(".network-details-panel"), false,
+ "The network details panel should still be hidden after the first request.");
yield reloadAndWait();
- is(document.querySelector("#details-pane-toggle").hasAttribute("disabled"), false,
+ is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
+ false,
"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(RequestsMenu.itemCount, 1,
"The requests menu should not be empty after a reload.");
- is(NetMonitorView.detailsPaneHidden, true,
- "The details pane should still be hidden after a reload.");
+ is(!!document.querySelector(".network-details-panel"), false,
+ "The network details panel should still be hidden after a reload.");
RequestsMenu.clear();
- is(document.querySelector("#details-pane-toggle").hasAttribute("disabled"), true,
+ 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(RequestsMenu.itemCount, 0,
"The requests menu should be empty after clear.");
- is(NetMonitorView.detailsPaneHidden, true,
- "The details pane should be hidden after clear.");
+ is(!!document.querySelector(".network-details-panel"), false,
+ "The network details panel should still be hidden after clear.");
return teardown(monitor);
function* reloadAndWait() {
let wait = waitForNetworkEvents(monitor, 1);
tab.linkedBrowser.reload();
return wait;
}
--- a/devtools/client/netmonitor/test/browser_net_sort-02.js
+++ b/devtools/client/netmonitor/test/browser_net_sort-02.js
@@ -12,17 +12,17 @@ add_task(function* () {
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 { $, $all, NetMonitorView } = monitor.panelWin;
+ 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"
@@ -41,130 +41,152 @@ add_task(function* () {
}];
RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 5);
yield performRequestsInContent(requests);
yield wait;
- EventUtils.sendMouseEvent({ type: "mousedown" }, $("#details-pane-toggle"));
+ 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(NetMonitorView.detailsPaneHidden, false,
- "The details pane should not be hidden after toggle button was pressed.");
+ 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]);
info("Testing status sort, ascending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-status-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-status-button"));
testHeaders("status", "ascending");
testContents([0, 1, 2, 3, 4]);
info("Testing status sort, descending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-status-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-status-button"));
testHeaders("status", "descending");
testContents([4, 3, 2, 1, 0]);
info("Testing status sort, ascending. Checking sort loops correctly.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-status-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-status-button"));
testHeaders("status", "ascending");
testContents([0, 1, 2, 3, 4]);
info("Testing method sort, ascending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-method-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-method-button"));
testHeaders("method", "ascending");
testContents([0, 1, 2, 3, 4]);
info("Testing method sort, descending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-method-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-method-button"));
testHeaders("method", "descending");
testContents([4, 3, 2, 1, 0]);
info("Testing method sort, ascending. Checking sort loops correctly.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-method-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-method-button"));
testHeaders("method", "ascending");
testContents([0, 1, 2, 3, 4]);
info("Testing file sort, ascending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-file-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-file-button"));
testHeaders("file", "ascending");
testContents([0, 1, 2, 3, 4]);
info("Testing file sort, descending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-file-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-file-button"));
testHeaders("file", "descending");
testContents([4, 3, 2, 1, 0]);
info("Testing file sort, ascending. Checking sort loops correctly.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-file-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-file-button"));
testHeaders("file", "ascending");
testContents([0, 1, 2, 3, 4]);
info("Testing type sort, ascending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-type-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-type-button"));
testHeaders("type", "ascending");
testContents([0, 1, 2, 3, 4]);
info("Testing type sort, descending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-type-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-type-button"));
testHeaders("type", "descending");
testContents([4, 3, 2, 1, 0]);
info("Testing type sort, ascending. Checking sort loops correctly.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-type-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-type-button"));
testHeaders("type", "ascending");
testContents([0, 1, 2, 3, 4]);
info("Testing transferred sort, ascending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-transferred-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-transferred-button"));
testHeaders("transferred", "ascending");
testContents([0, 1, 2, 3, 4]);
info("Testing transferred sort, descending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-transferred-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-transferred-button"));
testHeaders("transferred", "descending");
testContents([4, 3, 2, 1, 0]);
info("Testing transferred sort, ascending. Checking sort loops correctly.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-transferred-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-transferred-button"));
testHeaders("transferred", "ascending");
testContents([0, 1, 2, 3, 4]);
info("Testing size sort, ascending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-size-button"));
testHeaders("size", "ascending");
testContents([0, 1, 2, 3, 4]);
info("Testing size sort, descending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-size-button"));
testHeaders("size", "descending");
testContents([4, 3, 2, 1, 0]);
info("Testing size sort, ascending. Checking sort loops correctly.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-size-button"));
testHeaders("size", "ascending");
testContents([0, 1, 2, 3, 4]);
info("Testing waterfall sort, ascending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-waterfall-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-waterfall-button"));
testHeaders("waterfall", "ascending");
testContents([0, 2, 4, 3, 1]);
info("Testing waterfall sort, descending.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-waterfall-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-waterfall-button"));
testHeaders("waterfall", "descending");
testContents([4, 2, 0, 1, 3]);
info("Testing waterfall sort, ascending. Checking sort loops correctly.");
- EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-waterfall-button"));
+ EventUtils.sendMouseEvent({ type: "click" },
+ document.querySelector("#requests-menu-waterfall-button"));
testHeaders("waterfall", "ascending");
testContents([0, 2, 4, 3, 1]);
return teardown(monitor);
function testHeaders(sortType, direction) {
let doc = monitor.panelWin.document;
let target = doc.querySelector("#requests-menu-" + sortType + "-button");
@@ -187,24 +209,24 @@ add_task(function* () {
}
}
function testContents([a, b, c, d, e]) {
isnot(RequestsMenu.selectedItem, null,
"There should still be a selected item after sorting.");
is(RequestsMenu.selectedIndex, a,
"The first item should be still selected after sorting.");
- is(NetMonitorView.detailsPaneHidden, false,
- "The details pane should still be visible after sorting.");
+ is(!!document.querySelector(".network-details-panel"), true,
+ "The network details panel should still be visible after sorting.");
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 visible items in the requests menu.");
- is($all(".request-list-item").length, 5,
+ is(document.querySelectorAll(".request-list-item").length, 5,
"The visible items in the requests menu are, in fact, visible!");
verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(a),
"GET1", SORTING_SJS + "?index=1", {
fuzzyUrl: true,
status: 101,
statusText: "Meh",
type: "1",
--- a/devtools/client/netmonitor/test/browser_net_sort-03.js
+++ b/devtools/client/netmonitor/test/browser_net_sort-03.js
@@ -12,17 +12,17 @@ add_task(function* () {
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 { $, $all, NetMonitorView } = monitor.panelWin;
+ 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"
@@ -41,63 +41,68 @@ add_task(function* () {
}];
RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 5);
yield performRequestsInContent(requests);
yield wait;
- EventUtils.sendMouseEvent({ type: "mousedown" }, $("#details-pane-toggle"));
+ 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(NetMonitorView.detailsPaneHidden, false,
- "The details pane should not be hidden after toggle button was pressed.");
+ 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" }, $("#requests-menu-status-button"));
+ 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" }, $("#requests-menu-status-button"));
+ 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" }, $("#requests-menu-status-button"));
+ 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" }, $("#requests-menu-status-button"));
+ 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");
@@ -120,24 +125,24 @@ add_task(function* () {
}
}
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(NetMonitorView.detailsPaneHidden, false,
- "The details pane should still be visible 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($all(".request-list-item").length, order.length,
+ 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,
--- a/devtools/client/netmonitor/test/browser_net_statistics-01.js
+++ b/devtools/client/netmonitor/test/browser_net_statistics-01.js
@@ -17,17 +17,18 @@ add_task(function* () {
let body = document.querySelector("#body");
is(body.selectedPanel.id, "inspector-panel",
"The current main panel is correct.");
info("Displaying statistics view");
gStore.dispatch(Actions.openStatistics(true));
- is(body.selectedPanel.id, "statistics-panel",
+
+ is(body.selectedPanel.id, "react-statistics-panel-hook",
"The current main panel is correct.");
info("Waiting for placeholder to display");
is(document.querySelector(".primed-cache-chart").childNodes.length, 1,
"There should be a placeholder primed cache chart created now.");
is(document.querySelector(".empty-cache-chart").childNodes.length, 1,
"There should be a placeholder empty cache chart created now.");
--- a/devtools/client/netmonitor/test/browser_net_statistics-02.js
+++ b/devtools/client/netmonitor/test/browser_net_statistics-02.js
@@ -28,17 +28,17 @@ add_task(function* () {
document.querySelector("#requests-menu-filter-other-button"));
testFilterButtonsCustom(monitor, [0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1]);
info("The correct filtering predicates are used before entering perf. analysis mode.");
gStore.dispatch(Actions.openStatistics(true));
let body = document.querySelector("#body");
- is(body.selectedPanel.id, "statistics-panel",
+ is(body.selectedPanel.id, "react-statistics-panel-hook",
"The main panel is switched to the statistics panel.");
yield waitUntil(
() => document.querySelectorAll(".pie-chart-container:not([placeholder=true])").length == 2);
ok(true, "Two real pie charts appear to be rendered correctly.");
EventUtils.sendMouseEvent({ type: "click" },
document.querySelector(".pie-chart-slice"));
--- a/devtools/client/netmonitor/test/browser_net_status-codes.js
+++ b/devtools/client/netmonitor/test/browser_net_status-codes.js
@@ -140,20 +140,18 @@ add_task(function* () {
counter++;
}
}
/**
* A function that tests "Headers" panel contains correct information.
*/
function* testHeaders(data, index) {
- let wait = waitForDOM(document, "#headers-panel");
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[index]);
- yield wait;
let panel = document.querySelector("#headers-panel");
let summaryValues = panel.querySelectorAll(".tabpanel-summary-value.textbox-input");
let { method, uri, details: { status, statusText } } = data;
is(summaryValues[0].value, uri, "The url summary value is incorrect.");
is(summaryValues[1].value, method, "The method summary value is incorrect.");
is(panel.querySelector(".requests-menu-status-icon").dataset.code, status,
@@ -161,27 +159,24 @@ add_task(function* () {
is(summaryValues[3].value, status + " " + statusText,
"The status summary value is incorrect.");
}
/**
* A function that tests "Params" panel contains correct information.
*/
function* testParams(data, index) {
- let wait = waitForDOM(document, "#params-panel .properties-view");
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[index]);
document.querySelector("#params-tab").click();
- yield wait;
let panel = document.querySelector("#params-panel");
let statusParamValue = data.uri.split("=").pop();
let statusParamShownValue = "\"" + statusParamValue + "\"";
let treeSections = panel.querySelectorAll(".tree-section");
- debugger
is(treeSections.length, 1,
"There should be 1 param section displayed in this panel.");
is(panel.querySelectorAll("tr:not(.tree-section).treeRow").length, 1,
"There should be 1 param row displayed in this panel.");
is(panel.querySelectorAll(".empty-notice").length, 0,
"The empty notice should not be displayed in this panel.");
--- a/devtools/client/netmonitor/test/browser_net_streaming-response.js
+++ b/devtools/client/netmonitor/test/browser_net_streaming-response.js
@@ -37,17 +37,17 @@ add_task(function* () {
"GET", CONTENT_TYPE_SJS + "?fmt=" + fmt, {
status: 200,
statusText: "OK"
});
});
wait = waitForDOM(document, "#response-panel");
EventUtils.sendMouseEvent({ type: "mousedown" },
- document.getElementById("details-pane-toggle"));
+ document.querySelector(".network-details-panel-toggle"));
document.querySelector("#response-tab").click();
yield wait;
RequestsMenu.selectedIndex = -1;
yield selectIndexAndWaitForEditor(0);
// the hls-m3u8 part
testEditorContent(REQUESTS[0]);
--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -23,34 +23,16 @@
.devtools-toolbar-group {
display: flex;
flex: 0 0 auto;
flex-wrap: nowrap;
align-items: center;
}
-.custom-request-panel,
-#details-pane {
- /* Make details-pane's width adjustable by splitter */
- min-width: 50px;
-}
-
-/**
- * Collapsed details pane needs to be truly hidden to prevent both accessibility
- * tools and keyboard from accessing its contents.
- */
-#details-pane.pane-collapsed {
- visibility: hidden;
-}
-
-#details-pane-toggle[disabled] {
- display: none;
-}
-
#response-content-image-box {
overflow: auto;
}
.cropped-textbox .textbox-input {
/* workaround for textbox not supporting the @crop attribute */
text-overflow: ellipsis;
}
@@ -635,25 +617,29 @@
}
/* Size Column */
.theme-firebug .requests-menu-subitem.requests-menu-size {
justify-content: end;
padding-inline-end: 4px;
}
-/* Network request details */
+/* Network details panel */
-#details-pane-toggle:-moz-locale-dir(ltr)::before,
-#details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
+.network-details-panel-toggle[disabled] {
+ display: none;
+}
+
+.network-details-panel-toggle:-moz-locale-dir(ltr)::before,
+.network-details-panel-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
background-image: var(--theme-pane-collapse-image);
}
-#details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
-#details-pane-toggle:-moz-locale-dir(rtl)::before {
+.network-details-panel-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
+.network-details-panel-toggle:-moz-locale-dir(rtl)::before {
background-image: var(--theme-pane-expand-image);
}
/* Network request details tabpanels */
.theme-firebug .variables-view-scope:focus > .title {
color: var(--theme-body-color);
}
@@ -1004,36 +990,34 @@
.theme-firebug .chart-colored-blob[name=flash] {
fill: rgba(84, 235, 159, 0.8); /* cyan */
background: rgba(84, 235, 159, 0.8);
}
/* Responsive sidebar */
@media (max-width: 700px) {
#toolbar-spacer,
- #details-pane-toggle,
- #details-pane.pane-collapsed,
+ .network-details-panel-toggle,
#requests-menu-network-summary-button > .summary-info-text {
display: none;
}
#requests-menu-toolbar {
height: 22px;
}
.requests-menu-header-button {
min-height: 22px;
padding-left: 8px;
}
.custom-request-panel {
- height: 100%;
+ height: auto;
}
- .custom-request-panel,
#details-pane {
margin: 0 !important;
/* To prevent all the margin hacks to hide the sidebar. */
}
.requests-menu-status {
max-width: none;
width: 10vw;
@@ -1313,31 +1297,42 @@
.editor-container,
.editor-mount,
.panel-container iframe {
border: none;
width: 100%;
height: 100%;
}
+.network-details-panel {
+ height: 100%;
+}
+
/*
* FIXME: normal html block element cannot fill outer XUL element
* This workaround should be removed after netmonitor is migrated to react
*/
#network-table {
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-flex: 1;
overflow: hidden;
}
-#react-custom-request-panel-hook,
-#statistics-panel,
-#react-details-panel-hook {
+#react-network-details-panel-hook,
+#react-statistics-panel-hook,
+#splitter-adjustable-box {
display: flex;
flex-direction: column;
+ min-width: 50px;
+ height: 100%;
+ overflow: hidden;
+}
+
+#splitter-adjustable-box[hidden=true] {
+ display: none;
}
#primed-cache-chart,
#empty-cache-chart {
display: -moz-box;
-moz-box-flex: 1;
}