Bug 1394325 - Add an active state for the "Raw headers" button. r=nchevobbe
MozReview-Commit-ID: 2UxkAnJdoXB
--- 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];
+ }
});