Bug 1394325 - Add an active state for the "Raw headers" button. r=nchevobbe
authorabhinav <abhinav.koppula@gmail.com>
Sat, 09 Sep 2017 10:36:31 +0530
changeset 429864 28713eaae8c25a2b35b9fe93b4128ed413795aaa
parent 429863 82c4867be234954e47f6d1ce95c92d2a07cb1046
child 429865 4bc6509e7f444a71e40203f864a4ec2ec9db2658
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1394325
milestone57.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 1394325 - Add an active state for the "Raw headers" button. r=nchevobbe MozReview-Commit-ID: 2UxkAnJdoXB
devtools/client/netmonitor/src/components/headers-panel.js
devtools/client/netmonitor/test/browser_net_raw_headers.js
--- a/devtools/client/netmonitor/src/components/headers-panel.js
+++ b/devtools/client/netmonitor/src/components/headers-panel.js
@@ -177,16 +177,20 @@ const HeadersPanel = createClass({
       } else if (fromServiceWorker) {
         code = "service worker";
       } else {
         code = status;
       }
 
       let statusCodeDocURL = getHTTPStatusCodeURL(status.toString());
       let inputWidth = status.toString().length + statusText.length + 1;
+      let toggleRawHeadersClassList = ["devtools-button"];
+      if (this.state.rawHeadersOpened) {
+        toggleRawHeadersClassList.push("checked");
+      }
 
       summaryStatus = (
         div({ className: "tabpanel-summary-container headers-summary" },
           div({
             className: "tabpanel-summary-label headers-summary-label",
           }, SUMMARY_STATUS),
           div({
             className: "requests-list-status-icon",
@@ -204,17 +208,18 @@ const HeadersPanel = createClass({
           }) : span({
             className: "headers-summary learn-more-link",
           }),
           button({
             className: "devtools-button edit-and-resend-button",
             onClick: cloneSelectedRequest,
           }, EDIT_AND_RESEND),
           button({
-            className: "devtools-button raw-headers-button",
+            "aria-pressed": this.state.rawHeadersOpened,
+            className: toggleRawHeadersClassList.join(" "),
             onClick: this.toggleRawHeaders,
           }, RAW_HEADERS),
         )
       );
     }
 
     let summaryVersion = httpVersion ?
       this.renderSummary(SUMMARY_VERSION, httpVersion) : null;
--- a/devtools/client/netmonitor/test/browser_net_raw_headers.js
+++ b/devtools/client/netmonitor/test/browser_net_raw_headers.js
@@ -26,29 +26,53 @@ add_task(function* () {
   yield wait;
 
   wait = waitForDOM(document, ".headers-overview");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[0]);
   yield wait;
 
   wait = waitForDOM(document, ".raw-headers-container textarea", 2);
-  EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelectorAll(".headers-summary .devtools-button")[2]);
+  EventUtils.sendMouseEvent({ type: "click" }, getRawHeadersButton());
   yield wait;
 
+  testRawHeaderButtonStyle(true);
+
   testShowRawHeaders(getSortedRequests(store.getState()).get(0));
 
-  EventUtils.sendMouseEvent({ type: "click" },
-    document.querySelectorAll(".headers-summary .devtools-button")[1]);
+  EventUtils.sendMouseEvent({ type: "click" }, getRawHeadersButton());
+
+  testRawHeaderButtonStyle(false);
 
   testHideRawHeaders(document);
 
   return teardown(monitor);
 
+  /**
+   * Tests that checked, aria-pressed style is applied correctly
+   *
+   * @param checked
+   *        flag indicating whether button is pressed or not
+   */
+  function testRawHeaderButtonStyle(checked) {
+    let rawHeadersButton = getRawHeadersButton();
+
+    if (checked) {
+      is(rawHeadersButton.classList.contains("checked"), true,
+        "The 'Raw Headers' button should have a 'checked' class.");
+      is(rawHeadersButton.getAttribute("aria-pressed"), "true",
+        "The 'Raw Headers' button should have the 'aria-pressed' attribute set to true");
+    } else {
+      is(rawHeadersButton.classList.contains("checked"), false,
+        "The 'Raw Headers' button should not have a 'checked' class.");
+      is(rawHeadersButton.getAttribute("aria-pressed"), "false",
+        "The 'Raw Headers' button should have the 'aria-pressed' attribute set to false");
+    }
+  }
+
   /*
    * Tests that raw headers were displayed correctly
    */
   function testShowRawHeaders(data) {
     let requestHeaders = document
       .querySelectorAll(".raw-headers-container textarea")[0].value;
     for (let header of data.requestHeaders.headers) {
       ok(requestHeaders.includes(header.name + ": " + header.value),
@@ -64,9 +88,16 @@ add_task(function* () {
 
   /*
    * Tests that raw headers textareas are hidden
    */
   function testHideRawHeaders() {
     ok(!document.querySelector(".raw-headers-container"),
       "raw request headers textarea is empty");
   }
+
+  /**
+   * Returns the 'Raw Headers' button
+   */
+  function getRawHeadersButton() {
+    return document.querySelectorAll(".headers-summary .devtools-button")[2];
+  }
 });