Bug 1316291 - remove request-list elements with fixed ID;r=Honza

MozReview-Commit-ID: 2myRfMX3XQB

--HG--
extra : rebase_source : 858780d5f6fbf70b495445e60e900044cc8caba6

devtools/client/netmonitor/components/request-list-empty.js

@@ -31,15 +31,13 @@ const RequestListEmptyNotice = createClass({
   render() {
     return div(
       {
-        id: "requests-list-empty-notice",
-        className: "request-list-empty-notice",
+        className: "requests-list-empty-notice",
       },
-      div({ id: "notice-reload-message" },
+      div({ className: "notice-reload-message" },
         span(null, L10N.getStr("netmonitor.reloadNotice1")),
         button(
           {
-            id: "requests-list-reload-notice-button",
-            className: "devtools-button",
+            className: "devtools-toolbarbutton requests-list-reload-notice-button",
             "data-standalone": true,
             onClick: this.props.onReloadClick,
           },
@@ -47,12 +45,11 @@ const RequestListEmptyNotice = createClass({
         ),
         span(null, L10N.getStr("netmonitor.reloadNotice3"))
       ),
-      div({ id: "notice-perf-message" },
+      div({ className: "notice-perf-message" },
         span(null, L10N.getStr("netmonitor.perfNotice1")),
         button({
-          id: "requests-list-perf-notice-button",
           title: L10N.getStr("netmonitor.perfNotice3"),
-          className: "devtools-button",
+          className: "devtools-button requests-list-perf-notice-button",
           "data-standalone": true,
           onClick: this.props.onPerfClick,
         }),

devtools/client/netmonitor/components/request-list-header.js

@@ -78,8 +78,8 @@ const RequestListHeader = createClass({
     const { sort, scale, waterfallWidth, onHeaderClick } = this.props;
 
     return div(
-      { id: "requests-list-toolbar", className: "devtools-toolbar" },
-      div({ id: "toolbar-labels" },
+      { className: "devtools-toolbar requests-list-toolbar" },
+      div({ className: "toolbar-labels" },
         HEADERS.map(header => {
           const name = header.name;
           const boxName = header.boxName || name;

devtools/client/netmonitor/test/browser_net_reload-button.js

@@ -15,7 +15,7 @@ add_task(function* () {
 
   let wait = waitForNetworkEvents(monitor, 1);
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-reload-notice-button"));
+    document.querySelector(".requests-list-reload-notice-button"));
   yield wait;
 
   is(document.querySelectorAll(".request-list-item").length, 1,

devtools/client/netmonitor/test/browser_net_reload-markers.js

@@ -13,7 +13,7 @@ add_task(function* () {
 
   let { document, windowRequire } = monitor.panelWin;
   let { EVENTS } = windowRequire("devtools/client/netmonitor/events");
-  let button = document.querySelector("#requests-list-reload-notice-button");
+  let button = document.querySelector(".requests-list-reload-notice-button");
   button.click();
 
   let markers = [];

devtools/client/netmonitor/test/browser_net_simple-request.js

@@ -29,7 +29,7 @@ add_task(function* () {
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     true,
     "The pane toggle button should be disabled when the frontend is opened.");
-  ok(document.querySelector("#requests-list-empty-notice"),
+  ok(document.querySelector(".requests-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.");
@@ -41,7 +41,7 @@ add_task(function* () {
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     false,
     "The pane toggle button should be enabled after the first request.");
-  ok(!document.querySelector("#requests-list-empty-notice"),
+  ok(!document.querySelector(".requests-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.");
@@ -53,7 +53,7 @@ add_task(function* () {
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     false,
     "The pane toggle button should be still be enabled after a reload.");
-  ok(!document.querySelector("#requests-list-empty-notice"),
+  ok(!document.querySelector(".requests-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.");
@@ -65,7 +65,7 @@ add_task(function* () {
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     true,
     "The pane toggle button should be disabled when after clear.");
-  ok(document.querySelector("#requests-list-empty-notice"),
+  ok(document.querySelector(".requests-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.");

devtools/client/themes/netmonitor.css

@@ -11,7 +11,7 @@
   box-sizing: border-box;
 }
 
-#toolbar-labels {
+.toolbar-labels {
   overflow: hidden;
   display: flex;
   flex: auto;
@@ -96,22 +96,22 @@
   font-size: 120%;
 }
 
-#notice-perf-message {
+.notice-perf-message {
   margin-top: 2px;
 }
 
-#requests-list-perf-notice-button {
+.requests-list-perf-notice-button {
   min-width: 30px;
   min-height: 26px;
   margin: 0 5px;
   vertical-align: middle;
 }
 
-#requests-list-perf-notice-button::before {
+.requests-list-perf-notice-button::before {
   background-image: url(images/profiler-stopwatch.svg);
 }
 
-#requests-list-reload-notice-button {
+.requests-list-reload-notice-button {
   font-size: inherit;
   min-height: 26px;
   margin: 0 5px;