1 files changed, 105 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/src/widgets/RequestListHeaderContextMenu.js b/devtools/client/netmonitor/src/widgets/RequestListHeaderContextMenu.js
new file mode 100644
index 0000000000..02ee502790
--- /dev/null
+++ b/devtools/client/netmonitor/src/widgets/RequestListHeaderContextMenu.js
@@ -0,0 +1,105 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+"use strict";
+
+const {
+  showMenu,
+} = require("resource://devtools/client/shared/components/menu/utils.js");
+const {
+  HEADERS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  getVisibleColumns,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+const stringMap = HEADERS.filter(header =>
+  header.hasOwnProperty("label")
+).reduce((acc, { name, label }) => Object.assign(acc, { [name]: label }), {});
+
+const subMenuMap = HEADERS.filter(header =>
+  header.hasOwnProperty("subMenu")
+).reduce(
+  (acc, { name, subMenu }) => Object.assign(acc, { [name]: subMenu }),
+  {}
+);
+
+const nonLocalizedHeaders = HEADERS.filter(header =>
+  header.hasOwnProperty("noLocalization")
+).map(header => header.name);
+
+class RequestListHeaderContextMenu {
+  constructor(props) {
+    this.props = props;
+  }
+
+  /**
+   * Handle the context menu opening.
+   */
+  open(event = {}, columns) {
+    const menu = [];
+    const subMenu = { timings: [], responseHeaders: [] };
+    const onlyOneColumn = getVisibleColumns(columns).length === 1;
+
+    for (const column in columns) {
+      const shown = columns[column];
+      const label = nonLocalizedHeaders.includes(column)
+        ? stringMap[column] || column
+        : L10N.getStr(`netmonitor.toolbar.${stringMap[column] || column}`);
+      const entry = {
+        id: `request-list-header-${column}-toggle`,
+        label,
+        type: "checkbox",
+        checked: shown,
+        click: () => this.props.toggleColumn(column),
+        // We don't want to allow hiding the last visible column
+        disabled: onlyOneColumn && shown,
+      };
+      subMenuMap.hasOwnProperty(column)
+        ? subMenu[subMenuMap[column]].push(entry)
+        : menu.push(entry);
+    }
+
+    menu.push({ type: "separator" });
+    menu.push({
+      label: L10N.getStr("netmonitor.toolbar.timings"),
+      submenu: subMenu.timings,
+    });
+    menu.push({
+      label: L10N.getStr("netmonitor.toolbar.responseHeaders"),
+      submenu: subMenu.responseHeaders,
+    });
+
+    menu.push({ type: "separator" });
+    menu.push({
+      id: "request-list-header-reset-columns",
+      label: L10N.getStr("netmonitor.toolbar.resetColumns"),
+      click: () => this.props.resetColumns(),
+    });
+
+    menu.push({
+      id: "request-list-header-reset-sorting",
+      label: L10N.getStr("netmonitor.toolbar.resetSorting"),
+      click: () => this.props.resetSorting(),
+    });
+
+    const columnName = event.target.getAttribute("data-name");
+
+    menu.push({
+      id: "request-list-header-resize-column-to-fit-content",
+      label: L10N.getStr("netmonitor.toolbar.resizeColumnToFitContent"),
+      click: () => this.props.resizeColumnToFitContent(columnName),
+    });
+
+    showMenu(menu, {
+      screenX: event.screenX,
+      screenY: event.screenY,
+    });
+  }
+}
+
+module.exports = RequestListHeaderContextMenu;