--- a/devtools/client/netmonitor/components/request-list-content.js
+++ b/devtools/client/netmonitor/components/request-list-content.js
@@ -153,19 +153,19 @@ const RequestListContent = createClass({
     if (!itemId) {
       return false;
     }
     let requestItem = this.props.displayedRequests.find(r => r.id == itemId);
     if (!requestItem) {
       return false;
     }
 
-    if (requestItem.responseContent && target.closest(".requests-list-icon-and-file")) {
+    if (requestItem.responseContent && target.closest(".requests-menu-icon-and-file")) {
       return setTooltipImageContent(tooltip, itemEl, requestItem);
-    } else if (requestItem.cause && target.closest(".requests-list-cause-stack")) {
+    } else if (requestItem.cause && target.closest(".requests-menu-cause-stack")) {
       return setTooltipStackTraceContent(tooltip, requestItem);
     }
 
     return false;
   },
 
   /**
    * Scroll listener for the requests menu view.
@@ -232,17 +232,17 @@ const RequestListContent = createClass({
       selectedRequestId,
       onItemMouseDown,
       onSecurityIconClick,
     } = this.props;
 
     return (
       div({
         ref: "contentEl",
-        className: "requests-list-contents",
+        className: "requests-menu-contents",
         tabIndex: 0,
         onKeyDown: this.onKeyDown,
       },
         displayedRequests.map((item, index) => RequestListItem({
           firstRequestStartedMillis,
           item,
           index,
           isSelected: item.id === selectedRequestId,

--- a/devtools/client/netmonitor/components/request-list-empty.js
+++ b/devtools/client/netmonitor/components/request-list-empty.js
@@ -26,36 +26,36 @@ const RequestListEmptyNotice = createCla
   propTypes: {
     onReloadClick: PropTypes.func.isRequired,
     onPerfClick: PropTypes.func.isRequired,
   },
 
   render() {
     return div(
       {
-        id: "requests-list-empty-notice",
+        id: "requests-menu-empty-notice",
         className: "request-list-empty-notice",
       },
       div({ id: "notice-reload-message" },
         span(null, L10N.getStr("netmonitor.reloadNotice1")),
         button(
           {
-            id: "requests-list-reload-notice-button",
+            id: "requests-menu-reload-notice-button",
             className: "devtools-button",
             "data-standalone": true,
             onClick: this.props.onReloadClick,
           },
           L10N.getStr("netmonitor.reloadNotice2")
         ),
         span(null, L10N.getStr("netmonitor.reloadNotice3"))
       ),
       div({ id: "notice-perf-message" },
         span(null, L10N.getStr("netmonitor.perfNotice1")),
         button({
-          id: "requests-list-perf-notice-button",
+          id: "requests-menu-perf-notice-button",
           title: L10N.getStr("netmonitor.perfNotice3"),
           className: "devtools-button",
           "data-standalone": true,
           onClick: this.props.onPerfClick,
         }),
         span(null, L10N.getStr("netmonitor.perfNotice2"))
       )
     );

--- a/devtools/client/netmonitor/components/request-list-header.js
+++ b/devtools/client/netmonitor/components/request-list-header.js
@@ -73,17 +73,17 @@ const RequestListHeader = createClass({
       this.props.resizeWaterfall(width);
     });
   },
 
   render() {
     const { sort, scale, waterfallWidth, onHeaderClick } = this.props;
 
     return div(
-      { id: "requests-list-toolbar", className: "devtools-toolbar" },
+      { id: "requests-menu-toolbar", className: "devtools-toolbar" },
       div({ id: "toolbar-labels" },
         HEADERS.map(header => {
           const name = header.name;
           const boxName = header.boxName || name;
           const label = L10N.getStr(`netmonitor.toolbar.${header.label || name}`);
 
           let sorted, sortedTitle;
           const active = sort.type == name ? true : undefined;
@@ -91,27 +91,27 @@ const RequestListHeader = createClass({
             sorted = sort.ascending ? "ascending" : "descending";
             sortedTitle = L10N.getStr(sort.ascending
               ? "networkMenu.sortedAsc"
               : "networkMenu.sortedDesc");
           }
 
           return div(
             {
-              id: `requests-list-${boxName}-header-box`,
-              className: `requests-list-header requests-list-${boxName}`,
+              id: `requests-menu-${boxName}-header-box`,
+              className: `requests-menu-header requests-menu-${boxName}`,
               key: name,
               ref: "header",
               // Used to style the next column.
               "data-active": active,
             },
             button(
               {
-                id: `requests-list-${name}-button`,
-                className: `requests-list-header-button requests-list-${name}`,
+                id: `requests-menu-${name}-button`,
+                className: `requests-menu-header-button requests-menu-${name}`,
                 "data-sorted": sorted,
                 title: sortedTitle,
                 onClick: () => onHeaderClick(name),
               },
               name == "waterfall" ? WaterfallLabel(waterfallWidth, scale, label)
                                   : div({ className: "button-text" }, label),
               div({ className: "button-icon" })
             )
@@ -158,33 +158,33 @@ function waterfallDivisionLabels(waterfa
     // Last marker doesn't need a width specified at all
     if (x + scaledStep >= waterfallWidth) {
       width = undefined;
     }
 
     labels.push(div(
       {
         key: labels.length,
-        className: "requests-list-timings-division",
+        className: "requests-menu-timings-division",
         "data-division-scale": divisionScale,
         style: { width }
       },
       getFormattedTime(millisecondTime)
     ));
   }
 
   return labels;
 }
 
 function WaterfallLabel(waterfallWidth, scale, label) {
-  let className = "button-text requests-list-waterfall-label-wrapper";
+  let className = "button-text requests-menu-waterfall-label-wrapper";
 
   if (waterfallWidth != null && scale != null) {
     label = waterfallDivisionLabels(waterfallWidth, scale);
-    className += " requests-list-waterfall-visible";
+    className += " requests-menu-waterfall-visible";
   }
 
   return div({ className }, label);
 }
 
 module.exports = connect(
   state => ({
     sort: state.sort,

--- a/devtools/client/netmonitor/components/request-list-item.js
+++ b/devtools/client/netmonitor/components/request-list-item.js
@@ -170,19 +170,19 @@ const StatusColumn = createFactory(creat
         }
         if (fromServiceWorker) {
           title += " (service worker)";
         }
       }
     }
 
     return (
-        div({ className: "requests-list-subitem requests-list-status", title },
-        div({ className: "requests-list-status-icon", "data-code": code }),
-        span({ className: "subitem-label requests-list-status-code" }, status)
+      div({ className: "requests-menu-subitem requests-menu-status", title },
+        div({ className: "requests-menu-status-icon", "data-code": code }),
+        span({ className: "subitem-label requests-menu-status-code" }, status),
       )
     );
   }
 }));
 
 const MethodColumn = createFactory(createClass({
   displayName: "MethodColumn",
 
@@ -192,18 +192,18 @@ const MethodColumn = createFactory(creat
 
   shouldComponentUpdate(nextProps) {
     return this.props.item.method !== nextProps.item.method;
   },
 
   render() {
     const { method } = this.props.item;
     return (
-      div({ className: "requests-list-subitem requests-list-method-box" },
-        span({ className: "subitem-label requests-list-method" }, method)
+      div({ className: "requests-menu-subitem requests-menu-method-box" },
+        span({ className: "subitem-label requests-menu-method" }, method)
       )
     );
   }
 }));
 
 const UPDATED_FILE_PROPS = [
   "urlDetails",
   "responseContentDataUri",
@@ -219,25 +219,25 @@ const FileColumn = createFactory(createC
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_FILE_PROPS, this.props.item, nextProps.item);
   },
 
   render() {
     const { urlDetails, responseContentDataUri } = this.props.item;
 
     return (
-      div({ className: "requests-list-subitem requests-list-icon-and-file" },
+      div({ className: "requests-menu-subitem requests-menu-icon-and-file" },
         img({
-          className: "requests-list-icon",
+          className: "requests-menu-icon",
           src: responseContentDataUri,
           hidden: !responseContentDataUri,
           "data-type": responseContentDataUri ? "thumbnail" : undefined,
         }),
         div({
-          className: "subitem-label requests-list-file",
+          className: "subitem-label requests-menu-file",
           title: urlDetails.unicodeUrl,
         },
           urlDetails.baseNameWithQuery,
         ),
       )
     );
   }
 }));
@@ -272,23 +272,23 @@ const DomainColumn = createFactory(creat
     } else if (securityState) {
       iconClassList.push(`security-state-${securityState}`);
       iconTitle = L10N.getStr(`netmonitor.security.state.${securityState}`);
     }
 
     let title = urlDetails.host + (remoteAddress ? ` (${remoteAddress})` : "");
 
     return (
-      div({ className: "requests-list-subitem requests-list-security-and-domain" },
+      div({ className: "requests-menu-subitem requests-menu-security-and-domain" },
         div({
           className: iconClassList.join(" "),
           title: iconTitle,
           onClick: onSecurityIconClick,
         }),
-        span({ className: "subitem-label requests-list-domain", title }, urlDetails.host),
+        span({ className: "subitem-label requests-menu-domain", title }, urlDetails.host),
       )
     );
   }
 }));
 
 const CauseColumn = createFactory(createClass({
   displayName: "CauseColumn",
 
@@ -311,21 +311,21 @@ const CauseColumn = createFactory(create
       // Legacy server might send a numeric value. Display it as "unknown"
       causeType = typeof cause.type === "string" ? cause.type : "unknown";
       causeUri = cause.loadingDocumentUri;
       causeHasStack = cause.stacktrace && cause.stacktrace.length > 0;
     }
 
     return (
       div({
-        className: "requests-list-subitem requests-list-cause",
+        className: "requests-menu-subitem requests-menu-cause",
         title: causeUri,
       },
         span({
-          className: "requests-list-cause-stack",
+          className: "requests-menu-cause-stack",
           hidden: !causeHasStack,
         }, "JS"),
         span({ className: "subitem-label" }, causeType),
       )
     );
   }
 }));
 
@@ -351,17 +351,17 @@ const TypeColumn = createFactory(createC
     let abbrevType;
     if (mimeType) {
       abbrevType = getAbbreviatedMimeType(mimeType);
       abbrevType = CONTENT_MIME_TYPE_ABBREVIATIONS[abbrevType] || abbrevType;
     }
 
     return (
       div({
-        className: "requests-list-subitem requests-list-type",
+        className: "requests-menu-subitem requests-menu-type",
         title: mimeType,
       },
         span({ className: "subitem-label" }, abbrevType),
       )
     );
   }
 }));
 
@@ -396,17 +396,17 @@ const TransferredSizeColumn = createFact
     } else if (typeof transferredSize == "number") {
       text = getFormattedSize(transferredSize);
     } else if (transferredSize === null) {
       text = L10N.getStr("networkMenu.sizeUnavailable");
     }
 
     return (
       div({
-        className: "requests-list-subitem requests-list-transferred",
+        className: "requests-menu-subitem requests-menu-transferred",
         title: text,
       },
         span({ className }, text),
       )
     );
   }
 }));
 
@@ -426,17 +426,17 @@ const ContentSizeColumn = createFactory(
 
     let text;
     if (typeof contentSize == "number") {
       text = getFormattedSize(contentSize);
     }
 
     return (
       div({
-        className: "requests-list-subitem subitem-label requests-list-size",
+        className: "requests-menu-subitem subitem-label requests-menu-size",
         title: text,
       },
         span({ className: "subitem-label" }, text),
       )
     );
   }
 }));
 
@@ -459,19 +459,19 @@ const WaterfallColumn = createFactory(cr
     return this.props.firstRequestStartedMillis !== nextProps.firstRequestStartedMillis ||
       !propertiesEqual(UPDATED_WATERFALL_PROPS, this.props.item, nextProps.item);
   },
 
   render() {
     const { item, firstRequestStartedMillis } = this.props;
 
     return (
-      div({ className: "requests-list-subitem requests-list-waterfall" },
+      div({ className: "requests-menu-subitem requests-menu-waterfall" },
         div({
-          className: "requests-list-timings",
+          className: "requests-menu-timings",
           style: {
             paddingInlineStart: `${item.startedMillis - firstRequestStartedMillis}px`,
           },
         },
           timingBoxes(item),
         )
       )
     );
@@ -494,28 +494,28 @@ function timingBoxes(item) {
     for (let key of TIMING_KEYS) {
       let width = eventTimings.timings[key];
 
       // Don't render anything if it surely won't be visible.
       // One millisecond == one unscaled pixel.
       if (width > 0) {
         boxes.push(div({
           key,
-          className: "requests-list-timings-box " + key,
+          className: "requests-menu-timings-box " + key,
           style: { width }
         }));
       }
     }
   }
 
   if (typeof totalTime === "number") {
     let text = L10N.getFormatStr("networkMenu.totalMS", totalTime);
     boxes.push(div({
       key: "total",
-      className: "requests-list-timings-total",
-      title: text
+      className: "requests-menu-timings-total",
+      title: text,
     }, text));
   }
 
   return boxes;
 }
 
 module.exports = RequestListItem;

--- a/devtools/client/netmonitor/components/toolbar.js
+++ b/devtools/client/netmonitor/components/toolbar.js
@@ -96,43 +96,43 @@ const Toolbar = createClass({
       .replace("#4", getTimeWithDecimals(millis / 1000));
 
     let buttons = requestFilterTypes.map(([type, checked]) => {
       let classList = ["devtools-button"];
       checked && classList.push("checked");
 
       return (
         button({
-          id: `requests-list-filter-${type}-button`,
+          id: `requests-menu-filter-${type}-button`,
           className: classList.join(" "),
           key: type,
           onClick: this.toggleRequestFilterType,
           onKeyDown: this.toggleRequestFilterType,
           "aria-pressed": checked,
           "data-key": type,
         },
           L10N.getStr(`netmonitor.toolbar.filter.${type}`)
         )
       );
     });
 
     return (
       span({ className: "devtools-toolbar devtools-toolbar-container" },
         span({ className: "devtools-toolbar-group" },
           button({
-            id: "requests-list-clear-button",
+            id: "requests-menu-clear-button",
             className: "devtools-button devtools-clear-icon",
             title: TOOLBAR_CLEAR,
             onClick: clearRequests,
           }),
-          div({ id: "requests-list-filter-buttons" }, buttons),
+          div({ id: "requests-menu-filter-buttons" }, buttons),
         ),
         span({ className: "devtools-toolbar-group" },
           button({
-            id: "requests-list-network-summary-button",
+            id: "requests-menu-network-summary-button",
             className: "devtools-button",
             title: count ? text : L10N.getStr("netmonitor.toolbar.perf"),
             onClick: openStatistics,
           },
             span({ className: "summary-info-icon" }),
             span({ className: "summary-info-text" }, text),
           ),
           SearchBox({

--- a/devtools/client/netmonitor/request-list-context-menu.js
+++ b/devtools/client/netmonitor/request-list-context-menu.js
@@ -45,139 +45,139 @@ RequestListContextMenu.prototype = {
    * Since visible attribute only accept boolean value but the method call may
    * return undefined, we use !! to force convert any object to boolean
    */
   open({ screenX = 0, screenY = 0 } = {}) {
     let selectedRequest = this.selectedRequest;
 
     let menu = new Menu();
     menu.append(new MenuItem({
-      id: "request-list-context-copy-url",
+      id: "request-menu-context-copy-url",
       label: L10N.getStr("netmonitor.context.copyUrl"),
       accesskey: L10N.getStr("netmonitor.context.copyUrl.accesskey"),
       visible: !!selectedRequest,
       click: () => this.copyUrl(),
     }));
 
     menu.append(new MenuItem({
-      id: "request-list-context-copy-url-params",
+      id: "request-menu-context-copy-url-params",
       label: L10N.getStr("netmonitor.context.copyUrlParams"),
       accesskey: L10N.getStr("netmonitor.context.copyUrlParams.accesskey"),
       visible: !!(selectedRequest && getUrlQuery(selectedRequest.url)),
       click: () => this.copyUrlParams(),
     }));
 
     menu.append(new MenuItem({
-      id: "request-list-context-copy-post-data",
+      id: "request-menu-context-copy-post-data",
       label: L10N.getStr("netmonitor.context.copyPostData"),
       accesskey: L10N.getStr("netmonitor.context.copyPostData.accesskey"),
       visible: !!(selectedRequest && selectedRequest.requestPostData),
       click: () => this.copyPostData(),
     }));
 
     menu.append(new MenuItem({
-      id: "request-list-context-copy-as-curl",
+      id: "request-menu-context-copy-as-curl",
       label: L10N.getStr("netmonitor.context.copyAsCurl"),
       accesskey: L10N.getStr("netmonitor.context.copyAsCurl.accesskey"),
       visible: !!selectedRequest,
       click: () => this.copyAsCurl(),
     }));
 
     menu.append(new MenuItem({
       type: "separator",
       visible: !!selectedRequest,
     }));
 
     menu.append(new MenuItem({
-      id: "request-list-context-copy-request-headers",
+      id: "request-menu-context-copy-request-headers",
       label: L10N.getStr("netmonitor.context.copyRequestHeaders"),
       accesskey: L10N.getStr("netmonitor.context.copyRequestHeaders.accesskey"),
       visible: !!(selectedRequest && selectedRequest.requestHeaders),
       click: () => this.copyRequestHeaders(),
     }));
 
     menu.append(new MenuItem({
-      id: "response-list-context-copy-response-headers",
+      id: "response-menu-context-copy-response-headers",
       label: L10N.getStr("netmonitor.context.copyResponseHeaders"),
       accesskey: L10N.getStr("netmonitor.context.copyResponseHeaders.accesskey"),
       visible: !!(selectedRequest && selectedRequest.responseHeaders),
       click: () => this.copyResponseHeaders(),
     }));
 
     menu.append(new MenuItem({
-      id: "request-list-context-copy-response",
+      id: "request-menu-context-copy-response",
       label: L10N.getStr("netmonitor.context.copyResponse"),
       accesskey: L10N.getStr("netmonitor.context.copyResponse.accesskey"),
       visible: !!(selectedRequest &&
                selectedRequest.responseContent &&
                selectedRequest.responseContent.content.text &&
                selectedRequest.responseContent.content.text.length !== 0),
       click: () => this.copyResponse(),
     }));
 
     menu.append(new MenuItem({
-      id: "request-list-context-copy-image-as-data-uri",
+      id: "request-menu-context-copy-image-as-data-uri",
       label: L10N.getStr("netmonitor.context.copyImageAsDataUri"),
       accesskey: L10N.getStr("netmonitor.context.copyImageAsDataUri.accesskey"),
       visible: !!(selectedRequest &&
                selectedRequest.responseContent &&
                selectedRequest.responseContent.content.mimeType.includes("image/")),
       click: () => this.copyImageAsDataUri(),
     }));
 
     menu.append(new MenuItem({
       type: "separator",
       visible: !!selectedRequest,
     }));
 
     menu.append(new MenuItem({
-      id: "request-list-context-copy-all-as-har",
+      id: "request-menu-context-copy-all-as-har",
       label: L10N.getStr("netmonitor.context.copyAllAsHar"),
       accesskey: L10N.getStr("netmonitor.context.copyAllAsHar.accesskey"),
       visible: this.sortedRequests.size > 0,
       click: () => this.copyAllAsHar(),
     }));
 
     menu.append(new MenuItem({
-      id: "request-list-context-save-all-as-har",
+      id: "request-menu-context-save-all-as-har",
       label: L10N.getStr("netmonitor.context.saveAllAsHar"),
       accesskey: L10N.getStr("netmonitor.context.saveAllAsHar.accesskey"),
       visible: this.sortedRequests.size > 0,
       click: () => this.saveAllAsHar(),
     }));
 
     menu.append(new MenuItem({
       type: "separator",
       visible: !!selectedRequest,
     }));
 
     menu.append(new MenuItem({
-      id: "request-list-context-resend",
+      id: "request-menu-context-resend",
       label: L10N.getStr("netmonitor.context.editAndResend"),
       accesskey: L10N.getStr("netmonitor.context.editAndResend.accesskey"),
       visible: !!(window.NetMonitorController.supportsCustomRequest &&
                selectedRequest && !selectedRequest.isCustom),
       click: this.cloneSelectedRequest,
     }));
 
     menu.append(new MenuItem({
       type: "separator",
       visible: !!selectedRequest,
     }));
 
     menu.append(new MenuItem({
-      id: "request-list-context-newtab",
+      id: "request-menu-context-newtab",
       label: L10N.getStr("netmonitor.context.newTab"),
       accesskey: L10N.getStr("netmonitor.context.newTab.accesskey"),
       visible: !!selectedRequest,
       click: () => this.openRequestInTab()
     }));
 
     menu.append(new MenuItem({
-      id: "request-list-context-perf",
+      id: "request-menu-context-perf",
       label: L10N.getStr("netmonitor.context.perfTools"),
       accesskey: L10N.getStr("netmonitor.context.perfTools.accesskey"),
       visible: !!window.NetMonitorController.supportsPerfStats,
       click: () => this.openStatistics(true)
     }));
 
     menu.popup(screenX, screenY, window.NetMonitorController._toolbox);
     return menu;

--- a/devtools/client/netmonitor/request-list-tooltip.js
+++ b/devtools/client/netmonitor/request-list-tooltip.js
@@ -27,17 +27,17 @@ async function setTooltipImageContent(to
 
   let string = await window.gNetwork.getString(text);
   let src = formDataURI(mimeType, encoding, string);
   let maxDim = REQUESTS_TOOLTIP_IMAGE_MAX_DIM;
   let { naturalWidth, naturalHeight } = await getImageDimensions(tooltip.doc, src);
   let options = { maxDim, naturalWidth, naturalHeight };
   setImageTooltip(tooltip, tooltip.doc, src, options);
 
-  return itemEl.querySelector(".requests-list-icon");
+  return itemEl.querySelector(".requests-menu-icon");
 }
 
 async function setTooltipStackTraceContent(tooltip, requestItem) {
   let {stacktrace} = requestItem.cause;
 
   if (!stacktrace || stacktrace.length == 0) {
     return false;
   }

--- a/devtools/client/netmonitor/shared/components/headers-panel.js
+++ b/devtools/client/netmonitor/shared/components/headers-panel.js
@@ -173,17 +173,17 @@ const HeadersPanel = createClass({
       }
 
       summaryStatus = (
         div({ className: "tabpanel-summary-container headers-summary" },
           div({
             className: "tabpanel-summary-label headers-summary-label",
           }, SUMMARY_STATUS),
           div({
-            className: "requests-list-status-icon",
+            className: "requests-menu-status-icon",
             "data-code": code,
           }),
           input({
             className: "tabpanel-summary-value textbox-input devtools-monospace",
             readOnly: true,
             value: `${status} ${statusText}`,
           }),
           window.NetMonitorController.supportsCustomRequest && button({

--- a/devtools/client/netmonitor/shared/components/timings-panel.js
+++ b/devtools/client/netmonitor/shared/components/timings-panel.js
@@ -35,30 +35,30 @@ function TimingsPanel({
     return div({
       key: type,
       id: `timings-summary-${type}`,
       className: "tabpanel-summary-container timings-container",
     },
       span({ className: "tabpanel-summary-label timings-label" },
         L10N.getStr(`netmonitor.timings.${type}`)
       ),
-      div({ className: "requests-list-timings-container" },
+      div({ className: "requests-menu-timings-container" },
         span({
-          className: "requests-list-timings-offset",
+          className: "requests-menu-timings-offset",
           style: {
             width: `calc(${offsetScale} * (100% - ${TIMINGS_END_PADDING})`,
           },
         }),
         span({
-          className: `requests-list-timings-box ${type}`,
+          className: `requests-menu-timings-box ${type}`,
           style: {
             width: `calc(${timelineScale} * (100% - ${TIMINGS_END_PADDING}))`,
           },
         }),
-        span({ className: "requests-list-timings-total" },
+        span({ className: "requests-menu-timings-total" },
           L10N.getFormatStr("networkMenu.totalMS", timings[type])
         )
       ),
     );
   });
 
   return div({ className: "panel-container" }, timelines);
 }

--- a/devtools/client/netmonitor/test/browser_net_accessibility-02.js
+++ b/devtools/client/netmonitor/test/browser_net_accessibility-02.js
@@ -31,17 +31,17 @@ add_task(function* () {
   }
 
   let wait = waitForNetworkEvents(monitor, 2);
   yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
     content.wrappedJSObject.performRequests(2);
   });
   yield wait;
 
-  document.querySelector(".requests-list-contents").focus();
+  document.querySelector(".requests-menu-contents").focus();
 
   check(-1, false);
 
   EventUtils.sendKey("DOWN", window);
   check(0, true);
   EventUtils.sendKey("UP", window);
   check(0, true);
 

--- a/devtools/client/netmonitor/test/browser_net_autoscroll.js
+++ b/devtools/client/netmonitor/test/browser_net_autoscroll.js
@@ -11,17 +11,17 @@ add_task(function* () {
 
   let { monitor } = yield initNetMonitor(INFINITE_GET_URL);
   let { document, gStore, windowRequire } = monitor.panelWin;
   let Actions = windowRequire("devtools/client/netmonitor/actions/index");
 
   // Wait until the first request makes the empty notice disappear
   yield waitForRequestListToAppear();
 
-  let requestsContainer = document.querySelector(".requests-list-contents");
+  let requestsContainer = document.querySelector(".requests-menu-contents");
   ok(requestsContainer, "Container element exists as expected.");
 
   // (1) Check that the scroll position is maintained at the bottom
   // when the requests overflow the vertical size of the container.
   yield waitForRequestsToOverflowContainer();
   yield waitForScroll();
   ok(true, "Scrolled to bottom on overflow.");
 
@@ -52,17 +52,17 @@ add_task(function* () {
   yield waitSomeTime();
   is(requestsContainer.scrollTop, 0, "Did not scroll.");
 
   // Done: clean up.
   return teardown(monitor);
 
   function waitForRequestListToAppear() {
     info("Waiting until the empty notice disappears and is replaced with the list");
-    return waitUntil(() => !!document.querySelector(".requests-list-contents"));
+    return waitUntil(() => !!document.querySelector(".requests-menu-contents"));
   }
 
   function* waitForRequestsToOverflowContainer() {
     info("Waiting for enough requests to overflow the container");
     while (true) {
       info("Waiting for one network request");
       yield waitForNetworkEvents(monitor, 1);
       console.log(requestsContainer.scrollHeight);

--- a/devtools/client/netmonitor/test/browser_net_cause.js
+++ b/devtools/client/netmonitor/test/browser_net_cause.js
@@ -140,17 +140,17 @@ add_task(function* () {
       }
     } else {
       is(stackLen, 0, `Request #${i} (${causeType}) has an empty stacktrace`);
     }
   });
 
   // Sort the requests by cause and check the order
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-cause-button"));
+    document.querySelector("#requests-menu-cause-button"));
   let expectedOrder = EXPECTED_REQUESTS.map(r => r.causeType).sort();
   expectedOrder.forEach((expectedCause, i) => {
     const cause = getSortedRequests(gStore.getState()).get(i).cause.type;
     is(cause, expectedCause, `The request #${i} has the expected cause after sorting`);
   });
 
   yield teardown(monitor);
 });

--- a/devtools/client/netmonitor/test/browser_net_clear.js
+++ b/devtools/client/netmonitor/test/browser_net_clear.js
@@ -11,17 +11,17 @@ add_task(function* () {
   let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
   info("Starting test... ");
 
   let { document, gStore, windowRequire } = monitor.panelWin;
   let Actions = windowRequire("devtools/client/netmonitor/actions/index");
   let { EVENTS } = windowRequire("devtools/client/netmonitor/events");
   let detailsPane = document.querySelector("#details-pane");
   let detailsPanelToggleButton = document.querySelector(".network-details-panel-toggle");
-  let clearButton = document.querySelector("#requests-list-clear-button");
+  let clearButton = document.querySelector("#requests-menu-clear-button");
 
   gStore.dispatch(Actions.batchEnable(false));
 
   // Make sure we start in a sane state
   assertNoRequestState();
 
   // Load one request and assert it shows up in the list
   let networkEvent = monitor.panelWin.once(EVENTS.NETWORK_EVENT);

--- a/devtools/client/netmonitor/test/browser_net_copy_as_curl.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_as_curl.js
@@ -54,17 +54,17 @@ add_task(function* () {
     document.querySelectorAll(".request-list-item")[0]);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelectorAll(".request-list-item")[0]);
 
   yield waitForClipboardPromise(function setup() {
     // Context menu is appending in XUL document, we must select it from
     // toolbox.doc
     monitor.toolbox.doc
-      .querySelector("#request-list-context-copy-as-curl").click();
+      .querySelector("#request-menu-context-copy-as-curl").click();
   }, function validate(result) {
     if (typeof result !== "string") {
       return false;
     }
 
     // Different setups may produce the same command, but with the
     // parameters in a different order in the commandline (which is fine).
     // Here we confirm that the commands are the same even in that case.

--- a/devtools/client/netmonitor/test/browser_net_copy_headers.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_headers.js
@@ -39,17 +39,17 @@ add_task(function* () {
     "Pragma: no-cache",
     "Cache-Control: no-cache"
   ].join("\n");
 
   yield waitForClipboardPromise(function setup() {
     // Context menu is appending in XUL document, we must select it from
     // toolbox.doc
     monitor.toolbox.doc
-      .querySelector("#request-list-context-copy-request-headers").click();
+      .querySelector("#request-menu-context-copy-request-headers").click();
   }, function validate(result) {
     // Sometimes, a "Cookie" header is left over from other tests. Remove it:
     result = String(result).replace(/Cookie: [^\n]+\n/, "");
     return result === EXPECTED_REQUEST_HEADERS;
   });
   info("Clipboard contains the currently selected item's request headers.");
 
   const EXPECTED_RESPONSE_HEADERS = [

--- a/devtools/client/netmonitor/test/browser_net_copy_image_as_data_uri.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_image_as_data_uri.js
@@ -23,15 +23,15 @@ add_task(function* () {
     document.querySelectorAll(".request-list-item")[5]);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelectorAll(".request-list-item")[5]);
 
   yield waitForClipboardPromise(function setup() {
     // Context menu is appending in XUL document, we must select it from
     // toolbox.doc
     monitor.toolbox.doc
-      .querySelector("#request-list-context-copy-image-as-data-uri").click();
- }, TEST_IMAGE_DATA_URI);
+      .querySelector("#request-menu-context-copy-image-as-data-uri").click();
+  }, TEST_IMAGE_DATA_URI);
 
   ok(true, "Clipboard contains the currently selected image as data uri.");
 
   yield teardown(monitor);
 });

--- a/devtools/client/netmonitor/test/browser_net_copy_params.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_params.js
@@ -58,50 +58,50 @@ add_task(function* () {
   return teardown(monitor);
 
   function testCopyUrlParamsHidden(index, hidden) {
     EventUtils.sendMouseEvent({ type: "mousedown" },
       document.querySelectorAll(".request-list-item")[index]);
     EventUtils.sendMouseEvent({ type: "contextmenu" },
       document.querySelectorAll(".request-list-item")[index]);
     let copyUrlParamsNode = monitor.toolbox.doc
-      .querySelector("#request-list-context-copy-url-params");
+      .querySelector("#request-menu-context-copy-url-params");
     is(!!copyUrlParamsNode, !hidden,
       "The \"Copy URL Parameters\" context menu item should" + (hidden ? " " : " not ") +
         "be hidden.");
   }
 
   function* testCopyUrlParams(index, queryString) {
     EventUtils.sendMouseEvent({ type: "mousedown" },
       document.querySelectorAll(".request-list-item")[index]);
     EventUtils.sendMouseEvent({ type: "contextmenu" },
       document.querySelectorAll(".request-list-item")[index]);
     yield waitForClipboardPromise(function setup() {
       monitor.toolbox.doc
-        .querySelector("#request-list-context-copy-url-params").click();
+        .querySelector("#request-menu-context-copy-url-params").click();
     }, queryString);
     ok(true, "The url query string copied from the selected item is correct.");
   }
 
   function testCopyPostDataHidden(index, hidden) {
     EventUtils.sendMouseEvent({ type: "mousedown" },
       document.querySelectorAll(".request-list-item")[index]);
     EventUtils.sendMouseEvent({ type: "contextmenu" },
       document.querySelectorAll(".request-list-item")[index]);
     let copyPostDataNode = monitor.toolbox.doc
-      .querySelector("#request-list-context-copy-post-data");
+      .querySelector("#request-menu-context-copy-post-data");
     is(!!copyPostDataNode, !hidden,
       "The \"Copy POST Data\" context menu item should" + (hidden ? " " : " not ") +
         "be hidden.");
   }
 
   function* testCopyPostData(index, postData) {
     EventUtils.sendMouseEvent({ type: "mousedown" },
       document.querySelectorAll(".request-list-item")[index]);
     EventUtils.sendMouseEvent({ type: "contextmenu" },
       document.querySelectorAll(".request-list-item")[index]);
     yield waitForClipboardPromise(function setup() {
       monitor.toolbox.doc
-        .querySelector("#request-list-context-copy-post-data").click();
+        .querySelector("#request-menu-context-copy-post-data").click();
     }, postData);
     ok(true, "The post data string copied from the selected item is correct.");
   }
 });

--- a/devtools/client/netmonitor/test/browser_net_copy_response.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_response.js
@@ -25,13 +25,13 @@ add_task(function* () {
     document.querySelectorAll(".request-list-item")[3]);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelectorAll(".request-list-item")[3]);
 
   yield waitForClipboardPromise(function setup() {
     // Context menu is appending in XUL document, we must select it from
     // toolbox.doc
     monitor.toolbox.doc
-      .querySelector("#request-list-context-copy-response").click();
+      .querySelector("#request-menu-context-copy-response").click();
   }, EXPECTED_RESULT);
 
   yield teardown(monitor);
 });

--- a/devtools/client/netmonitor/test/browser_net_copy_svg_image_as_data_uri.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_svg_image_as_data_uri.js
@@ -25,15 +25,15 @@ add_task(function* () {
     document.querySelectorAll(".request-list-item")[0]);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelectorAll(".request-list-item")[0]);
 
   yield waitForClipboardPromise(function setup() {
     // Context menu is appending in XUL document, we must select it from
     // toolbox.doc
     monitor.toolbox.doc
-      .querySelector("#request-list-context-copy-image-as-data-uri").click();
+      .querySelector("#request-menu-context-copy-image-as-data-uri").click();
   }, function check(text) {
     return text.startsWith("data:") && !/undefined/.test(text);
   });
 
   yield teardown(monitor);
 });

--- a/devtools/client/netmonitor/test/browser_net_copy_url.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_url.js
@@ -26,13 +26,13 @@ add_task(function* () {
     document.querySelectorAll(".request-list-item")[0]);
 
   let requestItem = getSortedRequests(gStore.getState()).get(0);
 
   yield waitForClipboardPromise(function setup() {
     // Context menu is appending in XUL document, we must select it from
     // toolbox.doc
     monitor.toolbox.doc
-      .querySelector("#request-list-context-copy-url").click();
+      .querySelector("#request-menu-context-copy-url").click();
   }, requestItem.url);
 
   yield teardown(monitor);
 });

--- a/devtools/client/netmonitor/test/browser_net_filter-01.js
+++ b/devtools/client/netmonitor/test/browser_net_filter-01.js
@@ -161,153 +161,152 @@ add_task(function* () {
   is(!!document.querySelector(".network-details-panel"), true,
     "The network details panel should render correctly.");
 
   // First test with single filters...
   testFilterButtons(monitor, "all");
   testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-html-button"));
+    document.querySelector("#requests-menu-filter-html-button"));
   testFilterButtons(monitor, "html");
   testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Reset filters
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-css-button"));
+    document.querySelector("#requests-menu-filter-css-button"));
   testFilterButtons(monitor, "css");
   testContents([0, 1, 0, 0, 0, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-js-button"));
+    document.querySelector("#requests-menu-filter-js-button"));
   testFilterButtons(monitor, "js");
   testContents([0, 0, 1, 0, 0, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-xhr-button"));
+    document.querySelector("#requests-menu-filter-xhr-button"));
   testFilterButtons(monitor, "xhr");
   testContents([1, 1, 1, 1, 1, 1, 1, 1, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-     document.querySelector("#requests-list-filter-fonts-button"));
+     document.querySelector("#requests-menu-filter-fonts-button"));
   testFilterButtons(monitor, "fonts");
   testContents([0, 0, 0, 1, 0, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-images-button"));
+    document.querySelector("#requests-menu-filter-images-button"));
   testFilterButtons(monitor, "images");
   testContents([0, 0, 0, 0, 1, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-media-button"));
+    document.querySelector("#requests-menu-filter-media-button"));
   testFilterButtons(monitor, "media");
   testContents([0, 0, 0, 0, 0, 1, 1, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-flash-button"));
+    document.querySelector("#requests-menu-filter-flash-button"));
   testFilterButtons(monitor, "flash");
   testContents([0, 0, 0, 0, 0, 0, 0, 1, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-ws-button"));
+    document.querySelector("#requests-menu-filter-ws-button"));
   testFilterButtons(monitor, "ws");
   testContents([0, 0, 0, 0, 0, 0, 0, 0, 1]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
-
+    document.querySelector("#requests-menu-filter-all-button"));
   testFilterButtons(monitor, "all");
   testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   // Text in filter box that matches nothing should hide all.
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   setFreetextFilter("foobar");
   testContents([0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Text in filter box that matches should filter out everything else.
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   setFreetextFilter("sample");
   testContents([1, 1, 1, 0, 0, 0, 0, 0, 0]);
 
   // Text in filter box that matches should filter out everything else.
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   setFreetextFilter("SAMPLE");
   testContents([1, 1, 1, 0, 0, 0, 0, 0, 0]);
 
   // Test negative filtering (only show unmatched items)
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   setFreetextFilter("-sample");
   testContents([0, 0, 0, 1, 1, 1, 1, 1, 1]);
 
   // ...then combine multiple filters together.
 
   // Enable filtering for html and css; should show request of both type.
   setFreetextFilter("");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-html-button"));
+    document.querySelector("#requests-menu-filter-html-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-css-button"));
+    document.querySelector("#requests-menu-filter-css-button"));
   testFilterButtonsCustom(monitor, [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
   testContents([1, 1, 0, 0, 0, 0, 0, 0, 0]);
 
   // Html and css filter enabled and text filter should show just the html and css match.
   // Should not show both the items matching the button plus the items matching the text.
   setFreetextFilter("sample");
   testContents([1, 1, 0, 0, 0, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-flash-button"));
+    document.querySelector("#requests-menu-filter-flash-button"));
   setFreetextFilter("");
   testFilterButtonsCustom(monitor, [0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0]);
   testContents([1, 1, 0, 0, 0, 0, 0, 1, 0]);
 
   // Disable some filters. Only one left active.
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-css-button"));
+    document.querySelector("#requests-menu-filter-css-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-flash-button"));
+    document.querySelector("#requests-menu-filter-flash-button"));
   testFilterButtons(monitor, "html");
   testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   // Disable last active filter. Should toggle to all.
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-html-button"));
+    document.querySelector("#requests-menu-filter-html-button"));
   testFilterButtons(monitor, "all");
   testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   // Enable few filters and click on all. Only "all" should be checked.
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-html-button"));
+    document.querySelector("#requests-menu-filter-html-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-css-button"));
+    document.querySelector("#requests-menu-filter-css-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-ws-button"));
+    document.querySelector("#requests-menu-filter-ws-button"));
   testFilterButtonsCustom(monitor, [0, 1, 1, 0, 0, 0, 0, 0, 0, 1]);
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   testFilterButtons(monitor, "all");
   testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   yield teardown(monitor);
 
   function getSelectedIndex(state) {
     if (!state.requests.selectedId) {
       return -1;

--- a/devtools/client/netmonitor/test/browser_net_filter-02.js
+++ b/devtools/client/netmonitor/test/browser_net_filter-02.js
@@ -161,17 +161,17 @@ add_task(function* () {
   is(!!document.querySelector(".network-details-panel"), true,
     "The network details panel should be visible after toggle button was pressed.");
 
   testFilterButtons(monitor, "all");
   testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
 
   info("Testing html filtering.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-html-button"));
+    document.querySelector("#requests-menu-filter-html-button"));
   testFilterButtons(monitor, "html");
   testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   info("Performing more requests.");
   wait = waitForNetworkEvents(monitor, 9);
   yield performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS);
   yield wait;
 
@@ -186,17 +186,17 @@ add_task(function* () {
 
   info("Testing html filtering again.");
   testFilterButtons(monitor, "html");
   testContents([1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0,
                 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
 
   info("Resetting filters.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-all-button"));
+    document.querySelector("#requests-menu-filter-all-button"));
   testFilterButtons(monitor, "all");
   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, 1, 1, 1]);
 
   yield teardown(monitor);
 
   function getSelectedIndex(state) {
     if (!state.requests.selectedId) {

--- a/devtools/client/netmonitor/test/browser_net_filter-03.js
+++ b/devtools/client/netmonitor/test/browser_net_filter-03.js
@@ -59,23 +59,23 @@ add_task(function* () {
   is(!!document.querySelector(".network-details-panel"), true,
     "The network details panel should be visible after toggle button was pressed.");
 
   testFilterButtons(monitor, "all");
   testContents([0, 1, 2, 3, 4, 5, 6], 7, 0);
 
   info("Sorting by size, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-size-button"));
+    document.querySelector("#requests-menu-size-button"));
   testFilterButtons(monitor, "all");
   testContents([6, 4, 5, 0, 1, 2, 3], 7, 6);
 
   info("Testing html filtering.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-html-button"));
+    document.querySelector("#requests-menu-filter-html-button"));
   testFilterButtons(monitor, "html");
   testContents([6, 4, 5, 0, 1, 2, 3], 1, 6);
 
   info("Performing more requests.");
   wait = waitForNetworkEvents(monitor, 7);
   performRequestsInContent(REQUESTS_WITH_MEDIA);
   yield wait;
 
@@ -93,19 +93,19 @@ add_task(function* () {
   testFilterButtons(monitor, "html");
   testContents([12, 13, 20, 14, 16, 18, 15, 17, 19, 0, 4, 8, 1, 5, 9, 2, 6, 10, 3, 7, 11],
     3, 20);
 
   yield teardown(monitor);
 
   function resetSorting() {
     EventUtils.sendMouseEvent({ type: "click" },
-      document.querySelector("#requests-list-waterfall-button"));
+      document.querySelector("#requests-menu-waterfall-button"));
     EventUtils.sendMouseEvent({ type: "click" },
-      document.querySelector("#requests-list-size-button"));
+      document.querySelector("#requests-menu-size-button"));
   }
 
   function getSelectedIndex(state) {
     if (!state.requests.selectedId) {
       return -1;
     }
     return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
   }

--- a/devtools/client/netmonitor/test/browser_net_footer-summary.js
+++ b/devtools/client/netmonitor/test/browser_net_footer-summary.js
@@ -30,26 +30,26 @@ add_task(function* () {
       content.wrappedJSObject.performRequests('{ "getMedia": true, "getFlash": true }');
     });
     yield wait;
 
     testStatus();
 
     let buttons = ["html", "css", "js", "xhr", "fonts", "images", "media", "flash"];
     for (let button of buttons) {
-      let buttonEl = document.querySelector(`#requests-list-filter-${button}-button`);
+      let buttonEl = document.querySelector(`#requests-menu-filter-${button}-button`);
       EventUtils.sendMouseEvent({ type: "click" }, buttonEl);
       testStatus();
     }
   }
 
   yield teardown(monitor);
 
   function testStatus() {
-    let value = document.querySelector("#requests-list-network-summary-button").textContent;
+    let value = document.querySelector("#requests-menu-network-summary-button").textContent;
     info("Current summary: " + value);
 
     let state = gStore.getState();
     let totalRequestsCount = state.requests.requests.size;
     let requestsSummary = getDisplayedRequestsSummary(state);
     info(`Current requests: ${requestsSummary.count} of ${totalRequestsCount}.`);
 
     if (!totalRequestsCount || !requestsSummary.count) {

--- a/devtools/client/netmonitor/test/browser_net_icon-preview.js
+++ b/devtools/client/netmonitor/test/browser_net_icon-preview.js
@@ -58,16 +58,16 @@ add_task(function* () {
   }
 
   function* reloadAndPerformRequests() {
     yield NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
     yield performRequests();
   }
 
   function checkImageThumbnail() {
-    is(document.querySelectorAll(".requests-list-icon[data-type=thumbnail]").length, 1,
+    is(document.querySelectorAll(".requests-menu-icon[data-type=thumbnail]").length, 1,
       "There should be only one image request with a thumbnail displayed.");
-    is(document.querySelector(".requests-list-icon[data-type=thumbnail]").src, TEST_IMAGE_DATA_URI,
-      "The image requests-list-icon thumbnail is displayed correctly.");
-    is(document.querySelector(".requests-list-icon[data-type=thumbnail]").hidden, false,
-      "The image requests-list-icon thumbnail should not be hidden.");
+    is(document.querySelector(".requests-menu-icon[data-type=thumbnail]").src, TEST_IMAGE_DATA_URI,
+      "The image requests-menu-icon thumbnail is displayed correctly.");
+    is(document.querySelector(".requests-menu-icon[data-type=thumbnail]").hidden, false,
+      "The image requests-menu-icon thumbnail should not be hidden.");
   }
 });

--- a/devtools/client/netmonitor/test/browser_net_image-tooltip.js
+++ b/devtools/client/netmonitor/test/browser_net_image-tooltip.js
@@ -51,34 +51,34 @@ add_task(function* test() {
   yield onEvents;
   yield onThumbnail;
 
   info("Checking the image thumbnail after a reload.");
   yield showTooltipAndVerify(toolboxDoc,
     document.querySelectorAll(".request-list-item")[1]);
 
   info("Checking if the image thumbnail is hidden when mouse leaves the menu widget");
-  let requestsListContents = document.querySelector(".requests-list-contents");
+  let requestsListContents = document.querySelector(".requests-menu-contents");
   EventUtils.synthesizeMouse(requestsListContents, 0, 0, { type: "mouseout" }, monitor.panelWin);
   yield waitUntil(() => !toolboxDoc.querySelector(".tooltip-container.tooltip-visible"));
 
   yield teardown(monitor);
 
   function performRequests() {
     return ContentTask.spawn(tab.linkedBrowser, {}, function* () {
       content.wrappedJSObject.performRequests();
     });
   }
 
   /**
    * Show a tooltip on the {target} and verify that it was displayed
    * with the expected content.
    */
   function* showTooltipAndVerify(toolboxDoc, target) {
-    let anchor = target.querySelector(".requests-list-file");
+    let anchor = target.querySelector(".requests-menu-file");
     yield showTooltipOn(toolboxDoc, anchor);
 
     info("Tooltip was successfully opened for the image request.");
     is(toolboxDoc.querySelector(".tooltip-panel img").src, TEST_IMAGE_DATA_URI,
       "The tooltip's image content is displayed correctly.");
   }
 
   /**
@@ -91,16 +91,16 @@ add_task(function* test() {
     yield waitUntil(() => toolboxDoc.querySelector(".tooltip-panel img"));
   }
 
   /**
    * Hide a tooltip on the {target} and verify that it was closed.
    */
   function* hideTooltipAndVerify(toolboxDoc, target) {
     // Hovering over the "method" column hides the tooltip.
-    let anchor = target.querySelector(".requests-list-method");
+    let anchor = target.querySelector(".requests-menu-method");
     let win = anchor.ownerDocument.defaultView;
     EventUtils.synthesizeMouseAtCenter(anchor, { type: "mousemove" }, win);
 
     yield waitUntil(() => !toolboxDoc.querySelector(".tooltip-container.tooltip-visible"));
     info("Tooltip was successfully closed.");
   }
 });

--- a/devtools/client/netmonitor/test/browser_net_open_request_in_tab.js
+++ b/devtools/client/netmonitor/test/browser_net_open_request_in_tab.js
@@ -30,17 +30,17 @@ add_task(function* () {
     document.querySelectorAll(".request-list-item")[0]);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelectorAll(".request-list-item")[0]);
 
   let onTabOpen = once(gBrowser.tabContainer, "TabOpen", false);
   // Context menu is appending in XUL document, we must select it from
   // toolbox.doc
   monitor.toolbox.doc
-    .querySelector("#request-list-context-newtab").click();
+    .querySelector("#request-menu-context-newtab").click();
   yield onTabOpen;
 
   ok(true, "A new tab has been opened");
 
   yield teardown(monitor);
 
   gBrowser.removeCurrentTab();
 });

--- a/devtools/client/netmonitor/test/browser_net_reload-button.js
+++ b/devtools/client/netmonitor/test/browser_net_reload-button.js
@@ -10,16 +10,16 @@
 add_task(function* () {
   let { monitor } = yield initNetMonitor(SIMPLE_URL);
   info("Starting test... ");
 
   let { document } = monitor.panelWin;
 
   let wait = waitForNetworkEvents(monitor, 1);
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-reload-notice-button"));
+    document.querySelector("#requests-menu-reload-notice-button"));
   yield wait;
 
   is(document.querySelectorAll(".request-list-item").length, 1,
     "The request list should have one item after reloading");
 
   return teardown(monitor);
 });

--- a/devtools/client/netmonitor/test/browser_net_reload-markers.js
+++ b/devtools/client/netmonitor/test/browser_net_reload-markers.js
@@ -8,17 +8,17 @@
  */
 
 add_task(function* () {
   let { monitor } = yield initNetMonitor(SIMPLE_URL);
   info("Starting test... ");
 
   let { document, windowRequire } = monitor.panelWin;
   let { EVENTS } = windowRequire("devtools/client/netmonitor/events");
-  let button = document.querySelector("#requests-list-reload-notice-button");
+  let button = document.querySelector("#requests-menu-reload-notice-button");
   button.click();
 
   let markers = [];
 
   monitor.panelWin.on(EVENTS.TIMELINE_EVENT, (_, marker) => {
     markers.push(marker);
   });
 

--- a/devtools/client/netmonitor/test/browser_net_security-icon-click.js
+++ b/devtools/client/netmonitor/test/browser_net_security-icon-click.js
@@ -27,17 +27,17 @@ add_task(function* () {
   yield clickAndTestSecurityIcon();
 
   info("Selecting headers panel again.");
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#headers-tab"));
 
   info("Sorting the items by filename.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-file-button"));
+    document.querySelector("#requests-menu-file-button"));
 
   info("Testing that security icon can be clicked after the items were sorted.");
 
   yield clickAndTestSecurityIcon();
 
   return teardown(monitor);
 
   function* performRequestAndWait(url) {

--- a/devtools/client/netmonitor/test/browser_net_security-state.js
+++ b/devtools/client/netmonitor/test/browser_net_security-state.js
@@ -24,18 +24,18 @@ add_task(function* () {
     getSortedRequests,
   } = windowRequire("devtools/client/netmonitor/selectors/index");
 
   gStore.dispatch(Actions.batchEnable(false));
 
   yield performRequests();
 
   for (let subitemNode of Array.from(document.querySelectorAll(
-    "requests-list-subitem.requests-list-security-and-domain"))) {
-    let domain = subitemNode.querySelector(".requests-list-domain").textContent;
+    "requests-menu-subitem.requests-menu-security-and-domain"))) {
+    let domain = subitemNode.querySelector(".requests-menu-domain").textContent;
 
     info("Found a request to " + domain);
     ok(domain in EXPECTED_SECURITY_STATES, "Domain " + domain + " was expected.");
 
     let classes = subitemNode.querySelector(".requests-security-state-icon").classList;
     let expectedClass = EXPECTED_SECURITY_STATES[domain];
 
     info("Classes of security state icon are: " + classes);

--- a/devtools/client/netmonitor/test/browser_net_simple-request-details.js
+++ b/devtools/client/netmonitor/test/browser_net_simple-request-details.js
@@ -240,33 +240,33 @@ add_task(function* () {
       document.querySelectorAll("#details-pane tab")[4]);
 
     let tabEl = document.querySelectorAll("#details-pane tab")[4];
     let tabpanel = document.querySelectorAll("#details-pane tabpanel")[4];
 
     is(tabEl.getAttribute("selected"), "true",
       "The timings tab in the network details pane should be selected.");
 
-    ok(tabpanel.querySelector("#timings-summary-blocked .requests-list-timings-total")
+    ok(tabpanel.querySelector("#timings-summary-blocked .requests-menu-timings-total")
       .getAttribute("value").match(/[0-9]+/),
       "The blocked timing info does not appear to be correct.");
 
-    ok(tabpanel.querySelector("#timings-summary-dns .requests-list-timings-total")
+    ok(tabpanel.querySelector("#timings-summary-dns .requests-menu-timings-total")
       .getAttribute("value").match(/[0-9]+/),
       "The dns timing info does not appear to be correct.");
 
-    ok(tabpanel.querySelector("#timings-summary-connect .requests-list-timings-total")
+    ok(tabpanel.querySelector("#timings-summary-connect .requests-menu-timings-total")
       .getAttribute("value").match(/[0-9]+/),
       "The connect timing info does not appear to be correct.");
 
-    ok(tabpanel.querySelector("#timings-summary-send .requests-list-timings-total")
+    ok(tabpanel.querySelector("#timings-summary-send .requests-menu-timings-total")
       .getAttribute("value").match(/[0-9]+/),
       "The send timing info does not appear to be correct.");
 
-    ok(tabpanel.querySelector("#timings-summary-wait .requests-list-timings-total")
+    ok(tabpanel.querySelector("#timings-summary-wait .requests-menu-timings-total")
       .getAttribute("value").match(/[0-9]+/),
       "The wait timing info does not appear to be correct.");
 
-    ok(tabpanel.querySelector("#timings-summary-receive .requests-list-timings-total")
+    ok(tabpanel.querySelector("#timings-summary-receive .requests-menu-timings-total")
       .getAttribute("value").match(/[0-9]+/),
       "The receive timing info does not appear to be correct.");
   }
 });

--- a/devtools/client/netmonitor/test/browser_net_simple-request.js
+++ b/devtools/client/netmonitor/test/browser_net_simple-request.js
@@ -24,53 +24,53 @@ add_task(function* () {
     getSortedRequests,
   } = windowRequire("devtools/client/netmonitor/selectors/index");
 
   gStore.dispatch(Actions.batchEnable(false));
 
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     true,
     "The pane toggle button should be disabled when the frontend is opened.");
-  ok(document.querySelector("#requests-list-empty-notice"),
+  ok(document.querySelector("#requests-menu-empty-notice"),
     "An empty notice should be displayed when the frontend is opened.");
   is(gStore.getState().requests.requests.size, 0,
     "The requests menu should be empty when the frontend is opened.");
   is(!!document.querySelector(".network-details-panel"), false,
     "The network details panel should be hidden when the frontend is opened.");
 
   yield reloadAndWait();
 
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     false,
     "The pane toggle button should be enabled after the first request.");
-  ok(!document.querySelector("#requests-list-empty-notice"),
+  ok(!document.querySelector("#requests-menu-empty-notice"),
     "The empty notice should be hidden after the first request.");
   is(gStore.getState().requests.requests.size, 1,
     "The requests menu should not be empty after the first request.");
   is(!!document.querySelector(".network-details-panel"), false,
     "The network details panel should still be hidden after the first request.");
 
   yield reloadAndWait();
 
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     false,
     "The pane toggle button should be still be enabled after a reload.");
-  ok(!document.querySelector("#requests-list-empty-notice"),
+  ok(!document.querySelector("#requests-menu-empty-notice"),
     "The empty notice should be still hidden after a reload.");
   is(gStore.getState().requests.requests.size, 1,
     "The requests menu should not be empty after a reload.");
   is(!!document.querySelector(".network-details-panel"), false,
     "The network details panel should still be hidden after a reload.");
 
   gStore.dispatch(Actions.clearRequests());
 
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     true,
     "The pane toggle button should be disabled when after clear.");
-  ok(document.querySelector("#requests-list-empty-notice"),
+  ok(document.querySelector("#requests-menu-empty-notice"),
     "An empty notice should be displayed again after clear.");
   is(gStore.getState().requests.requests.size, 0,
     "The requests menu should be empty after clear.");
   is(!!document.querySelector(".network-details-panel"), false,
     "The network details panel should still be hidden after clear.");
 
   return teardown(monitor);
 

--- a/devtools/client/netmonitor/test/browser_net_sort-01.js
+++ b/devtools/client/netmonitor/test/browser_net_sort-01.js
@@ -61,62 +61,62 @@ add_task(function* () {
   is(!!document.querySelector(".network-details-panel"), true,
     "The network details panel should be visible after toggle button was pressed.");
 
   testHeaders();
   testContents([0, 2, 4, 3, 1], 0);
 
   info("Testing status sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector("#requests-menu-status-button"));
   testHeaders("status", "ascending");
   testContents([0, 1, 2, 3, 4], 0);
 
   info("Performing more requests.");
   wait = waitForNetworkEvents(monitor, 5);
   yield performRequestsInContent(requests);
   yield wait;
 
   info("Testing status sort again, ascending.");
   testHeaders("status", "ascending");
   testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 0);
 
   info("Testing status sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector("#requests-menu-status-button"));
   testHeaders("status", "descending");
   testContents([9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 9);
 
   info("Performing more requests.");
   wait = waitForNetworkEvents(monitor, 5);
   yield performRequestsInContent(requests);
   yield wait;
 
   info("Testing status sort again, descending.");
   testHeaders("status", "descending");
   testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14);
 
   info("Testing status sort yet again, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector("#requests-menu-status-button"));
   testHeaders("status", "ascending");
   testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], 0);
 
   info("Testing status sort yet again, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector("#requests-menu-status-button"));
   testHeaders("status", "descending");
   testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14);
 
   return teardown(monitor);
 
   function testHeaders(sortType, direction) {
     let doc = monitor.panelWin.document;
-    let target = doc.querySelector("#requests-list-" + sortType + "-button");
-    let headers = doc.querySelectorAll(".requests-list-header-button");
+    let target = doc.querySelector("#requests-menu-" + sortType + "-button");
+    let headers = doc.querySelectorAll(".requests-menu-header-button");
 
     for (let header of headers) {
       if (header != target) {
         ok(!header.hasAttribute("data-sorted"),
           "The " + header.id + " header does not have a 'data-sorted' attribute.");
         ok(!header.getAttribute("title"),
           "The " + header.id + " header does not have a 'title' attribute.");
       } else {

--- a/devtools/client/netmonitor/test/browser_net_sort-02.js
+++ b/devtools/client/netmonitor/test/browser_net_sort-02.js
@@ -61,153 +61,153 @@ add_task(function* () {
   is(!!document.querySelector(".network-details-panel"), true,
     "The network details panel should be visible after toggle button was pressed.");
 
   testHeaders();
   testContents([0, 2, 4, 3, 1]);
 
   info("Testing status sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector("#requests-menu-status-button"));
   testHeaders("status", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing status sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector("#requests-menu-status-button"));
   testHeaders("status", "descending");
   testContents([4, 3, 2, 1, 0]);
 
   info("Testing status sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-status-button"));
+    document.querySelector("#requests-menu-status-button"));
   testHeaders("status", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing method sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-method-button"));
+    document.querySelector("#requests-menu-method-button"));
   testHeaders("method", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing method sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-method-button"));
+    document.querySelector("#requests-menu-method-button"));
   testHeaders("method", "descending");
   testContents([4, 3, 2, 1, 0]);
 
   info("Testing method sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-method-button"));
+    document.querySelector("#requests-menu-method-button"));
   testHeaders("method", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing file sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-file-button"));
+    document.querySelector("#requests-menu-file-button"));
   testHeaders("file", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing file sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-file-button"));
+    document.querySelector("#requests-menu-file-button"));
   testHeaders("file", "descending");
   testContents([4, 3, 2, 1, 0]);
 
   info("Testing file sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-file-button"));
+    document.querySelector("#requests-menu-file-button"));
   testHeaders("file", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing type sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-type-button"));
+    document.querySelector("#requests-menu-type-button"));
   testHeaders("type", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing type sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-type-button"));
+    document.querySelector("#requests-menu-type-button"));
   testHeaders("type", "descending");
   testContents([4, 3, 2, 1, 0]);
 
   info("Testing type sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-type-button"));
+    document.querySelector("#requests-menu-type-button"));
   testHeaders("type", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing transferred sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-transferred-button"));
+    document.querySelector("#requests-menu-transferred-button"));
   testHeaders("transferred", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing transferred sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-transferred-button"));
+    document.querySelector("#requests-menu-transferred-button"));
   testHeaders("transferred", "descending");
   testContents([4, 3, 2, 1, 0]);
 
   info("Testing transferred sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-transferred-button"));
+    document.querySelector("#requests-menu-transferred-button"));
   testHeaders("transferred", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing size sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-size-button"));
+    document.querySelector("#requests-menu-size-button"));
   testHeaders("size", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing size sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-size-button"));
+    document.querySelector("#requests-menu-size-button"));
   testHeaders("size", "descending");
   testContents([4, 3, 2, 1, 0]);
 
   info("Testing size sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-size-button"));
+    document.querySelector("#requests-menu-size-button"));
   testHeaders("size", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing waterfall sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-waterfall-button"));
+    document.querySelector("#requests-menu-waterfall-button"));
   testHeaders("waterfall", "ascending");
   testContents([0, 2, 4, 3, 1]);
 
   info("Testing waterfall sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-waterfall-button"));
+    document.querySelector("#requests-menu-waterfall-button"));
   testHeaders("waterfall", "descending");
   testContents([4, 2, 0, 1, 3]);
 
   info("Testing waterfall sort, ascending. Checking sort loops correctly.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-waterfall-button"));
+    document.querySelector("#requests-menu-waterfall-button"));
   testHeaders("waterfall", "ascending");
   testContents([0, 2, 4, 3, 1]);
 
   return teardown(monitor);
 
   function getSelectedIndex(state) {
     if (!state.requests.selectedId) {
       return -1;
     }
     return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
   }
 
   function testHeaders(sortType, direction) {
     let doc = monitor.panelWin.document;
-    let target = doc.querySelector("#requests-list-" + sortType + "-button");
-    let headers = doc.querySelectorAll(".requests-list-header-button");
+    let target = doc.querySelector("#requests-menu-" + sortType + "-button");
+    let headers = doc.querySelectorAll(".requests-menu-header-button");
 
     for (let header of headers) {
       if (header != target) {
         ok(!header.hasAttribute("data-sorted"),
           "The " + header.id + " header does not have a 'data-sorted' attribute.");
         ok(!header.getAttribute("title"),
           "The " + header.id + " header does not have a 'title' attribute.");
       } else {

--- a/devtools/client/netmonitor/test/browser_net_statistics-02.js
+++ b/devtools/client/netmonitor/test/browser_net_statistics-02.js
@@ -12,25 +12,25 @@ add_task(function* () {
   let { monitor } = yield initNetMonitor(FILTERING_URL);
   info("Starting test... ");
 
   let panel = monitor.panelWin;
   let { document, gStore, windowRequire } = panel;
   let Actions = windowRequire("devtools/client/netmonitor/actions/index");
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-html-button"));
+    document.querySelector("#requests-menu-filter-html-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-css-button"));
+    document.querySelector("#requests-menu-filter-css-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-js-button"));
+    document.querySelector("#requests-menu-filter-js-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-ws-button"));
+    document.querySelector("#requests-menu-filter-ws-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-other-button"));
+    document.querySelector("#requests-menu-filter-other-button"));
   testFilterButtonsCustom(monitor, [0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1]);
   info("The correct filtering predicates are used before entering perf. analysis mode.");
 
   gStore.dispatch(Actions.openStatistics(true));
 
   ok(document.querySelector(".statistics-panel"),
     "The main panel is switched to the statistics panel.");
 

--- a/devtools/client/netmonitor/test/browser_net_status-codes.js
+++ b/devtools/client/netmonitor/test/browser_net_status-codes.js
@@ -160,17 +160,17 @@ add_task(function* () {
       document.querySelectorAll(".request-list-item")[index]);
 
     let panel = document.querySelector("#headers-panel");
     let summaryValues = panel.querySelectorAll(".tabpanel-summary-value.textbox-input");
     let { method, uri, details: { status, statusText } } = data;
 
     is(summaryValues[0].value, uri, "The url summary value is incorrect.");
     is(summaryValues[1].value, method, "The method summary value is incorrect.");
-    is(panel.querySelector(".requests-list-status-icon").dataset.code, status,
+    is(panel.querySelector(".requests-menu-status-icon").dataset.code, status,
       "The status summary code is incorrect.");
     is(summaryValues[3].value, status + " " + statusText,
       "The status summary value is incorrect.");
   }
 
   /**
    * A function that tests "Params" panel contains correct information.
    */

--- a/devtools/client/netmonitor/test/browser_net_timeline_ticks.js
+++ b/devtools/client/netmonitor/test/browser_net_timeline_ticks.js
@@ -14,44 +14,44 @@ add_task(function* () {
   info("Starting test... ");
 
   let { $, $all, NetMonitorView, NetMonitorController } = monitor.panelWin;
   let { RequestsMenu } = NetMonitorView;
 
   // Disable transferred size column support for this test.
   // Without this, the waterfall only has enough room for one division, which
   // would remove most of the value of this test.
-  // $("#requests-list-transferred-header-box").hidden = true;
-  // $("#requests-list-item-template .requests-list-transferred").hidden = true;
+  // $("#requests-menu-transferred-header-box").hidden = true;
+  // $("#requests-menu-item-template .requests-menu-transferred").hidden = true;
 
   RequestsMenu.lazyUpdate = false;
 
-  ok($("#requests-list-waterfall-label"),
+  ok($("#requests-menu-waterfall-label"),
     "An timeline label should be displayed when the frontend is opened.");
-  ok($all(".requests-list-timings-division").length == 0,
+  ok($all(".requests-menu-timings-division").length == 0,
     "No tick labels should be displayed when the frontend is opened.");
 
   ok(!RequestsMenu._canvas, "No canvas should be created when the frontend is opened.");
   ok(!RequestsMenu._ctx, "No 2d context should be created when the frontend is opened.");
 
   let wait = waitForNetworkEvents(monitor, 1);
   tab.linkedBrowser.reload();
   yield wait;
 
   // Make sure the DOMContentLoaded and load markers don't interfere with
   // this test by removing them and redrawing the waterfall (bug 1224088).
   NetMonitorController.NetworkEventsHandler.clearMarkers();
   RequestsMenu._flushWaterfallViews(true);
 
-  ok(!$("#requests-list-waterfall-label"),
+  ok(!$("#requests-menu-waterfall-label"),
     "The timeline label should be hidden after the first request.");
-  ok($all(".requests-list-timings-division").length >= 3,
+  ok($all(".requests-menu-timings-division").length >= 3,
     "There should be at least 3 tick labels in the network requests header.");
 
-  let timingDivisionEls = $all(".requests-list-timings-division");
+  let timingDivisionEls = $all(".requests-menu-timings-division");
   is(timingDivisionEls[0].textContent, L10N.getFormatStr("networkMenu.millisecond", 0),
     "The first tick label has correct value");
   is(timingDivisionEls[1].textContent, L10N.getFormatStr("networkMenu.millisecond", 80),
     "The second tick label has correct value");
   is(timingDivisionEls[2].textContent, L10N.getFormatStr("networkMenu.millisecond", 160),
     "The third tick label has correct value");
 
   is(timingDivisionEls[0].style.width, "78px", "The first tick label has correct width");

--- a/devtools/client/netmonitor/test/browser_net_timing-division.js
+++ b/devtools/client/netmonitor/test/browser_net_timing-division.js
@@ -20,21 +20,21 @@ add_task(function* () {
   let wait = waitForNetworkEvents(monitor, 2);
   // Timeout needed for having enough divisions on the time scale.
   yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
     content.wrappedJSObject.performRequests(2, null, 3000);
   });
   yield wait;
 
   let milDivs = document.querySelectorAll(
-    ".requests-list-timings-division[data-division-scale=millisecond]");
+    ".requests-menu-timings-division[data-division-scale=millisecond]");
   let secDivs = document.querySelectorAll(
-    ".requests-list-timings-division[data-division-scale=second]");
+    ".requests-menu-timings-division[data-division-scale=second]");
   let minDivs = document.querySelectorAll(
-    ".requests-list-timings-division[data-division-scale=minute]");
+    ".requests-menu-timings-division[data-division-scale=minute]");
 
   info("Number of millisecond divisions: " + milDivs.length);
   info("Number of second divisions: " + secDivs.length);
   info("Number of minute divisions: " + minDivs.length);
 
   milDivs.forEach(div => info(`Millisecond division: ${div.textContent}`));
   secDivs.forEach(div => info(`Second division: ${div.textContent}`));
   minDivs.forEach(div => info(`Minute division: ${div.textContent}`));

--- a/devtools/client/netmonitor/test/components/filter-buttons.test.js
+++ b/devtools/client/netmonitor/test/components/filter-buttons.test.js
@@ -89,14 +89,14 @@ describe("FilterButtons::toggleFilter:",
 });
 
 function asExpected(wrapper, expectTypes, description) {
   for (let type of Object.keys(expectTypes)) {
     let checked = expectTypes[type] ? "checked" : "not checked";
     let className = expectTypes[type] ?
         "devtools-button checked" : "devtools-button";
     it(`'${type}' button is ${checked} ${description}`, () => {
-      expect(wrapper.find(`#requests-list-filter-${type}-button`).html())
-      .toBe(`<button id="requests-list-filter-${type}-button" class="` + className +
+      expect(wrapper.find(`#requests-menu-filter-${type}-button`).html())
+      .toBe(`<button id="requests-menu-filter-${type}-button" class="` + className +
             `" data-key="${type}">netmonitor.toolbar.filter.${type}</button>`);
     });
   }
 }

--- a/devtools/client/netmonitor/test/head.js
+++ b/devtools/client/netmonitor/test/head.js
@@ -270,84 +270,84 @@ function verifyRequestItemTarget(documen
   if (fuzzyUrl) {
     ok(requestItem.method.startsWith(aMethod), "The attached method is correct.");
     ok(requestItem.url.startsWith(aUrl), "The attached url is correct.");
   } else {
     is(requestItem.method, aMethod, "The attached method is correct.");
     is(requestItem.url, aUrl, "The attached url is correct.");
   }
 
-  is(target.querySelector(".requests-list-method").textContent,
+  is(target.querySelector(".requests-menu-method").textContent,
     aMethod, "The displayed method is correct.");
 
   if (fuzzyUrl) {
-    ok(target.querySelector(".requests-list-file").textContent.startsWith(
+    ok(target.querySelector(".requests-menu-file").textContent.startsWith(
       name + (query ? "?" + query : "")), "The displayed file is correct.");
-    ok(target.querySelector(".requests-list-file").getAttribute("title").startsWith(unicodeUrl),
+    ok(target.querySelector(".requests-menu-file").getAttribute("title").startsWith(unicodeUrl),
       "The tooltip file is correct.");
   } else {
-    is(target.querySelector(".requests-list-file").textContent,
+    is(target.querySelector(".requests-menu-file").textContent,
       name + (query ? "?" + query : ""), "The displayed file is correct.");
-    is(target.querySelector(".requests-list-file").getAttribute("title"),
+    is(target.querySelector(".requests-menu-file").getAttribute("title"),
       unicodeUrl, "The tooltip file is correct.");
   }
 
-  is(target.querySelector(".requests-list-domain").textContent,
+  is(target.querySelector(".requests-menu-domain").textContent,
     hostPort, "The displayed domain is correct.");
 
   let domainTooltip = hostPort + (remoteAddress ? " (" + remoteAddress + ")" : "");
-  is(target.querySelector(".requests-list-domain").getAttribute("title"),
+  is(target.querySelector(".requests-menu-domain").getAttribute("title"),
     domainTooltip, "The tooltip domain is correct.");
 
   if (status !== undefined) {
-    let value = target.querySelector(".requests-list-status-icon").getAttribute("data-code");
-    let codeValue = target.querySelector(".requests-list-status-code").textContent;
-    let tooltip = target.querySelector(".requests-list-status").getAttribute("title");
+    let value = target.querySelector(".requests-menu-status-icon").getAttribute("data-code");
+    let codeValue = target.querySelector(".requests-menu-status-code").textContent;
+    let tooltip = target.querySelector(".requests-menu-status").getAttribute("title");
     info("Displayed status: " + value);
     info("Displayed code: " + codeValue);
     info("Tooltip status: " + tooltip);
     is(value, displayedStatus ? displayedStatus : status, "The displayed status is correct.");
     is(codeValue, status, "The displayed status code is correct.");
     is(tooltip, status + " " + statusText, "The tooltip status is correct.");
   }
   if (cause !== undefined) {
-    let value = target.querySelector(".requests-list-cause > .subitem-label").textContent;
-    let tooltip = target.querySelector(".requests-list-cause").getAttribute("title");
+    let value = target.querySelector(".requests-menu-cause > .subitem-label").textContent;
+    let tooltip = target.querySelector(".requests-menu-cause").getAttribute("title");
     info("Displayed cause: " + value);
     info("Tooltip cause: " + tooltip);
     is(value, cause.type, "The displayed cause is correct.");
     is(tooltip, cause.loadingDocumentUri, "The tooltip cause is correct.")
   }
   if (type !== undefined) {
-    let value = target.querySelector(".requests-list-type").textContent;
-    let tooltip = target.querySelector(".requests-list-type").getAttribute("title");
+    let value = target.querySelector(".requests-menu-type").textContent;
+    let tooltip = target.querySelector(".requests-menu-type").getAttribute("title");
     info("Displayed type: " + value);
     info("Tooltip type: " + tooltip);
     is(value, type, "The displayed type is correct.");
     is(tooltip, fullMimeType, "The tooltip type is correct.");
   }
   if (transferred !== undefined) {
-    let value = target.querySelector(".requests-list-transferred").textContent;
-    let tooltip = target.querySelector(".requests-list-transferred").getAttribute("title");
+    let value = target.querySelector(".requests-menu-transferred").textContent;
+    let tooltip = target.querySelector(".requests-menu-transferred").getAttribute("title");
     info("Displayed transferred size: " + value);
     info("Tooltip transferred size: " + tooltip);
     is(value, transferred, "The displayed transferred size is correct.");
     is(tooltip, transferred, "The tooltip transferred size is correct.");
   }
   if (size !== undefined) {
-    let value = target.querySelector(".requests-list-size").textContent;
-    let tooltip = target.querySelector(".requests-list-size").getAttribute("title");
+    let value = target.querySelector(".requests-menu-size").textContent;
+    let tooltip = target.querySelector(".requests-menu-size").getAttribute("title");
     info("Displayed size: " + value);
     info("Tooltip size: " + tooltip);
     is(value, size, "The displayed size is correct.");
     is(tooltip, size, "The tooltip size is correct.");
   }
   if (time !== undefined) {
-    let value = target.querySelector(".requests-list-timings-total").textContent;
-    let tooltip = target.querySelector(".requests-list-timings-total").getAttribute("title");
+    let value = target.querySelector(".requests-menu-timings-total").textContent;
+    let tooltip = target.querySelector(".requests-menu-timings-total").getAttribute("title");
     info("Displayed time: " + value);
     info("Tooltip time: " + tooltip);
     ok(~~(value.match(/[0-9]+/)) >= 0, "The displayed time is correct.");
     ok(~~(tooltip.match(/[0-9]+/)) >= 0, "The tooltip time is correct.");
   }
 
   if (visibleIndex !== -1) {
     if (visibleIndex % 2 === 0) {
@@ -380,19 +380,19 @@ function waitFor(subject, eventName) {
 /**
  * Tests if a button for a filter of given type is the only one checked.
  *
  * @param string filterType
  *        The type of the filter that should be the only one checked.
  */
 function testFilterButtons(monitor, filterType) {
   let doc = monitor.panelWin.document;
-  let target = doc.querySelector("#requests-list-filter-" + filterType + "-button");
+  let target = doc.querySelector("#requests-menu-filter-" + filterType + "-button");
   ok(target, `Filter button '${filterType}' was found`);
-  let buttons = [...doc.querySelectorAll("#requests-list-filter-buttons button")];
+  let buttons = [...doc.querySelectorAll("#requests-menu-filter-buttons button")];
   ok(buttons.length > 0, "More than zero filter buttons were found");
 
   // Only target should be checked.
   let checkStatus = buttons.map(button => button == target ? 1 : 0);
   testFilterButtonsCustom(monitor, checkStatus);
 }
 
 /**
@@ -400,17 +400,17 @@ function testFilterButtons(monitor, filt
  *
  * @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-list-filter-buttons button");
+  let buttons = doc.querySelectorAll("#requests-menu-filter-buttons button");
   for (let i = 0; i < aIsChecked.length; i++) {
     let button = buttons[i];
     if (aIsChecked[i]) {
       is(button.classList.contains("checked"), true,
         "The " + button.id + " button should have a 'checked' class.");
       is(button.getAttribute("aria-pressed"), "true",
         "The " + button.id + " button should set 'aria-pressed' = true.");
     } else {

--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -95,79 +95,79 @@
   padding: 12px;
   font-size: 120%;
 }
 
 #notice-perf-message {
   margin-top: 2px;
 }
 
-#requests-list-perf-notice-button {
+#requests-menu-perf-notice-button {
   min-width: 30px;
   min-height: 26px;
   margin: 0 5px;
   vertical-align: middle;
 }
 
-#requests-list-perf-notice-button::before {
+#requests-menu-perf-notice-button::before {
   background-image: url(images/profiler-stopwatch.svg);
 }
 
-#requests-list-reload-notice-button {
+#requests-menu-reload-notice-button {
   font-size: inherit;
   min-height: 26px;
   margin: 0 5px;
 }
 
 /* Network requests table */
 
-#requests-list-toolbar {
+#requests-menu-toolbar {
   display: flex;
   padding: 0;
 }
 
-#requests-list-filter-buttons {
+#requests-menu-filter-buttons {
   display: flex;
   flex-wrap: nowrap;
 }
 
-.theme-firebug #requests-list-toolbar {
+.theme-firebug #requests-menu-toolbar {
   height: 19px !important;
 }
 
-.requests-list-contents {
+.requests-menu-contents {
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
   --timings-scale: 1;
   --timings-rev-scale: 1;
 }
 
-.requests-list-subitem {
+.requests-menu-subitem {
   display: flex;
   flex: none;
   box-sizing: border-box;
   align-items: center;
   padding: 3px;
   cursor: default;
 }
 
 .subitem-label {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.requests-list-header {
+.requests-menu-header {
   display: flex;
   flex: none;
 }
 
-.requests-list-header-button {
+.requests-menu-header-button {
   display: flex;
   align-items: center;
   flex: auto;
   -moz-appearance: none;
   background-color: transparent;
   border-image: linear-gradient(transparent 15%,
                                 var(--theme-splitter-color) 15%,
                                 var(--theme-splitter-color) 85%,
@@ -182,131 +182,131 @@
   padding-bottom: 2px;
   padding-inline-start: 16px;
   padding-inline-end: 0;
   text-align: center;
   color: inherit;
   font-weight: inherit !important;
 }
 
-.requests-list-header-button::-moz-focus-inner {
+.requests-menu-header-button::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
 
-.requests-list-header:first-child .requests-list-header-button {
+.requests-menu-header:first-child .requests-menu-header-button {
   border-width: 0;
 }
 
-.requests-list-header-button:hover {
+.requests-menu-header-button:hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-.requests-list-header-button > .button-text {
+.requests-menu-header-button > .button-text {
   flex: auto;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.requests-list-header-button > .button-icon {
+.requests-menu-header-button > .button-icon {
   flex: none;
   height: 4px;
   margin-inline-start: 3px;
   margin-inline-end: 6px;
   width: 7px;
 }
 
-.requests-list-header-button[data-sorted=ascending] > .button-icon {
+.requests-menu-header-button[data-sorted=ascending] > .button-icon {
   background-image: var(--sort-ascending-image);
 }
 
-.requests-list-header-button[data-sorted=descending] > .button-icon {
+.requests-menu-header-button[data-sorted=descending] > .button-icon {
   background-image: var(--sort-descending-image);
 }
 
-.requests-list-waterfall-label-wrapper {
+.requests-menu-waterfall-label-wrapper {
   display: flex;
 }
 
-.requests-list-header-button[data-sorted],
-.requests-list-header-button[data-sorted]:hover {
+.requests-menu-header-button[data-sorted],
+.requests-menu-header-button[data-sorted]:hover {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
-.requests-list-header-button[data-sorted],
-.requests-list-header[data-active] + .requests-list-header .requests-list-header-button {
+.requests-menu-header-button[data-sorted],
+.requests-menu-header[data-active] + .requests-menu-header .requests-menu-header-button {
   border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
 }
 
 /* Firebug theme support for Network panel header */
 
-.theme-firebug .requests-list-header {
+.theme-firebug .requests-menu-header {
   padding: 0 !important;
   font-weight: bold;
   background: linear-gradient(rgba(255, 255, 255, 0.05),
                               rgba(0, 0, 0, 0.05)),
                               #C8D2DC;
 }
 
-.theme-firebug .requests-list-header-button {
+.theme-firebug .requests-menu-header-button {
   min-height: 17px;
 }
 
-.theme-firebug .requests-list-header-button > .button-icon {
+.theme-firebug .requests-menu-header-button > .button-icon {
   height: 7px;
 }
 
-.theme-firebug .requests-list-header-button[data-sorted] {
+.theme-firebug .requests-menu-header-button[data-sorted] {
   background-color: #AAC3DC;
 }
 
-:root[platform="linux"].theme-firebug .requests-list-header-button[data-sorted] {
+:root[platform="linux"].theme-firebug .requests-menu-header-button[data-sorted] {
   background-color: #FAC8AF !important;
   color: inherit !important;
 }
 
-.theme-firebug .requests-list-header:hover:active {
+.theme-firebug .requests-menu-header:hover:active {
   background-image: linear-gradient(rgba(0, 0, 0, 0.1),
                                     transparent);
 }
 
 
 /* Network requests table: specific column dimensions */
 
-.requests-list-status {
+.requests-menu-status {
   max-width: 6em;
   text-align: center;
   width: 10vw;
 }
 
-.requests-list-method,
-.requests-list-method-box {
+.requests-menu-method,
+.requests-menu-method-box {
   max-width: 7em;
   text-align: center;
   width: 10vw;
 }
 
-.requests-list-icon-and-file {
+.requests-menu-icon-and-file {
   width: 22vw;
 }
 
-.requests-list-icon {
+.requests-menu-icon {
   background: transparent;
   width: 15px;
   height: 15px;
   margin-inline-end: 4px;
 }
 
-.requests-list-icon {
+.requests-menu-icon {
   outline: 1px solid var(--table-splitter-color);
 }
 
-.requests-list-security-and-domain {
+.requests-menu-security-and-domain {
   width: 14vw;
 }
 
 .requests-security-state-icon {
   flex: none;
   width: 16px;
   height: 16px;
   margin-inline-end: 4px;
@@ -331,242 +331,242 @@
 .security-state-broken {
   background-image: url(chrome://devtools/skin/images/security-state-broken.svg);
 }
 
 .security-state-local {
   background-image: url(chrome://devtools/skin/images/globe.svg);
 }
 
-.requests-list-type,
-.requests-list-size {
+.requests-menu-type,
+.requests-menu-size {
   max-width: 6em;
   width: 8vw;
   justify-content: center;
 }
 
-.requests-list-transferred {
+.requests-menu-transferred {
   max-width: 8em;
   width: 8vw;
   justify-content: center;
 }
 
-.requests-list-cause {
+.requests-menu-cause {
   max-width: 8em;
   width: 8vw;
 }
 
-.requests-list-cause-stack {
+.requests-menu-cause-stack {
   background-color: var(--theme-body-color-alt);
   color: var(--theme-body-background);
   font-size: 8px;
   font-weight: bold;
   line-height: 10px;
   border-radius: 3px;
   padding: 0 2px;
   margin: 0;
   margin-inline-end: 3px;
   -moz-user-select: none;
 }
 
-.request-list-item.selected .requests-list-transferred.theme-comment {
+.request-list-item.selected .requests-menu-transferred.theme-comment {
   color: var(--theme-selection-color);
 }
 
 /* Network requests table: status codes */
 
-.requests-list-status-code {
+.requests-menu-status-code {
   margin-inline-start: 3px !important;
   width: 3em;
   margin-inline-end: -3em !important;
 }
 
-.requests-list-status-icon {
+.requests-menu-status-icon {
   background: #fff;
   height: 10px;
   width: 10px;
   margin-inline-start: 5px;
   margin-inline-end: 5px;
   border-radius: 10px;
   transition: box-shadow 0.5s ease-in-out;
   box-sizing: border-box;
 }
 
-.request-list-item.selected .requests-list-status-icon {
+.request-list-item.selected .requests-menu-status-icon {
   filter: brightness(1.3);
 }
 
-.requests-list-status-icon:not([data-code]) {
+.requests-menu-status-icon:not([data-code]) {
   background-color: var(--theme-content-color2);
 }
 
-.requests-list-status-icon[data-code="cached"] {
+.requests-menu-status-icon[data-code="cached"] {
   border: 2px solid var(--theme-content-color2);
   background-color: transparent;
 }
 
-.requests-list-status-icon[data-code^="1"] {
+.requests-menu-status-icon[data-code^="1"] {
   background-color: var(--theme-highlight-blue);
 }
 
-.requests-list-status-icon[data-code^="2"] {
+.requests-menu-status-icon[data-code^="2"] {
   background-color: var(--theme-highlight-green);
 }
 
 /* 3xx are triangles */
-.requests-list-status-icon[data-code^="3"] {
+.requests-menu-status-icon[data-code^="3"] {
   background-color: transparent;
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-bottom: 10px solid var(--theme-highlight-lightorange);
   border-radius: 0;
 }
 
 /* 4xx and 5xx are squares - error codes */
-.requests-list-status-icon[data-code^="4"] {
+.requests-menu-status-icon[data-code^="4"] {
  background-color: var(--theme-highlight-red);
   border-radius: 0; /* squares */
 }
 
-.requests-list-status-icon[data-code^="5"] {
+.requests-menu-status-icon[data-code^="5"] {
   background-color: var(--theme-highlight-pink);
   border-radius: 0;
   transform: rotate(45deg);
 }
 
 /* Network requests table: waterfall header */
 
-.requests-list-waterfall {
+.requests-menu-waterfall {
   flex: auto;
   padding-inline-start: 0;
 }
 
-.requests-list-waterfall-label-wrapper:not(.requests-list-waterfall-visible) {
+.requests-menu-waterfall-label-wrapper:not(.requests-menu-waterfall-visible) {
   padding-inline-start: 16px;
 }
 
-.requests-list-timings-division {
+.requests-menu-timings-division {
   padding-top: 2px;
   padding-inline-start: 4px;
   font-size: 75%;
   pointer-events: none;
   box-sizing: border-box;
   text-align: start;
   /* Allow the timing label to shrink if the container gets too narrow.
    * The container width then is not limited by the content. */
   flex: initial;
 }
 
-.requests-list-timings-division:not(:first-child) {
+.requests-menu-timings-division:not(:first-child) {
   border-inline-start: 1px dashed;
 }
 
-.requests-list-timings-division:-moz-locale-dir(ltr) {
+.requests-menu-timings-division:-moz-locale-dir(ltr) {
   transform-origin: left center;
 }
 
-.requests-list-timings-division:-moz-locale-dir(rtl) {
+.requests-menu-timings-division:-moz-locale-dir(rtl) {
   transform-origin: right center;
 }
 
-.theme-dark .requests-list-timings-division {
+.theme-dark .requests-menu-timings-division {
   border-inline-start-color: #5a6169 !important;
 }
 
-.theme-light .requests-list-timings-division {
+.theme-light .requests-menu-timings-division {
   border-inline-start-color: #585959 !important;
 }
 
-.requests-list-timings-division[data-division-scale=second],
-.requests-list-timings-division[data-division-scale=minute] {
+.requests-menu-timings-division[data-division-scale=second],
+.requests-menu-timings-division[data-division-scale=minute] {
   font-weight: 600;
 }
 
 /* Network requests table: waterfall items */
 
-.requests-list-subitem.requests-list-waterfall {
+.requests-menu-subitem.requests-menu-waterfall {
   padding-inline-start: 0;
   padding-inline-end: 4px;
   /* Background created on a <canvas> in js. */
   /* @see devtools/client/netmonitor/netmonitor-view.js */
   background-image: -moz-element(#waterfall-background);
   background-repeat: repeat-y;
   background-position: left center;
 }
 
-.requests-list-subitem.requests-list-waterfall:-moz-locale-dir(rtl) {
+.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
   background-position: right center;
 }
 
-.requests-list-timings {
+.requests-menu-timings {
   display: flex;
   flex: none;
   align-items: center;
   transform: scaleX(var(--timings-scale));
 }
 
-.requests-list-timings:-moz-locale-dir(ltr) {
+.requests-menu-timings:-moz-locale-dir(ltr) {
   transform-origin: left center;
 }
 
-.requests-list-timings:-moz-locale-dir(rtl) {
+.requests-menu-timings:-moz-locale-dir(rtl) {
   transform-origin: right center;
 }
 
-.requests-list-timings-total:-moz-locale-dir(ltr) {
+.requests-menu-timings-total:-moz-locale-dir(ltr) {
   transform-origin: left center;
 }
 
-.requests-list-timings-total:-moz-locale-dir(rtl) {
+.requests-menu-timings-total:-moz-locale-dir(rtl) {
   transform-origin: right center;
 }
 
-.requests-list-timings-total {
+.requests-menu-timings-total {
   display: inline-block;
   padding-inline-start: 4px;
   font-size: 85%;
   font-weight: 600;
   white-space: nowrap;
   /* This node should not be scaled - apply a reversed transformation */
   transform: scaleX(var(--timings-rev-scale));
 }
 
-.requests-list-timings-box {
+.requests-menu-timings-box {
   display: inline-block;
   height: 9px;
 }
 
-.theme-firebug .requests-list-timings-box {
+.theme-firebug .requests-menu-timings-box {
   background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
   height: 16px;
 }
 
-.requests-list-timings-box.blocked {
+.requests-menu-timings-box.blocked {
   background-color: var(--timing-blocked-color);
 }
 
-.requests-list-timings-box.dns {
+.requests-menu-timings-box.dns {
   background-color: var(--timing-dns-color);
 }
 
-.requests-list-timings-box.connect {
+.requests-menu-timings-box.connect {
   background-color: var(--timing-connect-color);
 }
 
-.requests-list-timings-box.send {
+.requests-menu-timings-box.send {
   background-color: var(--timing-send-color);
 }
 
-.requests-list-timings-box.wait {
+.requests-menu-timings-box.wait {
   background-color: var(--timing-wait-color);
 }
 
-.requests-list-timings-box.receive {
+.requests-menu-timings-box.receive {
   background-color: var(--timing-receive-color);
 }
 
 /* SideMenuWidget */
 #network-table .request-list-empty-notice,
 #network-table .request-list-container {
   background-color: var(--theme-body-background);
 }
@@ -590,37 +590,37 @@
 .request-list-item:not(.selected):hover {
   background-color: var(--theme-selection-background-semitransparent);
 }
 
 .theme-firebug .request-list-item:not(.selected):hover {
   background: #EFEFEF;
 }
 
-.theme-firebug .requests-list-subitem {
+.theme-firebug .requests-menu-subitem {
   padding: 1px;
 }
 
 /* HTTP Status Column */
-.theme-firebug .requests-list-subitem.requests-list-status {
+.theme-firebug .requests-menu-subitem.requests-menu-status {
   font-weight: bold;
 }
 
 /* Method Column */
 
-.theme-firebug .requests-list-subitem.requests-list-method-box {
+.theme-firebug .requests-menu-subitem.requests-menu-method-box {
   color: rgb(128, 128, 128);
 }
 
-.request-list-item.selected .requests-list-method {
+.request-list-item.selected .requests-menu-method {
   color: var(--theme-selection-color);
 }
 
 /* Size Column */
-.theme-firebug .requests-list-subitem.requests-list-size {
+.theme-firebug .requests-menu-subitem.requests-menu-size {
   justify-content: end;
   padding-inline-end: 4px;
 }
 
 /* Network details panel */
 
 .network-details-panel-toggle[disabled] {
   display: none;
@@ -701,33 +701,33 @@
 .timings-container {
   display: flex;
 }
 
 .timings-label {
   width: 10em;
 }
 
-.requests-list-timings-container {
+.requests-menu-timings-container {
   display: flex;
   flex: 1;
   align-items: center;
 }
 
-.requests-list-timings-offset {
+.requests-menu-timings-offset {
   transition: width 0.2s ease-out;
 }
 
-.requests-list-timings-box {
+.requests-menu-timings-box {
   border: none;
   min-width: 1px;
   transition: width 0.2s ease-out;
 }
 
-.theme-firebug .requests-list-timings-total {
+.theme-firebug .requests-menu-timings-total {
   color: var(--theme-body-color);
 }
 
 /* Security tabpanel */
 
 /* Overwrite tree-view cell colon `:` for security panel and tree section */
 .security-panel .treeTable .treeLabelCell::after,
 .treeTable .tree-section .treeLabelCell::after {
@@ -800,44 +800,44 @@
 
 .custom-url-value {
   flex-grow: 1;
   margin-inline-start: 6px;
 }
 
 /* Performance analysis buttons */
 
-#requests-list-network-summary-button {
+#requests-menu-network-summary-button {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   background: none;
   box-shadow: none;
   border-color: transparent;
   padding-inline-end: 0;
   cursor: pointer;
   margin-inline-end: 1em;
   min-width: 0;
 }
 
-#requests-list-network-summary-button > .summary-info-icon {
+#requests-menu-network-summary-button > .summary-info-icon {
   background-image: url(images/profiler-stopwatch.svg);
   filter: var(--icon-filter);
   width: 16px;
   height: 16px;
   opacity: 0.8;
 }
 
-#requests-list-network-summary-button > .summary-info-text {
+#requests-menu-network-summary-button > .summary-info-text {
   opacity: 0.8;
   margin-inline-start: 0.5em;
 }
 
-#requests-list-network-summary-button:hover > .summary-info-icon,
-#requests-list-network-summary-button:hover > .summary-info-text {
+#requests-menu-network-summary-button:hover > .summary-info-icon,
+#requests-menu-network-summary-button:hover > .summary-info-text {
   opacity: 1;
 }
 
 /* Performance analysis view */
 
 .statistics-panel {
   display: flex;
   height: 100vh;
@@ -1005,97 +1005,97 @@
   fill: rgba(84, 235, 159, 0.8); /* cyan */
   background: rgba(84, 235, 159, 0.8);
 }
 
 /* Responsive sidebar */
 @media (max-width: 700px) {
   #toolbar-spacer,
   .network-details-panel-toggle,
-  #requests-list-network-summary-button > .summary-info-text {
+  #requests-menu-network-summary-button > .summary-info-text {
     display: none;
   }
 
-  #requests-list-toolbar {
+  #requests-menu-toolbar {
     height: 22px;
   }
 
-  .requests-list-header-button {
+  .requests-menu-header-button {
     min-height: 22px;
     padding-left: 8px;
   }
 
-  .requests-list-status {
+  .requests-menu-status {
     max-width: none;
     width: 10vw;
   }
 
-  .requests-list-status-code {
+  .requests-menu-status-code {
     width: auto;
   }
 
-  .requests-list-method,
-  .requests-list-method-box {
+  .requests-menu-method,
+  .requests-menu-method-box {
     max-width: none;
     width: 12vw;
   }
 
-  .requests-list-icon-and-file {
+  .requests-menu-icon-and-file {
     width: 22vw;
   }
 
-  .requests-list-security-and-domain {
+  .requests-menu-security-and-domain {
     width: 16vw;
   }
 
-  .requests-list-cause,
-  .requests-list-type,
-  .requests-list-transferred,
-  .requests-list-size {
+  .requests-menu-cause,
+  .requests-menu-type,
+  .requests-menu-transferred,
+  .requests-menu-size {
     max-width: none;
     width: 10vw;
   }
 
-  .requests-list-waterfall {
+  .requests-menu-waterfall {
     display: none;
   }
 
   .statistics-panel .charts-container {
     flex-direction: column;
     /* Minus 4em for statistics back button width */
     width: calc(100% - 4em);
   }
 
   .statistics-panel .splitter {
     width: 100%;
     height: 1px;
   }
 }
 
 /* Platform overrides (copied in from the old platform specific files) */
-:root[platform="win"] .requests-list-header-button > .button-box {
+:root[platform="win"] .requests-menu-header-button > .button-box {
   padding: 0;
 }
 
-:root[platform="win"] .requests-list-timings-division {
+:root[platform="win"] .requests-menu-timings-division {
   padding-top: 1px;
   font-size: 90%;
 }
 
 :root[platform="linux"] #headers-summary-resend {
   padding: 4px;
 }
 
 :root[platform="linux"] #toggle-raw-headers {
   padding: 4px;
 }
 
 /* Responsive sidebar */
 @media (max-width: 700px) {
-  :root[platform="linux"] .requests-list-header-button {
+  :root[platform="linux"] .requests-menu-header-button {
     font-size: 85%;
   }
 }
 
 .textbox-input {
   text-overflow: ellipsis;
   border: none;
   background: none;
@@ -1228,17 +1228,17 @@
   display: flex;
   align-items: center;
 }
 
 .headers-summary .devtools-button {
   margin-inline-end: 6px;
 }
 
-.headers-summary .requests-list-status-icon {
+.headers-summary .requests-menu-status-icon {
   min-width: 10px;
 }
 
 .headers-summary .raw-headers-container {
   display: flex;
   width: 100%;
 }