зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1449100 - Move network details panel toggle buton next to the sidebar tabs. r=Honza
This commit is contained in:
Родитель
5a58c5d8bf
Коммит
2728a2b0e3
|
@ -58,10 +58,6 @@ netmonitor.security.notAvailable=<Not Available>
|
|||
# that collapses the network details pane in the UI.
|
||||
collapseDetailsPane=Hide request details
|
||||
|
||||
# LOCALIZATION NOTE (expandDetailsPane): This is the tooltip for the button
|
||||
# that expands the network details pane in the UI.
|
||||
expandDetailsPane=Show request details
|
||||
|
||||
# LOCALIZATION NOTE (headersEmptyText): This is the text displayed in the
|
||||
# headers tab of the network details pane when there are no headers available.
|
||||
headersEmptyText=No headers for this request
|
||||
|
|
|
@ -45,27 +45,3 @@
|
|||
margin-inline-end: 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Network details panel toggle */
|
||||
|
||||
.network-details-panel-toggle:dir(ltr)::before,
|
||||
.network-details-panel-toggle.pane-collapsed:dir(rtl)::before {
|
||||
background-image: var(--theme-pane-collapse-image);
|
||||
}
|
||||
|
||||
.network-details-panel-toggle.pane-collapsed:dir(ltr)::before,
|
||||
.network-details-panel-toggle:dir(rtl)::before {
|
||||
background-image: var(--theme-pane-expand-image);
|
||||
}
|
||||
|
||||
/* Responsive web design support */
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.network-details-panel-toggle:dir(ltr)::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.network-details-panel-toggle:dir(rtl)::before {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
@import "resource://devtools/client/shared/components/SidebarToggle.css";
|
||||
@import "resource://devtools/client/shared/components/splitter/SplitBox.css";
|
||||
@import "resource://devtools/client/shared/components/tree/TreeView.css";
|
||||
@import "resource://devtools/client/shared/components/tabs/Tabs.css";
|
||||
|
|
|
@ -31,6 +31,7 @@ function NetworkDetailsPanel({
|
|||
request,
|
||||
selectTab,
|
||||
sourceMapService,
|
||||
toggleNetworkDetails,
|
||||
openLink,
|
||||
}) {
|
||||
if (!request) {
|
||||
|
@ -48,6 +49,7 @@ function NetworkDetailsPanel({
|
|||
request,
|
||||
selectTab,
|
||||
sourceMapService,
|
||||
toggleNetworkDetails,
|
||||
}) :
|
||||
CustomRequestPanel({
|
||||
connector,
|
||||
|
@ -67,6 +69,7 @@ NetworkDetailsPanel.propTypes = {
|
|||
request: PropTypes.object,
|
||||
selectTab: PropTypes.func.isRequired,
|
||||
sourceMapService: PropTypes.object,
|
||||
toggleNetworkDetails: PropTypes.func.isRequired,
|
||||
openLink: PropTypes.func,
|
||||
};
|
||||
|
||||
|
@ -78,5 +81,6 @@ module.exports = connect(
|
|||
(dispatch) => ({
|
||||
cloneSelectedRequest: () => dispatch(Actions.cloneSelectedRequest()),
|
||||
selectTab: (tabId) => dispatch(Actions.selectDetailsPanelTab(tabId)),
|
||||
toggleNetworkDetails: () => dispatch(Actions.toggleNetworkDetails()),
|
||||
}),
|
||||
)(NetworkDetailsPanel);
|
||||
|
|
|
@ -20,6 +20,7 @@ const SecurityPanel = createFactory(require("./SecurityPanel"));
|
|||
const StackTracePanel = createFactory(require("./StackTracePanel"));
|
||||
const TimingsPanel = createFactory(require("./TimingsPanel"));
|
||||
|
||||
const COLLAPSE_DETAILS_PANE = L10N.getStr("collapseDetailsPane");
|
||||
const COOKIES_TITLE = L10N.getStr("netmonitor.tab.cookies");
|
||||
const HEADERS_TITLE = L10N.getStr("netmonitor.tab.headers");
|
||||
const PARAMS_TITLE = L10N.getStr("netmonitor.tab.params");
|
||||
|
@ -40,6 +41,7 @@ function TabboxPanel({
|
|||
request,
|
||||
selectTab,
|
||||
sourceMapService,
|
||||
toggleNetworkDetails,
|
||||
}) {
|
||||
if (!request) {
|
||||
return null;
|
||||
|
@ -52,6 +54,12 @@ function TabboxPanel({
|
|||
onSelect: selectTab,
|
||||
renderOnlySelected: true,
|
||||
showAllTabsMenu: true,
|
||||
sidebarToggleButton: {
|
||||
collapsed: false,
|
||||
collapsePaneTitle: COLLAPSE_DETAILS_PANE,
|
||||
expandPaneTitle: "",
|
||||
onClick: toggleNetworkDetails,
|
||||
},
|
||||
},
|
||||
TabPanel({
|
||||
id: PANELS.HEADERS,
|
||||
|
|
|
@ -15,7 +15,6 @@ const { FILTER_SEARCH_DELAY, FILTER_TAGS } = require("../constants");
|
|||
const {
|
||||
getRecordingState,
|
||||
getTypeFilteredRequests,
|
||||
isNetworkDetailsToggleButtonDisabled,
|
||||
} = require("../selectors/index");
|
||||
const { autocompleteProvider } = require("../utils/filter-autocomplete-provider");
|
||||
const { L10N } = require("../utils/l10n");
|
||||
|
@ -27,8 +26,6 @@ const SearchBox = createFactory(require("devtools/client/shared/components/Searc
|
|||
const { button, div, input, label, span } = dom;
|
||||
|
||||
// Localization
|
||||
const COLLAPSE_DETAILS_PANE = L10N.getStr("collapseDetailsPane");
|
||||
const EXPAND_DETAILS_PANE = L10N.getStr("expandDetailsPane");
|
||||
const SEARCH_KEY_SHORTCUT = L10N.getStr("netmonitor.toolbar.filterFreetext.key");
|
||||
const SEARCH_PLACE_HOLDER = L10N.getStr("netmonitor.toolbar.filterFreetext.label");
|
||||
const TOOLBAR_CLEAR = L10N.getStr("netmonitor.toolbar.clear");
|
||||
|
@ -61,9 +58,6 @@ class Toolbar extends Component {
|
|||
clearRequests: PropTypes.func.isRequired,
|
||||
requestFilterTypes: PropTypes.object.isRequired,
|
||||
setRequestFilterText: PropTypes.func.isRequired,
|
||||
networkDetailsToggleDisabled: PropTypes.bool.isRequired,
|
||||
networkDetailsOpen: PropTypes.bool.isRequired,
|
||||
toggleNetworkDetails: PropTypes.func.isRequired,
|
||||
enablePersistentLogs: PropTypes.func.isRequired,
|
||||
togglePersistentLogs: PropTypes.func.isRequired,
|
||||
persistentLogsEnabled: PropTypes.bool.isRequired,
|
||||
|
@ -92,9 +86,7 @@ class Toolbar extends Component {
|
|||
}
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return this.props.networkDetailsOpen !== nextProps.networkDetailsOpen
|
||||
|| this.props.networkDetailsToggleDisabled !== nextProps.networkDetailsToggleDisabled
|
||||
|| this.props.persistentLogsEnabled !== nextProps.persistentLogsEnabled
|
||||
return this.props.persistentLogsEnabled !== nextProps.persistentLogsEnabled
|
||||
|| this.props.browserCacheDisabled !== nextProps.browserCacheDisabled
|
||||
|| this.props.recording !== nextProps.recording
|
||||
|| !Object.is(this.props.requestFilterTypes, nextProps.requestFilterTypes)
|
||||
|
@ -149,9 +141,6 @@ class Toolbar extends Component {
|
|||
clearRequests,
|
||||
requestFilterTypes,
|
||||
setRequestFilterText,
|
||||
networkDetailsToggleDisabled,
|
||||
networkDetailsOpen,
|
||||
toggleNetworkDetails,
|
||||
togglePersistentLogs,
|
||||
persistentLogsEnabled,
|
||||
toggleBrowserCache,
|
||||
|
@ -186,19 +175,6 @@ class Toolbar extends Component {
|
|||
recording ? "devtools-pause-icon" : "devtools-play-icon",
|
||||
].join(" ");
|
||||
|
||||
// Detail toggle button
|
||||
let toggleDetailButtonClassList = [
|
||||
"network-details-panel-toggle",
|
||||
"devtools-button",
|
||||
];
|
||||
|
||||
if (!networkDetailsOpen) {
|
||||
toggleDetailButtonClassList.push("pane-collapsed");
|
||||
}
|
||||
let toggleDetailButtonClass = toggleDetailButtonClassList.join(" ");
|
||||
let toggleDetailButtonTitle = networkDetailsOpen ? COLLAPSE_DETAILS_PANE :
|
||||
EXPAND_DETAILS_PANE;
|
||||
|
||||
// Render the entire toolbar.
|
||||
return (
|
||||
span({ className: "devtools-toolbar devtools-toolbar-container" },
|
||||
|
@ -253,14 +229,7 @@ class Toolbar extends Component {
|
|||
onChange: setRequestFilterText,
|
||||
onFocus: this.onSearchBoxFocus,
|
||||
autocompleteProvider: this.autocompleteProvider,
|
||||
}),
|
||||
button({
|
||||
className: toggleDetailButtonClass,
|
||||
title: toggleDetailButtonTitle,
|
||||
disabled: networkDetailsToggleDisabled,
|
||||
tabIndex: "0",
|
||||
onClick: toggleNetworkDetails,
|
||||
}),
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
|
@ -271,8 +240,6 @@ module.exports = connect(
|
|||
(state) => ({
|
||||
browserCacheDisabled: state.ui.browserCacheDisabled,
|
||||
filteredRequests: getTypeFilteredRequests(state),
|
||||
networkDetailsToggleDisabled: isNetworkDetailsToggleButtonDisabled(state),
|
||||
networkDetailsOpen: state.ui.networkDetailsOpen,
|
||||
persistentLogsEnabled: state.ui.persistentLogsEnabled,
|
||||
recording: getRecordingState(state),
|
||||
requestFilterTypes: state.filters.requestFilterTypes,
|
||||
|
@ -283,7 +250,6 @@ module.exports = connect(
|
|||
enablePersistentLogs: (enabled) => dispatch(Actions.enablePersistentLogs(enabled)),
|
||||
setRequestFilterText: (text) => dispatch(Actions.setRequestFilterText(text)),
|
||||
toggleBrowserCache: () => dispatch(Actions.toggleBrowserCache()),
|
||||
toggleNetworkDetails: () => dispatch(Actions.toggleNetworkDetails()),
|
||||
toggleRecording: () => dispatch(Actions.toggleRecording()),
|
||||
togglePersistentLogs: () => dispatch(Actions.togglePersistentLogs()),
|
||||
toggleRequestFilterType: (type) => dispatch(Actions.toggleRequestFilterType(type)),
|
||||
|
|
|
@ -6,14 +6,9 @@
|
|||
|
||||
const { createSelector } = require("devtools/client/shared/vendor/reselect");
|
||||
const { REQUESTS_WATERFALL } = require("../constants");
|
||||
const { getDisplayedRequests } = require("./requests");
|
||||
|
||||
const EPSILON = 0.001;
|
||||
|
||||
function isNetworkDetailsToggleButtonDisabled(state) {
|
||||
return getDisplayedRequests(state).length == 0;
|
||||
}
|
||||
|
||||
const getWaterfallScale = createSelector(
|
||||
state => state.requests,
|
||||
state => state.timingMarkers,
|
||||
|
@ -36,6 +31,5 @@ const getWaterfallScale = createSelector(
|
|||
);
|
||||
|
||||
module.exports = {
|
||||
isNetworkDetailsToggleButtonDisabled,
|
||||
getWaterfallScale,
|
||||
};
|
||||
|
|
|
@ -49,8 +49,7 @@ add_task(async function() {
|
|||
|
||||
wait = waitForDOM(document, ".CodeMirror-code");
|
||||
let onResponseContent = monitor.panelWin.once(EVENTS.RECEIVED_RESPONSE_CONTENT);
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#response-tab"));
|
||||
await wait;
|
||||
|
|
|
@ -13,7 +13,6 @@ add_task(async function() {
|
|||
|
||||
let { document, store, windowRequire } = monitor.panelWin;
|
||||
let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
|
||||
let detailsPanelToggleButton = document.querySelector(".network-details-panel-toggle");
|
||||
let clearButton = document.querySelector(".requests-list-clear-button");
|
||||
|
||||
store.dispatch(Actions.batchEnable(false));
|
||||
|
@ -40,11 +39,11 @@ add_task(async function() {
|
|||
assertSingleRequestState();
|
||||
|
||||
// Make sure we can now open the network details panel
|
||||
EventUtils.sendMouseEvent({ type: "click" }, detailsPanelToggleButton);
|
||||
|
||||
ok(document.querySelector(".network-details-panel") &&
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
let detailsPanelToggleButton = document.querySelector(".sidebar-toggle");
|
||||
ok(detailsPanelToggleButton &&
|
||||
!detailsPanelToggleButton.classList.contains("pane-collapsed"),
|
||||
"The details pane should be visible after clicking the toggle button.");
|
||||
"The details pane should be visible.");
|
||||
|
||||
// Click clear and make sure the details pane closes
|
||||
EventUtils.sendMouseEvent({ type: "click" }, clearButton);
|
||||
|
@ -61,8 +60,6 @@ add_task(async function() {
|
|||
function assertSingleRequestState() {
|
||||
is(store.getState().requests.requests.size, 1,
|
||||
"The request menu should have one item at this point.");
|
||||
is(detailsPanelToggleButton.hasAttribute("disabled"), false,
|
||||
"The pane toggle button should be enabled after a request is made.");
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -71,7 +68,5 @@ add_task(async function() {
|
|||
function assertNoRequestState() {
|
||||
is(store.getState().requests.requests.size, 0,
|
||||
"The request menu should be empty at this point.");
|
||||
is(detailsPanelToggleButton.hasAttribute("disabled"), true,
|
||||
"The pane toggle button should be disabled when the request menu is cleared.");
|
||||
}
|
||||
});
|
||||
|
|
|
@ -21,8 +21,7 @@ add_task(async function() {
|
|||
await performRequests(monitor, tab, 1);
|
||||
|
||||
wait = waitForDOM(document, "#response-panel .CodeMirror-code");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#response-tab"));
|
||||
await wait;
|
||||
|
|
|
@ -51,8 +51,7 @@ add_task(async function() {
|
|||
});
|
||||
|
||||
wait = waitForDOM(document, "#response-panel .CodeMirror-code");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#response-tab"));
|
||||
await wait;
|
||||
|
|
|
@ -43,8 +43,7 @@ add_task(async function() {
|
|||
});
|
||||
|
||||
wait = waitForDOM(document, "#response-panel .CodeMirror-code");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#response-tab"));
|
||||
await wait;
|
||||
|
|
|
@ -20,7 +20,12 @@ add_task(async function() {
|
|||
// Execute requests.
|
||||
await performRequests(monitor, tab, 1);
|
||||
|
||||
await openResponsePanel();
|
||||
let onReponsePanelReady = waitForDOM(document, "#response-panel .CodeMirror-code");
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#response-tab"));
|
||||
await onReponsePanelReady;
|
||||
|
||||
checkResponsePanelDisplaysJSON();
|
||||
|
||||
let tabpanel = document.querySelector("#response-panel");
|
||||
|
@ -57,17 +62,4 @@ add_task(async function() {
|
|||
is(panel.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() {
|
||||
let onReponsePanelReady = waitForDOM(document, "#response-panel .CodeMirror-code");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#response-tab"));
|
||||
return onReponsePanelReady;
|
||||
}
|
||||
});
|
||||
|
|
|
@ -45,8 +45,7 @@ add_task(async function() {
|
|||
});
|
||||
|
||||
wait = waitForDOM(document, "#response-panel .CodeMirror-code");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#response-tab"));
|
||||
await wait;
|
||||
|
|
|
@ -46,8 +46,7 @@ add_task(async function() {
|
|||
});
|
||||
|
||||
wait = waitForDOM(document, "#response-panel .CodeMirror-code");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#response-tab"));
|
||||
await wait;
|
||||
|
|
|
@ -64,8 +64,7 @@ add_task(async function() {
|
|||
|
||||
info("Testing first request");
|
||||
wait = waitForDOM(document, "#response-panel .CodeMirror-code");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#response-tab"));
|
||||
await wait;
|
||||
|
|
|
@ -50,8 +50,7 @@ add_task(async function() {
|
|||
});
|
||||
|
||||
wait = waitForDOM(document, "#response-panel .CodeMirror-code");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#response-tab"));
|
||||
await wait;
|
||||
|
|
|
@ -11,40 +11,41 @@ add_task(async function() {
|
|||
let { tab, monitor } = await initNetMonitor(SIMPLE_URL);
|
||||
info("Starting test... ");
|
||||
|
||||
let { document, windowRequire } = monitor.panelWin;
|
||||
let { document, store, windowRequire } = monitor.panelWin;
|
||||
let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
|
||||
let { Prefs } = windowRequire("devtools/client/netmonitor/src/utils/prefs");
|
||||
let detailsPaneToggleButton = document.querySelector(".network-details-panel-toggle");
|
||||
|
||||
let wait = waitForNetworkEvents(monitor, 1);
|
||||
tab.linkedBrowser.reload();
|
||||
await wait;
|
||||
|
||||
ok(!document.querySelector(".network-details-panel") &&
|
||||
detailsPaneToggleButton.classList.contains("pane-collapsed"),
|
||||
!document.querySelector(".sidebar-toggle"),
|
||||
"The details panel should initially be hidden.");
|
||||
|
||||
EventUtils.sendMouseEvent({ type: "click" }, detailsPaneToggleButton);
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
|
||||
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"),
|
||||
document.querySelector(".sidebar-toggle"),
|
||||
"The details panel should at this point be visible.");
|
||||
|
||||
EventUtils.sendMouseEvent({ type: "click" }, detailsPaneToggleButton);
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".sidebar-toggle"));
|
||||
|
||||
ok(!document.querySelector(".network-details-panel") &&
|
||||
detailsPaneToggleButton.classList.contains("pane-collapsed"),
|
||||
!document.querySelector(".sidebar-toggle"),
|
||||
"The details panel should not be visible after collapsing.");
|
||||
|
||||
EventUtils.sendMouseEvent({ type: "click" }, detailsPaneToggleButton);
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
|
||||
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"),
|
||||
document.querySelector(".sidebar-toggle"),
|
||||
"The details panel should be visible again after uncollapsing.");
|
||||
|
||||
await teardown(monitor);
|
||||
|
|
|
@ -45,24 +45,22 @@ add_task(async function() {
|
|||
await performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS);
|
||||
await wait;
|
||||
|
||||
let toggleButton = document.querySelector(".network-details-panel-toggle");
|
||||
|
||||
info("Test with the first request in the list visible");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".requests-list-filter-all-button"));
|
||||
document.querySelector(".requests-list-filter-all-button"));
|
||||
testDetailsPanel(true, 0);
|
||||
|
||||
info("Test with first request in the list not visible");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".requests-list-filter-all-button"));
|
||||
document.querySelector(".requests-list-filter-all-button"));
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".requests-list-filter-js-button"));
|
||||
document.querySelector(".requests-list-filter-js-button"));
|
||||
testFilterButtons(monitor, "js");
|
||||
testDetailsPanel(true, 2);
|
||||
|
||||
info("Test with no request in the list visible i.e. no request match the filters");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".requests-list-filter-all-button"));
|
||||
document.querySelector(".requests-list-filter-all-button"));
|
||||
setFreetextFilter("foobar");
|
||||
// The network details panel should not open as there are no available requests visible
|
||||
testDetailsPanel(false);
|
||||
|
@ -78,50 +76,36 @@ add_task(async function() {
|
|||
|
||||
async function testDetailsPanel(shouldPanelOpen, selectedItemIndex = 0) {
|
||||
// Expected default state should be panel closed
|
||||
if (shouldPanelOpen) {
|
||||
// Toggle switch should be enabled only when there are visible requests
|
||||
is(toggleButton.hasAttribute("disabled"), false,
|
||||
"The pane toggle button should be enabled.");
|
||||
} else {
|
||||
is(toggleButton.hasAttribute("disabled"), true,
|
||||
"The pane toggle button should be disabled.");
|
||||
}
|
||||
|
||||
is(toggleButton.classList.contains("pane-collapsed"), true,
|
||||
"The pane toggle button should still indicate that the details pane is " +
|
||||
"collapsed.");
|
||||
ok(!document.querySelector(".sidebar-toggle"),
|
||||
"The pane toggle button should not be visible.");
|
||||
is(!!document.querySelector(".network-details-panel"), false,
|
||||
"The details pane should still be hidden.");
|
||||
"The details pane should still be hidden.");
|
||||
is(getSelectedRequest(store.getState()), null,
|
||||
"There should still be no selected item in the requests menu.");
|
||||
"There should still be no selected item in the requests menu.");
|
||||
|
||||
// Trigger the details panel toggle action
|
||||
EventUtils.sendMouseEvent({ type: "click" }, toggleButton);
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
|
||||
let toggleButton = document.querySelector(".sidebar-toggle");
|
||||
|
||||
if (shouldPanelOpen) {
|
||||
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.");
|
||||
"The pane toggle button should now indicate that the details pane is " +
|
||||
"not collapsed anymore after being pressed.");
|
||||
is(!!document.querySelector(".network-details-panel"), true,
|
||||
"The details pane should not be hidden after toggle button was pressed.");
|
||||
"The details pane should not be hidden after toggle button was pressed.");
|
||||
isnot(getSelectedRequest(store.getState()), null,
|
||||
"There should be a selected item in the requests menu.");
|
||||
"There should be a selected item in the requests menu.");
|
||||
is(getSelectedIndex(store.getState()), selectedItemIndex,
|
||||
`The item index ${selectedItemIndex} should be selected in the requests menu.`);
|
||||
`The item index ${selectedItemIndex} should be selected in the requests menu.`);
|
||||
// Close the panel
|
||||
EventUtils.sendMouseEvent({ type: "click" }, toggleButton);
|
||||
} else {
|
||||
is(toggleButton.hasAttribute("disabled"), true,
|
||||
"The pane toggle button should be disabled.");
|
||||
is(toggleButton.classList.contains("pane-collapsed"), true,
|
||||
"The pane toggle button should still indicate that the details pane is " +
|
||||
"collapsed.");
|
||||
ok(!toggleButton, "The pane toggle button should be not visible.");
|
||||
is(!!document.querySelector(".network-details-panel"), false,
|
||||
"The details pane should still be hidden.");
|
||||
"The details pane should still be hidden.");
|
||||
is(getSelectedRequest(store.getState()), null,
|
||||
"There should still be no selected item in the requests menu.");
|
||||
"There should still be no selected item in the requests menu.");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -21,13 +21,8 @@ add_task(async function() {
|
|||
|
||||
store.dispatch(Actions.batchEnable(false));
|
||||
|
||||
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.");
|
||||
ok(!document.querySelector(".sidebar-toggle"),
|
||||
"The pane toggle button should not be visible.");
|
||||
is(!!document.querySelector(".network-details-panel"), false,
|
||||
"The details pane should be hidden when the frontend is opened.");
|
||||
is(getSelectedRequest(store.getState()), null,
|
||||
|
@ -37,23 +32,20 @@ add_task(async function() {
|
|||
tab.linkedBrowser.reload();
|
||||
await 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.");
|
||||
ok(!document.querySelector(".sidebar-toggle"),
|
||||
"The pane toggle button should not be visible after the first request.");
|
||||
is(!!document.querySelector(".network-details-panel"), false,
|
||||
"The details pane should still be hidden after the first request.");
|
||||
is(getSelectedRequest(store.getState()), null,
|
||||
"There should still be no selected item in the requests menu.");
|
||||
|
||||
EventUtils.sendMouseEvent({ type: "click" }, toggleButton);
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
|
||||
let toggleButton = document.querySelector(".sidebar-toggle");
|
||||
|
||||
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.");
|
||||
"not collapsed anymore.");
|
||||
is(!!document.querySelector(".network-details-panel"), true,
|
||||
"The details pane should not be hidden after toggle button was pressed.");
|
||||
isnot(getSelectedRequest(store.getState()), null,
|
||||
|
@ -63,11 +55,6 @@ add_task(async function() {
|
|||
|
||||
EventUtils.sendMouseEvent({ type: "click" }, 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(!!document.querySelector(".network-details-panel"), false,
|
||||
"The details pane should now be hidden after the toggle button was pressed again.");
|
||||
is(getSelectedRequest(store.getState()), null,
|
||||
|
|
|
@ -24,8 +24,7 @@ add_task(async function() {
|
|||
|
||||
// Wait for all tree view updated by react
|
||||
wait = waitForDOM(document, "#headers-panel .tree-section .treeLabel", 3);
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#headers-tab"));
|
||||
await wait;
|
||||
|
|
|
@ -24,8 +24,7 @@ add_task(async function() {
|
|||
|
||||
// Wait for all tree view updated by react
|
||||
wait = waitForDOM(document, "#params-panel .tree-section");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#params-tab"));
|
||||
await wait;
|
||||
|
|
|
@ -184,8 +184,7 @@ add_task(async function() {
|
|||
await networkEvent;
|
||||
|
||||
let wait = waitForDOM(getDoc(), ".network-details-panel");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
getDoc().querySelector(".network-details-panel-toggle"));
|
||||
getStore().dispatch(Actions.toggleNetworkDetails());
|
||||
await wait;
|
||||
}
|
||||
|
||||
|
|
|
@ -24,8 +24,7 @@ add_task(async function() {
|
|||
});
|
||||
await wait;
|
||||
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#security-tab"));
|
||||
await waitUntil(() => document.querySelector(
|
||||
|
|
|
@ -23,8 +23,7 @@ add_task(async function() {
|
|||
await requestsDone;
|
||||
|
||||
let securityInfoLoaded = waitForDOM(document, ".security-info-value");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
|
||||
await waitUntil(() => document.querySelector("#security-tab"));
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
|
|
|
@ -35,8 +35,7 @@ add_task(async function() {
|
|||
is(!!document.querySelector(".network-details-panel"), false,
|
||||
"The network details panel should still be hidden after first request.");
|
||||
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
|
||||
isnot(getSelectedRequest(store.getState()), undefined,
|
||||
"There should be a selected item in the requests menu.");
|
||||
|
|
|
@ -21,9 +21,6 @@ add_task(async function() {
|
|||
|
||||
store.dispatch(Actions.batchEnable(false));
|
||||
|
||||
is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
|
||||
true,
|
||||
"The pane toggle button should be disabled when the frontend is opened.");
|
||||
ok(document.querySelector(".request-list-empty-notice"),
|
||||
"An empty notice should be displayed when the frontend is opened.");
|
||||
is(store.getState().requests.requests.size, 0,
|
||||
|
@ -33,9 +30,6 @@ add_task(async function() {
|
|||
|
||||
await reloadAndWait();
|
||||
|
||||
is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
|
||||
false,
|
||||
"The pane toggle button should be enabled after the first request.");
|
||||
ok(!document.querySelector(".request-list-empty-notice"),
|
||||
"The empty notice should be hidden after the first request.");
|
||||
is(store.getState().requests.requests.size, 1,
|
||||
|
@ -45,9 +39,6 @@ add_task(async function() {
|
|||
|
||||
await reloadAndWait();
|
||||
|
||||
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(".request-list-empty-notice"),
|
||||
"The empty notice should be still hidden after a reload.");
|
||||
is(store.getState().requests.requests.size, 1,
|
||||
|
@ -57,9 +48,6 @@ add_task(async function() {
|
|||
|
||||
store.dispatch(Actions.clearRequests());
|
||||
|
||||
is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
|
||||
true,
|
||||
"The pane toggle button should be disabled when after clear.");
|
||||
ok(document.querySelector(".request-list-empty-notice"),
|
||||
"An empty notice should be displayed again after clear.");
|
||||
is(store.getState().requests.requests.size, 0,
|
||||
|
|
|
@ -51,8 +51,7 @@ add_task(async function() {
|
|||
await performRequestsInContent(requests);
|
||||
await wait;
|
||||
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
|
||||
isnot(getSelectedRequest(store.getState()), undefined,
|
||||
"There should be a selected item in the requests menu.");
|
||||
|
|
|
@ -51,8 +51,7 @@ add_task(async function() {
|
|||
await performRequestsInContent(requests);
|
||||
await wait;
|
||||
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
|
||||
isnot(getSelectedRequest(store.getState()), undefined,
|
||||
"There should be a selected item in the requests menu.");
|
||||
|
|
|
@ -57,8 +57,7 @@ add_task(async function() {
|
|||
});
|
||||
|
||||
wait = waitForDOM(document, "#response-panel");
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector(".network-details-panel-toggle"));
|
||||
store.dispatch(Actions.toggleNetworkDetails());
|
||||
EventUtils.sendMouseEvent({ type: "click" },
|
||||
document.querySelector("#response-tab"));
|
||||
await wait;
|
||||
|
|
Загрузка…
Ссылка в новой задаче