Bug 1316291 - PART 2:remove request-list elements with fixed ID;r=Honza draft
authorFred Lin <gasolin@mozilla.com>
Mon, 13 Feb 2017 14:29:39 +0800
changeset 487777 47b315f7b34e03333dfcbce0694c188939ebf581
parent 487776 14db591db087334af3d708511e65d842850e3c8c
child 487778 96eea2cd50826afc44e055f1f77f46600165f866
push id46321
push userbmo:gasolin@mozilla.com
push dateWed, 22 Feb 2017 02:18:15 +0000
reviewersHonza
bugs1316291
milestone54.0a1
Bug 1316291 - PART 2:remove request-list elements with fixed ID;r=Honza MozReview-Commit-ID: 2myRfMX3XQB
devtools/client/netmonitor/components/request-list-empty.js
devtools/client/netmonitor/components/request-list-header.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_simple-request.js
devtools/client/themes/netmonitor.css
--- a/devtools/client/netmonitor/components/request-list-empty.js
+++ b/devtools/client/netmonitor/components/request-list-empty.js
@@ -26,38 +26,35 @@ const RequestListEmptyNotice = createCla
   propTypes: {
     onReloadClick: PropTypes.func.isRequired,
     onPerfClick: PropTypes.func.isRequired,
   },
 
   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,
           },
           L10N.getStr("netmonitor.reloadNotice2")
         ),
         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,
         }),
         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,18 +73,18 @@ const RequestListHeader = createClass({
       this.props.resizeWaterfall(width);
     });
   },
 
   render() {
     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;
           const label = L10N.getStr(`netmonitor.toolbar.${header.label || name}`);
 
           let sorted, sortedTitle;
           const active = sort.type == name ? true : undefined;
           if (active) {
--- a/devtools/client/netmonitor/test/browser_net_reload-button.js
+++ b/devtools/client/netmonitor/test/browser_net_reload-button.js
@@ -10,16 +10,16 @@
 add_task(function* () {
   let { monitor } = yield initNetMonitor(SIMPLE_URL);
   info("Starting test... ");
 
   let { document } = monitor.panelWin;
 
   let wait = waitForNetworkEvents(monitor, 1);
   EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelector("#requests-list-reload-notice-button"));
+    document.querySelector(".requests-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
@@ -7,18 +7,17 @@
  * Tests if the empty-requests reload button works.
  */
 
 add_task(function* () {
   let { monitor } = yield initNetMonitor(SIMPLE_URL);
   info("Starting test... ");
 
   let { document, windowRequire } = monitor.panelWin;
-  let { EVENTS } = windowRequire("devtools/client/netmonitor/constants");
-  let button = document.querySelector("#requests-list-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_simple-request.js
+++ b/devtools/client/netmonitor/test/browser_net_simple-request.js
@@ -24,53 +24,53 @@ add_task(function* () {
     getSortedRequests,
   } = windowRequire("devtools/client/netmonitor/selectors/index");
 
   gStore.dispatch(Actions.batchEnable(false));
 
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     true,
     "The pane toggle button should be disabled when the frontend is opened.");
-  ok(document.querySelector("#requests-list-empty-notice"),
+  ok(document.querySelector(".requests-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-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.");
   is(!!document.querySelector(".network-details-panel"), false,
     "The network details panel should still be hidden after the first request.");
 
   yield reloadAndWait();
 
   is(document.querySelector(".network-details-panel-toggle").hasAttribute("disabled"),
     false,
     "The pane toggle button should be still be enabled after a reload.");
-  ok(!document.querySelector("#requests-list-empty-notice"),
+  ok(!document.querySelector(".requests-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-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.");
   is(!!document.querySelector(".network-details-panel"), false,
     "The network details panel should still be hidden after clear.");
 
   return teardown(monitor);
 
--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -6,17 +6,17 @@
 @import "resource://devtools/client/shared/components/tree/tree-view.css";
 @import "resource://devtools/client/shared/components/tabs/tabs.css";
 @import "resource://devtools/client/shared/components/tabs/tabbar.css";
 
 * {
   box-sizing: border-box;
 }
 
-#toolbar-labels {
+.toolbar-labels {
   overflow: hidden;
   display: flex;
   flex: auto;
 }
 
 .devtools-toolbar-container {
   display: flex;
   justify-content: space-between;
@@ -91,32 +91,32 @@
 }
 
 .request-list-empty-notice {
   margin: 0;
   padding: 12px;
   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;
 }
 
 /* Network requests table */
 
 #requests-list-toolbar {