Bug 970815 - Clicking on a slice in the performance view doesn't sort the requests by the respective type only, r=rcampbell

This commit is contained in:
Victor Porof 2014-02-11 11:55:07 -05:00
parent 79ed5031f6
commit a8e11c1746
7 changed files with 114 additions and 101 deletions

View File

@ -590,6 +590,17 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
this.refreshZebra();
},
/**
* Same as `filterOn`, except that it only allows a single type exclusively.
*
* @param string aType
* @see RequestsMenuView.prototype.fitlerOn
*/
filterOnlyOn: function(aType = "all") {
this._activeFilters.slice().forEach(this._disableFilter, this);
this.filterOn(aType);
},
/**
* Disables the given filter, its button and toggles 'all' on if the filter to
* be disabled is the last one active.
@ -2465,7 +2476,7 @@ PerformanceStatisticsView.prototype = {
});
chart.on("click", (_, item) => {
NetMonitorView.RequestsMenu.filterOn(item.label);
NetMonitorView.RequestsMenu.filterOnlyOn(item.label);
NetMonitorView.showNetworkInspectorView();
});

View File

@ -69,6 +69,7 @@ support-files =
[browser_net_sort-03.js]
[browser_net_statistics-01.js]
[browser_net_statistics-02.js]
[browser_net_statistics-03.js]
[browser_net_status-codes.js]
[browser_net_timeline_ticks.js]
[browser_net_timing-division.js]

View File

@ -25,59 +25,59 @@ function test() {
"The details pane should not be hidden after toggle button was pressed.");
// First test with single filters...
testButtons("all");
testFilterButtons(aMonitor, "all");
testContents([1, 1, 1, 1, 1, 1, 1, 1])
.then(() => {
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
testButtons("html");
testFilterButtons(aMonitor, "html");
return testContents([1, 0, 0, 0, 0, 0, 0, 0]);
})
.then(() => {
// Reset filters
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-css-button"));
testButtons("css");
testFilterButtons(aMonitor, "css");
return testContents([0, 1, 0, 0, 0, 0, 0, 0]);
})
.then(() => {
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-js-button"));
testButtons("js");
testFilterButtons(aMonitor, "js");
return testContents([0, 0, 1, 0, 0, 0, 0, 0]);
})
.then(() => {
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-xhr-button"));
testButtons("xhr");
testFilterButtons(aMonitor, "xhr");
return testContents([1, 1, 1, 1, 1, 1, 1, 1]);
})
.then(() => {
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-fonts-button"));
testButtons("fonts");
testFilterButtons(aMonitor, "fonts");
return testContents([0, 0, 0, 1, 0, 0, 0, 0]);
})
.then(() => {
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-images-button"));
testButtons("images");
testFilterButtons(aMonitor, "images");
return testContents([0, 0, 0, 0, 1, 0, 0, 0]);
})
.then(() => {
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-media-button"));
testButtons("media");
testFilterButtons(aMonitor, "media");
return testContents([0, 0, 0, 0, 0, 1, 1, 0]);
})
.then(() => {
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-flash-button"));
testButtons("flash");
testFilterButtons(aMonitor, "flash");
return testContents([0, 0, 0, 0, 0, 0, 0, 1]);
})
.then(() => {
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
testButtons("all");
testFilterButtons(aMonitor, "all");
return testContents([1, 1, 1, 1, 1, 1, 1, 1]);
})
// ...then combine multiple filters together.
@ -85,34 +85,34 @@ function test() {
// Enable filtering for html and css; should show request of both type.
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-css-button"));
testButtonsCustom([0, 1, 1, 0, 0, 0, 0, 0, 0, 0]);
testFilterButtonsCustom(aMonitor, [0, 1, 1, 0, 0, 0, 0, 0, 0, 0]);
return testContents([1, 1, 0, 0, 0, 0, 0, 0]);
})
.then(() => {
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-flash-button"));
testButtonsCustom([0, 1, 1, 0, 0, 0, 0, 0, 1, 0]);
testFilterButtonsCustom(aMonitor, [0, 1, 1, 0, 0, 0, 0, 0, 1, 0]);
return testContents([1, 1, 0, 0, 0, 0, 0, 1]);
})
.then(() => {
// 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"));
testButtons("html");
testFilterButtons(aMonitor, "html");
return testContents([1, 0, 0, 0, 0, 0, 0, 0]);
})
.then(() => {
// Disable last active filter. Should toggle to all.
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
testButtons("all");
testFilterButtons(aMonitor, "all");
return testContents([1, 1, 1, 1, 1, 1, 1, 1]);
})
.then(() => {
// 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"));
testButtonsCustom([0, 1, 1, 0, 0, 0, 0, 0, 0]);
testFilterButtonsCustom(aMonitor, [0, 1, 1, 0, 0, 0, 0, 0, 0]);
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
testButtons("all");
testFilterButtons(aMonitor, "all");
return testContents([1, 1, 1, 1, 1, 1, 1, 1]);
})
.then(() => {
@ -121,48 +121,6 @@ function test() {
.then(finish);
});
/**
* Tests if a button for a filter of given type is the only one checked.
*
* @param string aFilterType
* The type of the filter that should be the only one checked.
*
*/
function testButtons(aFilterType) {
let doc = aMonitor.panelWin.document;
let target = doc.querySelector("#requests-menu-filter-" + aFilterType + "-button");
let buttons = doc.querySelectorAll(".requests-menu-footer-button");
// Only target should be checked.
let checkStatus = [(button == target) ? 1 : 0 for (button of buttons)]
testButtonsCustom(checkStatus);
}
/**
* Tests if filter buttons have 'checked' attributes set correctly.
*
* @param array aIsChecked
* An array specifying if a button at given index should have a
* 'checked' attribute. For example, if the third item of the array
* evaluates to true, the third button should be checked.
*
*/
function testButtonsCustom(aIsChecked) {
let doc = aMonitor.panelWin.document;
let buttons = doc.querySelectorAll(".requests-menu-footer-button");
for (let i = 0; i < aIsChecked.length; i++) {
let button = buttons[i];
if (aIsChecked[i]) {
is(button.hasAttribute("checked"), true,
"The " + button.id + " button should have a 'checked' attribute.");
} else {
is(button.hasAttribute("checked"), false,
"The " + button.id + " button should not have a 'checked' attribute.");
}
}
}
function testContents(aVisibility) {
isnot(RequestsMenu.selectedItem, null,
"There should still be a selected item after filtering.");

View File

@ -24,12 +24,12 @@ function test() {
is(NetMonitorView.detailsPaneHidden, false,
"The details pane should not be hidden after toggle button was pressed.");
testButtons("all");
testFilterButtons(aMonitor, "all");
testContents([1, 1, 1, 1, 1, 1, 1, 1])
.then(() => {
info("Testing html filtering.");
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
testButtons("html");
testFilterButtons(aMonitor, "html");
return testContents([1, 0, 0, 0, 0, 0, 0, 0]);
})
.then(() => {
@ -39,7 +39,7 @@ function test() {
})
.then(() => {
info("Testing html filtering again.");
testButtons("html");
testFilterButtons(aMonitor, "html");
return testContents([1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0]);
})
.then(() => {
@ -49,13 +49,13 @@ function test() {
})
.then(() => {
info("Testing html filtering again.");
testButtons("html");
testFilterButtons(aMonitor, "html");
return testContents([1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0]);
})
.then(() => {
info("Resetting filters.");
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
testButtons("all");
testFilterButtons(aMonitor, "all");
return 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]);
})
.then(() => {
@ -64,22 +64,6 @@ function test() {
.then(finish);
});
function testButtons(aFilterType) {
let doc = aMonitor.panelWin.document;
let target = doc.querySelector("#requests-menu-filter-" + aFilterType + "-button");
let buttons = doc.querySelectorAll(".requests-menu-footer-button");
for (let button of buttons) {
if (button != target) {
is(button.hasAttribute("checked"), false,
"The " + button.id + " button should not have a 'checked' attribute.");
} else {
is(button.hasAttribute("checked"), true,
"The " + button.id + " button should have a 'checked' attribute.");
}
}
}
function testContents(aVisibility) {
isnot(RequestsMenu.selectedItem, null,
"There should still be a selected item after filtering.");

View File

@ -25,18 +25,18 @@ function test() {
is(NetMonitorView.detailsPaneHidden, false,
"The details pane should not be hidden after toggle button was pressed.");
testButtons("all");
testFilterButtons(aMonitor, "all");
testContents([0, 1, 2, 3, 4, 5, 6], 7, 0)
.then(() => {
info("Sorting by size, ascending.");
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
testButtons("all");
testFilterButtons(aMonitor, "all");
return testContents([6, 4, 5, 0, 1, 2, 3], 7, 6);
})
.then(() => {
info("Testing html filtering.");
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
testButtons("html");
testFilterButtons(aMonitor, "html");
return testContents([6, 4, 5, 0, 1, 2, 3], 1, 6);
})
.then(() => {
@ -47,7 +47,7 @@ function test() {
.then(() => {
info("Testing html filtering again.");
resetSorting();
testButtons("html");
testFilterButtons(aMonitor, "html");
return testContents([8, 13, 9, 11, 10, 12, 0, 4, 1, 5, 2, 6, 3, 7], 2, 13);
})
.then(() => {
@ -58,7 +58,7 @@ function test() {
.then(() => {
info("Testing html filtering again.");
resetSorting();
testButtons("html");
testFilterButtons(aMonitor, "html");
return testContents([12, 13, 20, 14, 16, 18, 15, 17, 19, 0, 4, 8, 1, 5, 9, 2, 6, 10, 3, 7, 11], 3, 20);
})
.then(() => {
@ -72,22 +72,6 @@ function test() {
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
}
function testButtons(aFilterType) {
let doc = aMonitor.panelWin.document;
let target = doc.querySelector("#requests-menu-filter-" + aFilterType + "-button");
let buttons = doc.querySelectorAll(".requests-menu-footer-button");
for (let button of buttons) {
if (button != target) {
is(button.hasAttribute("checked"), false,
"The " + button.id + " button should not have a 'checked' attribute.");
} else {
is(button.hasAttribute("checked"), true,
"The " + button.id + " button should have a 'checked' attribute.");
}
}
}
function testContents(aOrder, aVisible, aSelection) {
isnot(RequestsMenu.selectedItem, null,
"There should still be a selected item after filtering.");

View File

@ -0,0 +1,36 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
/**
* Test if the correct filtering predicates are used when filtering from
* the performance analysis view.
*/
function test() {
initNetMonitor(FILTERING_URL).then(([aTab, aDebuggee, aMonitor]) => {
info("Starting test... ");
let panel = aMonitor.panelWin;
let { $, EVENTS, NetMonitorView } = panel;
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-js-button"));
EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-other-button"));
testFilterButtonsCustom(aMonitor, [0, 1, 1, 1, 0, 0, 0, 0, 0, 1]);
ok(true, "The correct filtering predicates are used before entering perf. analysis mode.");
promise.all([
waitFor(panel, EVENTS.PRIMED_CACHE_CHART_DISPLAYED),
waitFor(panel, EVENTS.EMPTY_CACHE_CHART_DISPLAYED)
]).then(() => {
EventUtils.sendMouseEvent({ type: "click" }, $(".pie-chart-slice"));
testFilterButtons(aMonitor, "html");
ok(true, "The correct filtering predicate is used when exiting perf. analysis mode.");
teardown(aMonitor).then(finish);
});
NetMonitorView.toggleFrontendMode();
});
}

View File

@ -307,3 +307,42 @@ function waitFor (subject, eventName) {
subject.once(eventName, deferred.resolve);
return deferred.promise;
}
/**
* Tests if a button for a filter of given type is the only one checked.
*
* @param string aFilterType
* The type of the filter that should be the only one checked.
*/
function testFilterButtons(aMonitor, aFilterType) {
let doc = aMonitor.panelWin.document;
let target = doc.querySelector("#requests-menu-filter-" + aFilterType + "-button");
let buttons = doc.querySelectorAll(".requests-menu-footer-button");
// Only target should be checked.
let checkStatus = [(button == target) ? 1 : 0 for (button of buttons)]
testFilterButtonsCustom(aMonitor, checkStatus);
}
/**
* Tests if filter buttons have 'checked' attributes set correctly.
*
* @param array aIsChecked
* An array specifying if a button at given index should have a
* 'checked' attribute. For example, if the third item of the array
* evaluates to true, the third button should be checked.
*/
function testFilterButtonsCustom(aMonitor, aIsChecked) {
let doc = aMonitor.panelWin.document;
let buttons = doc.querySelectorAll(".requests-menu-footer-button");
for (let i = 0; i < aIsChecked.length; i++) {
let button = buttons[i];
if (aIsChecked[i]) {
is(button.hasAttribute("checked"), true,
"The " + button.id + " button should have a 'checked' attribute.");
} else {
is(button.hasAttribute("checked"), false,
"The " + button.id + " button should not have a 'checked' attribute.");
}
}
}