Bug 1449100 - Move network details panel toggle buton next to the sidebar tabs. r=Honza

This commit is contained in:
Gabriel Luong 2018-04-11 11:22:24 -04:00
Родитель 5a58c5d8bf
Коммит 2728a2b0e3
30 изменённых файлов: 79 добавлений и 204 удалений

Просмотреть файл

@ -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;