Bug 1353716 - Netmonitor header context menu should appear even by right clicking a blank area of the header. r=Honza
authorabhinav <abhinav.koppula@gmail.com>
Sat, 11 Nov 2017 16:09:10 +0530
changeset 446453 7d99b84c4820b5e6da4f84e03fa90cc2026de07a
parent 446452 09c0a4c56c78e66f3584e765e2a5cf816fb423cf
child 446454 1dd02399f8727a33ee698a9e20f6800880247b9d
push id1648
push usermtabara@mozilla.com
push dateThu, 01 Mar 2018 12:45:47 +0000
treeherdermozilla-release@cbb9688c2eeb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1353716
milestone59.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1353716 - Netmonitor header context menu should appear even by right clicking a blank area of the header. r=Honza MozReview-Commit-ID: GT3MFn4Xloa
devtools/client/netmonitor/src/components/RequestListHeader.js
devtools/client/netmonitor/test/browser_net_columns_showhide.js
--- a/devtools/client/netmonitor/src/components/RequestListHeader.js
+++ b/devtools/client/netmonitor/src/components/RequestListHeader.js
@@ -98,17 +98,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;
 
@@ -122,17 +125,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`);