Bug 997065 - Don't render multiple request header blocks if a request is inspected before it is finished. r=vporof

This commit is contained in:
Sami Jaktholm 2014-07-02 10:16:00 -04:00
parent 772ce61f5f
commit e2c94d316f
4 changed files with 351 additions and 146 deletions

View File

@ -1944,6 +1944,19 @@ function NetworkDetailsView() {
};
NetworkDetailsView.prototype = {
/**
* An object containing the state of tabs.
*/
_viewState: {
// if updating[tab] is true a task is currently updating the given tab.
updating: [],
// if dirty[tab] is true, the tab needs to be repopulated once current
// update task finishes
dirty: [],
// the most recently received attachment data for the request
latestData: null,
},
/**
* Initialization function, called when the network monitor is started.
*/
@ -2049,7 +2062,19 @@ NetworkDetailsView.prototype = {
return;
}
let viewState = this._viewState;
if (viewState.updating[tab]) {
// A task is currently updating this tab. If we started another update
// task now it would result in a duplicated content as described in bugs
// 997065 and 984687. As there's no way to stop the current task mark the
// tab dirty and refresh the panel once the current task finishes.
viewState.dirty[tab] = true;
viewState.latestData = src;
return;
}
Task.spawn(function*() {
viewState.updating[tab] = true;
switch (tab) {
case 0: // "Headers"
yield view._setSummary(src);
@ -2079,13 +2104,32 @@ NetworkDetailsView.prototype = {
yield view._setHtmlPreview(src.responseContent);
break;
}
populated[tab] = true;
window.emit(EVENTS.TAB_UPDATED);
viewState.updating[tab] = false;
}).then(() => {
if (tab == this.widget.selectedIndex) {
if (viewState.dirty[tab]) {
// The request information was updated while the task was running.
viewState.dirty[tab] = false;
view.populate(viewState.latestData);
}
else {
// Tab is selected but not dirty. We're done here.
populated[tab] = true;
window.emit(EVENTS.TAB_UPDATED);
if (NetMonitorController.isConnected()) {
NetMonitorView.RequestsMenu.ensureSelectedItemIsVisible();
if (NetMonitorController.isConnected()) {
NetMonitorView.RequestsMenu.ensureSelectedItemIsVisible();
}
}
}
});
else {
if (viewState.dirty[tab]) {
// Tab is dirty but no longer selected. Don't refresh it now, it'll be
// done if the tab is shown again.
viewState.dirty[tab] = false;
}
}
}, Cu.reportError);
},
/**

View File

@ -52,6 +52,7 @@ support-files =
[browser_net_copy_as_curl.js]
[browser_net_cyrillic-01.js]
[browser_net_cyrillic-02.js]
[browser_net_details-no-duplicated-content.js]
[browser_net_filter-01.js]
[browser_net_filter-02.js]
[browser_net_filter-03.js]

View File

@ -0,0 +1,112 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// A test to ensure that the content in details pane is not duplicated.
let test = Task.async(function* () {
info("Initializing test");
let [tab, debuggee, monitor] = yield initNetMonitor(CUSTOM_GET_URL);
let panel = monitor.panelWin;
let { NetMonitorView, EVENTS } = panel;
let { RequestsMenu, NetworkDetails } = NetMonitorView;
let TEST_CASES = [
{
desc: "Test headers tab",
pageURI: CUSTOM_GET_URL,
isPost: false,
tabIndex: 0,
variablesView: NetworkDetails._headers,
expectedScopeLength: 2,
},
{
desc: "Test cookies tab",
pageURI: CUSTOM_GET_URL,
isPost: false,
tabIndex: 1,
variablesView: NetworkDetails._cookies,
expectedScopeLength: 1,
},
{
desc: "Test params tab",
pageURI: POST_RAW_URL,
isPost: true,
tabIndex: 2,
variablesView: NetworkDetails._params,
expectedScopeLength: 1,
},
];
info("Adding a cookie for the \"Cookie\" tab test");
debuggee.document.cookie = "a=b; Max-Age=10; path=" + CUSTOM_GET_URL;
is(debuggee.document.cookie, "a=b", "Cookie was added.")
info("Running tests");
for (let spec of TEST_CASES) {
yield runTestCase(spec);
}
// Remove the cookie. If an error occurs Max-Age ensures it doesn't stay to
// mess with the tests.
info("Removing the added cookie.");
debuggee.document.cookie = "a=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
is(debuggee.document.cookie, "", "Cookie was removed.");
yield teardown(monitor);
finish();
/**
* A helper that handles the execution of each case.
*/
function* runTestCase(spec) {
info("Running case: " + spec.desc);
debuggee.content.location = spec.pageURI;
yield waitForNetworkEvents(monitor, 1);
RequestsMenu.clear();
yield waitForFinalDetailTabUpdate(spec.tabIndex, spec.isPost);
is(spec.variablesView._store.length, spec.expectedScopeLength,
"View contains " + spec.expectedScopeLength + " scope headers");
}
/**
* A helper that prepares the variables view for the actual testing. It
* - selects the correct tab
* - performs the specified request
* - opens the details view
* - waits for the final update to happen
*/
function* waitForFinalDetailTabUpdate(tabIndex, isPost) {
let onNetworkEvent = waitFor(panel, EVENTS.NETWORK_EVENT);
let onDetailsPopulated = waitFor(panel, EVENTS.NETWORKDETAILSVIEW_POPULATED);
let onRequestFinished = isPost ?
waitForNetworkEvents(monitor, 0, 1) : waitForNetworkEvents(monitor, 1);
info("Performing a request");
debuggee.performRequests(1, null);
info("Waiting for NETWORK_EVENT");
yield onNetworkEvent;
ok(true, "Received NETWORK_EVENT. Selecting the item.");
let item = RequestsMenu.getItemAtIndex(0);
RequestsMenu.selectedItem = item;
info("Item selected. Waiting for NETWORKDETAILSVIEW_POPULATED");
yield onDetailsPopulated;
info("Selecting tab at index " + tabIndex);
NetworkDetails.widget.selectedIndex = tabIndex;
ok(true, "Received NETWORKDETAILSVIEW_POPULATED. Waiting for request to finish");
yield onRequestFinished;
ok(true, "Request finished. Waiting for tab update to complete");
let onDetailsUpdateFinished = waitFor(panel, EVENTS.TAB_UPDATED);
yield onDetailsUpdateFinished;
ok(true, "Details were updated");
}
});

View File

@ -1,155 +1,203 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
/**
* Tests if requests display the correct status code and text in the UI.
*/
function test() {
initNetMonitor(STATUS_CODES_URL).then(([aTab, aDebuggee, aMonitor]) => {
info("Starting test... ");
let test = Task.async(function*() {
let [tab, debuggee, monitor] = yield initNetMonitor(STATUS_CODES_URL);
let { document, L10N, NetMonitorView } = aMonitor.panelWin;
let { RequestsMenu, NetworkDetails } = NetMonitorView;
info("Starting test... ");
RequestsMenu.lazyUpdate = false;
NetworkDetails._params.lazyEmpty = false;
let { document, L10N, NetMonitorView } = monitor.panelWin;
let { RequestsMenu, NetworkDetails } = NetMonitorView;
let requestItems = [];
waitForNetworkEvents(aMonitor, 5).then(() => {
let requestItems = [];
RequestsMenu.lazyUpdate = false;
NetworkDetails._params.lazyEmpty = false;
verifyRequestItemTarget(requestItems[0] = RequestsMenu.getItemAtIndex(0),
"GET", STATUS_CODES_SJS + "?sts=100", {
status: 101,
statusText: "Switching Protocols",
type: "plain",
fullMimeType: "text/plain; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0),
time: true
});
verifyRequestItemTarget(requestItems[1] = RequestsMenu.getItemAtIndex(1),
"GET", STATUS_CODES_SJS + "?sts=200", {
status: 202,
statusText: "Created",
type: "plain",
fullMimeType: "text/plain; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0.02),
time: true
});
verifyRequestItemTarget(requestItems[2] = RequestsMenu.getItemAtIndex(2),
"GET", STATUS_CODES_SJS + "?sts=300", {
status: 303,
statusText: "See Other",
type: "plain",
fullMimeType: "text/plain; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0),
time: true
});
verifyRequestItemTarget(requestItems[3] = RequestsMenu.getItemAtIndex(3),
"GET", STATUS_CODES_SJS + "?sts=400", {
status: 404,
statusText: "Not Found",
type: "plain",
fullMimeType: "text/plain; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0.02),
time: true
});
verifyRequestItemTarget(requestItems[4] = RequestsMenu.getItemAtIndex(4),
"GET", STATUS_CODES_SJS + "?sts=500", {
status: 501,
statusText: "Not Implemented",
type: "plain",
fullMimeType: "text/plain; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0.02),
time: true
});
// Test summaries...
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll("#details-pane tab")[0]);
EventUtils.sendMouseEvent({ type: "mousedown" }, requestItems[0].target);
testSummary("GET", STATUS_CODES_SJS + "?sts=100", "101", "Switching Protocols");
EventUtils.sendMouseEvent({ type: "mousedown" }, requestItems[1].target);
testSummary("GET", STATUS_CODES_SJS + "?sts=200", "202", "Created");
EventUtils.sendMouseEvent({ type: "mousedown" }, requestItems[2].target);
testSummary("GET", STATUS_CODES_SJS + "?sts=300", "303", "See Other");
EventUtils.sendMouseEvent({ type: "mousedown" }, requestItems[3].target);
testSummary("GET", STATUS_CODES_SJS + "?sts=400", "404", "Not Found");
EventUtils.sendMouseEvent({ type: "mousedown" }, requestItems[4].target);
testSummary("GET", STATUS_CODES_SJS + "?sts=500", "501", "Not Implemented");
// Test params...
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll("#details-pane tab")[2]);
EventUtils.sendMouseEvent({ type: "mousedown" }, requestItems[0].target);
testParamsTab("\"100\"");
EventUtils.sendMouseEvent({ type: "mousedown" }, requestItems[1].target);
testParamsTab("\"200\"");
EventUtils.sendMouseEvent({ type: "mousedown" }, requestItems[2].target);
testParamsTab("\"300\"");
EventUtils.sendMouseEvent({ type: "mousedown" }, requestItems[3].target);
testParamsTab("\"400\"");
EventUtils.sendMouseEvent({ type: "mousedown" }, requestItems[4].target);
testParamsTab("\"500\"");
// We're done here.
teardown(aMonitor).then(finish);
function testSummary(aMethod, aUrl, aStatus, aStatusText) {
let tab = document.querySelectorAll("#details-pane tab")[0];
let tabpanel = document.querySelectorAll("#details-pane tabpanel")[0];
is(tabpanel.querySelector("#headers-summary-url-value").getAttribute("value"),
aUrl, "The url summary value is incorrect.");
is(tabpanel.querySelector("#headers-summary-method-value").getAttribute("value"),
aMethod, "The method summary value is incorrect.");
is(tabpanel.querySelector("#headers-summary-status-circle").getAttribute("code"),
aStatus, "The status summary code is incorrect.");
is(tabpanel.querySelector("#headers-summary-status-value").getAttribute("value"),
aStatus + " " + aStatusText, "The status summary value is incorrect.");
const REQUEST_DATA = [
{ // request #0
method: "GET",
uri: STATUS_CODES_SJS + "?sts=100",
details: {
status: 101,
statusText: "Switching Protocols",
type: "plain",
fullMimeType: "text/plain; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0),
time: true
}
function testParamsTab(aStatusParamValue) {
let tab = document.querySelectorAll("#details-pane tab")[2];
let tabpanel = document.querySelectorAll("#details-pane tabpanel")[2];
is(tabpanel.querySelectorAll(".variables-view-scope").length, 1,
"There should be 1 param scope displayed in this tabpanel.");
is(tabpanel.querySelectorAll(".variable-or-property").length, 1,
"There should be 1 param value displayed in this tabpanel.");
is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
"The empty notice should not be displayed in this tabpanel.");
let paramsScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
is(paramsScope.querySelector(".name").getAttribute("value"),
L10N.getStr("paramsQueryString"),
"The params scope doesn't have the correct title.");
is(paramsScope.querySelectorAll(".variables-view-variable .name")[0].getAttribute("value"),
"sts", "The param name was incorrect.");
is(paramsScope.querySelectorAll(".variables-view-variable .value")[0].getAttribute("value"),
aStatusParamValue, "The param value was incorrect.");
is(tabpanel.querySelector("#request-params-box")
.hasAttribute("hidden"), false,
"The request params box should not be hidden.");
is(tabpanel.querySelector("#request-post-data-textarea-box")
.hasAttribute("hidden"), true,
"The request post data textarea box should be hidden.");
},
{ // request #1
method: "GET",
uri: STATUS_CODES_SJS + "?sts=200",
details: {
status: 202,
statusText: "Created",
type: "plain",
fullMimeType: "text/plain; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0.02),
time: true
}
});
},
{ // request #2
method: "GET",
uri: STATUS_CODES_SJS + "?sts=300",
details: {
status: 303,
statusText: "See Other",
type: "plain",
fullMimeType: "text/plain; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0),
time: true
}
},
{ // request #3
method: "GET",
uri: STATUS_CODES_SJS + "?sts=400",
details: {
status: 404,
statusText: "Not Found",
type: "plain",
fullMimeType: "text/plain; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0.02),
time: true
}
},
{ // request #4
method: "GET",
uri: STATUS_CODES_SJS + "?sts=500",
details: {
status: 501,
statusText: "Not Implemented",
type: "plain",
fullMimeType: "text/plain; charset=utf-8",
size: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0.02),
time: true
}
}
];
aDebuggee.performRequests();
});
}
debuggee.performRequests();
yield waitForNetworkEvents(monitor, 5);
info("Performing tests");
yield verifyRequests();
yield testTab(0, testSummary);
yield testTab(2, testParams);
yield teardown(monitor);
finish();
/**
* A helper that verifies all requests show the correct information and caches
* RequestsMenu items to requestItems array.
*/
function* verifyRequests() {
info("Verifying requests contain correct information.");
let index = 0;
for (let request of REQUEST_DATA) {
let item = RequestsMenu.getItemAtIndex(index);
requestItems[index] = item;
info("Verifying request #" + index);
yield verifyRequestItemTarget(item, request.method, request.uri, request.details);
index++;
}
}
/**
* A helper that opens a given tab of request details pane, selects and passes
* all requests to the given test function.
*
* @param Number tab
* The index of NetworkDetails tab to activate.
* @param Function testFn(requestItem)
* A function that should perform all necessary tests. It's called once
* for every item of REQUEST_DATA with that item being selected in the
* NetworkMonitor.
*/
function* testTab(tab, testFn) {
info("Testing tab #" + tab);
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll("#details-pane tab")[tab]);
let counter = 0;
for (let item of REQUEST_DATA) {
info("Waiting tab #" + tab + " to update with request #" + counter);
yield chooseRequest(counter);
info("Tab updated. Performing checks");
yield testFn(item);
counter++;
}
}
/**
* A function that tests "Summary" contains correct information.
*/
function* testSummary(data) {
let tab = document.querySelectorAll("#details-pane tab")[0];
let tabpanel = document.querySelectorAll("#details-pane tabpanel")[0];
let { method, uri, details: { status, statusText } } = data;
is(tabpanel.querySelector("#headers-summary-url-value").getAttribute("value"),
uri, "The url summary value is incorrect.");
is(tabpanel.querySelector("#headers-summary-method-value").getAttribute("value"),
method, "The method summary value is incorrect.");
is(tabpanel.querySelector("#headers-summary-status-circle").getAttribute("code"),
status, "The status summary code is incorrect.");
is(tabpanel.querySelector("#headers-summary-status-value").getAttribute("value"),
status + " " + statusText, "The status summary value is incorrect.");
}
/**
* A function that tests "Params" tab contains correct information.
*/
function* testParams(data) {
let tab = document.querySelectorAll("#details-pane tab")[2];
let tabpanel = document.querySelectorAll("#details-pane tabpanel")[2];
let statusParamValue = data.uri.split("=").pop();
let statusParamShownValue = "\"" + statusParamValue + "\"";
is(tabpanel.querySelectorAll(".variables-view-scope").length, 1,
"There should be 1 param scope displayed in this tabpanel.");
is(tabpanel.querySelectorAll(".variable-or-property").length, 1,
"There should be 1 param value displayed in this tabpanel.");
is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
"The empty notice should not be displayed in this tabpanel.");
let paramsScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
is(paramsScope.querySelector(".name").getAttribute("value"),
L10N.getStr("paramsQueryString"),
"The params scope doesn't have the correct title.");
is(paramsScope.querySelectorAll(".variables-view-variable .name")[0].getAttribute("value"),
"sts", "The param name was incorrect.");
is(paramsScope.querySelectorAll(".variables-view-variable .value")[0].getAttribute("value"),
statusParamShownValue, "The param value was incorrect.");
is(tabpanel.querySelector("#request-params-box")
.hasAttribute("hidden"), false,
"The request params box should not be hidden.");
is(tabpanel.querySelector("#request-post-data-textarea-box")
.hasAttribute("hidden"), true,
"The request post data textarea box should be hidden.");
}
/**
* A helper that clicks on a specified request and returns a promise resolved
* when NetworkDetails has been populated with the data of the given request.
*/
function chooseRequest(index) {
EventUtils.sendMouseEvent({ type: "mousedown" }, requestItems[index].target);
return waitFor(monitor.panelWin, monitor.panelWin.EVENTS.TAB_UPDATED);
}
});