Bug 1353716 - Netmonitor header context menu should appear even by right clicking a blank area of the header. r=Honza
MozReview-Commit-ID: GT3MFn4Xloa
--- a/devtools/client/netmonitor/src/components/RequestListHeader.js
+++ b/devtools/client/netmonitor/src/components/RequestListHeader.js
@@ -100,17 +100,20 @@ class RequestListHeader extends Componen
}
}
render() {
let { columns, scale, sort, sortBy, waterfallWidth } = this.props;
return (
div({ className: "devtools-toolbar requests-list-headers-wrapper" },
- div({ className: "devtools-toolbar requests-list-headers" },
+ div({
+ className: "devtools-toolbar requests-list-headers",
+ onContextMenu: this.onContextMenu
+ },
HEADERS.filter((header) => columns.get(header.name)).map((header) => {
let name = header.name;
let boxName = header.boxName || name;
let label = header.noLocalization
? name : L10N.getStr(`netmonitor.toolbar.${header.label || name}`);
let sorted, sortedTitle;
let active = sort.type == name ? true : undefined;
@@ -124,17 +127,16 @@ class RequestListHeader extends Componen
return (
div({
id: `requests-list-${boxName}-header-box`,
className: `requests-list-column requests-list-${boxName}`,
key: name,
ref: `${name}Header`,
// Used to style the next column.
"data-active": active,
- onContextMenu: this.onContextMenu,
},
button({
id: `requests-list-${name}-button`,
className: `requests-list-header-button`,
"data-sorted": sorted,
title: sortedTitle ? `${label} (${sortedTitle})` : label,
onClick: () => sortBy(name),
},
--- a/devtools/client/netmonitor/test/browser_net_columns_showhide.js
+++ b/devtools/client/netmonitor/test/browser_net_columns_showhide.js
@@ -17,18 +17,38 @@ add_task(function* () {
if (shown) {
yield testVisibleColumnContextMenuItem(column, document, parent);
yield testHiddenColumnContextMenuItem(column, document, parent);
} else {
yield testHiddenColumnContextMenuItem(column, document, parent);
yield testVisibleColumnContextMenuItem(column, document, parent);
}
}
+
+ for (let [column, shown] of store.getState().ui.columns) {
+ if (shown) {
+ yield testVisibleColumnContextMenuItem(column, document, parent);
+ // Right click on the white-space for the context menu to appear
+ // and toggle column visibility
+ yield testWhiteSpaceContextMenuItem(column, document, parent);
+ }
+ }
});
+function* testWhiteSpaceContextMenuItem(column, document, parent) {
+ ok(!document.querySelector(`#requests-list-${column}-button`),
+ `Column ${column} should be hidden`);
+
+ info(`Right clicking on white-space in the header to get the context menu`);
+ EventUtils.sendMouseEvent({ type: "contextmenu" },
+ document.querySelector(".devtools-toolbar.requests-list-headers"));
+
+ yield toggleAndCheckColumnVisibility(column, document, parent);
+}
+
function* testVisibleColumnContextMenuItem(column, document, parent) {
ok(document.querySelector(`#requests-list-${column}-button`),
`Column ${column} should be visible`);
info(`Clicking context-menu item for ${column}`);
EventUtils.sendMouseEvent({ type: "contextmenu" },
document.querySelector("#requests-list-status-button") ||
document.querySelector("#requests-list-waterfall-button"));
@@ -54,16 +74,20 @@ function* testHiddenColumnContextMenuIte
ok(!document.querySelector(`#requests-list-${column}-button`),
`Column ${column} should be hidden`);
info(`Clicking context-menu item for ${column}`);
EventUtils.sendMouseEvent({ type: "contextmenu" },
document.querySelector("#requests-list-status-button") ||
document.querySelector("#requests-list-waterfall-button"));
+ yield toggleAndCheckColumnVisibility(column, document, parent);
+}
+
+function* toggleAndCheckColumnVisibility(column, document, parent) {
let menuItem = parent.document.querySelector(`#request-list-header-${column}-toggle`);
is(menuItem.getAttribute("type"), "checkbox",
`${column} menu item should have type="checkbox" attribute`);
ok(!menuItem.getAttribute("checked"),
`checked state of ${column} menu item should be correct`);
ok(!menuItem.disabled, `disabled state of ${column} menu item should be correct`);