--- a/devtools/client/netmonitor/components/toolbar.js
+++ b/devtools/client/netmonitor/components/toolbar.js
@@ -91,49 +91,46 @@ const Toolbar = createClass({
     let text = (count === 0) ? L10N.getStr("networkMenu.empty") :
       PluralForm.get(count, L10N.getStr("networkMenu.summary3"))
       .replace("#1", count)
       .replace("#2", getFormattedSize(contentSize))
       .replace("#3", getFormattedSize(transferredSize))
       .replace("#4", getFormattedTime(millis));
 
     let buttons = requestFilterTypes.map(([type, checked]) => {
-      let classList = ["devtools-button"];
+      let classList = ["devtools-button", `requests-list-filter-${type}-button`];
       checked && classList.push("checked");
 
       return (
         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-list-clear-button",
-            className: "devtools-button devtools-clear-icon",
+            className: "devtools-button devtools-clear-icon requests-list-clear-button",
             title: TOOLBAR_CLEAR,
             onClick: clearRequests,
           }),
           div({ id: "requests-list-filter-buttons" }, buttons),
         ),
         span({ className: "devtools-toolbar-group" },
           button({
-            id: "requests-list-network-summary-button",
-            className: "devtools-button",
+            className: "devtools-button requests-list-network-summary-button",
             title: count ? text : L10N.getStr("netmonitor.toolbar.perf"),
             onClick: openStatistics,
           },
             span({ className: "summary-info-icon" }),
             span({ className: "summary-info-text" }, text),
           ),
           SearchBox({
             delay: FILTER_SEARCH_DELAY,

--- 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/constants");
   let detailsPane = document.querySelector("#details-pane");
   let detailsPanelToggleButton = document.querySelector(".network-details-panel-toggle");
-  let clearButton = document.querySelector("#requests-list-clear-button");
+  let clearButton = document.querySelector(".requests-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_filter-01.js
+++ b/devtools/client/netmonitor/test/browser_net_filter-01.js
@@ -161,153 +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-list-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-list-filter-all-button"));
+    document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-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-list-filter-all-button"));
+    document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-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-list-filter-all-button"));
+    document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-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-list-filter-all-button"));
+    document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-     document.querySelector("#requests-list-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-list-filter-all-button"));
+    document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-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-list-filter-all-button"));
+    document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-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-list-filter-all-button"));
+    document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-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-list-filter-all-button"));
+    document.querySelector(".requests-list-filter-all-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-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-list-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-list-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-list-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-list-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-list-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-list-filter-html-button"));
+    document.querySelector(".requests-list-filter-html-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-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-list-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-list-filter-css-button"));
+    document.querySelector(".requests-list-filter-css-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-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-list-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-list-filter-html-button"));
+    document.querySelector(".requests-list-filter-html-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-css-button"));
+    document.querySelector(".requests-list-filter-css-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-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-list-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-list-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-list-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
@@ -65,17 +65,17 @@ add_task(function* () {
   info("Sorting by size, ascending.");
   EventUtils.sendMouseEvent({ type: "click" },
     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-list-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;
 

--- a/devtools/client/netmonitor/test/browser_net_footer-summary.js
+++ b/devtools/client/netmonitor/test/browser_net_footer-summary.js
@@ -35,27 +35,27 @@ add_task(function* () {
       content.wrappedJSObject.performRequests('{ "getMedia": true, "getFlash": true }');
     });
     yield wait;
 
     testStatus();
 
     let buttons = ["html", "css", "js", "xhr", "fonts", "images", "media", "flash"];
     for (let button of buttons) {
-      let buttonEl = document.querySelector(`#requests-list-filter-${button}-button`);
+      let buttonEl = document.querySelector(`.requests-list-filter-${button}-button`);
       EventUtils.sendMouseEvent({ type: "click" }, buttonEl);
       testStatus();
     }
   }
 
   yield teardown(monitor);
 
   function testStatus() {
-    let value = document.querySelector("#requests-list-network-summary-button").textContent;
-    info("Current summary: " + value);
+    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) {
       is(value, L10N.getStr("networkMenu.empty"),

--- a/devtools/client/netmonitor/test/browser_net_statistics-02.js
+++ b/devtools/client/netmonitor/test/browser_net_statistics-02.js
@@ -12,25 +12,25 @@ add_task(function* () {
   let { monitor } = yield initNetMonitor(FILTERING_URL);
   info("Starting test... ");
 
   let panel = monitor.panelWin;
   let { document, gStore, windowRequire } = panel;
   let Actions = windowRequire("devtools/client/netmonitor/actions/index");
 
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-html-button"));
+    document.querySelector(".requests-list-filter-html-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-css-button"));
+    document.querySelector(".requests-list-filter-css-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-js-button"));
+    document.querySelector(".requests-list-filter-js-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-filter-ws-button"));
+    document.querySelector(".requests-list-filter-ws-button"));
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-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/components/filter-buttons.test.js
+++ b/devtools/client/netmonitor/test/components/filter-buttons.test.js
@@ -89,14 +89,14 @@ describe("FilterButtons::toggleFilter:",
 });
 
 function asExpected(wrapper, expectTypes, description) {
   for (let type of Object.keys(expectTypes)) {
     let checked = expectTypes[type] ? "checked" : "not checked";
     let className = expectTypes[type] ?
         "devtools-button checked" : "devtools-button";
     it(`'${type}' button is ${checked} ${description}`, () => {
-      expect(wrapper.find(`#requests-list-filter-${type}-button`).html())
-      .toBe(`<button id="requests-list-filter-${type}-button" class="` + className +
+      expect(wrapper.find(`.requests-list-filter-${type}-button`).html())
+      .toBe(`<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
@@ -380,17 +380,17 @@ function waitFor(subject, eventName) {
 /**
  * Tests if a button for a filter of given type is the only one checked.
  *
  * @param string filterType
  *        The type of the filter that should be the only one checked.
  */
 function testFilterButtons(monitor, filterType) {
   let doc = monitor.panelWin.document;
-  let target = doc.querySelector("#requests-list-filter-" + filterType + "-button");
+  let target = doc.querySelector(".requests-list-filter-" + filterType + "-button");
   ok(target, `Filter button '${filterType}' was found`);
   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);
 }

--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -114,27 +114,27 @@
 .requests-list-reload-notice-button {
   font-size: inherit;
   min-height: 26px;
   margin: 0 5px;
 }
 
 /* Network requests table */
 
-#requests-list-toolbar {
+.requests-list-toolbar {
   display: flex;
   padding: 0;
 }
 
-#requests-list-filter-buttons {
+.requests-list-filter-buttons {
   display: flex;
   flex-wrap: nowrap;
 }
 
-.theme-firebug #requests-list-toolbar {
+.theme-firebug .requests-list-toolbar {
   height: 19px !important;
 }
 
 .requests-list-contents {
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
@@ -800,44 +800,44 @@
 
 .custom-url-value {
   flex-grow: 1;
   margin-inline-start: 6px;
 }
 
 /* Performance analysis buttons */
 
-#requests-list-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-list-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-list-network-summary-button > .summary-info-text {
+.requests-list-network-summary-button > .summary-info-text {
   opacity: 0.8;
   margin-inline-start: 0.5em;
 }
 
-#requests-list-network-summary-button:hover > .summary-info-icon,
-#requests-list-network-summary-button:hover > .summary-info-text {
+.requests-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,21 +1005,21 @@
   fill: rgba(84, 235, 159, 0.8); /* cyan */
   background: rgba(84, 235, 159, 0.8);
 }
 
 /* Responsive sidebar */
 @media (max-width: 700px) {
   #toolbar-spacer,
   .network-details-panel-toggle,
-  #requests-list-network-summary-button > .summary-info-text {
+  .requests-list-network-summary-button > .summary-info-text {
     display: none;
   }
 
-  #requests-list-toolbar {
+  .requests-list-toolbar {
     height: 22px;
   }
 
   .requests-list-header-button {
     min-height: 22px;
     padding-left: 8px;
   }