Bug 1316291 - Rename the requests-menu CSS classes in netmonitor.css;r=Honza
☠☠ backed out by 554a4f2a1523 ☠ ☠
authorFred Lin <gasolin@mozilla.com>
Wed, 08 Feb 2017 14:20:44 +0800
changeset 343513 65d7f3924ba67802a277113790e9be8da088ebc8
parent 343512 c1e8aed2515ee9f3a6b5dc4b422e02948d212a60
child 343514 94ecf75560ac9950aaee7a08068d8e45ab63469f
push id31381
push userkwierso@gmail.com
push dateFri, 17 Feb 2017 20:45:51 +0000
treeherdermozilla-central@f302def88fe5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1316291
milestone54.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1316291 - Rename the requests-menu CSS classes in netmonitor.css;r=Honza MozReview-Commit-ID: DceweCXElI4
devtools/client/netmonitor/components/request-list-content.js
devtools/client/netmonitor/components/request-list-empty.js
devtools/client/netmonitor/components/request-list-header.js
devtools/client/netmonitor/components/request-list-item.js
devtools/client/netmonitor/components/toolbar.js
devtools/client/netmonitor/request-list-context-menu.js
devtools/client/netmonitor/request-list-tooltip.js
devtools/client/netmonitor/shared/components/headers-panel.js
devtools/client/netmonitor/shared/components/timings-panel.js
devtools/client/netmonitor/test/browser_net_accessibility-02.js
devtools/client/netmonitor/test/browser_net_autoscroll.js
devtools/client/netmonitor/test/browser_net_cause.js
devtools/client/netmonitor/test/browser_net_clear.js
devtools/client/netmonitor/test/browser_net_copy_as_curl.js
devtools/client/netmonitor/test/browser_net_copy_headers.js
devtools/client/netmonitor/test/browser_net_copy_image_as_data_uri.js
devtools/client/netmonitor/test/browser_net_copy_params.js
devtools/client/netmonitor/test/browser_net_copy_response.js
devtools/client/netmonitor/test/browser_net_copy_svg_image_as_data_uri.js
devtools/client/netmonitor/test/browser_net_copy_url.js
devtools/client/netmonitor/test/browser_net_filter-01.js
devtools/client/netmonitor/test/browser_net_filter-02.js
devtools/client/netmonitor/test/browser_net_filter-03.js
devtools/client/netmonitor/test/browser_net_footer-summary.js
devtools/client/netmonitor/test/browser_net_icon-preview.js
devtools/client/netmonitor/test/browser_net_image-tooltip.js
devtools/client/netmonitor/test/browser_net_open_request_in_tab.js
devtools/client/netmonitor/test/browser_net_reload-button.js
devtools/client/netmonitor/test/browser_net_reload-markers.js
devtools/client/netmonitor/test/browser_net_security-icon-click.js
devtools/client/netmonitor/test/browser_net_security-state.js
devtools/client/netmonitor/test/browser_net_simple-request-details.js
devtools/client/netmonitor/test/browser_net_simple-request.js
devtools/client/netmonitor/test/browser_net_sort-01.js
devtools/client/netmonitor/test/browser_net_sort-02.js
devtools/client/netmonitor/test/browser_net_statistics-02.js
devtools/client/netmonitor/test/browser_net_status-codes.js
devtools/client/netmonitor/test/browser_net_timeline_ticks.js
devtools/client/netmonitor/test/browser_net_timing-division.js
devtools/client/netmonitor/test/components/filter-buttons.test.js
devtools/client/netmonitor/test/head.js
devtools/client/themes/netmonitor.css
--- 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-menu-icon-and-file")) {
+    if (requestItem.responseContent && target.closest(".requests-list-icon-and-file")) {
       return setTooltipImageContent(tooltip, itemEl, requestItem);
-    } else if (requestItem.cause && target.closest(".requests-menu-cause-stack")) {
+    } else if (requestItem.cause && target.closest(".requests-list-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-menu-contents",
+        className: "requests-list-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-menu-empty-notice",
+        id: "requests-list-empty-notice",
         className: "request-list-empty-notice",
       },
       div({ id: "notice-reload-message" },
         span(null, L10N.getStr("netmonitor.reloadNotice1")),
         button(
           {
-            id: "requests-menu-reload-notice-button",
+            id: "requests-list-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-menu-perf-notice-button",
+          id: "requests-list-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-menu-toolbar", className: "devtools-toolbar" },
+      { id: "requests-list-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-menu-${boxName}-header-box`,
-              className: `requests-menu-header requests-menu-${boxName}`,
+              id: `requests-list-${boxName}-header-box`,
+              className: `requests-list-header requests-list-${boxName}`,
               key: name,
               ref: "header",
               // Used to style the next column.
               "data-active": active,
             },
             button(
               {
-                id: `requests-menu-${name}-button`,
-                className: `requests-menu-header-button requests-menu-${name}`,
+                id: `requests-list-${name}-button`,
+                className: `requests-list-header-button requests-list-${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-menu-timings-division",
+        className: "requests-list-timings-division",
         "data-division-scale": divisionScale,
         style: { width }
       },
       getFormattedTime(millisecondTime)
     ));
   }
 
   return labels;
 }
 
 function WaterfallLabel(waterfallWidth, scale, label) {
-  let className = "button-text requests-menu-waterfall-label-wrapper";
+  let className = "button-text requests-list-waterfall-label-wrapper";
 
   if (waterfallWidth != null && scale != null) {
     label = waterfallDivisionLabels(waterfallWidth, scale);
-    className += " requests-menu-waterfall-visible";
+    className += " requests-list-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-menu-subitem requests-menu-status", title },
-        div({ className: "requests-menu-status-icon", "data-code": code }),
-        span({ className: "subitem-label requests-menu-status-code" }, status),
+        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)
       )
     );
   }
 }));
 
 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-menu-subitem requests-menu-method-box" },
-        span({ className: "subitem-label requests-menu-method" }, method)
+      div({ className: "requests-list-subitem requests-list-method-box" },
+        span({ className: "subitem-label requests-list-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-menu-subitem requests-menu-icon-and-file" },
+      div({ className: "requests-list-subitem requests-list-icon-and-file" },
         img({
-          className: "requests-menu-icon",
+          className: "requests-list-icon",
           src: responseContentDataUri,
           hidden: !responseContentDataUri,
           "data-type": responseContentDataUri ? "thumbnail" : undefined,
         }),
         div({
-          className: "subitem-label requests-menu-file",
+          className: "subitem-label requests-list-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-menu-subitem requests-menu-security-and-domain" },
+      div({ className: "requests-list-subitem requests-list-security-and-domain" },
         div({
           className: iconClassList.join(" "),
           title: iconTitle,
           onClick: onSecurityIconClick,
         }),
-        span({ className: "subitem-label requests-menu-domain", title }, urlDetails.host),
+        span({ className: "subitem-label requests-list-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-menu-subitem requests-menu-cause",
+        className: "requests-list-subitem requests-list-cause",
         title: causeUri,
       },
         span({
-          className: "requests-menu-cause-stack",
+          className: "requests-list-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-menu-subitem requests-menu-type",
+        className: "requests-list-subitem requests-list-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-menu-subitem requests-menu-transferred",
+        className: "requests-list-subitem requests-list-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-menu-subitem subitem-label requests-menu-size",
+        className: "requests-list-subitem subitem-label requests-list-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-menu-subitem requests-menu-waterfall" },
+      div({ className: "requests-list-subitem requests-list-waterfall" },
         div({
-          className: "requests-menu-timings",
+          className: "requests-list-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-menu-timings-box " + key,
+          className: "requests-list-timings-box " + key,
           style: { width }
         }));
       }
     }
   }
 
   if (typeof totalTime === "number") {
     let text = L10N.getFormatStr("networkMenu.totalMS", totalTime);
     boxes.push(div({
       key: "total",
-      className: "requests-menu-timings-total",
-      title: text,
+      className: "requests-list-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-menu-filter-${type}-button`,
+          id: `requests-list-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-menu-clear-button",
+            id: "requests-list-clear-button",
             className: "devtools-button devtools-clear-icon",
             title: TOOLBAR_CLEAR,
             onClick: clearRequests,
           }),
-          div({ id: "requests-menu-filter-buttons" }, buttons),
+          div({ id: "requests-list-filter-buttons" }, buttons),
         ),
         span({ className: "devtools-toolbar-group" },
           button({
-            id: "requests-menu-network-summary-button",
+            id: "requests-list-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
@@ -49,139 +49,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-menu-context-copy-url",
+      id: "request-list-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-menu-context-copy-url-params",
+      id: "request-list-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-menu-context-copy-post-data",
+      id: "request-list-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-menu-context-copy-as-curl",
+      id: "request-list-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-menu-context-copy-request-headers",
+      id: "request-list-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-menu-context-copy-response-headers",
+      id: "response-list-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-menu-context-copy-response",
+      id: "request-list-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-menu-context-copy-image-as-data-uri",
+      id: "request-list-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-menu-context-copy-all-as-har",
+      id: "request-list-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-menu-context-save-all-as-har",
+      id: "request-list-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-menu-context-resend",
+      id: "request-list-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-menu-context-newtab",
+      id: "request-list-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-menu-context-perf",
+      id: "request-list-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-menu-icon");
+  return itemEl.querySelector(".requests-list-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-menu-status-icon",
+            className: "requests-list-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-menu-timings-container" },
+      div({ className: "requests-list-timings-container" },
         span({
-          className: "requests-menu-timings-offset",
+          className: "requests-list-timings-offset",
           style: {
             width: `calc(${offsetScale} * (100% - ${TIMINGS_END_PADDING})`,
           },
         }),
         span({
-          className: `requests-menu-timings-box ${type}`,
+          className: `requests-list-timings-box ${type}`,
           style: {
             width: `calc(${timelineScale} * (100% - ${TIMINGS_END_PADDING}))`,
           },
         }),
-        span({ className: "requests-menu-timings-total" },
+        span({ className: "requests-list-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-menu-contents").focus();
+  document.querySelector(".requests-list-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-menu-contents");
+  let requestsContainer = document.querySelector(".requests-list-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-menu-contents"));
+    return waitUntil(() => !!document.querySelector(".requests-list-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-menu-cause-button"));
+    document.querySelector("#requests-list-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-menu-clear-button");
+  let clearButton = document.querySelector("#requests-list-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-menu-context-copy-as-curl").click();
+      .querySelector("#request-list-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-menu-context-copy-request-headers").click();
+      .querySelector("#request-list-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-menu-context-copy-image-as-data-uri").click();
-  }, TEST_IMAGE_DATA_URI);
+      .querySelector("#request-list-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-menu-context-copy-url-params");
+      .querySelector("#request-list-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-menu-context-copy-url-params").click();
+        .querySelector("#request-list-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-menu-context-copy-post-data");
+      .querySelector("#request-list-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-menu-context-copy-post-data").click();
+        .querySelector("#request-list-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-menu-context-copy-response").click();
+      .querySelector("#request-list-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-menu-context-copy-image-as-data-uri").click();
+      .querySelector("#request-list-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-menu-context-copy-url").click();
+      .querySelector("#request-list-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,152 +161,153 @@ 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-menu-filter-html-button"));
+    document.querySelector("#requests-list-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-menu-filter-all-button"));
+    document.querySelector("#requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-css-button"));
+    document.querySelector("#requests-list-filter-css-button"));
   testFilterButtons(monitor, "css");
   testContents([0, 1, 0, 0, 0, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-all-button"));
+    document.querySelector("#requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-js-button"));
+    document.querySelector("#requests-list-filter-js-button"));
   testFilterButtons(monitor, "js");
   testContents([0, 0, 1, 0, 0, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-all-button"));
+    document.querySelector("#requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-xhr-button"));
+    document.querySelector("#requests-list-filter-xhr-button"));
   testFilterButtons(monitor, "xhr");
   testContents([1, 1, 1, 1, 1, 1, 1, 1, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-all-button"));
+    document.querySelector("#requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-     document.querySelector("#requests-menu-filter-fonts-button"));
+     document.querySelector("#requests-list-filter-fonts-button"));
   testFilterButtons(monitor, "fonts");
   testContents([0, 0, 0, 1, 0, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-all-button"));
+    document.querySelector("#requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-images-button"));
+    document.querySelector("#requests-list-filter-images-button"));
   testFilterButtons(monitor, "images");
   testContents([0, 0, 0, 0, 1, 0, 0, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-all-button"));
+    document.querySelector("#requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-media-button"));
+    document.querySelector("#requests-list-filter-media-button"));
   testFilterButtons(monitor, "media");
   testContents([0, 0, 0, 0, 0, 1, 1, 0, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-all-button"));
+    document.querySelector("#requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-flash-button"));
+    document.querySelector("#requests-list-filter-flash-button"));
   testFilterButtons(monitor, "flash");
   testContents([0, 0, 0, 0, 0, 0, 0, 1, 0]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-all-button"));
+    document.querySelector("#requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-ws-button"));
+    document.querySelector("#requests-list-filter-ws-button"));
   testFilterButtons(monitor, "ws");
   testContents([0, 0, 0, 0, 0, 0, 0, 0, 1]);
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-all-button"));
+    document.querySelector("#requests-list-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-menu-filter-all-button"));
+    document.querySelector("#requests-list-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-menu-filter-all-button"));
+    document.querySelector("#requests-list-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-menu-filter-all-button"));
+    document.querySelector("#requests-list-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-menu-filter-all-button"));
+    document.querySelector("#requests-list-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-menu-filter-html-button"));
+    document.querySelector("#requests-list-filter-html-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-css-button"));
+    document.querySelector("#requests-list-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-menu-filter-flash-button"));
+    document.querySelector("#requests-list-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-menu-filter-css-button"));
+    document.querySelector("#requests-list-filter-css-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-flash-button"));
+    document.querySelector("#requests-list-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-menu-filter-html-button"));
+    document.querySelector("#requests-list-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-menu-filter-html-button"));
+    document.querySelector("#requests-list-filter-html-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-css-button"));
+    document.querySelector("#requests-list-filter-css-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-ws-button"));
+    document.querySelector("#requests-list-filter-ws-button"));
   testFilterButtonsCustom(monitor, [0, 1, 1, 0, 0, 0, 0, 0, 0, 1]);
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-all-button"));
+    document.querySelector("#requests-list-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-menu-filter-html-button"));
+    document.querySelector("#requests-list-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-menu-filter-all-button"));
+    document.querySelector("#requests-list-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-menu-size-button"));
+    document.querySelector("#requests-list-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-menu-filter-html-button"));
+    document.querySelector("#requests-list-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-menu-waterfall-button"));
+      document.querySelector("#requests-list-waterfall-button"));
     EventUtils.sendMouseEvent({ type: "click" },
-      document.querySelector("#requests-menu-size-button"));
+      document.querySelector("#requests-list-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-menu-filter-${button}-button`);
+      let buttonEl = document.querySelector(`#requests-list-filter-${button}-button`);
       EventUtils.sendMouseEvent({ type: "click" }, buttonEl);
       testStatus();
     }
   }
 
   yield teardown(monitor);
 
   function testStatus() {
-    let value = document.querySelector("#requests-menu-network-summary-button").textContent;
+    let value = document.querySelector("#requests-list-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-menu-icon[data-type=thumbnail]").length, 1,
+    is(document.querySelectorAll(".requests-list-icon[data-type=thumbnail]").length, 1,
       "There should be only one image request with a thumbnail displayed.");
-    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.");
+    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.");
   }
 });
--- 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-menu-contents");
+  let requestsListContents = document.querySelector(".requests-list-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-menu-file");
+    let anchor = target.querySelector(".requests-list-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-menu-method");
+    let anchor = target.querySelector(".requests-list-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-menu-context-newtab").click();
+    .querySelector("#request-list-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-menu-reload-notice-button"));
+    document.querySelector("#requests-list-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-menu-reload-notice-button");
+  let button = document.querySelector("#requests-list-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-menu-file-button"));
+    document.querySelector("#requests-list-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-menu-subitem.requests-menu-security-and-domain"))) {
-    let domain = subitemNode.querySelector(".requests-menu-domain").textContent;
+    "requests-list-subitem.requests-list-security-and-domain"))) {
+    let domain = subitemNode.querySelector(".requests-list-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-menu-timings-total")
+    ok(tabpanel.querySelector("#timings-summary-blocked .requests-list-timings-total")
       .getAttribute("value").match(/[0-9]+/),
       "The blocked timing info does not appear to be correct.");
 
-    ok(tabpanel.querySelector("#timings-summary-dns .requests-menu-timings-total")
+    ok(tabpanel.querySelector("#timings-summary-dns .requests-list-timings-total")
       .getAttribute("value").match(/[0-9]+/),
       "The dns timing info does not appear to be correct.");
 
-    ok(tabpanel.querySelector("#timings-summary-connect .requests-menu-timings-total")
+    ok(tabpanel.querySelector("#timings-summary-connect .requests-list-timings-total")
       .getAttribute("value").match(/[0-9]+/),
       "The connect timing info does not appear to be correct.");
 
-    ok(tabpanel.querySelector("#timings-summary-send .requests-menu-timings-total")
+    ok(tabpanel.querySelector("#timings-summary-send .requests-list-timings-total")
       .getAttribute("value").match(/[0-9]+/),
       "The send timing info does not appear to be correct.");
 
-    ok(tabpanel.querySelector("#timings-summary-wait .requests-menu-timings-total")
+    ok(tabpanel.querySelector("#timings-summary-wait .requests-list-timings-total")
       .getAttribute("value").match(/[0-9]+/),
       "The wait timing info does not appear to be correct.");
 
-    ok(tabpanel.querySelector("#timings-summary-receive .requests-menu-timings-total")
+    ok(tabpanel.querySelector("#timings-summary-receive .requests-list-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-menu-empty-notice"),
+  ok(document.querySelector("#requests-list-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-menu-empty-notice"),
+  ok(!document.querySelector("#requests-list-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-menu-empty-notice"),
+  ok(!document.querySelector("#requests-list-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-menu-empty-notice"),
+  ok(document.querySelector("#requests-list-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-menu-status-button"));
+    document.querySelector("#requests-list-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-menu-status-button"));
+    document.querySelector("#requests-list-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-menu-status-button"));
+    document.querySelector("#requests-list-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-menu-status-button"));
+    document.querySelector("#requests-list-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-menu-" + sortType + "-button");
-    let headers = doc.querySelectorAll(".requests-menu-header-button");
+    let target = doc.querySelector("#requests-list-" + sortType + "-button");
+    let headers = doc.querySelectorAll(".requests-list-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-menu-status-button"));
+    document.querySelector("#requests-list-status-button"));
   testHeaders("status", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing status sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-status-button"));
+    document.querySelector("#requests-list-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-menu-status-button"));
+    document.querySelector("#requests-list-status-button"));
   testHeaders("status", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing method sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-method-button"));
+    document.querySelector("#requests-list-method-button"));
   testHeaders("method", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing method sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-method-button"));
+    document.querySelector("#requests-list-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-menu-method-button"));
+    document.querySelector("#requests-list-method-button"));
   testHeaders("method", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing file sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-file-button"));
+    document.querySelector("#requests-list-file-button"));
   testHeaders("file", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing file sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-file-button"));
+    document.querySelector("#requests-list-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-menu-file-button"));
+    document.querySelector("#requests-list-file-button"));
   testHeaders("file", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing type sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-type-button"));
+    document.querySelector("#requests-list-type-button"));
   testHeaders("type", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing type sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-type-button"));
+    document.querySelector("#requests-list-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-menu-type-button"));
+    document.querySelector("#requests-list-type-button"));
   testHeaders("type", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing transferred sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-transferred-button"));
+    document.querySelector("#requests-list-transferred-button"));
   testHeaders("transferred", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing transferred sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-transferred-button"));
+    document.querySelector("#requests-list-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-menu-transferred-button"));
+    document.querySelector("#requests-list-transferred-button"));
   testHeaders("transferred", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing size sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-size-button"));
+    document.querySelector("#requests-list-size-button"));
   testHeaders("size", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing size sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-size-button"));
+    document.querySelector("#requests-list-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-menu-size-button"));
+    document.querySelector("#requests-list-size-button"));
   testHeaders("size", "ascending");
   testContents([0, 1, 2, 3, 4]);
 
   info("Testing waterfall sort, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-waterfall-button"));
+    document.querySelector("#requests-list-waterfall-button"));
   testHeaders("waterfall", "ascending");
   testContents([0, 2, 4, 3, 1]);
 
   info("Testing waterfall sort, descending.");
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-waterfall-button"));
+    document.querySelector("#requests-list-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-menu-waterfall-button"));
+    document.querySelector("#requests-list-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-menu-" + sortType + "-button");
-    let headers = doc.querySelectorAll(".requests-menu-header-button");
+    let target = doc.querySelector("#requests-list-" + sortType + "-button");
+    let headers = doc.querySelectorAll(".requests-list-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-menu-filter-html-button"));
+    document.querySelector("#requests-list-filter-html-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-css-button"));
+    document.querySelector("#requests-list-filter-css-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-js-button"));
+    document.querySelector("#requests-list-filter-js-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-ws-button"));
+    document.querySelector("#requests-list-filter-ws-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-menu-filter-other-button"));
+    document.querySelector("#requests-list-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-menu-status-icon").dataset.code, status,
+    is(panel.querySelector(".requests-list-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-menu-transferred-header-box").hidden = true;
-  // $("#requests-menu-item-template .requests-menu-transferred").hidden = true;
+  // $("#requests-list-transferred-header-box").hidden = true;
+  // $("#requests-list-item-template .requests-list-transferred").hidden = true;
 
   RequestsMenu.lazyUpdate = false;
 
-  ok($("#requests-menu-waterfall-label"),
+  ok($("#requests-list-waterfall-label"),
     "An timeline label should be displayed when the frontend is opened.");
-  ok($all(".requests-menu-timings-division").length == 0,
+  ok($all(".requests-list-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-menu-waterfall-label"),
+  ok(!$("#requests-list-waterfall-label"),
     "The timeline label should be hidden after the first request.");
-  ok($all(".requests-menu-timings-division").length >= 3,
+  ok($all(".requests-list-timings-division").length >= 3,
     "There should be at least 3 tick labels in the network requests header.");
 
-  let timingDivisionEls = $all(".requests-menu-timings-division");
+  let timingDivisionEls = $all(".requests-list-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-menu-timings-division[data-division-scale=millisecond]");
+    ".requests-list-timings-division[data-division-scale=millisecond]");
   let secDivs = document.querySelectorAll(
-    ".requests-menu-timings-division[data-division-scale=second]");
+    ".requests-list-timings-division[data-division-scale=second]");
   let minDivs = document.querySelectorAll(
-    ".requests-menu-timings-division[data-division-scale=minute]");
+    ".requests-list-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-menu-filter-${type}-button`).html())
-      .toBe(`<button id="requests-menu-filter-${type}-button" class="` + className +
+      expect(wrapper.find(`#requests-list-filter-${type}-button`).html())
+      .toBe(`<button id="requests-list-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-menu-method").textContent,
+  is(target.querySelector(".requests-list-method").textContent,
     aMethod, "The displayed method is correct.");
 
   if (fuzzyUrl) {
-    ok(target.querySelector(".requests-menu-file").textContent.startsWith(
+    ok(target.querySelector(".requests-list-file").textContent.startsWith(
       name + (query ? "?" + query : "")), "The displayed file is correct.");
-    ok(target.querySelector(".requests-menu-file").getAttribute("title").startsWith(unicodeUrl),
+    ok(target.querySelector(".requests-list-file").getAttribute("title").startsWith(unicodeUrl),
       "The tooltip file is correct.");
   } else {
-    is(target.querySelector(".requests-menu-file").textContent,
+    is(target.querySelector(".requests-list-file").textContent,
       name + (query ? "?" + query : ""), "The displayed file is correct.");
-    is(target.querySelector(".requests-menu-file").getAttribute("title"),
+    is(target.querySelector(".requests-list-file").getAttribute("title"),
       unicodeUrl, "The tooltip file is correct.");
   }
 
-  is(target.querySelector(".requests-menu-domain").textContent,
+  is(target.querySelector(".requests-list-domain").textContent,
     hostPort, "The displayed domain is correct.");
 
   let domainTooltip = hostPort + (remoteAddress ? " (" + remoteAddress + ")" : "");
-  is(target.querySelector(".requests-menu-domain").getAttribute("title"),
+  is(target.querySelector(".requests-list-domain").getAttribute("title"),
     domainTooltip, "The tooltip domain is correct.");
 
   if (status !== undefined) {
-    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");
+    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");
     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-menu-cause > .subitem-label").textContent;
-    let tooltip = target.querySelector(".requests-menu-cause").getAttribute("title");
+    let value = target.querySelector(".requests-list-cause > .subitem-label").textContent;
+    let tooltip = target.querySelector(".requests-list-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-menu-type").textContent;
-    let tooltip = target.querySelector(".requests-menu-type").getAttribute("title");
+    let value = target.querySelector(".requests-list-type").textContent;
+    let tooltip = target.querySelector(".requests-list-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-menu-transferred").textContent;
-    let tooltip = target.querySelector(".requests-menu-transferred").getAttribute("title");
+    let value = target.querySelector(".requests-list-transferred").textContent;
+    let tooltip = target.querySelector(".requests-list-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-menu-size").textContent;
-    let tooltip = target.querySelector(".requests-menu-size").getAttribute("title");
+    let value = target.querySelector(".requests-list-size").textContent;
+    let tooltip = target.querySelector(".requests-list-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-menu-timings-total").textContent;
-    let tooltip = target.querySelector(".requests-menu-timings-total").getAttribute("title");
+    let value = target.querySelector(".requests-list-timings-total").textContent;
+    let tooltip = target.querySelector(".requests-list-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-menu-filter-" + filterType + "-button");
+  let target = doc.querySelector("#requests-list-filter-" + filterType + "-button");
   ok(target, `Filter button '${filterType}' was found`);
-  let buttons = [...doc.querySelectorAll("#requests-menu-filter-buttons button")];
+  let buttons = [...doc.querySelectorAll("#requests-list-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-menu-filter-buttons button");
+  let buttons = doc.querySelectorAll("#requests-list-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-menu-perf-notice-button {
+#requests-list-perf-notice-button {
   min-width: 30px;
   min-height: 26px;
   margin: 0 5px;
   vertical-align: middle;
 }
 
-#requests-menu-perf-notice-button::before {
+#requests-list-perf-notice-button::before {
   background-image: url(images/profiler-stopwatch.svg);
 }
 
-#requests-menu-reload-notice-button {
+#requests-list-reload-notice-button {
   font-size: inherit;
   min-height: 26px;
   margin: 0 5px;
 }
 
 /* Network requests table */
 
-#requests-menu-toolbar {
+#requests-list-toolbar {
   display: flex;
   padding: 0;
 }
 
-#requests-menu-filter-buttons {
+#requests-list-filter-buttons {
   display: flex;
   flex-wrap: nowrap;
 }
 
-.theme-firebug #requests-menu-toolbar {
+.theme-firebug #requests-list-toolbar {
   height: 19px !important;
 }
 
-.requests-menu-contents {
+.requests-list-contents {
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
   --timings-scale: 1;
   --timings-rev-scale: 1;
 }
 
-.requests-menu-subitem {
+.requests-list-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-menu-header {
+.requests-list-header {
   display: flex;
   flex: none;
 }
 
-.requests-menu-header-button {
+.requests-list-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-menu-header-button::-moz-focus-inner {
+.requests-list-header-button::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
 
-.requests-menu-header:first-child .requests-menu-header-button {
+.requests-list-header:first-child .requests-list-header-button {
   border-width: 0;
 }
 
-.requests-menu-header-button:hover {
+.requests-list-header-button:hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-.requests-menu-header-button > .button-text {
+.requests-list-header-button > .button-text {
   flex: auto;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.requests-menu-header-button > .button-icon {
+.requests-list-header-button > .button-icon {
   flex: none;
   height: 4px;
   margin-inline-start: 3px;
   margin-inline-end: 6px;
   width: 7px;
 }
 
-.requests-menu-header-button[data-sorted=ascending] > .button-icon {
+.requests-list-header-button[data-sorted=ascending] > .button-icon {
   background-image: var(--sort-ascending-image);
 }
 
-.requests-menu-header-button[data-sorted=descending] > .button-icon {
+.requests-list-header-button[data-sorted=descending] > .button-icon {
   background-image: var(--sort-descending-image);
 }
 
-.requests-menu-waterfall-label-wrapper {
+.requests-list-waterfall-label-wrapper {
   display: flex;
 }
 
-.requests-menu-header-button[data-sorted],
-.requests-menu-header-button[data-sorted]:hover {
+.requests-list-header-button[data-sorted],
+.requests-list-header-button[data-sorted]:hover {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
-.requests-menu-header-button[data-sorted],
-.requests-menu-header[data-active] + .requests-menu-header .requests-menu-header-button {
+.requests-list-header-button[data-sorted],
+.requests-list-header[data-active] + .requests-list-header .requests-list-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-menu-header {
+.theme-firebug .requests-list-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-menu-header-button {
+.theme-firebug .requests-list-header-button {
   min-height: 17px;
 }
 
-.theme-firebug .requests-menu-header-button > .button-icon {
+.theme-firebug .requests-list-header-button > .button-icon {
   height: 7px;
 }
 
-.theme-firebug .requests-menu-header-button[data-sorted] {
+.theme-firebug .requests-list-header-button[data-sorted] {
   background-color: #AAC3DC;
 }
 
-:root[platform="linux"].theme-firebug .requests-menu-header-button[data-sorted] {
+:root[platform="linux"].theme-firebug .requests-list-header-button[data-sorted] {
   background-color: #FAC8AF !important;
   color: inherit !important;
 }
 
-.theme-firebug .requests-menu-header:hover:active {
+.theme-firebug .requests-list-header:hover:active {
   background-image: linear-gradient(rgba(0, 0, 0, 0.1),
                                     transparent);
 }
 
 
 /* Network requests table: specific column dimensions */
 
-.requests-menu-status {
+.requests-list-status {
   max-width: 6em;
   text-align: center;
   width: 10vw;
 }
 
-.requests-menu-method,
-.requests-menu-method-box {
+.requests-list-method,
+.requests-list-method-box {
   max-width: 7em;
   text-align: center;
   width: 10vw;
 }
 
-.requests-menu-icon-and-file {
+.requests-list-icon-and-file {
   width: 22vw;
 }
 
-.requests-menu-icon {
+.requests-list-icon {
   background: transparent;
   width: 15px;
   height: 15px;
   margin-inline-end: 4px;
 }
 
-.requests-menu-icon {
+.requests-list-icon {
   outline: 1px solid var(--table-splitter-color);
 }
 
-.requests-menu-security-and-domain {
+.requests-list-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-menu-type,
-.requests-menu-size {
+.requests-list-type,
+.requests-list-size {
   max-width: 6em;
   width: 8vw;
   justify-content: center;
 }
 
-.requests-menu-transferred {
+.requests-list-transferred {
   max-width: 8em;
   width: 8vw;
   justify-content: center;
 }
 
-.requests-menu-cause {
+.requests-list-cause {
   max-width: 8em;
   width: 8vw;
 }
 
-.requests-menu-cause-stack {
+.requests-list-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-menu-transferred.theme-comment {
+.request-list-item.selected .requests-list-transferred.theme-comment {
   color: var(--theme-selection-color);
 }
 
 /* Network requests table: status codes */
 
-.requests-menu-status-code {
+.requests-list-status-code {
   margin-inline-start: 3px !important;
   width: 3em;
   margin-inline-end: -3em !important;
 }
 
-.requests-menu-status-icon {
+.requests-list-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-menu-status-icon {
+.request-list-item.selected .requests-list-status-icon {
   filter: brightness(1.3);
 }
 
-.requests-menu-status-icon:not([data-code]) {
+.requests-list-status-icon:not([data-code]) {
   background-color: var(--theme-content-color2);
 }
 
-.requests-menu-status-icon[data-code="cached"] {
+.requests-list-status-icon[data-code="cached"] {
   border: 2px solid var(--theme-content-color2);
   background-color: transparent;
 }
 
-.requests-menu-status-icon[data-code^="1"] {
+.requests-list-status-icon[data-code^="1"] {
   background-color: var(--theme-highlight-blue);
 }
 
-.requests-menu-status-icon[data-code^="2"] {
+.requests-list-status-icon[data-code^="2"] {
   background-color: var(--theme-highlight-green);
 }
 
 /* 3xx are triangles */
-.requests-menu-status-icon[data-code^="3"] {
+.requests-list-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-menu-status-icon[data-code^="4"] {
+.requests-list-status-icon[data-code^="4"] {
  background-color: var(--theme-highlight-red);
   border-radius: 0; /* squares */
 }
 
-.requests-menu-status-icon[data-code^="5"] {
+.requests-list-status-icon[data-code^="5"] {
   background-color: var(--theme-highlight-pink);
   border-radius: 0;
   transform: rotate(45deg);
 }
 
 /* Network requests table: waterfall header */
 
-.requests-menu-waterfall {
+.requests-list-waterfall {
   flex: auto;
   padding-inline-start: 0;
 }
 
-.requests-menu-waterfall-label-wrapper:not(.requests-menu-waterfall-visible) {
+.requests-list-waterfall-label-wrapper:not(.requests-list-waterfall-visible) {
   padding-inline-start: 16px;
 }
 
-.requests-menu-timings-division {
+.requests-list-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-menu-timings-division:not(:first-child) {
+.requests-list-timings-division:not(:first-child) {
   border-inline-start: 1px dashed;
 }
 
-.requests-menu-timings-division:-moz-locale-dir(ltr) {
+.requests-list-timings-division:-moz-locale-dir(ltr) {
   transform-origin: left center;
 }
 
-.requests-menu-timings-division:-moz-locale-dir(rtl) {
+.requests-list-timings-division:-moz-locale-dir(rtl) {
   transform-origin: right center;
 }
 
-.theme-dark .requests-menu-timings-division {
+.theme-dark .requests-list-timings-division {
   border-inline-start-color: #5a6169 !important;
 }
 
-.theme-light .requests-menu-timings-division {
+.theme-light .requests-list-timings-division {
   border-inline-start-color: #585959 !important;
 }
 
-.requests-menu-timings-division[data-division-scale=second],
-.requests-menu-timings-division[data-division-scale=minute] {
+.requests-list-timings-division[data-division-scale=second],
+.requests-list-timings-division[data-division-scale=minute] {
   font-weight: 600;
 }
 
 /* Network requests table: waterfall items */
 
-.requests-menu-subitem.requests-menu-waterfall {
+.requests-list-subitem.requests-list-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-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
+.requests-list-subitem.requests-list-waterfall:-moz-locale-dir(rtl) {
   background-position: right center;
 }
 
-.requests-menu-timings {
+.requests-list-timings {
   display: flex;
   flex: none;
   align-items: center;
   transform: scaleX(var(--timings-scale));
 }
 
-.requests-menu-timings:-moz-locale-dir(ltr) {
+.requests-list-timings:-moz-locale-dir(ltr) {
   transform-origin: left center;
 }
 
-.requests-menu-timings:-moz-locale-dir(rtl) {
+.requests-list-timings:-moz-locale-dir(rtl) {
   transform-origin: right center;
 }
 
-.requests-menu-timings-total:-moz-locale-dir(ltr) {
+.requests-list-timings-total:-moz-locale-dir(ltr) {
   transform-origin: left center;
 }
 
-.requests-menu-timings-total:-moz-locale-dir(rtl) {
+.requests-list-timings-total:-moz-locale-dir(rtl) {
   transform-origin: right center;
 }
 
-.requests-menu-timings-total {
+.requests-list-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-menu-timings-box {
+.requests-list-timings-box {
   display: inline-block;
   height: 9px;
 }
 
-.theme-firebug .requests-menu-timings-box {
+.theme-firebug .requests-list-timings-box {
   background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
   height: 16px;
 }
 
-.requests-menu-timings-box.blocked {
+.requests-list-timings-box.blocked {
   background-color: var(--timing-blocked-color);
 }
 
-.requests-menu-timings-box.dns {
+.requests-list-timings-box.dns {
   background-color: var(--timing-dns-color);
 }
 
-.requests-menu-timings-box.connect {
+.requests-list-timings-box.connect {
   background-color: var(--timing-connect-color);
 }
 
-.requests-menu-timings-box.send {
+.requests-list-timings-box.send {
   background-color: var(--timing-send-color);
 }
 
-.requests-menu-timings-box.wait {
+.requests-list-timings-box.wait {
   background-color: var(--timing-wait-color);
 }
 
-.requests-menu-timings-box.receive {
+.requests-list-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-menu-subitem {
+.theme-firebug .requests-list-subitem {
   padding: 1px;
 }
 
 /* HTTP Status Column */
-.theme-firebug .requests-menu-subitem.requests-menu-status {
+.theme-firebug .requests-list-subitem.requests-list-status {
   font-weight: bold;
 }
 
 /* Method Column */
 
-.theme-firebug .requests-menu-subitem.requests-menu-method-box {
+.theme-firebug .requests-list-subitem.requests-list-method-box {
   color: rgb(128, 128, 128);
 }
 
-.request-list-item.selected .requests-menu-method {
+.request-list-item.selected .requests-list-method {
   color: var(--theme-selection-color);
 }
 
 /* Size Column */
-.theme-firebug .requests-menu-subitem.requests-menu-size {
+.theme-firebug .requests-list-subitem.requests-list-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-menu-timings-container {
+.requests-list-timings-container {
   display: flex;
   flex: 1;
   align-items: center;
 }
 
-.requests-menu-timings-offset {
+.requests-list-timings-offset {
   transition: width 0.2s ease-out;
 }
 
-.requests-menu-timings-box {
+.requests-list-timings-box {
   border: none;
   min-width: 1px;
   transition: width 0.2s ease-out;
 }
 
-.theme-firebug .requests-menu-timings-total {
+.theme-firebug .requests-list-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-menu-network-summary-button {
+#requests-list-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-menu-network-summary-button > .summary-info-icon {
+#requests-list-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-menu-network-summary-button > .summary-info-text {
+#requests-list-network-summary-button > .summary-info-text {
   opacity: 0.8;
   margin-inline-start: 0.5em;
 }
 
-#requests-menu-network-summary-button:hover > .summary-info-icon,
-#requests-menu-network-summary-button:hover > .summary-info-text {
+#requests-list-network-summary-button:hover > .summary-info-icon,
+#requests-list-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-menu-network-summary-button > .summary-info-text {
+  #requests-list-network-summary-button > .summary-info-text {
     display: none;
   }
 
-  #requests-menu-toolbar {
+  #requests-list-toolbar {
     height: 22px;
   }
 
-  .requests-menu-header-button {
+  .requests-list-header-button {
     min-height: 22px;
     padding-left: 8px;
   }
 
-  .requests-menu-status {
+  .requests-list-status {
     max-width: none;
     width: 10vw;
   }
 
-  .requests-menu-status-code {
+  .requests-list-status-code {
     width: auto;
   }
 
-  .requests-menu-method,
-  .requests-menu-method-box {
+  .requests-list-method,
+  .requests-list-method-box {
     max-width: none;
     width: 12vw;
   }
 
-  .requests-menu-icon-and-file {
+  .requests-list-icon-and-file {
     width: 22vw;
   }
 
-  .requests-menu-security-and-domain {
+  .requests-list-security-and-domain {
     width: 16vw;
   }
 
-  .requests-menu-cause,
-  .requests-menu-type,
-  .requests-menu-transferred,
-  .requests-menu-size {
+  .requests-list-cause,
+  .requests-list-type,
+  .requests-list-transferred,
+  .requests-list-size {
     max-width: none;
     width: 10vw;
   }
 
-  .requests-menu-waterfall {
+  .requests-list-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-menu-header-button > .button-box {
+:root[platform="win"] .requests-list-header-button > .button-box {
   padding: 0;
 }
 
-:root[platform="win"] .requests-menu-timings-division {
+:root[platform="win"] .requests-list-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-menu-header-button {
+  :root[platform="linux"] .requests-list-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-menu-status-icon {
+.headers-summary .requests-list-status-icon {
   min-width: 10px;
 }
 
 .headers-summary .raw-headers-container {
   display: flex;
   width: 100%;
 }